feat: improving styles on randomizer button

Feat/library

.github/workflows/update-aur.yml

@@ -95,6 +95,8 @@ jobs:
       - name: Update PKGBUILD and .SRCINFO
         if: steps.check-update.outputs.update_needed == 'true'
         run: |
+          # sleeps for 1 minute to be sure GH updated the release info
+          sleep 60
           # Update pkgver in PKGBUILD
           cd hydra-launcher-bin
           NEW_VERSION="${{ steps.get-version.outputs.version }}"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",
@@ -75,6 +75,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "^7.53.0",
     "react-i18next": "^14.1.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",

src/locales/en/translation.json

@@ -13,6 +13,7 @@
   },
   "sidebar": {
     "catalogue": "Catalogue",
+    "library": "Library",
     "downloads": "Downloads",
     "settings": "Settings",
     "my_library": "My library",
@@ -94,6 +95,7 @@
     "search": "Search games",
     "home": "Home",
     "catalogue": "Catalogue",
+    "library": "Library",
     "downloads": "Downloads",
     "search_results": "Search results",
     "settings": "Settings",
@@ -223,6 +225,7 @@
     "show_more": "Show more",
     "show_less": "Show less",
     "reviews": "Reviews",
+    "review_played_for": "Played for",
     "leave_a_review": "Leave a Review",
     "write_review_placeholder": "Share your thoughts about this game...",
     "sort_newest": "Newest",
@@ -361,7 +364,10 @@
     "show_original": "Show original",
     "show_translation": "Show translation",
     "show_original_translated_from": "Show original (translated from {{language}})",
-    "hide_original": "Hide original"
+    "hide_original": "Hide original",
+    "review_from_blocked_user": "Review from blocked user",
+    "show": "Show",
+    "hide": "Hide"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -689,7 +695,32 @@
     "game_added_to_pinned": "Game added to pinned",
     "karma": "Karma",
     "karma_count": "karma",
-    "karma_description": "Earned from positive likes on reviews"
+    "karma_description": "Earned from positive likes on reviews",
+    "user_reviews": "Reviews",
+    "delete_review": "Delete Review",
+    "loading_reviews": "Loading reviews..."
+  },
+  "library": {
+    "library": "Library",
+    "play": "Play",
+    "download": "Download",
+    "downloading": "Downloading",
+    "game": "game",
+    "games": "games",
+    "grid_view": "Grid view",
+    "compact_view": "Compact view",
+    "large_view": "Large view",
+    "no_games_title": "Your library is empty",
+    "no_games_description": "Add games from the catalogue or download them to get started",
+    "amount_hours": "{{amount}} hours",
+    "amount_minutes": "{{amount}} minutes",
+    "amount_hours_short": "{{amount}}h",
+    "amount_minutes_short": "{{amount}}m",
+    "manual_playtime_tooltip": "This playtime has been manually updated",
+    "all_games": "All Games",
+    "favourited_games": "Favourited",
+    "new_games": "New Games",
+    "top_10": "Top 10"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",

src/locales/es/translation.json

@@ -325,6 +325,7 @@
     "maybe_later": "Tal vez después",
     "no_repacks_found": "Sin fuentes encontradas para este juego",
     "no_reviews_yet": "Sin reseñas aún",
+    "review_played_for": "Jugado por",
     "properties": "Propiedades",
     "rating": "Calificación",
     "rating_count": "Calificación",
@@ -361,7 +362,10 @@
     "you_seemed_to_enjoy_this_game": "Parece que has disfrutado de este juego",
     "language": "Idioma",
     "caption": "Subtítulo",
-    "audio": "Audio"
+    "audio": "Audio",
+    "review_from_blocked_user": "Reseña de usuario bloqueado",
+    "show": "Mostrar",
+    "hide": "Ocultar"
   },
   "activation": {
     "title": "Activar Hydra",
@@ -678,7 +682,11 @@
     "karma_count": "karma",
     "karma_description": "Conseguido por me gustas positivos en reseñas",
     "sort_by": "Filtrar por:",
-    "game_added_to_pinned": "Juego añadido a fijados"
+    "game_added_to_pinned": "Juego añadido a fijados",
+    "user_reviews": "Reseñas",
+    "loading_reviews": "Cargando reseñas...",
+    "no_reviews": "Sin reseñas aún",
+    "delete_review": "Eliminar reseña"
   },
   "achievement": {
     "achievement_unlocked": "Logro desbloqueado",

src/locales/pt-BR/translation.json

@@ -317,6 +317,7 @@
     "sort_lowest_score": "Menor Nota",
     "sort_most_voted": "Mais Votadas",
     "no_reviews_yet": "Ainda não há avaliações",
+    "review_played_for": "Jogado por",
     "be_first_to_review": "Seja o primeiro a compartilhar seus pensamentos sobre este jogo!",
     "rating": "Avaliação",
     "rating_stats": "Avaliação",
@@ -349,7 +350,10 @@
     "show_translation": "Mostrar tradução",
     "show_original_translated_from": "Mostrar original (traduzido do {{language}})",
     "hide_original": "Ocultar original",
-    "rating_count": "Avaliação"
+    "rating_count": "Avaliação",
+    "review_from_blocked_user": "Avaliação de usuário bloqueado",
+    "show": "Mostrar",
+    "hide": "Ocultar"
   },
   "activation": {
     "title": "Ativação",
@@ -693,7 +697,11 @@
     "karma": "Karma",
     "karma_count": "karma",
     "karma_description": "Ganho a partir de curtidas positivas em avaliações",
-    "manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente"
+    "manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
+    "user_reviews": "Avaliações",
+    "loading_reviews": "Carregando avaliações...",
+    "no_reviews": "Ainda não há avaliações",
+    "delete_review": "Excluir avaliação"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",

src/locales/pt-PT/translation.json

@@ -180,7 +180,11 @@
     "download_error_not_cached_on_torbox": "Este download não está disponível no TorBox e a verificação do status do download não está disponível.",
     "game_removed_from_favorites": "Jogo removido dos favoritos",
     "game_added_to_favorites": "Jogo adicionado aos favoritos",
-    "create_start_menu_shortcut": "Criar atalho no Menu Iniciar"
+    "create_start_menu_shortcut": "Criar atalho no Menu Iniciar",
+    "review_from_blocked_user": "Avaliação de utilizador bloqueado",
+    "show": "Mostrar",
+    "hide": "Ocultar",
+    "review_played_for": "Jogado por"
   },
   "activation": {
     "title": "Ativação",
@@ -466,7 +470,11 @@
     "achievements_unlocked": "Conquistas desbloqueadas",
     "earned_points": "Pontos ganhos",
     "show_achievements_on_profile": "Mostre as suas conquistas no perfil",
-    "show_points_on_profile": "Mostre os seus pontos ganhos no perfil"
+    "show_points_on_profile": "Mostre os seus pontos ganhos no perfil",
+    "user_reviews": "Avaliações",
+    "loading_reviews": "A carregar avaliações...",
+    "no_reviews": "Ainda não há avaliações",
+    "delete_review": "Eliminar avaliação"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",

src/locales/ru/translation.json

@@ -227,6 +227,7 @@
     "write_review_placeholder": "Поделитесь своими мыслями об этой игре...",
     "sort_newest": "Сначала новые",
     "no_reviews_yet": "Пока нет отзывов",
+    "review_played_for": "Играли",
     "be_first_to_review": "Станьте первым, кто поделится своими мыслями об этой игре!",
     "sort_oldest": "Сначала старые",
     "sort_highest_score": "Высший балл",
@@ -351,6 +352,8 @@
     "audio": "Аудио",
     "filter_by_source": "Фильтр по источнику",
     "no_repacks_found": "Источники для этой игры не найдены",
+    "show": "Показать",
+    "hide": "Скрыть",
     "delete_review": "Удалить отзыв",
     "remove_review": "Удалить отзыв",
     "delete_review_modal_title": "Вы уверены, что хотите удалить свой отзыв?",
@@ -361,7 +364,8 @@
     "show_original": "Показать оригинал",
     "show_translation": "Показать перевод",
     "show_original_translated_from": "Показать оригинал (переведено с {{language}})",
-    "hide_original": "Скрыть оригинал"
+    "hide_original": "Скрыть оригинал",
+    "review_from_blocked_user": "Отзыв от заблокированного пользователя"
   },
   "activation": {
     "title": "Активировать Hydra",
@@ -689,7 +693,11 @@
     "game_added_to_pinned": "Игра добавлена в закрепленные",
     "karma": "Карма",
     "karma_count": "карма",
-    "karma_description": "Заработана положительными оценками отзывов"
+    "karma_description": "Заработана положительными оценками отзывов",
+    "user_reviews": "Отзывы",
+    "loading_reviews": "Загрузка отзывов...",
+    "no_reviews": "Пока нет отзывов",
+    "delete_review": "Удалить отзыв"
   },
   "achievement": {
     "achievement_unlocked": "Достижение разблокировано",

src/main/events/index.ts

@@ -18,6 +18,7 @@ import "./library/close-game";
 import "./library/delete-game-folder";
 import "./library/get-game-by-object-id";
 import "./library/get-library";
+import "./library/refresh-library-assets";
 import "./library/extract-game-download";
 import "./library/open-game";
 import "./library/open-game-executable-path";

src/main/events/library/get-library.ts

@@ -4,6 +4,7 @@ import {
   downloadsSublevel,
   gamesShopAssetsSublevel,
   gamesSublevel,
+  gameAchievementsSublevel,
 } from "@main/level";
 
 const getLibrary = async (): Promise<LibraryGame[]> => {
@@ -18,14 +19,32 @@ const getLibrary = async (): Promise<LibraryGame[]> => {
             const download = await downloadsSublevel.get(key);
             const gameAssets = await gamesShopAssetsSublevel.get(key);
 
+            let unlockedAchievementCount = 0;
+            let achievementCount = 0;
+
+            try {
+              const achievements = await gameAchievementsSublevel.get(key);
+              if (achievements) {
+                achievementCount = achievements.achievements.length;
+                unlockedAchievementCount =
+                  achievements.unlockedAchievements.length;
+              }
+            } catch {
+              // No achievements data for this game
+            }
+
             return {
               id: key,
               ...game,
               download: download ?? null,
+              unlockedAchievementCount,
+              achievementCount,
+              // Spread gameAssets last to ensure all image URLs are properly set
               ...gameAssets,
-              // Ensure compatibility with LibraryGame type
-              libraryHeroImageUrl:
-                game.libraryHeroImageUrl ?? gameAssets?.libraryHeroImageUrl,
+              // Preserve custom image URLs from game if they exist
+              customIconUrl: game.customIconUrl,
+              customLogoImageUrl: game.customLogoImageUrl,
+              customHeroImageUrl: game.customHeroImageUrl,
             } as LibraryGame;
           })
       );

src/main/events/library/refresh-library-assets.ts

@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { mergeWithRemoteGames } from "@main/services";
+
+const refreshLibraryAssets = async () => {
+  await mergeWithRemoteGames();
+};
+
+registerEvent("refreshLibraryAssets", refreshLibraryAssets);

src/main/main.ts

@@ -16,6 +16,7 @@ import {
   Ludusavi,
   Lock,
   DeckyPlugin,
+  WSClient,
 } from "@main/services";
 import { migrateDownloadSources } from "./helpers/migrate-download-sources";
 
@@ -56,7 +57,7 @@ export const loadState = async () => {
 
     const { syncDownloadSourcesFromApi } = await import("./services/user");
     void syncDownloadSourcesFromApi();
-    // WSClient.connect();
+    WSClient.connect();
   });
 
   const downloads = await downloadsSublevel

src/main/services/hosters/datanodes.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosResponse } from "axios";
 import { wrapper } from "axios-cookiejar-support";
 import { CookieJar } from "tough-cookie";
+import { logger } from "@main/services";
 
 export class DatanodesApi {
   private static readonly jar = new CookieJar();
@@ -20,51 +21,42 @@ export class DatanodesApi {
 
       await this.jar.setCookie("lang=english;", "https://datanodes.to");
 
-      const payload = new URLSearchParams({
-        op: "download2",
-        id: fileCode,
-        method_free: "Free Download >>",
-        dl: "1",
-      });
+      const formData = new FormData();
+      formData.append("op", "download2");
+      formData.append("id", fileCode);
+      formData.append("rand", "");
+      formData.append("referer", "https://datanodes.to/download");
+      formData.append("method_free", "Free Download >>");
+      formData.append("method_premium", "");
+      formData.append("__dl", "1");
 
       const response: AxiosResponse = await this.session.post(
         "https://datanodes.to/download",
-        payload,
+        formData,
         {
           headers: {
-            "User-Agent":
-              "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0",
+            accept: "*/*",
+            "accept-language": "en-US,en;q=0.9",
+            priority: "u=1, i",
+            "sec-ch-ua":
+              '"Google Chrome";v="141", "Not?A_Brand";v="8", "Chromium";v="141"',
+            "sec-ch-ua-mobile": "?0",
+            "sec-ch-ua-platform": '"Windows"',
+            "sec-fetch-dest": "empty",
+            "sec-fetch-mode": "cors",
+            "sec-fetch-site": "same-origin",
             Referer: "https://datanodes.to/download",
-            Origin: "https://datanodes.to",
-            "Content-Type": "application/x-www-form-urlencoded",
           },
-          maxRedirects: 0,
-          validateStatus: (status: number) => status === 302 || status < 400,
         }
       );
 
-      if (response.status === 302) {
-        return response.headers["location"];
-      }
-
       if (typeof response.data === "object" && response.data.url) {
         return decodeURIComponent(response.data.url);
       }
 
-      const htmlContent = String(response.data);
-      if (!htmlContent) {
-        throw new Error("Empty response received");
-      }
-
-      const downloadLinkRegex = /href=["'](https:\/\/[^"']+)["']/;
-      const downloadLinkMatch = downloadLinkRegex.exec(htmlContent);
-      if (downloadLinkMatch) {
-        return downloadLinkMatch[1];
-      }
-
       throw new Error("Failed to get the download link");
     } catch (error) {
-      console.error("Error fetching download URL:", error);
+      logger.error("Error fetching download URL:", error);
       throw error;
     }
   }

