diff --git a/src/app/components/CustomIcons/Delegate.tsx b/src/app/components/CustomIcons/Delegate.tsx
index f625b99606..3645ca379a 100644
--- a/src/app/components/CustomIcons/Delegate.tsx
+++ b/src/app/components/CustomIcons/Delegate.tsx
@@ -4,18 +4,20 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 export const DelegateIcon: FC<SvgIconProps> = props => {
   return (
     <SvgIcon {...props}>
-      <defs>
-        <clipPath id="clippath">
-          <rect fill="none" x="4.2" y="4.2" width="15.6" height="15.6" />
-        </clipPath>
-      </defs>
-      <circle fill="#E8F6FF" cx="12" cy="12" r="12" />
-      <g clipPath="url(#clippath)">
-        <path
-          fill="#6665D8"
-          d="M11.46,17.36H7.18v-3.75h1.61v-2.14h2.68v-1.07h-1.61v-3.75h4.29v3.75h-1.61v1.07h2.68v2.14h1.61v3.75h-4.29v-3.75h1.61v-1.07h-4.29v1.07h1.61v3.75Z"
-        />
-      </g>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7391_89888)">
+          <path
+            d="M18.75 32.5L8.75 32.5L8.75 23.75L12.5 23.75L12.5 18.75L18.75 18.75L18.75 16.25L15 16.25L15 7.5L25 7.5L25 16.25L21.25 16.25L21.25 18.75L27.5 18.75L27.5 23.75L31.25 23.75L31.25 32.5L21.25 32.5L21.25 23.75L25 23.75L25 21.25L15 21.25L15 23.75L18.75 23.75L18.75 32.5Z"
+            fill="#6665D8"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7391_89888">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
     </SvgIcon>
   )
 }
