diff --git a/i18next-scanner.config.js b/i18next-scanner.config.js
index 767e240d47..70ae37c3d2 100644
--- a/i18next-scanner.config.js
+++ b/i18next-scanner.config.js
@@ -23,7 +23,8 @@ function transform (file, enc, done) {
 
     const parserHandler = (key, options) => {
       options.defaultValue = key;
-      options.ns = /packages\/(.*?)\/src/g.exec(file.path)[1];
+      options.ns = /packages\/(.*?)\/src/g.exec(file.path)[1].replace('page-', 'app-');
+
       this.parser.set(key, options);
     };
 
@@ -53,7 +54,7 @@ module.exports = {
     },
     lngs: ['en'],
     defaultLng: 'en',
-    ns: findPackages().map(({ dir }) => dir),
+    ns: findPackages().map(({ dir }) => dir.replace('page-', 'app-')),
     defaultNs: 'ui',
     resource: {
       loadPath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json',
diff --git a/packages/apps/public/locales/en/all-config.json b/packages/apps/public/locales/en/all-config.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/packages/apps/public/locales/en/all-config.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/packages/apps/public/locales/en/app-parachains.json b/packages/apps/public/locales/en/app-parachains.json
index 0205b02d8b..050e149c14 100644
--- a/packages/apps/public/locales/en/app-parachains.json
+++ b/packages/apps/public/locales/en/app-parachains.json
@@ -7,5 +7,36 @@
   "relay queue": "relay queue",
   "no deployed parachains": "no deployed parachains",
   "parachains": "parachains",
-  "next id": "next id"
+  "next id": "next id",
+  "There are no registered parachains": "There are no registered parachains",
+  "{{relayDispatchQueueSize}} dispatch messages pending": "{{relayDispatchQueueSize}} dispatch messages pending",
+  "will swap to id": "will swap to id",
+  "scheduling": "scheduling",
+  "watermark": "watermark",
+  "Register a parachain": "Register a parachain",
+  "parachain id": "parachain id",
+  "The id number to assign to this parachain.": "The id number to assign to this parachain.",
+  "Positive number greater than or equal to {{nextFreeId}}": "Positive number greater than or equal to {{nextFreeId}}",
+  "The scheduling preference for this parachain.": "The scheduling preference for this parachain.",
+  "The compiled runtime WASM for the parachain you wish to register.": "The compiled runtime WASM for the parachain you wish to register.",
+  "code": "code",
+  "The code is not recognized as being in valid WASM format": "The code is not recognized as being in valid WASM format",
+  "The initial head state for the parachain.": "The initial head state for the parachain.",
+  "initial head state": "initial head state",
+  "The initial head state is invalid.": "The initial head state is invalid.",
+  "best block": "best block",
+  "Deregister this parachain": "Deregister this parachain",
+  "The id of the parachain to be deregistered.": "The id of the parachain to be deregistered.",
+  "The scheduling setting for this parachain.": "The scheduling setting for this parachain.",
+  "Unknown": "Unknown",
+  "Most recent head data": "Most recent head data",
+  "The compiled runtime WASM for this parachain.": "The compiled runtime WASM for this parachain.",
+  "Download": "Download",
+  "relay dispatch queue": "relay dispatch queue",
+  "no messages": "no messages",
+  "Message origin.": "Message origin.",
+  "origin": "origin",
+  "Message data": "Message data",
+  "data": "data",
+  "pending swap id": "pending swap id"
 }
diff --git a/packages/apps/public/locales/en/page-123code.json b/packages/apps/public/locales/en/page-123code.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/packages/apps/public/locales/en/page-123code.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/packages/apps/public/locales/en/page-accounts.json b/packages/apps/public/locales/en/page-accounts.json
deleted file mode 100644
index 845b6d8938..0000000000
--- a/packages/apps/public/locales/en/page-accounts.json
+++ /dev/null
@@ -1,127 +0,0 @@
-{
-  "account forgotten": "account forgotten",
-  "This account is recoverable, with the following friends:": "This account is recoverable, with the following friends:",
-  "threshold": "threshold",
-  "delay": "delay",
-  "deposit": "deposit",
-  "no tags": "no tags",
-  "send": "send",
-  "Send funds from this account": "Send funds from this account",
-  "Set on-chain identity": "Set on-chain identity",
-  "Derive account via derivation path": "Derive account via derivation path",
-  "Create a backup file for this account": "Create a backup file for this account",
-  "Change this account's password": "Change this account's password",
-  "Forget this account": "Forget this account",
-  "Make recoverable": "Make recoverable",
-  "Initiate recovery for another": "Initiate recovery for another",
-  "It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -": "It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -",
-  "Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.": "Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.",
-  "Learn more...": "Learn more...",
-  "My accounts": "My accounts",
-  "Vanity address": "Vanity address",
-  "Backup account": "Backup account",
-  "Download": "Download",
-  "An encrypted backup file will be created once you have pressed the \"Download\" button. This can be used to re-import your account on any other machine.": "An encrypted backup file will be created once you have pressed the \"Download\" button. This can be used to re-import your account on any other machine.",
-  "Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.": "Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.",
-  "The account password as specified when creating the account. This is used to encrypt the backup file and subsequently decrypt it when restoring the account.": "The account password as specified when creating the account. This is used to encrypt the backup file and subsequently decrypt it when restoring the account.",
-  "password": "password",
-  "password changed": "password changed",
-  "Change account password": "Change account password",
-  "Change": "Change",
-  "This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.": "This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.",
-  "The existing account password as specified when this account was created or when it was last changed.": "The existing account password as specified when this account was created or when it was last changed.",
-  "your current password": "your current password",
-  "The new account password. Once set, all future account unlocks will be performed with this new password.": "The new account password. Once set, all future account unlocks will be performed with this new password.",
-  "your new password": "your new password",
-  "Development": "Development",
-  "Mnemonic": "Mnemonic",
-  "Raw seed": "Raw seed",
-  "created account": "created account",
-  "Add an account via seed": "Add an account via seed",
-  "Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g \"name_you_want - stash\".": "Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g \"name_you_want - stash\".",
-  "name": "name",
-  "new account": "new account",
-  "The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the \"--key\" parameter of your node.": "The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the \"--key\" parameter of your node.",
-  "mnemonic seed": "mnemonic seed",
-  "development seed": "development seed",
-  "seed (hex or string)": "seed (hex or string)",
-  "This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).": "This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).",
-  "Advanced creation options": "Advanced creation options",
-  "Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use \"ed25519\".": "Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use \"ed25519\".",
-  "keypair crypto type": "keypair crypto type",
-  "You can set a custom derivation path for this account using the following syntax \"/<soft-key>//<hard-key>///<password>\". The \"/<soft-key>\" and \"//<hard-key>\" may be repeated and mixed`. The \"///password\" is optional and should only occur once.": "You can set a custom derivation path for this account using the following syntax \"/<soft-key>//<hard-key>///<password>\". The \"/<soft-key>\" and \"//<hard-key>\" may be repeated and mixed`. The \"///password\" is optional and should only occur once.",
-  "secret derivation path": "secret derivation path",
-  "//hard/soft///password": "//hard/soft///password",
-  "Save": "Save",
-  "Important notice": "Important notice",
-  "We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on \"Backup\" button from the Accounts section.": "We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on \"Backup\" button from the Accounts section.",
-  "Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.": "Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.",
-  "Create and backup account": "Create and backup account",
-  "The selected account to perform the derivation on.": "The selected account to perform the derivation on.",
-  "derive root account": "derive root account",
-  "Derive account from pair": "Derive account from pair",
-  "The password to unlock the selected account.": "The password to unlock the selected account.",
-  "derivation path": "derivation path",
-  "//hard/soft": "//hard/soft",
-  "Unlock": "Unlock",
-  "include value": "include value",
-  "exclude value": "exclude value",
-  "Register identity": "Register identity",
-  "The name that will be displayed in your accounts list.": "The name that will be displayed in your accounts list.",
-  "display name": "display name",
-  "The legal name for this identity.": "The legal name for this identity.",
-  "legal name": "legal name",
-  "The email address associated with this identity.": "The email address associated with this identity.",
-  "email": "email",
-  "An URL that is linked to this identity.": "An URL that is linked to this identity.",
-  "web": "web",
-  "The twitter name for this identity.": "The twitter name for this identity.",
-  "twitter": "twitter",
-  "a riot name linked to this identity": "a riot name linked to this identity",
-  "riot name": "riot name",
-  "Set Identity": "Set Identity",
-  "account restored": "account restored",
-  "Add via backup file": "Add via backup file",
-  "Restore": "Restore",
-  "Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.": "Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.",
-  "backup file": "backup file",
-  "Type the password chosen at the account creation. It was used to encrypt your account's private key in the backup file.": "Type the password chosen at the account creation. It was used to encrypt your account's private key in the backup file.",
-  "Add account via Qr": "Add account via Qr",
-  "Name given to this account. You can change it at any point in the future.": "Name given to this account. You can change it at any point in the future.",
-  "Create": "Create",
-  "Initiate account recovery": "Initiate account recovery",
-  "the account to recover to": "the account to recover to",
-  "Select the account you wish to recover into this account.": "Select the account you wish to recover into this account.",
-  "recover this account": "recover this account",
-  "Start recovery": "Start recovery",
-  "Setup account as recoverable": "Setup account as recoverable",
-  "the account to make recoverable": "the account to make recoverable",
-  "The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.": "The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.",
-  "trusted social recovery helpers": "trusted social recovery helpers",
-  "The threshold of vouches that is to be reached for the account to be recovered.": "The threshold of vouches that is to be reached for the account to be recovered.",
-  "recovery threshold": "recovery threshold",
-  "The delay between vouching and the availability of the recovered account.": "The delay between vouching and the availability of the recovered account.",
-  "recovery block delay": "recovery block delay",
-  "transferrable": "transferrable",
-  "Send funds": "Send funds",
-  "The account you will send funds from.": "The account you will send funds from.",
-  "send from account": "send from account",
-  "Select a contact or paste the address you want to send funds to.": "Select a contact or paste the address you want to send funds to.",
-  "send to address": "send to address",
-  "Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.": "Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.",
-  "amount": "amount",
-  "Make Transfer": "Make Transfer",
-  "Add account": "Add account",
-  "Restore JSON": "Restore JSON",
-  "Add via Qr": "Add via Qr",
-  "Query Ledger": "Query Ledger",
-  "filter by name or tags": "filter by name or tags",
-  "no accounts yet, create or import an existing": "no accounts yet, create or import an existing",
-  "Stop generation": "Stop generation",
-  "Start generation": "Start generation",
-  "Type here what you would like your address to contain. This tool will generate the keys and show the associated addresses that best match your search. You can use \"?\" as a wildcard for a character.": "Type here what you would like your address to contain. This tool will generate the keys and show the associated addresses that best match your search. You can use \"?\" as a wildcard for a character.",
-  "Search for": "Search for",
-  "Should the search be case sensitive, e.g if you select \"no\" your search for \"Some\" may return addresses containing \"somE\" or \"sOme\"...": "Should the search be case sensitive, e.g if you select \"no\" your search for \"Some\" may return addresses containing \"somE\" or \"sOme\"...",
-  "case sensitive": "case sensitive",
-  "Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)": "Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)"
-}
diff --git a/packages/apps/public/locales/en/page-address-book.json b/packages/apps/public/locales/en/page-address-book.json
deleted file mode 100644
index b773bba2c6..0000000000
--- a/packages/apps/public/locales/en/page-address-book.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "address forgotten": "address forgotten",
-  "no tags": "no tags",
-  "deposit": "deposit",
-  "Send funds to this address": "Send funds to this address",
-  "Forget this address": "Forget this address",
-  "My contacts": "My contacts",
-  "address edited": "address edited",
-  "address created": "address created",
-  "Add an address": "Add an address",
-  "Paste here the address of the contact you want to add to your address book.": "Paste here the address of the contact you want to add to your address book.",
-  "address": "address",
-  "new address": "new address",
-  "Type the name of your contact. This name will be used across all the apps. It can be edited later on.": "Type the name of your contact. This name will be used across all the apps. It can be edited later on.",
-  "name": "name",
-  "Save": "Save",
-  "Add contact": "Add contact",
-  "filter by name or tags": "filter by name or tags",
-  "no addresses saved yet, add any existing address": "no addresses saved yet, add any existing address"
-}
diff --git a/packages/apps/public/locales/en/page-claims.json b/packages/apps/public/locales/en/page-claims.json
deleted file mode 100644
index f51bd03e23..0000000000
--- a/packages/apps/public/locales/en/page-claims.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "Your Ethereum account": "Your Ethereum account",
-  "has a valid claim for": "has a valid claim for",
-  "does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.": "does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.",
-  "Redeem": "Redeem",
-  "1. Select your {{chain}} account": "1. Select your {{chain}} account",
-  "The account you want to claim to.": "The account you want to claim to.",
-  "claim to account": "claim to account",
-  "Continue": "Continue",
-  "2. Sign ETH transaction": "2. Sign ETH transaction",
-  "copied": "copied",
-  "click to copy": "click to copy",
-  "Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below": "Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below",
-  "Confirm claim": "Confirm claim"
-}
diff --git a/packages/apps/public/locales/en/page-contracts.json b/packages/apps/public/locales/en/page-contracts.json
deleted file mode 100644
index 3ae7e3de22..0000000000
--- a/packages/apps/public/locales/en/page-contracts.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-  "You are using an ABI with an outdated format. Please generate a new one.": "You are using an ABI with an outdated format. Please generate a new one.",
-  "invalid ABI file selected": "invalid ABI file selected",
-  "click to select or drag and drop a JSON ABI file": "click to select or drag and drop a JSON ABI file",
-  "The code hash for the on-chain deployed code.": "The code hash for the on-chain deployed code.",
-  "code hash": "code hash",
-  "Save": "Save",
-  "Add an existing code hash": "Add an existing code hash",
-  "ABI": "ABI",
-  "Forget this code hash": "Forget this code hash",
-  "deploy": "deploy",
-  "Deploy this code hash as a smart contract": "Deploy this code hash as a smart contract",
-  "No code hashes available": "No code hashes available",
-  "Upload WASM": "Upload WASM",
-  "The compiled WASM for the contract that you wish to deploy. Each unique code blob will be attached with a code hash that can be used to create new instances.": "The compiled WASM for the contract that you wish to deploy. Each unique code blob will be attached with a code hash that can be used to create new instances.",
-  "compiled contract WASM": "compiled contract WASM",
-  "The code is not recognized as being in valid WASM format": "The code is not recognized as being in valid WASM format",
-  "Upload": "Upload",
-  "Unable to find on-chain WASM code for the supplied codeHash": "Unable to find on-chain WASM code for the supplied codeHash",
-  "The codeHash is not a valid hex hash": "The codeHash is not a valid hex hash",
-  "The address for the deployed contract instance.": "The address for the deployed contract instance.",
-  "contract address": "contract address",
-  "Add an existing contract": "Add an existing contract",
-  "Call a contract": "Call a contract",
-  "Specify the user account to use for this contract call. And fees will be deducted from this account.": "Specify the user account to use for this contract call. And fees will be deducted from this account.",
-  "call from account": "call from account",
-  "A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.": "A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.",
-  "contract to use": "contract to use",
-  "The message to send to this contract. Parameters are adjusted based on the ABI provided.": "The message to send to this contract. Parameters are adjusted based on the ABI provided.",
-  "message to send": "message to send",
-  "The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.": "The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.",
-  "value": "value",
-  "The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.": "The maximum amount of gas that can be used by this call. If the code requires more, the call will fail.",
-  "maximum gas allowed": "maximum gas allowed",
-  "send as RPC call": "send as RPC call",
-  "send as transaction": "send as transaction",
-  "Call": "Call",
-  "Call results": "Call results",
-  "Clear all": "Clear all",
-  "address forgotten": "address forgotten",
-  "Forget this contract": "Forget this contract",
-  "execute": "execute",
-  "Call a method on this contract": "Call a method on this contract",
-  "Messages": "Messages",
-  "No contracts available": "No contracts available",
-  "Deploy a code hash": "Deploy a code hash",
-  "Unable to find deployed contract code at the specified address": "Unable to find deployed contract code at the specified address",
-  "The value is not in a valid address format": "The value is not in a valid address format",
-  "The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.": "The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.",
-  "code for this contract": "code for this contract",
-  "The deployment constructor information for this contract, as provided by the ABI.": "The deployment constructor information for this contract, as provided by the ABI.",
-  "The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.": "The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.",
-  "endowment": "endowment",
-  "Deploy": "Deploy",
-  "Specify the user account to use for this deployment. And fees will be deducted from this account.": "Specify the user account to use for this deployment. And fees will be deducted from this account.",
-  "deployment account": "deployment account",
-  "The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.": "The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.",
-  "Confirm ABI removal": "Confirm ABI removal",
-  "You are about to remove this code's ABI. Once completed, should you need to access it again, you will have to manually re-upload it.": "You are about to remove this code's ABI. Once completed, should you need to access it again, you will have to manually re-upload it.",
-  "This operation does not impact the associated on-chain code or any of its contracts.": "This operation does not impact the associated on-chain code or any of its contracts.",
-  "Remove": "Remove"
-}
diff --git a/packages/apps/public/locales/en/page-council.json b/packages/apps/public/locales/en/page-council.json
deleted file mode 100644
index 4b13737f2c..0000000000
--- a/packages/apps/public/locales/en/page-council.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "Council overview": "Council overview",
-  "Motions ({{count}})": "Motions ({{count}})",
-  "No council motions": "No council motions",
-  "threshold": "threshold",
-  "Aye": "Aye",
-  "Nay": "Nay",
-  "Propose a council motion": "Propose a council motion",
-  "Propose motion": "Propose motion",
-  "The minimum number of council votes required to approve this motion": "The minimum number of council votes required to approve this motion",
-  "Positive number between 1 and {{memberCount}}": "Positive number between 1 and {{memberCount}}",
-  "proposal": "proposal",
-  "era {{era}}, {{count}} slashes": "era {{era}}, {{count}} slashes",
-  "Cancel slashes": "Cancel slashes",
-  "Revert pending slashes": "Revert pending slashes",
-  "Select the account you wish to make the proposal with.": "Select the account you wish to make the proposal with.",
-  "propose from account": "propose from account",
-  "The unapplied slashed era to cancel.": "The unapplied slashed era to cancel.",
-  "the era to cancel for": "the era to cancel for",
-  "no unapplied slashes found": "no unapplied slashes found",
-  "Revert": "Revert",
-  "Vote on proposal": "Vote on proposal",
-  "Vote": "Vote",
-  "backing": "backing",
-  "runners up": "runners up",
-  "No runners up found": "No runners up found",
-  "candidates": "candidates",
-  "No candidates found": "No candidates found",
-  "No members found": "No members found",
-  "Submit your council candidacy": "Submit your council candidacy",
-  "Candidate account": "Candidate account",
-  "This account will be nominated to fill the council slot you specify.": "This account will be nominated to fill the council slot you specify.",
-  "Submit candidacy": "Submit candidacy",
-  "seats": "seats",
-  "voting round": "voting round",
-  "term progress": "term progress",
-  "Vote for current candidates": "Vote for current candidates",
-  "Voting account": "Voting account",
-  "This account will be use to approve or disapprove each candidate.": "This account will be use to approve or disapprove each candidate.",
-  "Filter available candidates based on name, address or short account index.": "Filter available candidates based on name, address or short account index.",
-  "filter candidates": "filter candidates",
-  "Voters ({{count}})": "Voters ({{count}})",
-  "The amount that is associated with this vote. This value is is locked for the duration of the vote.": "The amount that is associated with this vote. This value is is locked for the duration of the vote.",
-  "vote value": "vote value",
-  "voting balance": "voting balance"
-}
diff --git a/packages/apps/public/locales/en/page-dashboard.json b/packages/apps/public/locales/en/page-dashboard.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/packages/apps/public/locales/en/page-dashboard.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/packages/apps/public/locales/en/page-democracy.json b/packages/apps/public/locales/en/page-democracy.json
deleted file mode 100644
index 71764aa5ff..0000000000
--- a/packages/apps/public/locales/en/page-democracy.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "Democracy overview": "Democracy overview",
-  "enact at": "enact at",
-  "dispatch queue": "dispatch queue",
-  "nothing queued to be executed": "nothing queued to be executed",
-  "externals": "externals",
-  "locked": "locked",
-  "Submit preimage": "Submit preimage",
-  "Submit proposal": "Submit proposal",
-  "The account you want to register the preimage from": "The account you want to register the preimage from",
-  "send from account": "send from account",
-  "transferrable": "transferrable",
-  "propose": "propose",
-  "The hash of the selected proposal, use it for submitting the proposal": "The hash of the selected proposal, use it for submitting the proposal",
-  "preimage hash": "preimage hash",
-  "imminent preimage (proposal already passed)": "imminent preimage (proposal already passed)",
-  "Preimage": "Preimage",
-  "Seconds ({{count}})": "Seconds ({{count}})",
-  "Details": "Details",
-  "proposal hash": "proposal hash",
-  "proposals": "proposals",
-  "No active proposals": "No active proposals",
-  "The account you want to register the proposal from": "The account you want to register the proposal from",
-  "The preimage hash of the proposal": "The preimage hash of the proposal",
-  "The locked value for this proposal": "The locked value for this proposal",
-  "locked balance": "locked balance",
-  "remaining": "remaining",
-  "activate at": "activate at",
-  "Aye ({{count}})": "Aye ({{count}})",
-  "Nay ({{count}})": "Nay ({{count}})",
-  "referenda": "referenda",
-  "No active referendums": "No active referendums",
-  "Second proposal": "Second proposal",
-  "Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected": "Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected",
-  "second with account": "second with account",
-  "Second": "Second",
-  "total": "total",
-  "launch period": "launch period",
-  "0.1x voting balance, no lockup period": "0.1x voting balance, no lockup period",
-  "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)": "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)",
-  "Vote on proposal": "Vote on proposal",
-  "The conviction to use for this vote, with an appropriate lock period.": "The conviction to use for this vote, with an appropriate lock period.",
-  "conviction": "conviction",
-  "Vote": "Vote"
-}
diff --git a/packages/apps/public/locales/en/page-explorer.json b/packages/apps/public/locales/en/page-explorer.json
deleted file mode 100644
index 9a47138072..0000000000
--- a/packages/apps/public/locales/en/page-explorer.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "events": "events",
-  "index": "index",
-  "Details": "Details",
-  "mortal, valid from #{{startAt}} to #{{endsAt}}": "mortal, valid from #{{startAt}} to #{{endsAt}}",
-  "mortal": "mortal",
-  "immortal": "immortal",
-  "No pending extrinsics are in the queue": "No pending extrinsics are in the queue",
-  "extrinsics": "extrinsics",
-  "Unable to render extrinsic": "Unable to render extrinsic",
-  "logs": "logs",
-  "no events available": "no events available",
-  "blocks": "blocks",
-  "forks": "forks",
-  "Chain info": "Chain info",
-  "Block details": "Block details",
-  "Forks": "Forks",
-  "Node info": "Node info",
-  "recent blocks": "recent blocks",
-  "recent events": "recent events",
-  "pending extrinsics": "pending extrinsics",
-  "connected peers": "connected peers",
-  "role": "role",
-  "peer id": "peer id",
-  "best #": "best #",
-  "best hash": "best hash",
-  "no peers connected": "no peers connected",
-  "refresh in": "refresh in",
-  "total peers": "total peers",
-  "syncing": "syncing",
-  "yes": "yes",
-  "no": "no",
-  "queued tx": "queued tx",
-  "peer best": "peer best",
-  "our best": "our best",
-  "block hash or number to query": "block hash or number to query",
-  "last block": "last block",
-  "target": "target",
-  "total issuance": "total issuance",
-  "finalized": "finalized",
-  "best": "best",
-  "era": "era",
-  "epoch": "epoch",
-  "session": "session"
-}
diff --git a/packages/apps/public/locales/en/page-extrinsics.json b/packages/apps/public/locales/en/page-extrinsics.json
deleted file mode 100644
index 73dd1257da..0000000000
--- a/packages/apps/public/locales/en/page-extrinsics.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "Extrinsic submission": "Extrinsic submission",
-  "using the selected account": "using the selected account",
-  "free balance": "free balance",
-  "submit the following extrinsic": "submit the following extrinsic",
-  "Submit Unsigned": "Submit Unsigned",
-  "Submit Transaction": "Submit Transaction"
-}
diff --git a/packages/apps/public/locales/en/page-generic-asset.json b/packages/apps/public/locales/en/page-generic-asset.json
deleted file mode 100644
index 43aa0d74b3..0000000000
--- a/packages/apps/public/locales/en/page-generic-asset.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "Forget this asset": "Forget this asset",
-  "Asset ID": "Asset ID",
-  "Register Asset": "Register Asset",
-  "No assets found.": "No assets found.",
-  "Assets": "Assets",
-  "Transfer": "Transfer",
-  "Register an Asset": "Register an Asset",
-  "Enter the Asset ID of the token you want to manage.": "Enter the Asset ID of the token you want to manage.",
-  "asset id": "asset id",
-  "Type the name of this Asset. This name will be used across all the apps. It can be edited later on.": "Type the name of this Asset. This name will be used across all the apps. It can be edited later on.",
-  "name": "name",
-  "Register": "Register",
-  "transferrable": "transferrable",
-  "The account you will send funds from.": "The account you will send funds from.",
-  "send from account": "send from account",
-  "Select a contact or paste the address you want to send funds to.": "Select a contact or paste the address you want to send funds to.",
-  "send to address": "send to address",
-  "Enter the Asset ID of the token you want to transfer.": "Enter the Asset ID of the token you want to transfer.",
-  "Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.": "Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.",
-  "amount": "amount",
-  "Make Transfer": "Make Transfer"
-}
diff --git a/packages/apps/public/locales/en/page-js.json b/packages/apps/public/locales/en/page-js.json
deleted file mode 100644
index 806d7cedad..0000000000
--- a/packages/apps/public/locales/en/page-js.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "Delete this custom example": "Delete this custom example",
-  "Name your example": "Name your example",
-  "Save snippet to local storage": "Save snippet to local storage",
-  "Select example": "Select example"
-}
diff --git a/packages/apps/public/locales/en/page-parachains.json b/packages/apps/public/locales/en/page-parachains.json
deleted file mode 100644
index 0205b02d8b..0000000000
--- a/packages/apps/public/locales/en/page-parachains.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "Parachains overview": "Parachains overview",
-  "the last heads of this parachain": "the last heads of this parachain",
-  "heads": "heads",
-  "<unknown>": "<unknown>",
-  "the relay dispatch queue size": "the relay dispatch queue size",
-  "relay queue": "relay queue",
-  "no deployed parachains": "no deployed parachains",
-  "parachains": "parachains",
-  "next id": "next id"
-}
diff --git a/packages/apps/public/locales/en/page-settings.json b/packages/apps/public/locales/en/page-settings.json
deleted file mode 100644
index 0ad7ec3bcd..0000000000
--- a/packages/apps/public/locales/en/page-settings.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "This is not a valid JSON object.": "This is not a valid JSON object.",
-  "Your custom types have been added": "Your custom types have been added",
-  "Save the type definitions for your custom structures as key-value pairs in a valid JSON file. The key should be the name of your custom structure and the value an object containing your type definitions.": "Save the type definitions for your custom structures as key-value pairs in a valid JSON file. The key should be the name of your custom structure and the value an object containing your type definitions.",
-  "Additional types as a JSON file (or edit below)": "Additional types as a JSON file (or edit below)",
-  "Reset": "Reset",
-  "Save": "Save",
-  "Override the default ss58 prefix for address generation": "Override the default ss58 prefix for address generation",
-  "address prefix": "address prefix",
-  "Override the default identity icon display with a specific theme": "Override the default identity icon display with a specific theme",
-  "default icon theme": "default icon theme",
-  "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)": "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)",
-  "interface operation mode": "interface operation mode",
-  "Manage your connection to Ledger S": "Manage your connection to Ledger S",
-  "manage hardware connections": "manage hardware connections",
-  "default interface language": "default interface language",
-  "Save & Reload": "Save & Reload",
-  "General": "General",
-  "Developer": "Developer",
-  "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle",
-  "remote node/endpoint to connect to": "remote node/endpoint to connect to",
-  "custom endpoint": "custom endpoint"
-}
diff --git a/packages/apps/public/locales/en/page-society.json b/packages/apps/public/locales/en/page-society.json
deleted file mode 100644
index 78a8b4dcb2..0000000000
--- a/packages/apps/public/locales/en/page-society.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "Society overview": "Society overview",
-  "kind": "kind",
-  "value": "value",
-  "bids": "bids",
-  "No bids": "No bids",
-  "candidates": "candidates",
-  "No candidates": "No candidates",
-  "Aye, I approve": "Aye, I approve",
-  "Nay, I do not approve": "Nay, I do not approve",
-  "Vote for candidate": "Vote for candidate",
-  "The address to vote from (must be a member)": "The address to vote from (must be a member)",
-  "vote from account": "vote from account",
-  "Approve this candidacy.": "Approve this candidacy.",
-  "vote for andidate": "vote for andidate",
-  "Vote": "Vote",
-  "defender": "defender",
-  "Vote for defender": "Vote for defender",
-  "Approve or reject this defneder.": "Approve or reject this defneder.",
-  "vote for defender": "vote for defender",
-  "strikes": "strikes",
-  "members": "members",
-  "No active members": "No active members",
-  "head": "head",
-  "rotation": "rotation",
-  "challenge": "challenge",
-  "pot": "pot",
-  "Skeptics ({{count}})": "Skeptics ({{count}})",
-  "Approvals ({{count}})": "Approvals ({{count}})",
-  "Rejections ({{count}})": "Rejections ({{count}})"
-}
diff --git a/packages/apps/public/locales/en/page-staking.json b/packages/apps/public/locales/en/page-staking.json
deleted file mode 100644
index ce129bfbed..0000000000
--- a/packages/apps/public/locales/en/page-staking.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-  "Bond more funds": "Bond more funds",
-  "Bond more": "Bond more",
-  "stash account": "stash account",
-  "transferrable": "transferrable",
-  "Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.": "Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.",
-  "additional bonded funds": "additional bonded funds",
-  "controller": "controller",
-  "Active nominations ({{count}})": "Active nominations ({{count}})",
-  "Inactive nominations ({{count}})": "Inactive nominations ({{count}})",
-  "Stop Nominating": "Stop Nominating",
-  "Stop Validating": "Stop Validating",
-  "Session Key": "Session Key",
-  "Validate": "Validate",
-  "Nominate": "Nominate",
-  "Unbond funds": "Unbond funds",
-  "Change controller account": "Change controller account",
-  "Change reward destination": "Change reward destination",
-  "Change validator preferences": "Change validator preferences",
-  "Change session keys": "Change session keys",
-  "Set nominees": "Set nominees",
-  "Inject session keys (advanced)": "Inject session keys (advanced)",
-  "Aura": "Aura",
-  "Babe": "Babe",
-  "Grandpa": "Grandpa",
-  "I'm Online": "I'm Online",
-  "Parachains": "Parachains",
-  "ed25519, Edwards": "ed25519, Edwards",
-  "sr15519, Schnorrkel": "sr15519, Schnorrkel",
-  "Inject Keys": "Inject Keys",
-  "suri (seed & derivation)": "suri (seed & derivation)",
-  "key type to set": "key type to set",
-  "crypto type to use": "crypto type to use",
-  "generated public key": "generated public key",
-  "This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.": "This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.",
-  "Submit key": "Submit key",
-  "The specified value is greater than your free balance. The node will bond the maximum amount available.": "The specified value is greater than your free balance. The node will bond the maximum amount available.",
-  "A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}": "A controller account should not map to another stash. This selected controller is a stash, controlled by {{bondedId}}",
-  "A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}": "A controller account should not be set to manages multiple stashes. The selected controller is already controlling {{stashId}}",
-  "For fund security, your session key should not match your stash key.": "For fund security, your session key should not match your stash key.",
-  "The Threshold must be a positive number": "The Threshold must be a positive number",
-  "The Threshold must lower than 11": "The Threshold must lower than 11",
-  "Nominate Validators": "Nominate Validators",
-  "controller account": "controller account",
-  "Filter available candidates based on name, address or short account index.": "Filter available candidates based on name, address or short account index.",
-  "filter candidates": "filter candidates",
-  "Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.": "Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.",
-  "The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.": "The controller is the account that will be used to control any nominating or validating actions. Should not match another stash or controller.",
-  "Set controller": "Set controller",
-  "Bonding Preferences": "Bonding Preferences",
-  "Set reward destination": "Set reward destination",
-  "The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.": "The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.",
-  "The destination account for any payments as either a nominator or validator": "The destination account for any payments as either a nominator or validator",
-  "payment destination": "payment destination",
-  "Set Session Key": "Set Session Key",
-  "Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command": "Changing the key only takes effect at the start of the next session. The input here is generates from the author_rotateKeys command",
-  "Keys from rotateKeys": "Keys from rotateKeys",
-  "Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.": "Changing the key only takes effect at the start of the next session. If validating, it must be an ed25519 key.",
-  "Session key (ed25519)": "Session key (ed25519)",
-  "Unbond": "Unbond",
-  "The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.": "The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.",
-  "unbond amount": "unbond amount",
-  "Set validator preferences": "Set validator preferences",
-  "The percentage reward (0-100) that should be applied for the validator": "The percentage reward (0-100) that should be applied for the validator",
-  "reward commission percentage": "reward commission percentage",
-  "New stake": "New stake",
-  "No funds staked yet. Bond funds to validate or nominate a validator.": "No funds staked yet. Bond funds to validate or nominate a validator.",
-  "The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)": "The total amount of the stash balance that will be at stake in any forthcoming rounds (should be less than the total amount available)",
-  "value bonded": "value bonded",
-  "Bond": "Bond",
-  "Staking overview": "Staking overview",
-  "Waiting": "Waiting",
-  "Returns": "Returns",
-  "Account actions": "Account actions",
-  "Validator stats": "Validator stats",
-  "Selected for the next session": "Selected for the next session",
-  "Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message": "Active with {{blocks}} blocks authored{{hasMessage}} heartbeat message",
-  "own stake": "own stake",
-  "other stake": "other stake",
-  "commission": "commission",
-  "points": "points",
-  "last #": "last #",
-  "Show all validators and intentions": "Show all validators and intentions",
-  "Show only my nominations": "Show only my nominations",
-  "Show only with nominators": "Show only with nominators",
-  "Show only without nominators": "Show only without nominators",
-  "Show only with warnings": "Show only with warnings",
-  "Show only without warnings": "Show only without warnings",
-  "Show only elected for next session": "Show only elected for next session",
-  "filter by name, address or index": "filter by name, address or index",
-  "validators": "validators",
-  "intention": "intention",
-  "waiting": "waiting",
-  "nominators": "nominators",
-  "last block": "last block",
-  "Display overview information for the selected validator, including blocks produced.": "Display overview information for the selected validator, including blocks produced.",
-  "validator to query": "validator to query",
-  "Loading block data": "Loading block data",
-  "blocks produced": "blocks produced",
-  "blocks": "blocks",
-  "average": "average",
-  "rewards & slashes": "rewards & slashes",
-  "{{currency}} slashed": "{{currency}} slashed",
-  "{{currency}} rewards (est.)": "{{currency}} rewards (est.)",
-  "{{currency}} average": "{{currency}} average",
-  "Loading staker data": "Loading staker data",
-  "elected stake": "elected stake",
-  "{{currency}} total": "{{currency}} total",
-  "{{currency}} own": "{{currency}} own",
-  "{{currency}} other": "{{currency}} other",
-  "staker percentages": "staker percentages",
-  "The amount that will be used on a per-validator basis to calculate rewards for that validator.": "The amount that will be used on a per-validator basis to calculate rewards for that validator.",
-  "amount to use for estimation": "amount to use for estimation",
-  "Validator info not available": "Validator info not available",
-  "total staked": "total staked",
-  "total issuance": "total issuance",
-  "staked": "staked",
-  "validators/nominators": "validators/nominators",
-  "last reward": "last reward",
-  "total stake": "total stake",
-  "profit/era est.": "profit/era est."
-}
diff --git a/packages/apps/public/locales/en/page-storage.json b/packages/apps/public/locales/en/page-storage.json
deleted file mode 100644
index 74e1bdf568..0000000000
--- a/packages/apps/public/locales/en/page-storage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "selected constant query": "selected constant query",
-  "Storage": "Storage",
-  "Constants": "Constants",
-  "Raw storage": "Raw storage",
-  "selected state query": "selected state query",
-  "hex-encoded storage key": "hex-encoded storage key"
-}
diff --git a/packages/apps/public/locales/en/page-sudo.json b/packages/apps/public/locales/en/page-sudo.json
deleted file mode 100644
index f7c244784a..0000000000
--- a/packages/apps/public/locales/en/page-sudo.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "Sudo access": "Sudo access",
-  "Set sudo key": "Set sudo key",
-  "You do not have access to the current sudo key": "You do not have access to the current sudo key",
-  "sudo key": "sudo key",
-  "Reassign": "Reassign",
-  "You will no longer have sudo access": "You will no longer have sudo access",
-  "submit the following change": "submit the following change",
-  "Submit Sudo": "Submit Sudo"
-}
diff --git a/packages/apps/public/locales/en/page-tech-comm.json b/packages/apps/public/locales/en/page-tech-comm.json
deleted file mode 100644
index 42cbf274fa..0000000000
--- a/packages/apps/public/locales/en/page-tech-comm.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "Tech. committee": "Tech. committee",
-  "Proposals ({{count}})": "Proposals ({{count}})",
-  "No members found": "No members found",
-  "members": "members",
-  "proposals": "proposals",
-  "total": "total",
-  "Submit proposal": "Submit proposal",
-  "No committee proposals": "No committee proposals",
-  "threshold": "threshold",
-  "Aye": "Aye",
-  "Nay": "Nay",
-  "Propose a committee motion": "Propose a committee motion",
-  "The minimum number of committee votes required to approve this motion": "The minimum number of committee votes required to approve this motion",
-  "Positive number between 1 and {{memberCount}}": "Positive number between 1 and {{memberCount}}",
-  "proposal": "proposal",
-  "Vote on proposal": "Vote on proposal",
-  "Vote": "Vote"
-}
diff --git a/packages/apps/public/locales/en/page-toolbox.json b/packages/apps/public/locales/en/page-toolbox.json
deleted file mode 100644
index b1e33283a2..0000000000
--- a/packages/apps/public/locales/en/page-toolbox.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.": "The input data to hash. This can be either specified as a hex value (0x-prefix) or as a string.",
-  "from the following data": "from the following data",
-  "Detection on the input string to determine if it is hex or non-hex.": "Detection on the input string to determine if it is hex or non-hex.",
-  "hex input data": "hex input data",
-  "Yes": "Yes",
-  "No": "No",
-  "The blake2b 256-bit hash of the actual input data.": "The blake2b 256-bit hash of the actual input data.",
-  "the resulting hash is": "the resulting hash is",
-  "RPC calls": "RPC calls",
-  "Hash data": "Hash data",
-  "Sign message": "Sign message",
-  "Verify signature": "Verify signature",
-  "sign data from account": "sign data from account",
-  "with an index of": "with an index of",
-  "The actual JSONRPC module and function to make a call to.": "The actual JSONRPC module and function to make a call to.",
-  "call the selected endpoint": "call the selected endpoint",
-  "Submit RPC call": "Submit RPC call",
-  "select the account you wish to sign data with": "select the account you wish to sign data with",
-  "account": "account",
-  "The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.": "The input data to sign. This can be either specified as a hex value (0x-prefix) or as a string.",
-  "sign the following data": "sign the following data",
-  "The resulting signature of the input data, as done with the crypto algorithm from the account. (This could be non-deterministic for some types such as sr25519).": "The resulting signature of the input data, as done with the crypto algorithm from the account. (This could be non-deterministic for some types such as sr25519).",
-  "signature of supplied data": "signature of supplied data",
-  "You need to unlock this account to be able to sign data.": "You need to unlock this account to be able to sign data.",
-  "Unlock account": "Unlock account",
-  "This injected account cannot be used to sign data since the extension does not support raw signing.": "This injected account cannot be used to sign data since the extension does not support raw signing.",
-  "This external account cannot be used to sign data. Only Limited support is currently available for signing from any non-internal accounts.": "This external account cannot be used to sign data. Only Limited support is currently available for signing from any non-internal accounts.",
-  "Unlock": "Unlock",
-  "You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.": "You are about to unlock your account to allow for the signing of messages. Once active the signature will be generated based on the content provided.",
-  "The account's password specified at the creation of this account.": "The account's password specified at the creation of this account.",
-  "password": "password",
-  "Crypto not detected": "Crypto not detected",
-  "The account that signed the input": "The account that signed the input",
-  "verify using address": "verify using address",
-  "The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a string.": "The data that was signed. This is used in combination with the signature for the verification. It can either be hex or a string.",
-  "using the following data": "using the following data",
-  "The signature as by the account being checked, supplied as a hex-formatted string.": "The signature as by the account being checked, supplied as a hex-formatted string.",
-  "the supplied signature": "the supplied signature",
-  "Cryptography used to create this signature. It is auto-detected on valid signatures.": "Cryptography used to create this signature. It is auto-detected on valid signatures.",
-  "signature crypto type": "signature crypto type"
-}
diff --git a/packages/apps/public/locales/en/page-transfer.json b/packages/apps/public/locales/en/page-transfer.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/packages/apps/public/locales/en/page-transfer.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/packages/apps/public/locales/en/page-treasury.json b/packages/apps/public/locales/en/page-treasury.json
deleted file mode 100644
index a26dde6fc8..0000000000
--- a/packages/apps/public/locales/en/page-treasury.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "Treasury overview": "Treasury overview",
-  "Aye, I approve": "Aye, I approve",
-  "Nay, I do not approve": "Nay, I do not approve",
-  "Approve or reject proposal": "Approve or reject proposal",
-  "Respond": "Respond",
-  "Propose a majority council motion to either approve or reject this spend proposal": "Propose a majority council motion to either approve or reject this spend proposal",
-  "proposed council action": "proposed council action",
-  "bond": "bond",
-  "beneficiary": "beneficiary",
-  "value": "value",
-  "Approved": "Approved",
-  "Proposals": "Proposals",
-  "No approved proposals": "No approved proposals",
-  "No pending proposals": "No pending proposals",
-  "Submit treasury proposal": "Submit treasury proposal",
-  "Select the account you wish to submit the proposal from.": "Select the account you wish to submit the proposal from.",
-  "submit with account": "submit with account",
-  "The account to which the proposed balance will be transferred if approved": "The account to which the proposed balance will be transferred if approved",
-  "The amount that will be allocated from the treasury pot": "The amount that will be allocated from the treasury pot",
-  "Submit proposal": "Submit proposal",
-  "Acceptance proposal to council": "Acceptance proposal to council",
-  "Rejection proposal to council": "Rejection proposal to council",
-  "Submit to council": "Submit to council",
-  "Select the council account you wish to use to make the proposal.": "Select the council account you wish to use to make the proposal.",
-  "submit with council account": "submit with council account",
-  "The type of council proposal to submit.": "The type of council proposal to submit.",
-  "council proposal type": "council proposal type",
-  "Send to council": "Send to council",
-  "proposals": "proposals",
-  "approved": "approved",
-  "available": "available",
-  "spend period": "spend period",
-  "Vote on proposal": "Vote on proposal",
-  "The council proposal to make the vote on": "The council proposal to make the vote on",
-  "council proposal": "council proposal",
-  "The hash for the proposal this vote applies to": "The hash for the proposal this vote applies to",
-  "proposal hash": "proposal hash",
-  "Vote": "Vote"
-}
diff --git a/packages/apps/public/locales/en/ui.json b/packages/apps/public/locales/en/ui.json
index a97f1a4605..c3d5c5a584 100644
--- a/packages/apps/public/locales/en/ui.json
+++ b/packages/apps/public/locales/en/ui.json
@@ -872,5 +872,36 @@
   "recovery block delay": "",
   "Uncaught error. Something went wrong with the query and rendering of this component.": "",
   "validators/nominators": "",
