diff --git a/client/src/__locales/vi.js b/client/src/__locales/vi.js
index 4831f78c..28bb429c 100644
--- a/client/src/__locales/vi.js
+++ b/client/src/__locales/vi.js
@@ -116,5 +116,8 @@ export default {
         Source: 'Nguồn',
         'Found in the known domains database.': 'Tìm thấy trong cơ sở dữ liệu tên miền',
         Category: 'Thể loại',
+        // Popover filter
+        Rule: 'Quy tắc',
+        Filter: 'Bộ lọc',
     },
 };
diff --git a/client/src/components/ui/PopoverFilter.js b/client/src/components/ui/PopoverFilter.js
index 9eb041dc..965ba320 100644
--- a/client/src/components/ui/PopoverFilter.js
+++ b/client/src/components/ui/PopoverFilter.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans , withNamespaces } from 'react-i18next';
 
 import './Popover.css';
 
@@ -13,10 +14,10 @@ class PopoverFilter extends Component {
                 <div className="popover__body popover__body--filter">
                     <div className="popover__list">
                         <div className="popover__list-item popover__list-item--nowrap">
-                            Rule: <strong>{this.props.rule}</strong>
+                            <Trans>Rule</Trans>: <strong>{this.props.rule}</strong>
                         </div>
                         {this.props.filter && <div className="popover__list-item popover__list-item--nowrap">
-                            Filter: <strong>{this.props.filter}</strong>
+                            <Trans>Filter</Trans>: <strong>{this.props.filter}</strong>
                         </div>}
                     </div>
                 </div>
@@ -30,4 +31,4 @@ PopoverFilter.propTypes = {
     filter: PropTypes.string,
 };
 
-export default PopoverFilter;
+export default withNamespaces()(PopoverFilter);