diff --git a/lib/errors/index.ts b/lib/errors/index.ts
index 0025a8cd3..3cad41efb 100644
--- a/lib/errors/index.ts
+++ b/lib/errors/index.ts
@@ -22,6 +22,8 @@ export interface ImageDiffError {
     diffClusters: CoordBounds[];
     diffBuffer?: ArrayBuffer;
     diffImg?: ImageFile;
+    differentPixels?: number; // defined if hermione >= 8.2.0
+    diffRatio?: number; // defined if hermione >= 8.2.0
 }
 
 export interface NoRefImageError {
diff --git a/lib/static/components/state/index.jsx b/lib/static/components/state/index.jsx
index 384d9cc6b..ce7dcaba1 100644
--- a/lib/static/components/state/index.jsx
+++ b/lib/static/components/state/index.jsx
@@ -125,7 +125,19 @@ class State extends Component {
         );
     }
 
-    _getStateTitle() {
+    _getDisplayedDiffPercentValue() {
+        const percent = this.props.image.diffRatio * 100;
+        const percentRounded = Math.ceil(percent * 100) / 100;
+        const percentThreshold = 0.01;
+
+        if (percent < percentThreshold) {
+            return `< ${percentThreshold}`
+        }
+
+        return String(percentRounded);
+    }
+
+    _getStateTitleWithDiffCount() {
         const {image, shouldImageBeOpened} = this.props;
 
         if (!image.stateName) {
@@ -138,7 +150,15 @@ class State extends Component {
             `state-title_${image.status}`
         );
 
-        return <div className={className} onClick={this.onToggleStateResult}>{image.stateName}</div>;
+        let displayedText = image.stateName;
+
+        if (image.differentPixels && image.diffRatio) {
+            const displayedDiffPercent = this._getDisplayedDiffPercentValue();
+
+            displayedText += ` (diff: ${image.differentPixels}px, ${displayedDiffPercent}%)`;
+        }
+
+        return <div className={className} onClick={this.onToggleStateResult}>{displayedText}</div>;
     }
 
     render() {
@@ -146,7 +166,7 @@ class State extends Component {
             return (
                 <Fragment>
                     <hr className="tab__separator" />
-                    {this._getStateTitle()}
+                    {this._getStateTitleWithDiffCount()}
                 </Fragment>
             );
         }
@@ -168,7 +188,7 @@ class State extends Component {
         return (
             <Fragment>
                 <hr className="tab__separator"/>
-                {this._getStateTitle()}
+                {this._getStateTitleWithDiffCount()}
                 {this._drawFailImageControls()}
                 {this._drawUpdatedImageControls()}
                 {elem ? <div className='image-box__container'>{elem}</div> : null}
diff --git a/lib/test-adapter/hermione.ts b/lib/test-adapter/hermione.ts
index c82b6ddf3..21f8b82b4 100644
--- a/lib/test-adapter/hermione.ts
+++ b/lib/test-adapter/hermione.ts
@@ -112,7 +112,9 @@ export class HermioneTestAdapter implements ReporterTestResult {
                     ...(diffImg ? {diffImg} : {}),
                     expectedImg: _.clone(assertResult.refImg),
                     diffClusters: assertResult.diffClusters,
-                    diffOptions: assertResult.diffOpts
+                    diffOptions: assertResult.diffOpts,
+                    differentPixels: assertResult.differentPixels,
+                    diffRatio: assertResult.diffRatio
                 } satisfies ImageInfoDiff;
             } else if (isNoRefImageError(assertResult)) {
                 return {
diff --git a/lib/types.ts b/lib/types.ts
index 7fb67261a..a17cb3088 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -72,6 +72,8 @@ export interface ImageInfoDiff {
     actualImg: ImageFile;
     diffImg?: ImageFile | ImageBuffer;
     diffOptions: DiffOptions;
+    differentPixels?: number; // defined if hermione >= 8.2.0
+    diffRatio?: number; // defined if hermione >= 8.2.0
 }
 
 interface AssertViewSuccess {
diff --git a/package-lock.json b/package-lock.json
index ba965a2c9..e19c12694 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "html-reporter",
-      "version": "9.16.3",
+      "version": "9.16.4",
       "license": "MIT",
       "workspaces": [
         "test/func/fixtures/*",
@@ -91,7 +91,7 @@
         "eslint-plugin-react": "^7.32.2",
         "events": "^3.3.0",
         "fork-ts-checker-webpack-plugin": "^9.0.0",
-        "hermione": "^8.0.5",
+        "hermione": "^8.2.1",
         "hermione-global-hook": "^1.0.1",
         "hermione-test-repeater": "^0.0.8",
         "html-react-parser": "^0.4.0",
@@ -3960,16 +3960,6 @@
       "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
       "dev": true
     },
-    "node_modules/@types/chalk": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@types/chalk/-/chalk-2.2.0.tgz",
-      "integrity": "sha512-1zzPV9FDe1I/WHhRkf9SNgqtRJWZqrBWgu7JGveuHmmyR9CnAPCie2N/x+iHrgnpYBIcCJWHBoMRv2TRWktsvw==",
-      "deprecated": "This is a stub types definition for chalk (https://github.com/chalk/chalk). chalk provides its own type definitions, so you don't need @types/chalk installed!",
-      "dev": true,
-      "dependencies": {
-        "chalk": "*"
-      }
-    },
     "node_modules/@types/cheerio": {
       "version": "0.22.31",
       "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
@@ -16821,13 +16811,12 @@
       }
     },
     "node_modules/hermione": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/hermione/-/hermione-8.0.5.tgz",
-      "integrity": "sha512-AJsztjghMRL22rjR52ydhXs6Nhd8+hRBflurqJS29wBuC+pN9cnyOgjJaEMm6YPHDTS+Hx0MJFJXt9tGwRp3xQ==",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/hermione/-/hermione-8.2.1.tgz",
+      "integrity": "sha512-gE884oPBAdlTmpN1ZsD22c6+s0HfWidf15iggw/WdupE4R3NNA+s8Z/2UA24aPWVlap0yXSjYB6vq0Ri6P5CQw==",
       "dev": true,
       "dependencies": {
         "@gemini-testing/commander": "2.15.3",
-        "@types/chalk": "2.2.0",
         "@types/mocha": "10.0.1",
         "@wdio/globals": "8.21.0",
         "@wdio/types": "8.21.0",
@@ -33775,15 +33764,6 @@
       "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
       "dev": true
     },
-    "@types/chalk": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@types/chalk/-/chalk-2.2.0.tgz",
-      "integrity": "sha512-1zzPV9FDe1I/WHhRkf9SNgqtRJWZqrBWgu7JGveuHmmyR9CnAPCie2N/x+iHrgnpYBIcCJWHBoMRv2TRWktsvw==",
-      "dev": true,
-      "requires": {
-        "chalk": "*"
-      }
-    },
     "@types/cheerio": {
       "version": "0.22.31",
       "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
@@ -43754,13 +43734,12 @@
       "dev": true
     },
     "hermione": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/hermione/-/hermione-8.0.5.tgz",
-      "integrity": "sha512-AJsztjghMRL22rjR52ydhXs6Nhd8+hRBflurqJS29wBuC+pN9cnyOgjJaEMm6YPHDTS+Hx0MJFJXt9tGwRp3xQ==",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/hermione/-/hermione-8.2.1.tgz",
+      "integrity": "sha512-gE884oPBAdlTmpN1ZsD22c6+s0HfWidf15iggw/WdupE4R3NNA+s8Z/2UA24aPWVlap0yXSjYB6vq0Ri6P5CQw==",
       "dev": true,
       "requires": {
         "@gemini-testing/commander": "2.15.3",
-        "@types/chalk": "2.2.0",
         "@types/mocha": "10.0.1",
         "@wdio/globals": "8.21.0",
         "@wdio/types": "8.21.0",
diff --git a/package.json b/package.json
index 476bd19fd..b1c1849b4 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,7 @@
     "eslint-plugin-react": "^7.32.2",
     "events": "^3.3.0",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
-    "hermione": "^8.0.5",
+    "hermione": "^8.2.1",
     "hermione-global-hook": "^1.0.1",
     "hermione-test-repeater": "^0.0.8",
     "html-react-parser": "^0.4.0",
diff --git a/test/unit/lib/test-adapter/hermione.ts b/test/unit/lib/test-adapter/hermione.ts
index be8bc8a4a..7b450cd00 100644
--- a/test/unit/lib/test-adapter/hermione.ts
+++ b/test/unit/lib/test-adapter/hermione.ts
@@ -237,7 +237,9 @@ describe('HermioneTestAdapter', () => {
                     name: 'ImageDiffError',
                     refImg: {path: 'ref-path', size: {width: 25, height: 15}},
                     stack: 'some-stack',
-                    stateName: 'some-state'
+                    stateName: 'some-state',
+                    differentPixels: 100,
+                    diffRatio: 0.01
                 }]
             });
 
@@ -251,7 +253,9 @@ describe('HermioneTestAdapter', () => {
                     expectedImg: {path: 'ref-path', size: {height: 15, width: 25}},
                     refImg: {path: 'ref-path', size: {height: 15, width: 25}},
                     diffClusters: [],
-                    diffOptions: {diffColor: '#000'} as any
+                    diffOptions: {diffColor: '#000'} as any,
+                    differentPixels: 100,
+                    diffRatio: 0.01
                 }
             ]);
         });