diff --git a/src/app/components/CustomIcons/Undelegate.tsx b/src/app/components/CustomIcons/Undelegate.tsx
deleted file mode 100644
index 027f80f2f1..0000000000
--- a/src/app/components/CustomIcons/Undelegate.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC } from 'react'
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
-
-export const UndelegateIcon: FC<SvgIconProps> = props => {
-  return (
-    <SvgIcon {...props}>
-      <defs>
-        <clipPath id="clippath">
-          <rect fill="none" x="4.2" y="4.2" width="15.6" height="15.6" />
-        </clipPath>
-      </defs>
-      <circle fill="#E8F6FF" cx="12" cy="12" r="12" />
-      <g clipPath="url(#clippath)">
-        <g>
-          <path
-            fill="#6665D8"
-            d="M7.05,6.83l-.22-.22-.76,.76,4.09,4.09h-1.39v2.16h-1.62v3.77h4.31v-3.77h-1.62v-1.08h1.39l1.3,1.3v3.55h3.55l.65,.65,.76-.76-.57-.57h0S7.05,6.83,7.05,6.83h0Z"
-          />
-          <path fill="#6665D8" d="M16.85,15.11v-1.49h-1.49l1.49,1.49Z" />
-          <path fill="#6665D8" d="M15.23,13.49v-2.03h-2.03l2.03,2.03Z" />
-          <path fill="#6665D8" d="M12.54,10.8v-.42h1.62v-3.77h-4.31v1.49l2.7,2.7Z" />
-        </g>
-      </g>
-    </SvgIcon>
-  )
-}
diff --git a/src/app/components/CustomIcons/UndelegateFinish.tsx b/src/app/components/CustomIcons/UndelegateFinish.tsx
new file mode 100644
index 0000000000..2d0826309e
--- /dev/null
+++ b/src/app/components/CustomIcons/UndelegateFinish.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UndelegateFinishIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7597_54392)">
+          <path
+            d="M29.4822 31.5H22.2499V24.2677V23.8534L21.957 23.5605L18.9393 20.5429L18.6464 20.25H18.2322H14.9999H13.9999V21.25V23.75V24.75H14.9999H17.7499V31.5H9.74988L9.74988 24.75H12.4999H13.4999V23.75V19.75H15.7322H18.1464L16.4393 18.0429L7.66421 9.26777L8.00985 8.92213L30.7285 31.6408L31.3444 32.2566L30.9987 32.6023L30.1893 31.7929L29.8964 31.5H29.4822ZM21.2499 15.25L20.7017 15.25L15.9999 10.5482V8.5H23.9999V15.25L21.2499 15.25ZM26.4999 19.75V21.0482L25.2017 19.75H26.4999ZM30.2499 24.7982L30.2017 24.75H30.2499V24.7982Z"
+            stroke="#6665D8"
+            strokeWidth="2"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7597_54392">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/CustomIcons/UndelegateStart.tsx b/src/app/components/CustomIcons/UndelegateStart.tsx
new file mode 100644
index 0000000000..9957bb5ade
--- /dev/null
+++ b/src/app/components/CustomIcons/UndelegateStart.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UndelegateStartIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7489_49493)">
+          <path
+            d="M12.5 18.75L12.5 21.2L27.5 21.2L27.5 18.75L21.25 18.75L21.25 16.25L25 16.25L25 7.5L15 7.5L15 16.25L18.75 16.25L18.75 18.75L12.5 18.75Z"
+            fill="#6665D8"
+          />
+          <path
+            d="M13 23.75L13 24.25L12.5 24.25L9.25 24.25L9.25 32L18.25 32L18.25 24.25L15 24.25L14.5 24.25L14.5 23.75L14.5 21.25L14.5 20.75L15 20.75L25 20.75L25.5 20.75L25.5 21.25L25.5 23.75L25.5 24.25L25 24.25L21.75 24.25L21.75 32L30.75 32L30.75 24.25L27.5 24.25L27 24.25L27 23.75L27 19.25L21.25 19.25L18.75 19.25L13 19.25L13 23.75Z"
+            stroke="#6665D8"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7489_49493">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
index a283dc0c61..f5d5549eb1 100644
--- a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
+++ b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -25,7 +25,9 @@ import { COLORS } from '../../../styles/theme/colors'
 import StreamIcon from '@mui/icons-material/Stream'
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
-import { UnknownIcon } from '../CustomIcons/Unknown'
+import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
+import { UndelegateFinishIcon } from '../CustomIcons/UndelegateFinish'
+import { DelegateIcon } from '../CustomIcons/Delegate'
 
 export const EventTypeIcon: FC<{
   eventType: RuntimeEventType
@@ -37,9 +39,9 @@ export const EventTypeIcon: FC<{
     [RuntimeEventType.coregas_used]: <></>,
     [RuntimeEventType.consensus_accountswithdraw]: <WithdrawIcon fontSize="inherit" />,
     [RuntimeEventType.consensus_accountsdeposit]: <DepositIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsdelegate]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
-    [RuntimeEventType.consensus_accountsundelegate_start]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
-    [RuntimeEventType.consensus_accountsundelegate_done]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
+    [RuntimeEventType.consensus_accountsdelegate]: <DelegateIcon fontSize="inherit" />,
+    [RuntimeEventType.consensus_accountsundelegate_start]: <UndelegateStartIcon fontSize="inherit" />,
+    [RuntimeEventType.consensus_accountsundelegate_done]: <UndelegateFinishIcon fontSize="inherit" />,
     [RuntimeEventType.accountsmint]: <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />,
     [RuntimeEventType.accountsburn]: (
       <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
@@ -147,6 +149,7 @@ export const RuntimeEventDetails: FC<{
     [RuntimeEventType.accountsmint]: t('runtimeEvent.accountsmint'),
     [RuntimeEventType.accountsburn]: t('runtimeEvent.accountsburn'),
   }
+
   const eventName = eventTypeNames[event.type]
   switch (event.type) {
     case RuntimeEventType.coregas_used:
@@ -237,9 +240,6 @@ export const RuntimeEventDetails: FC<{
     case RuntimeEventType.accountstransfer:
     case RuntimeEventType.consensus_accountsdeposit:
     case RuntimeEventType.consensus_accountswithdraw:
-    case RuntimeEventType.consensus_accountsdelegate: // TODO show this properly
-    case RuntimeEventType.consensus_accountsundelegate_start: // TODO show this properly
-    case RuntimeEventType.consensus_accountsundelegate_done: // TODO show this properly
       return (
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
@@ -264,8 +264,43 @@ export const RuntimeEventDetails: FC<{
               />
               {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
             </dd>
-            {/* TODO check is needed because some consensus events temporarily use this for rendering */}
-            {event.body.amount?.Amount && event.body.amount?.Denomination && (
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(event.body.amount.Amount),
+                ticker: event.body.amount?.Denomination,
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
+    case RuntimeEventType.consensus_accountsdelegate:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+
+            {event.body.amount?.Amount && event.body.amount.Denomination && (
               <>
                 <dt>{t('runtimeEvent.fields.amount')}</dt>
                 <dd>
@@ -279,6 +314,81 @@ export const RuntimeEventDetails: FC<{
           </StyledDescriptionList>
         </div>
       )
+    case RuntimeEventType.consensus_accountsundelegate_start:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+            <dt>{t('runtimeEvent.fields.activeShares')}</dt>
+            <dd>
+              {t('common.valueLong', {
+                ...getPreciseNumberFormat(event.body.shares),
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
+    case RuntimeEventType.consensus_accountsundelegate_done:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(event.body.amount.Amount),
+                ticker: event.body.amount.Denomination,
+              })}
+            </dd>
+            <dt>{t('runtimeEvent.fields.debondingShares')}</dt>
+            <dd>
+              {t('common.valueLong', {
+                ...getPreciseNumberFormat(event.body.shares),
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
     default:
       exhaustedTypeWarning('Unexpected event type', event.type)
       return (
diff --git a/src/app/components/RuntimeTransactionLabel/index.tsx b/src/app/components/RuntimeTransactionLabel/index.tsx
index 44b8b7f465..a53a664606 100644
--- a/src/app/components/RuntimeTransactionLabel/index.tsx
+++ b/src/app/components/RuntimeTransactionLabel/index.tsx
@@ -10,7 +10,7 @@ import { DepositIcon } from './../CustomIcons/Deposit'
 import { WithdrawIcon } from './../CustomIcons/Withdraw'
 import { TransferIcon } from './../CustomIcons/Transfer'
 import { DelegateIcon } from '../CustomIcons/Delegate'
-import { UndelegateIcon } from '../CustomIcons/Undelegate'
+import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -53,7 +53,7 @@ const getRuntimeTransactionIcon = (method: string | undefined) => {
     case 'consensus.Delegate':
       return <DelegateIcon sx={iconStyles} />
     case 'consensus.Undelegate':
-      return <UndelegateIcon sx={iconStyles} />
+      return <UndelegateStartIcon sx={iconStyles} />
     case 'accounts.Transfer':
       return <TransferIcon sx={iconStyles} />
     default:
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index b52eafed0c..f5cdce94b9 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -323,7 +323,9 @@
     "gasUsed": "Gas used",
     "fields": {
       "amount": "Amount",
-      "owner": "Owner"
+      "owner": "Owner",
+      "activeShares": "Active Shares",
+      "debondingShares": "Debonding Shares"
     }
   },
   "transactionStats": {