diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx
index fcaa4046..5da3bf78 100644
--- a/src/components/input/LanguageButton.tsx
+++ b/src/components/input/LanguageButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
+import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
 import { useLocale } from 'components/hooks';
@@ -33,7 +33,7 @@ export function LanguageButton() {
                     className={classNames(styles.item, { [styles.selected]: value === locale })}
                     onClick={(e: any) => handleSelect(value, close, e)}
                   >
-                    <Text>{label}</Text>
+                    <span lang={value}>{label}</span>
                     {value === locale && (
                       <Icon className={styles.icon}>
                         <Icons.Check />
diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
index 592ade8a..c1fc2831 100644
--- a/src/components/metrics/CountriesTable.tsx
+++ b/src/components/metrics/CountriesTable.tsx
@@ -12,12 +12,7 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
 
   const renderLink = ({ x: code }) => {
     return (
-      <FilterLink
-        id="country"
-        className={locale}
-        value={countryNames[code] && code}
-        label={formatCountry(code)}
-      >
+      <FilterLink id="country" value={countryNames[code] && code} label={formatCountry(code)}>
         <TypeIcon type="country" value={code?.toLowerCase()} />
       </FilterLink>
     );
diff --git a/src/components/metrics/LanguagesTable.tsx b/src/components/metrics/LanguagesTable.tsx
index 67b6e622..f4b0b503 100644
--- a/src/components/metrics/LanguagesTable.tsx
+++ b/src/components/metrics/LanguagesTable.tsx
@@ -13,7 +13,7 @@ export function LanguagesTable({
   const languageNames = useLanguageNames(locale);
 
   const renderLabel = ({ x }) => {
-    return <div className={locale}>{languageNames[x?.split('-')[0]] ?? x}</div>;
+    return languageNames[x?.split('-')[0]] ?? x;
   };
 
   return (
diff --git a/src/components/metrics/Legend.tsx b/src/components/metrics/Legend.tsx
index c7ef1022..4ebcf4b4 100644
--- a/src/components/metrics/Legend.tsx
+++ b/src/components/metrics/Legend.tsx
@@ -3,7 +3,6 @@ import { safeDecodeURIComponent } from 'next-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
 import { LegendItem } from 'chart.js/auto';
-import { useLocale } from 'components/hooks';
 import styles from './Legend.module.css';
 
 export function Legend({
@@ -13,8 +12,6 @@ export function Legend({
   items: any[];
   onClick: (index: LegendItem) => void;
 }) {
-  const { locale } = useLocale();
-
   if (!items.find(({ text }) => text)) {
     return null;
   }
@@ -32,7 +29,7 @@ export function Legend({
             onClick={() => onClick(item)}
           >
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <span className={locale}>{safeDecodeURIComponent(text)}</span>
+              {safeDecodeURIComponent(text)}
             </StatusLight>
           </div>
         );
diff --git a/src/components/metrics/RegionsTable.tsx b/src/components/metrics/RegionsTable.tsx
index 215551af..b4071f50 100644
--- a/src/components/metrics/RegionsTable.tsx
+++ b/src/components/metrics/RegionsTable.tsx
@@ -11,7 +11,7 @@ export function RegionsTable(props: MetricsTableProps) {
 
   const renderLink = ({ x: code, country }) => {
     return (
-      <FilterLink id="region" className={locale} value={code} label={getRegionName(code, country)}>
+      <FilterLink id="region" value={code} label={getRegionName(code, country)}>
         <TypeIcon type="country" value={country?.toLowerCase()} />
       </FilterLink>
     );