-  "View this externally": ""
+  "View this externally": "",
+  "There are no registered parachains": "",
+  "{{relayDispatchQueueSize}} dispatch messages pending": "",
+  "will swap to id": "",
+  "scheduling": "",
+  "watermark": "",
+  "Register a parachain": "",
+  "parachain id": "",
+  "The id number to assign to this parachain.": "",
+  "Positive number greater than or equal to {{nextFreeId}}": "",
+  "The scheduling preference for this parachain.": "",
+  "The compiled runtime WASM for the parachain you wish to register.": "",
+  "code": "",
+  "The initial head state for the parachain.": "",
+  "initial head state": "",
+  "The initial head state is invalid.": "",
+  "best block": "",
+  "Deregister this parachain": "",
+  "The id of the parachain to be deregistered.": "",
+  "The scheduling setting for this parachain.": "",
+  "Unknown": "",
+  "Most recent head data": "",
+  "The compiled runtime WASM for this parachain.": "",
+  "relay dispatch queue": "",
+  "no messages": "",
+  "Message origin.": "",
+  "origin": "",
+  "Message data": "",
+  "data": "",
+  "pending swap id": "",
+  "Unknown Chain": "",
+  "Unknown Owner": ""
 }
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index b1686b0f11..d3c83607b5 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -2,65 +2,120 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
+import { DeriveParachain } from '@polkadot/api-derive/types';
 
