diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index d315df6137..558b787103 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -32,11 +32,12 @@ function WarmUp (): React.ReactElement {
   const { api, isApiReady } = useApi();
   const fees = useCall<any>(isApiReady ? api.derive.balances.fees : undefined, []);
   const indexes = useCall<any>(isApiReady ? api.derive.accounts.indexes : undefined, []);
+  const registrars = useCall<any>(isApiReady ? api.query.identity?.registrars : undefined, []);
   const staking = useCall<any>(isApiReady ? api.derive.staking.overview : undefined, []);
   const [hasValues, setHasValues] = useState(false);
 
   useEffect((): void => {
-    setHasValues(!!fees || !!indexes || !!staking);
+    setHasValues(!!fees || !!indexes || !!registrars || !!staking);
   }, []);
 
   return (
diff --git a/packages/react-query/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
similarity index 58%
rename from packages/react-query/src/AccountName.tsx
rename to packages/react-components/src/AccountName.tsx
index 161faa7c4c..b7d3586149 100644
--- a/packages/react-query/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -4,15 +4,23 @@
 
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import { BareProps } from '@polkadot/react-api/types';
-import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
+import { AccountId, AccountIndex, Address, RegistrarInfo } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { Badge, Icon } from '@polkadot/react-components';
-import { getAddressName } from '@polkadot/react-components/util';
-import { useCall, useApi } from '@polkadot/react-hooks';
+import { useCall, useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
 
 import { useTranslation } from './translate';
+import { getAddressName } from './util';
+import Badge from './Badge';
+import Button from './Button';
+import Dropdown from './Dropdown';
+import Icon from './Icon';
+import Input from './Input';
+import InputAddress from './InputAddress';
+import Modal from './Modal';
+import TxButton from './TxButton';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -50,7 +58,15 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
 function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const [isJudgementOpen, toggleJudgement] = useToggle();
+  const registrars = useCall<Option<RegistrarInfo>[]>(api.query.identity?.registrars, []);
   const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [isRegistrar, setIsRegistrar] = useState(false);
+  const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
+  const [judgementEnum, setJudgementEnum] = useState(0);
+  const [registrarIndex, setRegistrarIndex] = useState(-1);
   const address = useMemo((): string => (value || '').toString(), [value]);
 
   const _extractName = (accountId?: AccountId, accountIndex?: AccountIndex): React.ReactNode => {
@@ -65,9 +81,43 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
 
   const [name, setName] = useState<React.ReactNode>((): React.ReactNode => _extractName());
 
+  useEffect((): void => {
+    if (allAccounts && registrars) {
+      setIsRegistrar(
+        registrars
+          .map((registrar): string| null =>
+            registrar.isSome
+              ? registrar.unwrap().account.toString()
+              : null
+          )
+          .some((regId): boolean => !!regId && allAccounts.includes(regId))
+      );
+    }
+  }, [allAccounts, registrars]);
+
+  useEffect((): void => {
+    if (registrars && judgementAccountId) {
+      setRegistrarIndex(
+        registrars
+          .map((registrar): string| null =>
+            registrar.isSome
+              ? registrar.unwrap().account.toString()
+              : null
+          )
+          .indexOf(judgementAccountId)
+      );
+    } else {
+      setRegistrarIndex(-1);
+    }
+  }, [judgementAccountId, registrars]);
+
   useEffect((): void => {
     const { accountId, accountIndex, identity, nickname } = info || {};
 
+    if (accountId) {
+      setAccountId(accountId.toString());
+    }
+
     if (api.query.identity?.identityOf) {
       if (identity?.display) {
         const isGood = identity.judgements.some(([, judgement]): boolean => judgement.isKnownGood || judgement.isReasonable);
@@ -120,6 +170,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
               isInline
               isSmall
               isTooltip
+              onClick={isRegistrar ? toggleJudgement : undefined}
               type={
                 isGood
                   ? 'green'
@@ -148,17 +199,71 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
   }, [info, toggle]);
 
   return (
-    <div
-      className={className}
-      onClick={
-        override
-          ? undefined
-          : onClick
-      }
-      style={style}
-    >
-      {label || ''}{override || name}{children}
-    </div>
+    <>
+      {isJudgementOpen && (
+        <Modal
+          header={t('Provide judgement')}
+          open
+          size='small'
+        >
+          <Modal.Content>
+            <InputAddress
+              label={t('registrar account')}
+              onChange={setJudgementAccountId}
+            />
+            <Input
+              isDisabled
+              label={t('registrar index')}
+              value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
+            />
+            <Dropdown
+              label={t('judgement')}
+              onChange={setJudgementEnum}
+              options={[
+                { value: 0, text: 'Unknown' },
+                { value: 1, text: 'Fee paid' },
+                { value: 2, text: 'Reasonable' },
+                { value: 3, text: 'Known good' },
+                { value: 4, text: 'Out of date' },
+                { value: 5, text: 'Low quality' }
+              ]}
+              value={judgementEnum}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button.Group>
+              <Button
+                icon='cancel'
+                isNegative
+                label={t('Cancel')}
+                onClick={toggleJudgement}
+              />
+              <Button.Or />
+              <TxButton
+                accountId={judgementAccountId}
+                icon='check'
+                isDisabled={registrarIndex === -1}
+                label={t('Judge')}
+                onClick={toggleJudgement}
+                params={[registrarIndex, accountId, judgementEnum]}
+                tx='identity.provideJudgement'
+              />
+            </Button.Group>
+          </Modal.Actions>
+        </Modal>
+      )}
+      <div
+        className={className}
+        onClick={
+          override
+            ? undefined
+            : onClick
+        }
+        style={style}
+      >
+        {label || ''}{override || name}{children}
+      </div>
+    </>
   );
 }
 
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index 4f2c937a4e..8b78a7b95c 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -8,10 +8,10 @@ import { BareProps } from './types';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { AccountName } from '@polkadot/react-query';
 import { KeyringItemType } from '@polkadot/ui-keyring/types';
 
 import { classes, toShortAddress } from './util';
+import AccountName from './AccountName';
 import BalanceDisplay from './Balance';
 import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx
index 2dc6480f5b..91af0f51c5 100644
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@@ -6,8 +6,9 @@ import { Address, AccountId } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import styled from 'styled-components';
-import { AccountIndex, AccountName } from '@polkadot/react-query';
+import { AccountIndex } from '@polkadot/react-query';
 
+import AccountName from './AccountName';
 import IdentityIcon from './IdentityIcon';
 
 interface Props {
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index 0b93a93101..d33785f97e 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -14,20 +14,22 @@ interface Props {
   isInline?: boolean;
   isSmall?: boolean;
   isTooltip?: boolean;
+  onClick?: () => void;
   type: 'counter' | 'online' | 'offline' | 'next' | 'runnerup' | 'selected' | 'green' | 'blue' | 'brown' | 'gray';
 }
 
 let badgeId = 0;
 
-function Badge ({ className, hover, info, isInline, isSmall, isTooltip, type }: Props): React.ReactElement<Props> | null {
+function Badge ({ className, hover, info, isInline, isSmall, isTooltip, onClick, type }: Props): React.ReactElement<Props> | null {
   const [key] = useState(`${Date.now()}-${badgeId++}`);
 
   return (
     <div
-      className={`ui--Badge ${isInline && 'isInline'} ${isTooltip && 'isTooltip'} ${isSmall && 'isSmall'} ${type} ${className}`}
+      className={`ui--Badge ${isInline && 'isInline'} ${isTooltip && 'isTooltip'} ${isSmall && 'isSmall'} ${onClick && 'isClickable'} ${type} ${className}`}
       data-for={`badge-status-${key}`}
       data-tip={true}
       data-tip-disable={!isTooltip}
+      onClick={onClick}
     >
       <div className='badge'>
         {info}
@@ -57,10 +59,15 @@ export default styled(Badge)`
   width: 22px;
 
   i.icon {
+    cursor: inherit !important;
     margin: 0;
     width: 1em;
   }
 
+  &.isClickable {
+    cursor: pointer;
+  }
+
   &.isSmall {
     box-shadow: none;
     font-size: 10px;
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 4a9fda5392..63e5f6c164 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -4,8 +4,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { AccountName } from '@polkadot/react-query';
 
+import AccountName from '../AccountName';
 import IdentityIcon from '../IdentityIcon';
 
 interface Props {
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index 83c2a3c2cb..04ced38f4b 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -59,7 +59,6 @@ function Tooltip ({ className, effect = 'solid', offset, place = 'bottom', text,
 export default styled(Tooltip)`
   table {
     border: 0;
-    margin-top: 0.75rem;
 
     td {
       text-align: left;
@@ -72,4 +71,9 @@ export default styled(Tooltip)`
       white-space: nowrap;
     }
   }
+
+  div+table,
+  table+div {
+    margin-top: 0.75rem;
+  }
 `;
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 051fc31319..99c6828636 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+export { default as AccountName } from './AccountName';
 export { default as ActionItem } from './ActionItem';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';
diff --git a/packages/react-query/src/index.ts b/packages/react-query/src/index.ts
index d2bd233635..cd8e484c58 100644
--- a/packages/react-query/src/index.ts
+++ b/packages/react-query/src/index.ts
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 export { default as AccountIndex } from './AccountIndex';
-export { default as AccountName } from './AccountName';
 export { default as Available } from './Available';
 export { default as Balance } from './Balance';
 export { default as BalanceFree } from './BalanceFree';