fix: handling exceptions

fix: duplication
fix: duplacation and formatting
2026-01-11 13:56:16 +00:00 · 2025-11-04 22:25:32 +02:00 · 2025-11-04 22:22:02 +02:00 · 2025-11-04 22:10:07 +02:00 · 2025-11-04 21:50:14 +02:00 · 2025-11-03 12:02:52 +00:00
41 changed files with 4080 additions and 1690 deletions
--- a/.github/workflows/update-aur.yml
+++ b/.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 }}"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hydralauncher",
-  "version": "3.7.2",
+  "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",
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -223,6 +223,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 +362,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",
@@ -673,6 +677,18 @@
    "upload_banner": "Upload banner",
    "uploading_banner": "Uploading banner…",
    "background_image_updated": "Background image updated",
+    "crop_profile_image": "Crop Profile Image",
+    "crop_background_image": "Crop Background Image",
+    "crop": "Crop",
+    "cropping": "Cropping…",
+    "crop_area": "Crop area",
+    "resize_handle_nw": "Resize handle - northwest corner",
+    "resize_handle_ne": "Resize handle - northeast corner",
+    "resize_handle_sw": "Resize handle - southwest corner",
+    "resize_handle_se": "Resize handle - southeast corner",
+    "zoom_in": "Zoom In",
+    "zoom_out": "Zoom Out",
+    "image_crop_failure": "Failed to crop image. Please try again.",
    "stats": "Stats",
    "achievements": "achievements",
    "games": "Games",
@@ -689,7 +705,10 @@
    "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..."
  },
  "achievement": {
    "achievement_unlocked": "Achievement unlocked",
--- a/src/locales/es/translation.json
+++ b/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",
--- a/src/locales/pt-BR/translation.json
+++ b/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",
--- a/src/locales/pt-PT/translation.json
+++ b/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",
--- a/src/locales/ru/translation.json
+++ b/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": "Достижение разблокировано",
--- a/src/main/main.ts
+++ b/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
--- a/src/main/services/achievements/achievement-watcher-manager.ts
+++ b/src/main/services/achievements/achievement-watcher-manager.ts
@@ -167,6 +167,8 @@ export class AchievementWatcherManager {
    shop: GameShop,
    objectId: string
  ) {
+    if (shop === "custom") return;
+
    const gameKey = levelKeys.game(shop, objectId);
    if (this.alreadySyncedGames.get(gameKey)) return;

--- a/src/main/services/hosters/datanodes.ts
+++ b/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;
    }
  }
