diff --git a/web/app/components/blocked-users/__user-id/blocked-users__user-id.scss b/web/app/components/blocked-users/__user-id/blocked-users__user-id.scss
new file mode 100644
index 00000000..1ec52c28
--- /dev/null
+++ b/web/app/components/blocked-users/__user-id/blocked-users__user-id.scss
@@ -0,0 +1,3 @@
+.blocked-users__user-id {
+  color: #888;
+}
diff --git a/web/app/components/blocked-users/blocked-users.jsx b/web/app/components/blocked-users/blocked-users.jsx
index f11b9b81..dcc55828 100644
--- a/web/app/components/blocked-users/blocked-users.jsx
+++ b/web/app/components/blocked-users/blocked-users.jsx
@@ -57,7 +57,9 @@ export default class BlockedUsers extends Component {
 
                   return (
                     <li className={b('blocked-users__list-item', {}, { view: isUserUnblocked ? 'invisible' : null })}>
-                      <span className="blocked-users__username">{user.id}</span>
+                      <span className="blocked-users__username">{user.name}</span>
+                      {' '}
+                      <span className="blocked-users__user-id">({user.id})</span>
 
                       {
                         isUserUnblocked && (
diff --git a/web/app/components/blocked-users/index.js b/web/app/components/blocked-users/index.js
index 41235f7b..73878021 100644
--- a/web/app/components/blocked-users/index.js
+++ b/web/app/components/blocked-users/index.js
@@ -8,4 +8,5 @@ require('./__list/blocked-users__list.scss');
 require('./__list-item/blocked-users__list-item.scss');
 require('./__list-item/_view/_invisible/blocked-users__list-item_view_invisible.scss');
 
+require('./__user-id/blocked-users__user-id.scss');
 require('./__username/blocked-users__username.scss');