src/main/services/hydra-api.ts

@@ -11,6 +11,7 @@ import { getUserData } from "./user/get-user-data";
 import { db } from "@main/level";
 import { levelKeys } from "@main/level/sublevels";
 import type { Auth, User } from "@types";
+import { WSClient } from "./ws";
 
 export interface HydraApiOptions {
   needsAuth?: boolean;
@@ -103,8 +104,8 @@ export class HydraApi {
       await clearGamesRemoteIds();
       uploadGamesBatch();
 
-      // WSClient.close();
-      // WSClient.connect();
+      WSClient.close();
+      WSClient.connect();
 
       const { syncDownloadSourcesFromApi } = await import("./user");
       syncDownloadSourcesFromApi();

src/main/services/library-sync/merge-with-remote-games.ts

@@ -60,13 +60,20 @@ export const mergeWithRemoteGames = async () => {
 
         const localGameShopAsset = await gamesShopAssetsSublevel.get(gameKey);
 
+        // Construct coverImageUrl if not provided by backend (Steam games use predictable pattern)
+        const coverImageUrl =
+          game.coverImageUrl ||
+          (game.shop === "steam"
+            ? `https://shared.steamstatic.com/store_item_assets/steam/apps/${game.objectId}/library_600x900_2x.jpg`
+            : null);
+
         await gamesShopAssetsSublevel.put(gameKey, {
           updatedAt: Date.now(),
           ...localGameShopAsset,
           shop: game.shop,
           objectId: game.objectId,
           title: localGame?.title || game.title, // Preserve local title if it exists
-          coverImageUrl: game.coverImageUrl,
+          coverImageUrl,
           libraryHeroImageUrl: game.libraryHeroImageUrl,
           libraryImageUrl: game.libraryImageUrl,
           logoImageUrl: game.logoImageUrl,

src/main/services/steam-250.ts

@@ -16,7 +16,7 @@ export const requestSteam250 = async (path: string) => {
           if (!steamGameUrl) return null;
 
           return {
-            title: $title.textContent,
+            title: $title.getAttribute("data-title") || "",
             objectId: steamGameUrl.split("/").pop(),
           } as Steam250Game;
         })

src/main/services/window-manager.ts

@@ -296,46 +296,58 @@ export class WindowManager {
     position: AchievementCustomNotificationPosition | undefined
   ) {
     const display = screen.getPrimaryDisplay();
-    const { width, height } = display.workAreaSize;
+    const {
+      x: displayX,
+      y: displayY,
+      width: displayWidth,
+      height: displayHeight,
+    } = display.bounds;
 
     if (position === "bottom-left") {
       return {
-        x: 0,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+        x: displayX,
+        y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
       };
     }
 
     if (position === "bottom-center") {
       return {
-        x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+        x: displayX + (displayWidth - this.NOTIFICATION_WINDOW_WIDTH) / 2,
+        y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
       };
     }
 
     if (position === "bottom-right") {
       return {
-        x: width - this.NOTIFICATION_WINDOW_WIDTH,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+        x: displayX + displayWidth - this.NOTIFICATION_WINDOW_WIDTH,
+        y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
+      };
+    }
+
+    if (position === "top-left") {
+      return {
+        x: displayX,
+        y: displayY,
       };
     }
 
     if (position === "top-center") {
       return {
-        x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
-        y: 0,
+        x: displayX + (displayWidth - this.NOTIFICATION_WINDOW_WIDTH) / 2,
+        y: displayY,
       };
     }
 
     if (position === "top-right") {
       return {
-        x: width - this.NOTIFICATION_WINDOW_WIDTH,
-        y: 0,
+        x: displayX + displayWidth - this.NOTIFICATION_WINDOW_WIDTH,
+        y: displayY,
       };
     }
 
     return {
-      x: 0,
-      y: 0,
+      x: displayX,
+      y: displayY,
     };
   }
 

src/preload/index.ts

@@ -196,6 +196,7 @@ contextBridge.exposeInMainWorld("electron", {
   verifyExecutablePathInUse: (executablePath: string) =>
     ipcRenderer.invoke("verifyExecutablePathInUse", executablePath),
   getLibrary: () => ipcRenderer.invoke("getLibrary"),
+  refreshLibraryAssets: () => ipcRenderer.invoke("refreshLibraryAssets"),
   openGameInstaller: (shop: GameShop, objectId: string) =>
     ipcRenderer.invoke("openGameInstaller", shop, objectId),
   openGameInstallerPath: (shop: GameShop, objectId: string) =>

src/renderer/src/app.scss

@@ -5,7 +5,7 @@
 }
 
 ::-webkit-scrollbar {
-  width: 9px;
+  width: 4px;
   background-color: globals.$dark-background-color;
 }
 

src/renderer/src/app.tsx

@@ -279,7 +279,11 @@ export function App() {
         <article className="container">
           <Header />
 
-          <section ref={contentRef} className="container__content">
+          <section
+            ref={contentRef}
+            id="scrollableDiv"
+            className="container__content"
+          >
             <Outlet />
           </section>
         </article>

src/renderer/src/components/game-context-menu/game-context-menu.tsx

@@ -70,8 +70,10 @@ export function GameContextMenu({
       onClick: () => {
         if (isGameRunning) {
           void handleCloseGame();
-        } else {
+        } else if (canPlay) {
           void handlePlayGame();
+        } else {
+          handleOpenDownloadOptions();
         }
       },
       disabled: isDeleting,

src/renderer/src/components/header/header.scss

@@ -24,7 +24,7 @@
     background-color: globals.$background-color;
     display: inline-flex;
     transition: all ease 0.2s;
-    width: 200px;
+    width: 300px;
     align-items: center;
     border-radius: 8px;
     border: solid 1px globals.$border-color;
@@ -35,7 +35,7 @@
     }
 
     &--focused {
-      width: 250px;
+      width: 350px;
       border-color: #dadbe1;
     }
   }

src/renderer/src/components/header/header.tsx

@@ -13,6 +13,7 @@ import cn from "classnames";
 const pathTitle: Record<string, string> = {
   "/": "home",
   "/catalogue": "catalogue",
+  "/library": "library",
   "/downloads": "downloads",
   "/settings": "settings",
 };
@@ -41,6 +42,8 @@ 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("/library"))
+      return headerTitle || t("library");
     if (location.pathname.startsWith("/search")) return t("search_results");
 
     return t(pathTitle[location.pathname]);
@@ -60,7 +63,7 @@ export function Header() {
   };
 
   const handleSearch = (value: string) => {
-    dispatch(setFilters({ title: value }));
+    dispatch(setFilters({ title: value.slice(0, 255) }));
 
     if (!location.pathname.startsWith("/catalogue")) {
       navigate("/catalogue");

src/renderer/src/components/sidebar/routes.tsx

@@ -3,6 +3,7 @@ import {
   DownloadIcon,
   GearIcon,
   HomeIcon,
+  BookIcon,
 } from "@primer/octicons-react";
 
 export const routes = [
@@ -16,6 +17,11 @@ export const routes = [
     nameKey: "catalogue",
     render: () => <AppsIcon />,
   },
+  {
+    path: "/library",
+    nameKey: "library",
+    render: () => <BookIcon />,
+  },
   {
     path: "/downloads",
     nameKey: "downloads",

src/renderer/src/context/user-profile/user-profile.context.tsx

@@ -14,12 +14,15 @@ export interface UserProfileContext {
   isMe: boolean;
   userStats: UserStats | null;
   getUserProfile: () => Promise<void>;
-  getUserLibraryGames: (sortBy?: string) => Promise<void>;
+  getUserLibraryGames: (sortBy?: string, reset?: boolean) => Promise<void>;
+  loadMoreLibraryGames: (sortBy?: string) => Promise<boolean>;
   setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
   backgroundImage: string;
   badges: Badge[];
   libraryGames: UserGame[];
   pinnedGames: UserGame[];
+  hasMoreLibraryGames: boolean;
+  isLoadingLibraryGames: boolean;
 }
 
 export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
@@ -30,12 +33,15 @@ export const userProfileContext = createContext<UserProfileContext>({
   isMe: false,
   userStats: null,
   getUserProfile: async () => {},
-  getUserLibraryGames: async (_sortBy?: string) => {},
+  getUserLibraryGames: async (_sortBy?: string, _reset?: boolean) => {},
+  loadMoreLibraryGames: async (_sortBy?: string) => false,
   setSelectedBackgroundImage: () => {},
   backgroundImage: "",
   badges: [],
   libraryGames: [],
   pinnedGames: [],
+  hasMoreLibraryGames: false,
+  isLoadingLibraryGames: false,
 });
 
 const { Provider } = userProfileContext;
@@ -62,6 +68,9 @@ export function UserProfileContextProvider({
     DEFAULT_USER_PROFILE_BACKGROUND
   );
   const [selectedBackgroundImage, setSelectedBackgroundImage] = useState("");
+  const [libraryPage, setLibraryPage] = useState(0);
+  const [hasMoreLibraryGames, setHasMoreLibraryGames] = useState(true);
+  const [isLoadingLibraryGames, setIsLoadingLibraryGames] = useState(false);
 
   const isMe = userDetails?.id === userProfile?.id;
 
@@ -93,7 +102,13 @@ export function UserProfileContextProvider({
   }, [userId]);
 
   const getUserLibraryGames = useCallback(
-    async (sortBy?: string) => {
+    async (sortBy?: string, reset = true) => {
+      if (reset) {
+        setLibraryPage(0);
+        setHasMoreLibraryGames(true);
+        setIsLoadingLibraryGames(true);
+      }
+
       try {
         const params = new URLSearchParams();
         params.append("take", "12");
@@ -115,18 +130,74 @@ export function UserProfileContextProvider({
         if (response) {
           setLibraryGames(response.library);
           setPinnedGames(response.pinnedGames);
+          setHasMoreLibraryGames(response.library.length === 12);
         } else {
           setLibraryGames([]);
           setPinnedGames([]);
+          setHasMoreLibraryGames(false);
         }
       } catch (error) {
         setLibraryGames([]);
         setPinnedGames([]);
+        setHasMoreLibraryGames(false);
+      } finally {
+        setIsLoadingLibraryGames(false);
       }
     },
     [userId]
   );
 
+  const loadMoreLibraryGames = useCallback(
+    async (sortBy?: string): Promise<boolean> => {
+      if (isLoadingLibraryGames || !hasMoreLibraryGames) {
+        return false;
+      }
+
+      setIsLoadingLibraryGames(true);
+      try {
+        const nextPage = libraryPage + 1;
+        const params = new URLSearchParams();
+        params.append("take", "12");
+        params.append("skip", String(nextPage * 12));
+        if (sortBy) {
+          params.append("sortBy", sortBy);
+        }
+
+        const queryString = params.toString();
+        const url = queryString
+          ? `/users/${userId}/library?${queryString}`
+          : `/users/${userId}/library`;
+
+        const response = await window.electron.hydraApi.get<{
+          library: UserGame[];
+          pinnedGames: UserGame[];
+        }>(url);
+
+        if (response && response.library.length > 0) {
+          setLibraryGames((prev) => {
+            const existingIds = new Set(prev.map((game) => game.objectId));
+            const newGames = response.library.filter(
+              (game) => !existingIds.has(game.objectId)
+            );
+            return [...prev, ...newGames];
+          });
+          setLibraryPage(nextPage);
+          setHasMoreLibraryGames(response.library.length === 12);
+          return true;
+        } else {
+          setHasMoreLibraryGames(false);
+          return false;
+        }
+      } catch (error) {
+        setHasMoreLibraryGames(false);
+        return false;
+      } finally {
+        setIsLoadingLibraryGames(false);
+      }
+    },
+    [userId, libraryPage, hasMoreLibraryGames, isLoadingLibraryGames]
+  );
+
   const getUserProfile = useCallback(async () => {
     getUserStats();
     getUserLibraryGames();
@@ -164,6 +235,8 @@ export function UserProfileContextProvider({
     setLibraryGames([]);
     setPinnedGames([]);
     setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
+    setLibraryPage(0);
+    setHasMoreLibraryGames(true);
 
     getUserProfile();
     getBadges();
@@ -177,12 +250,15 @@ export function UserProfileContextProvider({
         isMe,
         getUserProfile,
         getUserLibraryGames,
+        loadMoreLibraryGames,
         setSelectedBackgroundImage,
         backgroundImage: getBackgroundImageUrl(),
         userStats,
         badges,
         libraryGames,
         pinnedGames,
+        hasMoreLibraryGames,
+        isLoadingLibraryGames,
       }}
     >
       {children}

src/renderer/src/declaration.d.ts

@@ -159,6 +159,7 @@ declare global {
     ) => Promise<void>;
     verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
     getLibrary: () => Promise<LibraryGame[]>;
+    refreshLibraryAssets: () => Promise<void>;
     openGameInstaller: (shop: GameShop, objectId: string) => Promise<boolean>;
     openGameInstallerPath: (shop: GameShop, objectId: string) => Promise<void>;
     openGameExecutablePath: (shop: GameShop, objectId: string) => Promise<void>;

src/renderer/src/hooks/use-section-collapse.ts

@@ -3,12 +3,14 @@ import { useState, useCallback } from "react";
 interface SectionCollapseState {
   pinned: boolean;
   library: boolean;
+  reviews: boolean;
 }
 
 export function useSectionCollapse() {
   const [collapseState, setCollapseState] = useState<SectionCollapseState>({
     pinned: false,
     library: false,
+    reviews: false,
   });
 
   const toggleSection = useCallback((section: keyof SectionCollapseState) => {
@@ -23,5 +25,6 @@ export function useSectionCollapse() {
     toggleSection,
     isPinnedCollapsed: collapseState.pinned,
     isLibraryCollapsed: collapseState.library,
+    isReviewsCollapsed: collapseState.reviews,
   };
 }

src/renderer/src/main.tsx

@@ -29,6 +29,7 @@ import Settings from "./pages/settings/settings";
 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 { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
 console.log = logger.log;
@@ -64,6 +65,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route element={<App />}>
             <Route path="/" element={<Home />} />
             <Route path="/catalogue" element={<Catalogue />} />
+            <Route path="/library" element={<Library />} />
             <Route path="/downloads" element={<Downloads />} />
             <Route path="/game/:shop/:objectId" element={<GameDetails />} />
             <Route path="/settings" element={<Settings />} />

src/renderer/src/pages/catalogue/catalogue.tsx

@@ -35,7 +35,7 @@ export default function Catalogue() {
 
   const { steamDevelopers, steamPublishers, downloadSources } = useCatalogue();
 
-  const { steamGenres, steamUserTags } = useAppSelector(
+  const { steamGenres, steamUserTags, filters, page } = useAppSelector(
     (state) => state.catalogueSearch
   );
 
@@ -47,8 +47,6 @@ export default function Catalogue() {
 
   const { formatNumber } = useFormat();
 
-  const { filters, page } = useAppSelector((state) => state.catalogueSearch);
-
   const dispatch = useAppDispatch();
 
   const { t, i18n } = useTranslation("catalogue");

src/renderer/src/pages/game-details/game-reviews.tsx

@@ -163,7 +163,6 @@ export function GameReviews({
           take: "20",
           skip: skip.toString(),
           sortBy: reviewsSortBy,
-          language: i18n.language,
         });
 
         const response = await window.electron.hydraApi.get(

src/renderer/src/pages/game-details/hero.scss

@@ -231,44 +231,50 @@ $hero-height: 350px;
   }
 
   &__randomizer-button {
-    padding: calc(globals.$spacing-unit * 1.5);
-    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    bottom: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 2);
+    z-index: 100;
+    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
+    background-color: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
     border-radius: 8px;
     transition: all ease 0.2s;
     cursor: pointer;
     min-height: 40px;
-    min-width: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: globals.$spacing-unit;
     color: globals.$muted-color;
     border: solid 1px globals.$border-color;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+    box-shadow:
+      0px 0px 10px 0px rgba(0, 0, 0, 0.8),
+      0px 2px 8px 0px rgba(255, 255, 255, 0.1);
     animation: slide-in 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+    overflow: visible;
 
-    &:active {
-      opacity: 0.9;
+    &:disabled {
+      opacity: globals.$disabled-opacity;
+      cursor: not-allowed;
     }
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(255, 255, 255, 0.12);
       color: globals.$body-color;
     }
   }
 
   &__stars-icon-container {
-    width: 20px;
+    width: 16px;
     height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
   }
 
   &__stars-icon {
-    width: 26px;
+    width: 70px;
     position: absolute;
-    top: -3px;
+    top: -28px;
+    left: -27px;
   }
 }

src/renderer/src/pages/game-details/review-item.scss

@@ -8,11 +8,23 @@
 
   &__review-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1);
     margin-bottom: calc(globals.$spacing-unit * 1.5);
   }
 
+  &__review-header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  &__review-header-bottom {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
   &__review-user {
     display: flex;
     align-items: center;
@@ -22,7 +34,13 @@
   &__review-user-info {
     display: flex;
     flex-direction: column;
-    gap: calc(globals.$spacing-unit * 0.25);
+    gap: calc(globals.$spacing-unit * 0.45);
+  }
+
+  &__review-meta-row {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.75);
   }
 
   &__review-display-name {
@@ -157,28 +175,28 @@
   &__review-score-stars {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 2px 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  &__review-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
   }
 
   &__review-star {
-    color: #666666;
+    color: rgba(255, 255, 255, 0.7);
     transition: color 0.2s ease;
     cursor: default;
 
     &--filled {
-      color: #ffffff;
-
-      &.game-details__review-score--red {
-        color: #fca5a5;
-      }
-
-      &.game-details__review-score--yellow {
-        color: #fcd34d;
-      }
-
-      &.game-details__review-score--green {
-        color: #86efac;
-      }
+      color: rgba(255, 255, 255, 0.7);
     }
 
     &--empty {
@@ -198,6 +216,24 @@
     font-size: globals.$small-font-size;
   }
 
+  &__review-playtime {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 11px;
+    font-weight: 500;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 2px 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 0;
+
+    svg {
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
   &__review-content {
     color: globals.$body-color;
     line-height: 1.5;

src/renderer/src/pages/game-details/review-item.tsx

@@ -7,9 +7,10 @@ import { useState } from "react";
 import type { GameReview } from "@types";
 
 import { sanitizeHtml } from "@shared";
-import { useDate } from "@renderer/hooks";
+import { useDate, useFormat } from "@renderer/hooks";
 import { formatNumber } from "@renderer/helpers";
 import { Avatar } from "@renderer/components";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 
 import "./review-item.scss";
 
@@ -29,13 +30,6 @@ interface ReviewItemProps {
   ) => void;
 }
 
-const getScoreColorClass = (score: number): string => {
-  if (score >= 1 && score <= 2) return "game-details__review-score--red";
-  if (score >= 3 && score <= 3) return "game-details__review-score--yellow";
-  if (score >= 4 && score <= 5) return "game-details__review-score--green";
-  return "";
-};
-
 const getRatingText = (score: number, t: (key: string) => string): string => {
   switch (score) {
     case 1:
@@ -68,28 +62,22 @@ export function ReviewItem({
   const navigate = useNavigate();
   const { t, i18n } = useTranslation("game_details");
   const { formatDistance } = useDate();
+  const { numberFormatter } = useFormat();
 
   const [showOriginal, setShowOriginal] = useState(false);
 
-  // Check if this is the user's own review
   const isOwnReview = userDetailsId === review.user.id;
 
-  // Helper to get base language code (e.g., "pt" from "pt-BR")
-  const getBaseLanguage = (lang: string) => lang.split("-")[0];
+  const getBaseLanguage = (lang: string | null) => lang?.split("-")[0] || "";
 
-  // Check if the review is in a different language (comparing base language codes)
   const isDifferentLanguage =
     getBaseLanguage(review.detectedLanguage) !== getBaseLanguage(i18n.language);
 
-  // Check if translation is available and needed (but not for own reviews)
   const needsTranslation =
-    !isOwnReview &&
-    isDifferentLanguage &&
-    review.translations &&
-    review.translations[i18n.language];
+    !isOwnReview && isDifferentLanguage && review.translations[i18n.language];
 
-  // Get the full language name using Intl.DisplayNames
-  const getLanguageName = (languageCode: string) => {
+  const getLanguageName = (languageCode: string | null) => {
+    if (!languageCode) return "";
     try {
       const displayNames = new Intl.DisplayNames([i18n.language], {
         type: "language",
@@ -100,6 +88,20 @@ export function ReviewItem({
     }
   };
 
+  // Format playtime similar to hero panel
+  const formatPlayTime = (playTimeInSeconds: number) => {
+    const minutes = playTimeInSeconds / 60;
+
+    if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+      return t("amount_minutes", {
+        amount: minutes.toFixed(0),
+      });
+    }
+
+    const hours = minutes / 60;
+    return t("amount_hours", { amount: numberFormatter.format(hours) });
+  };
+
   // Determine which content to show - always show original for own reviews
   const displayContent = needsTranslation
     ? review.translations[i18n.language]
@@ -109,12 +111,12 @@ export function ReviewItem({
     return (
       <div className="game-details__review-item">
         <div className="game-details__blocked-review-simple">
-          Review from blocked user —{" "}
+          {t("review_from_blocked_user")}
           <button
             className="game-details__blocked-review-show-link"
             onClick={() => onToggleVisibility(review.id)}
           >
-            Show
+            {t("show")}
           </button>
         </div>
       </div>
@@ -124,54 +126,61 @@ export function ReviewItem({
   return (
     <div className="game-details__review-item">
       <div className="game-details__review-header">
-        <div className="game-details__review-user">
-          <button
-            onClick={() => navigate(`/profile/${review.user.id}`)}
-            title={review.user.displayName}
-          >
-            <Avatar
-              src={review.user.profileImageUrl}
-              alt={review.user.displayName || "User"}
-              size={40}
-            />
-          </button>
-          <div className="game-details__review-user-info">
+        <div className="game-details__review-header-top">
+          <div className="game-details__review-user">
             <button
-              className="game-details__review-display-name game-details__review-display-name--clickable"
-              onClick={() =>
-                review.user.id && navigate(`/profile/${review.user.id}`)
-              }
+              onClick={() => navigate(`/profile/${review.user.id}`)}
+              title={review.user.displayName}
             >
-              {review.user.displayName || "Anonymous"}
+              <Avatar
+                src={review.user.profileImageUrl}
+                alt={review.user.displayName || "User"}
+                size={40}
+              />
             </button>
-            <div className="game-details__review-date">
-              <ClockIcon size={12} />
-              {formatDistance(new Date(review.createdAt), new Date(), {
-                addSuffix: true,
-              })}
+            <div className="game-details__review-user-info">
+              <button
+                className="game-details__review-display-name game-details__review-display-name--clickable"
+                onClick={() =>
+                  review.user.id && navigate(`/profile/${review.user.id}`)
+                }
+              >
+                {review.user.displayName || "Anonymous"}
+              </button>
             </div>
           </div>
+          <div className="game-details__review-date">
+            {formatDistance(new Date(review.createdAt), new Date(), {
+              addSuffix: true,
+            })}
+          </div>
         </div>
-        <div
-          className="game-details__review-score-stars"
-          title={getRatingText(review.score, t)}
-        >
-          {[1, 2, 3, 4, 5].map((starValue) => (
-            <Star
-              key={starValue}
-              size={20}
-              fill={starValue <= review.score ? "currentColor" : "none"}
-              className={`game-details__review-star ${
-                starValue <= review.score
-                  ? "game-details__review-star--filled"
-                  : "game-details__review-star--empty"
-              } ${
-                starValue <= review.score
-                  ? getScoreColorClass(review.score)
-                  : ""
-              }`}
-            />
-          ))}
+        <div className="game-details__review-header-bottom">
+          <div className="game-details__review-meta-row">
+            <div
+              className="game-details__review-score-stars"
+              title={getRatingText(review.score, t)}
+            >
+              <Star
+                size={12}
+                className="game-details__review-star game-details__review-star--filled"
+              />
+              <span className="game-details__review-score-text">
+                {review.score}/5
+              </span>
+            </div>
+            {Boolean(
+              review.playTimeInSeconds && review.playTimeInSeconds > 0
+            ) && (
+              <div className="game-details__review-playtime">
+                <ClockIcon size={12} />
+                <span>
+                  {t("review_played_for")}{" "}
+                  {formatPlayTime(review.playTimeInSeconds || 0)}
+                </span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <div>
@@ -323,7 +332,7 @@ export function ReviewItem({
             className="game-details__blocked-review-hide-link"
             onClick={() => onToggleVisibility(review.id)}
           >
-            Hide
+            {t("hide")}
           </button>
         )}
       </div>

src/renderer/src/pages/library/filter-options.scss

@@ -0,0 +1,63 @@
+@use "../../scss/globals.scss";
+
+.library-filter-options {
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    flex-wrap: wrap;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    padding: 8px 16px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all ease 0.2s;
+    white-space: nowrap; /* prevent label and count from wrapping */
+    border: 1px solid rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &.active {
+      color: #000;
+      background: #fff;
+      svg,
+      svg * {
+        fill: currentColor;
+        color: currentColor;
+      }
+
+      .library-filter-options__count {
+        background: #ebebeb;
+        color: rgba(0, 0, 0, 0.9);
+      }
+    }
+  }
+
+  &__label {
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  &__count {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.95);
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+    transition: all ease 0.2s;
+  }
+}

src/renderer/src/pages/library/filter-options.tsx

@@ -0,0 +1,61 @@
+import { useTranslation } from "react-i18next";
+import "./filter-options.scss";
+
+export type FilterOption = "all" | "favourited" | "new" | "top10";
+
+interface FilterOptionsProps {
+  filterBy: FilterOption;
+  onFilterChange: (filterBy: FilterOption) => void;
+  allGamesCount: number;
+  favouritedCount: number;
+  newGamesCount: number;
+  top10Count: number;
+}
+
+export function FilterOptions({
+  filterBy,
+  onFilterChange,
+  allGamesCount,
+  favouritedCount,
+  newGamesCount,
+  top10Count,
+}: Readonly<FilterOptionsProps>) {
+  const { t } = useTranslation("library");
+
+  return (
+    <div className="library-filter-options__container">
+      <button
+        className={`library-filter-options__option ${filterBy === "all" ? "active" : ""}`}
+        onClick={() => onFilterChange("all")}
+      >
+        <span className="library-filter-options__label">{t("all_games")}</span>
+        <span className="library-filter-options__count">{allGamesCount}</span>
+      </button>
+      <button
+        className={`library-filter-options__option ${filterBy === "favourited" ? "active" : ""}`}
+        onClick={() => onFilterChange("favourited")}
+      >
+        <span className="library-filter-options__label">
+          {t("Favourite Games")}
+        </span>
+        <span className="library-filter-options__count">{favouritedCount}</span>
+      </button>
+      <button
+        className={`library-filter-options__option ${filterBy === "new" ? "active" : ""}`}
+        onClick={() => onFilterChange("new")}
+      >
+        <span className="library-filter-options__label">{t("new_games")}</span>
+        <span className="library-filter-options__count">{newGamesCount}</span>
+      </button>
+      <button
+        className={`library-filter-options__option ${filterBy === "top10" ? "active" : ""}`}
+        onClick={() => onFilterChange("top10")}
+      >
+        <span className="library-filter-options__label">
+          {t("Most Played")}
+        </span>
+        <span className="library-filter-options__count">{top10Count}</span>
+      </button>
+    </div>
+  );
+}

src/renderer/src/pages/library/library-game-card-large.scss

@@ -0,0 +1,295 @@
+@use "../../scss/globals.scss";
+
+.library-game-card-large {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: all ease 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  text-align: left;
+
+  &:before {
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 172%;
+    position: absolute;
+    background: linear-gradient(
+      35deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0.07) 51.5%,
+      rgba(255, 255, 255, 0.15) 74%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+    transition: all ease 0.3s;
+    transform: translateY(-36%);
+    opacity: 0.5;
+    z-index: 1;
+  }
+
+  &:hover::before {
+    opacity: 1;
+    transform: translateY(-20%);
+  }
+
+  &:hover {
+    transform: scale(1.01);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+
+  &__gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0.2) 50%,
+      rgba(0, 0, 0, 0.3) 100%
+    );
+    z-index: 1;
+  }
+
+  &__overlay {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__menu-button {
+    align-self: flex-start;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    color: rgba(255, 255, 255, 0.95);
+    padding: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    transform: scale(0.9);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.6);
+      border-color: rgba(255, 255, 255, 0.25);
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  &__logo-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__logo {
+    max-height: 120px;
+    max-width: 400px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
+  }
+
+  &__info-bar {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    justify-content: flex-end;
+  }
+
+  &__playtime {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: rgba(255, 255, 255, 0.95);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-size: 14px;
+  }
+
+  &__playtime-text {
+    font-weight: 500;
+  }
+
+  &__manual-playtime {
+    color: globals.$warning-color;
+  }
+
+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 6px 12px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__achievement-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+  }
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__achievement-trophy {
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    width: 100%;
+    height: 4px;
+    transition: all ease 0.2s;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background-color: globals.$muted-color;
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  &__achievement-count {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: nowrap;
+  }
+
+  &__achievement-percentage {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.85);
+    white-space: nowrap;
+  }
+
+  &__action-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    transition: all ease 0.2s;
+    flex: 0 0 auto;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+      border-color: rgba(255, 255, 255, 0.3);
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  &:hover &__menu-button {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &__action-icon--downloading {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

src/renderer/src/pages/library/library-game-card-large.tsx

@@ -0,0 +1,279 @@
+import { LibraryGame } from "@types";
+import { useDownload, useFormat } from "@renderer/hooks";
+import { useNavigate } from "react-router-dom";
+import { buildGameDetailsPath } from "@renderer/helpers";
+import {
+  PlayIcon,
+  DownloadIcon,
+  ClockIcon,
+  AlertFillIcon,
+  ThreeBarsIcon,
+  TrophyIcon,
+  XIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useCallback, useState } from "react";
+import { useGameActions } from "@renderer/components/game-context-menu/use-game-actions";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import { GameContextMenu } from "@renderer/components";
+import "./library-game-card-large.scss";
+
+interface LibraryGameCardLargeProps {
+  game: LibraryGame;
+}
+
+const getImageWithCustomPriority = (
+  customUrl: string | null | undefined,
+  originalUrl: string | null | undefined,
+  fallbackUrl?: string | null | undefined
+) => {
+  return customUrl || originalUrl || fallbackUrl || "";
+};
+
+export function LibraryGameCardLarge({
+  game,
+}: Readonly<LibraryGameCardLargeProps>) {
+  const { t } = useTranslation("library");
+  const { numberFormatter } = useFormat();
+  const navigate = useNavigate();
+  const { lastPacket } = useDownload();
+  const [contextMenu, setContextMenu] = useState<{
+    visible: boolean;
+    position: { x: number; y: number };
+  }>({ visible: false, position: { x: 0, y: 0 } });
+
+  const isGameDownloading =
+    game?.download?.status === "active" && lastPacket?.gameId === game?.id;
+
+  const formatPlayTime = useCallback(
+    (playTimeInMilliseconds = 0, isShort = false) => {
+      const minutes = playTimeInMilliseconds / 60000;
+
+      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+        return t(isShort ? "amount_minutes_short" : "amount_minutes", {
+          amount: minutes.toFixed(0),
+        });
+      }
+
+      const hours = minutes / 60;
+      const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
+      const hoursAmount = isShort
+        ? Math.floor(hours)
+        : numberFormatter.format(hours);
+
+      return t(hoursKey, { amount: hoursAmount });
+    },
+    [numberFormatter, t]
+  );
+
+  const handleCardClick = () => {
+    navigate(buildGameDetailsPath(game));
+  };
+
+  const {
+    handlePlayGame,
+    handleOpenDownloadOptions,
+    handleCloseGame,
+    isGameRunning,
+  } = useGameActions(game);
+
+  const handleActionClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isGameRunning) {
+      try {
+        await handleCloseGame();
+      } catch (e) {
+        console.error(e);
+      }
+      return;
+    }
+    try {
+      await handlePlayGame();
+    } catch (err) {
+      console.error(err);
+      try {
+        handleOpenDownloadOptions();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setContextMenu({
+      visible: true,
+      position: { x: e.clientX, y: e.clientY },
+    });
+  };
+
+  const handleMenuButtonClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setContextMenu({
+      visible: true,
+      position: {
+        x: e.currentTarget.getBoundingClientRect().right,
+        y: e.currentTarget.getBoundingClientRect().bottom,
+      },
+    });
+  };
+
+  const handleCloseContextMenu = () => {
+    setContextMenu({ visible: false, position: { x: 0, y: 0 } });
+  };
+
+  // Use libraryHeroImageUrl as background, fallback to libraryImageUrl
+  const backgroundImage = getImageWithCustomPriority(
+    game.libraryHeroImageUrl,
+    game.libraryImageUrl,
+    game.iconUrl
+  );
+
+  // For logo, check if logoImageUrl exists (similar to game details page)
+  const logoImage = game.logoImageUrl;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="library-game-card-large"
+        onClick={handleCardClick}
+        onContextMenu={handleContextMenu}
+      >
+        <div
+          className="library-game-card-large__background"
+          style={{ backgroundImage: `url(${backgroundImage})` }}
+        />
+        <div className="library-game-card-large__gradient" />
+
+        <div className="library-game-card-large__overlay">
+          <div className="library-game-card-large__top-section">
+            <div className="library-game-card-large__playtime">
+              {game.hasManuallyUpdatedPlaytime ? (
+                <AlertFillIcon
+                  size={11}
+                  className="library-game-card-large__manual-playtime"
+                />
+              ) : (
+                <ClockIcon size={11} />
+              )}
+              <span className="library-game-card-large__playtime-text">
+                {formatPlayTime(game.playTimeInMilliseconds)}
+              </span>
+            </div>
+            <button
+              type="button"
+              className="library-game-card-large__menu-button"
+              onClick={handleMenuButtonClick}
+              title="More options"
+            >
+              <ThreeBarsIcon size={16} />
+            </button>
+          </div>
+
+          <div className="library-game-card-large__logo-container">
+            {logoImage ? (
+              <img
+                src={logoImage}
+                alt={game.title}
+                className="library-game-card-large__logo"
+              />
+            ) : (
+              <h3 className="library-game-card-large__title">{game.title}</h3>
+            )}
+          </div>
+
+          <div className="library-game-card-large__info-bar">
+            {/* Achievements section */}
+            {(game.achievementCount ?? 0) > 0 && (
+              <div className="library-game-card-large__achievements">
+                <div className="library-game-card-large__achievement-header">
+                  <div className="library-game-card-large__achievements-gap">
+                    <TrophyIcon
+                      size={14}
+                      className="library-game-card-large__achievement-trophy"
+                    />
+                    <span className="library-game-card-large__achievement-count">
+                      {game.unlockedAchievementCount ?? 0} /{" "}
+                      {game.achievementCount ?? 0}
+                    </span>
+                  </div>
+                  <span className="library-game-card-large__achievement-percentage">
+                    {Math.round(
+                      ((game.unlockedAchievementCount ?? 0) /
+                        (game.achievementCount ?? 1)) *
+                        100
+                    )}
+                    %
+                  </span>
+                </div>
+                <div className="library-game-card-large__achievement-progress">
+                  <div
+                    className="library-game-card-large__achievement-bar"
+                    style={{
+                      width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            <button
+              type="button"
+              className="library-game-card-large__action-button"
+              onClick={handleActionClick}
+            >
+              {(() => {
+                if (isGameDownloading) {
+                  return (
+                    <>
+                      <DownloadIcon
+                        size={16}
+                        className="library-game-card-large__action-icon--downloading"
+                      />
+                      {t("downloading")}
+                    </>
+                  );
+                }
+
+                if (isGameRunning) {
+                  return (
+                    <>
+                      <XIcon size={16} />
+                      {t("close")}
+                    </>
+                  );
+                }
+
+                if (game.executablePath) {
+                  return (
+                    <>
+                      <PlayIcon size={16} />
+                      {t("play")}
+                    </>
+                  );
+                }
+
+                return (
+                  <>
+                    <DownloadIcon size={16} />
+                    {t("download")}
+                  </>
+                );
+              })()}
+            </button>
+          </div>
+        </div>
+      </button>
+      <GameContextMenu
+        game={game}
+        visible={contextMenu.visible}
+        position={contextMenu.position}
+        onClose={handleCloseContextMenu}
+      />
+    </>
+  );
+}

src/renderer/src/pages/library/library-game-card.scss

@@ -0,0 +1,289 @@
+@use "../../scss/globals.scss";
+
+.library-game-card {
+  &__wrapper {
+    cursor: pointer;
+    transition: all ease 0.2s;
+    box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    aspect-ratio: 3 / 4;
+    position: relative;
+    border: none;
+    background: none;
+    padding: 0;
+    border-radius: 4px;
+    overflow: hidden;
+    display: block;
+    container-type: inline-size;
+
+    &:before {
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 172%;
+      position: absolute;
+      background: linear-gradient(
+        35deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.07) 51.5%,
+        rgba(255, 255, 255, 0.15) 64%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      transition: all ease 0.3s;
+      transform: translateY(-36%);
+      opacity: 0.5;
+      z-index: 1;
+    }
+
+    &:hover {
+      transform: scale(1.02);
+    }
+
+    &:hover::before {
+      opacity: 1;
+      transform: translateY(-20%);
+    }
+  }
+
+  &__overlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 5%, transparent 100%);
+    padding: 8px;
+    z-index: 2;
+  }
+
+  &__top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &__playtime {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: rgba(255, 255, 255, 0.8);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: all ease 0.2s;
+
+    &-long {
+      display: inline;
+      font-size: 12px;
+    }
+
+    &-short {
+      display: none;
+      font-size: 12px;
+    }
+
+    // When the card is narrow (less than 140px), show short format
+    @container (max-width: 140px) {
+      &-long {
+        display: none;
+      }
+
+      &-short {
+        display: inline;
+      }
+    }
+  }
+
+  &__manual-playtime {
+    color: globals.$warning-color;
+  }
+
+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px 8px;
+    opacity: 0;
+    transform: translateY(8px);
+    transition: all ease 0.2s;
+    pointer-events: none;
+    width: 100%;
+  }
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__achievement-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: space-between;
+  }
+
+  &__achievement-trophy {
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    margin-top: 8px;
+    width: 100%;
+    height: 4px;
+    transition: all ease 0.2s;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background-color: globals.$muted-color;
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    position: relative;
+  }
+
+  &__achievement-count {
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: nowrap;
+  }
+
+  &__achievement-percentage {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.7);
+    white-space: nowrap;
+  }
+
+  &__action-button {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: solid 1px rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transform: scale(0.9);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.4);
+      transform: scale(1.1);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  &__menu-button {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    color: rgba(255, 255, 255, 0.8);
+    padding: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    transform: scale(0.9);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.6);
+      border-color: rgba(255, 255, 255, 0.25);
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  &__wrapper:hover &__action-button,
+  &__wrapper:hover &__menu-button {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &__wrapper:hover &__achievements {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  &__action-icon {
+    &--downloading {
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  &__game-image {
+    object-fit: cover;
+    border-radius: 4px;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Force fixed size for compact grid cells so cards render at 220x320 */
+.library__games-grid--compact .library-game-card__wrapper {
+  width: 215px;
+  height: 320px;
+  aspect-ratio: unset;
+}

src/renderer/src/pages/library/library-game-card.tsx

@@ -0,0 +1,202 @@
+import { LibraryGame } from "@types";
+import { useFormat } from "@renderer/hooks";
+import { useNavigate } from "react-router-dom";
+import { useCallback, useState } from "react";
+import { buildGameDetailsPath } from "@renderer/helpers";
+import {
+  ClockIcon,
+  AlertFillIcon,
+  ThreeBarsIcon,
+  TrophyIcon,
+} from "@primer/octicons-react";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import { Tooltip } from "react-tooltip";
+import { useTranslation } from "react-i18next";
+import { GameContextMenu } from "@renderer/components";
+import "./library-game-card.scss";
+
+interface LibraryGameCardProps {
+  game: LibraryGame;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}
+
+export function LibraryGameCard({
+  game,
+  onMouseEnter,
+  onMouseLeave,
+}: Readonly<LibraryGameCardProps>) {
+  const { t } = useTranslation("library");
+  const { numberFormatter } = useFormat();
+  const navigate = useNavigate();
+  const [isTooltipHovered, setIsTooltipHovered] = useState(false);
+  const [contextMenu, setContextMenu] = useState<{
+    visible: boolean;
+    position: { x: number; y: number };
+  }>({ visible: false, position: { x: 0, y: 0 } });
+
+  const formatPlayTime = useCallback(
+    (playTimeInMilliseconds = 0, isShort = false) => {
+      const minutes = playTimeInMilliseconds / 60000;
+
+      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+        return t(isShort ? "amount_minutes_short" : "amount_minutes", {
+          amount: minutes.toFixed(0),
+        });
+      }
+
+      const hours = minutes / 60;
+      const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
+      const hoursAmount = isShort
+        ? Math.floor(hours)
+        : numberFormatter.format(hours);
+
+      return t(hoursKey, { amount: hoursAmount });
+    },
+    [numberFormatter, t]
+  );
+
+  const handleCardClick = () => {
+    navigate(buildGameDetailsPath(game));
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setContextMenu({
+      visible: true,
+      position: { x: e.clientX, y: e.clientY },
+    });
+  };
+
+  const handleMenuButtonClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setContextMenu({
+      visible: true,
+      position: {
+        x: e.currentTarget.getBoundingClientRect().right,
+        y: e.currentTarget.getBoundingClientRect().bottom,
+      },
+    });
+  };
+
+  const handleCloseContextMenu = () => {
+    setContextMenu({ visible: false, position: { x: 0, y: 0 } });
+  };
+
+  const coverImage =
+    game.coverImageUrl ??
+    game.libraryImageUrl ??
+    game.libraryHeroImageUrl ??
+    game.iconUrl ??
+    undefined;
+
+  return (
+    <>
+      <button
+        type="button"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className="library-game-card__wrapper"
+        title={isTooltipHovered ? undefined : game.title}
+        onClick={handleCardClick}
+        onContextMenu={handleContextMenu}
+      >
+        <div className="library-game-card__overlay">
+          <div className="library-game-card__top-section">
+            <div
+              className="library-game-card__playtime"
+              data-tooltip-place="top"
+              data-tooltip-content={
+                game.hasManuallyUpdatedPlaytime
+                  ? t("manual_playtime_tooltip")
+                  : undefined
+              }
+              data-tooltip-id={game.objectId}
+            >
+              {game.hasManuallyUpdatedPlaytime ? (
+                <AlertFillIcon
+                  size={11}
+                  className="library-game-card__manual-playtime"
+                />
+              ) : (
+                <ClockIcon size={11} />
+              )}
+              <span className="library-game-card__playtime-long">
+                {formatPlayTime(game.playTimeInMilliseconds)}
+              </span>
+              <span className="library-game-card__playtime-short">
+                {formatPlayTime(game.playTimeInMilliseconds, true)}
+              </span>
+            </div>
+
+            <button
+              type="button"
+              className="library-game-card__menu-button"
+              onClick={handleMenuButtonClick}
+              title="More options"
+            >
+              <ThreeBarsIcon size={16} />
+            </button>
+          </div>
+
+          {/* Achievements section - shown on hover */}
+          {(game.achievementCount ?? 0) > 0 && (
+            <div className="library-game-card__achievements">
+              <div className="library-game-card__achievement-header">
+                <div className="library-game-card__achievements-gap">
+                  <TrophyIcon
+                    size={14}
+                    className="library-game-card__achievement-trophy"
+                  />
+                  <span className="library-game-card__achievement-count">
+                    {game.unlockedAchievementCount ?? 0} /{" "}
+                    {game.achievementCount ?? 0}
+                  </span>
+                </div>
+                <span className="library-game-card__achievement-percentage">
+                  {Math.round(
+                    ((game.unlockedAchievementCount ?? 0) /
+                      (game.achievementCount ?? 1)) *
+                      100
+                  )}
+                  %
+                </span>
+              </div>
+              <div className="library-game-card__achievement-progress">
+                <div
+                  className="library-game-card__achievement-bar"
+                  style={{
+                    width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <img
+          src={coverImage ?? undefined}
+          alt={game.title}
+          className="library-game-card__game-image"
+        />
+      </button>
+      <Tooltip
+        id={game.objectId}
+        style={{
+          zIndex: 9999,
+        }}
+        openOnClick={false}
+        afterShow={() => setIsTooltipHovered(true)}
+        afterHide={() => setIsTooltipHovered(false)}
+      />
+      <GameContextMenu
+        game={game}
+        visible={contextMenu.visible}
+        position={contextMenu.position}
+        onClose={handleCloseContextMenu}
+      />
+    </>
+  );
+}

src/renderer/src/pages/library/library.scss

@@ -0,0 +1,207 @@
+@use "../../scss/globals.scss";
+
+.library {
+  &__content {
+    padding: calc(globals.$spacing-unit * 3);
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 3);
+    align-items: flex-start;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__page-header {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1.5);
+    width: 100%;
+  }
+
+  &__page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  &__controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__controls-left {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__controls-right {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__header-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: calc(globals.$spacing-unit * 1);
+    &__left {
+      display: flex;
+      flex-direction: column;
+      gap: calc(globals.$spacing-unit * 1);
+    }
+  }
+  &__header-title {
+    font-size: 20px;
+    font-weight: 700;
+  }
+  &__filter-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
+  }
+
+  &__separator {
+    width: 100%;
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    margin: 0;
+  }
+
+  &__count {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 8px 16px;
+  }
+
+  &__count-label {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  &__count-number {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &__no-games {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    padding: calc(globals.$spacing-unit * 4);
+  }
+
+  &__telescope-icon {
+    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);
+  }
+
+  &__games-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: calc(globals.$spacing-unit * 2);
+    width: 100%;
+
+    // Grid view - larger cards
+    &--grid {
+      grid-template-columns: repeat(2, 1fr);
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 1300px) {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2000px) {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2600px) {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 3000px) {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+
+    // Compact view - smaller cards
+    &--compact {
+      grid-template-columns: repeat(auto-fill, 215px);
+      grid-auto-rows: 320px;
+      justify-content: start;
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(auto-fill, 215px);
+      }
+
+      @container #{globals.$app-container} (min-width: 1300px) {
+        grid-template-columns: repeat(auto-fill, 215px);
+      }
+
+      /* keep same pattern for very large screens */
+      @container #{globals.$app-container} (min-width: 2000px) {
+        grid-template-columns: repeat(auto-fill, 215px);
+      }
+
+      @container #{globals.$app-container} (min-width: 2600px) {
+        grid-template-columns: repeat(auto-fill, 215px);
+      }
+
+      @container #{globals.$app-container} (min-width: 3000px) {
+        grid-template-columns: repeat(auto-fill, 210px);
+      }
+    }
+  }
+
+  &__games-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    width: 100%;
+
+    // Large view - 2 columns grid
+    &--large {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}

src/renderer/src/pages/library/library.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLibrary, useAppDispatch } from "@renderer/hooks";
+import { setHeaderTitle } from "@renderer/features";
+import { TelescopeIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { LibraryGameCard } from "./library-game-card";
+// detailed view removed — keep file if needed later
+import { LibraryGameCardLarge } from "./library-game-card-large";
+import { ViewOptions, ViewMode } from "./view-options";
+import { FilterOptions, FilterOption } from "./filter-options";
+import { SearchBar } from "./search-bar";
+import "./library.scss";
+
+export default function Library() {
+  const { library, updateLibrary } = useLibrary();
+  type ElectronAPI = {
+    refreshLibraryAssets?: () => Promise<unknown>;
+    onLibraryBatchComplete?: (cb: () => void) => () => void;
+  };
+
+  const [viewMode, setViewMode] = useState<ViewMode>("compact");
+  const [filterBy, setFilterBy] = useState<FilterOption>("all");
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation("library");
+
+  useEffect(() => {
+    dispatch(setHeaderTitle(t("library")));
+    const electron = (globalThis as unknown as { electron?: ElectronAPI })
+      .electron;
+    let unsubscribe: () => void = () => undefined;
+    if (electron?.refreshLibraryAssets) {
+      electron
+        .refreshLibraryAssets()
+        .then(() => updateLibrary())
+        .catch(() => updateLibrary());
+      if (electron.onLibraryBatchComplete) {
+        unsubscribe = electron.onLibraryBatchComplete(() => {
+          updateLibrary();
+        });
+      }
+    } else {
+      updateLibrary();
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  }, [dispatch, t, updateLibrary]);
+
+  const handleOnMouseEnterGameCard = () => {
+    // Optional: pause animations if needed
+  };
+
+  const handleOnMouseLeaveGameCard = () => {
+    // Optional: resume animations if needed
+  };
+
+  const filteredLibrary = useMemo(() => {
+    let filtered;
+
+    switch (filterBy) {
+      case "favourited":
+        filtered = library.filter((game) => game.favorite);
+        break;
+      case "new":
+        filtered = library.filter(
+          (game) => (game.playTimeInMilliseconds || 0) === 0
+        );
+        break;
+      case "top10":
+        filtered = library
+          .slice()
+          .sort(
+            (a, b) =>
+              (b.playTimeInMilliseconds || 0) - (a.playTimeInMilliseconds || 0)
+          )
+          .slice(0, 10);
+        break;
+      case "all":
+      default:
+        filtered = library;
+    }
+
+    if (!searchQuery.trim()) return filtered;
+
+    const queryLower = searchQuery.toLowerCase();
+    return filtered.filter((game) => {
+      const titleLower = game.title.toLowerCase();
+      let queryIndex = 0;
+
+      for (
+        let i = 0;
+        i < titleLower.length && queryIndex < queryLower.length;
+        i++
+      ) {
+        if (titleLower[i] === queryLower[queryIndex]) {
+          queryIndex++;
+        }
+      }
+
+      return queryIndex === queryLower.length;
+    });
+  }, [library, filterBy, searchQuery]);
+
+  // No sorting for now — rely on filteredLibrary
+  const sortedLibrary = filteredLibrary;
+
+  // Calculate counts for filters
+  const allGamesCount = library.length;
+  const favouritedCount = library.filter((game) => game.favorite).length;
+  const newGamesCount = library.filter(
+    (game) => (game.playTimeInMilliseconds || 0) === 0
+  ).length;
+  const top10Count = Math.min(10, library.length);
+
+  const hasGames = library.length > 0;
+
+  return (
+    <section className="library__content">
+      {hasGames && (
+        <div className="library__page-header">
+          <div className="library__controls-row">
+            <div className="library__controls-left">
+              <FilterOptions
+                filterBy={filterBy}
+                onFilterChange={setFilterBy}
+                allGamesCount={allGamesCount}
+                favouritedCount={favouritedCount}
+                newGamesCount={newGamesCount}
+                top10Count={top10Count}
+              />
+            </div>
+
+            <div className="library__controls-right">
+              <SearchBar value={searchQuery} onChange={setSearchQuery} />
+              <ViewOptions viewMode={viewMode} onViewModeChange={setViewMode} />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!hasGames && (
+        <div className="library__no-games">
+          <div className="library__telescope-icon">
+            <TelescopeIcon size={24} />
+          </div>
+          <h2>{t("no_games_title")}</h2>
+          <p>{t("no_games_description")}</p>
+        </div>
+      )}
+
+      {hasGames && viewMode === "large" && (
+        <div className="library__games-list library__games-list--large">
+          {sortedLibrary.map((game) => (
+            <LibraryGameCardLarge
+              key={`${game.shop}-${game.objectId}`}
+              game={game}
+            />
+          ))}
+        </div>
+      )}
+
+      {hasGames && viewMode !== "large" && (
+        <ul className={`library__games-grid library__games-grid--${viewMode}`}>
+          {sortedLibrary.map((game) => (
+            <li
+              key={`${game.shop}-${game.objectId}`}
+              style={{ listStyle: "none" }}
+            >
+              <LibraryGameCard
+                game={game}
+                onMouseEnter={handleOnMouseEnterGameCard}
+                onMouseLeave={handleOnMouseLeaveGameCard}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

src/renderer/src/pages/library/search-bar.scss

@@ -0,0 +1,75 @@
+.search-bar {
+  display: flex;
+  align-items: center;
+
+  &__container {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 12px;
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    width: 250px;
+
+    &:focus-within {
+      width: 300px;
+      background: rgba(255, 255, 255, 0.02);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &__icon {
+    color: rgba(255, 255, 255, 0.75);
+    flex-shrink: 0;
+    transition: color 0.2s ease;
+  }
+
+  &__input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 14px;
+    font-family: inherit;
+    min-width: 0;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    &:focus ~ .search-bar__icon {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  &__clear {
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.65);
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+}

src/renderer/src/pages/library/search-bar.tsx

@@ -0,0 +1,44 @@
+import { SearchIcon } from "@primer/octicons-react";
+import { FC, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import "./search-bar.scss";
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const SearchBar: FC<SearchBarProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClear = () => {
+    onChange("");
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className="search-bar">
+      <div className="search-bar__container">
+        <SearchIcon size={16} className="search-bar__icon" />
+        <input
+          ref={inputRef}
+          type="text"
+          className="search-bar__input"
+          placeholder={t("Search library", { defaultValue: "Search library" })}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {value && (
+          <button
+            className="search-bar__clear"
+            onClick={handleClear}
+            aria-label="Clear search"
+          >
+            ×
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/renderer/src/pages/library/view-options.scss

@@ -0,0 +1,55 @@
+@use "../../scss/globals.scss";
+
+.library-view-options {
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.95);
+    white-space: nowrap;
+  }
+
+  &__options {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    flex-wrap: wrap;
+    white-space: nowrap;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.04);
+    border: none;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all ease 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.95);
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    &.active {
+      color: rgba(0, 0, 0, 0.9);
+      background: #fff;
+      svg,
+      svg * {
+        fill: currentColor;
+        color: currentColor;
+      }
+    }
+  }
+}

src/renderer/src/pages/library/view-options.tsx

@@ -0,0 +1,45 @@
+import { AppsIcon, RowsIcon, SquareIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import "./view-options.scss";
+
+export type ViewMode = "grid" | "compact" | "large";
+
+interface ViewOptionsProps {
+  viewMode: ViewMode;
+  onViewModeChange: (viewMode: ViewMode) => void;
+}
+
+export function ViewOptions({
+  viewMode,
+  onViewModeChange,
+}: Readonly<ViewOptionsProps>) {
+  const { t } = useTranslation("library");
+
+  return (
+    <div className="library-view-options__container">
+      <div className="library-view-options__options">
+        <button
+          className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
+          onClick={() => onViewModeChange("compact")}
+          title={t("compact_view")}
+        >
+          <SquareIcon size={16} />
+        </button>
+        <button
+          className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
+          onClick={() => onViewModeChange("grid")}
+          title={t("grid_view")}
+        >
+          <AppsIcon size={16} />
+        </button>
+        <button
+          className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
+          onClick={() => onViewModeChange("large")}
+          title={t("large_view")}
+        >
+          <RowsIcon size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

src/renderer/src/pages/profile/profile-content/library-tab.tsx

@@ -0,0 +1,178 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { TelescopeIcon } from "@primer/octicons-react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useFormat } from "@renderer/hooks";
+import type { UserGame } from "@types";
+import { SortOptions } from "./sort-options";
+import { UserLibraryGameCard } from "./user-library-game-card";
+import "./profile-content.scss";
+
+type SortOption = "playtime" | "achievementCount" | "playedRecently";
+
+interface LibraryTabProps {
+  sortBy: SortOption;
+  onSortChange: (sortBy: SortOption) => void;
+  pinnedGames: UserGame[];
+  libraryGames: UserGame[];
+  hasMoreLibraryGames: boolean;
+  isLoadingLibraryGames: boolean;
+  statsIndex: number;
+  userStats: { libraryCount: number } | null;
+  animatedGameIdsRef: React.MutableRefObject<Set<string>>;
+  onLoadMore: () => void;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  isMe: boolean;
+}
+
+export function LibraryTab({
+  sortBy,
+  onSortChange,
+  pinnedGames,
+  libraryGames,
+  hasMoreLibraryGames,
+  isLoadingLibraryGames,
+  statsIndex,
+  userStats,
+  animatedGameIdsRef,
+  onLoadMore,
+  onMouseEnter,
+  onMouseLeave,
+  isMe,
+}: Readonly<LibraryTabProps>) {
+  const { t } = useTranslation("user_profile");
+  const { numberFormatter } = useFormat();
+
+  const hasGames = libraryGames.length > 0;
+  const hasPinnedGames = pinnedGames.length > 0;
+  const hasAnyGames = hasGames || hasPinnedGames;
+
+  return (
+    <motion.div
+      key="library"
+      className="profile-content__tab-panel"
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: 10 }}
+      transition={{ duration: 0.2 }}
+      aria-hidden={false}
+    >
+      {hasAnyGames && (
+        <SortOptions sortBy={sortBy} onSortChange={onSortChange} />
+      )}
+
+      {!hasAnyGames && (
+        <div className="profile-content__no-games">
+          <div className="profile-content__telescope-icon">
+            <TelescopeIcon size={24} />
+          </div>
+          <h2>{t("no_recent_activity_title")}</h2>
+          {isMe && <p>{t("no_recent_activity_description")}</p>}
+        </div>
+      )}
+
+      {hasAnyGames && (
+        <div>
+          {hasPinnedGames && (
+            <div style={{ marginBottom: "2rem" }}>
+              <div className="profile-content__section-header">
+                <div className="profile-content__section-title-group">
+                  <h2>{t("pinned")}</h2>
+                  <span className="profile-content__section-badge">
+                    {pinnedGames.length}
+                  </span>
+                </div>
+              </div>
+
+              <ul className="profile-content__games-grid">
+                {pinnedGames?.map((game) => (
+                  <li key={game.objectId} style={{ listStyle: "none" }}>
+                    <UserLibraryGameCard
+                      game={game}
+                      statIndex={statsIndex}
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                      sortBy={sortBy}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {hasGames && (
+            <div>
+              <div className="profile-content__section-header">
+                <div className="profile-content__section-title-group">
+                  <h2>{t("library")}</h2>
+                  {userStats && (
+                    <span className="profile-content__section-badge">
+                      {numberFormatter.format(userStats.libraryCount)}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <InfiniteScroll
+                dataLength={libraryGames.length}
+                next={onLoadMore}
+                hasMore={hasMoreLibraryGames}
+                loader={null}
+                scrollThreshold={0.9}
+                style={{ overflow: "visible" }}
+                scrollableTarget="scrollableDiv"
+              >
+                <ul className="profile-content__games-grid">
+                  {libraryGames?.map((game, index) => {
+                    const hasAnimated = animatedGameIdsRef.current.has(
+                      game.objectId
+                    );
+                    const isNewGame = !hasAnimated && !isLoadingLibraryGames;
+
+                    return (
+                      <motion.li
+                        key={`${sortBy}-${game.objectId}`}
+                        style={{ listStyle: "none" }}
+                        initial={
+                          isNewGame
+                            ? { opacity: 0.5, y: 15, scale: 0.96 }
+                            : false
+                        }
+                        animate={
+                          isNewGame ? { opacity: 1, y: 0, scale: 1 } : false
+                        }
+                        transition={
+                          isNewGame
+                            ? {
+                                duration: 0.15,
+                                ease: "easeOut",
+                                delay: index * 0.01,
+                              }
+                            : undefined
+                        }
+                        onAnimationComplete={() => {
+                          if (isNewGame) {
+                            animatedGameIdsRef.current.add(game.objectId);
+                          }
+                        }}
+                      >
+                        <UserLibraryGameCard
+                          game={game}
+                          statIndex={statsIndex}
+                          onMouseEnter={onMouseEnter}
+                          onMouseLeave={onMouseLeave}
+                          sortBy={sortBy}
+                        />
+                      </motion.li>
+                    );
+                  })}
+                </ul>
+              </InfiniteScroll>
+            </div>
+          )}
+        </div>
+      )}
+    </motion.div>
+  );
+}

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -101,6 +101,11 @@
     gap: calc(globals.$spacing-unit);
     margin-bottom: calc(globals.$spacing-unit * 2);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    position: relative;
+  }
+
+  &__tab-wrapper {
+    position: relative;
   }
 
   &__tab {
@@ -111,19 +116,40 @@
     cursor: pointer;
     font-size: 14px;
     font-weight: 500;
-    border-bottom: 2px solid transparent;
-    transition: all ease 0.2s;
-
-    &:hover {
-      color: rgba(255, 255, 255, 0.8);
-    }
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.5);
 
     &--active {
       color: white;
-      border-bottom-color: #c9aa71;
     }
   }
 
+  &__tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 9px;
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1;
+  }
+
+  &__tab-underline {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: white;
+  }
+
   &__games-grid {
     list-style: none;
     margin: 0;
@@ -175,5 +201,245 @@
         backdrop-filter: blur(10px);
       }
     }
+
+    &__tab-panels {
+      display: block;
+    }
+  }
+}
+
+// Reviews minimal styles
+.user-reviews__loading {
+  padding: calc(globals.$spacing-unit * 2);
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-reviews__empty {
+  text-align: center;
+  padding: calc(globals.$spacing-unit * 4) calc(globals.$spacing-unit * 2);
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.user-reviews__list {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 4);
+}
+
+.user-reviews__review-item {
+  border-radius: 8px;
+}
+
+.user-reviews__review-header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 1);
+  margin-bottom: calc(globals.$spacing-unit * 1.5);
+}
+
+.user-reviews__review-header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.user-reviews__review-header-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-reviews__review-meta-row {
+  display: flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 0.75);
+}
+
+.user-reviews__review-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: calc(globals.$spacing-unit * 1.5);
+  margin-bottom: calc(globals.$spacing-unit * 1.5);
+}
+
+.user-reviews__review-game {
+  display: flex;
+  gap: calc(globals.$spacing-unit);
+}
+
+.user-reviews__game-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+}
+
+.user-reviews__game-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-reviews__game-details {
+  display: flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 0.75);
+}
+
+.user-reviews__game-title {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+
+  &--clickable:hover {
+    text-decoration: underline;
+  }
+}
+
+.user-reviews__review-date {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: globals.$small-font-size;
+}
+
+.user-reviews__review-score-stars {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.user-reviews__review-star {
+  color: rgba(255, 255, 255, 0.7);
+  transition: color 0.2s ease;
+
+  &--filled {
+    color: rgba(255, 255, 255, 0.7);
+
+    svg {
+      fill: currentColor;
+    }
+  }
+}
+
+.user-reviews__review-score-text {
+  font-weight: 500;
+}
+
+.user-reviews__review-playtime {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 11px;
+  font-weight: 500;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.user-reviews__review-content {
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  max-width: 100%;
+}
+
+.user-reviews__review-translation-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 1);
+  margin-top: calc(globals.$spacing-unit * 1.5);
+  padding: 0;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    text-decoration: underline;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
+.user-reviews__review-actions {
+  margin-top: calc(globals.$spacing-unit * 2);
+  padding-top: calc(globals.$spacing-unit);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-reviews__review-votes {
+  display: flex;
+  gap: calc(globals.$spacing-unit);
+}
+
+.user-reviews__vote-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 6px 12px;
+  color: #ccc;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+  }
+
+  &--active {
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.3);
+
+    svg {
+      fill: white;
+    }
+  }
+}
+
+.user-reviews__delete-review-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(244, 67, 54, 0.1);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: #f44336;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(244, 67, 54, 0.2);
+    border-color: rgba(244, 67, 54, 0.4);
+    color: #ff7961;
   }
 }

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -1,29 +1,82 @@
 import { userProfileContext } from "@renderer/context";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ProfileHero } from "../profile-hero/profile-hero";
-import { useAppDispatch, useFormat } from "@renderer/hooks";
+import { useAppDispatch, useFormat, useUserDetails } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
-import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react";
 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 { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
 import { UserKarmaBox } from "./user-karma-box";
-import { UserLibraryGameCard } from "./user-library-game-card";
-import { SortOptions } from "./sort-options";
-import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  sectionVariants,
-  chevronVariants,
-  GAME_STATS_ANIMATION_DURATION_IN_MS,
-} from "./profile-animations";
+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";
+import { ProfileTabs } from "./profile-tabs";
+import { LibraryTab } from "./library-tab";
+import { ReviewsTab } from "./reviews-tab";
+import { AnimatePresence } from "framer-motion";
 import "./profile-content.scss";
 
 type SortOption = "playtime" | "achievementCount" | "playedRecently";
 
+interface UserReview {
+  id: string;
+  reviewHtml: string;
+  score: number;
+  playTimeInSeconds?: number;
+  upvotes: number;
+  downvotes: number;
+  hasUpvoted: boolean;
+  hasDownvoted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  user: {
+    id: string;
+  };
+  game: {
+    title: string;
+    iconUrl: string;
+    objectId: string;
+    shop: GameShop;
+  };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
+}
+
+interface UserReviewsResponse {
+  totalCount: number;
+  reviews: UserReview[];
+}
+
+const getRatingText = (score: number, t: (key: string) => string): string => {
+  switch (score) {
+    case 1:
+      return t("rating_very_negative");
+    case 2:
+      return t("rating_negative");
+    case 3:
+      return t("rating_neutral");
+    case 4:
+      return t("rating_positive");
+    case 5:
+      return t("rating_very_positive");
+    default:
+      return "";
+  }
+};
+
 export function ProfileContent() {
   const {
     userProfile,
@@ -32,16 +85,43 @@ export function ProfileContent() {
     libraryGames,
     pinnedGames,
     getUserLibraryGames,
+    loadMoreLibraryGames,
+    hasMoreLibraryGames,
+    isLoadingLibraryGames,
   } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
   const [statsIndex, setStatsIndex] = useState(0);
   const [isAnimationRunning, setIsAnimationRunning] = useState(true);
   const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
   const statsAnimation = useRef(-1);
-  const { toggleSection, isPinnedCollapsed } = useSectionCollapse();
+
+  const [activeTab, setActiveTab] = useState<"library" | "reviews">("library");
+
+  // User reviews state
+  const [reviews, setReviews] = useState<UserReview[]>([]);
+  const [reviewsTotalCount, setReviewsTotalCount] = useState(0);
+  const [isLoadingReviews, setIsLoadingReviews] = useState(false);
+  const [votingReviews, setVotingReviews] = useState<Set<string>>(new Set());
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [reviewToDelete, setReviewToDelete] = useState<string | null>(null);
 
   const dispatch = useAppDispatch();
 
   const { t } = useTranslation("user_profile");
+  const { numberFormatter } = useFormat();
+
+  const formatPlayTime = (playTimeInSeconds: number) => {
+    const minutes = playTimeInSeconds / 60;
+
+    if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+      return t("amount_minutes", {
+        amount: minutes.toFixed(0),
+      });
+    }
+
+    const hours = minutes / 60;
+    return t("amount_hours", { amount: numberFormatter.format(hours) });
+  };
 
   useEffect(() => {
     dispatch(setHeaderTitle(""));
@@ -53,10 +133,201 @@ export function ProfileContent() {
 
   useEffect(() => {
     if (userProfile) {
-      getUserLibraryGames(sortBy);
+      // When sortBy changes, clear animated games so all games animate in
+      if (currentSortByRef.current !== sortBy) {
+        animatedGameIdsRef.current.clear();
+        currentSortByRef.current = sortBy;
+      }
+      getUserLibraryGames(sortBy, true);
     }
   }, [sortBy, getUserLibraryGames, userProfile]);
 
+  const animatedGameIdsRef = useRef<Set<string>>(new Set());
+  const currentSortByRef = useRef<SortOption>(sortBy);
+
+  const handleLoadMore = useCallback(() => {
+    if (
+      activeTab === "library" &&
+      hasMoreLibraryGames &&
+      !isLoadingLibraryGames
+    ) {
+      loadMoreLibraryGames(sortBy);
+    }
+  }, [
+    activeTab,
+    hasMoreLibraryGames,
+    isLoadingLibraryGames,
+    loadMoreLibraryGames,
+    sortBy,
+  ]);
+
+  // Clear reviews state and reset tab when switching users
+  useEffect(() => {
+    setReviews([]);
+    setReviewsTotalCount(0);
+    setIsLoadingReviews(false);
+    setActiveTab("library");
+  }, [userProfile?.id]);
+
+  useEffect(() => {
+    if (userProfile?.id) {
+      fetchUserReviews();
+    }
+  }, [userProfile?.id]);
+
+  const fetchUserReviews = async () => {
+    if (!userProfile?.id) return;
+
+    setIsLoadingReviews(true);
+    try {
+      const response = await window.electron.hydraApi.get<UserReviewsResponse>(
+        `/users/${userProfile.id}/reviews`,
+        { needsAuth: true }
+      );
+      setReviews(response.reviews);
+      setReviewsTotalCount(response.totalCount);
+    } catch (error) {
+      // Error handling for fetching reviews
+    } finally {
+      setIsLoadingReviews(false);
+    }
+  };
+
+  const handleDeleteReview = async (reviewId: string) => {
+    try {
+      const reviewToDeleteObj = reviews.find(
+        (review) => review.id === reviewId
+      );
+      if (!reviewToDeleteObj) return;
+
+      await window.electron.hydraApi.delete(
+        `/games/${reviewToDeleteObj.game.shop}/${reviewToDeleteObj.game.objectId}/reviews/${reviewId}`
+      );
+      // Remove the review from the local state
+      setReviews((prev) => prev.filter((review) => review.id !== reviewId));
+      setReviewsTotalCount((prev) => prev - 1);
+    } catch (error) {
+      console.error("Failed to delete review:", error);
+    }
+  };
+
+  const handleDeleteClick = (reviewId: string) => {
+    setReviewToDelete(reviewId);
+    setDeleteModalVisible(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (reviewToDelete) {
+      handleDeleteReview(reviewToDelete);
+      setReviewToDelete(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteModalVisible(false);
+    setReviewToDelete(null);
+  };
+
+  const handleVoteReview = async (reviewId: string, isUpvote: boolean) => {
+    if (votingReviews.has(reviewId)) return;
+
+    setVotingReviews((prev) => new Set(prev).add(reviewId));
+
+    const review = reviews.find((r) => r.id === reviewId);
+    if (!review) {
+      setVotingReviews((prev) => {
+        const next = new Set(prev);
+        next.delete(reviewId);
+        return next;
+      });
+      return;
+    }
+
+    const wasUpvoted = review.hasUpvoted;
+    const wasDownvoted = review.hasDownvoted;
+
+    // Optimistic update
+    setReviews((prev) =>
+      prev.map((r) => {
+        if (r.id !== reviewId) return r;
+
+        let newUpvotes = r.upvotes;
+        let newDownvotes = r.downvotes;
+        let newHasUpvoted = r.hasUpvoted;
+        let newHasDownvoted = r.hasDownvoted;
+
+        if (isUpvote) {
+          if (wasUpvoted) {
+            // Remove upvote
+            newUpvotes--;
+            newHasUpvoted = false;
+          } else {
+            // Add upvote
+            newUpvotes++;
+            newHasUpvoted = true;
+            if (wasDownvoted) {
+              // Remove downvote if it was downvoted
+              newDownvotes--;
+              newHasDownvoted = false;
+            }
+          }
+        } else if (wasDownvoted) {
+          // Remove downvote
+          newDownvotes--;
+          newHasDownvoted = false;
+        } else {
+          // Add downvote
+          newDownvotes++;
+          newHasDownvoted = true;
+          if (wasUpvoted) {
+            // Remove upvote if it was upvoted
+            newUpvotes--;
+            newHasUpvoted = false;
+          }
+        }
+
+        return {
+          ...r,
+          upvotes: newUpvotes,
+          downvotes: newDownvotes,
+          hasUpvoted: newHasUpvoted,
+          hasDownvoted: newHasDownvoted,
+        };
+      })
+    );
+
+    try {
+      const endpoint = isUpvote ? "upvote" : "downvote";
+      await window.electron.hydraApi.put(
+        `/games/${review.game.shop}/${review.game.objectId}/reviews/${reviewId}/${endpoint}`
+      );
+    } catch (error) {
+      console.error("Failed to vote on review:", error);
+
+      // Rollback optimistic update on error
+      setReviews((prev) =>
+        prev.map((r) => {
+          if (r.id !== reviewId) return r;
+          return {
+            ...r,
+            upvotes: review.upvotes,
+            downvotes: review.downvotes,
+            hasUpvoted: review.hasUpvoted,
+            hasDownvoted: review.hasDownvoted,
+          };
+        })
+      );
+    } finally {
+      setTimeout(() => {
+        setVotingReviews((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(reviewId);
+          return newSet;
+        });
+      }, 500);
+    }
+  };
+
   const handleOnMouseEnterGameCard = () => {
     setIsAnimationRunning(false);
   };
@@ -86,8 +357,6 @@ export function ProfileContent() {
     };
   }, [setStatsIndex, isAnimationRunning]);
 
-  const { numberFormatter } = useFormat();
-
   const usersAreFriends = useMemo(() => {
     return userProfile?.relation?.status === "ACCEPTED";
   }, [userProfile]);
@@ -113,112 +382,46 @@ export function ProfileContent() {
     return (
       <section className="profile-content__section">
         <div className="profile-content__main">
-          {hasAnyGames && (
-            <SortOptions sortBy={sortBy} onSortChange={setSortBy} />
-          )}
+          <ProfileTabs
+            activeTab={activeTab}
+            reviewsTotalCount={reviewsTotalCount}
+            onTabChange={setActiveTab}
+          />
 
-          {!hasAnyGames && (
-            <div className="profile-content__no-games">
-              <div className="profile-content__telescope-icon">
-                <TelescopeIcon size={24} />
-              </div>
-              <h2>{t("no_recent_activity_title")}</h2>
-              {isMe && <p>{t("no_recent_activity_description")}</p>}
-            </div>
-          )}
-
-          {hasAnyGames && (
-            <div>
-              {hasPinnedGames && (
-                <div style={{ marginBottom: "2rem" }}>
-                  <div className="profile-content__section-header">
-                    <div className="profile-content__section-title-group">
-                      <button
-                        type="button"
-                        className="profile-content__collapse-button"
-                        onClick={() => toggleSection("pinned")}
-                        aria-label={
-                          isPinnedCollapsed
-                            ? "Expand pinned section"
-                            : "Collapse pinned section"
-                        }
-                      >
-                        <motion.div
-                          variants={chevronVariants}
-                          animate={isPinnedCollapsed ? "collapsed" : "expanded"}
-                        >
-                          <ChevronRightIcon size={16} />
-                        </motion.div>
-                      </button>
-                      <h2>{t("pinned")}</h2>
-                      <span className="profile-content__section-badge">
-                        {pinnedGames.length}
-                      </span>
-                    </div>
-                  </div>
-
-                  <AnimatePresence initial={true} mode="wait">
-                    {!isPinnedCollapsed && (
-                      <motion.div
-                        key="pinned-content"
-                        variants={sectionVariants}
-                        initial="collapsed"
-                        animate="expanded"
-                        exit="collapsed"
-                        layout
-                      >
-                        <ul className="profile-content__games-grid">
-                          {pinnedGames?.map((game) => (
-                            <li
-                              key={game.objectId}
-                              style={{ listStyle: "none" }}
-                            >
-                              <UserLibraryGameCard
-                                game={game}
-                                statIndex={statsIndex}
-                                onMouseEnter={handleOnMouseEnterGameCard}
-                                onMouseLeave={handleOnMouseLeaveGameCard}
-                                sortBy={sortBy}
-                              />
-                            </li>
-                          ))}
-                        </ul>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-                </div>
+          <div className="profile-content__tab-panels">
+            <AnimatePresence mode="wait">
+              {activeTab === "library" && (
+                <LibraryTab
+                  sortBy={sortBy}
+                  onSortChange={setSortBy}
+                  pinnedGames={pinnedGames}
+                  libraryGames={libraryGames}
+                  hasMoreLibraryGames={hasMoreLibraryGames}
+                  isLoadingLibraryGames={isLoadingLibraryGames}
+                  statsIndex={statsIndex}
+                  userStats={userStats}
+                  animatedGameIdsRef={animatedGameIdsRef}
+                  onLoadMore={handleLoadMore}
+                  onMouseEnter={handleOnMouseEnterGameCard}
+                  onMouseLeave={handleOnMouseLeaveGameCard}
+                  isMe={isMe}
+                />
               )}
 
-              {hasGames && (
-                <div>
-                  <div className="profile-content__section-header">
-                    <div className="profile-content__section-title-group">
-                      <h2>{t("library")}</h2>
-                      {userStats && (
-                        <span className="profile-content__section-badge">
-                          {numberFormatter.format(userStats.libraryCount)}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <ul className="profile-content__games-grid">
-                    {libraryGames?.map((game) => (
-                      <li key={game.objectId} style={{ listStyle: "none" }}>
-                        <UserLibraryGameCard
-                          game={game}
-                          statIndex={statsIndex}
-                          onMouseEnter={handleOnMouseEnterGameCard}
-                          onMouseLeave={handleOnMouseLeaveGameCard}
-                          sortBy={sortBy}
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </div>
+              {activeTab === "reviews" && (
+                <ReviewsTab
+                  reviews={reviews}
+                  isLoadingReviews={isLoadingReviews}
+                  votingReviews={votingReviews}
+                  userDetailsId={userDetails?.id}
+                  formatPlayTime={formatPlayTime}
+                  getRatingText={getRatingText}
+                  onVote={handleVoteReview}
+                  onDelete={handleDeleteClick}
+                />
               )}
-            </div>
-          )}
+            </AnimatePresence>
+          </div>
         </div>
 
         {shouldShowRightContent && (
@@ -230,6 +433,12 @@ export function ProfileContent() {
             <ReportProfile />
           </div>
         )}
+
+        <DeleteReviewModal
+          visible={deleteModalVisible}
+          onClose={handleDeleteCancel}
+          onConfirm={handleDeleteConfirm}
+        />
       </section>
     );
   }, [
@@ -242,9 +451,15 @@ export function ProfileContent() {
     statsIndex,
     libraryGames,
     pinnedGames,
-    isPinnedCollapsed,
-    toggleSection,
+
     sortBy,
+    activeTab,
+    // ensure reviews UI updates correctly
+    reviews,
+    reviewsTotalCount,
+    isLoadingReviews,
+    votingReviews,
+    deleteModalVisible,
   ]);
 
   return (

src/renderer/src/pages/profile/profile-content/profile-review-item.tsx

@@ -0,0 +1,252 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import { ClockIcon } from "@primer/octicons-react";
+import { Star, ThumbsUp, ThumbsDown, TrashIcon, Languages } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import type { GameShop } from "@types";
+import { sanitizeHtml } from "@shared";
+import { useDate } from "@renderer/hooks";
+import { buildGameDetailsPath } from "@renderer/helpers";
+import "./profile-content.scss";
+
+interface UserReview {
+  id: string;
+  reviewHtml: string;
+  score: number;
+  playTimeInSeconds?: number;
+  upvotes: number;
+  downvotes: number;
+  hasUpvoted: boolean;
+  hasDownvoted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  user: {
+    id: string;
+  };
+  game: {
+    title: string;
+    iconUrl: string;
+    objectId: string;
+    shop: GameShop;
+  };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
+}
+
+interface ProfileReviewItemProps {
+  review: UserReview;
+  isOwnReview: boolean;
+  isVoting: boolean;
+  formatPlayTime: (playTimeInSeconds: number) => string;
+  getRatingText: (score: number, t: (key: string) => string) => string;
+  onVote: (reviewId: string, isUpvote: boolean) => void;
+  onDelete: (reviewId: string) => void;
+}
+
+export function ProfileReviewItem({
+  review,
+  isOwnReview,
+  isVoting,
+  formatPlayTime,
+  getRatingText,
+  onVote,
+  onDelete,
+}: Readonly<ProfileReviewItemProps>) {
+  const navigate = useNavigate();
+  const { formatDistance } = useDate();
+  const { t } = useTranslation("user_profile");
+  const { t: tGameDetails, i18n } = useTranslation("game_details");
+  const [showOriginal, setShowOriginal] = useState(false);
+
+  const getBaseLanguage = (lang: string | null) => lang?.split("-")[0] || "";
+
+  const isDifferentLanguage =
+    getBaseLanguage(review.detectedLanguage) !== getBaseLanguage(i18n.language);
+
+  const needsTranslation =
+    !isOwnReview && isDifferentLanguage && review.translations[i18n.language];
+
+  const getLanguageName = (languageCode: string | null) => {
+    if (!languageCode) return "";
+    try {
+      const displayNames = new Intl.DisplayNames([i18n.language], {
+        type: "language",
+      });
+      return displayNames.of(languageCode) || languageCode.toUpperCase();
+    } catch {
+      return languageCode.toUpperCase();
+    }
+  };
+
+  const displayContent = needsTranslation
+    ? review.translations[i18n.language]
+    : review.reviewHtml;
+
+  return (
+    <motion.div
+      key={review.id}
+      className="user-reviews__review-item"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="user-reviews__review-header">
+        <div className="user-reviews__review-header-top">
+          <div className="user-reviews__review-game">
+            <div className="user-reviews__game-info">
+              <div className="user-reviews__game-details">
+                <img
+                  src={review.game.iconUrl}
+                  alt={review.game.title}
+                  className="user-reviews__game-icon"
+                />
+                <button
+                  className="user-reviews__game-title user-reviews__game-title--clickable"
+                  onClick={() => navigate(buildGameDetailsPath(review.game))}
+                >
+                  {review.game.title}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="user-reviews__review-date">
+            {formatDistance(new Date(review.createdAt), new Date(), {
+              addSuffix: true,
+            })}
+          </div>
+        </div>
+        <div className="user-reviews__review-header-bottom">
+          <div className="user-reviews__review-meta-row">
+            <div
+              className="user-reviews__review-score-stars"
+              title={getRatingText(review.score, tGameDetails)}
+            >
+              <Star
+                size={12}
+                className="user-reviews__review-star user-reviews__review-star--filled"
+              />
+              <span className="user-reviews__review-score-text">
+                {review.score}/5
+              </span>
+            </div>
+            {Boolean(
+              review.playTimeInSeconds && review.playTimeInSeconds > 0
+            ) && (
+              <div className="user-reviews__review-playtime">
+                <ClockIcon size={12} />
+                <span>
+                  {tGameDetails("review_played_for")}{" "}
+                  {formatPlayTime(review.playTimeInSeconds || 0)}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div
+          className="user-reviews__review-content"
+          dangerouslySetInnerHTML={{
+            __html: sanitizeHtml(displayContent),
+          }}
+        />
+        {needsTranslation && (
+          <>
+            <button
+              className="user-reviews__review-translation-toggle"
+              onClick={() => setShowOriginal(!showOriginal)}
+            >
+              <Languages size={13} />
+              {showOriginal
+                ? tGameDetails("hide_original")
+                : tGameDetails("show_original_translated_from", {
+                    language: getLanguageName(review.detectedLanguage),
+                  })}
+            </button>
+            {showOriginal && (
+              <div
+                className="user-reviews__review-content"
+                style={{
+                  opacity: 0.6,
+                  marginTop: "12px",
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeHtml(review.reviewHtml),
+                }}
+              />
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="user-reviews__review-actions">
+        <div className="user-reviews__review-votes">
+          <motion.button
+            className={`user-reviews__vote-button ${review.hasUpvoted ? "user-reviews__vote-button--active" : ""}`}
+            onClick={() => onVote(review.id, true)}
+            disabled={isVoting}
+            style={{
+              opacity: isVoting ? 0.5 : 1,
+              cursor: isVoting ? "not-allowed" : "pointer",
+            }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <ThumbsUp size={14} />
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={review.upvotes}
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ duration: 0.2 }}
+              >
+                {review.upvotes}
+              </motion.span>
+            </AnimatePresence>
+          </motion.button>
+
+          <motion.button
+            className={`user-reviews__vote-button ${review.hasDownvoted ? "user-reviews__vote-button--active" : ""}`}
+            onClick={() => onVote(review.id, false)}
+            disabled={isVoting}
+            style={{
+              opacity: isVoting ? 0.5 : 1,
+              cursor: isVoting ? "not-allowed" : "pointer",
+            }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <ThumbsDown size={14} />
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={review.downvotes}
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ duration: 0.2 }}
+              >
+                {review.downvotes}
+              </motion.span>
+            </AnimatePresence>
+          </motion.button>
+        </div>
+
+        {isOwnReview && (
+          <button
+            className="user-reviews__delete-review-button"
+            onClick={() => onDelete(review.id)}
+            title={t("delete_review")}
+          >
+            <TrashIcon size={14} />
+            <span>{t("delete_review")}</span>
+          </button>
+        )}
+      </div>
+    </motion.div>
+  );
+}

src/renderer/src/pages/profile/profile-content/profile-tabs.tsx

@@ -0,0 +1,67 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import "./profile-content.scss";
+
+interface ProfileTabsProps {
+  activeTab: "library" | "reviews";
+  reviewsTotalCount: number;
+  onTabChange: (tab: "library" | "reviews") => void;
+}
+
+export function ProfileTabs({
+  activeTab,
+  reviewsTotalCount,
+  onTabChange,
+}: Readonly<ProfileTabsProps>) {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <div className="profile-content__tabs">
+      <div className="profile-content__tab-wrapper">
+        <button
+          type="button"
+          className={`profile-content__tab ${activeTab === "library" ? "profile-content__tab--active" : ""}`}
+          onClick={() => onTabChange("library")}
+        >
+          {t("library")}
+        </button>
+        {activeTab === "library" && (
+          <motion.div
+            className="profile-content__tab-underline"
+            layoutId="tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
+      <div className="profile-content__tab-wrapper">
+        <button
+          type="button"
+          className={`profile-content__tab ${activeTab === "reviews" ? "profile-content__tab--active" : ""}`}
+          onClick={() => onTabChange("reviews")}
+        >
+          {t("user_reviews")}
+          {reviewsTotalCount > 0 && (
+            <span className="profile-content__tab-badge">
+              {reviewsTotalCount}
+            </span>
+          )}
+        </button>
+        {activeTab === "reviews" && (
+          <motion.div
+            className="profile-content__tab-underline"
+            layoutId="tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/renderer/src/pages/profile/profile-content/reviews-tab.tsx

@@ -0,0 +1,96 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import type { GameShop } from "@types";
+import { ProfileReviewItem } from "./profile-review-item";
+import "./profile-content.scss";
+
+interface UserReview {
+  id: string;
+  reviewHtml: string;
+  score: number;
+  playTimeInSeconds?: number;
+  upvotes: number;
+  downvotes: number;
+  hasUpvoted: boolean;
+  hasDownvoted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  user: {
+    id: string;
+  };
+  game: {
+    title: string;
+    iconUrl: string;
+    objectId: string;
+    shop: GameShop;
+  };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
+}
+
+interface ReviewsTabProps {
+  reviews: UserReview[];
+  isLoadingReviews: boolean;
+  votingReviews: Set<string>;
+  userDetailsId?: string;
+  formatPlayTime: (playTimeInSeconds: number) => string;
+  getRatingText: (score: number, t: (key: string) => string) => string;
+  onVote: (reviewId: string, isUpvote: boolean) => void;
+  onDelete: (reviewId: string) => void;
+}
+
+export function ReviewsTab({
+  reviews,
+  isLoadingReviews,
+  votingReviews,
+  userDetailsId,
+  formatPlayTime,
+  getRatingText,
+  onVote,
+  onDelete,
+}: Readonly<ReviewsTabProps>) {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <motion.div
+      key="reviews"
+      className="profile-content__tab-panel"
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: 10 }}
+      transition={{ duration: 0.2 }}
+      aria-hidden={false}
+    >
+      {isLoadingReviews && (
+        <div className="user-reviews__loading">{t("loading_reviews")}</div>
+      )}
+      {!isLoadingReviews && reviews.length === 0 && (
+        <div className="user-reviews__empty">
+          <p>{t("no_reviews", "No reviews yet")}</p>
+        </div>
+      )}
+      {!isLoadingReviews && reviews.length > 0 && (
+        <div className="user-reviews__list">
+          {reviews.map((review) => {
+            const isOwnReview = userDetailsId === review.user.id;
+
+            return (
+              <ProfileReviewItem
+                key={review.id}
+                review={review}
+                isOwnReview={isOwnReview}
+                isVoting={votingReviews.has(review.id)}
+                formatPlayTime={formatPlayTime}
+                getRatingText={getRatingText}
+                onVote={onVote}
+                onDelete={onDelete}
+              />
+            );
+          })}
+        </div>
+      )}
+    </motion.div>
+  );
+}

src/renderer/src/pages/profile/profile-content/user-library-game-card.scss

@@ -36,6 +36,7 @@
     box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
     width: 100%;
     position: relative;
+    overflow: hidden;
 
     &:before {
       content: "";
@@ -193,8 +194,28 @@
     border-radius: 4px;
     width: 100%;
     height: 100%;
-    min-width: 100%;
-    min-height: 100%;
+    display: block;
+  }
+
+  &__cover-placeholder {
+    position: relative;
+    width: 100%;
+    padding-bottom: 150%;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 0%,
+      rgba(255, 255, 255, 0.04) 50%,
+      rgba(255, 255, 255, 0.08) 100%
+    );
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.3);
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   &__achievements-progress {

src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx

@@ -2,7 +2,7 @@ import { UserGame } from "@types";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useFormat, useToast } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import {
   buildGameAchievementPath,
   buildGameDetailsPath,
@@ -15,6 +15,7 @@ import {
   AlertFillIcon,
   PinIcon,
   PinSlashIcon,
+  ImageIcon,
 } from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { Tooltip } from "react-tooltip";
@@ -44,6 +45,11 @@ export function UserLibraryGameCard({
   const navigate = useNavigate();
   const [isTooltipHovered, setIsTooltipHovered] = useState(false);
   const [isPinning, setIsPinning] = useState(false);
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageError(false);
+  }, [game.coverImageUrl]);
 
   const getStatsItemCount = useCallback(() => {
     let statsCount = 1;
@@ -233,11 +239,18 @@ export function UserLibraryGameCard({
               )}
           </div>
 
-          <img
-            src={game.coverImageUrl ?? undefined}
-            alt={game.title}
-            className="user-library-game__game-image"
-          />
+          {imageError || !game.coverImageUrl ? (
+            <div className="user-library-game__cover-placeholder">
+              <ImageIcon size={48} />
+            </div>
+          ) : (
+            <img
+              src={game.coverImageUrl}
+              alt={game.title}
+              className="user-library-game__game-image"
+              onError={() => setImageError(true)}
+            />
+          )}
         </button>
       </li>
       <Tooltip

src/types/index.ts

@@ -244,6 +244,7 @@ export interface GameReview {
   isBlocked: boolean;
   hasUpvoted: boolean;
   hasDownvoted: boolean;
+  playTimeInSeconds?: number;
   user: {
     id: string;
     displayName: string;
@@ -252,7 +253,7 @@ export interface GameReview {
   translations: {
     [key: string]: string;
   };
-  detectedLanguage: string;
+  detectedLanguage: string | null;
 }
 
 export interface TrendingGame extends ShopAssets {
@@ -361,6 +362,8 @@ export type LibraryGame = Game &
   Partial<ShopAssets> & {
     id: string;
     download: Download | null;
+    unlockedAchievementCount?: number;
+    achievementCount?: number;
   };
 
 export type UserGameDetails = ShopAssets & {

yarn.lock

@@ -7538,6 +7538,13 @@ react-i18next@^14.1.0:
     "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
+react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
+  dependencies:
+    throttle-debounce "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8540,6 +8547,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 "through@>=2.2.7 <3":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"