diff --git a/src/components/NodesMap.vue b/src/components/NodesMap.vue
index 3cf1f06ae..3133e4058 100644
--- a/src/components/NodesMap.vue
+++ b/src/components/NodesMap.vue
@@ -8,10 +8,14 @@
 import 'leaflet/dist/leaflet.css';
 import leaflet from 'leaflet';
 import markerCluster from 'leaflet.markercluster'; // eslint-disable-line
-import IconOrange from '../styles/img/connector_orange.png';
-import IconBlue from '../styles/img/connector_blue.png';
-import IconGreen from '../styles/img/connector_green.png';
-import IconPink from '../styles/img/connector_pink.png';
+import IconApiVoter from '../styles/img/pin-api-voter.png';
+import IconApi from '../styles/img/pin-api.png';
+import IconPeerApiVoter from '../styles/img/pin-peer-api-voter.png';
+import IconPeerApi from '../styles/img/pin-peer-api.png';
+import IconPeerVoter from '../styles/img/pin-peer-voter.png';
+import IconPeer from '../styles/img/pin-peer.png';
+import IconVoter from '../styles/img/pin-voter.png';
+import Constants from '../config/constants';
 
 export default {
 	props: {
@@ -66,7 +70,7 @@ export default {
 		},
 
 		button1Style() {
-			return `border-radius: 3px; 
+			return `border-radius: 3px;
                 color: #fff;
                 background-color: #5200c6;
                 font-family: Noto Sans;
@@ -143,10 +147,13 @@ export default {
 				});
 			};
 
-			const iconPeer = getIcon(IconBlue);
-			const iconVoting = getIcon(IconGreen);
-			const iconApi = getIcon(IconPink);
-			const iconApiVoting = getIcon(IconOrange);
+			const iconPeer = getIcon(IconPeer);
+			const iconVoter = getIcon(IconVoter);
+			const iconApi = getIcon(IconApi);
+			const iconApiVoter = getIcon(IconApiVoter);
+			const iconPeerApiVoter = getIcon(IconPeerApiVoter);
+			const iconPeerApi = getIcon(IconPeerApi);
+			const iconPeerVoter = getIcon(IconPeerVoter);
 
 			const markerClusters = leaflet.markerClusterGroup({
 				// iconCreateFunction: this.createClusterGroup,
@@ -157,9 +164,7 @@ export default {
 				const popup =
                     '<br/><span title="' + node.friendlyName + '"><b>' + this.getNameByKey('friendlyName') + ':</b> ' + this.formatText(node.friendlyName) +
                     '</span><br/><span title="' + node.host + '"><b>' + this.getNameByKey('host') + ':</b> ' + this.formatText(node.host) +
-                    '</span><br/><span title="' + node.host + '"><b>' + this.getNameByKey('roles') + ':</b> ' + this.formatText(node.roles) +
-                    '</span><br/><span title="' + node.network + '"><b>' + this.getNameByKey('network') + ':</b> ' + this.formatText(node.network) +
-                    '</span><br/><span title="' + node.address + '"><b>' + this.getNameByKey('address') + ':</b> ' + this.formatText(node.address) +
+                    '</span><br/><span title="' + node.address + '"><b>' + this.getNameByKey('address') + ':</b> ' + node.address +
                     '</span><br/><span title="' + node.location + '"><b>' + this.getNameByKey('location') + ':</b> ' + this.formatText(node.location) +
                     '</span><br/><span style="' + this.buttonContainerStyle + '">' +
                     '<a style="' + this.button1Style + '" href="' + this.getPageHref('node', node.publicKey) + '">' + this.getNameByKey('nodeDetailTitle') +
@@ -170,25 +175,40 @@ export default {
 					let icon = iconPeer;
 
 					switch (node.rolesRaw) {
-					case 2:
-					case 3:
+					case Constants.ROLE_TYPE_RAW.API:
 						icon = iconApi;
 						break;
-					case 4:
-					case 5:
-						icon = iconVoting;
+					case Constants.ROLE_TYPE_RAW.PEER_API:
+						icon = iconPeerApi;
+						break;
+					case Constants.ROLE_TYPE_RAW.PEER_VOTER:
+						icon = iconPeerVoter;
+						break;
+					case Constants.ROLE_TYPE_RAW.VOTER:
+						icon = iconVoter;
+						break;
+					case Constants.ROLE_TYPE_RAW.API_VOTER:
+						icon = iconApiVoter;
 						break;
-					case 6:
-					case 7:
-						icon = iconApiVoting;
+					case Constants.ROLE_TYPE_RAW.PEER_API_VOTER:
+						icon = iconPeerApiVoter;
 						break;
 					}
 
 					const m = leaflet.marker([node.coordinates.latitude, node.coordinates.longitude], { icon });
 
-					if (this.showPopup === true)
+					if (this.showPopup === true) {
 						m.bindPopup(popup);
 
+						m.on('mouseover', function (e) {
+							this.openPopup();
+						});
+
+						m.on('mouseout', function (e) {
+							this.closePopup();
+						});
+					}
+
 					markerClusters.addLayer(m);
 				}
 			}
diff --git a/src/components/fields/IconField.vue b/src/components/fields/IconField.vue
new file mode 100644
index 000000000..3927aef48
--- /dev/null
+++ b/src/components/fields/IconField.vue
@@ -0,0 +1,89 @@
+/*
+ *
+ * (C) Symbol Contributors 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License ");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+<template>
+	<div class="icon-container">
+		<span class="icon" v-for="(value, key) in displayIcons" :key="'icon_' + key">
+			<img
+				v-if="value"
+				:title="translate(key)"
+				:src="iconUrl(key)"
+				width="20px"
+				height="20px"
+				alt="icon"
+			/>
+		</span>
+	</div>
+</template>
+
+<script>
+import IconPeerNode from '../../styles/img/peer-node.png';
+import IconApiNode from '../../styles/img/api-node.png';
+import IconVotingNode from '../../styles/img/voting-node.png';
+
+export default {
+	name: 'IconField',
+
+	props: {
+		value: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			IconPeerNode,
+			IconApiNode,
+			IconVotingNode
+		};
+	},
+
+	computed: {
+		displayIcons() {
+			const filtered = Object.entries(this.value).filter(([key, value]) => value);
+
+			return Object.fromEntries(filtered);
+		}
+	},
+
+	methods: {
+		translate(value) {
+			return this.$store.getters['ui/getNameByKey'](value);
+		},
+
+		iconUrl(icon) {
+			switch (icon) {
+			case 'peer':
+				return this.IconPeerNode;
+			case 'api':
+				return this.IconApiNode;
+			case 'voting':
+				return this.IconVotingNode;
+			default:
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.icon {
+    padding: 0 5px;
+}
+</style>
diff --git a/src/components/tables/TableListView.vue b/src/components/tables/TableListView.vue
index d1ed0fedc..936fb8c05 100644
--- a/src/components/tables/TableListView.vue
+++ b/src/components/tables/TableListView.vue
@@ -42,6 +42,7 @@
 							<Harvester v-else-if="itemKey === 'harvester'" :value="item" />
 							<EpochInfoField v-else-if="itemKey === 'epochInfo'" :value="item" />
 							<MosaicFlagsField v-else-if="itemKey === 'mosaicFlags'" :value="item" />
+							<IconField v-else-if="itemKey === 'rolesIcon'" :value="item" />
 
 							<div v-else-if="isAggregateInnerTransaction(itemKey)">
 								<b-link v-b-modal="'tlv_r'+rowIndex">Show Detail</b-link>
@@ -116,6 +117,7 @@ import SoftwareVersion from '@/components/fields/SoftwareVersion.vue';
 import Harvester from '@/components/fields/Harvester.vue';
 import EpochInfoField from '@/components/fields/EpochInfoField.vue';
 import MosaicFlagsField from '@/components/fields/MosaicFlagsField.vue';
+import IconField from '@/components/fields/IconField.vue';
 
 export default {
 	extends: TableView,
@@ -136,7 +138,8 @@ export default {
 		SoftwareVersion,
 		Harvester,
 		EpochInfoField,
-		MosaicFlagsField
+		MosaicFlagsField,
+		IconField
 	},
 
 	props: {
diff --git a/src/components/widgets/NodeStatsWidget.vue b/src/components/widgets/NodeStatsWidget.vue
index 4eba487dd..bc4b274da 100644
--- a/src/components/widgets/NodeStatsWidget.vue
+++ b/src/components/widgets/NodeStatsWidget.vue
@@ -38,10 +38,6 @@
 import Card from '@/components/containers/Card.vue';
 import ButtonMore from '@/components/controls/ButtonMore.vue';
 import Constants from '../../config/constants';
-import IconOrange from '../../styles/img/connector_orange.png';
-import IconBlue from '../../styles/img/connector_blue.png';
-import IconGreen from '../../styles/img/connector_green.png';
-import IconPink from '../../styles/img/connector_pink.png';
 
 export default {
 	components: {
@@ -78,50 +74,35 @@ export default {
 			return [
 				{
 					name: this.getNameByKey('allNodes'),
-					count: Array.from(Array(8).keys()).reduce((acc, val) => acc + (data[val] || 0)),
-					icon: IconBlue
+					count: Array.from(Array(8).keys()).reduce((acc, val) => acc + (data[val] || 0))
 				},
 				{
 					name: Constants.RoleType[1],
-					count: data[1] || 0,
-					icon: IconBlue,
-					color: 'blue'
+					count: data[1] || 0
 				},
 				{
 					name: Constants.RoleType[2],
-					count: data[2] || 0,
-					icon: IconPink,
-					color: 'pink'
+					count: data[2] || 0
 				},
 				{
 					name: Constants.RoleType[3],
-					count: data[3] || 0,
-					icon: IconPink,
-					color: 'pink'
+					count: data[3] || 0
 				},
 				{
 					name: Constants.RoleType[4],
-					count: data[4] || 0,
-					icon: IconGreen,
-					color: 'green'
+					count: data[4] || 0
 				},
 				{
 					name: Constants.RoleType[5],
-					count: data[5] || 0,
-					icon: IconGreen,
-					color: 'green'
+					count: data[5] || 0
 				},
 				{
 					name: Constants.RoleType[6],
-					count: data[6] || 0,
-					icon: IconOrange,
-					color: 'orange'
+					count: data[6] || 0
 				},
 				{
 					name: Constants.RoleType[7],
-					count: data[7] || 0,
-					icon: IconOrange,
-					color: 'orange'
+					count: data[7] || 0
 				}
 			];
 		},
diff --git a/src/components/widgets/NodesMapWidget.vue b/src/components/widgets/NodesMapWidget.vue
index d5c18e748..c04c33e2d 100644
--- a/src/components/widgets/NodesMapWidget.vue
+++ b/src/components/widgets/NodesMapWidget.vue
@@ -4,17 +4,6 @@
 			{{getNameByKey(title)}}
 		</template>
 
-		<template #control>
-			<DropdownFilter
-				:dark="true"
-				v-if="hasFilter"
-				:options="filterOptions"
-				:value="filterValue"
-				:index="filterIndex"
-				right
-				@change="changeFilterValue"
-			/>
-		</template>
 
 		<template #body>
 			<b-row class="map-container">
@@ -28,6 +17,27 @@
 					/>
 				</b-col>
 			</b-row>
+			<b-row class="map-legend">
+				<div class="legend-filter">
+					<DropdownFilter
+						:dark="false"
+						:border="false"
+						v-if="hasFilter"
+						:options="filterOptions"
+						:value="filterValue"
+						:index="filterIndex"
+						right
+						@change="changeFilterValue"
+					/>
+				</div>
+
+				<div class="legend-item-container">
+					<div class="legend-item" v-for="(item, index) in mapLegends" :key="'legend_'+index">
+						<img :src="item.iconUrl" class="legend-logo">
+						{{ getNodeRoleName(item.rolesRaw) }} ({{ item.count }})
+					</div>
+				</div>
+			</b-row>
 		</template>
 	</Card>
 </template>
@@ -36,6 +46,14 @@
 import Card from '@/components/containers/Card.vue';
 import NodesMap from '@/components/NodesMap.vue';
 import DropdownFilter from '@/components/controls/DropdownFilter.vue';
+import IconApiVoter from '../../styles/img/pin-api-voter.png';
+import IconApi from '../../styles/img/pin-api.png';
+import IconPeerApiVoter from '../../styles/img/pin-peer-api-voter.png';
+import IconPeerApi from '../../styles/img/pin-peer-api.png';
+import IconPeerVoter from '../../styles/img/pin-peer-voter.png';
+import IconPeer from '../../styles/img/pin-peer.png';
+import IconVoter from '../../styles/img/pin-voter.png';
+import Constants from '../../config/constants';
 
 export default {
 	components: {
@@ -113,6 +131,76 @@ export default {
 
 		filterOptions() {
 			return this.manager.filterOptions;
+		},
+
+		getRolesCounter() {
+			const rolesCounter = {
+				peer: 0,
+				apiVoter: 0,
+				api: 0,
+				peerApiVoter: 0,
+				peerApi: 0,
+				peerVoter: 0,
+				voter: 0
+			};
+
+			if (this.nodeList.length !== 0) {
+				this.nodeList.forEach(node => {
+					if (node.rolesRaw === Constants.ROLE_TYPE_RAW.PEER)
+						rolesCounter.peer++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.API)
+						rolesCounter.api++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.PEER_API)
+						rolesCounter.peerApi++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.VOTER)
+						rolesCounter.voter++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.PEER_VOTER)
+						rolesCounter.peerVoter++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.API_VOTER)
+						rolesCounter.apiVoter++;
+					else if (node.rolesRaw === Constants.ROLE_TYPE_RAW.PEER_API_VOTER)
+						rolesCounter.peerApiVoter++;
+				});
+			}
+
+			return rolesCounter;
+		},
+
+		mapLegends() {
+			const rolesCounter = this.getRolesCounter;
+
+			const legends = [{
+				rolesRaw: Constants.ROLE_TYPE_RAW.PEER,
+				iconUrl: IconPeer,
+				count: rolesCounter.peer
+			},
+			{
+				rolesRaw: Constants.ROLE_TYPE_RAW.API,
+				iconUrl: IconApi,
+				count: rolesCounter.api
+			}, {
+				rolesRaw: Constants.ROLE_TYPE_RAW.VOTER,
+				iconUrl: IconVoter,
+				count: rolesCounter.voter
+			}, {
+				rolesRaw: Constants.ROLE_TYPE_RAW.PEER_VOTER,
+				iconUrl: IconPeerVoter,
+				count: rolesCounter.peerVoter
+			}, {
+				rolesRaw: Constants.ROLE_TYPE_RAW.API_VOTER,
+				iconUrl: IconApiVoter,
+				count: rolesCounter.apiVoter
+			}, {
+				rolesRaw: Constants.ROLE_TYPE_RAW.PEER_API,
+				iconUrl: IconPeerApi,
+				count: rolesCounter.peerApi
+			}, {
+				rolesRaw: Constants.ROLE_TYPE_RAW.PEER_API_VOTER,
+				iconUrl: IconPeerApiVoter,
+				count: rolesCounter.peerApiVoter
+			}];
+
+			return this.filterIndex === 0 ? legends : legends.filter(legend => legend.rolesRaw === this.filterIndex);
 		}
 	},
 
@@ -133,12 +221,16 @@ export default {
 					'Failed to change filter value. "changeFilterValue" is not a function'
 				);
 			}
+		},
+
+		getNodeRoleName(rolesRaw) {
+			return Constants.RoleType[rolesRaw].replaceAll(' ', ' + ');
 		}
 	}
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .map-width-limit {
     min-width: 500px;
 }
@@ -161,4 +253,36 @@ export default {
     padding: 0;
     margin: 10px 20px;
 }
+
+.map-legend {
+    margin: auto;
+    border-radius: 3px;
+    background-color: #e8e8e8;
+    width: 90%;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: bold;
+
+    .legend-logo {
+        width: 25px;
+    }
+
+    .legend-filter {
+        align-items: center;
+        padding: 0 15px;
+        margin: 0 10px;
+        border-right: black solid 2px;
+    }
+
+    .legend-item-container {
+        width: 80%;
+        display: flex;
+        justify-content: space-between;
+
+        .legend-item {
+            padding: 0 10px;
+        }
+    }
+}
 </style>
diff --git a/src/config/constants.js b/src/config/constants.js
index 41f12e62b..9b7487256 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -143,13 +143,23 @@ class Constants {
 	}
 
 	static RoleType = {
-		1: 'Peer node',
-		2: 'Api node',
-		3: 'Peer Api node',
-		4: 'Voting node',
-		5: 'Peer Voting node',
-		6: 'Api Voting node',
-		7: 'Peer Api Voting node'
+		1: 'Peer',
+		2: 'Api',
+		3: 'Peer Api',
+		4: 'Voter',
+		5: 'Peer Voter',
+		6: 'Api Voter',
+		7: 'Peer Api Voter'
+	}
+
+	static ROLE_TYPE_RAW = {
+		'PEER': 1,
+		'API': 2,
+		'PEER_API': 3,
+		'VOTER': 4,
+		'PEER_VOTER': 5,
+		'API_VOTER': 6,
+		'PEER_API_VOTER': 7
 	}
 
 	static AddressRestrictionFlag = {
diff --git a/src/config/filters.js b/src/config/filters.js
index b972cc8d1..a1ba4e3b3 100644
--- a/src/config/filters.js
+++ b/src/config/filters.js
@@ -282,7 +282,7 @@ export const mosaicRestriction = [
 
 export const nodeRoles = [
 	{
-		label: 'All Nodes',
+		label: 'Show All',
 		icon: '',
 		value: {
 			rolesRaw: null
diff --git a/src/config/i18n/en-us.json b/src/config/i18n/en-us.json
index 111ed6742..411662a9b 100644
--- a/src/config/i18n/en-us.json
+++ b/src/config/i18n/en-us.json
@@ -409,5 +409,6 @@
     "reclaimed": "Reclaimed",
     "first": "First",
     "last": "Last",
-    "mosaicFlags": "Flags"
+    "mosaicFlags": "Flags",
+    "rolesIcon": "Roles"
 }
diff --git a/src/config/i18n/es.json b/src/config/i18n/es.json
index 11c3eaa64..b328e3735 100644
--- a/src/config/i18n/es.json
+++ b/src/config/i18n/es.json
@@ -405,5 +405,6 @@
     "reclaimed": "Reclaimed",
     "first": "First",
     "last": "Last",
-    "mosaicFlags": "Flags"
+    "mosaicFlags": "Flags",
+    "rolesIcon": "Roles"
 }
diff --git a/src/config/i18n/ja.json b/src/config/i18n/ja.json
index 4009e3693..18ca902a0 100644
--- a/src/config/i18n/ja.json
+++ b/src/config/i18n/ja.json
@@ -409,5 +409,6 @@
     "reclaimed": "回収",
     "first": "最初",
     "last": "最後",
-    "mosaicFlags": "フラグ"
+    "mosaicFlags": "フラグ",
+    "rolesIcon": "ロール"
 }
diff --git a/src/config/i18n/pt.json b/src/config/i18n/pt.json
index a79ed0d8c..6aa0f93de 100644
--- a/src/config/i18n/pt.json
+++ b/src/config/i18n/pt.json
@@ -405,5 +405,6 @@
     "reclaimed": "Reclaimed",
     "first": "First",
     "last": "Last",
-    "mosaicFlags": "Flags"
+    "mosaicFlags": "Flags",
+    "rolesIcon": "Roles"
 }
diff --git a/src/config/i18n/ru.json b/src/config/i18n/ru.json
index 05f68f822..dc95f6c69 100644
--- a/src/config/i18n/ru.json
+++ b/src/config/i18n/ru.json
@@ -409,5 +409,6 @@
     "reclaimed": "Возвращенная",
     "first": "Первая",
     "last": "Последняя",
-    "mosaicFlags": "Флаги"
+    "mosaicFlags": "Флаги",
+    "rolesIcon": "Роли"
 }
diff --git a/src/config/i18n/ua.json b/src/config/i18n/ua.json
index 1dbbe4ccb..8c4384a3f 100644
--- a/src/config/i18n/ua.json
+++ b/src/config/i18n/ua.json
@@ -405,5 +405,6 @@
     "reclaimed": "Reclaimed",
     "first": "First",
     "last": "Last",
-    "mosaicFlags": "Flags"
+    "mosaicFlags": "Flags",
+    "rolesIcon": "Roles"
 }
diff --git a/src/config/i18n/zh.json b/src/config/i18n/zh.json
index 56180124b..85d5e0a3a 100644
--- a/src/config/i18n/zh.json
+++ b/src/config/i18n/zh.json
@@ -405,5 +405,6 @@
     "reclaimed": "Reclaimed",
     "first": "First",
     "last": "Last",
-    "mosaicFlags": "Flags"
+    "mosaicFlags": "Flags",
+    "rolesIcon": "Roles"
 }
diff --git a/src/config/pages/node-list.json b/src/config/pages/node-list.json
index 6b081076a..8605832fd 100644
--- a/src/config/pages/node-list.json
+++ b/src/config/pages/node-list.json
@@ -40,7 +40,7 @@
 				"fields": [
 					"host",
 					"friendlyName",
-					"roles",
+					"rolesIcon",
 					"nodePublicKey",
 					"chainInfo",
 					"softwareVersion"
diff --git a/src/infrastructure/NodeService.js b/src/infrastructure/NodeService.js
index 90ca8fb67..4a66af667 100644
--- a/src/infrastructure/NodeService.js
+++ b/src/infrastructure/NodeService.js
@@ -129,6 +129,15 @@ class NodeService {
 
                 		node['softwareVersion'] = { version: el.version };
 
+						if (el.roles) {
+							// convert Peer Voting node -> Peer Voting
+							const roles = el.roles.split(' ');
+							roles.pop();
+							node['rolesIcon'] = Object.fromEntries(roles.map(role => [role.toLowerCase(), true]))
+						}
+
+						console.log('node[] :>> ', node);
+
                 		if (el.apiStatus) {
                 			const { chainHeight, finalization, lastStatusCheck, restVersion, isHttpsEnabled } = el.apiStatus;
 
diff --git a/src/styles/img/api-node.png b/src/styles/img/api-node.png
new file mode 100644
index 000000000..61e503b43
Binary files /dev/null and b/src/styles/img/api-node.png differ
diff --git a/src/styles/img/connector_blue.png b/src/styles/img/connector_blue.png
deleted file mode 100644
index 6a7b9df72..000000000
Binary files a/src/styles/img/connector_blue.png and /dev/null differ
diff --git a/src/styles/img/connector_green.png b/src/styles/img/connector_green.png
deleted file mode 100644
index af1f4c79e..000000000
Binary files a/src/styles/img/connector_green.png and /dev/null differ
diff --git a/src/styles/img/connector_orange.png b/src/styles/img/connector_orange.png
deleted file mode 100644
index c5fbe3dc2..000000000
Binary files a/src/styles/img/connector_orange.png and /dev/null differ
diff --git a/src/styles/img/connector_pink.png b/src/styles/img/connector_pink.png
deleted file mode 100644
index 54694a9d7..000000000
Binary files a/src/styles/img/connector_pink.png and /dev/null differ
diff --git a/src/styles/img/peer-node.png b/src/styles/img/peer-node.png
new file mode 100644
index 000000000..39056a078
Binary files /dev/null and b/src/styles/img/peer-node.png differ
diff --git a/src/styles/img/pin-api-voter.png b/src/styles/img/pin-api-voter.png
new file mode 100644
index 000000000..015e6df41
Binary files /dev/null and b/src/styles/img/pin-api-voter.png differ
diff --git a/src/styles/img/pin-api.png b/src/styles/img/pin-api.png
new file mode 100644
index 000000000..82346792f
Binary files /dev/null and b/src/styles/img/pin-api.png differ
diff --git a/src/styles/img/pin-peer-api-voter.png b/src/styles/img/pin-peer-api-voter.png
new file mode 100644
index 000000000..81ea6bd61
Binary files /dev/null and b/src/styles/img/pin-peer-api-voter.png differ
diff --git a/src/styles/img/pin-peer-api.png b/src/styles/img/pin-peer-api.png
new file mode 100644
index 000000000..a122addf3
Binary files /dev/null and b/src/styles/img/pin-peer-api.png differ
diff --git a/src/styles/img/pin-peer-voter.png b/src/styles/img/pin-peer-voter.png
new file mode 100644
index 000000000..47c618dd6
Binary files /dev/null and b/src/styles/img/pin-peer-voter.png differ
diff --git a/src/styles/img/pin-peer.png b/src/styles/img/pin-peer.png
new file mode 100644
index 000000000..d7e595012
Binary files /dev/null and b/src/styles/img/pin-peer.png differ
diff --git a/src/styles/img/pin-voter.png b/src/styles/img/pin-voter.png
new file mode 100644
index 000000000..138bf6915
Binary files /dev/null and b/src/styles/img/pin-voter.png differ
diff --git a/src/styles/img/voting-node.png b/src/styles/img/voting-node.png
new file mode 100644
index 000000000..285d52fdc
Binary files /dev/null and b/src/styles/img/voting-node.png differ