diff --git a/src-tauri/src/chess.rs b/src-tauri/src/chess.rs
index 349d382e..698171ca 100644
--- a/src-tauri/src/chess.rs
+++ b/src-tauri/src/chess.rs
@@ -555,3 +555,45 @@ pub async fn similar_structure(fen: String) -> Result<String, Error> {
 
     Ok(Fen::from_setup(setup).to_string())
 }
+
+#[derive(Serialize, Debug)]
+pub struct PieceCount {
+    pub p: i64,
+    pub n: i64,
+    pub b: i64,
+    pub r: i64,
+    pub q: i64,
+}
+
+#[tauri::command]
+pub async fn get_pieces_count(fen: String) -> Result<PieceCount, Error> {
+    let fen: Fen = fen.parse()?;
+    let setup = fen.as_setup().clone();
+
+    let mut counts = PieceCount {
+        p: 0,
+        n: 0,
+        b: 0,
+        r: 0,
+        q: 0,
+    };
+
+    for square in Square::ALL.iter() {
+        if let Some(piece) = setup.board.piece_at(*square) {
+            let color = match piece.color {
+                Color::White => 1,
+                Color::Black => -1,
+            };
+            match piece.role {
+                Role::Pawn => counts.p += color,
+                Role::Knight => counts.n += color,
+                Role::Bishop => counts.b += color,
+                Role::Rook => counts.r += color,
+                Role::Queen => counts.q += color,
+                _ => (),
+            }
+        }
+    }
+
+    Ok(counts)
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index b5813998..93bec8e3 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -32,7 +32,7 @@ use tauri_plugin_log::LogTarget;
 
 use crate::chess::{
     analyze_game, get_engine_name, get_single_best_move, make_move, make_random_move, put_piece,
-    similar_structure, validate_fen,
+    similar_structure, validate_fen, get_pieces_count,
 };
 use crate::db::{
     clear_games, convert_pgn, create_indexes, delete_database, delete_indexes,
@@ -225,6 +225,7 @@ fn main() {
             put_piece,
             make_move,
             make_random_move,
+            get_pieces_count,
             set_file_as_executable,
             validate_fen,
             count_pgn_games,
diff --git a/src/components/boards/BoardPlay.tsx b/src/components/boards/BoardPlay.tsx
index 6ef6fc54..5f51af37 100644
--- a/src/components/boards/BoardPlay.tsx
+++ b/src/components/boards/BoardPlay.tsx
@@ -25,13 +25,13 @@ import { DrawShape } from "chessground/draw";
 import { Color } from "chessground/types";
 import { memo, useContext, useMemo, useState } from "react";
 import {
-  getMaterialDiff,
   handleMove,
   moveToKey,
   parseKeyboardMove,
   parseUci,
   PiecesCount,
   toDests,
+  useMaterialDiff,
 } from "@/utils/chess";
 import { Outcome } from "@/utils/db";
 import { formatMove } from "@/utils/format";
@@ -256,7 +256,7 @@ function BoardPlay({
     [disableVariations, saveFile, toggleEditingMode, toggleOrientation, addGame]
   );
 
-  const { pieces, diff } = getMaterialDiff(currentNode.fen);
+  const { data } = useMaterialDiff(currentNode.fen);
 
   const practiceLock =
     !!practicing && !deck.find((c) => c.fen === currentNode.fen);
@@ -296,14 +296,22 @@ function BoardPlay({
             orientation={orientation}
           />
           <Box sx={{ position: "absolute", top: -30 }}>
-            <ShowMaterial
-              diff={diff}
-              pieces={pieces}
-              color={orientation === "white" ? "black" : "white"}
-            />
+            {data && (
+              <ShowMaterial
+                diff={data?.diff}
+                pieces={data?.pieces}
+                color={orientation === "white" ? "black" : "white"}
+              />
+            )}
           </Box>
           <Box sx={{ position: "absolute", bottom: -30 }}>
-            <ShowMaterial diff={diff} pieces={pieces} color={orientation} />
+            {data && (
+              <ShowMaterial
+                diff={data.diff}
+                pieces={data.pieces}
+                color={orientation}
+              />
+            )}
           </Box>
           <Chessground
             width={boardSize}
diff --git a/src/utils/chess.ts b/src/utils/chess.ts
index eb8d0608..cca02f61 100644
--- a/src/utils/chess.ts
+++ b/src/utils/chess.ts
@@ -32,6 +32,7 @@ import {
     TreeState,
 } from "./treeReducer";
 import { MantineColor } from "@mantine/core";
+import useSWR from 'swr';
 
 export const EMPTY_BOARD = "8/8/8/8/8/8/8/8";
 
@@ -629,31 +630,17 @@ export type PiecesCount = {
     q: number;
 };
 
-export function getMaterialDiff(fen: string) {
-    const chess = new Chess(fen);
+export function useMaterialDiff(fen: string) {
+    return useSWR(["material-diff", fen], async () => {
+        const pieces = await invoke<PiecesCount>("get_pieces_count", { fen: fen });
 
-    const pieces: PiecesCount = {
-        p: 0,
-        n: 0,
-        b: 0,
-        r: 0,
-        q: 0,
-    };
-
-    const board = chess.board();
-    for (const row of board) {
-        for (const square of row) {
-            if (square === null || square.type === "k") continue;
-            pieces[square.type] += square.color === "w" ? 1 : -1;
-        }
-    }
-
-    const diff =
-        pieces.p * 1 +
-        pieces.n * 3 +
-        pieces.b * 3 +
-        pieces.r * 5 +
-        pieces.q * 8;
+        const diff =
+            pieces.p * 1 +
+            pieces.n * 3 +
+            pieces.b * 3 +
+            pieces.r * 5 +
+            pieces.q * 8;
 
-    return { pieces, diff };
+        return { pieces, diff };
+    });
 }