-import BN from 'bn.js';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
-import { Bytes, Option } from '@polkadot/types';
-import { Card, Static } from '@polkadot/react-components';
-import { styles as rowStyles } from '@polkadot/react-components/Row';
-import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
+import { Badge, Icon } from '@polkadot/react-components';
+import ParachainInfo from '../ParachainInfo';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
-  paraId: BN;
+  parachain: DeriveParachain;
 }
 
-function Parachain ({ className, paraId, t }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const heads = useCall<string | null>(api.query.parachains.heads, [paraId], {
-    transform: (heads: Option<Bytes>): string | null =>
-      heads.isSome ? heads.unwrap().toHex() : null
-  });
-  const relayDispatchQueueSize = useCall<[BN, BN]>(api.query.parachains.relayDispatchQueueSize, [paraId]);
+function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId, relayDispatchQueueSize = 0, watermark } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const _onClick = (): void => {
+    history.push(`/parachains/${id.toString()}`);
+  };
 
   return (
-    <Card className={className}>
-      <div className='ui--Row'>
-        <div className='ui--Row-base'>
-          <div className='ui--Row-details parachains--Item-header'>
-            <h3>#{formatNumber(paraId)}</h3>
-          </div>
+    <tr
+      className={className}
+      onClick={_onClick}
+    >
+      <td className='number'>
+        <h1>{id.toString()}</h1>
+      </td>
+      <td className='badges'>
+        <div>
+          <Badge
+            className='did-update'
+            hover={t(didUpdate ? 'Updated in the latest block' : 'Not updated in the last block')}
+            info={
+              <Icon name='check' />
+            }
+            isGray={!didUpdate}
+            isTooltip
+            type='online'
+          />
+          <Badge
+            className='pending-messages'
+            hover={t(
+              '{{relayDispatchQueueSize}} dispatch messages pending',
+              {
+                replace: {
+                  relayDispatchQueueSize
+                }
+              }
+            )}
+            info={relayDispatchQueueSize}
+            isGray={relayDispatchQueueSize <= 0}
+            isTooltip
+            type='counter'
+          />
         </div>
-        <Static
-          help={t('the last heads of this parachain')}
-          label={t('heads')}
-          value={heads || t('<unknown>')}
-        />
-        <Static
-          help={t('the relay dispatch queue size')}
-          label={t('relay queue')}
-          value={
-            relayDispatchQueueSize
-              ? formatNumber(relayDispatchQueueSize[0])
-              : '-'
-          }
-        />
-      </div>
-    </Card>
+      </td>
+      <td className='all info'>
+        <div>
+          <ParachainInfo info={info} />
+        </div>
+      </td>
+      <td className='all'></td>
+      <td className='top number pending-swap-id ui--media-small'>
+        {pendingSwapId && (
+          <>
+            <label>{t('will swap to id')}</label>
+            <b>{pendingSwapId.toString()}</b>
+          </>
+        )}
+      </td>
+      <td className='top ui--media-small'>
+        <label>{t('scheduling')}</label>
+        {info?.scheduling?.toString() || t('<unknown>')}
+      </td>
+      <td className='top number together'>
+        <label>{t('watermark')}</label>
+        <h1>#{formatNumber(watermark)}</h1>
+      </td>
+    </tr>
   );
 }
 
