diff --git a/components/common/Table.js b/components/common/Table.js
index c169250d..d2c87977 100644
--- a/components/common/Table.js
+++ b/components/common/Table.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './Table.module.css';
+import { FormattedMessage } from 'react-intl';
 
 export default function Table({ columns, rows, empty }) {
   if (empty && rows.length === 0) {
@@ -21,6 +22,11 @@ export default function Table({ columns, rows, empty }) {
         ))}
       </div>
       <div className={styles.body}>
+        {rows.length === 0 && (
+          <div className={styles.empty}>
+            <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+          </div>
+        )}
         {rows.map((row, rowIndex) => (
           <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (
diff --git a/components/common/Table.module.css b/components/common/Table.module.css
index 6a069c2e..ada9e195 100644
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@@ -19,8 +19,7 @@
   flex-direction: column;
 }
 
-.body:empty:before {
-  content: 'No data available';
+.empty {
   color: var(--gray500);
   position: absolute;
   top: 50%;
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 67188e9f..81374f86 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -87,6 +87,14 @@ export default function MetricsTable({
             </div>
           </div>
           <div className={styles.body}>
+            {data?.length === 0 && (
+              <div className={styles.empty}>
+                <FormattedMessage
+                  id="message.no-data-available"
+                  defaultMessage="No data available."
+                />
+              </div>
+            )}
             {limit
               ? rankings.map(row => getRow(row))
               : data?.length > 0 && (
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index 7e79c078..697c820a 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -95,8 +95,7 @@
   overflow: hidden;
 }
 
-.body:empty:before {
-  content: 'No data available';
+.empty {
   color: var(--gray500);
   position: absolute;
   top: 50%;
diff --git a/lang/en.json b/lang/en.json
index fd3a42fa..3084be8a 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "Settings"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "Administrator"
   },
   "label.confirm-password": {
@@ -125,6 +125,9 @@
   "message.incorrect-username-password": {
     "defaultMessage": "Incorrect username/password."
   },
+  "message.no-data-available": {
+    "defaultMessage": "No data available."
+  },
   "message.save-success": {
     "defaultMessage": "Saved successfully."
   },
diff --git a/lang/nl-NL.json b/lang/nl-NL.json
index 3348e7ea..e1b0e948 100644
--- a/lang/nl-NL.json
+++ b/lang/nl-NL.json
@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "Instellingen"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "Administrator"
   },
   "label.confirm-password": {
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 97726fe3..c5c4a271 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "设置"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "管理员"
   },
   "label.confirm-password": {