--- a/src/main/services/hydra-api.ts
+++ b/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();
--- a/src/main/services/library-sync/create-game.ts
+++ b/src/main/services/library-sync/create-game.ts
@@ -3,6 +3,10 @@ import { HydraApi } from "../hydra-api";
 import { gamesSublevel, levelKeys } from "@main/level";

 export const createGame = async (game: Game) => {
+  if (game.shop === "custom") {
+    return;
+  }
+
  return HydraApi.post(`/profile/games`, {
    objectId: game.objectId,
    playTimeInMilliseconds: Math.trunc(game.playTimeInMilliseconds ?? 0),
--- a/src/main/services/library-sync/update-game-playtime.ts
+++ b/src/main/services/library-sync/update-game-playtime.ts
@@ -1,12 +1,16 @@
 import type { Game } from "@types";
 import { HydraApi } from "../hydra-api";

-export const updateGamePlaytime = async (
+export const trackGamePlaytime = async (
  game: Game,
  deltaInMillis: number,
  lastTimePlayed: Date
 ) => {
-  return HydraApi.put(`/profile/games/${game.remoteId}`, {
+  if (game.shop === "custom") {
+    return;
+  }
+
+  return HydraApi.put(`/profile/games/${game.shop}/${game.objectId}`, {
    playTimeDeltaInSeconds: Math.trunc(deltaInMillis / 1000),
    lastTimePlayed,
  });
--- a/src/main/services/process-watcher.ts
+++ b/src/main/services/process-watcher.ts
@@ -1,5 +1,5 @@
 import { WindowManager } from "./window-manager";
-import { createGame, updateGamePlaytime } from "./library-sync";
+import { createGame, trackGamePlaytime } from "./library-sync";
 import type { Game, GameRunning, UserPreferences } from "@types";
 import { PythonRPC } from "./python-rpc";
 import axios from "axios";
@@ -198,11 +198,6 @@ export const watchProcesses = async () => {
 function onOpenGame(game: Game) {
  const now = performance.now();

-  AchievementWatcherManager.firstSyncWithRemoteIfNeeded(
-    game.shop,
-    game.objectId
-  );
-
  gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
    lastTick: now,
    firstTick: now,
@@ -220,8 +215,15 @@ function onOpenGame(game: Game) {
    })
    .catch(() => {});

+  if (game.shop === "custom") return;
+
+  AchievementWatcherManager.firstSyncWithRemoteIfNeeded(
+    game.shop,
+    game.objectId
+  );
+
  if (game.remoteId) {
-    updateGamePlaytime(
+    trackGamePlaytime(
      game,
      game.unsyncedDeltaPlayTimeInMilliseconds ?? 0,
      new Date()
@@ -255,43 +257,46 @@ function onTickGame(game: Game) {

  const delta = now - gamePlaytime.lastTick;

-  gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
+  const updatedGame: Game = {
    ...game,
    playTimeInMilliseconds: (game.playTimeInMilliseconds ?? 0) + delta,
    lastTimePlayed: new Date(),
-  });
+  };
+
+  gamesSublevel.put(levelKeys.game(game.shop, game.objectId), updatedGame);

  gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
    ...gamePlaytime,
    lastTick: now,
  });

-  if (currentTick % TICKS_TO_UPDATE_API === 0) {
+  if (currentTick % TICKS_TO_UPDATE_API === 0 && game.shop !== "custom") {
    const deltaToSync =
      now -
      gamePlaytime.lastSyncTick +
      (game.unsyncedDeltaPlayTimeInMilliseconds ?? 0);

    const gamePromise = game.remoteId
-      ? updateGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
+      ? trackGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
      : createGame(game);

    gamePromise
      .then(() => {
        gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
-          ...game,
+          ...updatedGame,
          unsyncedDeltaPlayTimeInMilliseconds: 0,
        });
      })
      .catch(() => {
        gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
-          ...game,
+          ...updatedGame,
          unsyncedDeltaPlayTimeInMilliseconds: deltaToSync,
        });
      })
      .finally(() => {
        gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
          ...gamePlaytime,
+          lastTick: now,
          lastSyncTick: now,
        });
      });
@@ -299,11 +304,24 @@ function onTickGame(game: Game) {
 }

 const onCloseGame = (game: Game) => {
+  const now = performance.now();
  const gamePlaytime = gamesPlaytime.get(
    levelKeys.game(game.shop, game.objectId)
  )!;
  gamesPlaytime.delete(levelKeys.game(game.shop, game.objectId));

+  const delta = now - gamePlaytime.lastTick;
+
+  const updatedGame: Game = {
+    ...game,
+    playTimeInMilliseconds: (game.playTimeInMilliseconds ?? 0) + delta,
+    lastTimePlayed: new Date(),
+  };
+
+  gamesSublevel.put(levelKeys.game(game.shop, game.objectId), updatedGame);
+
+  if (game.shop === "custom") return;
+
  if (game.remoteId) {
    if (game.automaticCloudSync) {
      CloudSync.uploadSaveGame(
@@ -315,20 +333,20 @@ const onCloseGame = (game: Game) => {
    }

    const deltaToSync =
-      performance.now() -
+      now -
      gamePlaytime.lastSyncTick +
      (game.unsyncedDeltaPlayTimeInMilliseconds ?? 0);

-    return updateGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
+    return trackGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
      .then(() => {
        return gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
-          ...game,
+          ...updatedGame,
          unsyncedDeltaPlayTimeInMilliseconds: 0,
        });
      })
      .catch(() => {
        return gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
-          ...game,
+          ...updatedGame,
          unsyncedDeltaPlayTimeInMilliseconds: deltaToSync,
        });
      });
--- a/src/main/services/window-manager.ts
+++ b/src/main/services/window-manager.ts
@@ -289,12 +289,6 @@ export class WindowManager {
    }
  }

-  private static loadNotificationWindowURL() {
-    if (this.notificationWindow) {
-      this.loadWindowURL(this.notificationWindow, "achievement-notification");
-    }
-  }
-
  private static readonly NOTIFICATION_WINDOW_WIDTH = 360;
  private static readonly NOTIFICATION_WINDOW_HEIGHT = 140;

@@ -302,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,
    };
  }

@@ -387,7 +393,7 @@ export class WindowManager {
    this.notificationWindow.setIgnoreMouseEvents(true);

    this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
-    this.loadNotificationWindowURL();
+    this.loadWindowURL(this.notificationWindow, "achievement-notification");

    if (!app.isPackaged || isStaging) {
      this.notificationWindow.webContents.openDevTools();
--- a/src/renderer/src/app.tsx
+++ b/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>
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -60,7 +60,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");
--- a/src/renderer/src/components/image-cropper/image-cropper.scss
+++ b/src/renderer/src/components/image-cropper/image-cropper.scss
@@ -0,0 +1,107 @@
+@use "../../scss/globals.scss";
+
+.image-cropper {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  min-height: 500px;
+  max-height: 600px;
+
+  &__container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background-color: transparent;
+    border-radius: 4px;
+    position: relative;
+    min-height: 400px;
+  }
+
+  &__image-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__image {
+    display: block;
+    user-select: none;
+    pointer-events: none;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  &__crop-overlay {
+    position: absolute;
+    border: 2px solid globals.$brand-teal;
+    cursor: move;
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+    background-color: transparent;
+
+    &--circular {
+      border-radius: 50%;
+    }
+  }
+
+  &__crop-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: globals.$brand-teal;
+    border: 2px solid globals.$background-color;
+    border-radius: 2px;
+    cursor: nwse-resize;
+
+    &--nw {
+      top: -6px;
+      left: -6px;
+      cursor: nwse-resize;
+    }
+
+    &--ne {
+      top: -6px;
+      right: -6px;
+      cursor: nesw-resize;
+    }
+
+    &--sw {
+      bottom: -6px;
+      left: -6px;
+      cursor: nesw-resize;
+    }
+
+    &--se {
+      bottom: -6px;
+      right: -6px;
+      cursor: nwse-resize;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__zoom-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__zoom-value {
+    min-width: 60px;
+    text-align: center;
+    color: globals.$body-color;
+  }
+
+  &__actions {
+    display: flex;
+    gap: calc(globals.$spacing-unit * 2);
+    justify-content: flex-end;
+  }
+}
--- a/src/renderer/src/components/image-cropper/image-cropper.tsx
+++ b/src/renderer/src/components/image-cropper/image-cropper.tsx
@@ -0,0 +1,730 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../button/button";
+import { useTranslation } from "react-i18next";
+import { logger } from "@renderer/logger";
+import "./image-cropper.scss";
+
+export interface CropArea {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ImageCropperProps {
+  imagePath: string;
+  onCrop: (cropArea: CropArea) => Promise<void>;
+  onCancel: () => void;
+  aspectRatio?: number;
+  circular?: boolean;
+  minCropSize?: number;
+}
+
+export function ImageCropper({
+  imagePath,
+  onCrop,
+  onCancel,
+  aspectRatio,
+  circular = false,
+  minCropSize = 50,
+}: Readonly<ImageCropperProps>) {
+  const { t } = useTranslation("user_profile");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const zoom = 0.5;
+  const [cropArea, setCropArea] = useState<CropArea>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeHandle, setResizeHandle] = useState<string | null>(null);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [cropStart, setCropStart] = useState<CropArea | null>(null);
+  const [isCropping, setIsCropping] = useState(false);
+
+  const getImageSrc = () => {
+    return imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
+  };
+
+  const calculateContainerBounds = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return null;
+
+    const containerRect = container.getBoundingClientRect();
+    if (containerRect.width === 0 || containerRect.height === 0) return null;
+
+    const computedStyle = globalThis.getComputedStyle(container);
+    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft) || 0;
+    const paddingRight = Number.parseFloat(computedStyle.paddingRight) || 0;
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = Number.parseFloat(computedStyle.paddingBottom) || 0;
+
+    return {
+      maxWidth: containerRect.width - paddingLeft - paddingRight,
+      maxHeight: containerRect.height - paddingTop - paddingBottom,
+    };
+  }, []);
+
+  const calculateDisplayDimensions = useCallback(
+    (bounds: { maxWidth: number; maxHeight: number } | null) => {
+      if (!imageLoaded) return { width: 0, height: 0 };
+
+      if (!bounds) {
+        return {
+          width: imageSize.width * zoom,
+          height: imageSize.height * zoom,
+        };
+      }
+
+      const imageAspect = imageSize.width / imageSize.height;
+      let displayWidth = imageSize.width * zoom;
+      let displayHeight = imageSize.height * zoom;
+
+      if (displayWidth > bounds.maxWidth) {
+        displayWidth = bounds.maxWidth;
+        displayHeight = displayWidth / imageAspect;
+      }
+      if (displayHeight > bounds.maxHeight) {
+        displayHeight = bounds.maxHeight;
+        displayWidth = displayHeight * imageAspect;
+      }
+
+      return { width: displayWidth, height: displayHeight };
+    },
+    [imageLoaded, imageSize]
+  );
+
+  const calculateInitialCropArea = useCallback(() => {
+    const bounds = calculateContainerBounds();
+    if (!bounds || bounds.maxWidth <= 0 || bounds.maxHeight <= 0) return;
+
+    const { width: displayWidth, height: displayHeight } =
+      calculateDisplayDimensions(bounds);
+
+    const effectiveAspectRatio = circular ? 1 : aspectRatio;
+    let cropWidth: number;
+    let cropHeight: number;
+
+    if (effectiveAspectRatio) {
+      const displayAspect = displayWidth / displayHeight;
+      if (displayAspect > effectiveAspectRatio) {
+        cropHeight = displayHeight * 0.8;
+        cropWidth = cropHeight * effectiveAspectRatio;
+      } else {
+        cropWidth = displayWidth * 0.8;
+        cropHeight = cropWidth / effectiveAspectRatio;
+      }
+    } else {
+      const cropSize = Math.min(displayWidth, displayHeight) * 0.8;
+      cropWidth = cropSize;
+      cropHeight = cropSize;
+    }
+
+    setCropArea({
+      x: (displayWidth - cropWidth) / 2,
+      y: (displayHeight - cropHeight) / 2,
+      width: cropWidth,
+      height: cropHeight,
+    });
+  }, [
+    calculateContainerBounds,
+    calculateDisplayDimensions,
+    aspectRatio,
+    circular,
+  ]);
+
+  const getDisplaySize = useCallback(() => {
+    const bounds = calculateContainerBounds();
+    return calculateDisplayDimensions(bounds);
+  }, [calculateContainerBounds, calculateDisplayDimensions]);
+
+  useEffect(() => {
+    const img = new Image();
+    const handleImageLoad = () => {
+      setImageSize({ width: img.width, height: img.height });
+      setImageLoaded(true);
+    };
+    const handleImageError = (error: Event | string) => {
+      logger.error("Failed to load image:", { src: getImageSrc(), error });
+    };
+    img.onload = handleImageLoad;
+    img.onerror = handleImageError;
+    img.src = getImageSrc();
+  }, [imagePath]);
+
+  useEffect(() => {
+    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) return;
+
+    const performDoubleAnimationFrame = () => {
+      calculateInitialCropArea();
+    };
+
+    const handleAnimationFrame = () => {
+      requestAnimationFrame(performDoubleAnimationFrame);
+    };
+
+    const calculateWithDelay = () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      if (containerRect.width === 0 || containerRect.height === 0) return;
+
+      requestAnimationFrame(handleAnimationFrame);
+    };
+
+    const handleResize = () => {
+      calculateWithDelay();
+    };
+
+    const timeoutId = setTimeout(calculateWithDelay, 200);
+
+    const resizeObserver = new ResizeObserver(handleResize);
+
+    const container = containerRef.current;
+    if (container) {
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+      resizeObserver.disconnect();
+    };
+  }, [imageLoaded, imageSize, calculateInitialCropArea]);
+
+  const getRealCropArea = (): CropArea => {
+    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) {
+      return cropArea;
+    }
+
+    const displaySize = getDisplaySize();
+    if (displaySize.width === 0 || displaySize.height === 0) {
+      return cropArea;
+    }
+
+    const scaleX = imageSize.width / displaySize.width;
+    const scaleY = imageSize.height / displaySize.height;
+
+    return {
+      x: cropArea.x * scaleX,
+      y: cropArea.y * scaleY,
+      width: cropArea.width * scaleX,
+      height: cropArea.height * scaleY,
+    };
+  };
+
+  const enforceAspectRatio = (
+    width: number,
+    height: number,
+    ratio: number
+  ): { width: number; height: number } => {
+    const currentRatio = width / height;
+    if (currentRatio > ratio) {
+      return { width, height: width / ratio };
+    }
+    return { width: height * ratio, height };
+  };
+
+  const calculateMinSize = useCallback(
+    (effectiveAspectRatio: number | undefined) => {
+      if (!effectiveAspectRatio) return minCropSize;
+      return effectiveAspectRatio > 1
+        ? minCropSize * effectiveAspectRatio
+        : minCropSize / effectiveAspectRatio;
+    },
+    [minCropSize]
+  );
+
+  const getImageWrapperBounds = useCallback(() => {
+    const imageWrapper = imageRef.current?.parentElement;
+    if (!imageWrapper) return { width: 0, height: 0 };
+
+    const rect = imageWrapper.getBoundingClientRect();
+    return { width: rect.width, height: rect.height };
+  }, []);
+
+  const constrainCropArea = useCallback(
+    (area: CropArea): CropArea => {
+      const displaySize = getDisplaySize();
+      const wrapperBounds = getImageWrapperBounds();
+      const actualBounds = {
+        width:
+          wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
+        height:
+          wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
+      };
+
+      let { x, y, width, height } = area;
+      const effectiveAspectRatio = circular ? 1 : aspectRatio;
+      const minSize = calculateMinSize(effectiveAspectRatio);
+
+      if (effectiveAspectRatio) {
+        ({ width, height } = enforceAspectRatio(
+          width,
+          height,
+          effectiveAspectRatio
+        ));
+
+        const maxWidth = Math.min(
+          actualBounds.width,
+          actualBounds.height * effectiveAspectRatio
+        );
+        const maxHeight = Math.min(
+          actualBounds.height,
+          actualBounds.width / effectiveAspectRatio
+        );
+
+        width = Math.max(minSize, Math.min(width, maxWidth));
+        height = Math.max(minSize, Math.min(height, maxHeight));
+
+        ({ width, height } = enforceAspectRatio(
+          width,
+          height,
+          effectiveAspectRatio
+        ));
+
+        width = Math.min(width, actualBounds.width);
+        height = Math.min(height, actualBounds.height);
+        ({ width, height } = enforceAspectRatio(
+          width,
+          height,
+          effectiveAspectRatio
+        ));
+      } else {
+        width = Math.max(minSize, Math.min(width, actualBounds.width));
+        height = Math.max(minSize, Math.min(height, actualBounds.height));
+      }
+
+      x = Math.max(0, Math.min(x, actualBounds.width - width));
+      y = Math.max(0, Math.min(y, actualBounds.height - height));
+
+      return { x, y, width, height };
+    },
+    [
+      getDisplaySize,
+      getImageWrapperBounds,
+      circular,
+      aspectRatio,
+      calculateMinSize,
+    ]
+  );
+
+  const getRelativeCoordinates = (
+    e: MouseEvent | React.MouseEvent
+  ): { x: number; y: number } | null => {
+    const imageWrapper = imageRef.current?.parentElement;
+    if (!imageWrapper) return null;
+
+    const rect = imageWrapper.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    return { x, y };
+  };
+
+  const handleDrag = useCallback(
+    (coords: { x: number; y: number }) => {
+      const newX = coords.x - dragStart.x;
+      const newY = coords.y - dragStart.y;
+      setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
+    },
+    [dragStart, constrainCropArea]
+  );
+
+  const calculateResizeDeltas = (
+    resizeHandle: string,
+    coords: { x: number; y: number },
+    cropStart: CropArea
+  ) => {
+    const handleMap: Record<
+      string,
+      (
+        coords: { x: number; y: number },
+        cropStart: CropArea
+      ) => {
+        deltaX: number;
+        deltaY: number;
+        newX: number;
+        newY: number;
+      }
+    > = {
+      "resize-se": (c, cs) => ({
+        deltaX: c.x - (cs.x + cs.width),
+        deltaY: c.y - (cs.y + cs.height),
+        newX: cs.x,
+        newY: cs.y,
+      }),
+      "resize-sw": (c, cs) => ({
+        deltaX: cs.x - c.x,
+        deltaY: c.y - (cs.y + cs.height),
+        newX: c.x,
+        newY: cs.y,
+      }),
+      "resize-ne": (c, cs) => ({
+        deltaX: c.x - (cs.x + cs.width),
+        deltaY: cs.y - c.y,
+        newX: cs.x,
+        newY: c.y,
+      }),
+      "resize-nw": (c, cs) => ({
+        deltaX: cs.x - c.x,
+        deltaY: cs.y - c.y,
+        newX: c.x,
+        newY: c.y,
+      }),
+    };
+
+    const handler = handleMap[resizeHandle];
+    if (handler) {
+      return handler(coords, cropStart);
+    }
+
+    return {
+      deltaX: 0,
+      deltaY: 0,
+      newX: cropStart.x,
+      newY: cropStart.y,
+    };
+  };
+
+  const adjustPositionForHandle = (
+    resizeHandle: string,
+    cropStart: CropArea,
+    adjustedWidth: number,
+    adjustedHeight: number
+  ) => {
+    let adjustedX = cropStart.x;
+    let adjustedY = cropStart.y;
+
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-sw") {
+      adjustedX = cropStart.x + cropStart.width - adjustedWidth;
+    }
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-ne") {
+      adjustedY = cropStart.y + cropStart.height - adjustedHeight;
+    }
+
+    return { x: adjustedX, y: adjustedY };
+  };
+
+  const applyCircularConstraint = (
+    newWidth: number,
+    newHeight: number,
+    cropStart: CropArea,
+    resizeHandle: string
+  ) => {
+    const size = Math.min(newWidth, newHeight);
+    const deltaSize = size - Math.min(cropStart.width, cropStart.height);
+    const adjustedWidth = cropStart.width + deltaSize;
+    const adjustedHeight = cropStart.height + deltaSize;
+
+    const { x, y } = adjustPositionForHandle(
+      resizeHandle,
+      cropStart,
+      adjustedWidth,
+      adjustedHeight
+    );
+
+    return { width: adjustedWidth, height: adjustedHeight, x, y };
+  };
+
+  const applyAspectRatioConstraint = (
+    newWidth: number,
+    newHeight: number,
+    cropStart: CropArea,
+    resizeHandle: string,
+    aspectRatio: number
+  ) => {
+    const deltaX = Math.abs(newWidth - cropStart.width);
+    const deltaY = Math.abs(newHeight - cropStart.height);
+
+    let adjustedWidth: number;
+    let adjustedHeight: number;
+
+    if (deltaX > deltaY) {
+      adjustedWidth = newWidth;
+      adjustedHeight = newWidth / aspectRatio;
+    } else {
+      adjustedHeight = newHeight;
+      adjustedWidth = newHeight * aspectRatio;
+    }
+
+    const wrapperBounds = getImageWrapperBounds();
+    const displaySize = getDisplaySize();
+    const actualBounds = {
+      width: wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
+      height:
+        wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
+    };
+
+    const maxWidth = Math.min(
+      actualBounds.width,
+      actualBounds.height * aspectRatio
+    );
+    const maxHeight = Math.min(
+      actualBounds.height,
+      actualBounds.width / aspectRatio
+    );
+
+    adjustedWidth = Math.min(adjustedWidth, maxWidth);
+    adjustedHeight = Math.min(adjustedHeight, maxHeight);
+
+    const finalRatio = adjustedWidth / adjustedHeight;
+    if (Math.abs(finalRatio - aspectRatio) > 0.001) {
+      if (finalRatio > aspectRatio) {
+        adjustedHeight = adjustedWidth / aspectRatio;
+      } else {
+        adjustedWidth = adjustedHeight * aspectRatio;
+      }
+    }
+
+    const { x, y } = adjustPositionForHandle(
+      resizeHandle,
+      cropStart,
+      adjustedWidth,
+      adjustedHeight
+    );
+
+    return { width: adjustedWidth, height: adjustedHeight, x, y };
+  };
+
+  const handleResize = useCallback(
+    (coords: { x: number; y: number }) => {
+      if (!cropStart || !resizeHandle) return;
+
+      const { deltaX, deltaY, newX, newY } = calculateResizeDeltas(
+        resizeHandle,
+        coords,
+        cropStart
+      );
+
+      let adjustedWidth = cropStart.width + deltaX;
+      let adjustedHeight = cropStart.height + deltaY;
+      let adjustedX = newX;
+      let adjustedY = newY;
+
+      if (circular) {
+        const constrained = applyCircularConstraint(
+          adjustedWidth,
+          adjustedHeight,
+          cropStart,
+          resizeHandle
+        );
+        adjustedWidth = constrained.width;
+        adjustedHeight = constrained.height;
+        adjustedX = constrained.x;
+        adjustedY = constrained.y;
+      } else if (aspectRatio) {
+        const constrained = applyAspectRatioConstraint(
+          adjustedWidth,
+          adjustedHeight,
+          cropStart,
+          resizeHandle,
+          aspectRatio
+        );
+        adjustedWidth = constrained.width;
+        adjustedHeight = constrained.height;
+        adjustedX = constrained.x;
+        adjustedY = constrained.y;
+      }
+
+      const newCropArea = constrainCropArea({
+        x: adjustedX,
+        y: adjustedY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+      });
+      setCropArea(newCropArea);
+    },
+    [cropStart, resizeHandle, circular, aspectRatio, constrainCropArea]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!imageLoaded) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const coords = getRelativeCoordinates(e);
+      if (!coords) return;
+
+      const handle = (e.target as HTMLElement)?.dataset?.handle;
+      if (handle?.startsWith("resize-")) {
+        setIsResizing(true);
+        setResizeHandle(handle);
+        setCropStart(cropArea);
+      } else if (
+        coords.x >= cropArea.x &&
+        coords.x <= cropArea.x + cropArea.width &&
+        coords.y >= cropArea.y &&
+        coords.y <= cropArea.y + cropArea.height
+      ) {
+        setIsDragging(true);
+        setDragStart({ x: coords.x - cropArea.x, y: coords.y - cropArea.y });
+      }
+    },
+    [imageLoaded, cropArea]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!imageLoaded) return;
+
+      const coords = getRelativeCoordinates(e);
+      if (!coords) return;
+
+      if (isDragging && cropStart === null) {
+        handleDrag(coords);
+      } else if (isResizing && cropStart && resizeHandle) {
+        handleResize(coords);
+      }
+    },
+    [
+      imageLoaded,
+      isDragging,
+      isResizing,
+      cropStart,
+      resizeHandle,
+      handleDrag,
+      handleResize,
+    ]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeHandle(null);
+    setCropStart(null);
+  }, []);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+    }
+  }, []);
+
+  const handleOverlayKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = e.shiftKey ? 10 : 1;
+      const keyMap: Record<
+        string,
+        (area: CropArea) => { x: number; y: number }
+      > = {
+        ArrowLeft: (area) => ({ x: area.x - step, y: area.y }),
+        ArrowRight: (area) => ({ x: area.x + step, y: area.y }),
+        ArrowUp: (area) => ({ x: area.x, y: area.y - step }),
+        ArrowDown: (area) => ({ x: area.x, y: area.y + step }),
+      };
+
+      const handler = keyMap[e.key];
+      if (!handler) return;
+
+      e.preventDefault();
+      const { x: newX, y: newY } = handler(cropArea);
+      setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
+    },
+    [cropArea, constrainCropArea]
+  );
+
+  useEffect(() => {
+    if (!isDragging && !isResizing) return;
+
+    const cleanup = () => {
+      globalThis.removeEventListener("mousemove", handleMouseMove);
+      globalThis.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    globalThis.addEventListener("mousemove", handleMouseMove);
+    globalThis.addEventListener("mouseup", handleMouseUp);
+    return cleanup;
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleCrop = async () => {
+    setIsCropping(true);
+    try {
+      const realCropArea = getRealCropArea();
+      await onCrop(realCropArea);
+    } finally {
+      setIsCropping(false);
+    }
+  };
+
+  const displaySize = getDisplaySize();
+
+  return (
+    <div className="image-cropper">
+      <div className="image-cropper__container" ref={containerRef}>
+        <div
+          className="image-cropper__image-wrapper"
+          style={{
+            width: `${displaySize.width}px`,
+            height: `${displaySize.height}px`,
+            maxWidth: "100%",
+            maxHeight: "100%",
+          }}
+        >
+          {imageLoaded && (
+            <img
+              ref={imageRef}
+              src={getImageSrc()}
+              alt="Crop"
+              className="image-cropper__image"
+              style={{
+                width: `${displaySize.width}px`,
+                height: `${displaySize.height}px`,
+                maxWidth: "100%",
+                maxHeight: "100%",
+              }}
+            />
+          )}
+          {imageLoaded && cropArea.width > 0 && cropArea.height > 0 && (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            <section
+              className={`image-cropper__crop-overlay ${circular ? "image-cropper__crop-overlay--circular" : ""}`}
+              style={{
+                left: `${cropArea.x}px`,
+                top: `${cropArea.y}px`,
+                width: `${cropArea.width}px`,
+                height: `${cropArea.height}px`,
+              }}
+              aria-label={t("crop_area")}
+              onMouseDown={handleMouseDown}
+              onKeyDown={handleOverlayKeyDown}
+            >
+              {(["nw", "ne", "sw", "se"] as const).map((position) => (
+                <button
+                  key={position}
+                  type="button"
+                  className={`image-cropper__crop-handle image-cropper__crop-handle--${position}`}
+                  data-handle={`resize-${position}`}
+                  aria-label={t(`resize_handle_${position}`)}
+                  onMouseDown={handleMouseDown}
+                  onKeyDown={handleKeyDown}
+                />
+              ))}
+            </section>
+          )}
+        </div>
+      </div>
+
+      <div className="image-cropper__controls">
+        <div className="image-cropper__actions">
+          <Button theme="outline" onClick={onCancel} disabled={isCropping}>
+            {t("cancel")}
+          </Button>
+          <Button
+            theme="primary"
+            onClick={handleCrop}
+            disabled={isCropping || !imageLoaded}
+          >
+            {isCropping ? t("cropping") : t("crop")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -19,3 +19,4 @@ export * from "./context-menu/context-menu";
 export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
+export * from "./image-cropper/image-cropper";
--- a/src/renderer/src/context/game-details/game-details.context.tsx
+++ b/src/renderer/src/context/game-details/game-details.context.tsx
@@ -293,6 +293,8 @@ export function GameDetailsContextProvider({
  }, [objectId, shop, userDetails]);

  useEffect(() => {
+    if (shop === "custom") return;
+
    const fetchDownloadSources = async () => {
      try {
        const sources = await window.electron.getDownloadSources();
--- a/src/renderer/src/context/user-profile/user-profile.context.tsx
+++ b/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}
--- a/src/renderer/src/helpers/image-cropper.ts
+++ b/src/renderer/src/helpers/image-cropper.ts
@@ -0,0 +1,158 @@
+import type { CropArea } from "@renderer/components";
+
+type DrawImageCallback = (
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  cropArea: CropArea
+) => void;
+
+const loadImageAndProcess = async (
+  imagePath: string,
+  cropArea: CropArea,
+  outputFormat: string,
+  drawCallback: DrawImageCallback
+): Promise<Uint8Array> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Failed to get canvas context"));
+        return;
+      }
+
+      drawCallback(ctx, img, cropArea);
+
+      const convertBlobToUint8Array = async (
+        blob: Blob
+      ): Promise<Uint8Array> => {
+        const buffer = await blob.arrayBuffer();
+        return new Uint8Array(buffer);
+      };
+
+      const handleBlob = (blob: Blob | null) => {
+        if (!blob) {
+          reject(new Error("Failed to create blob from canvas"));
+          return;
+        }
+
+        convertBlobToUint8Array(blob).then(resolve).catch(reject);
+      };
+
+      canvas.toBlob(handleBlob, outputFormat, 0.95);
+    };
+
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+
+    img.src = imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
+  });
+};
+
+const setCanvasDimensions = (
+  canvas: HTMLCanvasElement,
+  width: number,
+  height: number
+): void => {
+  canvas.width = width;
+  canvas.height = height;
+};
+
+type DrawImageParams = {
+  sourceX: number;
+  sourceY: number;
+  sourceWidth: number;
+  sourceHeight: number;
+  destWidth: number;
+  destHeight: number;
+};
+
+const drawCroppedImage = (
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  params: DrawImageParams
+): void => {
+  ctx.drawImage(
+    img,
+    params.sourceX,
+    params.sourceY,
+    params.sourceWidth,
+    params.sourceHeight,
+    0,
+    0,
+    params.destWidth,
+    params.destHeight
+  );
+};
+
+/**
+ * Crops an image using HTML5 Canvas API
+ * @param imagePath - Path to the image file
+ * @param cropArea - Crop area coordinates and dimensions
+ * @param outputFormat - Output image format (default: 'image/png')
+ * @returns Promise resolving to cropped image as Uint8Array
+ */
+export async function cropImage(
+  imagePath: string,
+  cropArea: CropArea,
+  outputFormat: string = "image/png"
+): Promise<Uint8Array> {
+  return loadImageAndProcess(
+    imagePath,
+    cropArea,
+    outputFormat,
+    (ctx, img, area) => {
+      const canvas = ctx.canvas;
+      setCanvasDimensions(canvas, area.width, area.height);
+      drawCroppedImage(ctx, img, {
+        sourceX: area.x,
+        sourceY: area.y,
+        sourceWidth: area.width,
+        sourceHeight: area.height,
+        destWidth: area.width,
+        destHeight: area.height,
+      });
+    }
+  );
+}
+
+/**
+ * Crops an image to a circular shape
+ * @param imagePath - Path to the image file
+ * @param cropArea - Crop area coordinates and dimensions (should be square for circle)
+ * @param outputFormat - Output image format (default: 'image/png')
+ * @returns Promise resolving to cropped circular image as Uint8Array
+ */
+export async function cropImageToCircle(
+  imagePath: string,
+  cropArea: CropArea,
+  outputFormat: string = "image/png"
+): Promise<Uint8Array> {
+  return loadImageAndProcess(
+    imagePath,
+    cropArea,
+    outputFormat,
+    (ctx, img, area) => {
+      const size = Math.min(area.width, area.height);
+      const canvas = ctx.canvas;
+      setCanvasDimensions(canvas, size, size);
+
+      ctx.beginPath();
+      ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+      ctx.clip();
+
+      drawCroppedImage(ctx, img, {
+        sourceX: area.x,
+        sourceY: area.y,
+        sourceWidth: size,
+        sourceHeight: size,
+        destWidth: size,
+        destHeight: size,
+      });
+    }
+  );
+}
--- a/src/renderer/src/hooks/use-section-collapse.ts
+++ b/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,
  };
 }
--- a/src/renderer/src/pages/catalogue/catalogue.tsx
+++ b/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");
--- a/src/renderer/src/pages/game-details/game-reviews.tsx
+++ b/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(
--- a/src/renderer/src/pages/game-details/review-item.scss
+++ b/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;
--- a/src/renderer/src/pages/game-details/review-item.tsx
+++ b/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>
--- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx
+++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";

@@ -10,8 +10,12 @@ import {
  Modal,
  ModalProps,
  TextField,
+  ImageCropper,
+  CropArea,
 } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
+import { cropImage } from "@renderer/helpers/image-cropper";
+import { logger } from "@renderer/logger";

 import { yupResolver } from "@hookform/resolvers/yup";

@@ -63,6 +67,66 @@ export function EditProfileModal(

  const { showSuccessToast, showErrorToast } = useToast();

+  const [showCropper, setShowCropper] = useState(false);
+  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
+    null
+  );
+  const [onImageChange, setOnImageChange] = useState<
+    ((value: string) => void) | null
+  >(null);
+
+  const handleCrop = async (cropArea: CropArea) => {
+    if (!selectedImagePath || !onImageChange) return;
+
+    try {
+      const imagePathForCrop = selectedImagePath.startsWith("local:")
+        ? selectedImagePath.slice(6)
+        : selectedImagePath;
+      const imageData = await cropImage(
+        imagePathForCrop,
+        cropArea,
+        "image/png"
+      );
+
+      const tempFileName = `cropped-profile-${Date.now()}.png`;
+      const croppedPath = await window.electron.saveTempFile(
+        tempFileName,
+        imageData
+      );
+
+      if (!hasActiveSubscription) {
+        const { imagePath } = await window.electron
+          .processProfileImage(croppedPath)
+          .catch(() => {
+            showErrorToast(t("image_process_failure"));
+            return { imagePath: null };
+          });
+
+        if (imagePath) {
+          onImageChange(imagePath);
+        }
+      } else {
+        onImageChange(croppedPath);
+      }
+
+      setShowCropper(false);
+      setSelectedImagePath(null);
+      setOnImageChange(null);
+    } catch (error) {
+      logger.error("Failed to crop profile image:", error);
+      showErrorToast(t("image_crop_failure"));
+      setShowCropper(false);
+      setSelectedImagePath(null);
+      setOnImageChange(null);
+    }
+  };
+
+  const handleCancelCrop = () => {
+    setShowCropper(false);
+    setSelectedImagePath(null);
+    setOnImageChange(null);
+  };
+
  const onSubmit = async (values: FormValues) => {
    return patchUser(values)
      .then(async () => {
@@ -99,19 +163,9 @@ export function EditProfileModal(

                if (filePaths && filePaths.length > 0) {
                  const path = filePaths[0];
-
-                  if (!hasActiveSubscription) {
-                    const { imagePath } = await window.electron
-                      .processProfileImage(path)
-                      .catch(() => {
-                        showErrorToast(t("image_process_failure"));
-                        return { imagePath: null };
-                      });
-
-                    onChange(imagePath);
-                  } else {
-                    onChange(path);
-                  }
+                  setSelectedImagePath(path);
+                  setOnImageChange(() => onChange);
+                  setShowCropper(true);
                }
              };

@@ -155,6 +209,22 @@ export function EditProfileModal(
          />
        </div>

+        {showCropper && selectedImagePath && (
+          <Modal
+            visible={showCropper}
+            title={t("crop_profile_image")}
+            onClose={handleCancelCrop}
+            large
+          >
+            <ImageCropper
+              imagePath={selectedImagePath}
+              onCrop={handleCrop}
+              onCancel={handleCancelCrop}
+              aspectRatio={1}
+            />
+          </Modal>
+        )}
+
        <small className="edit-profile-modal__hint">
          <Trans i18nKey="privacy_hint" ns="user_profile">
            <Link to="/settings" />
--- a/src/renderer/src/pages/profile/profile-content/library-tab.tsx
+++ b/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>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/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;
  }
 }
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/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 (
--- a/src/renderer/src/pages/profile/profile-content/profile-review-item.tsx
+++ b/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>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/profile-tabs.tsx
+++ b/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>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/reviews-tab.tsx
+++ b/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>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss
+++ b/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 {
--- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx
+++ b/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
--- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx
+++ b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx
@@ -1,14 +1,20 @@
 import { UploadIcon } from "@primer/octicons-react";
-import { Button } from "@renderer/components";
+import { Button, Modal, ImageCropper, CropArea } from "@renderer/components";
 import { useContext, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
+import { cropImage } from "@renderer/helpers/image-cropper";
+import { logger } from "@renderer/logger";
 import "./upload-background-image-button.scss";

 export function UploadBackgroundImageButton() {
  const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
    useState(false);
+  const [showCropper, setShowCropper] = useState(false);
+  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
+    null
+  );
  const { hasActiveSubscription } = useUserDetails();

  const { t } = useTranslation("user_profile");
@@ -16,47 +22,100 @@ export function UploadBackgroundImageButton() {
  const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
  const { patchUser, fetchUserDetails } = useUserDetails();

-  const { showSuccessToast } = useToast();
+  const { showSuccessToast, showErrorToast } = useToast();

  const handleChangeCoverClick = async () => {
+    const { filePaths } = await window.electron.showOpenDialog({
+      properties: ["openFile"],
+      filters: [
+        {
+          name: "Image",
+          extensions: ["jpg", "jpeg", "png", "gif", "webp"],
+        },
+      ],
+    });
+
+    if (filePaths && filePaths.length > 0) {
+      const path = filePaths[0];
+      setSelectedImagePath(path);
+      setShowCropper(true);
+    }
+  };
+
+  const handleCrop = async (cropArea: CropArea) => {
+    if (!selectedImagePath) return;
+
    try {
-      const { filePaths } = await window.electron.showOpenDialog({
-        properties: ["openFile"],
-        filters: [
-          {
-            name: "Image",
-            extensions: ["jpg", "jpeg", "png", "gif", "webp"],
-          },
-        ],
-      });
+      setIsUploadingBackgorundImage(true);
+      setShowCropper(false);

-      if (filePaths && filePaths.length > 0) {
-        const path = filePaths[0];
+      const imagePathForCrop = selectedImagePath.startsWith("local:")
+        ? selectedImagePath.slice(6)
+        : selectedImagePath;
+      const imageData = await cropImage(
+        imagePathForCrop,
+        cropArea,
+        "image/png"
+      );

-        setSelectedBackgroundImage(path);
-        setIsUploadingBackgorundImage(true);
+      const tempFileName = `cropped-background-${Date.now()}.png`;
+      const croppedPath = await window.electron.saveTempFile(
+        tempFileName,
+        imageData
+      );

-        await patchUser({ backgroundImageUrl: path });
+      setSelectedBackgroundImage(croppedPath);
+      await patchUser({ backgroundImageUrl: croppedPath });

-        showSuccessToast(t("background_image_updated"));
-        await fetchUserDetails();
-      }
+      showSuccessToast(t("background_image_updated"));
+      await fetchUserDetails();
+
+      setSelectedImagePath(null);
+    } catch (error) {
+      logger.error("Failed to crop background image:", error);
+      showErrorToast(t("image_crop_failure"));
+      setSelectedImagePath(null);
    } finally {
      setIsUploadingBackgorundImage(false);
    }
  };

+  const handleCancelCrop = () => {
+    setShowCropper(false);
+    setSelectedImagePath(null);
+  };
+
  if (!isMe || !hasActiveSubscription) return null;

  return (
-    <Button
-      theme="outline"
-      className="upload-background-image-button"
-      onClick={handleChangeCoverClick}
-      disabled={isUploadingBackgroundImage}
-    >
-      <UploadIcon />
-      {isUploadingBackgroundImage ? t("uploading_banner") : t("upload_banner")}
-    </Button>
+    <>
+      <Button
+        theme="outline"
+        className="upload-background-image-button"
+        onClick={handleChangeCoverClick}
+        disabled={isUploadingBackgroundImage}
+      >
+        <UploadIcon />
+        {isUploadingBackgroundImage
+          ? t("uploading_banner")
+          : t("upload_banner")}
+      </Button>
+
+      {showCropper && selectedImagePath && (
+        <Modal
+          visible={showCropper}
+          title={t("crop_background_image")}
+          onClose={handleCancelCrop}
+          large
+        >
+          <ImageCropper
+            imagePath={selectedImagePath}
+            onCrop={handleCrop}
+            onCancel={handleCancelCrop}
+            aspectRatio={21 / 9}
+          />
+        </Modal>
+      )}
+    </>
  );
 }
--- a/src/renderer/src/pages/settings/settings-download-sources.tsx
+++ b/src/renderer/src/pages/settings/settings-download-sources.tsx
@@ -89,7 +89,7 @@ export function SettingsDownloadSources() {
    try {
      await window.electron.removeDownloadSource(false, downloadSource.id);
      const sources = await window.electron.getDownloadSources();
-      setDownloadSources(sources as DownloadSource[]);
+      setDownloadSources(sources);
      showSuccessToast(t("removed_download_source"));
    } catch (error) {
      logger.error("Failed to remove download source:", error);
@@ -104,7 +104,7 @@ export function SettingsDownloadSources() {
    try {
      await window.electron.removeDownloadSource(true);
      const sources = await window.electron.getDownloadSources();
-      setDownloadSources(sources as DownloadSource[]);
+      setDownloadSources(sources);
      showSuccessToast(t("removed_all_download_sources"));
    } catch (error) {
      logger.error("Failed to remove all download sources:", error);
@@ -117,7 +117,7 @@ export function SettingsDownloadSources() {
  const handleAddDownloadSource = async () => {
    try {
      const sources = await window.electron.getDownloadSources();
-      setDownloadSources(sources as DownloadSource[]);
+      setDownloadSources(sources);
    } catch (error) {
      logger.error("Failed to refresh download sources:", error);
    }
@@ -128,7 +128,7 @@ export function SettingsDownloadSources() {
    try {
      await window.electron.syncDownloadSources();
      const sources = await window.electron.getDownloadSources();
-      setDownloadSources(sources as DownloadSource[]);
+      setDownloadSources(sources);

      showSuccessToast(t("download_sources_synced_successfully"));
    } finally {
--- a/src/types/index.ts
+++ b/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 {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Moyasee	f0f272c162	fix: handling exceptions	2025-11-04 22:25:32 +02:00
Moyasee	363e52cdb6	fix: duplication	2025-11-04 22:22:02 +02:00
Moyasee	e04a94d10d	fix: duplacation and formatting	2025-11-04 22:10:07 +02:00
Moyasee	6733a3e5b0	feat: ability to crop/resize picture before applying	2025-11-04 21:50:14 +02:00
Chubby Granny Chaser	7fa50dc5a7	feat: adding ws client back	2025-11-03 12:02:52 +00:00
Chubby Granny Chaser	f49fea3032	ci: bump version Some checks failed Build Renderer / build (push) Has been cancelled Details Release / build (ubuntu-latest) (push) Has been cancelled Details Release / build (windows-2022) (push) Has been cancelled Details	2025-11-02 21:17:34 +00:00
Chubby Granny Chaser	595d39986d	Merge pull request #1843 from hydralauncher/fix/fixing-datanodes fix: fixing datanodes	2025-11-02 21:15:53 +00:00
Chubby Granny Chaser	ac01930d68	Merge branch 'main' into fix/fixing-datanodes	2025-11-02 21:14:49 +00:00
Chubby Granny Chaser	37caeb8047	fix: fixing datanodes	2025-11-02 21:13:44 +00:00
Chubby Granny Chaser	7d6eddb17e	Merge pull request #1826 from hydralauncher/feat/reviews-in-profile Feat: Showing User Reviews in profile	2025-11-02 20:46:47 +00:00
Chubby Granny Chaser	48775e57fc	feat: adding reviews to profile	2025-11-02 20:43:59 +00:00
Chubby Granny Chaser	fdc3fecd6f	feat: adding reviews to profile	2025-11-02 20:42:42 +00:00
Chubby Granny Chaser	f0dc7478cf	feat: adding reviews to profile	2025-11-02 20:29:16 +00:00
Chubby Granny Chaser	2e8da53d1a	feat: adding infinite scroll	2025-11-02 20:23:12 +00:00
Chubby Granny Chaser	8794fbc742	Merge branch 'main' of https://github.com/hydralauncher/hydra into feat/reviews-in-profile	2025-11-02 17:31:06 +00:00
Chubby Granny Chaser	bf387aef3f	feat: improving animations	2025-11-02 17:30:45 +00:00
Chubby Granny Chaser	c2a26b9750	Merge pull request #1832 from hydralauncher/feat/playtime-in-reviews Feat: Playtime showing in review message	2025-11-02 17:29:28 +00:00
Moyase	3dc2a29114	Merge branch 'main' into feat/playtime-in-reviews	2025-11-02 19:25:31 +02:00
Chubby Granny Chaser	6ebf7766aa	Merge branch 'main' into feat/reviews-in-profile	2025-11-02 17:04:58 +00:00
Zamitto	19bf99ff11	chore: add sleep to aur script	2025-10-31 16:16:03 -03:00
Zamitto	9c00a17193	Merge branch 'release/v3.7.2'	2025-10-31 13:58:14 -03:00
Zamitto	d167628ed4	fix: prevent crash when detectedLanguage is null Some checks failed Build Renderer / build (push) Has been cancelled Details Release / build (ubuntu-latest) (push) Has been cancelled Details Release / build (windows-2022) (push) Has been cancelled Details	2025-10-31 13:57:15 -03:00
Zamitto	59cfce86ae	Merge pull request #1841 from JarEXE/fix/achievement-notification-position Fix: [Linux] achievement notification positioning on multi-monitor setups	2025-10-31 13:23:41 -03:00
Zamitto	51c4e4f5b3	chore: bump version	2025-10-31 13:07:06 -03:00
jarexe	138120460c	fix: correct achievement notification positioning on multi-monitor setups	2025-10-31 10:57:44 -03:00
Zamitto	c71f5947ba	feat: use new ep to track game playtime	2025-10-31 10:20:11 -03:00
Chubby Granny Chaser	ff8a61ff7a	fix: fixing review partial	2025-10-31 12:05:24 +00:00
Chubby Granny Chaser	d1d46971b6	fix: fixing review partial	2025-10-31 12:03:35 +00:00
Chubby Granny Chaser	b8af69b0fb	fix: fixing review partial	2025-10-31 12:01:42 +00:00
Zamitto	1af69465c1	Merge pull request #1839 from hydralauncher/fix/custom-games-requests fix: requests for custom games	2025-10-31 07:08:51 -03:00
Chubby Granny Chaser	f6c12c22b5	Merge branch 'main' into feat/reviews-in-profile	2025-10-31 07:29:22 +00:00
Chubby Granny Chaser	539010d817	Merge branch 'main' into feat/playtime-in-reviews	2025-10-31 07:29:13 +00:00
Zamitto	aa148c0b70	fix: trim Some checks failed Build Renderer / build (push) Has been cancelled Details Release / build (ubuntu-latest) (push) Has been cancelled Details Release / build (windows-2022) (push) Has been cancelled Details	2025-10-30 20:01:47 -03:00
Moyase	a83a96f214	Merge pull request #1840 from hydralauncher/feat/catalogue-manual-pagination fix: removed ability to enter non-number symbols to pagination	2025-10-31 00:46:39 +02:00
Zamitto	2aa31c0db0	feat: limit game text search to 255 chars	2025-10-30 15:34:49 -03:00
Zamitto	4bfe6d7f86	feat: limit game text search to 255 chars	2025-10-30 15:32:08 -03:00
Zamitto	aadf648a2b	chore: unnecessary casting	2025-10-30 07:58:43 -03:00
Zamitto	87dbd548d0	Merge branch 'release/v3.7.2' into fix/custom-games-requests	2025-10-30 07:58:31 -03:00
Zamitto	459bf73121	fix: request download-sources on custom game Some checks failed Build Renderer / build (push) Has been cancelled Details Release / build (ubuntu-latest) (push) Has been cancelled Details Release / build (windows-2022) (push) Has been cancelled Details	2025-10-30 07:36:23 -03:00
Zamitto	a2ef0f304d	fix: playtime count and custom games request on process watcher	2025-10-30 07:35:49 -03:00
Zamitto	b04561986e	Merge pull request #1838 from hydralauncher/main Some checks failed Build Renderer / build (push) Has been cancelled Details Release / build (ubuntu-latest) (push) Has been cancelled Details Release / build (windows-2022) (push) Has been cancelled Details sync release 3.7.2	2025-10-29 23:07:16 -03:00
Zamitto	ef52d710ed	Merge branch 'main' into feat/reviews-in-profile	2025-10-29 15:28:39 -03:00
Zamitto	31d57a784e	Merge branch 'main' into feat/playtime-in-reviews	2025-10-29 15:28:37 -03:00
Chubby Granny Chaser	2fce12eba7	Merge branch 'main' into feat/reviews-in-profile	2025-10-29 16:55:36 +00:00
Chubby Granny Chaser	1427775c98	Merge branch 'main' into feat/playtime-in-reviews	2025-10-29 16:55:26 +00:00
Moyasee	5c770bc7e7	fix: unnecessary assertion	2025-10-27 20:12:24 +02:00
Moyasee	b431ed479c	fix: converted conditional to boolean	2025-10-27 20:07:08 +02:00
Moyasee	9e09a5decb	fix: translation key fix and formatting	2025-10-27 19:28:29 +02:00
Moyasee	1e1a1c61c9	feat: showing playtime in review and changed positions of elements in review	2025-10-27 19:22:59 +02:00
Moyasee	8de6c92d28	ci: formatting	2025-10-24 08:19:55 +03:00
Moyasee	29e1713824	fix: upvote/downvote button arent being disabled after click	2025-10-23 20:06:37 +03:00
Moyasee	81a77411cc	ci: fix gap between game image and game name in reviews	2025-10-23 16:54:18 +03:00
Moyasee	cc95deb709	fix: proreply reseting user reviews on profile changing	2025-10-23 14:40:02 +03:00
Moyasee	daf9751cf6	ci: import formatting	2025-10-23 14:27:03 +03:00
Moyasee	d21ec52814	ci: deleted comments	2025-10-23 12:06:23 +03:00
Moyasee	f539977431	fix: refactoring functions to prevent nesting more than 4 lvls	2025-10-23 11:53:35 +03:00
Moyasee	3ff20417d5	fix: extracted ternary operation	2025-10-23 11:37:50 +03:00
Moyasee	65f83399f5	ci: merge	2025-10-23 11:29:27 +03:00
Moyasee	eb34f051e1	Merge branch 'feat/reviews-in-profile' of https://github.com/hydralauncher/hydra into feat/reviews-in-profile	2025-10-23 11:28:40 +03:00
Moyasee	ab27f3295e	fix: duplicate selectors and if statements should not be the only statement	2025-10-23 11:26:29 +03:00
Chubby Granny Chaser	3782f79100	Merge branch 'main' into feat/reviews-in-profile	2025-10-23 09:15:57 +01:00
Moyasee	86ab5b107b	ci: formatting	2025-10-23 10:34:15 +03:00
Moyasee	acf8f340dd	ci: review message ui change and fix loading reviews positioning	2025-10-23 10:33:29 +03:00
Moyasee	035f6e8d24	ci: formatting	2025-10-22 22:05:05 +03:00
Moyasee	362d6b634e	feat: added reviews in profile and tabs	2025-10-22 21:13:05 +03:00