-export default translate(
-  styled(Parachain)`
-    ${rowStyles}
+export default styled(Parachain)`
+  & {
+    cursor: pointer !important;
+  }
 
-    .parachains--Item-header {
-      margin-bottom: 1rem;
+  h1 {
+    margin-top: 0 !important;
+  }
+
+  td.badges > div {
+    width: 3rem;
+    display: flex;
+    align-items: center;
+  }
+
+  td.info > div {
+    display: flex;
+    align-items: center;
+  }
+
+  td.pending-swap-id {
+    &, & * {
+      color: red !important;
     }
-  `
-);
+  }
+
+  .did-update {
+    margin-bottom: 0;
+  }
+`;
diff --git a/packages/page-parachains/src/Overview/Parachains.tsx b/packages/page-parachains/src/Overview/Parachains.tsx
index fbb9b8c45a..25f43e64cd 100644
--- a/packages/page-parachains/src/Overview/Parachains.tsx
+++ b/packages/page-parachains/src/Overview/Parachains.tsx
@@ -2,33 +2,36 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
+import { DeriveParachain } from '@polkadot/api-derive/types';
 
-import BN from 'bn.js';
 import React from 'react';
-import { Column } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import styled from 'styled-components';
+import { Table } from '@polkadot/react-components';
 
-import translate from '../translate';
 import Parachain from './Parachain';
 
-function Parachains ({ t }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const parachains = useCall<BN[]>(api.query.registrar.parachains || api.query.parachains.parachains, []);
+interface Props {
+  parachains: DeriveParachain[];
+}
 
+function Parachains ({ parachains }: Props): React.ReactElement<Props> {
   return (
-    <Column
-      emptyText={t('no deployed parachains')}
-      headerText={t('parachains')}
-    >
-      {parachains?.map((paraId): React.ReactNode => (
-        <Parachain
-          key={paraId.toString()}
-          paraId={paraId}
-        />
-      ))}
-    </Column>
+    <Table>
+      <Table.Body>
+        {parachains.map((parachain): React.ReactNode => (
+          <Parachain
+            key={parachain.id.toString()}
+            parachain={parachain}
+          />
+        ))}
+      </Table.Body>
+    </Table>
   );
 }
 
-export default translate(Parachains);
+export default styled(Parachains)`
+tbody {
+  tr {
+    cursor: pointer;
+  }
+}`;
diff --git a/packages/page-parachains/src/Overview/Register.tsx b/packages/page-parachains/src/Overview/Register.tsx
new file mode 100644
index 0000000000..9957e8b3e1
--- /dev/null
+++ b/packages/page-parachains/src/Overview/Register.tsx
@@ -0,0 +1,155 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ParaInfo } from '@polkadot/types/interfaces';
+import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
+
+import BN from 'bn.js';
+import React, { useMemo, useRef } from 'react';
+import { useApi, useFormField, useModal } from '@polkadot/react-hooks';
+import { createType } from '@polkadot/types';
+import { u8aToHex, u8aToString } from '@polkadot/util';
+
+import { Button, Dropdown, InputFile, InputNumber, InputWasm, Modal, TxButton } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  nextFreeId?: BN;
+  sudoKey: string;
+}
+
+type Scheduling = 'Always' | 'Dynamic';
+
+const schedulingOptions = [{
+  text: 'Always',
+  value: 'Always'
+}, {
+  text: 'Dynamic',
+  value: 'Dynamic'
+}];
+
+const ONE_THOUSAND = new BN(1000);
+
+export default function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const { isOpen, onOpen, onClose } = useModal();
+  const onSendRef = useRef<() => void>();
+  const isWasmValidRef = useRef(false);
+
+  const [id, isIdValid, setId] = useFormField<BN>(
+    nextFreeId,
+    (id) => !!id && id.gte(nextFreeId)
+  );
+  const [code, isCodeValid, setCode] = useFormField<Uint8Array>(
+    null,
+    (code): boolean => !!code && isWasmValidRef.current
+  );
+  const [initialHeadState, isInitialHeadStateValid, setInitialHeadState] = useFormField<Uint8Array>(
+    null
+  );
+  const [scheduling, , setScheduling] = useFormField<Scheduling>('Always');
+
+  const info = useMemo(
+    (): ParaInfo => {
+      return createType(api.registry, 'ParaInfo', { scheduling });
+    },
+    [scheduling]
+  );
+  const extrinsic = useMemo(
+    (): SubmittableExtrinsic | null => {
+      try {
+        return api.tx.registrar.registerPara(
+          id,
+          info,
+          code ? u8aToHex(code) : null,
+          initialHeadState ? u8aToString(initialHeadState) : null
+        );
+      } catch (error) {
+        console.log(error);
+        return null;
+      }
+    },
+    [id, info, code, initialHeadState]
+  );
+
+  return (
+    <>
+      <div className='ui--Row-buttons'>
+        <Button
+          isPrimary
+          label={t('Register a parachain')}
+          icon='add'
+          onClick={onOpen}
+        />
+      </div>
+      {isOpen && (
+        <Modal
+          header={t('Register a parachain')}
+          onClose={onClose}
+          small
+        >
+          <Modal.Content>
+            <InputNumber
+              defaultValue={nextFreeId}
+              label={t('parachain id')}
+              help={t('The id number to assign to this parachain.')}
+              isError={!isIdValid}
+              onChange={setId}
+              onEnter={onSendRef.current}
+              onEscape={onClose}
+              placeholder={
+                t(
+                  'Positive number greater than or equal to {{nextFreeId}}',
+                  { replace: { nextFreeId: nextFreeId.toString() } }
+                )
+              }
+            />
+            <Dropdown
+              help={t('The scheduling preference for this parachain.')}
+              label={t('scheduling')}
+              onChange={setScheduling}
+              options={schedulingOptions}
+              value={scheduling}
+            />
+            <InputWasm
+              help={t('The compiled runtime WASM for the parachain you wish to register.')}
+              isError={!!code && code.length > 0 && !isCodeValid}
+              isValidRef={isWasmValidRef}
+              label={t('code')}
+              onChange={setCode}
+              placeholder={
+                code && code.length > 0 && !isCodeValid
+                  ? t('The code is not recognized as being in valid WASM format')
+                  : null
+              }
+            />
+            <InputFile
+              help={t('The initial head state for the parachain.')}
+              isError={!!initialHeadState && !isInitialHeadStateValid}
+              label={t('initial head state')}
+              onChange={setInitialHeadState}
+              placeholder={
+                initialHeadState && !isInitialHeadStateValid
+                  ? t('The initial head state is invalid.')
+                  : null
+              }
+            />
+          </Modal.Content>
+          <Modal.Actions onCancel={onClose}>
+            <TxButton
+              accountId={sudoKey}
+              isDisabled={!isIdValid || !isCodeValid || !isInitialHeadStateValid}
+              onClick={onClose}
+              onSendRef={onSendRef}
+              params={[extrinsic]}
+              tx={'sudo.sudo'}
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/packages/page-parachains/src/Overview/Summary.tsx b/packages/page-parachains/src/Overview/Summary.tsx
index 6e316e05a9..7f26041e63 100644
--- a/packages/page-parachains/src/Overview/Summary.tsx
+++ b/packages/page-parachains/src/Overview/Summary.tsx
@@ -2,37 +2,43 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatNumber } from '@polkadot/util';
+import { BestNumber } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Summary ({ t }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const nextFreeId = useCall<BN>(api.query.parachains.nextFreeId, []);
-  const parachains = useCall<BN[]>(api.query.registrar.parachains || api.query.parachains.parachains, []);
+interface Props {
+  parachainCount: number;
+  nextFreeId?: BN;
+}
+
+function Summary ({ nextFreeId, parachainCount }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
 
   return (
     <SummaryBox>
       <section>
         <CardSummary label={t('parachains')}>
-          {formatNumber(parachains?.length)}
+          {parachainCount.toString()}
+        </CardSummary>
+        {nextFreeId && (
+          <CardSummary label={t('next id')}>
+            {nextFreeId.toString()}
+          </CardSummary>
+        )}
+      </section>
+      <section>
+        <CardSummary
+          className='ui--media-small'
+          label={t('best block')}
+        >
+          <BestNumber withPound />
         </CardSummary>
       </section>
-      {nextFreeId && (
-        <section>
-          <CardSummary label={t('next id')}>
-            {formatNumber(nextFreeId)}
-          </CardSummary>
-        </section>
-      )}
     </SummaryBox>
   );
 }
 
-export default translate(Summary);
+export default Summary;
diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
index 1e607b482e..8ed7a7f2eb 100644
--- a/packages/page-parachains/src/Overview/index.tsx
+++ b/packages/page-parachains/src/Overview/index.tsx
@@ -2,21 +2,67 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveParachain } from '@polkadot/api-derive/types';
+import { ComponentProps as Props } from '../types';
+
+import BN from 'bn.js';
 import React from 'react';
-import { Columar } from '@polkadot/react-components';
+import { Button, Icon, Spinner } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Parachains from './Parachains';
+import Register from './Register';
 import Summary from './Summary';
 
-type Props = {};
+import { useTranslation } from '../translate';
+
+export default function Overview ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const parachains = useCall<DeriveParachain[]>(api.derive.parachains.overview) || null;
+  const nextFreeId = useCall<BN>(api.query.registrar.nextFreeId);
+
+  if (!parachains) {
+    return (
+      <Spinner />
+    );
+  }
+
+  const actions = isMine && sudoKey
+    ? (
+      <Button.Group>
+        <Register
+          nextFreeId={nextFreeId}
+          sudoKey={sudoKey}
+        />
+      </Button.Group>
+    )
+    : null;
+
+  if (!!parachains && !parachains.length) {
+    return (
+      <>
+        {actions}
+        <article className='error padded'>
+          <div>
+            <Icon name='ban' />
+            {t('There are no registered parachains')}
+          </div>
+        </article>
+      </>
+    );
+  }
 
-export default function Overview (): React.ReactElement<Props> {
   return (
     <>
-      <Summary />
-      <Columar>
-        <Parachains />
-      </Columar>
+      {actions}
+      <Summary
+        nextFreeId={nextFreeId}
+        parachainCount={parachains.length}
+      />
+      <Parachains
+        parachains={parachains}
+      />
     </>
   );
 }
diff --git a/packages/page-parachains/src/Parachain/Deregister.tsx b/packages/page-parachains/src/Parachain/Deregister.tsx
new file mode 100644
index 0000000000..fa02792427
--- /dev/null
+++ b/packages/page-parachains/src/Parachain/Deregister.tsx
@@ -0,0 +1,79 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveParachainInfo } from '@polkadot/api-derive/types';
+import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
+
+import React, { useMemo, useRef } from 'react';
+import { useApi } from '@polkadot/react-hooks';
+
+import { Modal, Static, TxButton } from '@polkadot/react-components';
+import ParachainInfo from '../ParachainInfo';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  id: string;
+  onClick?: () => void;
+  info: DeriveParachainInfo | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  sudoKey: string;
+}
+
+export default function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const onSendRef = useRef<() => void>();
+
+  const extrinsic = useMemo(
+    (): SubmittableExtrinsic | null => {
+      try {
+        return api.tx.registrar.deregisterPara(id);
+      } catch (error) {
+        console.log(error);
+        return null;
+      }
+    },
+    [id]
+  );
+
+  const onStart = (): void => {
+    onClose();
+    onSubmit();
+  };
+
+  return (
+    <Modal
+      header={t('Deregister this parachain')}
+      open={isOpen}
+      onClose={onClose}
+      small
+    >
+      <Modal.Content>
+        <ParachainInfo info={info} />
+        <br />
+        <br />
+        <Static
+          className='full label-small'
+          help={t('The id of the parachain to be deregistered.')}
+          label={t('parachain id')}
+          value={id}
+        />
+      </Modal.Content>
+      <Modal.Actions onCancel={onClose}>
+        <TxButton
+          accountId={sudoKey}
+          isDisabled={!id || !extrinsic}
+          onClick={onClose}
+          onSendRef={onSendRef}
+          onStart={onStart}
+          params={[extrinsic]}
+          tx={'sudo.sudo'}
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+}
diff --git a/packages/page-parachains/src/Parachain/Details.tsx b/packages/page-parachains/src/Parachain/Details.tsx
new file mode 100644
index 0000000000..ef986678a9
--- /dev/null
+++ b/packages/page-parachains/src/Parachain/Details.tsx
@@ -0,0 +1,85 @@
+// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveParachainFull } from '@polkadot/api-derive/types';
+import { Bytes, Option } from '@polkadot/types';
+
+import FileSaver from 'file-saver';
+import React from 'react';
+import styled from 'styled-components';
+import { Card, IconLink, Labelled, Output, Static } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import { parachainName } from '../util';
+
+interface Props {
+  parachain: DeriveParachainFull;
+}
+
+function Details ({ parachain: { heads, info, id } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+
+  const onDownload = (): void => {
+    try {
+      api.query.parachains.code<Option<Bytes>>(id)
+        .then((code) => {
+          if (code.unwrap()) {
+            const blob = new Blob([code.unwrap().toU8a().buffer], { type: 'application/wasm' });
+
+            FileSaver.saveAs(blob, `${id.toString()}_${parachainName(t, info)}.wasm`);
+          }
+        });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Card>
+      <div className='ui--row'>
+        <Static
+          className='full label-small'
+          help={t('The scheduling setting for this parachain.')}
+          label={t('scheduling')}
+          value={info?.scheduling?.toString() || t('Unknown')}
+        />
+      </div>
+      {heads && (
+        <div className='ui--row'>
+          <Output
+            className='full label-small'
+            help={t('Most recent head data')}
+            isMonospace
+            label={t('heads')}
+            value={heads.toHex()}
+            withCopy
+          />
+        </div>
+      )}
+      <div className='ui--row'>
+        <Labelled
+          className='full label-small'
+          help={t('The compiled runtime WASM for this parachain.')}
+          label={t('code')}
+        >
+          <div
+            className='ui--Static ui selection dropdown'
+            onClick={onDownload}
+          >
+            <IconLink
+              icon='download'
+              label={t('Download')}
+              onClick={onDownload}
+            />
+          </div>
+        </Labelled>
+      </div>
+    </Card>
+  );
+}
+
+export default styled(Details)`
+`;
diff --git a/packages/page-parachains/src/Parachain/DispatchQueue.tsx b/packages/page-parachains/src/Parachain/DispatchQueue.tsx
new file mode 100644
index 0000000000..92a6820ff6
--- /dev/null
+++ b/packages/page-parachains/src/Parachain/DispatchQueue.tsx
@@ -0,0 +1,73 @@
+// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { UpwardMessage } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import styled from 'styled-components';
+import { Card, Output, Static } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+  dispatchQueue: UpwardMessage[];
+}
+
+function DispatchQueue ({ className, dispatchQueue = [] }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <div className={className}>
+      <h1>{t('relay dispatch queue')}</h1>
+      {
+        dispatchQueue.length === 0
+          ? (
+            <>
+              {t('no messages')}
+            </>
+          )
+          : (
+            <>
+              {
+                dispatchQueue.map(({ origin, data }): React.ReactNode => {
+                  return (
+                    <Card
+                      className='queue-message'
+                      key={data.toHex()}
+                    >
+                      <div className='ui--row'>
+                        <Static
+                          className='full label-small'
+                          help={t('Message origin.')}
+                          label={t('origin')}
+                          value={origin.toString()}
+                        />
+                      </div>
+                      <div className='ui--row'>
+                        <Output
+                          className='full label-small'
+                          help={t('Message data')}
+                          isMonospace
+                          label={t('data')}
+                          value={data.toHex()}
+                          withCopy
+                        />
+                      </div>
+                    </Card>
+                  );
+                })
+              }
+            </>
+          )
+      }
+    </div>
+  );
+}
+
+export default styled(DispatchQueue)`
+  .queue-message {
+    margin-bottom: 2rem;
+  }
+`;
diff --git a/packages/page-parachains/src/Parachain/index.tsx b/packages/page-parachains/src/Parachain/index.tsx
new file mode 100644
index 0000000000..055dcae043
--- /dev/null
+++ b/packages/page-parachains/src/Parachain/index.tsx
@@ -0,0 +1,150 @@
+// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveParachainInfo, DeriveParachainFull } from '@polkadot/api-derive/types';
+import { ComponentProps } from '../types';
+
+import React from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { Button, CardSummary, Columar, Column, Icon, Menu, Popup, Spinner, SummaryBox } from '@polkadot/react-components';
+import { useApi, useCall, useModal, useToggle } from '@polkadot/react-hooks';
+import { formatNumber, isNull, isUndefined } from '@polkadot/util';
+
+import ParachainInfo from '../ParachainInfo';
+import Deregister from './Deregister';
+import DispatchQueue from './DispatchQueue';
+import Details from './Details';
+
+import { useTranslation } from '../translate';
+
+interface Props extends ComponentProps {
+  basePath: string;
+  paraInfoRef: React.MutableRefObject<DeriveParachainInfo | null>;
+}
+
+function Parachain ({ className, basePath, isMine, paraInfoRef, sudoKey }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { api } = useApi();
+  const { id } = useParams();
+  const [isMenuOpen, toggleMenu] = useToggle();
+  const { isOpen: isDeregisterOpen, onOpen: onDeregisterOpen, onClose: onDeregisterClose } = useModal();
+  const parachain = useCall<DeriveParachainFull | null>(api.derive.parachains.info as any, [id || null]);
+
+  if (isUndefined(parachain)) {
+    return (
+      <Spinner />
+    );
+  }
+
+  console.log(parachain);
+
+  if (!id || isNull(parachain)) {
+    return (
+      <>
+        <article className='error padded'>
+          <div>
+            <Icon name='ban' />
+            {t(`No parachain with ${id ? `id ${id.toString()}` : 'this id'} exists`)}
+          </div>
+        </article>
+      </>
+    );
+  }
+
+  if (!paraInfoRef.current) {
+    paraInfoRef.current = parachain.info;
+  }
+
+  const onDeregister = (): void => {
+    history.push(basePath);
+  };
+
+  return (
+    <div className={className}>
+      <SummaryBox>
+        <section>
+          <ParachainInfo
+            isBig
+            info={parachain.info}
+          >
+            {(sudoKey && isMine) && (
+              <Popup
+                key='settings'
+                onClose={toggleMenu}
+                open={isMenuOpen}
+                position='bottom right'
+                trigger={
+                  <Button
+                    className='menu-button'
+                    icon='setting'
+                    isPrimary
+                    onClick={toggleMenu}
+                  />
+                }
+              >
+                <Menu
+                  onClick={toggleMenu}
+                  text
+                  vertical
+                >
+                  <Menu.Item
+                    onClick={(): void => {
+                      toggleMenu();
+                      onDeregisterOpen();
+                    }}
+                  >
+                    {t('Deregister this parachain')}
+                  </Menu.Item>
+                </Menu>
+              </Popup>
+            )}
+          </ParachainInfo>
+        </section>
+        <section>
+          <CardSummary label={t('parachain id')}>
+            {id.toString()}
+          </CardSummary>
+          {parachain.pendingSwapId && (
+            <CardSummary label={t('pending swap id')}>
+              {parachain.pendingSwapId.toString()}
+            </CardSummary>
+          )}
+          {parachain.watermark && (
+            <CardSummary label={t('watermark')}>
+              #{formatNumber(parachain.watermark)}
+            </CardSummary>
+          )}
+        </section>
+      </SummaryBox>
+      <Columar>
+        <Column>
+          <Details parachain={parachain} />
+        </Column>
+        <Column>
+          <DispatchQueue dispatchQueue={parachain.relayDispatchQueue} />
+        </Column>
+      </Columar>
+      {(sudoKey && isMine) && (
+        <Deregister
+          id={id}
+          info={parachain.info}
+          isOpen={isDeregisterOpen}
+          onClose={onDeregisterClose}
+          onSubmit={onDeregister}
+          sudoKey={sudoKey}
+        />
+      )}
+    </div>
+  );
+}
+
+export default styled(Parachain)`
+  & {
+    .menu-button {
+      margin-left: 1.4rem;
+    }
+  }
+`;
diff --git a/packages/page-parachains/src/ParachainInfo.tsx b/packages/page-parachains/src/ParachainInfo.tsx
new file mode 100644
index 0000000000..e7c82b4da9
--- /dev/null
+++ b/packages/page-parachains/src/ParachainInfo.tsx
@@ -0,0 +1,111 @@
+// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveParachainInfo } from '@polkadot/api-derive/types';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { useTranslation } from './translate';
+import { parachainName, parachainOwner } from './util';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  info: DeriveParachainInfo | null;
+  isBig?: boolean;
+}
+
+function ParachainInfo ({ children, className, isBig, info }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <div className={[className, isBig ? 'big' : ''].join(' ')}>
+      <div className='chain-icon'>
+        {
+          info?.icon
+            ? (
+              <img src={info.icon} />
+            )
+            : (
+              <i className='icon chain fitted' />
+            )
+        }
+      </div>
+      <div className='details'>
+        <div className='name'>
+          {parachainName(t, info)}
+        </div>
+        <div className='owner'>
+          {parachainOwner(t, info)}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default styled(ParachainInfo)`
+  & {
+    display: flex;
+    align-items: center;
+
+    .chain-icon {
+      width: 2.4rem;
+      height: 2.4rem;
+      background: #e03997;
+      border-radius: 50%;
+      color: white;
+      margin-right: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > * {
+        width:100%;
+      }
+
+      > i.icon {
+        height: auto !important;
+      }
+
+      > img {
+        height: 100%;
+      }
+    }
+
+    .details {
+      flex: 1;
+
+      .name {
+        font-weight: bold;
+        font-size: 1rem;
+      }
+
+      .owner {
+        color: rgba(100, 100, 100, 0.6);
+        font-size: 1rem;
+      }
+    }
+
+    &.big {
+      .chain-icon {
+        width: 3.4rem;
+        height: 3.4rem;
+        margin-right: 0.6rem;
+
+        > i.icon {
+          font-size: 1.6rem;
+        }
+      }
+
+      .details {
+        .name {
+          font-size: 1.4rem;
+          line-height: 1.4rem;
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/page-parachains/src/index.tsx b/packages/page-parachains/src/index.tsx
index 48eae7d107..922fec8242 100644
--- a/packages/page-parachains/src/index.tsx
+++ b/packages/page-parachains/src/index.tsx
@@ -2,37 +2,65 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveParachainInfo } from '@polkadot/api-derive/types';
 import { AppProps, BareProps } from '@polkadot/react-components/types';
 
-import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import React, { useMemo, useRef } from 'react';
+import { matchPath, Route, Switch } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { Tabs } from '@polkadot/react-components';
+import { useSudo } from '@polkadot/react-hooks';
 
 import Overview from './Overview';
+import Parachain from './Parachain';
 import { useTranslation } from './translate';
+import { parachainName } from './util';
 
 interface Props extends AppProps, BareProps {}
 
 export default function ParachainsApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const sudoState = useSudo();
+  const paraInfoRef = useRef<DeriveParachainInfo | null>(null);
+
+  const location = useLocation();
+  const match = matchPath<{ id: string }>(location.pathname, { path: `${basePath}/:id` });
   const items = useMemo(() => [
     {
       isRoot: true,
       name: 'overview',
       text: t('Parachains overview')
-    }
-  ], [t]);
+    },
+    ...(
+      match?.params.id
+        ? [{
+          name: match.params.id,
+          text: `${match.params.id}: ${parachainName(t, paraInfoRef.current)}`
+        }]
+        : []
+    )
+  ], [location, paraInfoRef.current, t]);
 
   return (
     <main>
       <header>
         <Tabs
           basePath={basePath}
+          isSequence
           items={items}
         />
       </header>
       <Switch>
-        <Route component={Overview} />
+        <Route path={`${basePath}/:id`}>
+          <Parachain
+            basePath={basePath}
+            paraInfoRef={paraInfoRef}
+            {...sudoState}
+          />
+        </Route>
+        <Route>
+          <Overview {...sudoState} />
+        </Route>
       </Switch>
     </main>
   );
diff --git a/packages/page-parachains/src/Overview/Chain.tsx b/packages/page-parachains/src/types.ts
similarity index 61%
rename from packages/page-parachains/src/Overview/Chain.tsx
rename to packages/page-parachains/src/types.ts
index 1dd15ad020..491511bb4e 100644
--- a/packages/page-parachains/src/Overview/Chain.tsx
+++ b/packages/page-parachains/src/types.ts
@@ -2,10 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React from 'react';
+import { UseSudo } from '@polkadot/react-hooks/types';
 
-type Props = {};
-
-export default function Chain (): React.ReactElement<Props> | null {
-  return null;
+export interface ComponentProps extends UseSudo {
+  className?: string;
 }
diff --git a/packages/page-parachains/src/util.ts b/packages/page-parachains/src/util.ts
new file mode 100644
index 0000000000..4e403d5dd2
--- /dev/null
+++ b/packages/page-parachains/src/util.ts
@@ -0,0 +1,14 @@
+// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { TFunction } from 'i18next';
+import { DeriveParachainInfo } from '@polkadot/api-derive/types';
+
+export function parachainName (t: TFunction, info: DeriveParachainInfo | null): string {
+  return info?.name || t('Unknown Chain');
+}
+
+export function parachainOwner (t: TFunction, info: DeriveParachainInfo | null): string {
+  return info?.owner || t('Unknown Owner');
+}
diff --git a/packages/page-sudo/src/index.tsx b/packages/page-sudo/src/index.tsx
index e00692f126..e30a1d07c2 100644
--- a/packages/page-sudo/src/index.tsx
+++ b/packages/page-sudo/src/index.tsx
@@ -6,10 +6,10 @@
 import { AppProps as Props } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { Icon, Tabs } from '@polkadot/react-components';
-import { useCall, useAccounts, useApi } from '@polkadot/react-hooks';
+import { useSudo } from '@polkadot/react-hooks';
 
 import SetKey from './SetKey';
 import Sudo from './Sudo';
@@ -18,10 +18,7 @@ import { useTranslation } from './translate';
 
 export default function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const sudoKey = useCall<string>(api.query.sudo.key, [], { transform: (k): string => k.toString() });
-  const { allAccounts } = useAccounts();
-  const [isMine, setIsMine] = useState(false);
+  const { allAccounts, sudoKey, isMine } = useSudo();
   const items = useMemo(() => [
     {
       isRoot: true,
@@ -34,10 +31,6 @@ export default function SudoApp ({ basePath }: Props): React.ReactElement<Props>
     }
   ], [t]);
 
-  useEffect((): void => {
-    setIsMine(!!sudoKey && allAccounts.some((key): boolean => key === sudoKey));
-  }, [allAccounts, sudoKey]);
-
   const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode => {
     // eslint-disable-next-line react/display-name
     return (): React.ReactNode => {
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index df61d93c95..fe4dc0b9c4 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -11,6 +11,7 @@ interface Props {
   className?: string;
   hover?: React.ReactNode;
   info: React.ReactNode;
+  isGray?: boolean;
   isInline?: boolean;
   isSmall?: boolean;
   isTooltip?: boolean;
@@ -20,12 +21,12 @@ interface Props {
 
 let badgeId = 0;
 
-function Badge ({ className, hover, info, isInline, isSmall, isTooltip, onClick, type }: Props): React.ReactElement<Props> | null {
+function Badge ({ className, hover, info, isGray, 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'} ${onClick && 'isClickable'} ${type} ${className}`}
+      className={`ui--Badge ${isGray && 'isGray'} ${isInline && 'isInline'} ${isTooltip && 'isTooltip'} ${isSmall && 'isSmall'} ${onClick && 'isClickable'} ${type} ${className}`}
       data-for={`badge-status-${key}`}
       data-tip={true}
       data-tip-disable={!isTooltip}
@@ -57,6 +58,7 @@ export default styled(Badge)`
   padding: 0 4px;
   text-align: center;
   width: 22px;
+  min-width: 22px;
 
   i.icon {
     cursor: inherit !important;
@@ -103,8 +105,8 @@ export default styled(Badge)`
     vertical-align: middle;
   }
 
