diff --git a/packages/apps-config/src/ui/logos/extensions/polkadot-js.svg b/packages/apps-config/src/ui/logos/extensions/polkadot-js.svg
new file mode 100644
index 0000000000..7b60266ace
--- /dev/null
+++ b/packages/apps-config/src/ui/logos/extensions/polkadot-js.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;zoom: 1;" xml:space="preserve">
+<style type="text/css">
+	.bg0{fill:#FF8C00}
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="bg0" cx="85" cy="85" r="70"/>
+	<g>
+		<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z M87.7,121.7 c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9C93.3,125.7,91.2,122.4,87.7,121.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/packages/apps-config/src/ui/logos/index.ts b/packages/apps-config/src/ui/logos/index.ts
index 8ef308ace5..b52e7bf76e 100644
--- a/packages/apps-config/src/ui/logos/index.ts
+++ b/packages/apps-config/src/ui/logos/index.ts
@@ -12,6 +12,9 @@ import nodePolkadot from './nodes/polkadot-circle.svg';
 import nodePolkadotJs from './nodes/polkadot-js.svg';
 import nodeSubstrate from './nodes/substrate-hexagon.svg';
 
+// extensions
+import extensionPolkadotJs from './extensions/polkadot-js.svg';
+
 // last-resort fallback, just something empty
 import emptyLogo from './empty.svg';
 
@@ -51,9 +54,15 @@ const namedLogos: Record<string, any> = {
   westend: nodePolkadot
 };
 
+// extension logos
+const extensionLogos: Record<string, any> = {
+  'polkadot-js': extensionPolkadotJs
+};
+
 export {
   chainLogos,
   emptyLogo,
+  extensionLogos,
   namedLogos,
   nodeLogos
 };
diff --git a/packages/page-settings/package.json b/packages/page-settings/package.json
index c8a22598ad..79f261740a 100644
--- a/packages/page-settings/package.json
+++ b/packages/page-settings/package.json
@@ -12,6 +12,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
+    "@polkadot/apps-config": "0.42.0-beta.21",
     "@polkadot/react-components": "0.42.0-beta.21",
     "@polkadot/react-query": "0.42.0-beta.21",
     "query-string": "^6.12.1"
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 8ef884288e..167944e6ad 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -5,11 +5,13 @@
 import { ChainInfo } from '../types';
 
 import React, { useCallback, useMemo, useState } from 'react';
+import { extensionLogos } from '@polkadot/apps-config/ui/logos';
 import { Button, Dropdown, Spinner } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import useExtensions from '../useExtensions';
+import iconOption from './iconOption';
 
 interface Props {
   chainInfo: ChainInfo | null;
@@ -22,7 +24,8 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isBusy, toggleBusy] = useToggle();
   const options = useMemo(
-    () => (extensions || []).map(({ extension: { name, version } }, value) => ({ text: `${name} ${version}`, value })),
+    () => (extensions || []).map(({ extension: { name, version } }, value) =>
+      iconOption(`${name} ${version}`, value, extensionLogos[name])),
     [extensions]
   );
   const _updateMeta = useCallback(
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index 2dcac96bd8..f3c68bf16a 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -6,7 +6,7 @@ import { ChainInfo } from '../types';
 
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Columar, Column, Input, Spinner } from '@polkadot/react-components';
+import { Button, ChainImg, Columar, Column, Input, Spinner } from '@polkadot/react-components';
 import { useApi, useDebounce } from '@polkadot/react-hooks';
 import { QrNetworkSpecs } from '@polkadot/react-qr';
 import { NetworkSpecsStruct } from '@polkadot/ui-settings';
@@ -89,13 +89,16 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
   return (
     <Columar className={className}>
       <Column>
-        <Input
-          className='full'
-          help={t('Name of the network. It only for display purpose.')}
-          isDisabled
-          label={t('Network Name')}
-          value={networkSpecs.title}
-        />
+        <div className='settings--networkSpecs-name'>
+          <Input
+            className='full'
+            help={t('Name of the network. It only for display purpose.')}
+            isDisabled
+            label={t('Network Name')}
+            value={networkSpecs.title}
+          />
+          <ChainImg className='settings--networkSpecs-logo' />
+        </div>
         <Input
           className='full'
           help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
@@ -165,4 +168,16 @@ export default React.memo(styled(NetworkSpecs)`
     margin: 0.25rem auto;
     max-width: 15rem;
   }
+
+  .settings--networkSpecs-name {
+    position: relative;
+
+    .settings--networkSpecs-logo {
+      height: 32px;
+      left: 12px;
+      position: absolute;
+      top: 1rem;
+      width: 32px;
+    }
+  }
 `);
diff --git a/packages/page-settings/src/Metadata/iconOption.tsx b/packages/page-settings/src/Metadata/iconOption.tsx
new file mode 100644
index 0000000000..7bc5af72f8
--- /dev/null
+++ b/packages/page-settings/src/Metadata/iconOption.tsx
@@ -0,0 +1,29 @@
+// Copyright 2017-2020 @polkadot/app-settings 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';
+
+interface Option {
+  text: React.ReactNode;
+  value: number | string;
+}
+
+export default function itemOption (label: string, value: string | number, img: any): Option {
+  return {
+    text: (
+      <div
+        className='ui--Dropdown-item'
+        key={value}
+      >
+        <img
+          alt={label}
+          className='ui--Dropdown-icon'
+          src={img}
+        />
+        <div className='ui--Dropdown-name'>{label}</div>
+      </div>
+    ),
+    value
+  };
+}
diff --git a/yarn.lock b/yarn.lock
index 34c668bd99..78161083a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3015,6 +3015,7 @@ __metadata:
   resolution: "@polkadot/app-settings@workspace:packages/page-settings"
   dependencies:
     "@babel/runtime": ^7.9.2
+    "@polkadot/apps-config": 0.42.0-beta.21
     "@polkadot/react-components": 0.42.0-beta.21
     "@polkadot/react-query": 0.42.0-beta.21
     query-string: ^6.12.1
@@ -3089,7 +3090,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/apps-config@workspace:packages/apps-config":
+"@polkadot/apps-config@0.42.0-beta.21, @polkadot/apps-config@workspace:packages/apps-config":
   version: 0.0.0-use.local
   resolution: "@polkadot/apps-config@workspace:packages/apps-config"
   dependencies: