From 37382136b5f42de0960388d9e4321d302e8d19b4 Mon Sep 17 00:00:00 2001
From: soulBit <its.soulBit@gmail.com>
Date: Wed, 11 Oct 2023 13:53:52 +0100
Subject: [PATCH] Bitocracy Page (#543)

* feat: initial Bitocracy content and stubs

* feat: add Bitocracy menu option for SOV-2917

* chore: add changeset

* fix: missing lazy load for Bitocracy page

* SOV-2922: voting proposals page (#552)

* SOV-2922: voting proposals page

* Create proud-rivers-give.md

* chore: added changes from comments

* chore: remove condition for past proposals

* chore: added tooltip + added view button

* chore: update proposal link + new proposal btn

* SOV-3008: Proposal voting status (progress) (#565)

* feat: add bar component with threshold option

* SOV-3008: bitocracy voting result component

* SOV-3226: Fix bitocracy alerts button (#610)

* Fix bitocracy alerts button

* Move EmailNotificationSettingsDialog to shared state

* Create shiny-years-leave.md

* SOV-3012: Bitocracy alerts (#580)

* SOV-3012: Bitocracy alerts

* Create fifty-baboons-fry.md

* chore: cherry-pick from https://github.com/DistributedCollective/sovryn-dapp/pull/535/files

* Fix invalid localization key

* fix: duplicated deps

---------

Co-authored-by: tiltom <tilnak.tomas@gmail.com>
Co-authored-by: Victor Creed <victor@sovryn.app>

* SOV-3013: Voting - Next Steps modal (#564)

* feat: Voting - Next Steps modal

* Create two-ligers-relax.md

* fix: resolve PR issue

* fix: next step modal showing

* fix: show next step dialog when tx dialog is closed

* SOV-3010: Individual Proposal page (#583)

* SOV-2922: voting proposals page (#552)

* SOV-2922: voting proposals page

* Create proud-rivers-give.md

* chore: added changes from comments

* chore: remove condition for past proposals

* chore: added tooltip + added view button

* chore: update proposal link + new proposal btn

* feat: ProposalPage added

* Create pink-buckets-rhyme.md

* feat: update proposal page

* feat: vote query

* feat: resolve PR comments

* feat: update cast vote in proposal

* update proposal query

* fix: mobile view

* update gql

* fix: proposal result issue

* fix: show loading on proposal page

* fix: cast vote error message

* SOV-3009: voting actions (#597)

* SOV-3009: voting actions

* Create yellow-tips-sip.md

* chore: fixes from comments

* chore: update proposal status

* chore: update proposal status

* chore: update from comments

* fix: proposal execution

---------

Co-authored-by: Victor Creed <victor@sovryn.app>

* fix: execution eta

* SOV-3196: add voting tooltips to Voting proposals page (#603)

* SOV-3196: add voting tooltips to Voting proposals page

* Create angry-mails-enjoy.md

* chore: force deployment

* chore: force deployment

---------

Co-authored-by: Victor Creed <69458664+creed-victor@users.noreply.github.com>

* SOV-3211-3207: Bitocracy proposal issues (#614)

* fix: bitocracy proposal title

* Create many-fishes-hang.md

* fix: define title limit

* fix: update proposal title

* SOV-3195: add voting power section (#600)

* SOV-3195: add voting power section

* chore: add a tooltip for VP

* chore: refactoring

* Create giant-ducks-laugh.md

* chore: updates from comments

* fix: proposal status hook

* chore: remove hrefExternal in view proposal button

---------

Co-authored-by: Victor Creed <victor@sovryn.app>

* SOV-3225: Proposal row click (#625)

* Fix individual proposal opening

* Fix review remarks

* Change title tooltip trigger to hover

* Create fresh-goats-begin.md

* SOV-3011: Voting - Proposal CSV export (#627)

* SOV-3011: add CSV export

* chore: update text in proposal CSV file

* SOV-3239: Support/Reject button in Cast your vote (#616)

* feat: support reject proposal

* Create olive-olives-obey.md

* fix: refetch when voting is done

* fix: casting issue

* fix: hide when loading

* fix: resolve PR comments

* fix: casting vote issue

* chore: increase gas limit

---------

Co-authored-by: Victor Creed <69458664+creed-victor@users.noreply.github.com>

---------

Co-authored-by: Pietro Maximoff <74987028+pietro-maximoff@users.noreply.github.com>
Co-authored-by: Victor Creed <victor@sovryn.app>
Co-authored-by: Victor Creed <69458664+creed-victor@users.noreply.github.com>
Co-authored-by: tiltom <tiltom.defi@protonmail.com>

* SOV-3319: Fix proposal type (#630)

* Fix proposal type condition

* Adjust exacutable details and proposal actions

* Create brave-experts-cover.md

* SOV-3312: Fix small bugs (#631)

* Fix small bugs

* Create small-fishes-work.md

* Change layout of executable details

* SOV-3288: Show the current state of voting (#632)

* Show the current state of voting

* Create thin-geckos-fail.md

* Fix the copy

* Fix review remarks

* SOV-3327: Fix status labels (#636)

* Fix status labels

* Create moody-fans-attack.md

* SOV-3334: Fix cast vote mobile (#639)

* Fix cast section mobile view

* Create happy-carrots-fold.md

* Bump up proposal vote gas limit

---------

Co-authored-by: Pietro Maximoff <74987028+pietro-maximoff@users.noreply.github.com>
Co-authored-by: Victor Creed <69458664+creed-victor@users.noreply.github.com>
Co-authored-by: tiltom <tiltom.defi@protonmail.com>
Co-authored-by: tiltom <tilnak.tomas@gmail.com>
Co-authored-by: Victor Creed <victor@sovryn.app>
Co-authored-by: Peiman <25097709+Rickk137@users.noreply.github.com>
---
 .changeset/angry-mails-enjoy.md               |   5 +
 .changeset/brave-experts-cover.md             |   5 +
 .changeset/fifty-baboons-fry.md               |   5 +
 .changeset/fresh-goats-begin.md               |   5 +
 .changeset/giant-ducks-laugh.md               |   5 +
 .changeset/happy-carrots-fold.md              |   5 +
 .changeset/many-fishes-hang.md                |   5 +
 .changeset/moody-fans-attack.md               |   5 +
 .changeset/nervous-swans-lick.md              |   5 +
 .changeset/olive-olives-obey.md               |   6 +
 .changeset/pink-buckets-rhyme.md              |   6 +
 .changeset/pink-monkeys-wash.md               |   5 +
 .changeset/proud-rivers-give.md               |   5 +
 .changeset/shiny-years-leave.md               |   5 +
 .changeset/silver-mayflies-sell.md            |   5 +
 .changeset/small-fishes-work.md               |   5 +
 .changeset/thin-geckos-fail.md                |   5 +
 .changeset/two-ligers-relax.md                |   5 +
 .changeset/yellow-tips-sip.md                 |   6 +
 apps/frontend/package.json                    |   4 +
 .../ConnectWalletButton.tsx                   |  20 +-
 .../EmailNotificationSettingsDialog.types.ts  |   7 +
 .../components/Subscriptions.tsx              |  11 +
 .../EmailNotificationSettingsContext.tsx      |   7 +
 .../hooks/useHandleSubscriptions.ts           |  13 +
 .../3_organisms/Header/Header.constants.tsx   |   4 +
 .../ProposalVotingPower.tsx                   |  53 ++
 .../ProposalVotingPower.utils.tsx             |  34 +
 .../ProposalVotingResults.tsx                 | 165 ++++
 .../SharedStateProvider.tsx                   |  27 +
 .../BitocracyPage/BitocracyPage.constants.tsx |   1 +
 .../5_pages/BitocracyPage/BitocracyPage.tsx   |  82 ++
 .../BitocracyPage/BitocracyPage.types.ts      |  16 +
 .../BitocracyPage/BitocracyPage.utils.tsx     |  46 ++
 .../ProposalCardsMobile.tsx                   |  80 ++
 .../ProposalStatus/ProposalStatus.tsx         |  57 ++
 .../ProposalTitle/ProposalTitle.tsx           |  31 +
 .../components/ProposalType/ProposalType.tsx  |  39 +
 .../ProposalViewButton/ProposalViewButton.tsx |  27 +
 .../Proposals/Proposals.constants.tsx         |  70 ++
 .../components/Proposals/Proposals.tsx        | 103 +++
 .../components/Proposals/Proposals.utils.tsx  |  17 +
 .../BitocracyPage/hooks/useGetProposals.ts    |  23 +
 .../hooks/useIsExecutableProposal.ts          |  25 +
 .../BitocracyPage/hooks/useProposalStatus.ts  |  44 +
 .../app/5_pages/ProposalPage/ProposalPage.tsx | 164 ++++
 .../ProposalPage/ProposalPage.types.ts        |   4 +
 .../ProposalPage/ProposalPage.utils.ts        |  49 ++
 .../components/CastVote/CastVote.tsx          | 235 ++++++
 .../ExecutableDetails/ExecutableDetails.tsx   | 147 ++++
 .../ProposalAction/ProposalAction.tsx         |  87 ++
 .../ProposalAction/ProposalAction.types.ts    |   5 +
 .../ProposalAction/hooks/useHandleProposal.ts |  62 ++
 .../components/ProposalInfo/ProposalInfo.tsx  |  55 ++
 .../components/VoteTimer/VoteTimer.tsx        |  89 ++
 .../ProposalPage/hooks/useGetProposalById.ts  |  23 +
 .../ProposalPage/hooks/useGetUserVote.ts      |  26 +
 .../app/5_pages/ProposalPage/hooks/useVote.ts |  75 ++
 .../AddStakeRenderer/AddStakeRenderer.tsx     |  17 +-
 .../NextStepDialog/NextStepDialog.tsx         | 108 +++
 .../images/ProposalStatuses/icon-active.svg   |  11 +
 .../images/ProposalStatuses/icon-executed.svg |  11 +
 .../images/ProposalStatuses/icon-pending.svg  |  14 +
 .../images/ProposalStatuses/icon-rejected.svg |  11 +
 .../images/ProposalStatuses/icon-succeed.svg  |   5 +
 apps/frontend/src/constants/gasLimits.ts      |   3 +
 .../frontend/src/locales/en/translations.json | 128 ++-
 apps/frontend/src/router.tsx                  |  14 +
 apps/frontend/src/store/rxjs/shared-state.ts  |  26 +
 .../src/utils/graphql/rsk/generated.tsx       | 404 +++++++++
 .../rsk/operations/getProposal.graphql        |  57 ++
 .../rsk/operations/getProposals.graphql       |  55 ++
 .../graphql/rsk/operations/getVote.graphql    |  16 +
 packages/contracts/src/abis/governor.json     | 777 ++++++++++++++++++
 .../contracts/src/contracts/protocol/rsk.ts   |   8 +
 .../src/contracts/protocol/rskTestnet.ts      |   8 +
 packages/ui/src/1_atoms/Bar/Bar.module.css    |  20 +
 packages/ui/src/1_atoms/Bar/Bar.stories.tsx   |  34 +
 packages/ui/src/1_atoms/Bar/Bar.tsx           |  39 +
 packages/ui/src/1_atoms/index.tsx             |   1 +
 yarn.lock                                     | 749 ++++++++++++++++-
 81 files changed, 4616 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/angry-mails-enjoy.md
 create mode 100644 .changeset/brave-experts-cover.md
 create mode 100644 .changeset/fifty-baboons-fry.md
 create mode 100644 .changeset/fresh-goats-begin.md
 create mode 100644 .changeset/giant-ducks-laugh.md
 create mode 100644 .changeset/happy-carrots-fold.md
 create mode 100644 .changeset/many-fishes-hang.md
 create mode 100644 .changeset/moody-fans-attack.md
 create mode 100644 .changeset/nervous-swans-lick.md
 create mode 100644 .changeset/olive-olives-obey.md
 create mode 100644 .changeset/pink-buckets-rhyme.md
 create mode 100644 .changeset/pink-monkeys-wash.md
 create mode 100644 .changeset/proud-rivers-give.md
 create mode 100644 .changeset/shiny-years-leave.md
 create mode 100644 .changeset/silver-mayflies-sell.md
 create mode 100644 .changeset/small-fishes-work.md
 create mode 100644 .changeset/thin-geckos-fail.md
 create mode 100644 .changeset/two-ligers-relax.md
 create mode 100644 .changeset/yellow-tips-sip.md
 create mode 100644 apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.tsx
 create mode 100644 apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.utils.tsx
 create mode 100644 apps/frontend/src/app/3_organisms/ProposalVotingResults/ProposalVotingResults.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.utils.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalCardsMobile/ProposalCardsMobile.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalStatus/ProposalStatus.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalTitle/ProposalTitle.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalType/ProposalType.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalViewButton/ProposalViewButton.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.utils.tsx
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/hooks/useGetProposals.ts
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/hooks/useIsExecutableProposal.ts
 create mode 100644 apps/frontend/src/app/5_pages/BitocracyPage/hooks/useProposalStatus.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/CastVote/CastVote.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/ExecutableDetails/ExecutableDetails.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/hooks/useHandleProposal.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/ProposalInfo/ProposalInfo.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/components/VoteTimer/VoteTimer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetProposalById.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetUserVote.ts
 create mode 100644 apps/frontend/src/app/5_pages/ProposalPage/hooks/useVote.ts
 create mode 100644 apps/frontend/src/app/5_pages/StakePage/components/NextStepDialog/NextStepDialog.tsx
 create mode 100644 apps/frontend/src/assets/images/ProposalStatuses/icon-active.svg
 create mode 100644 apps/frontend/src/assets/images/ProposalStatuses/icon-executed.svg
 create mode 100644 apps/frontend/src/assets/images/ProposalStatuses/icon-pending.svg
 create mode 100644 apps/frontend/src/assets/images/ProposalStatuses/icon-rejected.svg
 create mode 100644 apps/frontend/src/assets/images/ProposalStatuses/icon-succeed.svg
 create mode 100644 apps/frontend/src/utils/graphql/rsk/operations/getProposal.graphql
 create mode 100644 apps/frontend/src/utils/graphql/rsk/operations/getProposals.graphql
 create mode 100644 apps/frontend/src/utils/graphql/rsk/operations/getVote.graphql
 create mode 100644 packages/contracts/src/abis/governor.json
 create mode 100644 packages/ui/src/1_atoms/Bar/Bar.module.css
 create mode 100644 packages/ui/src/1_atoms/Bar/Bar.stories.tsx
 create mode 100644 packages/ui/src/1_atoms/Bar/Bar.tsx

diff --git a/.changeset/angry-mails-enjoy.md b/.changeset/angry-mails-enjoy.md
new file mode 100644
index 000000000..2e34c5206
--- /dev/null
+++ b/.changeset/angry-mails-enjoy.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3196: add voting tooltips to Voting proposals page
diff --git a/.changeset/brave-experts-cover.md b/.changeset/brave-experts-cover.md
new file mode 100644
index 000000000..9138b9811
--- /dev/null
+++ b/.changeset/brave-experts-cover.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3319: Fix proposal type
diff --git a/.changeset/fifty-baboons-fry.md b/.changeset/fifty-baboons-fry.md
new file mode 100644
index 000000000..a46c02c59
--- /dev/null
+++ b/.changeset/fifty-baboons-fry.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3012: Bitocracy alerts
diff --git a/.changeset/fresh-goats-begin.md b/.changeset/fresh-goats-begin.md
new file mode 100644
index 000000000..14d7d0375
--- /dev/null
+++ b/.changeset/fresh-goats-begin.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3225: Open proposal on row click
diff --git a/.changeset/giant-ducks-laugh.md b/.changeset/giant-ducks-laugh.md
new file mode 100644
index 000000000..ed61f4e54
--- /dev/null
+++ b/.changeset/giant-ducks-laugh.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3195: add voting power section
diff --git a/.changeset/happy-carrots-fold.md b/.changeset/happy-carrots-fold.md
new file mode 100644
index 000000000..9481d044e
--- /dev/null
+++ b/.changeset/happy-carrots-fold.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3334: Fix cast vote mobile
diff --git a/.changeset/many-fishes-hang.md b/.changeset/many-fishes-hang.md
new file mode 100644
index 000000000..e4bcbcdd2
--- /dev/null
+++ b/.changeset/many-fishes-hang.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+fix: Bitocracy proposal issues
diff --git a/.changeset/moody-fans-attack.md b/.changeset/moody-fans-attack.md
new file mode 100644
index 000000000..b8a7a825e
--- /dev/null
+++ b/.changeset/moody-fans-attack.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3327: Fix status labels
diff --git a/.changeset/nervous-swans-lick.md b/.changeset/nervous-swans-lick.md
new file mode 100644
index 000000000..48772e832
--- /dev/null
+++ b/.changeset/nervous-swans-lick.md
@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+Bitocracy page
diff --git a/.changeset/olive-olives-obey.md b/.changeset/olive-olives-obey.md
new file mode 100644
index 000000000..4b0a1d92c
--- /dev/null
+++ b/.changeset/olive-olives-obey.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/contracts": patch
+---
+
+SOV-3239: Support/Reject button in Cast your vote
diff --git a/.changeset/pink-buckets-rhyme.md b/.changeset/pink-buckets-rhyme.md
new file mode 100644
index 000000000..d761c62b8
--- /dev/null
+++ b/.changeset/pink-buckets-rhyme.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/ui": patch
+---
+
+SOV-3010: Individual Proposal page
diff --git a/.changeset/pink-monkeys-wash.md b/.changeset/pink-monkeys-wash.md
new file mode 100644
index 000000000..bb2ac7362
--- /dev/null
+++ b/.changeset/pink-monkeys-wash.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3011: Export CSV
diff --git a/.changeset/proud-rivers-give.md b/.changeset/proud-rivers-give.md
new file mode 100644
index 000000000..9ef61b67d
--- /dev/null
+++ b/.changeset/proud-rivers-give.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-2922: voting proposals page
diff --git a/.changeset/shiny-years-leave.md b/.changeset/shiny-years-leave.md
new file mode 100644
index 000000000..3748c2bbf
--- /dev/null
+++ b/.changeset/shiny-years-leave.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3226: Fix bitocracy alerts button
diff --git a/.changeset/silver-mayflies-sell.md b/.changeset/silver-mayflies-sell.md
new file mode 100644
index 000000000..24a162c6e
--- /dev/null
+++ b/.changeset/silver-mayflies-sell.md
@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+SOV-3008: add bar component with threshold option
diff --git a/.changeset/small-fishes-work.md b/.changeset/small-fishes-work.md
new file mode 100644
index 000000000..911c988f1
--- /dev/null
+++ b/.changeset/small-fishes-work.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3312: Fix small bugs
diff --git a/.changeset/thin-geckos-fail.md b/.changeset/thin-geckos-fail.md
new file mode 100644
index 000000000..583ec7e24
--- /dev/null
+++ b/.changeset/thin-geckos-fail.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3288: Show the current state of voting
diff --git a/.changeset/two-ligers-relax.md b/.changeset/two-ligers-relax.md
new file mode 100644
index 000000000..8b2fa76d3
--- /dev/null
+++ b/.changeset/two-ligers-relax.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3013: Voting - Next Steps modal
diff --git a/.changeset/yellow-tips-sip.md b/.changeset/yellow-tips-sip.md
new file mode 100644
index 000000000..60b8e9da2
--- /dev/null
+++ b/.changeset/yellow-tips-sip.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/contracts": patch
+---
+
+SOV-3009: voting actions
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 1e5fd4b43..c45b90c31 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -45,10 +45,14 @@
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.0.0",
+    "react-markdown": "8.0.7",
     "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1",
+    "react-timer-hook": "3.0.7",
     "reactjs-localstorage": "1.0.1",
+    "remark-gfm": "3.0.1",
     "rxjs": "7.5.6",
+    "sanitize-html": "2.11.0",
     "socket.io-client": "4.5.4",
     "utf8": "^3.0.0"
   },
diff --git a/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx b/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx
index 09f6c4505..ab21a7670 100644
--- a/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx
+++ b/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useCallback, useState } from 'react';
+import React, { FC, PropsWithChildren, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { nanoid } from 'nanoid';
@@ -12,9 +12,9 @@ import {
   WalletIdentity,
 } from '@sovryn/ui';
 
-import { EmailNotificationSettingsDialog } from '../../3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog';
 import { useNotificationContext } from '../../../contexts/NotificationContext';
 import { translations } from '../../../locales/i18n';
+import { sharedState } from '../../../store/rxjs/shared-state';
 
 export type ConnectWalletButtonProps = {
   onConnect: () => void;
@@ -35,7 +35,6 @@ export const ConnectWalletButton: FC<
   className,
   dataAttribute,
 }) => {
-  const [open, setOpen] = useState(false);
   const { addNotification } = useNotificationContext();
 
   const onCopyAddress = useCallback(() => {
@@ -48,6 +47,11 @@ export const ConnectWalletButton: FC<
     });
   }, [addNotification]);
 
+  const handleSettingsClick = useCallback(
+    () => sharedState.actions.openEmailNotificationSettingsDialog(),
+    [],
+  );
+
   if (!address) {
     return (
       <Button
@@ -83,9 +87,9 @@ export const ConnectWalletButton: FC<
                 />
               </Link>
               <MenuItem
-                text={t(translations.connectWalletButton.settings)}
-                onClick={() => setOpen(true)}
-                dataAttribute={`${dataAttribute}-menu-settings`}
+                text={t(translations.connectWalletButton.notifications)}
+                onClick={handleSettingsClick}
+                dataAttribute={`${dataAttribute}-menu-notifications`}
               />
             </Menu>
           }
@@ -94,10 +98,6 @@ export const ConnectWalletButton: FC<
             disconnect: t(translations.connectWalletButton.disconnect),
           }}
         />
-        <EmailNotificationSettingsDialog
-          isOpen={open}
-          onClose={() => setOpen(false)}
-        />
       </>
     );
   }
diff --git a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog.types.ts b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog.types.ts
index cb1b85525..fc3d85cee 100644
--- a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog.types.ts
+++ b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog.types.ts
@@ -24,6 +24,7 @@ export enum NotificationMessageType {
   LoanMarginCall = 'LoanMarginCall',
   LoanLiquidation = 'LoanLiquidation',
   LoanMarginCallUndercollateralized = 'LoanMarginCallUndercollateralized',
+  BitocracyVote = 'BitocracyVote',
 }
 
 export enum AlertGroup {
@@ -31,6 +32,7 @@ export enum AlertGroup {
   Liquidations = 'Liquidations',
   StabilityPool = 'StabilityPool',
   System = 'System',
+  BitocracyVote = 'BitocracyVote',
 }
 
 export const AlertGroupToNotificationsMapping: Record<
@@ -57,6 +59,7 @@ export const AlertGroupToNotificationsMapping: Record<
     NotificationMessageType.ZeroLowTcr,
     NotificationMessageType.ZeroRecovery,
   ],
+  BitocracyVote: [NotificationMessageType.BitocracyVote],
 };
 
 export type Notification = {
@@ -121,4 +124,8 @@ export const defaultSubscriptionsArray: Notification[] = [
     notification: NotificationMessageType.LoanLiquidation,
     isSubscribed: false,
   },
+  {
+    notification: NotificationMessageType.BitocracyVote,
+    isSubscribed: false,
+  },
 ];
diff --git a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/components/Subscriptions.tsx b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/components/Subscriptions.tsx
index 0747182f5..974c9878f 100644
--- a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/components/Subscriptions.tsx
+++ b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/components/Subscriptions.tsx
@@ -32,6 +32,7 @@ export const Subscriptions: FC<SubscriptionsProps> = ({
     liquidationsToggle,
     stabilityPoolToggle,
     systemToggle,
+    bitocracyToggle,
   } = useEmailNotificationSettingsContext();
 
   const {
@@ -39,6 +40,7 @@ export const Subscriptions: FC<SubscriptionsProps> = ({
     liquidationsToggleHandler,
     stabilityPoolToggleHandler,
     systemToggleHandler,
+    bitocracyToggleHandler,
   } = useHandleSubscriptions();
 
   const items: ToggleItem[] = useMemo(
@@ -64,6 +66,13 @@ export const Subscriptions: FC<SubscriptionsProps> = ({
         dataAttributeSuffix: 'stability',
         className: 'mb-7',
       },
+      {
+        checked: bitocracyToggle,
+        onChange: bitocracyToggleHandler,
+        label: t(baseTranslationPath.bitocracyToggle),
+        dataAttributeSuffix: 'bitocracy',
+        className: 'mb-7',
+      },
       {
         checked: systemToggle,
         onChange: systemToggleHandler,
@@ -80,6 +89,8 @@ export const Subscriptions: FC<SubscriptionsProps> = ({
       stabilityPoolToggleHandler,
       systemToggle,
       systemToggleHandler,
+      bitocracyToggle,
+      bitocracyToggleHandler,
     ],
   );
 
diff --git a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/contexts/EmailNotificationSettingsContext.tsx b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/contexts/EmailNotificationSettingsContext.tsx
index 66875bffb..404aa6163 100644
--- a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/contexts/EmailNotificationSettingsContext.tsx
+++ b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/contexts/EmailNotificationSettingsContext.tsx
@@ -26,6 +26,8 @@ type EmailNotificationSettingsContextValue = {
   setStabilityPoolToggle: React.Dispatch<React.SetStateAction<boolean>>;
   systemToggle: boolean;
   setSystemToggle: React.Dispatch<React.SetStateAction<boolean>>;
+  bitocracyToggle: boolean;
+  setBitocracyToggle: React.Dispatch<React.SetStateAction<boolean>>;
   haveSubscriptionsBeenUpdated: boolean;
 };
 
@@ -42,6 +44,8 @@ const defaultContextValue: EmailNotificationSettingsContextValue = {
   setStabilityPoolToggle: noop,
   systemToggle: false,
   setSystemToggle: noop,
+  bitocracyToggle: false,
+  setBitocracyToggle: noop,
   haveSubscriptionsBeenUpdated: false,
 };
 
@@ -69,6 +73,7 @@ export const EmailNotificationSettingsContextProvider: React.FC<
   const [liquidationsToggle, setLiquidationsToggle] = useState(false);
   const [stabilityPoolToggle, setStabilityPoolToggle] = useState(false);
   const [systemToggle, setSystemToggle] = useState(false);
+  const [bitocracyToggle, setBitocracyToggle] = useState(false);
 
   const resetSubscriptions = useCallback(() => {
     setSubscriptions(defaultContextValue.subscriptions);
@@ -117,6 +122,8 @@ export const EmailNotificationSettingsContextProvider: React.FC<
         setStabilityPoolToggle,
         systemToggle,
         setSystemToggle,
+        bitocracyToggle,
+        setBitocracyToggle,
         haveSubscriptionsBeenUpdated,
       }}
     >
diff --git a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/hooks/useHandleSubscriptions.ts b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/hooks/useHandleSubscriptions.ts
index 17491ad99..66c706727 100644
--- a/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/hooks/useHandleSubscriptions.ts
+++ b/apps/frontend/src/app/3_organisms/EmailNotificationSettingsDialog/hooks/useHandleSubscriptions.ts
@@ -20,6 +20,7 @@ export const useHandleSubscriptions = () => {
     setStabilityPoolToggle,
     setSystemToggle,
     setServerSubscriptionsState,
+    setBitocracyToggle,
   } = useEmailNotificationSettingsContext();
 
   const resetSubscriptions = useCallback(() => {
@@ -28,12 +29,14 @@ export const useHandleSubscriptions = () => {
     setLiquidationsToggle(false);
     setStabilityPoolToggle(false);
     setSystemToggle(false);
+    setBitocracyToggle(false);
   }, [
     resetSubscriptionsState,
     setMarginCallsToggle,
     setLiquidationsToggle,
     setStabilityPoolToggle,
     setSystemToggle,
+    setBitocracyToggle,
   ]);
 
   const withDefaultSubscriptions = useCallback(
@@ -75,6 +78,9 @@ export const useHandleSubscriptions = () => {
       setSystemToggle(
         isSubscribedToGroup(AlertGroup.System, parsedSubscriptions),
       );
+      setBitocracyToggle(
+        isSubscribedToGroup(AlertGroup.BitocracyVote, parsedSubscriptions),
+      );
     },
     [
       withDefaultSubscriptions,
@@ -84,6 +90,7 @@ export const useHandleSubscriptions = () => {
       setLiquidationsToggle,
       setStabilityPoolToggle,
       setSystemToggle,
+      setBitocracyToggle,
     ],
   );
 
@@ -145,6 +152,11 @@ export const useHandleSubscriptions = () => {
     setSystemToggle(prevValue => !prevValue);
   }, [updateSubscriptions, setSystemToggle]);
 
+  const bitocracyToggleHandler = useCallback(() => {
+    updateSubscriptions(AlertGroup.BitocracyVote);
+    setBitocracyToggle(prevValue => !prevValue);
+  }, [updateSubscriptions, setBitocracyToggle]);
+
   return {
     resetSubscriptions,
     parseSubscriptionsResponse,
@@ -152,5 +164,6 @@ export const useHandleSubscriptions = () => {
     liquidationsToggleHandler,
     stabilityPoolToggleHandler,
     systemToggleHandler,
+    bitocracyToggleHandler,
   };
 };
diff --git a/apps/frontend/src/app/3_organisms/Header/Header.constants.tsx b/apps/frontend/src/app/3_organisms/Header/Header.constants.tsx
index 89a6d8580..68c1b90cf 100644
--- a/apps/frontend/src/app/3_organisms/Header/Header.constants.tsx
+++ b/apps/frontend/src/app/3_organisms/Header/Header.constants.tsx
@@ -60,4 +60,8 @@ export const menuItemsMapping: MenuItem[] = [
     text: t(translations.header.nav.convert),
     url: '/convert',
   },
+  {
+    text: t(translations.header.nav.bitocracy),
+    url: '/bitocracy',
+  },
 ];
diff --git a/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.tsx b/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.tsx
new file mode 100644
index 000000000..0b38ed21d
--- /dev/null
+++ b/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.tsx
@@ -0,0 +1,53 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { VP } from '../../5_pages/StakePage/StakePage.constants';
+import { useGetPersonalStakingStatistics } from '../../5_pages/StakePage/components/PersonalStakingStatistics/hooks/useGetPersonalStakingStatistics';
+import { useGetStakingStatistics } from '../../5_pages/StakePage/components/StakingStatistics/hooks/useGetStakingStatistics';
+import { useAccount } from '../../../hooks/useAccount';
+import { translations } from '../../../locales/i18n';
+import { decimalic, fromWei } from '../../../utils/math';
+import { LabeledAmount } from './ProposalVotingPower.utils';
+
+export const ProposalVotingPower: FC = () => {
+  const { account } = useAccount();
+  const { votingPower } = useGetPersonalStakingStatistics();
+  const { totalVotingPower } = useGetStakingStatistics();
+
+  const votingPowerShare = useMemo(() => {
+    if (!votingPower || !totalVotingPower) {
+      return 0;
+    }
+    const votingPowerDecimal = decimalic(votingPower.toString());
+    const totalVotingPowerDecimal = decimalic(totalVotingPower.toString());
+    const getVotingPowerShare = votingPowerDecimal
+      .div(totalVotingPowerDecimal)
+      .mul(100);
+    return getVotingPowerShare.toNumber();
+  }, [votingPower, totalVotingPower]);
+
+  return (
+    <div className="bg-gray-90 rounded mb-6 p-6">
+      <Paragraph size={ParagraphSize.base} className="font-medium mb-6">
+        {t(translations.proposalVotingPower.title)}
+      </Paragraph>
+
+      <div className="flex items-center">
+        <LabeledAmount
+          label={t(translations.proposalVotingPower.votingPower)}
+          amount={account ? fromWei(votingPower) : undefined}
+          amountSuffix={VP}
+        />
+        <LabeledAmount
+          label={t(translations.proposalVotingPower.votingPowerShare)}
+          amount={account ? votingPowerShare : undefined}
+          amountSuffix="%"
+          precision={5}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.utils.tsx b/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.utils.tsx
new file mode 100644
index 000000000..2c1281986
--- /dev/null
+++ b/apps/frontend/src/app/3_organisms/ProposalVotingPower/ProposalVotingPower.utils.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../2_molecules/AmountRenderer/AmountRenderer';
+import { TOKEN_RENDER_PRECISION } from '../../../constants/currencies';
+import { translations } from '../../../locales/i18n';
+
+export const LabeledAmount = ({
+  label,
+  amount,
+  amountSuffix = '',
+  precision = TOKEN_RENDER_PRECISION,
+}) => (
+  <div className="basis-full font-medium">
+    <Paragraph
+      size={ParagraphSize.base}
+      className="text-gray-30 lg:mb-3 leading-4 text-xs"
+    >
+      {label}
+    </Paragraph>
+    {amount ? (
+      <AmountRenderer
+        value={amount}
+        suffix={amountSuffix}
+        precision={precision}
+      />
+    ) : (
+      t(translations.common.na)
+    )}
+  </div>
+);
diff --git a/apps/frontend/src/app/3_organisms/ProposalVotingResults/ProposalVotingResults.tsx b/apps/frontend/src/app/3_organisms/ProposalVotingResults/ProposalVotingResults.tsx
new file mode 100644
index 000000000..06e43ca58
--- /dev/null
+++ b/apps/frontend/src/app/3_organisms/ProposalVotingResults/ProposalVotingResults.tsx
@@ -0,0 +1,165 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+import { nanoid } from 'nanoid';
+
+import {
+  Bar,
+  HelperButton,
+  NotificationType,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { ExportCSV } from '../../2_molecules/ExportCSV/ExportCSV';
+import { useNotificationContext } from '../../../contexts/NotificationContext';
+import { useBlockNumber } from '../../../hooks/useBlockNumber';
+import { translations } from '../../../locales/i18n';
+import { Proposal } from '../../../utils/graphql/rsk/generated';
+import { dateFormat } from '../../../utils/helpers';
+import { decimalic, formatValue, fromWei } from '../../../utils/math';
+
+export type ProposalVotingResultsProps = {
+  proposal: Proposal;
+};
+
+export const ProposalVotingResults: FC<ProposalVotingResultsProps> = ({
+  proposal,
+}) => {
+  const { addNotification } = useNotificationContext();
+  const currentBlock = useBlockNumber().value;
+  const { votesFor, votesAgainst, endBlock, emittedBy, quorum } = proposal;
+  const { majorityPercentageVotes, quorumPercentageVotes } = emittedBy;
+
+  const { support, turnout, votes } = useMemo(() => {
+    const votes = Decimal.fromBigNumberString(votesFor).add(
+      Decimal.fromBigNumberString(votesAgainst),
+    );
+
+    const support = votes.isZero()
+      ? 0
+      : Decimal.fromBigNumberString(votesFor).div(votes).mul(100).toNumber();
+
+    const turnout = votes
+      .div(
+        Decimal.fromBigNumberString(quorum).div(
+          decimalic(quorumPercentageVotes).div(100),
+        ),
+      )
+      .mul(100)
+      .toNumber();
+
+    return {
+      votes,
+      support,
+      turnout,
+    };
+  }, [quorum, quorumPercentageVotes, votesAgainst, votesFor]);
+
+  const exportData = useCallback(async () => {
+    if (!proposal.votes || !proposal.votes.length) {
+      addNotification({
+        type: NotificationType.warning,
+        title: t(translations.common.tables.actions.noDataToExport),
+        content: '',
+        dismissible: true,
+        id: nanoid(),
+      });
+      return [];
+    }
+
+    return proposal.votes?.map(vote => ({
+      date: dateFormat(vote.timestamp),
+      address: vote.voter.id,
+      vote: vote.support
+        ? t(translations.proposalPage.support)
+        : t(translations.proposalPage.reject),
+      votingPower: fromWei(vote.votes),
+      TXID: vote.transaction.id,
+    }));
+  }, [addNotification, proposal]);
+
+  return (
+    <div className="w-full bg-gray-90 p-6">
+      <div className="flex flex-row justify-between mb-8">
+        <Paragraph size={ParagraphSize.base} className="font-medium">
+          {t(translations.proposalVotingResults.title)}
+        </Paragraph>
+        {currentBlock < endBlock ? (
+          <Paragraph size={ParagraphSize.small} className="italic">
+            {t(translations.proposalVotingResults.inProgress)}
+          </Paragraph>
+        ) : (
+          <ExportCSV
+            getData={exportData}
+            filename="proposal-voting-results"
+            disabled={!proposal.votes || !proposal.votes.length}
+          />
+        )}
+      </div>
+
+      <div>
+        <div className="flex items-center gap-1 font-semibold text-xs">
+          {t(translations.proposalVotingResults.support.title)}{' '}
+          <HelperButton
+            tooltipClassName="min-w-48"
+            content={
+              <>
+                <Paragraph className="font-bold">
+                  {t(translations.proposalVotingResults.support.required)}
+                </Paragraph>
+                <Paragraph>
+                  {t(translations.proposalVotingResults.support.requiredValue, {
+                    value: formatValue(majorityPercentageVotes, 3),
+                  })}
+                </Paragraph>
+                <Paragraph className="font-bold mt-2">
+                  {t(translations.proposalVotingResults.support.current)}
+                </Paragraph>
+                <Paragraph>
+                  {t(translations.proposalVotingResults.support.currentValue, {
+                    value: formatValue(support, 3),
+                  })}
+                </Paragraph>
+              </>
+            }
+          />
+        </div>
+        <Bar value={support} threshold={majorityPercentageVotes} />
+      </div>
+
+      <div className="mt-4">
+        <div className="flex items-center gap-1 font-semibold text-xs">
+          {t(translations.proposalVotingResults.quorum.title)}{' '}
+          <HelperButton
+            tooltipClassName="min-w-48"
+            content={
+              <>
+                <Paragraph className="font-bold">
+                  {t(translations.proposalVotingResults.quorum.required)}
+                </Paragraph>
+                <Paragraph>
+                  {t(translations.proposalVotingResults.quorum.requiredValue, {
+                    value: formatValue(Decimal.fromBigNumberString(quorum), 4),
+                    percent: formatValue(quorumPercentageVotes, 3),
+                  })}
+                </Paragraph>
+                <Paragraph className="font-bold mt-2">
+                  {t(translations.proposalVotingResults.quorum.current)}
+                </Paragraph>
+                <Paragraph>
+                  {t(translations.proposalVotingResults.quorum.currentValue, {
+                    value: formatValue(votes, 4),
+                    percent: formatValue(turnout, 3),
+                  })}
+                </Paragraph>
+              </>
+            }
+          />
+        </div>
+        <Bar value={turnout} threshold={quorumPercentageVotes} />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/3_organisms/SharedStateProvider/SharedStateProvider.tsx b/apps/frontend/src/app/3_organisms/SharedStateProvider/SharedStateProvider.tsx
index b59d13c86..21293a25d 100644
--- a/apps/frontend/src/app/3_organisms/SharedStateProvider/SharedStateProvider.tsx
+++ b/apps/frontend/src/app/3_organisms/SharedStateProvider/SharedStateProvider.tsx
@@ -4,7 +4,9 @@ import { useAccount } from '../../../hooks/useAccount';
 import {
   sharedState,
   FastBtcDialogState,
+  EmailNotificationSettingsDialogState,
 } from '../../../store/rxjs/shared-state';
+import { EmailNotificationSettingsDialog } from '../EmailNotificationSettingsDialog/EmailNotificationSettingsDialog';
 import { FastBtcDialog } from '../FastBtcDialog/FastBtcDialog';
 
 export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
@@ -16,6 +18,11 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
     sharedState.get().fastBtcDialog,
   );
 
+  const [emailNotificationSettingsDialog, setEmailNotificationSettingsDialog] =
+    useState<EmailNotificationSettingsDialogState>(
+      sharedState.get().emailNotificationSettingsDialog,
+    );
+
   useEffect(() => {
     const fastBtcDialogSubscription = sharedState
       .select('fastBtcDialog')
@@ -26,11 +33,26 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const emailNotificationSettingsDialogSubscription = sharedState
+      .select('emailNotificationSettingsDialog')
+      .subscribe(setEmailNotificationSettingsDialog);
+
+    return () => {
+      emailNotificationSettingsDialogSubscription.unsubscribe();
+    };
+  }, []);
+
   const handleFastBtcDialogClose = useCallback(
     () => sharedState.actions.closeFastBtcDialog(),
     [],
   );
 
+  const handleEmailNotificationSettingsDialogClose = useCallback(
+    () => sharedState.actions.closeEmailNotificationSettingsDialog(),
+    [],
+  );
+
   // Close the dialog if there is no wallet connected
   useEffect(() => {
     if (fastBtcDialog.isOpen && !account) {
@@ -47,6 +69,11 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
         shouldHideSend={fastBtcDialog.shouldHideSend}
         onClose={handleFastBtcDialogClose}
       />
+
+      <EmailNotificationSettingsDialog
+        isOpen={emailNotificationSettingsDialog.isOpen}
+        onClose={handleEmailNotificationSettingsDialogClose}
+      />
     </>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.constants.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.constants.tsx
new file mode 100644
index 000000000..c3d871eaa
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.constants.tsx
@@ -0,0 +1 @@
+export const BLOCK_TIME_IN_SECONDS = 30;
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx
new file mode 100644
index 000000000..2d192e107
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx
@@ -0,0 +1,82 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+
+import {
+  Button,
+  ButtonStyle,
+  Heading,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
+
+import { useAccount } from '../../../hooks/useAccount';
+import { translations } from '../../../locales/i18n';
+import { sharedState } from '../../../store/rxjs/shared-state';
+import { useGetPersonalStakingStatistics } from '../StakePage/components/PersonalStakingStatistics/hooks/useGetPersonalStakingStatistics';
+import { Proposals } from './components/Proposals/Proposals';
+import { useGetProposals } from './hooks/useGetProposals';
+
+// TODO: This is just a temporary solution until we merge new proposal PR.
+const isNewProposalEnabled = false;
+
+const pageTranslations = translations.bitocracyPage;
+
+const BitocracyPage: FC = () => {
+  const { account } = useAccount();
+  const { votingPower } = useGetPersonalStakingStatistics();
+  const { loading, data: proposals } = useGetProposals();
+
+  const isNewProposalButtonVisible = useMemo(
+    () =>
+      votingPower && isNewProposalEnabled ? Number(votingPower) > 0 : false,
+    [votingPower],
+  );
+
+  const handleAlertsClick = useCallback(
+    () => sharedState.actions.openEmailNotificationSettingsDialog(),
+    [],
+  );
+
+  return (
+    <>
+      <Helmet>
+        <title>{t(pageTranslations.meta.title)}</title>
+      </Helmet>
+      <div className="w-full flex flex-col items-center text-gray-10 mt-6 sm:mt-24 max-w-6xl">
+        <Heading className="text-base sm:text-2xl font-medium">
+          {t(pageTranslations.title)}
+        </Heading>
+        <Paragraph
+          size={ParagraphSize.base}
+          className="mt-2.5 sm:mt-4 sm:text-base font-medium mb-9"
+        >
+          {t(pageTranslations.subtitle)}
+        </Paragraph>
+
+        {account && (
+          <div className="flex w-full items-center sm:justify-end justify-center">
+            <Button
+              style={ButtonStyle.ghost}
+              text={t(pageTranslations.actions.bitocracyAlerts)}
+              className="mb-3 sm:mb-0"
+              onClick={handleAlertsClick}
+            />
+            {isNewProposalButtonVisible && (
+              <div className="bg-gray-90 sm:bg-transparent p-4 pb-8 sm:p-0 border-t sm:border-none border-gray-60 flex items-center justify-center sm:ml-3 sm:relative fixed bottom-0 left-0 right-0 z-10 sm:z-0">
+                <Button
+                  text={t(pageTranslations.actions.newProposal)}
+                  className="w-full sm:w-auto"
+                />
+              </div>
+            )}
+          </div>
+        )}
+        <Proposals proposals={proposals} loading={loading} />
+      </div>
+    </>
+  );
+};
+
+export default BitocracyPage;
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.types.ts b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.types.ts
new file mode 100644
index 000000000..76369d085
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.types.ts
@@ -0,0 +1,16 @@
+import { Proposal } from '../../../utils/graphql/rsk/generated';
+
+export enum ProposalState {
+  Pending,
+  Active,
+  Canceled,
+  Defeated,
+  Succeeded,
+  Queued,
+  Expired,
+  Executed,
+}
+
+export type ProposalProps = {
+  proposal: Proposal;
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.utils.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.utils.tsx
new file mode 100644
index 000000000..283077c49
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.utils.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { Proposal } from '../../../utils/graphql/rsk/generated';
+import { dateFormat } from '../../../utils/helpers';
+import { decimalic } from '../../../utils/math';
+import { BLOCK_TIME_IN_SECONDS } from './BitocracyPage.constants';
+
+export const renderProposalEndDate = (item: Proposal) => {
+  const secondsBetweenBlocks =
+    (item.endBlock - item.startBlock) * BLOCK_TIME_IN_SECONDS;
+  const endTime = item.timestamp + secondsBetweenBlocks;
+
+  return dateFormat(endTime);
+};
+
+export const generateRowTitle = (item: Proposal) => (
+  <Paragraph
+    size={ParagraphSize.small}
+    className="font-medium truncate max-w-full m-0 pr-4"
+  >
+    {item.description}
+  </Paragraph>
+);
+
+export const prettifyId = (item: string) => {
+  const id = item.split('-');
+  return id[1];
+};
+
+export const shouldProposalBeDefeated = (proposal: Proposal) => {
+  const totalVotes = Decimal.fromBigNumberString(proposal.votesFor).add(
+    Decimal.fromBigNumberString(proposal.votesAgainst),
+  );
+
+  const supportPercentage = Decimal.fromBigNumberString(proposal.votesFor)
+    .div(totalVotes)
+    .mul(100);
+
+  return (
+    supportPercentage.lte(proposal.emittedBy.majorityPercentageVotes) ||
+    decimalic(totalVotes).lt(Decimal.fromBigNumberString(proposal.quorum))
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalCardsMobile/ProposalCardsMobile.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalCardsMobile/ProposalCardsMobile.tsx
new file mode 100644
index 000000000..2d184066c
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalCardsMobile/ProposalCardsMobile.tsx
@@ -0,0 +1,80 @@
+import React, { FC, useCallback } from 'react';
+
+import { t } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { Icon, IconNames, Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { renderProposalEndDate } from '../../BitocracyPage.utils';
+import { ProposalStatus } from '../ProposalStatus/ProposalStatus';
+import { ProposalType } from '../ProposalType/ProposalType';
+
+type ProposalCardsMobileProps = {
+  proposals: Proposal[];
+  isLoading: boolean;
+};
+
+export const ProposalCardsMobile: FC<ProposalCardsMobileProps> = ({
+  proposals,
+  isLoading,
+}) => {
+  const navigate = useNavigate();
+
+  const handleCardClick = useCallback(
+    (proposal: Proposal) => navigate(`/bitocracy/${proposal.id}`),
+    [navigate],
+  );
+
+  const renderProposals = () => {
+    if (!proposals || proposals.length === 0) {
+      return (
+        <>
+          {isLoading ? (
+            Array.from(Array(4).keys()).map(i => (
+              <div key={i} className="relative text-center my-1">
+                <span className="h-10 block bg-gray-50 rounded animate-pulse" />
+              </div>
+            ))
+          ) : (
+            <div className="text-center italic my-1">
+              {t(translations.common.tables.noData)}
+            </div>
+          )}
+        </>
+      );
+    }
+
+    return proposals.map(proposal => (
+      <div
+        key={proposal.id}
+        className="rounded p-4 bg-gray-70 mb-2 relative"
+        onClick={() => handleCardClick(proposal)}
+      >
+        <Icon
+          icon={IconNames.ARROW_UP}
+          size={8}
+          className="absolute right-5 top-5 rotate-90"
+        />
+        <ProposalStatus proposal={proposal} />
+        <Paragraph
+          children={proposal.description}
+          className="truncate m-0 font-medium text-base mt-4 mb-2"
+        />
+        <div className="text-gray-30 text-xs flex items-center justify-between mb-1">
+          <span>{t(translations.bitocracyPage.table.type)}</span>
+          <span>
+            <ProposalType proposal={proposal} />
+          </span>
+        </div>
+        <div className="text-gray-30 text-xs flex items-center justify-between">
+          <span>{t(translations.bitocracyPage.table.endDate)}</span>
+          <span>{renderProposalEndDate(proposal)}</span>
+        </div>
+      </div>
+    ));
+  };
+
+  return <>{renderProposals()}</>;
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalStatus/ProposalStatus.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalStatus/ProposalStatus.tsx
new file mode 100644
index 000000000..a698973a7
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalStatus/ProposalStatus.tsx
@@ -0,0 +1,57 @@
+import React, { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { ProposalProps, ProposalState } from '../../BitocracyPage.types';
+import { shouldProposalBeDefeated } from '../../BitocracyPage.utils';
+import { useProposalStatus } from '../../hooks/useProposalStatus';
+import { getStatusIcon } from '../Proposals/Proposals.utils';
+
+type ProposalStatusProps = ProposalProps & {
+  className?: string;
+  isProposalDetail?: boolean;
+};
+export const ProposalStatus: FC<ProposalStatusProps> = ({
+  proposal,
+  className,
+  isProposalDetail = false,
+}) => {
+  const status = useProposalStatus(proposal);
+
+  const activeProposalDetailMessage = useMemo(() => {
+    if (!isProposalDetail || status !== ProposalState.Active) {
+      return null;
+    }
+
+    return shouldProposalBeDefeated(proposal)
+      ? t(translations.bitocracyPage.proposalStatusDetail.willBeDefeated)
+      : t(translations.bitocracyPage.proposalStatusDetail.willSucceed);
+  }, [isProposalDetail, proposal, status]);
+
+  return (
+    <div className={classNames('flex items-start', className)}>
+      {getStatusIcon(status)}
+      <Paragraph
+        className={`${
+          status !== ProposalState.Active && 'text-gray-40'
+        } font-semibold`}
+        children={
+          <>
+            <div>
+              {t(
+                translations.bitocracyPage.proposalStatus[
+                  ProposalState[status].toLowerCase()
+                ],
+              )}
+            </div>
+            <div>{activeProposalDetailMessage}</div>
+          </>
+        }
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalTitle/ProposalTitle.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalTitle/ProposalTitle.tsx
new file mode 100644
index 000000000..63520a0eb
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalTitle/ProposalTitle.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useMemo } from 'react';
+
+import { Tooltip, TooltipTrigger } from '@sovryn/ui';
+
+import { ProposalProps } from '../../BitocracyPage.types';
+
+const titleCharacterLimit = 50;
+
+export const ProposalTitle: FC<ProposalProps> = ({ proposal }) => {
+  const title = useMemo(() => {
+    if (proposal?.description.length <= titleCharacterLimit) {
+      return proposal?.description;
+    }
+
+    return `${proposal?.description.slice(0, titleCharacterLimit)}...`;
+  }, [proposal]);
+
+  return (
+    <Tooltip
+      trigger={TooltipTrigger.hover}
+      className="sm:text-base cursor-pointer"
+      tooltipClassName="break-words"
+      content={<>{proposal.description}</>}
+      children={
+        <div>
+          <p className="max-w-[20rem] m-0">{title}</p>
+        </div>
+      }
+    />
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalType/ProposalType.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalType/ProposalType.tsx
new file mode 100644
index 000000000..18ab5f77e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalType/ProposalType.tsx
@@ -0,0 +1,39 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { useGetProtocolContract } from '../../../../../hooks/useGetContract';
+import { translations } from '../../../../../locales/i18n';
+import { areAddressesEqual } from '../../../../../utils/helpers';
+import { ProposalProps } from '../../BitocracyPage.types';
+import { useIsExecutableProposal } from '../../hooks/useIsExecutableProposal';
+
+const baseTranslations = translations.bitocracyPage.proposalType;
+
+export const ProposalType: FC<ProposalProps> = ({ proposal }) => {
+  const adminAddress = useGetProtocolContract('governorAdmin')?.address ?? '';
+  const ownerAddress = useGetProtocolContract('governorOwner')?.address ?? '';
+  const isExecutableProposal = useIsExecutableProposal(proposal);
+
+  const type = useMemo(() => {
+    let result = '';
+
+    if (areAddressesEqual(proposal.emittedBy.id, adminAddress)) {
+      result += t(baseTranslations.admin) + ' ';
+    } else if (areAddressesEqual(proposal.emittedBy.id, ownerAddress)) {
+      result += t(baseTranslations.owner) + ' ';
+    } else {
+      result += t(baseTranslations.other) + ' ';
+    }
+
+    if (isExecutableProposal) {
+      result += t(baseTranslations.executable);
+    } else {
+      result += t(baseTranslations.nonExecutable);
+    }
+
+    return result;
+  }, [proposal.emittedBy.id, adminAddress, ownerAddress, isExecutableProposal]);
+
+  return <>{type}</>;
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalViewButton/ProposalViewButton.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalViewButton/ProposalViewButton.tsx
new file mode 100644
index 000000000..0e9ad988e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/ProposalViewButton/ProposalViewButton.tsx
@@ -0,0 +1,27 @@
+import React, { FC, useCallback } from 'react';
+
+import { t } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { ProposalProps } from '../../BitocracyPage.types';
+
+export const ProposalViewButton: FC<ProposalProps> = ({ proposal }) => {
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(
+    () => navigate(`/bitocracy/${proposal.id}`),
+    [navigate, proposal.id],
+  );
+
+  return (
+    <Button
+      text={t(translations.bitocracyPage.actions.view)}
+      style={ButtonStyle.secondary}
+      onClick={handleClick}
+      dataAttribute="bitocracy-proposal-view-button"
+    />
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.constants.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.constants.tsx
new file mode 100644
index 000000000..f9196d9d3
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.constants.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import iconActive from '../../../../../assets/images/ProposalStatuses/icon-active.svg';
+import iconExecuted from '../../../../../assets/images/ProposalStatuses/icon-executed.svg';
+import iconPending from '../../../../../assets/images/ProposalStatuses/icon-pending.svg';
+import iconRejected from '../../../../../assets/images/ProposalStatuses/icon-rejected.svg';
+import iconSucceed from '../../../../../assets/images/ProposalStatuses/icon-succeed.svg';
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { ProposalState } from '../../BitocracyPage.types';
+import { renderProposalEndDate } from '../../BitocracyPage.utils';
+import { ProposalStatus } from '../ProposalStatus/ProposalStatus';
+import { ProposalTitle } from '../ProposalTitle/ProposalTitle';
+import { ProposalType } from '../ProposalType/ProposalType';
+import { ProposalViewButton } from '../ProposalViewButton/ProposalViewButton';
+
+export const columnsConfig = [
+  {
+    id: 'status',
+    title: t(translations.bitocracyPage.table.status),
+    cellRenderer: (proposal: Proposal) => (
+      <ProposalStatus proposal={proposal} />
+    ),
+  },
+  {
+    id: 'title',
+    title: t(translations.bitocracyPage.table.title),
+    cellRenderer: (proposal: Proposal) => <ProposalTitle proposal={proposal} />,
+  },
+  {
+    id: 'type',
+    title: t(translations.bitocracyPage.table.type),
+    cellRenderer: (proposal: Proposal) => (
+      <div className="font-semibold">
+        <ProposalType proposal={proposal} />
+      </div>
+    ),
+  },
+  {
+    id: 'endDate',
+    title: t(translations.bitocracyPage.table.endDate),
+    cellRenderer: renderProposalEndDate,
+  },
+  {
+    id: '',
+    title: '',
+    cellRenderer: (proposal: Proposal) => (
+      <div className="flex justify-end items-center">
+        <ProposalViewButton proposal={proposal} />
+      </div>
+    ),
+  },
+];
+
+export const StatusIcons: Record<ProposalState, string> = {
+  [ProposalState.Canceled]: iconRejected,
+  [ProposalState.Pending]: iconPending,
+  [ProposalState.Active]: iconActive,
+  [ProposalState.Defeated]: iconRejected,
+  [ProposalState.Succeeded]: iconSucceed,
+  [ProposalState.Executed]: iconExecuted,
+  [ProposalState.Expired]: iconRejected,
+  [ProposalState.Queued]: iconPending,
+};
+
+export const GRACE_PERIOD_IN_SECONDS = 1209600; // 14 days
+
+export const SIGNATURE_SYMBOL = 'symbol()';
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.tsx
new file mode 100644
index 000000000..4b3f25487
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.tsx
@@ -0,0 +1,103 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { Paragraph, Table } from '@sovryn/ui';
+
+import { useBlockNumber } from '../../../../../hooks/useBlockNumber';
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { generateRowTitle } from '../../BitocracyPage.utils';
+import { ProposalCardsMobile } from '../ProposalCardsMobile/ProposalCardsMobile';
+import { columnsConfig } from './Proposals.constants';
+
+type ProposalsProps = {
+  proposals: Proposal[];
+  loading: boolean;
+};
+
+export const Proposals: FC<ProposalsProps> = ({ proposals, loading }) => {
+  const { value: blockNumber } = useBlockNumber();
+  const navigate = useNavigate();
+
+  const activeProposals = useMemo(
+    () => proposals.filter(proposal => blockNumber <= proposal.endBlock),
+    [proposals, blockNumber],
+  );
+
+  const pastProposals = useMemo(
+    () => proposals.filter(proposal => blockNumber > proposal.endBlock),
+    [proposals, blockNumber],
+  );
+
+  const isActive = useMemo(() => activeProposals.length > 0, [activeProposals]);
+
+  const handleRowClick = useCallback(
+    (proposal: Proposal) => navigate(`/bitocracy/${proposal.id}`),
+    [navigate],
+  );
+
+  return (
+    <>
+      {isActive && (
+        <div className="md:mt-12 mt-4 w-full sm:p-6 sm:border sm:border-gray-50 rounded sm:bg-gray-90 mb-8">
+          <Paragraph className="text-base font-medium mb-3 md:mb-6">
+            {t(translations.bitocracyPage.liveProposals)}
+          </Paragraph>
+
+          <div className="bg-gray-80 p-4 rounded hidden lg:block">
+            <Table
+              columns={columnsConfig}
+              rows={activeProposals}
+              rowTitle={generateRowTitle}
+              isLoading={loading}
+              className="text-gray-10 lg:px-6 lg:py-4 text-xs"
+              noData={
+                <span className="italic">
+                  {t(translations.common.tables.noData)}
+                </span>
+              }
+              dataAttribute="bitocracy-live-proposals-table"
+              onRowClick={handleRowClick}
+            />
+          </div>
+
+          <div className="block lg:hidden">
+            <ProposalCardsMobile
+              isLoading={loading}
+              proposals={activeProposals}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="sm:mt-12 w-full sm:p-6 sm:border sm:border-gray-50 rounded sm:bg-gray-90 mb-8">
+        <Paragraph className="text-base font-medium mb-3 md:mb-6">
+          {t(translations.bitocracyPage.pastProposals)}
+        </Paragraph>
+
+        <div className="bg-gray-80 p-4 rounded hidden lg:block">
+          <Table
+            columns={columnsConfig}
+            rows={pastProposals}
+            rowTitle={generateRowTitle}
+            isLoading={loading}
+            className="text-gray-10 lg:px-6 lg:py-4 text-xs"
+            noData={
+              <span className="italic">
+                {t(translations.common.tables.noData)}
+              </span>
+            }
+            dataAttribute="bitocracy-past-proposals-table"
+            onRowClick={handleRowClick}
+          />
+        </div>
+
+        <div className="block lg:hidden">
+          <ProposalCardsMobile isLoading={loading} proposals={pastProposals} />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.utils.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.utils.tsx
new file mode 100644
index 000000000..67b4bb7f2
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/components/Proposals/Proposals.utils.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { ProposalState } from '../../BitocracyPage.types';
+import { StatusIcons } from './Proposals.constants';
+
+export const getStatusIcon = (status: ProposalState) => (
+  <img
+    src={StatusIcons[status]}
+    alt="proposal-status-icon"
+    className={classNames(
+      'mr-1',
+      status !== ProposalState.Active && 'opacity-70',
+    )}
+  />
+);
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useGetProposals.ts b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useGetProposals.ts
new file mode 100644
index 000000000..e6115d078
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useGetProposals.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { rskClient } from '../../../../utils/clients';
+import {
+  Proposal,
+  useGetProposalsQuery,
+} from '../../../../utils/graphql/rsk/generated';
+
+export const useGetProposals = () => {
+  const { loading, data } = useGetProposalsQuery({
+    client: rskClient,
+  });
+
+  const list = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    return data.proposals;
+  }, [data]);
+
+  return { loading, data: list as Proposal[] };
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useIsExecutableProposal.ts b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useIsExecutableProposal.ts
new file mode 100644
index 000000000..bc5595c22
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useIsExecutableProposal.ts
@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+import { SupportedTokens } from '@sovryn/contracts';
+
+import { useGetTokenContract } from '../../../../hooks/useGetContract';
+import { Proposal } from '../../../../utils/graphql/rsk/generated';
+import { SIGNATURE_SYMBOL } from '../components/Proposals/Proposals.constants';
+
+export const useIsExecutableProposal = (proposal: Proposal) => {
+  const sovContract = useGetTokenContract(SupportedTokens.sov);
+
+  const isExecutableProposal = useMemo(() => {
+    if (
+      proposal.targets.length === 1 &&
+      proposal.targets[0] === sovContract?.address &&
+      proposal.signatures[0] === SIGNATURE_SYMBOL
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }, [proposal.signatures, proposal.targets, sovContract?.address]);
+
+  return isExecutableProposal;
+};
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useProposalStatus.ts b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useProposalStatus.ts
new file mode 100644
index 000000000..0d9af2a96
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BitocracyPage/hooks/useProposalStatus.ts
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { MS } from '../../../../constants/general';
+import { useBlockNumber } from '../../../../hooks/useBlockNumber';
+import { Proposal } from '../../../../utils/graphql/rsk/generated';
+import { ProposalState } from '../BitocracyPage.types';
+import { shouldProposalBeDefeated } from '../BitocracyPage.utils';
+import { GRACE_PERIOD_IN_SECONDS } from '../components/Proposals/Proposals.constants';
+
+export const useProposalStatus = (proposal?: Proposal) => {
+  const { value: blockNumber } = useBlockNumber();
+  const currentTimeStamp = useMemo(() => Math.ceil(Date.now() / MS), []);
+
+  return useMemo(() => {
+    if (!proposal) {
+      return ProposalState.Pending;
+    }
+
+    let status: ProposalState;
+
+    if (proposal.canceled) {
+      status = ProposalState.Canceled;
+    } else if (blockNumber <= proposal.endBlock) {
+      status = ProposalState.Active;
+    } else if (blockNumber <= proposal.startBlock) {
+      status = ProposalState.Pending;
+    } else if (shouldProposalBeDefeated(proposal)) {
+      status = ProposalState.Defeated;
+    } else if (proposal.eta === 0) {
+      status = ProposalState.Succeeded;
+    } else if (proposal.executed) {
+      status = ProposalState.Executed;
+    } else if (
+      proposal.eta &&
+      currentTimeStamp >= proposal.eta + GRACE_PERIOD_IN_SECONDS
+    ) {
+      status = ProposalState.Expired;
+    } else {
+      status = ProposalState.Queued;
+    }
+
+    return status;
+  }, [blockNumber, currentTimeStamp, proposal]);
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.tsx b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.tsx
new file mode 100644
index 000000000..961e34e41
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.tsx
@@ -0,0 +1,164 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+import { useParams } from 'react-router-dom';
+
+import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { LoaderWithLogo } from '../../1_atoms/LoaderWithLogo/LoaderWithLogo';
+import { TxIdWithNotification } from '../../2_molecules/TxIdWithNotification/TransactionIdWithNotification';
+import { ProposalVotingPower } from '../../3_organisms/ProposalVotingPower/ProposalVotingPower';
+import { ProposalVotingResults } from '../../3_organisms/ProposalVotingResults/ProposalVotingResults';
+import { useGetProtocolContract } from '../../../hooks/useGetContract';
+import { translations } from '../../../locales/i18n';
+import { areAddressesEqual } from '../../../utils/helpers';
+import { ProposalState } from '../BitocracyPage/BitocracyPage.types';
+import { ProposalStatus } from '../BitocracyPage/components/ProposalStatus/ProposalStatus';
+import { useProposalStatus } from '../BitocracyPage/hooks/useProposalStatus';
+import { parseProposalInfo } from './ProposalPage.utils';
+import { CastVote } from './components/CastVote/CastVote';
+import { ExecutableDetails } from './components/ExecutableDetails/ExecutableDetails';
+import { ProposalAction } from './components/ProposalAction/ProposalAction';
+import { ProposalInfo } from './components/ProposalInfo/ProposalInfo';
+import { VoteTimer } from './components/VoteTimer/VoteTimer';
+import { useGetProposalById } from './hooks/useGetProposalById';
+
+const pageTranslations = translations.proposalPage;
+
+const ProposalPage: FC = () => {
+  let { id } = useParams();
+
+  const adminAddress = useGetProtocolContract('governorAdmin')?.address ?? '';
+  const ownerAddress = useGetProtocolContract('governorOwner')?.address ?? '';
+
+  const { proposal } = useGetProposalById(id || '');
+
+  const status = useProposalStatus(proposal);
+
+  const isVotingPowerVisible = useMemo(
+    () => status === ProposalState.Active,
+    [status],
+  );
+
+  const proposalInfo = useMemo(() => {
+    return parseProposalInfo(proposal);
+  }, [proposal]);
+
+  const proposerType = useMemo(() => {
+    if (!proposal) {
+      return;
+    }
+
+    if (areAddressesEqual(proposal.emittedBy.id, adminAddress)) {
+      return t(translations.bitocracyPage.proposalType.admin);
+    } else if (areAddressesEqual(proposal.emittedBy.id, ownerAddress)) {
+      return t(translations.bitocracyPage.proposalType.owner);
+    }
+  }, [adminAddress, ownerAddress, proposal]);
+
+  if (!proposal) {
+    return <LoaderWithLogo />;
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{t(pageTranslations.meta.title)}</title>
+      </Helmet>
+      <div className="w-full flex flex-col lg:flex-row lg:gap-5 xl:gap-20 text-left text-gray-10 mt-6 mb-5 sm:mt-16 max-w-7xl">
+        <div className="w-full lg:w-2/3 flex flex-col gap-6">
+          <div className="lg:px-6 lg:pb-6">
+            <Heading className="text-base sm:text-2xl font-medium break-all">
+              {proposalInfo.title}
+            </Heading>
+            <div className="mt-2.5 sm:mt-3 font-medium text-gray-30 break-all">
+              {proposalInfo.summary}
+            </div>
+            <div className="mt-2.5 sm:mt-6 text-xs font-medium text-gray-30 flex justify-between lg:justify-start">
+              <span className="inline-block w-20">
+                {t(pageTranslations.proposedBy)}
+              </span>
+
+              {proposal.proposer && (
+                <TxIdWithNotification
+                  href=""
+                  value={proposal.proposer}
+                  dataAttribute="proposal-proposer-address-id"
+                />
+              )}
+            </div>
+            <Paragraph
+              size={ParagraphSize.base}
+              className="mt-1 text-xs font-medium text-gray-30 flex justify-between lg:justify-start"
+            >
+              <span className="inline-block w-20">
+                {t(pageTranslations.proposalID)}
+              </span>
+              <span className="text-gray-10">
+                {proposerType ? `${proposerType}-` : ''}
+                {proposal.proposalId}
+              </span>
+            </Paragraph>
+
+            {proposal && (
+              <div className="lg:hidden mt-6">
+                <div className="flex flex-row items-start justify-between mb-2">
+                  <Paragraph
+                    size={ParagraphSize.small}
+                    className="font-xs text-gray-30"
+                  >
+                    {t(pageTranslations.status)}
+                  </Paragraph>
+
+                  <div className="flex flex-col items-end">
+                    <ProposalStatus proposal={proposal} isProposalDetail />
+                    <ProposalAction proposal={proposal} className="mt-1" />
+                  </div>
+                </div>
+
+                <VoteTimer
+                  className="flex flex-row justify-between"
+                  proposal={proposal}
+                />
+              </div>
+            )}
+          </div>
+
+          <CastVote proposal={proposal} />
+
+          <div className="lg:hidden">
+            {isVotingPowerVisible && <ProposalVotingPower />}
+            <ProposalVotingResults proposal={proposal} />
+          </div>
+          <ProposalInfo
+            link={proposalInfo.link}
+            description={proposalInfo.description}
+          />
+          <ExecutableDetails proposal={proposal} />
+        </div>
+        <div className="w-1/3 hidden lg:block min-w-[18rem]">
+          <div className="mb-20 flex gap-10">
+            <div>
+              <Paragraph
+                size={ParagraphSize.small}
+                className="mb-3 font-xs text-gray-30"
+              >
+                {t(pageTranslations.status)}
+              </Paragraph>
+
+              <ProposalStatus proposal={proposal} isProposalDetail />
+              <ProposalAction proposal={proposal} className="ml-4 pl-0.5" />
+            </div>
+
+            <VoteTimer proposal={proposal} />
+          </div>
+          {isVotingPowerVisible && <ProposalVotingPower />}
+          <ProposalVotingResults proposal={proposal} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProposalPage;
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.types.ts b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.types.ts
new file mode 100644
index 000000000..b973bc8b1
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.types.ts
@@ -0,0 +1,4 @@
+export enum VoteType {
+  Support = 'Support',
+  Reject = 'Reject',
+}
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.utils.ts b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.utils.ts
new file mode 100644
index 000000000..a0da9e182
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/ProposalPage.utils.ts
@@ -0,0 +1,49 @@
+import sanitizeHtml from 'sanitize-html';
+
+import { Proposal } from '../../../utils/graphql/rsk/generated';
+import { BLOCK_TIME_IN_SECONDS } from '../BitocracyPage/BitocracyPage.constants';
+
+export function getSecondsBetweenBlocks(
+  startBlock: number,
+  endBlock: number,
+): number {
+  return (Number(endBlock) - Number(startBlock)) * BLOCK_TIME_IN_SECONDS;
+}
+
+export function parseProposalInfo(proposal: Proposal | undefined) {
+  if (proposal?.description.includes('\n---\n')) {
+    const [title, link, summary, ...rest] = (proposal?.description || '').split(
+      '\n',
+    );
+
+    const description = sanitizeHtml(rest.join('\n').replace('---\n', ''));
+
+    return {
+      title: title || '',
+      link: link || '',
+      summary: summary || '',
+      description: sanitizeHtml(description || ''),
+    };
+  } else if (proposal?.description.startsWith('SIP')) {
+    const [title, ...description] = (proposal?.description || '').split(',');
+
+    return {
+      title: title || '',
+      link: '',
+      summary: '',
+      description: sanitizeHtml(description.join()),
+    };
+  } else {
+    let title = proposal?.description.slice(0, 50);
+    if (proposal && proposal?.description.length > 50) {
+      title += '...';
+    }
+
+    return {
+      title: title || '',
+      link: '',
+      summary: '',
+      description: sanitizeHtml(proposal?.description || ''),
+    };
+  }
+}
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/CastVote/CastVote.tsx b/apps/frontend/src/app/5_pages/ProposalPage/components/CastVote/CastVote.tsx
new file mode 100644
index 000000000..615d96cc1
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/CastVote/CastVote.tsx
@@ -0,0 +1,235 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+import { Trans } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import {
+  Button,
+  ButtonSize,
+  ButtonStyle,
+  Heading,
+  Icon,
+  IconNames,
+  Paragraph,
+  ParagraphSize,
+  TooltipTrigger,
+  Tooltip,
+} from '@sovryn/ui';
+
+import { useAccount } from '../../../../../hooks/useAccount';
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { ProposalState } from '../../../BitocracyPage/BitocracyPage.types';
+import { useProposalStatus } from '../../../BitocracyPage/hooks/useProposalStatus';
+import { useGetPersonalStakingStatistics } from '../../../StakePage/components/PersonalStakingStatistics/hooks/useGetPersonalStakingStatistics';
+import { VoteType } from '../../ProposalPage.types';
+import { useGetUserVote } from '../../hooks/useGetUserVote';
+import { useVote } from '../../hooks/useVote';
+
+const pageTranslations = translations.proposalPage;
+
+type CastVoteProps = {
+  className?: string;
+  proposal: Proposal;
+};
+
+export const CastVote: FC<CastVoteProps> = ({ proposal, className }) => {
+  const { votingPower } = useGetPersonalStakingStatistics();
+  const { account } = useAccount();
+  const status = useProposalStatus(proposal);
+  const { vote: hasUserVoted, loading, refetch } = useGetUserVote(proposal.id);
+
+  const { submit } = useVote(proposal, refetch);
+
+  const hasVotingPower = useMemo(
+    () => (votingPower ? Number(votingPower) > 0 : false),
+    [votingPower],
+  );
+
+  const handleSupport = useCallback(() => submit(VoteType.Support), [submit]);
+  const handleReject = useCallback(() => submit(VoteType.Reject), [submit]);
+
+  const content = useMemo(() => {
+    if (!account) {
+      return (
+        <Paragraph
+          size={ParagraphSize.base}
+          className="text-xs italic font-medium leading-relaxed"
+        >
+          <Trans i18nKey={pageTranslations.connectMessage} />
+        </Paragraph>
+      );
+    }
+
+    if (loading) {
+      return null;
+    }
+
+    const ineligibleVote = status === ProposalState.Active && !hasVotingPower;
+
+    if (!!hasUserVoted) {
+      return (
+        <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-8">
+          <Tooltip
+            content={
+              <span className="font-medium">
+                {t(pageTranslations.supportText)}
+              </span>
+            }
+            trigger={TooltipTrigger.click}
+            disabled={!hasUserVoted.support}
+            className="w-full sm:w-52"
+          >
+            <div>
+              <Button
+                className={classNames('w-full', {
+                  'bg-gray-50': !!hasUserVoted.support,
+                  'hover:bg-gray-80 focus:bg-gray-80 cursor-default':
+                    !hasUserVoted.support,
+                })}
+                style={ButtonStyle.secondary}
+                size={ButtonSize.large}
+                text={
+                  <span className="flex items-center">
+                    <Icon
+                      className="mr-2.5 text-positive"
+                      size={14}
+                      icon={IconNames.CHECK}
+                    />
+                    {t(pageTranslations.support)}
+                  </span>
+                }
+              />
+            </div>
+          </Tooltip>
+
+          <Tooltip
+            content={
+              <span className="font-medium">
+                {t(pageTranslations.rejectText)}
+              </span>
+            }
+            trigger={TooltipTrigger.click}
+            disabled={!!hasUserVoted.support}
+            className="w-full sm:w-52"
+          >
+            <div>
+              <Button
+                className={classNames('w-full', {
+                  'bg-gray-50': !hasUserVoted.support,
+                  'hover:bg-gray-80 focus:bg-gray-80 cursor-default':
+                    !!hasUserVoted.support,
+                })}
+                style={ButtonStyle.secondary}
+                size={ButtonSize.large}
+                text={
+                  <span className="flex items-center">
+                    <Icon
+                      className="mr-2.5 text-negative"
+                      size={12}
+                      icon={IconNames.X_MARK}
+                    />
+                    {t(pageTranslations.reject)}
+                  </span>
+                }
+              />
+            </div>
+          </Tooltip>
+        </div>
+      );
+    }
+
+    if (ineligibleVote) {
+      return (
+        <div className="flex items-center justify-between">
+          <Paragraph
+            size={ParagraphSize.base}
+            className="text-xs italic font-medium leading-relaxed"
+          >
+            {t(pageTranslations.ineligibleVote)}
+            <br />
+            {t(pageTranslations.eligibleVote)}
+          </Paragraph>
+
+          <Link to="/earn/staking" className="no-underline">
+            <Button
+              style={ButtonStyle.secondary}
+              size={ButtonSize.large}
+              text={t(pageTranslations.stakeSOV)}
+            />
+          </Link>
+        </div>
+      );
+    }
+
+    if (!hasUserVoted && status === ProposalState.Active) {
+      return (
+        <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-8">
+          <Button
+            className="w-full sm:w-52"
+            style={ButtonStyle.secondary}
+            size={ButtonSize.large}
+            onClick={handleSupport}
+            text={
+              <span className="flex items-center">
+                <Icon
+                  className="mr-2.5 text-positive"
+                  size={14}
+                  icon={IconNames.CHECK}
+                />
+                {t(pageTranslations.support)}
+              </span>
+            }
+          />
+
+          <Button
+            className="w-full sm:w-52"
+            style={ButtonStyle.secondary}
+            size={ButtonSize.large}
+            onClick={handleReject}
+            text={
+              <span className="flex items-center">
+                <Icon
+                  className="mr-2.5 text-negative"
+                  size={12}
+                  icon={IconNames.X_MARK}
+                />
+                {t(pageTranslations.reject)}
+              </span>
+            }
+          />
+        </div>
+      );
+    }
+
+    if (!hasUserVoted && status !== ProposalState.Active) {
+      return (
+        <Paragraph
+          size={ParagraphSize.base}
+          className="text-xs italic font-medium leading-relaxed"
+        >
+          <Trans i18nKey={pageTranslations.noVote} />
+        </Paragraph>
+      );
+    }
+  }, [
+    account,
+    handleReject,
+    handleSupport,
+    hasUserVoted,
+    hasVotingPower,
+    loading,
+    status,
+  ]);
+
+  return (
+    <div className={classNames('bg-gray-80 p-6 rounded', className)}>
+      <Heading className="text-sm font-medium">
+        {t(pageTranslations.castVote)}
+      </Heading>
+      <div className="mt-8">{content}</div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/ExecutableDetails/ExecutableDetails.tsx b/apps/frontend/src/app/5_pages/ProposalPage/components/ExecutableDetails/ExecutableDetails.tsx
new file mode 100644
index 000000000..bae88bc2c
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/ExecutableDetails/ExecutableDetails.tsx
@@ -0,0 +1,147 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { TxIdWithNotification } from '../../../../2_molecules/TxIdWithNotification/TransactionIdWithNotification';
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { useIsExecutableProposal } from '../../../BitocracyPage/hooks/useIsExecutableProposal';
+
+const pageTranslations = translations.proposalPage.executableDetails;
+
+type ExecutableDetailsProps = {
+  className?: string;
+  proposal: Proposal;
+};
+
+export const ExecutableDetails: FC<ExecutableDetailsProps> = ({ proposal }) => {
+  const isExecutableProposal = useIsExecutableProposal(proposal);
+
+  const executableList = useMemo(
+    () =>
+      proposal.signatures.map((signature, i) => ({
+        signature: signature.split('(')[0],
+        target: proposal.targets[i],
+        value: proposal.values[i],
+        calldata: proposal.calldatas[i],
+      })),
+    [
+      proposal.calldatas,
+      proposal.signatures,
+      proposal.targets,
+      proposal.values,
+    ],
+  );
+  return (
+    <div className="bg-gray-90 p-6 rounded">
+      <Heading className="text-sm font-medium">
+        {t(pageTranslations.title)}
+      </Heading>
+      <div className="py-1 mt-2 flex flex-col flex-wrap gap-8">
+        {!isExecutableProposal ? (
+          <Paragraph className="text-gray-30 font-medium">
+            {t(translations.common.na)}
+          </Paragraph>
+        ) : (
+          executableList.map((executable, i) => (
+            <div
+              key={executable.signature}
+              className="w-full font-medium bg-gray-80 p-3 rounded"
+            >
+              <Heading className="text-xs">
+                {t(pageTranslations.executable)} #{i + 1}
+              </Heading>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.assetName)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right"
+                >
+                  -
+                </Paragraph>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.assetAmount)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right"
+                >
+                  {executable.value}
+                </Paragraph>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.assetAddress)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right"
+                >
+                  -
+                </Paragraph>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.contractAddress)}
+                </Paragraph>
+                <div className="text-xs text-right">
+                  <TxIdWithNotification
+                    href=""
+                    value={executable.target}
+                    dataAttribute="proposal-contract-address-id"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.recipientAddress)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right"
+                >
+                  -
+                </Paragraph>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.functionName)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right break-all"
+                >
+                  {executable.signature}
+                </Paragraph>
+              </div>
+
+              <div className="grid grid-cols-2 w-full text-gray-30 gap-3 mt-3">
+                <Paragraph size={ParagraphSize.base} className="text-xs">
+                  {t(pageTranslations.data)}
+                </Paragraph>
+                <Paragraph
+                  size={ParagraphSize.base}
+                  className="text-xs text-right break-all"
+                >
+                  {executable.calldata}
+                </Paragraph>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.tsx b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.tsx
new file mode 100644
index 000000000..f2ddec148
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.tsx
@@ -0,0 +1,87 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { SupportedTokens } from '@sovryn/contracts';
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { useAccount } from '../../../../../hooks/useAccount';
+import { useAssetBalance } from '../../../../../hooks/useAssetBalance';
+import { translations } from '../../../../../locales/i18n';
+import {
+  ProposalProps,
+  ProposalState,
+} from '../../../BitocracyPage/BitocracyPage.types';
+import { useIsExecutableProposal } from '../../../BitocracyPage/hooks/useIsExecutableProposal';
+import { useProposalStatus } from '../../../BitocracyPage/hooks/useProposalStatus';
+import { ProposalActionType } from './ProposalAction.types';
+import { useHandleProposal } from './hooks/useHandleProposal';
+
+type ProposalActionProps = ProposalProps & {
+  className?: string;
+};
+
+const pageTranslations = translations.proposalPage;
+
+export const ProposalAction: FC<ProposalActionProps> = ({
+  proposal,
+  className,
+}) => {
+  const { account } = useAccount();
+
+  const { balance, loading } = useAssetBalance(SupportedTokens.rbtc);
+  const status = useProposalStatus(proposal);
+  const isExecutableProposal = useIsExecutableProposal(proposal);
+
+  const isDisabled = useMemo(
+    () => !account || balance.isZero() || loading,
+    [account, balance, loading],
+  );
+
+  const action = useMemo(() => {
+    if (status === ProposalState.Succeeded) {
+      return ProposalActionType.queue;
+    }
+    if (
+      status === ProposalState.Queued &&
+      (proposal?.eta || 0) < Date.now() / 1000
+    ) {
+      return ProposalActionType.execute;
+    }
+    return ProposalActionType.none;
+  }, [proposal?.eta, status]);
+
+  const actionButtonText = useMemo(() => {
+    switch (action) {
+      case ProposalActionType.queue:
+        return t(pageTranslations.actions.queue);
+      case ProposalActionType.execute:
+        return t(pageTranslations.actions.execute);
+      default:
+        return '';
+    }
+  }, [action]);
+
+  const isActionVisible = useMemo(
+    () => action !== ProposalActionType.none && isExecutableProposal,
+    [action, isExecutableProposal],
+  );
+
+  const handleProposal = useHandleProposal();
+
+  const handleSubmit = useCallback(() => {
+    if (proposal?.emittedBy?.id) {
+      handleProposal(proposal.proposalId, proposal.emittedBy.id, action);
+    }
+  }, [handleProposal, proposal, action]);
+
+  return isActionVisible ? (
+    <Button
+      text={actionButtonText}
+      style={ButtonStyle.ghost}
+      onClick={handleSubmit}
+      className={className}
+      disabled={isDisabled}
+    />
+  ) : null;
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.types.ts b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.types.ts
new file mode 100644
index 000000000..47bb5759f
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/ProposalAction.types.ts
@@ -0,0 +1,5 @@
+export enum ProposalActionType {
+  none = 'none',
+  queue = 'queue',
+  execute = 'execute',
+}
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/hooks/useHandleProposal.ts b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/hooks/useHandleProposal.ts
new file mode 100644
index 000000000..e41e491ff
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalAction/hooks/useHandleProposal.ts
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+
+import { Contract } from 'ethers';
+import { t } from 'i18next';
+
+import { getProtocolContract } from '@sovryn/contracts';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../../../../3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { GAS_LIMIT } from '../../../../../../constants/gasLimits';
+import { useTransactionContext } from '../../../../../../contexts/TransactionContext';
+import { useAccount } from '../../../../../../hooks/useAccount';
+import { translations } from '../../../../../../locales/i18n';
+import { ProposalActionType } from '../ProposalAction.types';
+
+const pageTranslations = translations.proposalPage;
+
+export const useHandleProposal = () => {
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+  const { account, signer } = useAccount();
+
+  const handleSubmit = useCallback(
+    async (
+      proposalId: number,
+      contractAddress: string,
+      action: ProposalActionType,
+    ) => {
+      if (!account || !signer) {
+        return;
+      }
+
+      const abi = (await getProtocolContract('governorOwner')).abi;
+      const contract = new Contract(contractAddress, abi, signer);
+
+      const transactions: Transaction[] = [];
+
+      transactions.push({
+        title: t(pageTranslations.actions[action]),
+        request: {
+          type: TransactionType.signTransaction,
+          contract,
+          fnName: action,
+          args: [proposalId],
+          gasLimit:
+            action === ProposalActionType.queue
+              ? GAS_LIMIT.PROPOSAL_QUEUE
+              : GAS_LIMIT.PROPOSAL_EXECUTE,
+        },
+      });
+
+      setTransactions(transactions);
+      setTitle(t(pageTranslations.actions[action]));
+      setTransactions(transactions);
+      setIsOpen(true);
+    },
+    [account, setIsOpen, setTransactions, signer, setTitle],
+  );
+
+  return handleSubmit;
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalInfo/ProposalInfo.tsx b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalInfo/ProposalInfo.tsx
new file mode 100644
index 000000000..9a6302758
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/ProposalInfo/ProposalInfo.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.proposalPage;
+
+type ProposalInfoProps = {
+  link: string;
+  description: string;
+};
+
+export const ProposalInfo: FC<ProposalInfoProps> = ({ link, description }) => (
+  <div className="bg-gray-90 px-6 pt-6 pb-3 rounded">
+    <div className="flex">
+      <Paragraph
+        size={ParagraphSize.base}
+        className="text-xs w-24 mb-3 text-gray-30"
+      >
+        {t(pageTranslations.discussionLink)}
+      </Paragraph>
+      {link && (
+        <Paragraph size={ParagraphSize.base} className="text-xs">
+          <a
+            href={link}
+            className="text-primary-20"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {link}
+          </a>
+        </Paragraph>
+      )}
+    </div>
+
+    <div className="flex">
+      <Paragraph
+        size={ParagraphSize.base}
+        className="text-xs w-24 text-gray-30"
+      >
+        {t(pageTranslations.proposalText)}
+      </Paragraph>
+      <div>
+        <ReactMarkdown className="text-xs" remarkPlugins={[remarkGfm]}>
+          {description}
+        </ReactMarkdown>
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/components/VoteTimer/VoteTimer.tsx b/apps/frontend/src/app/5_pages/ProposalPage/components/VoteTimer/VoteTimer.tsx
new file mode 100644
index 000000000..2f7518c4c
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/components/VoteTimer/VoteTimer.tsx
@@ -0,0 +1,89 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+import { useTimer } from 'react-timer-hook';
+
+import { Paragraph, ParagraphSize, Tooltip } from '@sovryn/ui';
+
+import { MS } from '../../../../../constants/general';
+import { useBlockNumber } from '../../../../../hooks/useBlockNumber';
+import { translations } from '../../../../../locales/i18n';
+import { Proposal } from '../../../../../utils/graphql/rsk/generated';
+import { dateFormat } from '../../../../../utils/helpers';
+import { BLOCK_TIME_IN_SECONDS } from '../../../BitocracyPage/BitocracyPage.constants';
+import { ProposalState } from '../../../BitocracyPage/BitocracyPage.types';
+import { useProposalStatus } from '../../../BitocracyPage/hooks/useProposalStatus';
+
+const pageTranslations = translations.proposalPage;
+
+type VoteTimerProps = {
+  className?: string;
+  proposal: Proposal;
+};
+
+export const VoteTimer: FC<VoteTimerProps> = ({ proposal, className }) => {
+  const status = useProposalStatus(proposal);
+  const { value: blockNumber } = useBlockNumber();
+
+  const expiryTimestamp = useMemo(() => {
+    const secondsBetweenBlocks =
+      (proposal.endBlock - proposal.startBlock) * BLOCK_TIME_IN_SECONDS;
+    return new Date((proposal.timestamp + secondsBetweenBlocks) * MS);
+  }, [proposal.endBlock, proposal.startBlock, proposal.timestamp]);
+
+  const { seconds, minutes, hours, days } = useTimer({
+    expiryTimestamp,
+  });
+
+  const label = useMemo(() => {
+    if (status !== ProposalState.Active) {
+      return t(pageTranslations.voteEnded);
+    }
+
+    return `${[days, hours, minutes, seconds].join(':')} (${
+      proposal.endBlock - blockNumber
+    }) ${t(pageTranslations.blocks)}`;
+  }, [blockNumber, days, hours, minutes, proposal.endBlock, seconds, status]);
+
+  return (
+    <div className={className}>
+      <Paragraph
+        size={ParagraphSize.small}
+        className="mb-3 font-xs text-gray-30"
+      >
+        {t(pageTranslations.timeToVote)}
+      </Paragraph>
+
+      <Paragraph
+        size={ParagraphSize.small}
+        className="mb-3 font-medium font-xs"
+      >
+        <Tooltip
+          content={
+            <div className="font-medium">
+              <span className="font-semibold">
+                {t(pageTranslations.voteStart)}
+              </span>
+              <br />
+              <span>
+                {dateFormat(proposal.timestamp)} ({t(pageTranslations.block)} #
+                {proposal.startBlock})
+              </span>
+              <br />
+              <span className="font-semibold">
+                {t(pageTranslations.voteEnd)}
+              </span>
+              <br />
+              <span>
+                {dateFormat(expiryTimestamp.getTime() / MS)} (
+                {t(pageTranslations.block)} #{proposal.endBlock})
+              </span>
+            </div>
+          }
+        >
+          <span>{label}</span>
+        </Tooltip>
+      </Paragraph>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetProposalById.ts b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetProposalById.ts
new file mode 100644
index 000000000..a7d18c2da
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetProposalById.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { rskClient } from '../../../../utils/clients';
+import {
+  Proposal,
+  useGetProposalQuery,
+} from '../../../../utils/graphql/rsk/generated';
+
+export const useGetProposalById = (id: string) => {
+  const { loading, data, refetch } = useGetProposalQuery({
+    client: rskClient,
+    variables: {
+      id,
+    },
+  });
+
+  const proposal = useMemo(
+    () => data?.proposal as Proposal | undefined,
+    [data],
+  );
+
+  return { loading, proposal, refetch };
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetUserVote.ts b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetUserVote.ts
new file mode 100644
index 000000000..e60793685
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useGetUserVote.ts
@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+import { useAccount } from '../../../../hooks/useAccount';
+import { rskClient } from '../../../../utils/clients';
+import {
+  VoteCast,
+  useGetVoteQuery,
+} from '../../../../utils/graphql/rsk/generated';
+
+export const useGetUserVote = (proposalId: string | undefined) => {
+  const { account } = useAccount();
+  const { loading, data, refetch } = useGetVoteQuery({
+    client: rskClient,
+    variables: {
+      id: proposalId,
+      voter: account.toLowerCase(),
+    },
+  });
+
+  const vote = useMemo(
+    () => data?.voteCasts[0] as VoteCast | undefined,
+    [data],
+  );
+
+  return { loading, vote, refetch };
+};
diff --git a/apps/frontend/src/app/5_pages/ProposalPage/hooks/useVote.ts b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useVote.ts
new file mode 100644
index 000000000..339dbfe85
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/ProposalPage/hooks/useVote.ts
@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+
+import { Contract } from 'ethers';
+import { t } from 'i18next';
+
+import { noop } from '@sovryn/ui';
+
+import { TransactionType } from '../../../3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { GAS_LIMIT } from '../../../../constants/gasLimits';
+import { useTransactionContext } from '../../../../contexts/TransactionContext';
+import { useAccount } from '../../../../hooks/useAccount';
+import { useGetProtocolContract } from '../../../../hooks/useGetContract';
+import { translations } from '../../../../locales/i18n';
+import { Proposal } from '../../../../utils/graphql/rsk/generated';
+import { VoteType } from '../ProposalPage.types';
+
+const pageTranslations = translations.proposalPage;
+
+export const useVote = (proposal: Proposal, onComplete = noop) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+  const governorAdmin = useGetProtocolContract('governorAdmin');
+
+  const submit = useCallback(
+    async (voteType: VoteType) => {
+      if (!signer && !governorAdmin) {
+        return;
+      }
+
+      const contract = new Contract(
+        proposal.emittedBy.id,
+        governorAdmin?.interface!,
+        signer,
+      );
+
+      setTransactions([
+        {
+          title: t(
+            voteType === VoteType.Support
+              ? pageTranslations.support
+              : pageTranslations.reject,
+          ),
+          request: {
+            type: TransactionType.signTransaction,
+            contract,
+            fnName: 'castVote',
+            args: [proposal.proposalId, voteType === VoteType.Support],
+            gasLimit: GAS_LIMIT.PROPOSAL_VOTE,
+          },
+          onComplete: onComplete,
+        },
+      ]);
+      setTitle(
+        t(
+          voteType === VoteType.Support
+            ? pageTranslations.support
+            : pageTranslations.reject,
+        ),
+      );
+      setIsOpen(true);
+    },
+    [
+      governorAdmin,
+      onComplete,
+      proposal.emittedBy.id,
+      proposal.proposalId,
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      signer,
+    ],
+  );
+
+  return { submit };
+};
diff --git a/apps/frontend/src/app/5_pages/StakePage/components/AddStakeRenderer/AddStakeRenderer.tsx b/apps/frontend/src/app/5_pages/StakePage/components/AddStakeRenderer/AddStakeRenderer.tsx
index ff3504156..5a2608b56 100644
--- a/apps/frontend/src/app/5_pages/StakePage/components/AddStakeRenderer/AddStakeRenderer.tsx
+++ b/apps/frontend/src/app/5_pages/StakePage/components/AddStakeRenderer/AddStakeRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useReducer } from 'react';
+import React, { FC, useCallback, useReducer, useState } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -15,6 +15,7 @@ import {
 
 import { AddStakeForm } from '../../../../3_organisms/StakeForm/components/AddStakeForm/AddStakeForm';
 import { translations } from '../../../../../locales/i18n';
+import { NextStepDialog } from '../NextStepDialog/NextStepDialog';
 
 type AddStakeRendererProps = {
   hasStakedValue: boolean;
@@ -24,13 +25,22 @@ export const AddStakeRenderer: FC<AddStakeRendererProps> = ({
   hasStakedValue,
 }) => {
   const navigate = useNavigate();
+  const [isNextStepOpen, setIsNextStepOpen] = useState(false);
   const [openCreateStakeDialog, toggleCreateStakeDialog] = useReducer(
     v => !v,
     false,
   );
 
+  const onSuccess = useCallback(() => {
+    toggleCreateStakeDialog();
+    setIsNextStepOpen(true);
+  }, []);
+
+  const onConfirm = useCallback(() => setIsNextStepOpen(false), []);
+
   return (
     <div className="flex md:flex-row items-center gap-4 flex-col-reverse">
+      <NextStepDialog isOpen={isNextStepOpen} onConfirm={onConfirm} />
       {hasStakedValue && (
         <Button
           style={ButtonStyle.ghost}
@@ -68,10 +78,7 @@ export const AddStakeRenderer: FC<AddStakeRendererProps> = ({
           onClose={toggleCreateStakeDialog}
         />
         <DialogBody>
-          <AddStakeForm
-            hasStakedValue={hasStakedValue}
-            onSuccess={toggleCreateStakeDialog}
-          />
+          <AddStakeForm hasStakedValue={hasStakedValue} onSuccess={onSuccess} />
         </DialogBody>
       </Dialog>
     </div>
diff --git a/apps/frontend/src/app/5_pages/StakePage/components/NextStepDialog/NextStepDialog.tsx b/apps/frontend/src/app/5_pages/StakePage/components/NextStepDialog/NextStepDialog.tsx
new file mode 100644
index 000000000..c108f23d2
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/StakePage/components/NextStepDialog/NextStepDialog.tsx
@@ -0,0 +1,108 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import { t } from 'i18next';
+import { reactLocalStorage } from 'reactjs-localstorage';
+
+import {
+  Button,
+  ButtonType,
+  Checkbox,
+  Dialog,
+  DialogHeader,
+  Heading,
+  HeadingType,
+  Icon,
+  IconNames,
+} from '@sovryn/ui';
+
+import { EmailNotificationSettingsDialog } from '../../../../3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog';
+import { useTransactionContext } from '../../../../../contexts/TransactionContext';
+import { translations } from '../../../../../locales/i18n';
+
+const localStorageKey = 'nextStepPopup';
+const translationBasePath = translations.stakePage.nextStepDialog;
+
+type NextStepDialogProps = {
+  isOpen: boolean;
+  onConfirm: () => void;
+};
+
+export const NextStepDialog: FC<NextStepDialogProps> = ({
+  isOpen,
+  onConfirm,
+}) => {
+  const { isOpen: isTxDialogOpen } = useTransactionContext();
+  const [isDissmised, setIsDissmised] = useState(
+    !!reactLocalStorage.get(localStorageKey),
+  );
+  const [settingDialogOpen, setSettingDialogOpen] = useState(false);
+  const [checked, setChecked] = useState(false);
+
+  const onClose = useCallback(() => {
+    if (checked) {
+      reactLocalStorage.set(localStorageKey, 'true');
+      setIsDissmised(true);
+    }
+    onConfirm();
+  }, [checked, onConfirm]);
+
+  const onSignup = useCallback(() => {
+    setSettingDialogOpen(true);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <>
+      <EmailNotificationSettingsDialog
+        isOpen={settingDialogOpen}
+        onClose={() => setSettingDialogOpen(false)}
+      />
+      <Dialog
+        isOpen={!isDissmised && isOpen && !isTxDialogOpen}
+        onClose={onClose}
+      >
+        <DialogHeader
+          title={t(translationBasePath.dialogTitle)}
+          onClose={onClose}
+        />
+        <div className="py-6 px-4">
+          <Heading className="mb-6 font-normal" type={HeadingType.h1}>
+            {t(translationBasePath.title)}
+          </Heading>
+          <div className="flex-col py-7 px-5 rounded bg-gray-80">
+            <div className="flex">
+              <div className="bg-gray-70 min-w-[4.375rem] h-[4.375rem] rounded mr-5 text-sovryn-blue flex items-center justify-center">
+                <Icon size={50} icon={IconNames.MAIL} />
+              </div>
+              <div className="flex flex-col items-start justify-start">
+                <Heading className="text-white mb-2" type={HeadingType.h2}>
+                  {t(translationBasePath.emailNotifications)}
+                </Heading>
+                <Heading
+                  className="text-gray-10 mb-2 leading-5 font-medium"
+                  type={HeadingType.h3}
+                >
+                  {t(translationBasePath.description)}
+                </Heading>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row items-center justify-between md:pb-6 px-4 gap-4">
+          <Checkbox
+            onChangeValue={setChecked}
+            label={t(translationBasePath.doNotShowAgain)}
+            checked={checked}
+          />
+          <Button
+            className="w-full md:w-auto"
+            type={ButtonType.button}
+            text={t(translationBasePath.signUp)}
+            onClick={onSignup}
+          />
+        </div>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/frontend/src/assets/images/ProposalStatuses/icon-active.svg b/apps/frontend/src/assets/images/ProposalStatuses/icon-active.svg
new file mode 100644
index 000000000..f1913d9ae
--- /dev/null
+++ b/apps/frontend/src/assets/images/ProposalStatuses/icon-active.svg
@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_370_65282)">
+<circle cx="7" cy="7" r="6.5" stroke="#72EADE"/>
+<circle cx="7" cy="7" r="3" fill="#72EADE"/>
+</g>
+<defs>
+<clipPath id="clip0_370_65282">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/ProposalStatuses/icon-executed.svg b/apps/frontend/src/assets/images/ProposalStatuses/icon-executed.svg
new file mode 100644
index 000000000..84aab53a0
--- /dev/null
+++ b/apps/frontend/src/assets/images/ProposalStatuses/icon-executed.svg
@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_370_65252)">
+<circle cx="7" cy="7" r="6.4" stroke="#72EADE" stroke-width="1.2"/>
+<path d="M11 4.6C11 4.75353 10.9442 4.90712 10.8326 5.02412L6.26116 9.82412C6.15 9.94187 6.00357 10 5.85714 10C5.71071 10 5.56464 9.94141 5.45321 9.82422L3.1675 7.42422C3.05589 7.3075 3 7.15375 3 7C3 6.65725 3.26696 6.4 3.57143 6.4C3.71764 6.4 3.86393 6.45859 3.97536 6.57578L5.85714 8.5525L10.025 4.17625C10.1357 4.05869 10.2821 4 10.4286 4C10.7339 4 11 4.25688 11 4.6Z" fill="#72EADE"/>
+</g>
+<defs>
+<clipPath id="clip0_370_65252">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/ProposalStatuses/icon-pending.svg b/apps/frontend/src/assets/images/ProposalStatuses/icon-pending.svg
new file mode 100644
index 000000000..53114e220
--- /dev/null
+++ b/apps/frontend/src/assets/images/ProposalStatuses/icon-pending.svg
@@ -0,0 +1,14 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_522_26746)">
+<path d="M11 4.6C11 4.75353 10.9442 4.90712 10.8326 5.02412L6.26116 9.82412C6.15 9.94187 6.00357 10 5.85714 10C5.71071 10 5.56464 9.94141 5.45321 9.82422L3.1675 7.42422C3.05589 7.3075 3 7.15375 3 7C3 6.65725 3.26696 6.4 3.57143 6.4C3.71764 6.4 3.86393 6.45859 3.97536 6.57578L5.85714 8.5525L10.025 4.17625C10.1357 4.05869 10.2821 4 10.4286 4C10.7339 4 11 4.25688 11 4.6Z" fill="#FFDAA7"/>
+<path d="M4.59829 1.5C2.48012 2.42626 1 4.54028 1 7C1 10.0417 3.26333 12.5547 6.1977 12.9468" stroke="#FFDAA7" stroke-linecap="round"/>
+<path d="M6.10149 0.806038C6.25372 0.829052 6.32396 1.00823 6.22791 1.12856L4.50402 3.28829C4.40797 3.40862 4.21769 3.37985 4.1615 3.23651L3.15307 0.663709C3.09688 0.520367 3.21694 0.369956 3.36917 0.39297L6.10149 0.806038Z" fill="#FFDAA7"/>
+<path d="M9.57456 12.5007C11.6929 11.5749 13.1735 9.46119 13.174 7.00147C13.1747 3.84059 10.731 1.25008 7.62958 1.01724" stroke="#FFDAA7" stroke-linecap="round"/>
+<path d="M8.07076 13.1944C7.91854 13.1713 7.84834 12.9921 7.94441 12.8718L9.66876 10.7125C9.76483 10.5921 9.95511 10.621 10.0113 10.7643L11.0192 13.3373C11.0753 13.4807 10.9552 13.6311 10.803 13.608L8.07076 13.1944Z" fill="#FFDAA7"/>
+</g>
+<defs>
+<clipPath id="clip0_522_26746">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/ProposalStatuses/icon-rejected.svg b/apps/frontend/src/assets/images/ProposalStatuses/icon-rejected.svg
new file mode 100644
index 000000000..9b11165ca
--- /dev/null
+++ b/apps/frontend/src/assets/images/ProposalStatuses/icon-rejected.svg
@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7" clip-path="url(#clip0_370_65327)">
+<path d="M3.53516 3.46436L10.6062 10.5354" stroke="#FF0D39" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M10.6064 3.46436L3.53538 10.5354" stroke="#FF0D39" stroke-width="1.6" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_370_65327">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/assets/images/ProposalStatuses/icon-succeed.svg b/apps/frontend/src/assets/images/ProposalStatuses/icon-succeed.svg
new file mode 100644
index 000000000..e6953d45c
--- /dev/null
+++ b/apps/frontend/src/assets/images/ProposalStatuses/icon-succeed.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M14 3.8C14 4.0047 13.9233 4.2095 13.7698 4.3655L7.4841 10.7655C7.33125 10.9225 7.12991 11 6.92857 11C6.72723 11 6.52638 10.9219 6.37317 10.7656L3.23031 7.56563C3.07685 7.41 3 7.205 3 7C3 6.543 3.36708 6.2 3.78571 6.2C3.98676 6.2 4.1879 6.27813 4.34112 6.43438L6.92857 9.07L12.6594 3.235C12.8116 3.07825 13.0129 3 13.2143 3C13.6342 3 14 3.3425 14 3.8Z" fill="#72EADE"/>
+</g>
+</svg>
diff --git a/apps/frontend/src/constants/gasLimits.ts b/apps/frontend/src/constants/gasLimits.ts
index 85cac6913..5506af5a8 100644
--- a/apps/frontend/src/constants/gasLimits.ts
+++ b/apps/frontend/src/constants/gasLimits.ts
@@ -25,4 +25,7 @@ export const GAS_LIMIT = {
   BORROW: 1_500_000,
   REPAY_LOAN: 950_000,
   WITHDRAW_LOAN_COLLATERAL: 150_000,
+  PROPOSAL_VOTE: 400_000,
+  PROPOSAL_QUEUE: 250_000,
+  PROPOSAL_EXECUTE: 6_000_000,
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index a18858e1e..a7e8a259d 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -67,7 +67,7 @@
     "connectWalletButton": {
         "connect": "Get started",
         "rewards": "Rewards",
-        "settings": "Settings",
+        "notifications": "Notifications",
         "history": "History",
         "copyAddress": "Copy address",
         "disconnect": "Disconnect"
@@ -97,7 +97,8 @@
                 }
             },
             "convert": "Convert",
-            "stake": "Stake"
+            "stake": "Stake",
+            "bitocracy": "Bitocracy"
         }
     },
     "footer": {
@@ -478,6 +479,14 @@
             "extendStakeTitle": "Extend stake",
             "delegateStake": "Delegate voting power details",
             "delegateStakeTitle": "Delegate voting power"
+        },
+        "nextStepDialog": {
+            "dialogTitle": "Next steps",
+            "title": "Sign up for important alerts",
+            "description": "Receive an email every time a new proposal is created. Then cast your vote to make your voice heard in Sovryn Bitocracy.",
+            "emailNotifications": "Email notifications",
+            "doNotShowAgain": "Don't show again",
+            "signUp": "Sign up"
         }
     },
 
@@ -597,6 +606,90 @@
         "collateralRatio": "collateral ratio"
     },
 
+    "bitocracyPage": {
+        "meta": {
+            "title": "Bitocracy - Sovryn",
+            "description": "Help decide the future of Sovryn by participating in governance of the protocol."
+        },
+        "title": "Bitocracy",
+        "subtitle": "Help decide the future of Sovryn",
+        "pastProposals": "Past proposals",
+        "liveProposals": "Live proposals",
+        "table": {
+            "status": "Status",
+            "title": "Title",
+            "type": "Type",
+            "endDate": "End date"
+        },
+        "proposalStatus": {
+            "active": "In progress",
+            "queued": "Succeeded - Queued for execution",
+            "executed": "Succeeded - Executed",
+            "succeeded": "Succeeded - Queue for execution",
+            "pending": "Pending execution",
+            "canceled": "Vetoed",
+            "expired": "Succeeded - Expired",
+            "defeated": "Rejected"
+        },
+        "proposalStatusDetail": {
+            "willSucceed": "Will succeed",
+            "willBeDefeated": "Will be rejected"
+        },
+        "proposalType": {
+            "admin": "Admin",
+            "owner": "Owner",
+            "executable": "(executable)",
+            "nonExecutable": "(non-executable)",
+            "other": "Other"
+        },
+        "actions": {
+            "newProposal": "New proposal",
+            "bitocracyAlerts": "Bitocracy alerts",
+            "view": "View"
+        }
+    },
+    "proposalPage": {
+        "meta": {
+            "title": "Bitocracy - Sovryn"
+        },
+        "proposedBy": "Proposed by",
+        "proposalID": "Proposal ID",
+        "status": "Status",
+        "timeToVote": "Time left to vote",
+        "voteStart": "Vote start:",
+        "voteEnd": "Vote end:",
+        "voteEnded": "Vote ended",
+        "blocks": "blocks",
+        "block": "block",
+        "castYourVote": "Cast your vote",
+        "connectMessage": "Connect wallet to check voter status",
+        "discussionLink": "Discussion link:",
+        "proposalText": "Proposal text:",
+        "executableDetails": {
+            "title": "Executable details",
+            "executable": "Executable",
+            "assetName": "Asset name: ",
+            "assetAmount": "Asset amount: ",
+            "assetAddress": "Asset address: ",
+            "contractAddress": "Contract address: ",
+            "recipientAddress": "Recipient address: ",
+            "functionName": "Function name: ",
+            "data": "Data: "
+        },
+        "castVote": "Cast your vote",
+        "stakeSOV": "Stake SOV",
+        "support": "Support",
+        "supportText": "You voted to support this proposal",
+        "reject": "Reject",
+        "rejectText": "You voted to reject this proposal",
+        "noVote": "No vote cast on this proposal",
+        "ineligibleVote": "Ineligible to vote - no SOV staked at proposal creation time",
+        "eligibleVote": "Stake SOV to be eligible to vote on future proposals",
+        "actions": {
+            "queue": "Queue for execution",
+            "execute": "Execute proposal"
+        }
+    },
     "fastBtc": {
         "mainScreen": {
             "title": "Funding",
@@ -1006,15 +1099,16 @@
         }
     },
     "emailNotificationsDialog": {
-        "dialogTitle": "Settings",
-        "title": "Sign up to receive important notifications about the state of your line of credit and the Zero protocol",
+        "dialogTitle": "Notifications",
+        "title": "Sign up to receive important notifications about Sovryn loans, Zero recovery mode, Bitocracy votes, and more",
         "emailInputLabel": "Email address",
         "emailInputPlaceholder": "Enter email",
         "alertGroups": {
             "marginCallsToggle": "Margin call alerts",
             "liquidationsToggle": "Liquidation and redemption alerts",
             "stabilityPoolToggle": "Stability pool alerts",
-            "systemToggle": "System alerts"
+            "systemToggle": "System alerts",
+            "bitocracyToggle": "Bitocracy alerts"
         },
         "successMessage": "Your preferences have been saved.",
         "errorMessage": "Something went wrong, please try again.",
@@ -1138,5 +1232,29 @@
     "lendingTx": {
         "deposit": "Deposit {{symbol}}",
         "withdraw": "Withdraw {{symbol}}"
+    },
+    "proposalVotingResults": {
+        "title": "Voting results",
+        "inProgress": "Voting in progress",
+        "exportCSV": "Export CSV",
+        "support": {
+            "title": "Support",
+            "required": "Support required:",
+            "current": "Current support:",
+            "requiredValue": "> {{value}}%",
+            "currentValue": "{{value}}%"
+        },
+        "quorum": {
+            "title": "Turnout",
+            "required": "Turnout required:",
+            "current": "Current turnout:",
+            "requiredValue": "{{value}} VP ({{percent}}%)",
+            "currentValue": "{{value}} VP ({{percent}}%)"
+        }
+    },
+    "proposalVotingPower": {
+        "title": "Your voting power",
+        "votingPower": "Voting power",
+        "votingPowerShare": "Voting power share"
     }
 }
diff --git a/apps/frontend/src/router.tsx b/apps/frontend/src/router.tsx
index 786328200..eb4d17d9b 100644
--- a/apps/frontend/src/router.tsx
+++ b/apps/frontend/src/router.tsx
@@ -42,6 +42,12 @@ const StakePage = loadable(() => import('./app/5_pages/StakePage/StakePage'));
 const BorrowPage = loadable(
   () => import('./app/5_pages/BorrowPage/BorrowPage'),
 );
+const BitocracyPage = loadable(
+  () => import('./app/5_pages/BitocracyPage/BitocracyPage'),
+);
+const ProposalPage = loadable(
+  () => import('./app/5_pages/ProposalPage/ProposalPage'),
+);
 
 const routes = [
   {
@@ -89,6 +95,14 @@ const routes = [
         path: '/convert',
         element: <ConvertPage />,
       },
+      {
+        path: '/bitocracy',
+        element: <BitocracyPage />,
+      },
+      {
+        path: '/bitocracy/:id',
+        element: <ProposalPage />,
+      },
       {
         path: '/history',
         element: <HistoryPage />,
diff --git a/apps/frontend/src/store/rxjs/shared-state.ts b/apps/frontend/src/store/rxjs/shared-state.ts
index 1ffc2c7b3..08a8f85b8 100644
--- a/apps/frontend/src/store/rxjs/shared-state.ts
+++ b/apps/frontend/src/store/rxjs/shared-state.ts
@@ -9,6 +9,7 @@ import {
 
 export type EventDriverState = {
   fastBtcDialog: FastBtcDialogState;
+  emailNotificationSettingsDialog: EmailNotificationSettingsDialogState;
 };
 
 export type FastBtcDialogState = {
@@ -16,11 +17,18 @@ export type FastBtcDialogState = {
   shouldHideSend: boolean;
 };
 
+export type EmailNotificationSettingsDialogState = {
+  isOpen: boolean;
+};
+
 const INITIAL_STATE = {
   fastBtcDialog: {
     isOpen: false,
     shouldHideSend: false,
   },
+  emailNotificationSettingsDialog: {
+    isOpen: false,
+  },
 };
 
 const store = new BehaviorSubject<EventDriverState>(INITIAL_STATE);
@@ -74,11 +82,29 @@ const closeFastBtcDialog = () =>
     },
   }));
 
+const openEmailNotificationSettingsDialog = () =>
+  dispatch(state => ({
+    ...state,
+    emailNotificationSettingsDialog: {
+      isOpen: true,
+    },
+  }));
+
+const closeEmailNotificationSettingsDialog = () =>
+  dispatch(state => ({
+    ...state,
+    emailNotificationSettingsDialog: {
+      isOpen: false,
+    },
+  }));
+
 export const sharedState = {
   get,
   select,
   actions: {
     openFastBtcDialog,
     closeFastBtcDialog,
+    openEmailNotificationSettingsDialog,
+    closeEmailNotificationSettingsDialog,
   },
 };
diff --git a/apps/frontend/src/utils/graphql/rsk/generated.tsx b/apps/frontend/src/utils/graphql/rsk/generated.tsx
index e67b2faf5..c0f0b6304 100644
--- a/apps/frontend/src/utils/graphql/rsk/generated.tsx
+++ b/apps/frontend/src/utils/graphql/rsk/generated.tsx
@@ -15341,6 +15341,112 @@ export type GetLoansQuery = {
   }>;
 };
 
+export type GetProposalQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+export type GetProposalQuery = {
+  __typename?: 'Query';
+  proposal?: {
+    __typename?: 'Proposal';
+    id: string;
+    votesFor: string;
+    votesAgainst: string;
+    countVotersFor: number;
+    countVotersAgainst: number;
+    quorum: string;
+    proposer: string;
+    majorityPercentage: string;
+    eta?: number | null;
+    proposalId: number;
+    targets: Array<string>;
+    values: Array<string>;
+    signatures: Array<string>;
+    calldatas: Array<string>;
+    startBlock: number;
+    endBlock: number;
+    description: string;
+    timestamp: number;
+    canceled?: { __typename?: 'Transaction'; id: string } | null;
+    executed?: { __typename?: 'Transaction'; id: string } | null;
+    queued?: { __typename?: 'Transaction'; id: string } | null;
+    created: { __typename?: 'Transaction'; id: string };
+    votes?: Array<{
+      __typename?: 'VoteCast';
+      votes: string;
+      support: boolean;
+      timestamp: number;
+      voter: { __typename?: 'User'; id: string };
+      transaction: { __typename?: 'Transaction'; id: string };
+    }> | null;
+    emittedBy: {
+      __typename?: 'GovernorContract';
+      id: string;
+      votingDelay: number;
+      votingPeriod: number;
+      quorumPercentageVotes: number;
+      majorityPercentageVotes: number;
+    };
+    stateChanges: Array<{
+      __typename?: 'ProposalStateChange';
+      id: string;
+      state: ProposalState;
+      timestamp: number;
+    }>;
+  } | null;
+};
+
+export type GetProposalsQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetProposalsQuery = {
+  __typename?: 'Query';
+  proposals: Array<{
+    __typename?: 'Proposal';
+    id: string;
+    votesFor: string;
+    votesAgainst: string;
+    countVotersFor: number;
+    countVotersAgainst: number;
+    quorum: string;
+    majorityPercentage: string;
+    eta?: number | null;
+    proposalId: number;
+    targets: Array<string>;
+    values: Array<string>;
+    signatures: Array<string>;
+    calldatas: Array<string>;
+    startBlock: number;
+    endBlock: number;
+    description: string;
+    timestamp: number;
+    canceled?: { __typename?: 'Transaction'; id: string } | null;
+    executed?: { __typename?: 'Transaction'; id: string } | null;
+    queued?: { __typename?: 'Transaction'; id: string } | null;
+    created: { __typename?: 'Transaction'; id: string };
+    votes?: Array<{
+      __typename?: 'VoteCast';
+      votes: string;
+      support: boolean;
+      voter: { __typename?: 'User'; id: string };
+      transaction: { __typename?: 'Transaction'; id: string };
+    }> | null;
+    emittedBy: {
+      __typename?: 'GovernorContract';
+      id: string;
+      votingDelay: number;
+      votingPeriod: number;
+      quorumPercentageVotes: number;
+      majorityPercentageVotes: number;
+    };
+    stateChanges: Array<{
+      __typename?: 'ProposalStateChange';
+      id: string;
+      state: ProposalState;
+      timestamp: number;
+    }>;
+  }>;
+};
+
 export type GetRewardsEarnedHistoryQueryVariables = Exact<{
   user?: InputMaybe<Scalars['String']>;
   skip: Scalars['Int'];
@@ -15655,6 +15761,26 @@ export type GetVestingUnlockBalanceQuery = {
   }>;
 };
 
+export type GetVoteQueryVariables = Exact<{
+  id?: InputMaybe<Scalars['String']>;
+  voter?: InputMaybe<Scalars['String']>;
+}>;
+
+export type GetVoteQuery = {
+  __typename?: 'Query';
+  voteCasts: Array<{
+    __typename?: 'VoteCast';
+    emittedBy: string;
+    id: string;
+    proposalId: number;
+    support: boolean;
+    timestamp: number;
+    votes: string;
+    transaction: { __typename?: 'Transaction'; id: string };
+    voter: { __typename?: 'User'; id: string };
+  }>;
+};
+
 export const GetActiveLoansDocument = gql`
   query getActiveLoans($user: String) {
     loans(where: { user: $user, type: Borrow }) {
@@ -16844,6 +16970,221 @@ export type GetLoansQueryResult = Apollo.QueryResult<
   GetLoansQuery,
   GetLoansQueryVariables
 >;
+export const GetProposalDocument = gql`
+  query getProposal($id: ID!) {
+    proposal(id: $id) {
+      id
+      canceled {
+        id
+      }
+      executed {
+        id
+      }
+      queued {
+        id
+      }
+      created {
+        id
+      }
+      votesFor
+      votesAgainst
+      countVotersFor
+      countVotersAgainst
+      quorum
+      proposer
+      majorityPercentage
+      eta
+      proposalId
+      targets
+      values
+      signatures
+      calldatas
+      startBlock
+      endBlock
+      description
+      timestamp
+      votes {
+        voter {
+          id
+        }
+        votes
+        support
+        transaction {
+          id
+        }
+        timestamp
+      }
+      emittedBy {
+        id
+        votingDelay
+        votingPeriod
+        quorumPercentageVotes
+        majorityPercentageVotes
+      }
+      stateChanges {
+        id
+        state
+        timestamp
+      }
+    }
+  }
+`;
+
+/**
+ * __useGetProposalQuery__
+ *
+ * To run a query within a React component, call `useGetProposalQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProposalQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProposalQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useGetProposalQuery(
+  baseOptions: Apollo.QueryHookOptions<
+    GetProposalQuery,
+    GetProposalQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<GetProposalQuery, GetProposalQueryVariables>(
+    GetProposalDocument,
+    options,
+  );
+}
+export function useGetProposalLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetProposalQuery,
+    GetProposalQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<GetProposalQuery, GetProposalQueryVariables>(
+    GetProposalDocument,
+    options,
+  );
+}
+export type GetProposalQueryHookResult = ReturnType<typeof useGetProposalQuery>;
+export type GetProposalLazyQueryHookResult = ReturnType<
+  typeof useGetProposalLazyQuery
+>;
+export type GetProposalQueryResult = Apollo.QueryResult<
+  GetProposalQuery,
+  GetProposalQueryVariables
+>;
+export const GetProposalsDocument = gql`
+  query getProposals {
+    proposals(orderBy: timestamp, orderDirection: desc) {
+      id
+      canceled {
+        id
+      }
+      executed {
+        id
+      }
+      queued {
+        id
+      }
+      created {
+        id
+      }
+      votesFor
+      votesAgainst
+      countVotersFor
+      countVotersAgainst
+      quorum
+      majorityPercentage
+      eta
+      proposalId
+      targets
+      values
+      signatures
+      calldatas
+      startBlock
+      endBlock
+      description
+      timestamp
+      votes {
+        voter {
+          id
+        }
+        votes
+        support
+        transaction {
+          id
+        }
+      }
+      emittedBy {
+        id
+        votingDelay
+        votingPeriod
+        quorumPercentageVotes
+        majorityPercentageVotes
+      }
+      stateChanges {
+        id
+        state
+        timestamp
+      }
+    }
+  }
+`;
+
+/**
+ * __useGetProposalsQuery__
+ *
+ * To run a query within a React component, call `useGetProposalsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProposalsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProposalsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetProposalsQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    GetProposalsQuery,
+    GetProposalsQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<GetProposalsQuery, GetProposalsQueryVariables>(
+    GetProposalsDocument,
+    options,
+  );
+}
+export function useGetProposalsLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetProposalsQuery,
+    GetProposalsQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<GetProposalsQuery, GetProposalsQueryVariables>(
+    GetProposalsDocument,
+    options,
+  );
+}
+export type GetProposalsQueryHookResult = ReturnType<
+  typeof useGetProposalsQuery
+>;
+export type GetProposalsLazyQueryHookResult = ReturnType<
+  typeof useGetProposalsLazyQuery
+>;
+export type GetProposalsQueryResult = Apollo.QueryResult<
+  GetProposalsQuery,
+  GetProposalsQueryVariables
+>;
 export const GetRewardsEarnedHistoryDocument = gql`
   query getRewardsEarnedHistory(
     $user: String
@@ -18093,3 +18434,66 @@ export type GetVestingUnlockBalanceQueryResult = Apollo.QueryResult<
   GetVestingUnlockBalanceQuery,
   GetVestingUnlockBalanceQueryVariables
 >;
+export const GetVoteDocument = gql`
+  query getVote($id: String, $voter: String) {
+    voteCasts(where: { proposal: $id, voter: $voter }) {
+      emittedBy
+      id
+      proposalId
+      support
+      timestamp
+      transaction {
+        id
+      }
+      voter {
+        id
+      }
+      votes
+    }
+  }
+`;
+
+/**
+ * __useGetVoteQuery__
+ *
+ * To run a query within a React component, call `useGetVoteQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetVoteQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetVoteQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *      voter: // value for 'voter'
+ *   },
+ * });
+ */
+export function useGetVoteQuery(
+  baseOptions?: Apollo.QueryHookOptions<GetVoteQuery, GetVoteQueryVariables>,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<GetVoteQuery, GetVoteQueryVariables>(
+    GetVoteDocument,
+    options,
+  );
+}
+export function useGetVoteLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetVoteQuery,
+    GetVoteQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<GetVoteQuery, GetVoteQueryVariables>(
+    GetVoteDocument,
+    options,
+  );
+}
+export type GetVoteQueryHookResult = ReturnType<typeof useGetVoteQuery>;
+export type GetVoteLazyQueryHookResult = ReturnType<typeof useGetVoteLazyQuery>;
+export type GetVoteQueryResult = Apollo.QueryResult<
+  GetVoteQuery,
+  GetVoteQueryVariables
+>;
diff --git a/apps/frontend/src/utils/graphql/rsk/operations/getProposal.graphql b/apps/frontend/src/utils/graphql/rsk/operations/getProposal.graphql
new file mode 100644
index 000000000..89a9c0ae5
--- /dev/null
+++ b/apps/frontend/src/utils/graphql/rsk/operations/getProposal.graphql
@@ -0,0 +1,57 @@
+query getProposal($id: ID!) {
+  proposal(id: $id) {
+    id
+    canceled {
+      id
+    }
+    executed {
+      id
+    }
+    queued {
+      id
+    }
+    created {
+      id
+    }
+    votesFor
+    votesAgainst
+    countVotersFor
+    countVotersAgainst
+    quorum
+    proposer
+    majorityPercentage
+    eta
+    proposalId
+    targets
+    values
+    signatures
+    calldatas
+    startBlock
+    endBlock
+    description
+    timestamp
+    votes {
+      voter {
+        id
+      }
+      votes
+      support
+      transaction {
+        id
+      }
+      timestamp
+    }
+    emittedBy {
+      id
+      votingDelay
+      votingPeriod
+      quorumPercentageVotes
+      majorityPercentageVotes
+    }
+    stateChanges {
+      id
+      state
+      timestamp
+    }
+  }
+}
diff --git a/apps/frontend/src/utils/graphql/rsk/operations/getProposals.graphql b/apps/frontend/src/utils/graphql/rsk/operations/getProposals.graphql
new file mode 100644
index 000000000..a2c92191c
--- /dev/null
+++ b/apps/frontend/src/utils/graphql/rsk/operations/getProposals.graphql
@@ -0,0 +1,55 @@
+query getProposals {
+  proposals(orderBy: timestamp, orderDirection: desc) {
+    id
+    canceled {
+      id
+    }
+    executed {
+      id
+    }
+    queued {
+      id
+    }
+    created {
+      id
+    }
+    votesFor
+    votesAgainst
+    countVotersFor
+    countVotersAgainst
+    quorum
+    majorityPercentage
+    eta
+    proposalId
+    targets
+    values
+    signatures
+    calldatas
+    startBlock
+    endBlock
+    description
+    timestamp
+    votes {
+      voter {
+        id
+      }
+      votes
+      support
+      transaction {
+        id
+      }
+    }
+    emittedBy {
+      id
+      votingDelay
+      votingPeriod
+      quorumPercentageVotes
+      majorityPercentageVotes
+    }
+    stateChanges {
+      id
+      state
+      timestamp
+    }
+  }
+}
diff --git a/apps/frontend/src/utils/graphql/rsk/operations/getVote.graphql b/apps/frontend/src/utils/graphql/rsk/operations/getVote.graphql
new file mode 100644
index 000000000..5739f04f4
--- /dev/null
+++ b/apps/frontend/src/utils/graphql/rsk/operations/getVote.graphql
@@ -0,0 +1,16 @@
+query getVote($id: String, $voter: String) {
+  voteCasts(where: { proposal: $id, voter: $voter }) {
+    emittedBy
+    id
+    proposalId
+    support
+    timestamp
+    transaction {
+      id
+    }
+    voter {
+      id
+    }
+    votes
+  }
+}
diff --git a/packages/contracts/src/abis/governor.json b/packages/contracts/src/abis/governor.json
new file mode 100644
index 000000000..5e1e6fee6
--- /dev/null
+++ b/packages/contracts/src/abis/governor.json
@@ -0,0 +1,777 @@
+[
+  {
+      "inputs": [
+          {
+              "internalType": "address",
+              "name": "timelock_",
+              "type": "address"
+          },
+          {
+              "internalType": "address",
+              "name": "staking_",
+              "type": "address"
+          },
+          {
+              "internalType": "address",
+              "name": "guardian_",
+              "type": "address"
+          },
+          {
+              "internalType": "uint96",
+              "name": "_quorumPercentageVotes",
+              "type": "uint96"
+          },
+          {
+              "internalType": "uint96",
+              "name": "_majorityPercentageVotes",
+              "type": "uint96"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+  },
+  {
+      "anonymous": false,
+      "inputs": [
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "id",
+              "type": "uint256"
+          }
+      ],
+      "name": "ProposalCanceled",
+      "type": "event"
+  },
+  {
+      "anonymous": false,
+      "inputs": [
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "id",
+              "type": "uint256"
+          },
+          {
+              "indexed": false,
+              "internalType": "address",
+              "name": "proposer",
+              "type": "address"
+          },
+          {
+              "indexed": false,
+              "internalType": "address[]",
+              "name": "targets",
+              "type": "address[]"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256[]",
+              "name": "values",
+              "type": "uint256[]"
+          },
+          {
+              "indexed": false,
+              "internalType": "string[]",
+              "name": "signatures",
+              "type": "string[]"
+          },
+          {
+              "indexed": false,
+              "internalType": "bytes[]",
+              "name": "calldatas",
+              "type": "bytes[]"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "startBlock",
+              "type": "uint256"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "endBlock",
+              "type": "uint256"
+          },
+          {
+              "indexed": false,
+              "internalType": "string",
+              "name": "description",
+              "type": "string"
+          }
+      ],
+      "name": "ProposalCreated",
+      "type": "event"
+  },
+  {
+      "anonymous": false,
+      "inputs": [
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "id",
+              "type": "uint256"
+          }
+      ],
+      "name": "ProposalExecuted",
+      "type": "event"
+  },
+  {
+      "anonymous": false,
+      "inputs": [
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "id",
+              "type": "uint256"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "eta",
+              "type": "uint256"
+          }
+      ],
+      "name": "ProposalQueued",
+      "type": "event"
+  },
+  {
+      "anonymous": false,
+      "inputs": [
+          {
+              "indexed": false,
+              "internalType": "address",
+              "name": "voter",
+              "type": "address"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          },
+          {
+              "indexed": false,
+              "internalType": "bool",
+              "name": "support",
+              "type": "bool"
+          },
+          {
+              "indexed": false,
+              "internalType": "uint256",
+              "name": "votes",
+              "type": "uint256"
+          }
+      ],
+      "name": "VoteCast",
+      "type": "event"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "BALLOT_TYPEHASH",
+      "outputs": [
+          {
+              "internalType": "bytes32",
+              "name": "",
+              "type": "bytes32"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "DOMAIN_TYPEHASH",
+      "outputs": [
+          {
+              "internalType": "bytes32",
+              "name": "",
+              "type": "bytes32"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "NAME",
+      "outputs": [
+          {
+              "internalType": "string",
+              "name": "",
+              "type": "string"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [],
+      "name": "__abdicate",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [],
+      "name": "__acceptAdmin",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "address",
+              "name": "newPendingAdmin",
+              "type": "address"
+          },
+          {
+              "internalType": "uint256",
+              "name": "eta",
+              "type": "uint256"
+          }
+      ],
+      "name": "__executeSetTimelockPendingAdmin",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "address",
+              "name": "newPendingAdmin",
+              "type": "address"
+          },
+          {
+              "internalType": "uint256",
+              "name": "eta",
+              "type": "uint256"
+          }
+      ],
+      "name": "__queueSetTimelockPendingAdmin",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          }
+      ],
+      "name": "cancel",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          },
+          {
+              "internalType": "bool",
+              "name": "support",
+              "type": "bool"
+          }
+      ],
+      "name": "castVote",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          },
+          {
+              "internalType": "bool",
+              "name": "support",
+              "type": "bool"
+          },
+          {
+              "internalType": "uint8",
+              "name": "v",
+              "type": "uint8"
+          },
+          {
+              "internalType": "bytes32",
+              "name": "r",
+              "type": "bytes32"
+          },
+          {
+              "internalType": "bytes32",
+              "name": "s",
+              "type": "bytes32"
+          }
+      ],
+      "name": "castVoteBySig",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          }
+      ],
+      "name": "execute",
+      "outputs": [],
+      "payable": true,
+      "stateMutability": "payable",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          }
+      ],
+      "name": "getActions",
+      "outputs": [
+          {
+              "internalType": "address[]",
+              "name": "targets",
+              "type": "address[]"
+          },
+          {
+              "internalType": "uint256[]",
+              "name": "values",
+              "type": "uint256[]"
+          },
+          {
+              "internalType": "string[]",
+              "name": "signatures",
+              "type": "string[]"
+          },
+          {
+              "internalType": "bytes[]",
+              "name": "calldatas",
+              "type": "bytes[]"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          },
+          {
+              "internalType": "address",
+              "name": "voter",
+              "type": "address"
+          }
+      ],
+      "name": "getReceipt",
+      "outputs": [
+          {
+              "components": [
+                  {
+                      "internalType": "bool",
+                      "name": "hasVoted",
+                      "type": "bool"
+                  },
+                  {
+                      "internalType": "bool",
+                      "name": "support",
+                      "type": "bool"
+                  },
+                  {
+                      "internalType": "uint96",
+                      "name": "votes",
+                      "type": "uint96"
+                  }
+              ],
+              "internalType": "struct GovernorAlpha.Receipt",
+              "name": "",
+              "type": "tuple"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "guardian",
+      "outputs": [
+          {
+              "internalType": "address",
+              "name": "",
+              "type": "address"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [
+          {
+              "internalType": "address",
+              "name": "",
+              "type": "address"
+          }
+      ],
+      "name": "latestProposalIds",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "majorityPercentageVotes",
+      "outputs": [
+          {
+              "internalType": "uint96",
+              "name": "",
+              "type": "uint96"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "proposalCount",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "proposalMaxOperations",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "pure",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "proposalThreshold",
+      "outputs": [
+          {
+              "internalType": "uint96",
+              "name": "",
+              "type": "uint96"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "name": "proposals",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "id",
+              "type": "uint256"
+          },
+          {
+              "internalType": "uint32",
+              "name": "startBlock",
+              "type": "uint32"
+          },
+          {
+              "internalType": "uint32",
+              "name": "endBlock",
+              "type": "uint32"
+          },
+          {
+              "internalType": "uint96",
+              "name": "forVotes",
+              "type": "uint96"
+          },
+          {
+              "internalType": "uint96",
+              "name": "againstVotes",
+              "type": "uint96"
+          },
+          {
+              "internalType": "uint96",
+              "name": "quorum",
+              "type": "uint96"
+          },
+          {
+              "internalType": "uint96",
+              "name": "majorityPercentage",
+              "type": "uint96"
+          },
+          {
+              "internalType": "uint64",
+              "name": "eta",
+              "type": "uint64"
+          },
+          {
+              "internalType": "uint64",
+              "name": "startTime",
+              "type": "uint64"
+          },
+          {
+              "internalType": "bool",
+              "name": "canceled",
+              "type": "bool"
+          },
+          {
+              "internalType": "bool",
+              "name": "executed",
+              "type": "bool"
+          },
+          {
+              "internalType": "address",
+              "name": "proposer",
+              "type": "address"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "address[]",
+              "name": "targets",
+              "type": "address[]"
+          },
+          {
+              "internalType": "uint256[]",
+              "name": "values",
+              "type": "uint256[]"
+          },
+          {
+              "internalType": "string[]",
+              "name": "signatures",
+              "type": "string[]"
+          },
+          {
+              "internalType": "bytes[]",
+              "name": "calldatas",
+              "type": "bytes[]"
+          },
+          {
+              "internalType": "string",
+              "name": "description",
+              "type": "string"
+          }
+      ],
+      "name": "propose",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": false,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          }
+      ],
+      "name": "queue",
+      "outputs": [],
+      "payable": false,
+      "stateMutability": "nonpayable",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "quorumPercentageVotes",
+      "outputs": [
+          {
+              "internalType": "uint96",
+              "name": "",
+              "type": "uint96"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "quorumVotes",
+      "outputs": [
+          {
+              "internalType": "uint96",
+              "name": "",
+              "type": "uint96"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "staking",
+      "outputs": [
+          {
+              "internalType": "contract IStaking",
+              "name": "",
+              "type": "address"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [
+          {
+              "internalType": "uint256",
+              "name": "proposalId",
+              "type": "uint256"
+          }
+      ],
+      "name": "state",
+      "outputs": [
+          {
+              "internalType": "enum GovernorAlpha.ProposalState",
+              "name": "",
+              "type": "uint8"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "timelock",
+      "outputs": [
+          {
+              "internalType": "contract ITimelock",
+              "name": "",
+              "type": "address"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "view",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "votingDelay",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "pure",
+      "type": "function"
+  },
+  {
+      "constant": true,
+      "inputs": [],
+      "name": "votingPeriod",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "",
+              "type": "uint256"
+          }
+      ],
+      "payable": false,
+      "stateMutability": "pure",
+      "type": "function"
+  }
+]
diff --git a/packages/contracts/src/contracts/protocol/rsk.ts b/packages/contracts/src/contracts/protocol/rsk.ts
index c52ffb56a..e0ce28037 100644
--- a/packages/contracts/src/contracts/protocol/rsk.ts
+++ b/packages/contracts/src/contracts/protocol/rsk.ts
@@ -89,4 +89,12 @@ export const rsk: Record<string, AsyncContractConfigData> = {
     getAbi: async () =>
       (await import('../../abis/vestingRegistry.json')).default,
   },
+  governorAdmin: {
+    address: '0xfF25f66b7D7F385503D70574AE0170b6B1622dAd',
+    getAbi: async () => (await import('../../abis/governor.json')).default,
+  },
+  governorOwner: {
+    address: '0x6496DF39D000478a7A7352C01E0E713835051CcD',
+    getAbi: async () => (await import('../../abis/governor.json')).default,
+  },
 };
diff --git a/packages/contracts/src/contracts/protocol/rskTestnet.ts b/packages/contracts/src/contracts/protocol/rskTestnet.ts
index b5621e41c..2abb7e498 100644
--- a/packages/contracts/src/contracts/protocol/rskTestnet.ts
+++ b/packages/contracts/src/contracts/protocol/rskTestnet.ts
@@ -89,4 +89,12 @@ export const rskTestnet: Record<string, AsyncContractConfigData> = {
     getAbi: async () =>
       (await import('../../abis/vestingRegistry.json')).default,
   },
+  governorAdmin: {
+    address: '0xc9a558f522755C1Ea6C25a885ae8131E00c9971A',
+    getAbi: async () => (await import('../../abis/governor.json')).default,
+  },
+  governorOwner: {
+    address: '0x69dB16Aa6EEf291Fec522581F4fc9c82dFE60beD',
+    getAbi: async () => (await import('../../abis/governor.json')).default,
+  },
 };
diff --git a/packages/ui/src/1_atoms/Bar/Bar.module.css b/packages/ui/src/1_atoms/Bar/Bar.module.css
new file mode 100644
index 000000000..401ae0c48
--- /dev/null
+++ b/packages/ui/src/1_atoms/Bar/Bar.module.css
@@ -0,0 +1,20 @@
+.container {
+  @apply w-full relative h-8 flex flex-col justify-center items-center;
+}
+
+.background {
+  @apply w-full bg-gray-50 h-[0.356rem] relative rounded;
+}
+
+.foreground {
+  @apply h-[0.356rem] bg-primary-30 rounded;
+}
+
+.threshold {
+  @apply absolute h-[1.875rem] w-[0.52rem] flex flex-col justify-between items-center;
+  top: -0.76rem;
+}
+
+.threshold-line {
+  @apply w-[0.125rem] h-[0.475rem] bg-gray-40;
+}
diff --git a/packages/ui/src/1_atoms/Bar/Bar.stories.tsx b/packages/ui/src/1_atoms/Bar/Bar.stories.tsx
new file mode 100644
index 000000000..7b3a654a0
--- /dev/null
+++ b/packages/ui/src/1_atoms/Bar/Bar.stories.tsx
@@ -0,0 +1,34 @@
+import { Story, Meta } from '@storybook/react';
+
+import React, { ComponentProps } from 'react';
+
+import { Bar } from './Bar';
+
+export default {
+  title: 'Atoms/Bar',
+  component: Bar,
+} as Meta;
+
+const Template: Story<ComponentProps<typeof Bar>> = args => <Bar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 50,
+};
+
+Default.argTypes = {
+  value: {
+    control: 'number',
+    description: 'Value of the bar',
+  },
+  threshold: {
+    control: 'number',
+    description: 'Threshold of the bar',
+  },
+};
+
+export const WithThreshold = Template.bind({});
+WithThreshold.args = {
+  value: 50,
+  threshold: 80,
+};
diff --git a/packages/ui/src/1_atoms/Bar/Bar.tsx b/packages/ui/src/1_atoms/Bar/Bar.tsx
new file mode 100644
index 000000000..49ed9cb0c
--- /dev/null
+++ b/packages/ui/src/1_atoms/Bar/Bar.tsx
@@ -0,0 +1,39 @@
+import { FC, useMemo } from 'react';
+
+import styles from './Bar.module.css';
+
+export type BarProps = {
+  value: number;
+  threshold?: number;
+};
+
+export const Bar: FC<BarProps> = ({ value, threshold }) => {
+  const normalized = useMemo(
+    () => ({
+      value: Math.min(100, Math.max(0, value ?? 0)),
+      threshold: Math.min(100, Math.max(0, threshold ?? 0)),
+      hasThreshold: threshold !== undefined,
+    }),
+    [value, threshold],
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.background}>
+        <div
+          className={styles.foreground}
+          style={{ width: `${normalized.value}%` }}
+        ></div>
+        {normalized.hasThreshold && (
+          <div
+            className={styles.threshold}
+            style={{ left: `calc(${normalized.threshold}% - 0.26rem)` }}
+          >
+            <div className={styles['threshold-line']} />
+            <div className={styles['threshold-line']} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/1_atoms/index.tsx b/packages/ui/src/1_atoms/index.tsx
index 6e8fa5bf7..35088d1ea 100644
--- a/packages/ui/src/1_atoms/index.tsx
+++ b/packages/ui/src/1_atoms/index.tsx
@@ -14,3 +14,4 @@ export * from './DynamicValue';
 export * from './Lottie';
 export * from './ErrorBadge';
 export * from './Toggle';
+export * from './Bar/Bar';
diff --git a/yarn.lock b/yarn.lock
index 6b18fd60d..2456c33dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6181,6 +6181,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/debug@^4.0.0":
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
+  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/emscripten@^1.39.6":
   version "1.39.6"
   resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.6.tgz#698b90fe60d44acf93c31064218fbea93fbfd85a"
@@ -6446,6 +6453,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/node-fetch@^2.5.7":
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.2.tgz#d1a9c5fd049d9415dce61571557104dec3ec81da"
@@ -6511,7 +6523,7 @@
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601"
   integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.0.0":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -8590,6 +8602,11 @@ bail@^1.0.0:
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
   integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -9258,6 +9275,11 @@ ccount@^1.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
 chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -9337,6 +9359,11 @@ character-entities@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
   integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 character-reference-invalid@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
@@ -9714,6 +9741,11 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
+comma-separated-tokens@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
+  integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
+
 commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -10442,7 +10474,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -10479,6 +10511,13 @@ decimal.js@^10.4.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
   integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -10625,6 +10664,11 @@ dependency-graph@^0.11.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -10722,6 +10766,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
+diff@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -10810,6 +10859,15 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -10825,7 +10883,7 @@ domelementtype@1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -10851,6 +10909,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -10868,6 +10933,15 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -11110,6 +11184,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 entities@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
@@ -11387,6 +11466,11 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -13315,6 +13399,11 @@ hast-util-to-parse5@^6.0.0:
     xtend "^4.0.0"
     zwitch "^1.0.0"
 
+hast-util-whitespace@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
+  integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
+
 hastscript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
@@ -13497,6 +13586,16 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+htmlparser2@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 http-cache-semantics@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
@@ -14214,7 +14313,12 @@ is-plain-obj@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
   integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
 
-is-plain-object@5.0.0:
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
+is-plain-object@5.0.0, is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
   integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
@@ -15769,7 +15873,7 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-kleur@^4.1.4:
+kleur@^4.0.3, kleur@^4.1.4:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
@@ -16185,6 +16289,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+longest-streak@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
+  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -16353,6 +16462,11 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+markdown-table@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
+  integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -16376,6 +16490,109 @@ mdast-util-definitions@^4.0.0:
   dependencies:
     unist-util-visit "^2.0.0"
 
+mdast-util-definitions@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
+  integrity sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-find-and-replace@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz#cc2b774f7f3630da4bd592f61966fecade8b99b1"
+  integrity sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    escape-string-regexp "^5.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
+mdast-util-from-markdown@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+  integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-gfm-autolink-literal@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz#67a13abe813d7eba350453a5333ae1bc0ec05c06"
+  integrity sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    ccount "^2.0.0"
+    mdast-util-find-and-replace "^2.0.0"
+    micromark-util-character "^1.0.0"
+
+mdast-util-gfm-footnote@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.2.tgz#ce5e49b639c44de68d5bf5399877a14d5020424e"
+  integrity sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+    micromark-util-normalize-identifier "^1.0.0"
+
+mdast-util-gfm-strikethrough@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.3.tgz#5470eb105b483f7746b8805b9b989342085795b7"
+  integrity sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-table@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.7.tgz#3552153a146379f0f9c4c1101b071d70bbed1a46"
+  integrity sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    markdown-table "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-task-list-item@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.2.tgz#b280fcf3b7be6fd0cc012bbe67a59831eb34097b"
+  integrity sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-2.0.2.tgz#e92f4d8717d74bdba6de57ed21cc8b9552e2d0b6"
+  integrity sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==
+  dependencies:
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-gfm-autolink-literal "^1.0.0"
+    mdast-util-gfm-footnote "^1.0.0"
+    mdast-util-gfm-strikethrough "^1.0.0"
+    mdast-util-gfm-table "^1.0.0"
+    mdast-util-gfm-task-list-item "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-phrasing@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz#c7c21d0d435d7fb90956038f02e8702781f95463"
+  integrity sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unist-util-is "^5.0.0"
+
 mdast-util-to-hast@10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz#0cfc82089494c52d46eb0e3edb7a4eb2aea021eb"
@@ -16390,11 +16607,46 @@ mdast-util-to-hast@10.0.1:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
+mdast-util-to-hast@^12.1.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz#045d2825fb04374e59970f5b3f279b5700f6fb49"
+  integrity sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-definitions "^5.0.0"
+    micromark-util-sanitize-uri "^1.1.0"
+    trim-lines "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6"
+  integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-phrasing "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    micromark-util-decode-string "^1.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
 mdast-util-to-string@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
+  integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -16523,6 +16775,279 @@ microevent.ts@~0.1.1:
   resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
   integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
 
+micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
+  integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-autolink-literal@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.5.tgz#5853f0e579bbd8ef9e39a7c0f0f27c5a063a66e7"
+  integrity sha512-z3wJSLrDf8kRDOh2qBtoTRD53vJ+CWIyo7uyZuxf/JAbNJjiHsOpG1y5wxk8drtv3ETAHutCu6N3thkOOgueWg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-extension-gfm-footnote@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.2.tgz#05e13034d68f95ca53c99679040bc88a6f92fe2e"
+  integrity sha512-Yxn7z7SxgyGWRNa4wzf8AhYYWNrwl5q1Z8ii+CSTTIqVkmGZF1CElX2JI8g5yGoM3GAman9/PVCUFUSJ0kB/8Q==
+  dependencies:
+    micromark-core-commonmark "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-strikethrough@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.7.tgz#c8212c9a616fa3bf47cb5c711da77f4fdc2f80af"
+  integrity sha512-sX0FawVE1o3abGk3vRjOH50L5TTLr3b5XMqnP9YDRb34M0v5OoZhG+OHFz1OffZ9dlwgpTBKaT4XW/AsUVnSDw==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-table@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.7.tgz#dcb46074b0c6254c3fc9cc1f6f5002c162968008"
+  integrity sha512-3ZORTHtcSnMQEKtAOsBQ9/oHp9096pI/UvdPtN7ehKvrmZZ2+bbWhi0ln+I9drmwXMt5boocn6OlwQzNXeVeqw==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-tagfilter@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz#aa7c4dd92dabbcb80f313ebaaa8eb3dac05f13a7"
+  integrity sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-extension-gfm-task-list-item@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.5.tgz#b52ce498dc4c69b6a9975abafc18f275b9dde9f4"
+  integrity sha512-RMFXl2uQ0pNQy6Lun2YBYT9g9INXtWJULgbt01D/x8/6yJ2qpKyzdZD3pi6UIkzF++Da49xAelVKUeUMqd5eIQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-2.0.3.tgz#e517e8579949a5024a493e49204e884aa74f5acf"
+  integrity sha512-vb9OoHqrhCmbRidQv/2+Bc6pkP0FrtlhurxZofvOEy5o8RtuuvTq+RQ1Vw5ZDNrVraQZu3HixESqbG+0iKk/MQ==
+  dependencies:
+    micromark-extension-gfm-autolink-literal "^1.0.0"
+    micromark-extension-gfm-footnote "^1.0.0"
+    micromark-extension-gfm-strikethrough "^1.0.0"
+    micromark-extension-gfm-table "^1.0.0"
+    micromark-extension-gfm-tagfilter "^1.0.0"
+    micromark-extension-gfm-task-list-item "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
+  integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
+  integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
+  integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
+  integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
+  integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
+  integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
+  integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
+  integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
+  integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
+  integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
+  integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
+  integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
+  integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
+  integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
+  integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0, micromark-util-sanitize-uri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
+  integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
+  integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
+  integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
+  integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==
+
+micromark@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
+  integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -16784,6 +17309,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -16913,6 +17443,11 @@ nanoid@^3.3.1, nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -17594,6 +18129,11 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 parse5@6.0.1, parse5@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -18524,6 +19064,15 @@ postcss@^8.2.15, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.18, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.3.11:
+  version "8.4.29"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
+  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 preact@10.4.1:
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@@ -18734,6 +19283,11 @@ property-information@^5.0.0, property-information@^5.3.0:
   dependencies:
     xtend "^4.0.0"
 
+property-information@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
+  integrity sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -19126,6 +19680,27 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-markdown@8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
+  integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/prop-types" "^15.0.0"
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    prop-types "^15.0.0"
+    property-information "^6.0.0"
+    react-is "^18.0.0"
+    remark-parse "^10.0.0"
+    remark-rehype "^10.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.4.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+
 react-merge-refs@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
@@ -19217,6 +19792,11 @@ react-syntax-highlighter@^15.4.5:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-timer-hook@3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/react-timer-hook/-/react-timer-hook-3.0.7.tgz#ac42c43d0034b873cbf97b44eb34ccb2b11fe5e0"
+  integrity sha512-ATpNcU+PQRxxfNBPVqce2+REtjGAlwmfoNQfcEBMZFxPj0r3GYdKhyPHdStvqrejejEi0QvqaJZjy2lBlFvAsA==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -19487,6 +20067,16 @@ remark-footnotes@2.0.0:
   resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f"
   integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==
 
+remark-gfm@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
+  integrity sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-gfm "^2.0.0"
+    micromark-extension-gfm "^2.0.0"
+    unified "^10.0.0"
+
 remark-mdx@1.6.22:
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd"
@@ -19523,6 +20113,25 @@ remark-parse@8.0.3:
     vfile-location "^3.0.0"
     xtend "^4.0.1"
 
+remark-parse@^10.0.0:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
+  integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-rehype@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-hast "^12.1.0"
+    unified "^10.0.0"
+
 remark-slug@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-6.1.0.tgz#0503268d5f0c4ecb1f33315c00465ccdd97923ce"
@@ -19841,6 +20450,13 @@ rxjs@7.5.6, rxjs@^7.5.5, rxjs@^7.5.6:
   dependencies:
     tslib "^2.1.0"
 
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -19907,6 +20523,18 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sanitize-html@2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
+  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sanitize.css@*:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
@@ -20492,6 +21120,11 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+space-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
+  integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
+
 spawndamnit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/spawndamnit/-/spawndamnit-2.0.0.tgz#9f762ac5c3476abb994b42ad592b5ad22bb4b0ad"
@@ -20980,6 +21613,13 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-to-object@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.2.tgz#a8247057111dea8bd3b8a1a66d2d0c9cf9218a54"
+  integrity sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -21463,6 +22103,11 @@ trezor-connect@8.2.11:
     cross-fetch "^3.1.5"
     events "^3.3.0"
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -21488,6 +22133,11 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+trough@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
+  integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -21862,6 +22512,19 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
+unified@^10.0.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -21903,16 +22566,35 @@ unist-util-generated@^1.0.0:
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b"
   integrity sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==
 
+unist-util-generated@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"
+  integrity sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==
+
 unist-util-is@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
   integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
 
+unist-util-is@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+  integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
 unist-util-position@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
   integrity sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==
 
+unist-util-position@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.4.tgz#93f6d8c7d6b373d9b825844645877c127455f037"
+  integrity sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
 unist-util-remove-position@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
@@ -21934,6 +22616,13 @@ unist-util-stringify-position@^2.0.0:
   dependencies:
     "@types/unist" "^2.0.2"
 
+unist-util-stringify-position@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
+  integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
 unist-util-visit-parents@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz#65a6ce698f78a6b0f56aa0e88f13801886cdaef6"
@@ -21942,6 +22631,14 @@ unist-util-visit-parents@^3.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
+unist-util-visit-parents@^5.0.0, unist-util-visit-parents@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
 unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
@@ -21951,6 +22648,15 @@ unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
+unist-util-visit@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.1.1"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -22157,6 +22863,16 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uvu@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -22224,6 +22940,14 @@ vfile-message@^2.0.0:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
+vfile-message@^3.0.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
+  integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
 vfile@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
@@ -22234,6 +22958,16 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+vfile@^5.0.0:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
+  integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -23176,3 +23910,8 @@ zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
   integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+
+zwitch@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==