-  &.gray {
-    background: #eee;
+  &.gray, &.isGray {
+    background: #eee !important;
     color: #aaa;
   }
 
diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx
index 360da8310c..44b34438fe 100644
--- a/packages/react-components/src/InputFile.tsx
+++ b/packages/react-components/src/InputFile.tsx
@@ -13,7 +13,7 @@ import { classes } from './util';
 import Labelled from './Labelled';
 import { useTranslation } from './translate';
 
-interface Props extends BareProps {
+export interface InputFileProps extends BareProps {
   // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
   // i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
   accept?: string;
@@ -53,7 +53,7 @@ function convertResult (result: ArrayBuffer, convertHex?: boolean): Uint8Array {
   return data;
 }
 
-function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
+function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: InputFileProps): React.ReactElement<InputFileProps> {
   const { t } = useTranslation();
   const dropRef = createRef<DropzoneRef>();
   const [file, setFile] = useState<FileState | undefined>();
diff --git a/packages/react-components/src/InputWasm.tsx b/packages/react-components/src/InputWasm.tsx
new file mode 100644
index 0000000000..bca5f9eb2d
--- /dev/null
+++ b/packages/react-components/src/InputWasm.tsx
@@ -0,0 +1,29 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { compactAddLength } from '@polkadot/util';
+import InputFile, { InputFileProps } from './InputFile';
+
+interface Props extends Omit<InputFileProps, 'accept'> {
+  isValidRef: React.MutableRefObject<boolean>;
+  onChange: (contents: Uint8Array, name?: string) => void;
+}
+
+export default function InputWasm ({ isValidRef, onChange, ...props }: Props): React.ReactElement<Props> {
+  const _onChange = (wasm: Uint8Array, name: string): void => {
+    const isWasmValid = wasm.subarray(0, 4).toString() === '0,97,115,109'; // '\0asm'
+
+    isValidRef.current = isWasmValid;
+    onChange(compactAddLength(wasm), name);
+  };
+
+  return (
+    <InputFile
+      {...props}
+      accept='application/wasm'
+      onChange={_onChange}
+    />
+  );
+}
diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx
new file mode 100644
index 0000000000..fc3ef485ce
--- /dev/null
+++ b/packages/react-components/src/Spinner.tsx
@@ -0,0 +1,89 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+  className?: string;
+  variant?: 'app' | 'push' | 'mini';
+}
+
+function Spinner ({ className, variant = 'app' }: Props): React.ReactElement<Props> | null {
+  const strokeWidth = variant === 'app' ? 2 : 4;
+
+  return (
+    <div className={[className, 'ui--Spinner', variant].join(' ')}>
+      <div className="loader">
+        <svg className="circular" viewBox="25 25 50 50">
+          <circle className="path" cx="50" cy="50" r="20" fill="none" strokeWidth={strokeWidth} strokeMiterlimit="10"/>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+export default styled(Spinner)`
+  .loader {
+    position: relative;
+    margin: 0 auto;
+    width: 64px;
+    &:before {
+      content: '';
+      display: block;
+      padding-top: 100%;
+    }
+  }
+
+  .circular {
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .path {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite;
+    stroke-linecap: round;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+
+  &.push {
+    .loader {
+      width: 40px;
+    }
+
+    .circular {
+      stroke: #eee !important;
+    }
+  }
+`;
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index 403b134a68..94ba5bb4b5 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -11,6 +11,7 @@ import { registry } from '@polkadot/react-api';
 import AddressMini from '../AddressMini';
 import Button from '../Button';
 import Icon from '../Icon';
+import Spinner from '../Spinner';
 import { useTranslation } from '../translate';
 import { classes } from '../util';
 import StatusContext from './Context';
@@ -129,10 +130,10 @@ function renderItem ({ id, extrinsic, error, removeItem, rpc, status }: QueueTx)
             />
           )}
           <div className='short'>
-            <Icon
-              loading={icon === 'spinner'}
-              name={icon}
-            />
+            {icon === 'spinner'
+              ? <Spinner variant='push' />
+              : <Icon name={icon} />
+            }
           </div>
           <div className='desc'>
             <div className='header'>
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index ee0d45fe0b..6e4a9b4fbf 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -56,6 +56,7 @@ export { default as InputNumber } from './InputNumber';
 export { default as InputRpc } from './InputRpc';
 export { default as InputStorage } from './InputStorage';
 export { default as InputTags } from './InputTags';
+export { default as InputWasm } from './InputWasm';
 export { default as Inset } from './Inset';
 export { default as Label } from './Label';
 export { default as LabelHelp } from './LabelHelp';
@@ -73,6 +74,7 @@ export { default as Popup } from './Popup';
 export { default as Progress } from './Progress';
 export { default as ProposedAction } from './ProposedAction';
 export { default as Row } from './Row';
+export { default as Spinner } from './Spinner';
 export { default as Static } from './Static';
 export { default as Status, StatusContext } from './Status';
 export { default as SummaryBox } from './SummaryBox';
diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts
index d31d8cef5d..a0e14406d6 100644
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@@ -103,5 +103,11 @@ export default css`
     .ui.toggle.checkbox input:checked~label:before {
       background-color: ${colorBtnHighlight} !important;
     }
+
+    .ui--Spinner {
+      .loader svg {
+        stroke: ${colorBtnPrimary};
+      }
+    }
   }
 `;
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 7bf014b861..88b51d4e3e 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -6,11 +6,11 @@ import { WithTranslation } from 'react-i18next';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { InputAddressProps } from '@polkadot/react-components/InputAddress/types';
 import { TxState } from '@polkadot/react-hooks/types';
 import { IExtrinsic } from '@polkadot/types/types';
 import { AccountId, Index } from '@polkadot/types/interfaces';
 import { ButtonProps, Button$Sizes } from './Button/types';
+import { InputAddressProps } from './InputAddress/types';
 import { TxCallback, TxFailedCallback } from './Status/types';
 
 export type VoidFn = () => void;
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
index 41f296e2bb..96b95924fd 100644
--- a/packages/react-hooks/src/index.ts
+++ b/packages/react-hooks/src/index.ts
@@ -8,11 +8,13 @@ export { default as useAddresses } from './useAddresses';
 export { default as useApi } from './useApi';
 export { default as useCacheKey } from './useCacheKey';
 export { default as useCall } from './useCall';
+export { default as useFormField } from './useFormField';
 export { default as useDebounce } from './useDebounce';
 export { default as useFavorites } from './useFavorites';
 export { default as useIsMountedRef } from './useIsMountedRef';
 export { default as useMembers } from './useMembers';
 export { default as useModal } from './useModal';
 export { default as usePassword } from './usePassword';
+export { default as useSudo } from './useSudo';
 export { default as useToggle } from './useToggle';
 export { default as useTx } from './useTx';
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts
index b7fb06414d..6fc4292abd 100644
--- a/packages/react-hooks/src/types.ts
+++ b/packages/react-hooks/src/types.ts
@@ -65,3 +65,9 @@ export interface TxState extends ExtrinsicAndSenders {
   accountId?: StringOrNull;
   onChangeAccountId: (_: StringOrNull) => void;
 }
+
+export interface UseSudo {
+  allAccounts: string[];
+  sudoKey?: string;
+  isMine: boolean;
+}
diff --git a/packages/react-hooks/src/useFormField.ts b/packages/react-hooks/src/useFormField.ts
new file mode 100644
index 0000000000..b74128e21d
--- /dev/null
+++ b/packages/react-hooks/src/useFormField.ts
@@ -0,0 +1,29 @@
+// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { useMemo, useState } from 'react';
+
+type FormField<T> = [
+  T | null,
+  boolean,
+  (_?: T | null) => void
+];
+
+function isTruthy<T> (value?: T | null): boolean {
+  return !!value;
+}
+
+export default function useFormField<T> (defaultValue: T | null, validate: (_?: T | null) => boolean = (): boolean => true): FormField<T> {
+  const [value, setValue] = useState<T | null>(defaultValue);
+  const isValid = useMemo(
+    (): boolean => isTruthy<T>(value) && validate(value),
+    [value]
+  );
+
+  return [
+    value,
+    isValid,
+    (value?: T | null): void => setValue(value || null)
+  ];
+}
diff --git a/packages/react-hooks/src/useSudo.ts b/packages/react-hooks/src/useSudo.ts
new file mode 100644
index 0000000000..f7bcf1de00
--- /dev/null
+++ b/packages/react-hooks/src/useSudo.ts
@@ -0,0 +1,27 @@
+// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { UseSudo } from './types';
+
+import { useEffect, useState } from 'react';
+
+import useAccounts from './useAccounts';
+import useApi from './useApi';
+import useCall from './useCall';
+
+export default function useSudo (): UseSudo {
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const sudoKey = useCall<string>(api.query.sudo?.key, [], {
+    transform: (k): string =>
+      k.toString()
+  });
+  const [isMine, setIsMine] = useState(false);
+
+  useEffect((): void => {
+    setIsMine(!!sudoKey && !!allAccounts && allAccounts.some((key): boolean => key === sudoKey));
+  }, [allAccounts, sudoKey]);
+
+  return { allAccounts, sudoKey, isMine };
+}
diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx
index d48d577354..7feea9793f 100644
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@@ -12,9 +12,10 @@ import { formatNumber } from '@polkadot/util';
 interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
+  withPound?: boolean;
 }
 
-export default function BestNumber ({ children, className, label, style }: Props): React.ReactElement<Props> {
+export default function BestNumber ({ children, className, label, style, withPound }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
   const bestNumber = useCall<BlockNumber>(isApiReady ? api.derive.chain.bestNumber as any : undefined, []);
 
@@ -23,7 +24,7 @@ export default function BestNumber ({ children, className, label, style }: Props
       className={className}
       style={style}
     >
-      {label || ''}{
+      {label || ''}{withPound && '#'}{
         bestNumber
           ? formatNumber(bestNumber)
           : '-'