diff --git a/package.json b/package.json
index 8c8775444..c49cad9e4 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,12 @@
     "@types/iban": "^0.0.32",
     "@unstoppabledomains/resolution": "^5.0.1",
     "@vue/composition-api": "^0.4.0",
+    "chart.js": "^3.1.1",
+    "chartjs-adapter-luxon": "^1.0.0",
     "core-js": "^3.6.4",
     "iban": "^0.0.14",
     "idb-keyval": "^5.0.2",
+    "luxon": "^1.27.0",
     "pinia": "^0.0.5",
     "promise.allsettled": "^1.0.2",
     "register-service-worker": "^1.7.0",
diff --git a/public/img/staking/arrow-right.svg b/public/img/staking/arrow-right.svg
new file mode 100644
index 000000000..d259e8b8e
--- /dev/null
+++ b/public/img/staking/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.00098 1L4.53601 4.53604L1.00098 8.07109" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/img/staking/background-collar.svg b/public/img/staking/background-collar.svg
new file mode 100644
index 000000000..afe94207a
--- /dev/null
+++ b/public/img/staking/background-collar.svg
@@ -0,0 +1,3 @@
+<svg width="420" height="272" viewBox="0 0 420 272" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M506 281.25L-84.5 281.25L-76 -5.08801e-05C156.632 40.7667 277.346 41.2331 506 0L506 281.25Z" fill="#F8F8F8"/>
+</svg>
diff --git a/public/img/staking/dot.svg b/public/img/staking/dot.svg
new file mode 100644
index 000000000..f500223b5
--- /dev/null
+++ b/public/img/staking/dot.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle opacity="0.4" cx="1.59375" cy="2" r="1.5" fill="#1F2348"/>
+</svg>
diff --git a/public/img/staking/estimated-rewards-projection.svg b/public/img/staking/estimated-rewards-projection.svg
new file mode 100644
index 000000000..0d9687f83
--- /dev/null
+++ b/public/img/staking/estimated-rewards-projection.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 140"><defs><mask id="a" x="-8" y="-6.67" width="252" height="129.41" maskUnits="userSpaceOnUse"><path d="M244,85.13V4.63L-8,72.13l3.86,43.24Z" fill="#1f2348"/></mask><radialGradient id="b" cx="-6285.07" cy="1619.17" r="1" gradientTransform="matrix(-36.5, 0, 0, 19, -229230.09, -30726.2)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41a38e"/><stop offset="1" stop-color="#21bca5"/></radialGradient><radialGradient id="c" cx="-6285.07" cy="1619.17" r="1" gradientTransform="matrix(-36.5, 0, 0, 19, -229230.09, -30659.85)" xlink:href="#b"/></defs><g opacity="0.2"><g opacity="0.5"><line x1="0.5" y1="100.63" x2="239.5" y2="100.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="80.63" x2="239.5" y2="80.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="60.63" x2="239.5" y2="60.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="40.63" x2="239.5" y2="40.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="20.63" x2="239.5" y2="20.63" fill="none" stroke="#fff" stroke-linecap="round"/></g><line x1="0.75" y1="120.38" x2="239.25" y2="120.38" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="0.75" y1="120" x2="239.25" y2="120" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="76.75" y1="124.75" x2="76.75" y2="111.25" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="76.75" y1="44.55" x2="76.75" y2="1.05" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/></g><g mask="url(#a)"><line x1="84.5" y1="46.23" x2="84.5" y2="105.28" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="92.5" y1="44.55" x2="92.5" y2="104.28" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="100.5" y1="42.31" x2="100.5" y2="103.68" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="68.5" y1="50.69" x2="68.5" y2="106.84" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="108.5" y1="40.63" x2="108.5" y2="101.68" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="4.5" y1="68.41" x2="4.5" y2="115" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="12.5" y1="66.64" x2="12.5" y2="113.53" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="20.5" y1="64.34" x2="20.5" y2="112.54" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="28.5" y1="62.2" x2="28.5" y2="111.4" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="36.5" y1="59.25" x2="36.5" y2="110.57" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="44.5" y1="57.93" x2="44.5" y2="109.41" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="52.5" y1="55.27" x2="52.5" y2="108.59" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="60.5" y1="53.85" x2="60.5" y2="107.35" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="116.5" y1="38.7" x2="116.5" y2="100.63" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="124.5" y1="36.56" x2="124.5" y2="100.25" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="132.5" y1="34.75" x2="132.5" y2="99.13" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="140.5" y1="32.64" x2="140.5" y2="98" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="220.5" y1="10.53" x2="220.5" y2="122.74" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="228.5" y1="8.78" x2="228.5" y2="86.86" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="236.5" y1="6.65" x2="236.5" y2="85.81" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="164.5" y1="24.1" x2="164.5" y2="94.4" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="172.5" y1="22.8" x2="172.5" y2="94.22" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="180.5" y1="21.6" x2="180.5" y2="92.79" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="188.5" y1="18.92" x2="188.5" y2="91.62" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="196.5" y1="17.24" x2="196.5" y2="90.46" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="204.5" y1="14.72" x2="204.5" y2="90.36" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="212.5" y1="12.69" x2="212.5" y2="88.7" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="148.5" y1="29.3" x2="148.5" y2="97.92" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="76.75" y1="47.82" x2="76.75" y2="106.84" fill="none" stroke="#21bca5" stroke-width="1.5" opacity="0.7" style="isolation:isolate"/><line x1="157" y1="-5.17" x2="157" y2="121.24" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="3" stroke-dasharray="0.1 6"/></g><path d="M.75,115l238.5-29.5" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="1.5"/><path d="M.75,69.5,239.25,5.9" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="1.5"/><rect x="138.75" y="18.92" width="36.5" height="19" rx="2" fill="url(#b)"/><path d="M145.09,32.67V31.53L148,28.4a5.18,5.18,0,0,0,.74-1,2,2,0,0,0,.24-.92,1.1,1.1,0,0,0-.34-.89,1.39,1.39,0,0,0-1-.3,3.08,3.08,0,0,0-1.16.23,4.24,4.24,0,0,0-1.15.66L144.82,25a3.51,3.51,0,0,1,1.31-.72,4.9,4.9,0,0,1,1.61-.27,3.65,3.65,0,0,1,1.46.28,2,2,0,0,1,1,.8,2.24,2.24,0,0,1,.33,1.24,3,3,0,0,1-.31,1.39,6.19,6.19,0,0,1-1.05,1.44l-2.61,2.76-.18-.51h4.48v1.24Zm10.74.1a2.69,2.69,0,0,1-2.32-1.12,5.46,5.46,0,0,1-.8-3.25,5.54,5.54,0,0,1,.79-3.25,3,3,0,0,1,4.22-.42,4.16,4.16,0,0,1,.42.42,5.44,5.44,0,0,1,.81,3.24,5.52,5.52,0,0,1-.81,3.26A2.67,2.67,0,0,1,155.83,32.77Zm0-1.2a1.27,1.27,0,0,0,1.21-.76,5.72,5.72,0,0,0,.38-2.42A5.59,5.59,0,0,0,157,26a1.36,1.36,0,0,0-1.83-.6h0a1.34,1.34,0,0,0-.6.6,5.54,5.54,0,0,0-.38,2.38,5.72,5.72,0,0,0,.38,2.42A1.27,1.27,0,0,0,155.83,31.57Zm6.67-2.27a1.75,1.75,0,0,1-1.46-.65,3,3,0,0,1-.54-2,3,3,0,0,1,.54-2,2,2,0,0,1,2.83-.1h0l.1.1a3,3,0,0,1,.54,2,3,3,0,0,1-.54,2A1.77,1.77,0,0,1,162.5,29.3Zm0-1a.56.56,0,0,0,.55-.38,3.35,3.35,0,0,0,.18-1.26,3,3,0,0,0-.19-1.25.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.14,3.14,0,0,0-.18,1.25A3.24,3.24,0,0,0,162,28a.59.59,0,0,0,.5.33Zm-.2,4.34,4.95-8.54h1.44l-4.94,8.54Zm6.19,0A1.77,1.77,0,0,1,167,32a3,3,0,0,1-.54-2,3,3,0,0,1,.54-2,2,2,0,0,1,2.83-.09h0L170,28a3,3,0,0,1,.54,2,3,3,0,0,1-.54,2,1.76,1.76,0,0,1-1.46.73Zm0-1a.56.56,0,0,0,.55-.38,3.35,3.35,0,0,0,.18-1.26,3,3,0,0,0-.19-1.25.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.14,3.14,0,0,0-.18,1.25,3.35,3.35,0,0,0,.18,1.26.58.58,0,0,0,.55.49Z" fill="#fff"/><rect x="138.75" y="85.28" width="36.5" height="19" rx="2" fill="url(#c)"/><path d="M147.83,99.12a4.76,4.76,0,0,1-1.67-.28A2.64,2.64,0,0,1,145,98a2.15,2.15,0,0,1-.39-1.28,1.93,1.93,0,0,1,.59-1.47,2.65,2.65,0,0,1,1.6-.7v.18a2.68,2.68,0,0,1-1.43-.72,1.86,1.86,0,0,1-.53-1.34,2,2,0,0,1,.38-1.22,2.54,2.54,0,0,1,1.07-.79,3.91,3.91,0,0,1,1.55-.28,3.86,3.86,0,0,1,1.54.28,2.46,2.46,0,0,1,1.07.79,2,2,0,0,1,.39,1.22A1.83,1.83,0,0,1,150.3,94a2.54,2.54,0,0,1-1.41.71v-.18a2.68,2.68,0,0,1,1.6.72,1.93,1.93,0,0,1,.58,1.45,2,2,0,0,1-.41,1.28,2.41,2.41,0,0,1-1.11.83A4.8,4.8,0,0,1,147.83,99.12Zm0-1.2a2.11,2.11,0,0,0,1.27-.33,1.21,1.21,0,0,0,.24-1.69,1.36,1.36,0,0,0-.24-.24,2.57,2.57,0,0,0-1.25-.46,2.87,2.87,0,0,0-1.26.46,1.22,1.22,0,0,0-.22,1.71,1.15,1.15,0,0,0,.22.22A2.16,2.16,0,0,0,147.83,97.92Zm0-3.7a2.27,2.27,0,0,0,1.09-.44,1.15,1.15,0,0,0,.44-.94,1.07,1.07,0,0,0-.42-.92,2,2,0,0,0-2.22,0,1.06,1.06,0,0,0-.41.92,1.18,1.18,0,0,0,.43.94A2.27,2.27,0,0,0,147.83,94.22Zm8,4.91A2.68,2.68,0,0,1,153.51,98a5.46,5.46,0,0,1-.8-3.25,5.54,5.54,0,0,1,.79-3.25,3,3,0,0,1,4.22-.42,4.16,4.16,0,0,1,.42.42,6.93,6.93,0,0,1,0,6.5A2.64,2.64,0,0,1,155.83,99.13Zm0-1.2a1.27,1.27,0,0,0,1.21-.76,5.72,5.72,0,0,0,.38-2.42,5.59,5.59,0,0,0-.38-2.39,1.36,1.36,0,0,0-1.83-.6,1.34,1.34,0,0,0-.6.6,5.54,5.54,0,0,0-.38,2.38,5.72,5.72,0,0,0,.38,2.42A1.28,1.28,0,0,0,155.83,97.93Zm6.67-2.27A1.81,1.81,0,0,1,161,95a4,4,0,0,1,0-4,2,2,0,0,1,2.83-.1h0a.47.47,0,0,1,.1.1,4,4,0,0,1,0,4A1.8,1.8,0,0,1,162.5,95.66Zm0-1a.58.58,0,0,0,.55-.39,3,3,0,0,0,.18-1.26A2.93,2.93,0,0,0,163,91.8a.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.28,3.28,0,0,0-.18,1.24A3.07,3.07,0,0,0,162,94.3a.57.57,0,0,0,.5.39ZM162.3,99l4.95-8.54h1.44L163.75,99Zm6.19,0a1.82,1.82,0,0,1-1.46-.65,3.88,3.88,0,0,1,0-3.95,2,2,0,0,1,2.83-.09h0l.09.09a3.88,3.88,0,0,1,0,3.95,1.76,1.76,0,0,1-1.46.73Zm0-1a.58.58,0,0,0,.55-.39,3,3,0,0,0,.18-1.26,2.91,2.91,0,0,0-.19-1.24.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.28,3.28,0,0,0-.18,1.24,3,3,0,0,0,.18,1.26.58.58,0,0,0,.55.5Z" fill="#fff"/><path d="M66.8,139.09V133l.72.15-2.3,1.39v-1.27L67.4,132h.82v7.19Zm-1.7.65v-1.15h4.84v1.15Zm7,0v-1.05l2.65-2.87a4,4,0,0,0,.68-.95,1.78,1.78,0,0,0,.22-.84,1.09,1.09,0,0,0-.3-.82,1.34,1.34,0,0,0-.89-.27,2.8,2.8,0,0,0-1.07.21,4.26,4.26,0,0,0-1.06.6l-.48-1a3.29,3.29,0,0,1,1.2-.66,4.57,4.57,0,0,1,1.47-.24,3.23,3.23,0,0,1,1.34.25,1.92,1.92,0,0,1,.88.74,2,2,0,0,1,.31,1.13,3,3,0,0,1-.28,1.28,6.06,6.06,0,0,1-1,1.31l-2.39,2.53-.16-.47h4.1v1.15Zm7.47,0V131.9h1.14l3,6.75h-.54L86,131.9h1.14v7.84H85.88v-5.8l.38.09-2.45,5.71h-.93L80.37,134l.4-.09v5.8Z" fill="#fff" opacity="0.4" style="isolation:isolate"/></svg>
diff --git a/public/img/staking/graph-preview-black.png b/public/img/staking/graph-preview-black.png
new file mode 100644
index 000000000..125583447
Binary files /dev/null and b/public/img/staking/graph-preview-black.png differ
diff --git a/public/img/staking/graph-preview-black.svg b/public/img/staking/graph-preview-black.svg
new file mode 100644
index 000000000..48773b25e
--- /dev/null
+++ b/public/img/staking/graph-preview-black.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 419 82" xml:space="preserve"><style>.st2{opacity:.15;fill:none;stroke:#fff;enable-background:new}</style><path fill="none" d="M0 0h419v82H0z"/><defs><path id="SVGID_1_" d="M210.28 77.61l-23.72 4.8c-13.64 2.76-26.83 7.4-39.19 13.8l-4.05 2.1c-9.52 4.92-19.54 8.82-29.89 11.61l-35.57 9.59H589.5v-168l-179.33 61.7a108.9 108.9 0 0 1-22.9 5.21 109.109 109.109 0 0 0-40 12.8l-2.16 1.19a121.616 121.616 0 0 1-41.72 13.9l-3.43.48A140.555 140.555 0 0 0 257.19 60l-10.12 5a150.19 150.19 0 0 1-36.79 12.61z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g clip-path="url(#SVGID_2_)"><path class="st2" d="M270.5-397.5v544M278.5-397.5v544M286.5-397.5v544M294.5-397.5v544M302.5-397.5v544M198.5-397.5v544M206.5-397.5v544M214.5-397.5v544M222.5-397.5v544M230.5-397.5v544M238.5-397.5v544M246.5-397.5v544M254.5-397.5v544M262.5-397.5v544M126.5-397.5v544M134.5-397.5v544M142.5-397.5v544M150.5-397.5v544M158.5-397.5v544M166.5-397.5v544M174.5-397.5v544M182.5-397.5v544M190.5-397.5v544M310.5-397.5v544M318.5-397.5v544M326.5-397.5v544"/><path opacity=".15" fill="none" stroke="#fff" stroke-linecap="round" d="M334.5-397v543"/><path class="st2" d="M414.5-397.5v544M358.5-397.5v544M366.5-397.5v544M374.5-397.5v544M382.5-397.5v544M390.5-397.5v544M398.5-397.5v544M406.5-397.5v544M342.5-397.5v544M350.5-397.5v544"/></g><path d="M77.86 118.51l35.57-9.59c10.35-2.79 20.37-6.69 29.89-11.61l4.05-2.1c12.36-6.4 25.55-11.04 39.19-13.8l23.72-4.8A150.19 150.19 0 0 0 247.07 64l10.12-5a140.732 140.732 0 0 1 42.75-13.22l3.42-.48c14.64-2.06 28.77-6.77 41.72-13.9l2.16-1.19a109.109 109.109 0 0 1 40-12.8h0a108.9 108.9 0 0 0 22.9-5.21L589.5-49.5" opacity=".3" fill="none" stroke="#fff" stroke-width="1.5"/></svg>
\ No newline at end of file
diff --git a/public/img/staking/graph-preview-white.png b/public/img/staking/graph-preview-white.png
new file mode 100644
index 000000000..66175d237
Binary files /dev/null and b/public/img/staking/graph-preview-white.png differ
diff --git a/public/img/staking/graph-preview-white.svg b/public/img/staking/graph-preview-white.svg
new file mode 100644
index 000000000..8d94f55fb
--- /dev/null
+++ b/public/img/staking/graph-preview-white.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 419 82" xml:space="preserve"><style>.st2{opacity:.15;fill:none;stroke:#000;enable-background:new}</style><path fill="none" d="M0 0h419v82H0z"/><defs><path id="SVGID_1_" d="M210.28 77.61l-23.72 4.8c-13.64 2.76-26.83 7.4-39.19 13.8l-4.05 2.1c-9.52 4.92-19.54 8.82-29.89 11.61l-35.57 9.59H589.5v-168l-179.33 61.7a108.9 108.9 0 0 1-22.9 5.21 109.109 109.109 0 0 0-40 12.8l-2.16 1.19a121.616 121.616 0 0 1-41.72 13.9l-3.43.48A140.555 140.555 0 0 0 257.19 60l-10.12 5a150.19 150.19 0 0 1-36.79 12.61z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g clip-path="url(#SVGID_2_)"><path class="st2" d="M270.5-397.5v544M278.5-397.5v544M286.5-397.5v544M294.5-397.5v544M302.5-397.5v544M198.5-397.5v544M206.5-397.5v544M214.5-397.5v544M222.5-397.5v544M230.5-397.5v544M238.5-397.5v544M246.5-397.5v544M254.5-397.5v544M262.5-397.5v544M126.5-397.5v544M134.5-397.5v544M142.5-397.5v544M150.5-397.5v544M158.5-397.5v544M166.5-397.5v544M174.5-397.5v544M182.5-397.5v544M190.5-397.5v544M310.5-397.5v544M318.5-397.5v544M326.5-397.5v544"/><path opacity=".15" fill="none" stroke="#000" stroke-linecap="round" d="M334.5-397v543"/><path class="st2" d="M414.5-397.5v544M358.5-397.5v544M366.5-397.5v544M374.5-397.5v544M382.5-397.5v544M390.5-397.5v544M398.5-397.5v544M406.5-397.5v544M342.5-397.5v544M350.5-397.5v544"/></g><path d="M77.86 118.51l35.57-9.59c10.35-2.79 20.37-6.69 29.89-11.61l4.05-2.1c12.36-6.4 25.55-11.04 39.19-13.8l23.72-4.8A150.19 150.19 0 0 0 247.07 64l10.12-5a140.732 140.732 0 0 1 42.75-13.22l3.42-.48c14.64-2.06 28.77-6.77 41.72-13.9l2.16-1.19a109.109 109.109 0 0 1 40-12.8h0a108.9 108.9 0 0 0 22.9-5.21L589.5-49.5" opacity=".3" fill="none" stroke="#000" stroke-width="1.5"/></svg>
\ No newline at end of file
diff --git a/public/img/staking/providers/ace-staking.png b/public/img/staking/providers/ace-staking.png
new file mode 100644
index 000000000..96fbf13fe
Binary files /dev/null and b/public/img/staking/providers/ace-staking.png differ
diff --git a/public/img/staking/providers/icestaking.png b/public/img/staking/providers/icestaking.png
new file mode 100644
index 000000000..e6a67cf97
Binary files /dev/null and b/public/img/staking/providers/icestaking.png differ
diff --git a/public/img/staking/providers/nimiq-watch.svg b/public/img/staking/providers/nimiq-watch.svg
new file mode 100644
index 000000000..0e83dbeeb
--- /dev/null
+++ b/public/img/staking/providers/nimiq-watch.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42">
+  <circle cx="21" cy="21" r="19" fill="#e9b213"/>
+  <defs>
+    <circle id="a" cx="21" cy="21" r="21"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
+    <path d="M21.46 7.6c-.2-.33-.67-.6-1.06-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6L24.49 14c.2-.33.2-.87 0-1.21L21.46 7.6z" fill-opacity=".9"/>
+    <path d="M33.92 14.7c-.2-.33-.67-.6-1.05-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6l3.03-5.19c.2-.33.2-.87 0-1.21l-3.03-5.19z" fill-opacity=".6"/>
+    <path d="M21.56 21.8c-.2-.33-.67-.6-1.05-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6l3.03-5.19c.2-.33.2-.87 0-1.21l-3.03-5.19z" fill-opacity=".8"/>
+  </g>
+</svg>
diff --git a/public/img/staking/providers/nimpool.svg b/public/img/staking/providers/nimpool.svg
new file mode 100644
index 000000000..345c8b6cf
--- /dev/null
+++ b/public/img/staking/providers/nimpool.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42">
+  <defs>
+    <circle id="a" cx="21" cy="21" r="19"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd">
+    <path d="M0 0v42h42V0zm15 27.8h-3.3V14.2H15zm18.2-6.5a6.9 6.9 0 01-1.6 4.9 5.5 5.5 0 01-4.3 1.8 5.6 5.6 0 01-4.3-1.8 7 7 0 01-1.7-5v-.5a6.9 6.9 0 011.7-4.9 5.6 5.6 0 014.3-1.8 5.6 5.6 0 014.3 1.8 6.9 6.9 0 011.6 5zm-6-4.7c-1.7 0-2.6 1.3-2.6 4.1v.6a6 6 0 00.7 3 2.2 2.2 0 002 1.1 2.1 2.1 0 001.9-1 5.7 5.7 0 00.7-3.1v-.6c0-2.7-.9-4.1-2.6-4.1z"/>
+  </g>
+</svg>
diff --git a/public/img/staking/providers/overstake.svg b/public/img/staking/providers/overstake.svg
new file mode 100644
index 000000000..3fa9f4964
--- /dev/null
+++ b/public/img/staking/providers/overstake.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="21" cy="21" r="19"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd">
+    <rect width="42" height="42" fill="#FF795F"/>
+    <path d="M20.9998 28.4139C19.2146 28.4139 18.7868 26.964 18.7868 21.0014C18.7868 14.95 19.2146 13.5888 20.9998 13.5888C22.785 13.5888 23.2129 15.0388 23.2129 21.0014C23.2129 26.964 22.785 28.4139 20.9998 28.4139ZM20.9998 8.48438C12.0886 8.48438 10.8936 14.6985 10.8936 20.9126C10.8936 27.8073 11.7345 33.5184 20.9998 33.5184C29.911 33.5184 31.1061 27.2155 31.1061 21.0014C31.1061 14.1067 30.2651 8.48438 20.9998 8.48438Z" fill="white"/>
+  </g>
+</svg>
diff --git a/public/img/staking/staking.svg b/public/img/staking/staking.svg
new file mode 100644
index 000000000..41238e969
--- /dev/null
+++ b/public/img/staking/staking.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <line x1="8.25" y1="8.25" x2="8.25" y2="12.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M12.75,6.75q0,4.5-4.5,4.5C8.25,7,9.5,6.75,12.75,6.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M4.25,4.25c0,3.25,1,5,4,5C8.25,6,8,4.25,4.25,4.25Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+</svg>
diff --git a/public/img/staking/three-leaf-staking.svg b/public/img/staking/three-leaf-staking.svg
new file mode 100644
index 000000000..0f7b19d1d
--- /dev/null
+++ b/public/img/staking/three-leaf-staking.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <line x1="7.75" y1="8.75" x2="7.75" y2="13.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M12.25,7.75c0,2.95-1.55,4.5-4.5,4.5C7.75,8.07,9.05,7.75,12.25,7.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M9.5,3c1.33,2.64.89,4.67-1.75,6C6.36,5.15,7,4.36,9.5,3Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M3.75,6.77c0,3.1,1.18,4.47,4,4.47C7.75,8.11,7.21,6.77,3.75,6.77Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+</svg>
diff --git a/public/mockups/Choose Validator.png b/public/mockups/Choose Validator.png
new file mode 100644
index 000000000..684d975ec
Binary files /dev/null and b/public/mockups/Choose Validator.png differ
diff --git a/public/mockups/Overview.png b/public/mockups/Overview.png
new file mode 100644
index 000000000..f43db321f
Binary files /dev/null and b/public/mockups/Overview.png differ
diff --git a/public/mockups/Set Amount.png b/public/mockups/Set Amount.png
new file mode 100644
index 000000000..74a390113
Binary files /dev/null and b/public/mockups/Set Amount.png differ
diff --git a/public/mockups/Staking Details.png b/public/mockups/Staking Details.png
new file mode 100644
index 000000000..75d89bc2a
Binary files /dev/null and b/public/mockups/Staking Details.png differ
diff --git a/public/mockups/Welcome.png b/public/mockups/Welcome.png
new file mode 100644
index 000000000..e79a487e6
Binary files /dev/null and b/public/mockups/Welcome.png differ
diff --git a/public/mockups/[mobile]AccountOverview.png b/public/mockups/[mobile]AccountOverview.png
new file mode 100644
index 000000000..5b5490f66
Binary files /dev/null and b/public/mockups/[mobile]AccountOverview.png differ
diff --git a/public/mockups/[mobile]Graph.png b/public/mockups/[mobile]Graph.png
new file mode 100644
index 000000000..ba63852f1
Binary files /dev/null and b/public/mockups/[mobile]Graph.png differ
diff --git a/public/mockups/[mobile]GraphCenterTooltip.png b/public/mockups/[mobile]GraphCenterTooltip.png
new file mode 100644
index 000000000..fa8f72e96
Binary files /dev/null and b/public/mockups/[mobile]GraphCenterTooltip.png differ
diff --git a/public/mockups/[mobile]Intro.png b/public/mockups/[mobile]Intro.png
new file mode 100644
index 000000000..b44a0294c
Binary files /dev/null and b/public/mockups/[mobile]Intro.png differ
diff --git a/public/mockups/[mobile]ValidatorConfirm.png b/public/mockups/[mobile]ValidatorConfirm.png
new file mode 100644
index 000000000..5ff78ca1e
Binary files /dev/null and b/public/mockups/[mobile]ValidatorConfirm.png differ
diff --git a/public/mockups/[mobile]Validators.png b/public/mockups/[mobile]Validators.png
new file mode 100644
index 000000000..82cf052c7
Binary files /dev/null and b/public/mockups/[mobile]Validators.png differ
diff --git a/src/assets/staking/background-collar.svg b/src/assets/staking/background-collar.svg
new file mode 100644
index 000000000..afe94207a
--- /dev/null
+++ b/src/assets/staking/background-collar.svg
@@ -0,0 +1,3 @@
+<svg width="420" height="272" viewBox="0 0 420 272" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M506 281.25L-84.5 281.25L-76 -5.08801e-05C156.632 40.7667 277.346 41.2331 506 0L506 281.25Z" fill="#F8F8F8"/>
+</svg>
diff --git a/src/assets/staking/providers/ace-staking.png b/src/assets/staking/providers/ace-staking.png
new file mode 100644
index 000000000..96fbf13fe
Binary files /dev/null and b/src/assets/staking/providers/ace-staking.png differ
diff --git a/src/assets/staking/providers/icestaking.png b/src/assets/staking/providers/icestaking.png
new file mode 100644
index 000000000..e6a67cf97
Binary files /dev/null and b/src/assets/staking/providers/icestaking.png differ
diff --git a/src/assets/staking/providers/nimiq-watch.svg b/src/assets/staking/providers/nimiq-watch.svg
new file mode 100644
index 000000000..0e83dbeeb
--- /dev/null
+++ b/src/assets/staking/providers/nimiq-watch.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42">
+  <circle cx="21" cy="21" r="19" fill="#e9b213"/>
+  <defs>
+    <circle id="a" cx="21" cy="21" r="21"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
+    <path d="M21.46 7.6c-.2-.33-.67-.6-1.06-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6L24.49 14c.2-.33.2-.87 0-1.21L21.46 7.6z" fill-opacity=".9"/>
+    <path d="M33.92 14.7c-.2-.33-.67-.6-1.05-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6l3.03-5.19c.2-.33.2-.87 0-1.21l-3.03-5.19z" fill-opacity=".6"/>
+    <path d="M21.56 21.8c-.2-.33-.67-.6-1.05-.6h-6.08c-.39 0-.86.27-1.05.6l-3.03 5.19c-.2.33-.2.87 0 1.21l3.03 5.19c.2.33.67.6 1.05.6h6.08c.39 0 .86-.27 1.05-.6l3.03-5.19c.2-.33.2-.87 0-1.21l-3.03-5.19z" fill-opacity=".8"/>
+  </g>
+</svg>
diff --git a/src/assets/staking/providers/nimpool.svg b/src/assets/staking/providers/nimpool.svg
new file mode 100644
index 000000000..345c8b6cf
--- /dev/null
+++ b/src/assets/staking/providers/nimpool.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42">
+  <defs>
+    <circle id="a" cx="21" cy="21" r="19"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd">
+    <path d="M0 0v42h42V0zm15 27.8h-3.3V14.2H15zm18.2-6.5a6.9 6.9 0 01-1.6 4.9 5.5 5.5 0 01-4.3 1.8 5.6 5.6 0 01-4.3-1.8 7 7 0 01-1.7-5v-.5a6.9 6.9 0 011.7-4.9 5.6 5.6 0 014.3-1.8 5.6 5.6 0 014.3 1.8 6.9 6.9 0 011.6 5zm-6-4.7c-1.7 0-2.6 1.3-2.6 4.1v.6a6 6 0 00.7 3 2.2 2.2 0 002 1.1 2.1 2.1 0 001.9-1 5.7 5.7 0 00.7-3.1v-.6c0-2.7-.9-4.1-2.6-4.1z"/>
+  </g>
+</svg>
diff --git a/src/assets/staking/providers/overstake.svg b/src/assets/staking/providers/overstake.svg
new file mode 100644
index 000000000..3fa9f4964
--- /dev/null
+++ b/src/assets/staking/providers/overstake.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="21" cy="21" r="19"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#b)" fill-rule="evenodd" clip-rule="evenodd">
+    <rect width="42" height="42" fill="#FF795F"/>
+    <path d="M20.9998 28.4139C19.2146 28.4139 18.7868 26.964 18.7868 21.0014C18.7868 14.95 19.2146 13.5888 20.9998 13.5888C22.785 13.5888 23.2129 15.0388 23.2129 21.0014C23.2129 26.964 22.785 28.4139 20.9998 28.4139ZM20.9998 8.48438C12.0886 8.48438 10.8936 14.6985 10.8936 20.9126C10.8936 27.8073 11.7345 33.5184 20.9998 33.5184C29.911 33.5184 31.1061 27.2155 31.1061 21.0014C31.1061 14.1067 30.2651 8.48438 20.9998 8.48438Z" fill="white"/>
+  </g>
+</svg>
diff --git a/src/assets/staking/staking.svg b/src/assets/staking/staking.svg
new file mode 100644
index 000000000..41238e969
--- /dev/null
+++ b/src/assets/staking/staking.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <line x1="8.25" y1="8.25" x2="8.25" y2="12.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M12.75,6.75q0,4.5-4.5,4.5C8.25,7,9.5,6.75,12.75,6.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M4.25,4.25c0,3.25,1,5,4,5C8.25,6,8,4.25,4.25,4.25Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+</svg>
diff --git a/src/assets/staking/three-leaf-staking.svg b/src/assets/staking/three-leaf-staking.svg
new file mode 100644
index 000000000..0f7b19d1d
--- /dev/null
+++ b/src/assets/staking/three-leaf-staking.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <line x1="7.75" y1="8.75" x2="7.75" y2="13.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M12.25,7.75c0,2.95-1.55,4.5-4.5,4.5C7.75,8.07,9.05,7.75,12.25,7.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M9.5,3c1.33,2.64.89,4.67-1.75,6C6.36,5.15,7,4.36,9.5,3Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+    <path d="M3.75,6.77c0,3.1,1.18,4.47,4,4.47C7.75,8.11,7.21,6.77,3.75,6.77Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.0"/>
+</svg>
diff --git a/src/assets/staking/tooltip-graph.svg b/src/assets/staking/tooltip-graph.svg
new file mode 100644
index 000000000..30b683251
--- /dev/null
+++ b/src/assets/staking/tooltip-graph.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 140"><defs><mask id="a" x="-8" y="-6.67" width="252" height="129.41" maskUnits="userSpaceOnUse"><path d="M244,85.13V4.63L-8,72.13l3.86,43.24Z" fill="#1f2348"/></mask><radialGradient id="b" cx="-6285.07" cy="1619.17" r="1" gradientTransform="matrix(-36.5, 0, 0, 19, -229230.09, -30726.2)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41a38e"/><stop offset="1" stop-color="#21bca5"/></radialGradient><radialGradient id="c" cx="-6285.07" cy="1619.17" r="1" gradientTransform="matrix(-36.5, 0, 0, 19, -229230.09, -30659.85)" xlink:href="#b"/></defs><g opacity="0.2"><g opacity="0.5"><line x1="0.5" y1="100.63" x2="239.5" y2="100.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="80.63" x2="239.5" y2="80.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="60.63" x2="239.5" y2="60.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="40.63" x2="239.5" y2="40.63" fill="none" stroke="#fff" stroke-linecap="round"/><line x1="0.5" y1="20.63" x2="239.5" y2="20.63" fill="none" stroke="#fff" stroke-linecap="round"/></g><line x1="0.75" y1="120.38" x2="239.25" y2="120.38" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="0.75" y1="120" x2="239.25" y2="120" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="76.75" y1="124.75" x2="76.75" y2="111.25" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/><line x1="76.75" y1="44.55" x2="76.75" y2="1.05" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/></g><g mask="url(#a)"><line x1="84.5" y1="46.23" x2="84.5" y2="105.28" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="92.5" y1="44.55" x2="92.5" y2="104.28" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="100.5" y1="42.31" x2="100.5" y2="103.68" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="68.5" y1="50.69" x2="68.5" y2="106.84" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="108.5" y1="40.63" x2="108.5" y2="101.68" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="4.5" y1="68.41" x2="4.5" y2="115" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="12.5" y1="66.64" x2="12.5" y2="113.53" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="20.5" y1="64.34" x2="20.5" y2="112.54" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="28.5" y1="62.2" x2="28.5" y2="111.4" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="36.5" y1="59.25" x2="36.5" y2="110.57" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="44.5" y1="57.93" x2="44.5" y2="109.41" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="52.5" y1="55.27" x2="52.5" y2="108.59" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="60.5" y1="53.85" x2="60.5" y2="107.35" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="116.5" y1="38.7" x2="116.5" y2="100.63" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="124.5" y1="36.56" x2="124.5" y2="100.25" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="132.5" y1="34.75" x2="132.5" y2="99.13" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="140.5" y1="32.64" x2="140.5" y2="98" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="220.5" y1="10.53" x2="220.5" y2="122.74" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="228.5" y1="8.78" x2="228.5" y2="86.86" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="236.5" y1="6.65" x2="236.5" y2="85.81" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="164.5" y1="24.1" x2="164.5" y2="94.4" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="172.5" y1="22.8" x2="172.5" y2="94.22" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="180.5" y1="21.6" x2="180.5" y2="92.79" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="188.5" y1="18.92" x2="188.5" y2="91.62" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="196.5" y1="17.24" x2="196.5" y2="90.46" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="204.5" y1="14.72" x2="204.5" y2="90.36" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="212.5" y1="12.69" x2="212.5" y2="88.7" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="148.5" y1="29.3" x2="148.5" y2="97.92" fill="none" stroke="#21bca5" opacity="0.3" style="isolation:isolate"/><line x1="76.75" y1="47.82" x2="76.75" y2="106.84" fill="none" stroke="#21bca5" stroke-width="1.5" opacity="0.7" style="isolation:isolate"/><line x1="157" y1="-5.17" x2="157" y2="121.24" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="3" stroke-dasharray="0.1 6"/></g><path d="M.75,115l238.5-29.5" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="1.5"/><path d="M.75,69.5,239.25,5.9" fill="none" stroke="#21bca5" stroke-linecap="round" stroke-width="1.5"/><rect x="138.75" y="18.92" width="36.5" height="19" rx="2" fill="url(#b)"/><path d="M145.09,32.67V31.53L148,28.4a5.18,5.18,0,0,0,.74-1,2,2,0,0,0,.24-.92,1.1,1.1,0,0,0-.34-.89,1.39,1.39,0,0,0-1-.3,3.08,3.08,0,0,0-1.16.23,4.24,4.24,0,0,0-1.15.66L144.82,25a3.51,3.51,0,0,1,1.31-.72,4.9,4.9,0,0,1,1.61-.27,3.65,3.65,0,0,1,1.46.28,2,2,0,0,1,1,.8,2.24,2.24,0,0,1,.33,1.24,3,3,0,0,1-.31,1.39,6.19,6.19,0,0,1-1.05,1.44l-2.61,2.76-.18-.51h4.48v1.24Zm10.74.1a2.69,2.69,0,0,1-2.32-1.12,5.46,5.46,0,0,1-.8-3.25,5.54,5.54,0,0,1,.79-3.25,3,3,0,0,1,4.22-.42,4.16,4.16,0,0,1,.42.42,5.44,5.44,0,0,1,.81,3.24,5.52,5.52,0,0,1-.81,3.26A2.67,2.67,0,0,1,155.83,32.77Zm0-1.2a1.27,1.27,0,0,0,1.21-.76,5.72,5.72,0,0,0,.38-2.42A5.59,5.59,0,0,0,157,26a1.36,1.36,0,0,0-1.83-.6h0a1.34,1.34,0,0,0-.6.6,5.54,5.54,0,0,0-.38,2.38,5.72,5.72,0,0,0,.38,2.42A1.27,1.27,0,0,0,155.83,31.57Zm6.67-2.27a1.75,1.75,0,0,1-1.46-.65,3,3,0,0,1-.54-2,3,3,0,0,1,.54-2,2,2,0,0,1,2.83-.1h0l.1.1a3,3,0,0,1,.54,2,3,3,0,0,1-.54,2A1.77,1.77,0,0,1,162.5,29.3Zm0-1a.56.56,0,0,0,.55-.38,3.35,3.35,0,0,0,.18-1.26,3,3,0,0,0-.19-1.25.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.14,3.14,0,0,0-.18,1.25A3.24,3.24,0,0,0,162,28a.59.59,0,0,0,.5.33Zm-.2,4.34,4.95-8.54h1.44l-4.94,8.54Zm6.19,0A1.77,1.77,0,0,1,167,32a3,3,0,0,1-.54-2,3,3,0,0,1,.54-2,2,2,0,0,1,2.83-.09h0L170,28a3,3,0,0,1,.54,2,3,3,0,0,1-.54,2,1.76,1.76,0,0,1-1.46.73Zm0-1a.56.56,0,0,0,.55-.38,3.35,3.35,0,0,0,.18-1.26,3,3,0,0,0-.19-1.25.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.14,3.14,0,0,0-.18,1.25,3.35,3.35,0,0,0,.18,1.26.58.58,0,0,0,.55.49Z" fill="#fff"/><rect x="138.75" y="85.28" width="36.5" height="19" rx="2" fill="url(#c)"/><path d="M147.83,99.12a4.76,4.76,0,0,1-1.67-.28A2.64,2.64,0,0,1,145,98a2.15,2.15,0,0,1-.39-1.28,1.93,1.93,0,0,1,.59-1.47,2.65,2.65,0,0,1,1.6-.7v.18a2.68,2.68,0,0,1-1.43-.72,1.86,1.86,0,0,1-.53-1.34,2,2,0,0,1,.38-1.22,2.54,2.54,0,0,1,1.07-.79,3.91,3.91,0,0,1,1.55-.28,3.86,3.86,0,0,1,1.54.28,2.46,2.46,0,0,1,1.07.79,2,2,0,0,1,.39,1.22A1.83,1.83,0,0,1,150.3,94a2.54,2.54,0,0,1-1.41.71v-.18a2.68,2.68,0,0,1,1.6.72,1.93,1.93,0,0,1,.58,1.45,2,2,0,0,1-.41,1.28,2.41,2.41,0,0,1-1.11.83A4.8,4.8,0,0,1,147.83,99.12Zm0-1.2a2.11,2.11,0,0,0,1.27-.33,1.21,1.21,0,0,0,.24-1.69,1.36,1.36,0,0,0-.24-.24,2.57,2.57,0,0,0-1.25-.46,2.87,2.87,0,0,0-1.26.46,1.22,1.22,0,0,0-.22,1.71,1.15,1.15,0,0,0,.22.22A2.16,2.16,0,0,0,147.83,97.92Zm0-3.7a2.27,2.27,0,0,0,1.09-.44,1.15,1.15,0,0,0,.44-.94,1.07,1.07,0,0,0-.42-.92,2,2,0,0,0-2.22,0,1.06,1.06,0,0,0-.41.92,1.18,1.18,0,0,0,.43.94A2.27,2.27,0,0,0,147.83,94.22Zm8,4.91A2.68,2.68,0,0,1,153.51,98a5.46,5.46,0,0,1-.8-3.25,5.54,5.54,0,0,1,.79-3.25,3,3,0,0,1,4.22-.42,4.16,4.16,0,0,1,.42.42,6.93,6.93,0,0,1,0,6.5A2.64,2.64,0,0,1,155.83,99.13Zm0-1.2a1.27,1.27,0,0,0,1.21-.76,5.72,5.72,0,0,0,.38-2.42,5.59,5.59,0,0,0-.38-2.39,1.36,1.36,0,0,0-1.83-.6,1.34,1.34,0,0,0-.6.6,5.54,5.54,0,0,0-.38,2.38,5.72,5.72,0,0,0,.38,2.42A1.28,1.28,0,0,0,155.83,97.93Zm6.67-2.27A1.81,1.81,0,0,1,161,95a4,4,0,0,1,0-4,2,2,0,0,1,2.83-.1h0a.47.47,0,0,1,.1.1,4,4,0,0,1,0,4A1.8,1.8,0,0,1,162.5,95.66Zm0-1a.58.58,0,0,0,.55-.39,3,3,0,0,0,.18-1.26A2.93,2.93,0,0,0,163,91.8a.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.28,3.28,0,0,0-.18,1.24A3.07,3.07,0,0,0,162,94.3a.57.57,0,0,0,.5.39ZM162.3,99l4.95-8.54h1.44L163.75,99Zm6.19,0a1.82,1.82,0,0,1-1.46-.65,3.88,3.88,0,0,1,0-3.95,2,2,0,0,1,2.83-.09h0l.09.09a3.88,3.88,0,0,1,0,3.95,1.76,1.76,0,0,1-1.46.73Zm0-1a.58.58,0,0,0,.55-.39,3,3,0,0,0,.18-1.26,2.91,2.91,0,0,0-.19-1.24.58.58,0,0,0-.74-.35.6.6,0,0,0-.35.35,3.28,3.28,0,0,0-.18,1.24,3,3,0,0,0,.18,1.26.58.58,0,0,0,.55.5Z" fill="#fff"/><path d="M66.8,139.09V133l.72.15-2.3,1.39v-1.27L67.4,132h.82v7.19Zm-1.7.65v-1.15h4.84v1.15Zm7,0v-1.05l2.65-2.87a4,4,0,0,0,.68-.95,1.78,1.78,0,0,0,.22-.84,1.09,1.09,0,0,0-.3-.82,1.34,1.34,0,0,0-.89-.27,2.8,2.8,0,0,0-1.07.21,4.26,4.26,0,0,0-1.06.6l-.48-1a3.29,3.29,0,0,1,1.2-.66,4.57,4.57,0,0,1,1.47-.24,3.23,3.23,0,0,1,1.34.25,1.92,1.92,0,0,1,.88.74,2,2,0,0,1,.31,1.13,3,3,0,0,1-.28,1.28,6.06,6.06,0,0,1-1,1.31l-2.39,2.53-.16-.47h4.1v1.15Zm7.47,0V131.9h1.14l3,6.75h-.54L86,131.9h1.14v7.84H85.88v-5.8l.38.09-2.45,5.71h-.93L80.37,134l.4-.09v5.8Z" fill="#fff" opacity="0.4" style="isolation:isolate"/></svg>
\ No newline at end of file
diff --git a/src/assets/vertical-line.svg b/src/assets/vertical-line.svg
new file mode 100644
index 000000000..6db7a37e3
--- /dev/null
+++ b/src/assets/vertical-line.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="28" viewBox="0 0 4 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line x1="2.925" y1="0.75" x2="2.925" y2="27.25" stroke="#9e9faf" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/icons/Staking/AceStakingIcon.vue b/src/components/icons/Staking/AceStakingIcon.vue
new file mode 100644
index 000000000..5a6d97806
--- /dev/null
+++ b/src/components/icons/Staking/AceStakingIcon.vue
@@ -0,0 +1,5 @@
+<template functional>
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <image id="image0" width="42" height="42" xlink:href="data:image/png;base64,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"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/FatSearchIcon.vue b/src/components/icons/Staking/FatSearchIcon.vue
new file mode 100644
index 000000000..d8f9d91d5
--- /dev/null
+++ b/src/components/icons/Staking/FatSearchIcon.vue
@@ -0,0 +1,6 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
+        <circle cx="8.25" cy="8.25" r="4.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
+        <line x1="16.25" y1="16.25" x2="11.75" y2="11.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.0"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/IceStakingIcon.vue b/src/components/icons/Staking/IceStakingIcon.vue
new file mode 100644
index 000000000..2b152312a
--- /dev/null
+++ b/src/components/icons/Staking/IceStakingIcon.vue
@@ -0,0 +1,5 @@
+<template functional>
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <image id="image0" width="42" height="42" xlink:href="data:image/png;base64,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"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/NimiqWatchIcon.vue b/src/components/icons/Staking/NimiqWatchIcon.vue
new file mode 100644
index 000000000..98716435f
--- /dev/null
+++ b/src/components/icons/Staking/NimiqWatchIcon.vue
@@ -0,0 +1,52 @@
+<template functional>
+  <svg
+    width="42"
+    height="42"
+    viewBox="0 0 42 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0)">
+      <rect x="0.09375" width="42" height="42" rx="21" fill="#E9B213" />
+      <g clip-path="url(#clip1)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M21.4566 7.60414C21.2614 7.27044 20.7891 7 20.4024 7H14.3268C13.9395 7 13.468 7.27044 13.2726 7.60414L10.2401 12.7957C10.045 13.1294 10.045 13.6706 10.2401 14.0043L13.2726 19.1958C13.4677 19.5295 13.9401 19.8002 14.3268 19.8002H20.4024C20.7897 19.8002 21.2612 19.5298 21.4566 19.1958L24.4891 14.0043C24.6842 13.6706 24.6842 13.1297 24.4891 12.7957L21.4566 7.60414Z"
+          fill="white"
+          fill-opacity="0.9"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M33.916 14.7023C33.7209 14.3686 33.2486 14.0981 32.8619 14.0981H26.7863C26.3989 14.0981 25.9275 14.3686 25.7321 14.7023L22.6996 19.8938C22.5044 20.2275 22.5044 20.7687 22.6996 21.1024L25.7321 26.294C25.9272 26.6276 26.3995 26.8984 26.7863 26.8984H32.8619C33.2492 26.8984 33.7206 26.6279 33.916 26.294L36.9486 21.1024C37.1437 20.7687 37.1437 20.2278 36.9486 19.8938L33.916 14.7023Z"
+          fill="white"
+          fill-opacity="0.6"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M21.5585 21.8038C21.3634 21.4702 20.891 21.1997 20.5043 21.1997H14.4287C14.0414 21.1997 13.57 21.4702 13.3746 21.8038L10.342 26.9954C10.1469 27.3291 10.1469 27.8703 10.342 28.204L13.3746 33.3955C13.5697 33.7292 14.042 34 14.4287 34H20.5043C20.8916 34 21.3631 33.7295 21.5585 33.3955L24.591 28.204C24.7861 27.8703 24.7861 27.3294 24.591 26.9954L21.5585 21.8038Z"
+          fill="white"
+          fill-opacity="0.8"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path
+          d="M0 21C0 9.40202 9.40202 0 21 0C32.598 0 42 9.40202 42 21C42 32.598 32.598 42 21 42C9.40202 42 0 32.598 0 21Z"
+          fill="white"
+        />
+      </clipPath>
+      <clipPath id="clip1">
+        <rect
+          width="27"
+          height="27"
+          fill="white"
+          transform="translate(10.0938 7)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/src/components/icons/Staking/NimpoolIcon.vue b/src/components/icons/Staking/NimpoolIcon.vue
new file mode 100644
index 000000000..b0e091b6c
--- /dev/null
+++ b/src/components/icons/Staking/NimpoolIcon.vue
@@ -0,0 +1,25 @@
+<template functional>
+  <svg
+    width="42"
+    height="42"
+    viewBox="0 0 42 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0)">
+      <rect x="0.09375" width="42" height="42" rx="21" fill="black" />
+      <path
+        d="M15.0118 14.168V27.79H11.7358V14.168H15.0118ZM33.2418 20.734V21.294C33.2418 23.366 32.6818 24.9993 31.5618 26.194C30.4605 27.398 29.0372 28 27.2918 28C25.5372 28 24.1045 27.4027 22.9938 26.208C21.8738 25.004 21.3138 23.3613 21.3138 21.28V20.72C21.3138 18.6387 21.8692 17.0053 22.9798 15.82C24.0905 14.6067 25.5232 14 27.2778 14C29.0138 14 30.4418 14.6067 31.5618 15.82C32.6818 17.0053 33.2418 18.6387 33.2418 20.72V20.734ZM29.9098 21.294V20.706C29.9098 17.9527 29.0325 16.576 27.2778 16.576C25.5325 16.576 24.6598 17.9527 24.6598 20.706V21.28C24.6598 22.6147 24.8792 23.6413 25.3178 24.36C25.7658 25.0787 26.4238 25.438 27.2918 25.438C28.1318 25.438 28.7758 25.0787 29.2238 24.36C29.6812 23.6413 29.9098 22.6147 29.9098 21.28V21.294Z"
+        fill="#EDEDED"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path
+          d="M0 21C0 9.40202 9.40202 0 21 0C32.598 0 42 9.40202 42 21C42 32.598 32.598 42 21 42C9.40202 42 0 32.598 0 21Z"
+          fill="white"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/src/components/icons/Staking/OneLeafStakingIcon.vue b/src/components/icons/Staking/OneLeafStakingIcon.vue
new file mode 100644
index 000000000..05dc6b5b8
--- /dev/null
+++ b/src/components/icons/Staking/OneLeafStakingIcon.vue
@@ -0,0 +1,6 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path d="M11.75,5.25q0,4.5-4.5,4.5C7.25,5.5,8.5,5.25,11.75,5.25Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path d="M5.25,5.75a10.61,10.61,0,0,1,2,6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/OverstakeIcon.vue b/src/components/icons/Staking/OverstakeIcon.vue
new file mode 100644
index 000000000..16c59fdf0
--- /dev/null
+++ b/src/components/icons/Staking/OverstakeIcon.vue
@@ -0,0 +1,11 @@
+<template functional>
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="42" height="42" fill="url(#pattern0)"/>
+        <defs>
+            <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+                <use xlink:href="#image0" transform="scale(0.005)"/>
+            </pattern>
+            <image id="image0" width="200" height="200" xlink:href="data:image/png;base64,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"/>
+        </defs>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/SearchIcon.vue b/src/components/icons/Staking/SearchIcon.vue
new file mode 100644
index 000000000..16ad10488
--- /dev/null
+++ b/src/components/icons/Staking/SearchIcon.vue
@@ -0,0 +1,6 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+        <circle cx="5.25" cy="5.25" r="4.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <line x1="13.25" y1="13.25" x2="8.75" y2="8.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/StakingHeroIcon.vue b/src/components/icons/Staking/StakingHeroIcon.vue
new file mode 100644
index 000000000..a061d2e67
--- /dev/null
+++ b/src/components/icons/Staking/StakingHeroIcon.vue
@@ -0,0 +1,17 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
+        <path d="M70 22h0a48 48 0 0148 48v0a48 48 0 01-48 48h0a48 48 0 01-48-48v0a48 48 0 0148-48z" opacity=".6" fill="none" stroke="#21bca5" stroke-width="3.02"/>
+        <path d="M70 12h0a58 58 0 0158 58h0a58 58 0 01-58 58h0a58 58 0 01-58-58h0a58 58 0 0158-58z" opacity=".4" fill="none" stroke="#21bca5" stroke-width="3.02"/>
+        <radialGradient id="a" cx="70" cy="70" r="69.26" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#41a38e"/>
+            <stop offset="1" stop-color="#21bca5"/>
+        </radialGradient>
+        <path d="M70 2.25h0A67.75 67.75 0 01137.75 70v0A67.75 67.75 0 0170 137.75h0A67.75 67.75 0 012.25 70v0A67.75 67.75 0 0170 2.25z" opacity=".2" fill="none" stroke="url(#a)" stroke-width="3.02"/>
+        <radialGradient id="b" cx="-791.61" cy="458.74" r="1" gradientTransform="matrix(-83.5341 0 0 83.5341 -66014.57 -38208.91)" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#41a38e"/>
+            <stop offset="1" stop-color="#21bca5"/>
+        </radialGradient>
+        <path d="M70 28.23a41.76 41.76 0 110 83.52 41.76 41.76 0 110-83.52z" fill="url(#b)"/>
+        <path d="M70.71 69.1v21.56m18.71-26.11c0 12.4-6.31 18.89-18.71 18.89 0-17.56 5.28-18.89 18.71-18.89zM54.18 53.98c0 13.33 4.13 20.07 16.53 20.07 0-13.43-1.03-20.07-16.53-20.07z" fill="none" stroke="#fff" stroke-width="4.0316" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/StakingIcon.vue b/src/components/icons/Staking/StakingIcon.vue
new file mode 100644
index 000000000..7c948f70d
--- /dev/null
+++ b/src/components/icons/Staking/StakingIcon.vue
@@ -0,0 +1,5 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="nq-icon">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 8.25v4.5M12.75 6.75q0 4.5-4.5 4.5c0-4.25 1.25-4.5 4.5-4.5ZM4.25 4.25c0 3.25 1 5 4 5 0-3.25-.25-5-4-5Z"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/StarIcon.vue b/src/components/icons/Staking/StarIcon.vue
new file mode 100644
index 000000000..257f32e58
--- /dev/null
+++ b/src/components/icons/Staking/StarIcon.vue
@@ -0,0 +1,5 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 11" fill="currentColor">
+        <path d="M5.51.35a.52.52,0,0,1,1,0l1,3.11A.52.52,0,0,0,8,3.81h3.26a.51.51,0,0,1,.3.93L8.91,6.65a.52.52,0,0,0-.19.58l1,3.1a.51.51,0,0,1-.79.57L6.3,9a.51.51,0,0,0-.6,0L3.06,10.9a.51.51,0,0,1-.79-.57l1-3.1a.52.52,0,0,0-.19-.58L.46,4.74a.51.51,0,0,1,.3-.93H4a.52.52,0,0,0,.49-.35Z"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/ThreeLeafStakingIcon.vue b/src/components/icons/Staking/ThreeLeafStakingIcon.vue
new file mode 100644
index 000000000..c9ed1bb20
--- /dev/null
+++ b/src/components/icons/Staking/ThreeLeafStakingIcon.vue
@@ -0,0 +1,8 @@
+<template functional>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <line x1="7.75" y1="8.75" x2="7.75" y2="13.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path d="M12.25,7.75c0,2.95-1.55,4.5-4.5,4.5C7.75,8.07,9.05,7.75,12.25,7.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path d="M9.5,3c1.33,2.64.89,4.67-1.75,6C6.36,5.15,7,4.36,9.5,3Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path d="M3.75,6.77c0,3.1,1.18,4.47,4,4.47C7.75,8.11,7.21,6.77,3.75,6.77Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/VerticalLineIcon.vue b/src/components/icons/Staking/VerticalLineIcon.vue
new file mode 100644
index 000000000..fe7e04d47
--- /dev/null
+++ b/src/components/icons/Staking/VerticalLineIcon.vue
@@ -0,0 +1,5 @@
+<template>
+    <svg width="2" height="28" viewBox="0 0 2 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <line x1="0.75" y1="0.75" x2="0.749999" y2="27.25" stroke="#1F2348" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>
+</template>
diff --git a/src/components/icons/Staking/XCloseIcon.vue b/src/components/icons/Staking/XCloseIcon.vue
new file mode 100644
index 000000000..c5f0211f6
--- /dev/null
+++ b/src/components/icons/Staking/XCloseIcon.vue
@@ -0,0 +1,5 @@
+<template functional>
+    <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity=".5" d="M10.7 8.3a1 1 0 01-1.41 1.4L6.17 6.6a.25.25 0 00-.35 0L2.7 9.7a1 1 0 11-1.42-1.42L4.4 5.2a.25.25 0 000-.35L1.3 1.72A1 1 0 012.7.3l3.11 3.11a.25.25 0 00.36 0L9.28.3a1 1 0 011.42 1.42l-3.12 3.1c-.1.1-.1.26 0 .36L10.7 8.3z" fill="currentColor"/>
+    </svg>
+</template>
diff --git a/src/components/layouts/AccountOverview.vue b/src/components/layouts/AccountOverview.vue
index 913468e22..5e4ca64ac 100644
--- a/src/components/layouts/AccountOverview.vue
+++ b/src/components/layouts/AccountOverview.vue
@@ -43,6 +43,8 @@
         <template v-else>
             <AccountBalance />
 
+            <StakingSummary v-if="isMobile" />
+
             <AddressList
                 :showAddAddressButton="canHaveMultipleAddresses"
                 @address-selected="onAddressSelected"
@@ -127,6 +129,7 @@ import LegacyAccountUpgradeButton from '../LegacyAccountUpgradeButton.vue';
 import LegacyAccountNoticeModal from '../modals/LegacyAccountNoticeModal.vue';
 import OasisLaunchModal from '../swap/OasisLaunchModal.vue';
 import AttentionDot from '../AttentionDot.vue';
+import StakingSummary from '../stake/partials/StakingSummaryMobilePartial.vue';
 import { backup, addAddress } from '../../hub';
 import { useAccountStore, AccountType } from '../../stores/Account';
 import { useBtcAddressStore } from '../../stores/BtcAddress';
@@ -154,6 +157,7 @@ export default defineComponent({
             && activeAccountInfo.value.btcAddresses.external.length > 0);
 
         const { width } = useWindowSize();
+        const isMobile = computed(() => width.value <= 700);
 
         function onAddressSelected() {
             setActiveCurrency(CryptoCurrency.NIM);
@@ -226,6 +230,7 @@ export default defineComponent({
             hasBitcoinAddresses,
             btcConsensus,
             updateAvailable,
+            isMobile,
         };
     },
     components: {
@@ -245,6 +250,7 @@ export default defineComponent({
         Amount,
         FiatConvertedAmount,
         AttentionDot,
+        StakingSummary,
     },
 });
 </script>
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 3d08171dd..6e82f97af 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -87,6 +87,9 @@
                     </div>
                 </div>
             </div>
+            <div class="staking flex-row">
+                <StakePreviewPartial v-if="activeCurrency === 'nim'"/>
+            </div>
             <div class="actions flex-row">
                 <SearchBar v-model="searchString"/>
 
@@ -103,6 +106,14 @@
                     ) }}
                 </button>
 
+                <StakeButtonPartial />
+
+                <button class="receive nq-button-s flex-row"
+                    @click="$router.push(activeCurrency === 'nim' ? '/receive' : '/btc-receive')" @mousedown.prevent
+                >
+                    <ArrowRightSmallIcon />{{ $t('Receive') }}
+                </button>
+
                 <button class="send nq-button-pill light-blue flex-row"
                     @click="$router.push(activeCurrency === 'nim' ? '/send' : '/btc-send')" @mousedown.prevent
                     :disabled="(activeCurrency === 'nim' && (!activeAddressInfo || !activeAddressInfo.balance))
@@ -110,11 +121,6 @@
                 >
                     <ArrowRightSmallIcon />{{ $t('Send') }}
                 </button>
-                <button class="receive nq-button-s flex-row"
-                    @click="$router.push(activeCurrency === 'nim' ? '/receive' : '/btc-receive')" @mousedown.prevent
-                >
-                    <ArrowRightSmallIcon />{{ $t('Receive') }}
-                </button>
             </div>
             <div class="scroll-mask top"></div>
             <TransactionList
@@ -194,6 +200,9 @@ import SearchBar from '../SearchBar.vue';
 import TransactionList from '../TransactionList.vue';
 import BtcTransactionList from '../BtcTransactionList.vue';
 import MobileActionBar from '../MobileActionBar.vue';
+import StakePreviewPartial from '../stake/partials/StakePreviewPartial.vue';
+import StakeButtonPartial from '../stake/partials/StakeButtonPartial.vue';
+
 import RenameIcon from '../icons/AccountMenu/RenameIcon.vue';
 import RefreshIcon from '../icons/RefreshIcon.vue';
 
@@ -324,6 +333,8 @@ export default defineComponent({
         EventIcon,
         CrossIcon,
         CrossCloseButton,
+        StakePreviewPartial,
+        StakeButtonPartial,
     },
     directives: {
         responsive: ResponsiveDirective,
@@ -381,6 +392,16 @@ export default defineComponent({
         --padding-bottom: 6rem;
     }
 
+    .dev-bar {
+        display: flex;
+        flex-direction: row;
+        white-space: nowrap;
+    }
+
+    .feature-bar {
+        height: 2rem;
+    }
+
     &.no-accounts {
         padding: 6rem 0;
         justify-content: center;
@@ -536,6 +557,14 @@ export default defineComponent({
     }
 }
 
+.staking {
+    padding-top: 0;
+    padding-right: calc(var(--padding) + 4rem);
+    padding-bottom: 3rem;
+    padding-left: calc(var(--padding) + 2rem);
+    margin-top: calc(-1 * var(--padding-bottom) / 2);
+}
+
 .actions,
 .actions-mobile {
     justify-content: space-between;
@@ -613,6 +642,25 @@ export default defineComponent({
     left: -0.25rem;
 }
 
+.tooltip.staking-feature-tip {
+    /deep/ .trigger::after {
+        background-color: var(--nimiq-green);
+    }
+
+    /deep/ .tooltip-box {
+        background: radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%);
+        white-space: nowrap;
+        box-shadow:
+            0rem 2.25rem 4.75rem rgba(31, 35, 72, 0.07),
+            0rem 0.875rem 1.0625rem rgba(31, 35, 72, 0.04),
+            0rem .25rem 0.3125rem rgba(31, 35, 72, 0.02);
+        color: #fff;
+        font-size: 1.75rem;
+        font-weight: bold;
+        line-height: .5rem;
+    }
+}
+
 .send, .receive {
     margin: 0 0.5rem;
     align-items: center;
@@ -652,10 +700,6 @@ export default defineComponent({
     }
 }
 
-.search-bar {
-    margin-right: 3rem;
-}
-
 .unclaimed-cashlinks {
     flex-shrink: 0;
     margin-right: 1rem;
diff --git a/src/components/stake/SelectAccountOverlay.vue b/src/components/stake/SelectAccountOverlay.vue
new file mode 100644
index 000000000..2a4f51212
--- /dev/null
+++ b/src/components/stake/SelectAccountOverlay.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="overlay">
+        <PageBody class="flex-column">
+            <div class="address-list" :class="{'has-scrollbar': scrollbarVisible}" ref="root">
+                <div class="scroll-mask top"></div>
+                <AddressListItem
+                    v-for="addressInfo in addressInfos" :key="addressInfo.address"
+                    :addressInfo="addressInfo"
+                    :class="{
+                        'active': activeAddress === addressInfo.address && activeCurrency === CryptoCurrency.NIM,
+                    }"
+                    @click="selectAddress(addressInfo.address);" />
+                <div class="scroll-mask bottom"></div>
+            </div>
+        </PageBody>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted } from '@vue/composition-api';
+import { PageBody } from '@nimiq/vue-components';
+import { useAddressStore } from '../../stores/Address';
+import { useAccountStore } from '../../stores/Account';
+import { CryptoCurrency } from '../../lib/Constants';
+
+import AddressListItem from '../AddressListItem.vue';
+
+export default defineComponent({
+    setup(props, context) {
+        const { addressInfos, activeAddress, selectAddress } = useAddressStore();
+        const { activeCurrency } = useAccountStore();
+        const selectNIMAddress = (address: string) => {
+            selectAddress(address);
+            context.emit('selected');
+        };
+
+        const root = ref<HTMLElement>(null);
+        const scrollbarVisible = ref(false);
+        onMounted(() => {
+            watch(addressInfos, () => {
+                scrollbarVisible.value = !!root.value && root.value.offsetWidth > root.value.scrollWidth;
+            });
+        });
+
+        return {
+            CryptoCurrency,
+            activeCurrency,
+            addressInfos,
+            activeAddress,
+            selectAddress: selectNIMAddress,
+            scrollbarVisible,
+        };
+    },
+    props: {
+    },
+    components: {
+        PageBody,
+        AddressListItem,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    @import '../../scss/mixins.scss';
+
+    .overlay,
+    .overlay .page-body {
+        height: 100%;
+    }
+
+    .overlay .page-body {
+        justify-content: space-evenly;
+        align-items: center;
+        min-height: 56rem;
+
+        .flex-spacer {
+            height: 2rem;
+        }
+    }
+
+    .scroll-mask {
+        position: sticky;
+        height: 3rem;
+        flex-shrink: 0;
+        z-index: 2;
+        pointer-events: none;
+        width: calc(100% + 2 * var(--padding-sides));
+        margin-left: calc(-1 * var(--padding-sides));
+
+        &.top {
+            top: 0;
+            background: linear-gradient(var(--bg-base), rgba(244, 244, 244, 0));
+            margin-bottom: -0.5rem;
+        }
+
+        &.bottom {
+            bottom: 0;
+            background: linear-gradient(0deg, var(--bg-base), rgba(244, 244, 244, 0));
+            margin-top: -0.5rem;
+        }
+    }
+
+    .address-list {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow-y: auto;
+        padding-right: var(--padding-sides);
+        margin: 0 calc(-1 * var(--padding-sides));
+        color: var(--text-70);
+
+        // To make space for the .active-box leftside box-shadow
+        padding-left: var(--padding-sides);
+
+        @extend %custom-scrollbar;
+    }
+</style>
diff --git a/src/components/stake/StakeAmountSlider.vue b/src/components/stake/StakeAmountSlider.vue
new file mode 100644
index 000000000..93019ee79
--- /dev/null
+++ b/src/components/stake/StakeAmountSlider.vue
@@ -0,0 +1,559 @@
+<template>
+    <div class="slider-container" ref="$container">
+        <div class="slider-body">
+            <div class="slider-background">
+                <div class="background-one" ref="$backgroundLinesLeft" />
+                <div class="background-two" ref="$backgroundMiddlePlant" />
+                <div class="background-three" ref="$backgroundLinesRight" />
+                <div class="background-four" ref="$backgroundRightPlant" />
+                <div class="scalar-amount left">
+                    0 NIM
+                </div>
+
+                <div class="scalar-amount right">
+                    {{ availableFormattedAmount }} NIM
+                </div>
+            </div>
+            <div class="slider-gradation">
+                <div
+                    class="scalar-amount-text"
+                    ref="$stakedNIMText"
+                    @click="$stakedNIMAmount.focus()">
+                    <input class="nq-input"
+                        ref="$stakedNIMAmount"
+                        @input="updateAmount"
+                        @keypress.enter="$event.target.blur()"
+                        :style="`width: ${inputAmountWidth}px;`"
+                        />
+                    <div class="right-suffix">
+                        NIM
+                    </div>
+                </div>
+                <div class="percent-amount-text" ref="$percentText">
+                    {{ Math.round(currentPercentage) }}%
+                </div>
+                <VerticalLineIcon v-for="(x, index) in Array(11)" :key="index" class="bottom-indicator"
+                    :style="`left: ${1.375 + (5 * Math.min(5, index)) + (index > 5 ? (index - 5) * 4.77 : 0)}rem`" />
+                <div v-if="alreadyStaked" class="stake-dot-indicator" ref="$dotIndicator" />
+            </div>
+            <div class="slider-controls" ref="$slide" @click="onMove($event, true);">
+                <div class="slider-controls-wrapper">
+                    <div class="slider-progress-bar" ref="$progressBar" />
+                    <div class="slider-knob"
+                        ref="$knob"
+                        @touchstart="atClick"
+                        @mousedown="atClick">
+                        <OneLeafStakingIcon v-if="currentPercentage < 50" />
+                        <StakingIcon v-else-if="currentPercentage < 75" />
+                        <ThreeLeafStakingIcon v-else />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Ref, defineComponent, ref, computed, onMounted } from '@vue/composition-api';
+import { Amount } from '@nimiq/vue-components';
+import { useAddressStore } from '../../stores/Address';
+import { calculateDisplayedDecimals, formatAmount } from '../../lib/NumberFormatting';
+
+import StakingIcon from '../icons/Staking/StakingIcon.vue';
+import OneLeafStakingIcon from '../icons/Staking/OneLeafStakingIcon.vue';
+import ThreeLeafStakingIcon from '../icons/Staking/ThreeLeafStakingIcon.vue';
+import VerticalLineIcon from '../icons/Staking/VerticalLineIcon.vue';
+
+import { CryptoCurrency, NIM_DECIMALS, NIM_MAGNITUDE } from '../../lib/Constants';
+
+const getSVGNode = (n:string, attrs:Record<string, string> = {}) => {
+    const e = document.createElementNS('http://www.w3.org/2000/svg', n);
+    Object.entries(attrs).forEach((entry) => {
+        e.setAttributeNS(null, entry[0], entry[1]);
+    });
+    return e;
+};
+
+const encodedSVG = (element:SVGElement) => {
+    const serializedSVG = new XMLSerializer().serializeToString(element);
+    const base64Data = window.btoa(serializedSVG);
+    return `data:image/svg+xml;base64,${base64Data}`;
+};
+
+const buildSVG = (nodes:Array<Array<any>> = [], encoded = true) => {
+    const svg = getSVGNode('svg');
+    for (const attr of nodes) svg.appendChild(getSVGNode(attr[0] as string, attr[1] as Record<string, string>));
+    return encoded ? encodedSVG(svg) : svg;
+};
+
+type Point = {
+    x: number,
+    y: number,
+} | null
+
+const extractEventPosition = (e: MouseEvent | TouchEvent):Point => {
+    if (e.type === 'touchstart') {
+        e = e as TouchEvent;
+        if (e.touches.length > 1) return null;
+        const t = e.touches[0];
+
+        return {
+            x: t.pageX,
+            y: t.pageY,
+        };
+    }
+
+    e = e as MouseEvent;
+    return {
+        x: e.pageX,
+        y: e.pageY,
+    };
+};
+
+export default defineComponent({
+    props: {
+        stakedAmount: {
+            type: Number,
+            required: true,
+        },
+    },
+    setup(props, context) {
+        const { activeAddressInfo } = useAddressStore();
+
+        const readonly = ref(false);
+        const alreadyStakedAmount = ref(props.stakedAmount);
+        const currentAmount = ref(alreadyStakedAmount.value);
+        const availableAmount = ref(activeAddressInfo.value?.balance);
+        const currentPercentage = computed(() => (100 * currentAmount.value) / availableAmount.value!);
+        const alreadyStakedPercentage = ref(currentPercentage.value);
+        const alreadyStaked = ref(alreadyStakedAmount.value > 0);
+        const currentFormattedAmount = computed(() =>
+            formatAmount(currentAmount.value, NIM_MAGNITUDE));
+        const availableFormattedAmount = computed(() =>
+            formatAmount(availableAmount.value!, NIM_MAGNITUDE));
+
+        const getPointAtPercent = (percent: number): number =>
+            (percent / 100.0) * (sliderBox.width - knobBox.width);
+
+        const estimateTextWidth = (text: string, defaultSize: number, options:Record<string, number> = { ' ': 3 }) => {
+            let result = 0;
+            let special = 0;
+
+            Object.keys(options).forEach((key) => {
+                const found = text.split(key).length;
+                result += options[key] * found;
+                special += found;
+            });
+            result += Math.max(2, (text.length - special)) * defaultSize;
+            return result;
+        };
+
+        const inputAmountWidth = computed(() => estimateTextWidth(currentFormattedAmount.value, 9) + 69);
+
+        let containerBox:DOMRect;
+        let sliderBox:DOMRect;
+        let knobBox:DOMRect;
+        let amountBox:DOMRect;
+        let pivotPoint:Point = null;
+        let startSelection = 0;
+        let endSelection = 0;
+
+        const $container = ref<HTMLElement>(null);
+        const $knob = ref<HTMLElement>(null);
+        const $slide = ref<HTMLElement>(null);
+        const $backgroundLinesLeft = ref<HTMLElement>(null);
+        const $backgroundMiddlePlant = ref<HTMLElement>(null);
+        const $backgroundLinesRight = ref<HTMLElement>(null);
+        const $backgroundRightPlant = ref<HTMLElement>(null);
+        const $progressBar = ref<HTMLElement>(null);
+        const $percentText = ref<HTMLElement>(null);
+        const $stakedNIMText = ref<HTMLElement>(null);
+        const $stakedNIMAmount = ref<HTMLInputElement>(null);
+        const $dotIndicator = ref<HTMLElement>(null);
+
+        const atClick = (e: MouseEvent | TouchEvent) => {
+            e.preventDefault();
+
+            pivotPoint = extractEventPosition(e);
+            pivotPoint!.x -= $knob.value!.getBoundingClientRect().x;
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('touchmove', onMove);
+            window.addEventListener('mouseup', atEnd);
+            window.addEventListener('touchend', atEnd);
+        };
+
+        const updateAmount = (e: MouseEvent | TouchEvent) => {
+            startSelection = ((e!.target! as HTMLInputElement).selectionStart as number);
+            endSelection = (e!.target! as HTMLInputElement).selectionEnd as number;
+
+            const value = parseFloat((e!.target! as HTMLInputElement).value.replace(/[^\d.]/g, ''));
+            const amount = Math.max(
+                0,
+                Math.min(availableAmount.value!, (value || 0) * NIM_MAGNITUDE),
+            );
+            const percent = (100 * amount) / availableAmount.value!;
+            currentAmount.value = amount;
+
+            const offsetX = getPointAtPercent(percent);
+            updatePosition(offsetX);
+            setTimeout(() => {
+                (e!.target! as HTMLInputElement).setSelectionRange(startSelection, endSelection);
+            }, 0);
+            context.emit('amount-staked', currentAmount.value);
+            onMove(e, true, true, percent);
+        };
+
+        const atEnd = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('touchmove', onMove);
+            window.removeEventListener('mouseup', atEnd);
+            window.removeEventListener('touchend', atEnd);
+
+            context.emit('amount-chosen', 0);
+        };
+
+        const updatePosition = (offsetX: number) => {
+            amountBox = $stakedNIMAmount.value!.getBoundingClientRect();
+            $knob.value!.style.left = `${offsetX}px`;
+            if (currentPercentage.value! <= 0) {
+                $progressBar.value!.style.width = '0';
+            } else {
+                $progressBar.value!.style.width = `${offsetX + knobBox.width + 2}px`;
+            }
+            $percentText.value!.style.left = `${offsetX - (knobBox.width / 2.0) + 7}px`;
+            $stakedNIMText.value!.style.width = `${amountBox.width + 16}px`;
+            offsetX -= (inputAmountWidth.value / 2.0) - (knobBox.width / 2.0);
+            const rightSpacing = (knobBox.width * 2.0);
+            const minXPos = (-knobBox.width) + 24;
+            const maxXPos = containerBox.width - (amountBox.width + rightSpacing);
+            if (offsetX <= minXPos) {
+                $stakedNIMText.value!.style.left = `${minXPos}px`;
+            } else if (offsetX < maxXPos) {
+                $stakedNIMText.value!.style.left = `${offsetX}px`;
+            } else {
+                $stakedNIMText.value!.style.left = `${maxXPos}px`;
+            }
+            $stakedNIMAmount.value!.value = currentFormattedAmount.value;
+            context.emit('amount-chosen', 0);
+        };
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const onMove = (e: MouseEvent | TouchEvent, execute = false, skipSignals = false, _percent = NaN) => {
+            // if (execute !== true) return;
+            const position = extractEventPosition(e);
+
+            const percent = (!Number.isNaN(_percent)) ? _percent : Math.min(100, Math.max(0,
+                (100 * (position!.x - pivotPoint!.x - sliderBox.x)) / (sliderBox.width - knobBox.width),
+            ));
+            const offsetX = getPointAtPercent(percent);
+            currentAmount.value = Math.floor(
+                ((percent / 100) * availableAmount.value!) / NIM_MAGNITUDE,
+            ) * NIM_MAGNITUDE;
+
+            if (alreadyStaked.value) {
+                if (percent < alreadyStakedPercentage.value) {
+                    if (!skipSignals) {
+                        context.emit('amount-unstaked', alreadyStakedAmount.value - currentAmount.value);
+                    }
+                } else if (!skipSignals) {
+                    context.emit('amount-unstaked', 0);
+                }
+            }
+            if (!skipSignals) {
+                context.emit('amount-staked', currentAmount.value);
+            }
+            updatePosition(offsetX);
+        };
+
+        const fillBackground = (lo: number, hi: number) => {
+            const map = [
+                [0, 46.2, $backgroundLinesLeft, 5.9, 9.5],
+                [46.2, 54.95, $backgroundMiddlePlant],
+                [54.95, 90.89, $backgroundLinesRight],
+                [90.89, 100, $backgroundRightPlant],
+            ];
+            let start = NaN;
+            let end = NaN;
+            for (let i = 0; i < map.length; i++) {
+                if (Number.isNaN(start) && lo >= map[i][0]) {
+                    start = i;
+                }
+                if (hi <= map[i][1]) {
+                    end = i;
+                    break;
+                }
+            }
+
+            let startOffset = 0;
+            let endOffset = 0;
+
+            for (let i = end; i >= start; i--) {
+                const startPoint = (map[i].length >= 4) ? map[i][3] : map[i][0];
+                startOffset = getPointAtPercent(startPoint as number);
+
+                if (i === end) {
+                    endOffset = getPointAtPercent(Math.min(map[i][1] as number, hi))
+                        - getPointAtPercent(startPoint as number);
+                } else {
+                    endOffset = (map[i][2] as Ref<HTMLElement>).value!.getBoundingClientRect().width;
+                }
+
+                if (startOffset >= endOffset) {
+                    startOffset = 0;
+                }
+
+                if (map[i].length >= 4) {
+                    startOffset = getPointAtPercent(map[i][3] as number);
+                    endOffset += startOffset + (map[i][4] as number);
+                }
+
+                const svg = buildSVG(
+                    [['rect', {
+                        x: `${startOffset}px`,
+                        y: '0px',
+                        width: `${endOffset - startOffset}px`,
+                        height: '3.5rem',
+                        fill: '#21BCA5',
+                    }]],
+                ) as string;
+                (
+                    (map[i][2] as Ref<HTMLElement>).value!.style as { [key: string]: any }
+                )['background-image'] = `url(${svg})`;
+            }
+        };
+
+        onMounted(() => {
+            containerBox = $container.value!.getBoundingClientRect();
+            sliderBox = $slide.value!.getBoundingClientRect();
+            knobBox = $knob.value!.getBoundingClientRect();
+            amountBox = $stakedNIMAmount.value!.getBoundingClientRect();
+            updatePosition(getPointAtPercent(currentPercentage.value!));
+            pivotPoint = { x: 0, y: knobBox.y } as Point;
+
+            if (alreadyStaked.value) {
+                $dotIndicator.value!.style.left = `${getPointAtPercent(alreadyStakedPercentage.value!)
+                        + (knobBox.width / 2) - 5}px`;
+                fillBackground(0, alreadyStakedPercentage.value);
+            }
+        });
+        return {
+            NIM_DECIMALS,
+            STAKING_CURRENCY: CryptoCurrency.NIM,
+            DISPLAYED_DECIMALS: calculateDisplayedDecimals(availableAmount.value!, CryptoCurrency.NIM),
+            readonly,
+            atClick,
+            onMove,
+            currentPercentage,
+            currentAmount,
+            alreadyStaked,
+            updateAmount,
+            availableFormattedAmount,
+            currentFormattedAmount,
+            inputAmountWidth,
+            $container,
+            $knob,
+            $slide,
+            $percentText,
+            $stakedNIMText,
+            $stakedNIMAmount,
+            $backgroundLinesLeft,
+            $backgroundMiddlePlant,
+            $backgroundLinesRight,
+            $backgroundRightPlant,
+            $progressBar,
+            $dotIndicator,
+            buildSVG,
+        };
+    },
+    components: {
+        Amount,
+        StakingIcon,
+        OneLeafStakingIcon,
+        ThreeLeafStakingIcon,
+        VerticalLineIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.slider-container {
+    padding-top: 2.5rem;
+    height: 12rem;
+
+    .slider-body {
+        position: relative;
+        margin: auto;
+        margin-top: 2rem;
+        width: 56rem;
+        height: 5rem;
+        background-color: #f2f2f4;
+        border-radius: 2.5rem;
+        .nq-input {
+            background-color: #fff;
+            padding: 0.75rem 1.75rem;
+            font-weight: bold;
+        }
+        .slider-background {
+            position: absolute;
+            left: 0;
+            top: 0;
+            padding-top: 0.75rem;
+            padding-left: 1.5rem;
+            div {
+                background-color: #9e9faf;
+                height: 3.5rem;
+            }
+            .background-one, .background-three {
+                display: inline-block;
+                width: 25rem;
+
+                mask-image: url('../../assets/vertical-line.svg');
+                mask-size: .5rem;
+                mask-repeat: repeat-x;
+                mask-position: center;
+            }
+            .background-two {
+                display: inline-block;
+                width: 3.5rem;
+                margin-right: 0.375rem;
+
+                mask-image: url('../../assets/staking/staking.svg');
+                mask-repeat: no-repeat;
+                mask-position: center;
+            }
+            .background-three {
+                width: 21.25rem;
+            }
+            .background-four {
+                display: inline-block;
+                width: 3.5rem;
+                margin-right: 0.375rem;
+
+                mask-image: url('../../assets/staking/three-leaf-staking.svg');
+                mask-repeat: no-repeat;
+                mask-position: center;
+            }
+        }
+        .scalar-amount {
+            font-weight: bold;
+            font-size: 1.75rem;
+            line-height: 100%;
+
+            text-align: right;
+            color: var(--nimiq-blue);
+            opacity: 0.3;
+            &.left {
+                position: absolute;
+                left: 0rem;
+                top: -3.5rem;
+                background-color: transparent!important;
+            }
+
+            &.right {
+                position: absolute;
+                top: -3.5rem;
+                right: -0.5rem;
+                background-color: transparent!important;
+            }
+        }
+        .slider-gradation {
+            position: absolute;
+            left: 0.5rem;
+            top: 0rem;
+            width: 56rem;
+            .scalar-amount-text {
+                display: flex;
+                position: relative;
+                justify-content: center;
+                align-items: center;
+
+                background: radial-gradient(center, farthest-corner, rgba(255, 255, 255, 1.0), white)!important;
+                top: -4.5rem;
+                font-size: 2rem;
+                font-weight: bold;
+
+                .right-suffix {
+                    position: absolute;
+                    right: 1.75rem;
+                }
+            }
+            .percent-amount-text {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                width: 7rem;
+                top: 1.75rem;
+                color: var(--nimiq-green);
+                font-size: 1.625rem;
+                font-weight: 700;
+                letter-spacing: .0625rem;
+                background: white;
+            }
+            .bottom-indicator {
+                display: inline-block;
+                position: relative;
+                top: -1rem;
+                height: 1rem;
+            }
+            .stake-dot-indicator {
+                position: relative;
+                top: -2.25rem;
+                background-color: var(--nimiq-green);
+                width: .375rem;
+                height: .375rem;
+                border-radius: 50%;
+            }
+        }
+        .slider-controls {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            .slider-controls-wrapper {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                .slider-progress-bar {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%);
+                    height: 100%;
+                    border-radius: 3rem;
+                }
+                .slider-knob {
+                    display: flex;
+                    position: absolute;
+                    cursor: pointer;
+                    left: 0;
+                    top: 0;
+                    align-items: center;
+                    margin-top: 0.25rem;
+                    width: 4.5rem;
+                    height: 4.5rem;
+                    background-color: #fff;
+                    border-radius: 50%;
+                    box-shadow: 0rem .5rem 2rem rgba(0, 0, 0, 0.1),
+                                0rem .1875rem .375rem rgba(0, 0, 0, 0.08),
+                                0rem 0.03rem .25rem rgba(0, 0, 0, 0.06);
+                    svg {
+                        width: 3.5rem;
+                        height: 3.5rem;
+                        margin-left: 0.5rem;
+                        line, path {
+                            stroke-width: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
+}
+
+@media (max-width: 700px) { // Full mobile breakpoint
+}
+</style>
diff --git a/src/components/stake/StakeGraphPage.vue b/src/components/stake/StakeGraphPage.vue
new file mode 100644
index 000000000..1ae4c2820
--- /dev/null
+++ b/src/components/stake/StakeGraphPage.vue
@@ -0,0 +1,228 @@
+<template>
+    <div class="stake-graph-page flex-column">
+        <PageHeader :backArrow="true" @back="$emit('back')">
+            <template #default>
+                {{ $t('Set an Amount') }}
+            </template>
+            <template #more>
+                <p class="nq-text nq-blue">
+                    {{ $t('Use the slider to lock your NIM and earn rewards.') }}
+                </p>
+                <div v-if="validator" class="tooltip-bar flex-row">
+                    <LabelTooltip :validatorData="validator" />
+                    <ValidatorTrustScore v-if="'trust' in validator" :score="validator.trust" dry />
+                    <ValidatorRewardBubble v-if="'reward' in validator" :reward="validator.reward" dry />
+                </div>
+            </template>
+        </PageHeader>
+        <PageBody class="flex-column">
+            <span class="estimated-rewards-overlay">
+                <Tooltip
+                    preferredPosition="bottom right"
+                    :styles="{'width': '32rem', 'margin-left': '-6rem'}"
+                    :container="this"
+                >
+                    <div slot="trigger" class="flex-row">
+                        Estimated rewards <InfoCircleSmallIcon />
+                    </div>
+
+                    <img src="/img/staking/estimated-rewards-projection.svg" />
+                    <p>
+                        Your reward is depending on how many people stake.
+                        The less people stake, the higher your rewards.
+                    </p>
+                    <p class="explainer">
+                        The corridor assumes that between 20% and 80% of all NIM holders stake.
+                    </p>
+                </Tooltip>
+            </span>
+            <StakingGraph
+                :stakedAmount="newStake" :apy="validator && 'reward' in validator ? validator.reward : 0"
+                :period="{
+                    s: NOW,
+                    p: 12,
+                    m: MONTH,
+                }"
+            />
+
+            <StakeAmountSlider class="stake-amount-slider"
+                :stakedAmount="activeStake ? activeStake.activeStake : 0"
+                @amount-staked="updateStaked"
+            />
+
+            <div>
+                <button class="nq-button light-blue stake-button" @click="performStaking">
+                    {{ $t('Confirm stake') }}
+                </button>
+
+                <div class="disclaimer stake-disclaimer" v-if="stakeDelta >= 0">
+                    {{ $t('Unlock at any time. Your NIM will be available within {hours} hours.', { hours: 12 }) }}
+                </div>
+                <div class="disclaimer unstake-disclaimer" v-else>
+                    <Amount :amount="-stakeDelta" :decimals="DISPLAYED_DECIMALS" />
+                    {{ unstakeDisclaimer }}
+                </div>
+            </div>
+        </PageBody>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { InfoCircleSmallIcon, Amount, PageHeader, PageBody, Tooltip } from '@nimiq/vue-components';
+import { useAddressStore } from '../../stores/Address';
+import { useStakingStore } from '../../stores/Staking';
+
+import StakingGraph, { NOW, MONTH } from './graph/StakingGraph.vue';
+import StakeAmountSlider from './StakeAmountSlider.vue';
+import StakingIcon from '../icons/Staking/StakingIcon.vue';
+
+import LabelTooltip from './tooltips/LabelTooltip.vue';
+import ValidatorTrustScore from './tooltips/ValidatorTrustScore.vue';
+import ValidatorRewardBubble from './tooltips/ValidatorRewardBubble.vue';
+
+import { CryptoCurrency } from '../../lib/Constants';
+import { calculateDisplayedDecimals } from '../../lib/NumberFormatting';
+
+export default defineComponent({
+    setup(props, context) {
+        const { activeAddress } = useAddressStore();
+        const { activeStake, activeValidator, setStake } = useStakingStore();
+
+        const newStake = ref(activeStake.value ? activeStake.value.activeStake : 0);
+        const stakeDelta = ref(0);
+
+        function updateStaked(amount: number) {
+            newStake.value = amount;
+            stakeDelta.value = amount - (activeStake.value?.activeStake || 0);
+        }
+
+        function performStaking() {
+            // TODO: Trigger transaction signing
+
+            const currentStake = activeStake.value || {
+                address: activeAddress.value!,
+                activeStake: 0,
+                inactiveStake: 0,
+                validator: activeValidator.value!.address,
+            };
+
+            setStake({
+                ...currentStake,
+                activeStake: newStake.value,
+                inactiveStake: stakeDelta.value < 0 ? -stakeDelta.value : 0,
+            });
+
+            context.emit('next');
+        }
+
+        return {
+            NOW,
+            MONTH,
+            DISPLAYED_DECIMALS: calculateDisplayedDecimals(stakeDelta.value, CryptoCurrency.NIM),
+            unstakeDisclaimer: context.root.$t(
+                'will be available in ~{duration}.',
+                { duration: context.root.$t('{hours} hours', { hours: 12 }) },
+            ),
+            activeStake,
+            validator: activeValidator,
+            newStake,
+            stakeDelta,
+            updateStaked,
+            performStaking,
+        };
+    },
+    components: {
+        PageHeader,
+        PageBody,
+        LabelTooltip,
+        ValidatorTrustScore,
+        ValidatorRewardBubble,
+        StakingIcon,
+        StakingGraph,
+        StakeAmountSlider,
+        Amount,
+        Tooltip,
+        InfoCircleSmallIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .stake-graph-page {
+        flex-grow: 1;
+    }
+
+    .page-header {
+        padding-bottom: 3rem;
+
+        .tooltip-bar {
+            justify-content: center;
+
+            > * + * {
+                margin-left: 0.75rem;
+            }
+        }
+    }
+    .page-body {
+        padding: 0 0 2rem 0;
+        position: relative;
+        justify-content: space-between;
+        flex-grow: 1;
+
+        .estimated-rewards-overlay {
+            position: absolute;
+            top: 2.675rem;
+            left: 1.5rem;
+            z-index: 900;
+
+            /deep/ .trigger {
+                line-height: 1.2;
+                font-size: var(--small-size);
+                font-weight: 600;
+                color: var(--text-40);
+                background: white;
+                padding: 0.25rem 0.5rem;
+
+                div {
+                    align-items: center;
+
+                    svg {
+                        margin-left: 0.5rem;
+                    }
+                }
+            }
+        }
+
+        // .stake-amount-slider {}
+
+        .stake-button {
+            width: 40.5rem;
+        }
+
+        .disclaimer {
+            margin-top: 1.5rem;
+            font-weight: 600;
+            font-size: var(--small-size);
+            text-align: center;
+        }
+
+        .stake-disclaimer {
+            color: var(--text-50);
+        }
+
+        .unstake-disclaimer {
+            color: var(--nimiq-light-blue);
+        }
+    }
+
+    .nq-text {
+        margin: 1rem 0 1.5rem;
+    }
+
+    @media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
+    }
+
+    @media (max-width: 700px) { // Full mobile breakpoint
+    }
+</style>
diff --git a/src/components/stake/StakeInfoPage.vue b/src/components/stake/StakeInfoPage.vue
new file mode 100644
index 000000000..3cb3fbef8
--- /dev/null
+++ b/src/components/stake/StakeInfoPage.vue
@@ -0,0 +1,175 @@
+<template>
+    <div class="stake-info-page flex-column">
+        <PageHeader>
+            <template #default>
+                <div class="staking-icon">
+                    <StakingHeroIcon />
+                </div>
+                {{ $t('Stake NIM to earn NIM') }}
+            </template>
+            <template #more>
+                <p class="nq-text nq-blue">
+                    {{ $t('Help secure the network by locking up NIM and get a percentage as a reward.') }}
+                </p>
+            </template>
+        </PageHeader>
+        <PageBody>
+            <div class="staking-rounded-background flex-column">
+                <div class="staking-icons-lace">
+                    <img v-for="(icon, index) in sortedIcons.slice().reverse().concat(sortedIcons.slice(1))"
+                        :key="index"
+                        :src="`/img/staking/providers/${icon}`"
+                        :style="{top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 20)}px`}"
+                    />
+                </div>
+                <div class="staking-under-icons-text">
+                    {{ $t('So called validators facilitate this process.'
+                        + ' Choose one to stake on your behalf, set an amount and go.') }}
+                </div>
+                <button class="nq-button light-blue stake-button" @click="$emit('next')">
+                    {{ $t('Let\'s go') }}
+                </button>
+            </div>
+        </PageBody>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { PageHeader, PageBody } from '@nimiq/vue-components';
+import { RegisteredValidator, useStakingStore } from '../../stores/Staking';
+import StakingHeroIcon from '../icons/Staking/StakingHeroIcon.vue';
+
+// const progression = (i:number, n:number) => {
+//     if (n % 2 === 0) {
+//         throw new Error('Invalid progression scale(not an odd number)!');
+//     }
+//     const leg = (n - 1) / 2.0;
+//     const d = Math.max(0, (i >= leg) ? ((leg + 1) - (n - i)) : (leg - i)) / n;
+//     return 1.0 - d;
+// };
+
+export default defineComponent({
+    setup() {
+        const sortedIcons = computed(() => (useStakingStore().validatorsList.value
+            .filter((validator) => 'icon' in validator) as RegisteredValidator[])
+            .sort((a, b) => b.trust - a.trust)
+            .map((validator) => validator.icon));
+
+        return {
+            // progression,
+            sortedIcons,
+        };
+    },
+    components: {
+        PageHeader,
+        PageBody,
+        StakingHeroIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .stake-info-page {
+        flex-grow: 1;
+    }
+
+    .page-header {
+        height: 36.625rem;
+        padding-top: 3rem;
+        line-height: 1;
+
+        /deep/ .nq-h1 {
+            font-size: var(--h1-size);
+        }
+        .staking-icon {
+            margin-top: .75rem;
+            margin-left: -.125rem;
+            margin-bottom: 2.375rem;
+            svg {
+                height: 17.375rem;
+            }
+        }
+    }
+    .page-body {
+        padding: 0;
+        margin: 0;
+        flex-grow: 1;
+
+        .staking-rounded-background {
+            background-image: url('/img/staking/background-collar.svg');
+            background-size: cover;
+            background-position: 0rem -1rem;
+            background-repeat: no-repeat;
+            padding-bottom: 2rem;
+            height: 100%;
+
+            .staking-icons-lace {
+                position: relative;
+                left: -2rem;
+                margin-top: 3rem;
+                white-space: nowrap;
+                flex-grow: 1;
+                min-height: 9rem;
+
+                img {
+                    position: relative;
+                    width: 5.375rem;
+                    height: 5.375rem;
+                    margin-left: .81rem;
+                }
+            }
+
+            .staking-under-icons-text {
+                font-size: var(--small-size);
+                font-weight: 600;
+                padding: 0 4rem;
+                padding-bottom: 1.25rem;
+                line-height: 2.45rem;
+                text-align: center;
+                color: var(--text-60);
+            }
+
+            .stake-button {
+                width: 31.5rem;
+            }
+        }
+    }
+
+    .nq-text {
+        margin: 1.25rem 0 0;
+        padding: 0rem 1rem;
+    }
+
+    @media (max-width: 700px) { // Full mobile breakpoint
+        .page-header {
+            .staking-icon {
+                margin-top: 1.375rem;
+                margin-bottom: 1.25rem;
+                svg {
+                    margin-left: 0.25rem;
+                    height: 16rem;
+                }
+            }
+        }
+
+        .page-body {
+            .staking-rounded-background {
+                .staking-icons-lace {
+                    margin-top: 2.5rem;
+                    img {
+                        margin-left: .65rem;
+                        width: 4.75rem;
+                        height: 4.75rem;
+                    }
+                }
+                .staking-under-icons-text {
+                    padding-bottom: .25rem;
+                }
+            }
+        }
+        .nq-text {
+            margin: 1rem 0 0;
+        }
+    }
+</style>
diff --git a/src/components/stake/StakeModal.vue b/src/components/stake/StakeModal.vue
new file mode 100644
index 000000000..8e47f767e
--- /dev/null
+++ b/src/components/stake/StakeModal.vue
@@ -0,0 +1,126 @@
+<template>
+    <!-- Pass down all attributes not declared as props -->
+    <Modal v-bind="$attrs" v-on="$listeners" class="stake-modal" :class="{
+        'fat-modal': (page >= 3),
+        'bluetailed-modal': (page === 1),
+        }"
+        :showOverlay="page === 2 && invalidAccount"
+        >
+        <template v-if="page === 1">
+            <StakeInfoPage @next="page += 1" />
+        </template>
+        <template v-if="page === 2">
+            <StakeValidatorPage @back="page -= 1" @next="page += 1"/>
+        </template>
+        <template v-if="page === 3">
+            <StakeGraphPage @back="page -= 1" @next="page += 1" />
+        </template>
+        <template v-if="page === 4">
+            <StakedAlreadyPage @back="page -= 1" @next="page += 1"
+                @adjust-stake="adjustStake"
+                @switch-validator="switchValidator" />
+        </template>
+        <template v-if="page === 5">
+            <StakeRewardsHistoryPage @back="page -= 1" @next="page += 1" />
+        </template>
+        <SelectAccountOverlay slot="overlay" />
+    </Modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from '@vue/composition-api';
+import { useStakingStore } from '../../stores/Staking';
+import { useAddressStore } from '../../stores/Address';
+import Modal from '../modals/Modal.vue';
+import StakeInfoPage from './StakeInfoPage.vue';
+import StakeValidatorPage from './StakeValidatorPage.vue';
+import StakeGraphPage from './StakeGraphPage.vue';
+import StakedAlreadyPage from './StakedAlreadyPage.vue';
+import StakeRewardsHistoryPage from './StakeRewardsHistoryPage.vue';
+import SelectAccountOverlay from './SelectAccountOverlay.vue';
+
+export default defineComponent({
+    setup() {
+        const { activeAddressInfo } = useAddressStore();
+        const { activeValidator } = useStakingStore();
+        const page = ref(activeValidator.value ? 4 : 1);
+
+        const invalidAccount = computed(() => activeAddressInfo.value
+            ? !activeAddressInfo.value.balance
+            : false);
+
+        const adjustStake = () => {
+            page.value = 3;
+        };
+
+        const switchValidator = () => {
+            page.value = 2;
+        };
+
+        return {
+            page,
+            activeValidator,
+            adjustStake,
+            switchValidator,
+            invalidAccount,
+        };
+    },
+    components: {
+        Modal,
+        StakeInfoPage,
+        StakeValidatorPage,
+        StakeGraphPage,
+        StakedAlreadyPage,
+        StakeRewardsHistoryPage,
+        SelectAccountOverlay,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    // .modal /deep/ .small-page {
+    //     height: auto;
+    //     overflow-y: auto;
+    // }
+    .modal {
+        /deep/ .wrapper {
+            .small-page {
+                overflow: hidden;
+                min-width: 52.5rem;
+                min-height: 70rem;
+                .page-body {
+                    overflow: hidden;
+                }
+            }
+        }
+        &.fat-modal {
+            /deep/ .small-page {
+                width: 63.5rem;
+                height: 74.875rem;
+                // transition: width 1.5s ease-out;
+            }
+            // transition: width 0.75s ease-out;
+        }
+        &.bluetailed-modal {
+            /deep/ .small-page {
+                background: linear-gradient(180deg, #FFF 0%, #FFF 96%, rgb(248, 248, 248) 96%, #FFF 100%);
+            }
+        }
+    }
+
+    @media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
+    }
+
+    @media (max-width: 700px) { // Full mobile breakpoint
+        .modal {
+            /deep/ .wrapper {
+                .small-page {
+                    overflow: hidden;
+                    min-width: 45rem;
+                    width: 45rem;
+                    min-height: 65.25rem;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/components/stake/StakeRewardsHistoryPage.vue b/src/components/stake/StakeRewardsHistoryPage.vue
new file mode 100644
index 000000000..41683b640
--- /dev/null
+++ b/src/components/stake/StakeRewardsHistoryPage.vue
@@ -0,0 +1,15 @@
+<template>
+    <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/stake/StakeValidatorFilter.vue b/src/components/stake/StakeValidatorFilter.vue
new file mode 100644
index 000000000..e1a5acd6e
--- /dev/null
+++ b/src/components/stake/StakeValidatorFilter.vue
@@ -0,0 +1,210 @@
+<template>
+    <div class="stake-validator-filter">
+        <div class="validator-filter-wrapper" v-if="state !== FilterState.SEARCH">
+            <button class="validator-switch" :class="{ selected: state === FilterState.TRUST }"
+                @click="state = FilterState.TRUST">
+                {{ $t('TrustScore') }}
+            </button>
+            <button class="validator-switch" :class="{ selected: state === FilterState.PAYOUT }"
+                @click="state = FilterState.PAYOUT">
+                {{ $t('Payout Time') }}
+            </button>
+            <button class="validator-switch" :class="{ selected: state === FilterState.REWARD }"
+                @click="state = FilterState.REWARD">
+                {{ $t('Reward') }}
+            </button>
+            <button class="validator-search-icon" @click="enableSearch">
+                <FatSearchIcon />
+            </button>
+        </div>
+        <div class="validator-filter-search-wrapper" v-else>
+            <span class="validator-search-icon">
+                <FatSearchIcon />
+            </span>
+            <input type="text" ref="$search" class="validator-search-box"
+                :placeholder="$t('Type to search...')" />
+            <button class="validator-search-close-icon" @click="state = FilterState.TRUST">
+                <XCloseIcon />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref } from '@vue/composition-api';
+import FatSearchIcon from '../icons/Staking/FatSearchIcon.vue';
+import SearchIcon from '../icons/Staking/SearchIcon.vue';
+import XCloseIcon from '../icons/Staking/XCloseIcon.vue';
+
+export enum FilterState {
+    TRUST,
+    PAYOUT,
+    REWARD,
+    SEARCH,
+}
+
+export default defineComponent({
+    setup(props, context) {
+        const state = ref(FilterState.TRUST);
+        const $search = ref<HTMLInputElement>();
+
+        watch(state, () => context.emit('changed', state.value));
+
+        function enableSearch() {
+            state.value = FilterState.SEARCH;
+            context.root.$nextTick(() => $search.value?.focus());
+        }
+
+        return {
+            state,
+            FilterState,
+            $search,
+            enableSearch,
+        };
+    },
+    components: {
+        FatSearchIcon,
+        SearchIcon,
+        XCloseIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.stake-validator-filter {
+    width: 38rem;
+    height: 3.75rem;
+    margin: auto;
+    margin-bottom: 1.5rem;
+    white-space: nowrap;
+
+    .validator-filter-wrapper {
+        background-color: var(--text-6);
+        height: 3.75rem;
+        border-radius: 2rem;
+        padding: 0;
+        padding-left: .25rem;
+        white-space: nowrap;
+        overflow: hidden;
+
+        .validator-switch {
+            font-family: Muli, Helvetica, serif;
+            padding: .75rem 1.25rem;
+            height: 3.25rem;
+
+            border: 0;
+            background: transparent;
+            box-shadow: none;
+            border-radius: 2rem;
+
+            font-style: normal;
+            font-weight: 700;
+
+            font-size: 1.75rem;
+            line-height: 1.75rem;
+            text-align: center;
+
+            color: var(--text-50);
+            cursor: pointer;
+
+            transition: color 0.3s;
+
+            * {
+                select: none;
+            }
+
+            &:hover,
+            &:focus {
+                color: var(--text-80);
+            }
+
+            &.selected {
+                color: var(--nimiq-blue);
+                background: white;
+                box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.07),
+                            0px 1.875px 3.75px rgba(0, 0, 0, 0.05),
+                            0px 0.421263px 2.5px rgba(0, 0, 0, 0.0254662);
+                border-radius: 22rem;
+            }
+        }
+
+        .validator-search-icon {
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+            margin-left: -.5rem;
+            border: 0;
+            background: transparent;
+            box-shadow: none;
+            svg {
+                position: relative;
+                top: .375rem;
+                left: .25rem;
+                width: 2.375rem;
+                height: 2.375rem;
+                opacity: .5;
+                line, circle {
+                    stroke: rgb(31, 35, 72);
+                    stroke-width: 2.0;
+                }
+            }
+        }
+    }
+    .validator-filter-search-wrapper {
+        display: flex;
+        width: 22.875rem;
+        height: 4rem;
+        padding: 0.25rem;
+        margin: auto;
+        padding-top: 0.125rem;
+        flex-direction: row;
+        align-items: center;
+
+        text-align: center;
+        border: 0.1875rem solid rgba(5, 130, 202, 0.4);
+        box-sizing: border-box;
+        border-radius: 10.9375rem;
+
+        .validator-search-icon {
+            display: flex;
+            height: 3.5rem;
+            align-items: center;
+            margin-left: 1rem;
+            margin-right: .25rem;
+            svg {
+                width: 1.75rem;
+                height: 1.75rem;
+                opacity:  .7;
+                line, circle {
+                    stroke: rgb(5, 130, 202);
+                }
+            }
+        }
+
+        .validator-search-box {
+            width: 15.125rem;
+            font-size: 2rem;
+            line-height: 1.75rem;
+            color: #0582CA;
+            opacity: 0.4;
+            border: 0;
+            &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+                color: #0582CA;
+            }
+            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+                color: #0582CA;
+            }
+        }
+
+        .validator-search-close-icon {
+            display: flex;
+            height: 3.5rem;
+            align-items: center;
+            cursor: pointer;
+            border: 0;
+            background: transparent;
+            color: #0582CA;
+        }
+    }
+}
+</style>
diff --git a/src/components/stake/StakeValidatorListItem.vue b/src/components/stake/StakeValidatorListItem.vue
new file mode 100644
index 000000000..34903e69b
--- /dev/null
+++ b/src/components/stake/StakeValidatorListItem.vue
@@ -0,0 +1,142 @@
+<template>
+    <button
+        class="validator-list-item reset flex-row"
+        @focus="$emit('focus', true)"
+        @blur="$emit('focus', false)">
+
+        <div class="validator-item-wrapper flex-row">
+            <div class="validator-left validator-icon">
+                <img v-if="'icon' in validatorData" :src="`/img/staking/providers/${validatorData.icon}`" />
+                <Identicon v-else :address="validatorData.address"/>
+            </div>
+            <div class="validator-item-mid flex-column">
+                <div class="validator-item-inner-row">
+                    <span v-if="'label' in validatorData" class="validator-label">{{ validatorData.label }}</span>
+                    <ShortAddress v-else :address="validatorData.address"/>
+                </div>
+                <div class="validator-item-inner-row flex-row validator-trust">
+                    <ValidatorTrustScore v-if="'trust' in validatorData" :score="validatorData.trust" />
+                    <img v-if="'trust' in validatorData" class="dot" src="/img/staking/dot.svg" />
+                    <div class="validator-payout">{{ payoutText }}</div>
+                </div>
+            </div>
+            <ValidatorRewardBubble v-if="'reward' in validatorData" :reward="validatorData.reward" />
+        </div>
+    </button>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { Identicon } from '@nimiq/vue-components';
+import { ValidatorData } from '../../stores/Staking';
+import { getPayoutText } from '../../lib/StakingUtils';
+
+import ValidatorTrustScore from './tooltips/ValidatorTrustScore.vue';
+import ValidatorRewardBubble from './tooltips/ValidatorRewardBubble.vue';
+import ShortAddress from '../ShortAddress.vue';
+
+export default defineComponent({
+    props: {
+        validatorData: {
+            type: Object as () => ValidatorData,
+            required: true,
+        },
+    },
+    setup(props, context) {
+        const payoutText = computed(() => 'payout' in props.validatorData
+            ? getPayoutText(props.validatorData.payout)
+            : context.root.$t('Unregistered validator'));
+
+        return {
+            payoutText,
+        };
+    },
+    components: {
+        Identicon,
+        ValidatorTrustScore,
+        ValidatorRewardBubble,
+        ShortAddress,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.validator-list-item {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+
+    width: calc(100% - 4rem);
+    height: 9.25rem;
+    margin: auto;
+    background-color: transparent;
+
+    border: 0;
+    border-radius: 0.75rem;
+    outline: none;
+
+    flex-shrink: 0;
+
+    &:focus {
+        outline: 4px solid #f2f2f4;
+        box-shadow: none;
+    }
+
+    input::-moz-focus-inner {
+        border: 0;
+    }
+
+    .validator-icon {
+        img, .identicon {
+            width: 5.5rem;
+            height: 5.5rem;
+            display: block;
+        }
+    }
+
+    &:hover {
+        background-color: #f2f2f4;
+    }
+
+    .validator-item-wrapper {
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        padding: 0 2.25rem;
+
+        .validator-item-mid {
+            flex-grow: 1;
+            flex-shrink: 1;
+            padding-left: 2.25rem;
+            min-width: 0;
+        }
+        .validator-item-inner-row {
+            line-height: 3rem;
+            align-items: center;
+            padding-right: 2rem;
+            font-size: var(--body-size);
+
+            .validator-label {
+                font-weight: 600;
+            }
+
+            .short-address {
+                font-weight: 500;
+            }
+        }
+
+        .validator-trust {
+            font-size: var(--small-size);
+            color: var(--text-50);
+        }
+
+        .dot {
+            margin: 0 0.675rem;
+        }
+
+        .validator-payout {
+            white-space: nowrap;
+        }
+    }
+}
+</style>
diff --git a/src/components/stake/StakeValidatorPage.vue b/src/components/stake/StakeValidatorPage.vue
new file mode 100644
index 000000000..f4c7a2496
--- /dev/null
+++ b/src/components/stake/StakeValidatorPage.vue
@@ -0,0 +1,179 @@
+<template>
+    <div class="stake-validator-page flex-column">
+        <PageHeader :backArrow="true" @back="$emit('back')">
+            <template #default>
+                {{ $t('Choose a Validator') }}
+            </template>
+            <template #more>
+                <p class="nq-text nq-blue">
+                    {{ $t('Earn rewards by locking NIM in a validator. Locked NIM stay in your wallet.') }}
+                </p>
+            </template>
+        </PageHeader>
+        <PageBody>
+            <StakeValidatorFilter @changed="changeFilter" />
+            <div class="mask-container">
+                <div class="scroll-mask-top" :class="{ 'disabled-mask': !masks }"></div>
+                <div class="scroll-container">
+                    <div class="validator-list">
+                        <StakeValidatorListItem
+                            v-for="validator in sortedList" :key="validator.address"
+                            :validatorData="validator"
+                            @click.native="selectValidator(validator.address)"
+                            @focus="onValidatorFocusChange"
+                            sortable
+                        />
+                        <div style="height: 1rem; flex-shrink: 0;"></div>
+                    </div>
+                </div>
+                <div class="scroll-mask-bottom" :class="{ 'disabled-mask': !masks }"></div>
+            </div>
+        </PageBody>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import { PageHeader, PageBody } from '@nimiq/vue-components';
+import { useStakingStore } from '../../stores/Staking';
+
+import StakeValidatorFilter, { FilterState } from './StakeValidatorFilter.vue';
+import StakeValidatorListItem from './StakeValidatorListItem.vue';
+import { useAddressStore } from '../../stores/Address';
+
+export default defineComponent({
+    setup(props, context) {
+        const masks = ref(true);
+        const onValidatorFocusChange = (state: boolean) => {
+            masks.value = !state;
+        };
+
+        const filter = ref(FilterState.TRUST);
+
+        function changeFilter(newFilter: FilterState) {
+            filter.value = newFilter;
+        }
+
+        const { activeAddress } = useAddressStore();
+        const { validatorsList, activeStake, setStake } = useStakingStore();
+
+        const sortedList = computed(() => {
+            switch (filter.value) {
+                case FilterState.PAYOUT:
+                    return validatorsList.value.slice()
+                        .sort((a, b) => ('payout' in b ? b.payout : 0) - ('payout' in a ? a.payout : 0));
+                case FilterState.REWARD:
+                    return validatorsList.value.slice()
+                        .sort((a, b) => ('reward' in b ? b.reward : 0) - ('reward' in a ? a.reward : 0));
+                default:
+                    return validatorsList.value.slice()
+                        .sort((a, b) => ('trust' in b ? b.trust : 0) - ('trust' in a ? a.trust : 0));
+            }
+        });
+
+        function selectValidator(address: string) {
+            // TODO: Trigger rededicate tx signing
+
+            const currentStake = activeStake.value || {
+                address: activeAddress.value!,
+                activeStake: 0,
+                inactiveStake: 0,
+                validator: address,
+            };
+
+            currentStake.validator = address;
+            setStake(currentStake);
+
+            context.emit('next');
+        }
+
+        return {
+            masks,
+            changeFilter,
+            sortedList,
+            selectValidator,
+            onValidatorFocusChange,
+        };
+    },
+    components: {
+        PageHeader,
+        PageBody,
+        StakeValidatorListItem,
+        StakeValidatorFilter,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    @import '../../scss/mixins.scss';
+
+    .stake-validator-page {
+        flex-grow: 1;
+    }
+
+    .page-header {
+        padding-bottom: 1rem;
+    }
+
+    .page-body {
+        padding: 1rem 0;
+        overflow: hidden;
+
+        .mask-container {
+            position: relative;
+            top: -.75rem;
+            overflow: hidden;
+            padding-top: .75rem;
+        }
+
+        .scroll-container {
+            overflow-y: auto;
+            @extend %custom-scrollbar;
+            &::-webkit-scrollbar {
+                width: 0.75rem;
+            }
+            scrollbar-width: thin;
+        }
+
+        .scroll-mask-top {
+            position: absolute;
+            top: 0;
+            left: 0.875rem;
+            width: calc(100% - 2.25rem);
+            height: 2.5rem;
+            background: linear-gradient(0deg, rgba(244, 244, 244, 0), white);
+        }
+
+        .scroll-mask-bottom {
+            position: absolute;
+            left: 0.875rem;
+            bottom: 0;
+            width: calc(100% - 2.25rem);
+            height: 2.5rem;
+            background: linear-gradient(0deg, white, rgba(244, 244, 244, 0));
+        }
+
+        .disabled-mask {
+            background: none;
+        }
+
+        .validator-list {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 46.5rem;
+            padding-top: 1rem;
+        }
+    }
+    .nq-text {
+        margin-top: .875rem;
+        margin-bottom: 0.5rem;
+        line-height: 1.4;
+    }
+
+    @media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
+    }
+
+    @media (max-width: 700px) { // Full mobile breakpoint
+    }
+</style>
diff --git a/src/components/stake/StakedAlreadyPage.vue b/src/components/stake/StakedAlreadyPage.vue
new file mode 100644
index 000000000..5a1a21148
--- /dev/null
+++ b/src/components/stake/StakedAlreadyPage.vue
@@ -0,0 +1,346 @@
+<template>
+    <div class="staked-already-page flex-column">
+        <PageHeader :backArrow="false">
+            <template v-if="validator">
+                {{ $t(
+                    'Staking with {validator}',
+                    { validator: 'label' in validator ? validator.label : validator.address.substr(0, 9) },
+                ) }}
+            </template>
+            <template v-else>
+                {{ $t('Staking') }}
+            </template>
+        </PageHeader>
+        <PageBody class="flex-column">
+            <span class="estimated-rewards-overlay">
+                <Tooltip
+                    preferredPosition="bottom right"
+                    :styles="{'width': '32rem', 'margin-left': '-6rem'}"
+                    :container="this"
+                >
+                    <div slot="trigger" class="flex-row">
+                        Estimated rewards <InfoCircleSmallIcon />
+                    </div>
+
+                    <img src="/img/staking/estimated-rewards-projection.svg" />
+                    <p>
+                        Your reward is depending on how many people stake.
+                        The less people stake, the higher your rewards.
+                    </p>
+                    <p class="explainer">
+                        The corridor assumes that between 20% and 80% of all NIM holders stake.
+                    </p>
+                </Tooltip>
+            </span>
+            <StakingGraph :stakedAmount="stake ? stake.activeStake : 0"
+                :apy="validator && 'reward' in validator ? validator.reward : 0" :readonly="true"
+                :period="{
+                    s: NOW,
+                    p: 12,
+                    m: MONTH,
+                }"
+                :key="graphUpdate" />
+
+            <div v-if="stake">
+                <span class="nq-label flex-row section-title">
+                    <StakingIcon />
+                    Staked
+                </span>
+                <div class="row flex-row">
+                    <div class="col flex-grow">
+                        <div class="amount-staked">
+                            <Amount :amount="stake.activeStake + stake.inactiveStake"/>
+                        </div>
+                        <div class="amount-staked-proportional">
+                            {{ $t('{percentage}% of address\'s balance', { percentage: percentage.toFixed(2) }) }}
+                        </div>
+                    </div>
+                    <button class="nq-button-s" @click="$emit('adjust-stake')">Adjust Stake</button>
+                    <button class="nq-button-pill red"
+                        @click="unstakeAll" :disabled="!stake.activeStake"
+                    >Unstake all</button>
+                </div>
+                <div v-if="stake && stake.inactiveStake" class="unstaking row flex-row nq-light-blue">
+                    <CircleSpinner/> {{ $t('Unstaking') }} <Amount :amount="stake.inactiveStake"/>
+                </div>
+            </div>
+
+            <div class="horizontal-separator" />
+
+            <div v-if="validator">
+                <span class="nq-label flex-row section-title">
+                    Validator
+                </span>
+                <div class="row flex-row">
+                    <div class="validator flex-grow">
+                        <div class="validator-top flex-row">
+                            <img v-if="'icon' in validator"
+                                class="validator-icon"
+                                :src="`/img/staking/providers/${validator.icon}`"
+                            />
+                            <Identicon v-else class="validator-icon" :address="validator.address"/>
+                            <span v-if="'label' in validator" class="validator-label">{{ validator.label }}</span>
+                            <ShortAddress v-else :address="validator.address"/>
+                            <ValidatorRewardBubble v-if="'reward' in validator" :reward="validator.reward" />
+                        </div>
+                        <div class="validator-bottom flex-row">
+                            <ValidatorTrustScore v-if="'trust' in validator" :score="validator.trust" />
+                            <img v-if="'trust' in validator" class="dot" src="/img/staking/dot.svg">
+                            <div class="validator-payout">{{ payoutText }}</div>
+                        </div>
+                    </div>
+                    <button class="nq-button-s switch-validator" @click="$emit('switch-validator')">
+                        Switch Validator
+                    </button>
+                </div>
+            </div>
+
+            <!-- <button class="nq-button-s rewards-history" @click="$emit('next')">
+                {{ $t('Rewards history') }} &gt;
+            </button> -->
+        </PageBody>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import {
+    InfoCircleSmallIcon,
+    Amount,
+    PageHeader,
+    PageBody,
+    Tooltip,
+    CircleSpinner,
+    Identicon,
+} from '@nimiq/vue-components';
+import { useStakingStore } from '../../stores/Staking';
+import { useAddressStore } from '../../stores/Address';
+import { calculateDisplayedDecimals, formatAmount } from '../../lib/NumberFormatting';
+import { getPayoutText } from '../../lib/StakingUtils';
+
+import StakingGraph, { NOW, MONTH } from './graph/StakingGraph.vue';
+import StakingIcon from '../icons/Staking/StakingIcon.vue';
+import ValidatorTrustScore from './tooltips/ValidatorTrustScore.vue';
+import ValidatorRewardBubble from './tooltips/ValidatorRewardBubble.vue';
+import ShortAddress from '../ShortAddress.vue';
+
+import { CryptoCurrency, NIM_DECIMALS, NIM_MAGNITUDE } from '../../lib/Constants';
+
+export default defineComponent({
+    setup(props, context) {
+        const { activeAddress, activeAddressInfo } = useAddressStore();
+        const { activeStake: stake, activeValidator: validator, patchStake } = useStakingStore();
+
+        const graphUpdate = ref(0);
+        const availableBalance = computed(() => activeAddressInfo.value?.balance || 0);
+
+        const unstakedAmount = ref(0);
+
+        const percentage = computed(() => availableBalance.value > 0
+            ? ((stake.value?.activeStake || 0) / availableBalance.value) * 100
+            : 0,
+        );
+
+        const payoutText = computed(() => validator.value && 'payout' in validator.value
+            ? getPayoutText(validator.value.payout)
+            : context.root.$t('Unregistered validator'));
+
+        function unstakeAll() {
+            // TODO: Trigger transaction signing
+
+            const currentStake = stake.value!;
+
+            patchStake(activeAddress.value!, {
+                activeStake: 0,
+                inactiveStake: currentStake.activeStake,
+            });
+        }
+
+        return {
+            NOW,
+            MONTH,
+            NIM_DECIMALS,
+            NIM_MAGNITUDE,
+            STAKING_CURRENCY: CryptoCurrency.NIM,
+            DISPLAYED_DECIMALS: calculateDisplayedDecimals(unstakedAmount.value, CryptoCurrency.NIM),
+            unstakeDisclaimer: context.root.$t(
+                'will be available within ~{duration}',
+                { duration: '12 hours' },
+            ),
+            format: formatAmount,
+            graphUpdate,
+            stake,
+            validator,
+            availableBalance,
+            unstakedAmount,
+            percentage,
+            payoutText,
+            unstakeAll,
+        };
+    },
+    components: {
+        PageHeader,
+        PageBody,
+        StakingIcon,
+        StakingGraph,
+        Amount,
+        Tooltip,
+        InfoCircleSmallIcon,
+        ValidatorTrustScore,
+        ValidatorRewardBubble,
+        CircleSpinner,
+        Identicon,
+        ShortAddress,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .staked-already-page {
+        flex-grow: 1;
+    }
+
+    .page-header {
+        padding-bottom: 3rem;
+    }
+
+    .page-body {
+        padding: 0 2rem 8rem;
+        position: relative;
+        justify-content: space-between;
+        flex-grow: 1;
+
+        .estimated-rewards-overlay {
+            position: absolute;
+            top: 2.675rem;
+            left: 1.5rem;
+            z-index: 900;
+
+            /deep/ .trigger {
+                line-height: 1.2;
+                font-size: var(--small-size);
+                font-weight: 600;
+                color: var(--text-40);
+                background: white;
+                padding: 0.25rem 0.5rem;
+
+                div {
+                    align-items: center;
+
+                    svg {
+                        margin-left: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .section-title {
+        padding-left: 2rem;
+        align-items: center;
+
+        .nq-icon {
+            font-size: 3.25rem;
+            margin: -0.5rem 0.25rem 0 -0.75rem;
+
+            /deep/ path {
+                stroke-width: 1;
+            }
+        }
+    }
+
+    .amount-staked {
+        font-size: var(--h2-size);
+        font-weight: bold;
+        line-height: 1;
+        margin-bottom: 1rem;
+    }
+
+    .amount-staked-proportional {
+        font-size: var(--small-size);
+        font-weight: 600;
+        color: var(--text-50);
+        line-height: 1;
+    }
+
+    .unstaking {
+        align-items: center;
+        font-size: var(--body-size);
+        font-weight: 600;
+        margin-top: 2rem;
+
+        /deep/ .circle-spinner {
+            margin-right: 1rem;
+        }
+
+        .amount {
+            margin-left: 0.25em;
+        }
+    }
+
+    .horizontal-separator {
+        width: 100%;
+        height: 0.1875rem;
+        border-top: 0.1875rem solid var(--nimiq-blue);
+        opacity: 0.2;
+
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .validator {
+        .flex-row {
+            align-items: center;
+        }
+
+        .validator-top {
+            font-size: var(--h2-size);
+
+            .validator-icon {
+                width: 3rem;
+                height: 3rem;
+                margin-right: 0.75rem;
+            }
+
+            .validator-label {
+                font-weight: bold;
+            }
+
+            .short-address {
+                font-weight: 500;
+            }
+
+            .validator-reward-bubble {
+                margin-left: 0.75rem;
+            }
+        }
+
+        .validator-bottom {
+            font-size: var(--small-size);
+            color: var(--text-50);
+            font-weight: 600;
+            line-height: 1;
+            margin-top: 0.75rem;
+
+            .dot {
+                margin: 0 0.675rem;
+            }
+        }
+    }
+
+    .switch-validator {
+        flex-shrink: 0;
+    }
+
+    .rewards-history {
+        align-self: center;
+    }
+
+    .row {
+        padding: 0 2rem;
+
+        button + button {
+            margin-left: 2rem;
+        }
+    }
+</style>
diff --git a/src/components/stake/assets/staking.json b/src/components/stake/assets/staking.json
new file mode 100644
index 000000000..acc23e0d8
--- /dev/null
+++ b/src/components/stake/assets/staking.json
@@ -0,0 +1,24 @@
+{
+    "validatorLabelDisclaimer": "The validator is solely responsible for information provided above.",
+    "uptimeRules": [
+        ["80", "4.68", "The validator is extremely unreliable, which leads to reduced rewards."],
+        ["94", "4.68", "The validator is unreliable, which might lead to reduced rewards."],
+        ["96", "4.68", "The validator was occasionally offline, which might lead to reduced rewards."],
+        ["99", "4.68", "The validator is consistantly available and likely to receive the full reward potential."],
+        ["Infinity", "4.68", "The validator is reliably available and will receive the full reward potential."]
+    ],
+    "ageRules": [
+        ["1", "4.99", "The validator just started and might not be very experienced."],
+        ["2", "4.99", "The validator is relatively young and might not be very experienced."],
+        ["3", "4.99", "The validator is sufficiently experienced"],
+        ["6", "4.99", "The validator is decently experienced."],
+        ["Infinity", "4.99", "The validator is very experienced."]
+    ],
+    "dominanceRules": [
+        ["Infinity", "4.28", "Do not stake with this validator!\n\nThe validator controls a substantial share of the total stake. This makes it a potential threat to the network."],
+        ["22", "4.28", "Staking with this validator is not recommended!\n\nThe validator controls a substantial share of the total stake. This makes it a potential threat to the network."],
+        ["18", "4.28", "The validator controls a large share of the total stake.\n\nConsider choosing a smaller validator to improve the network’s security."],
+        ["12", "4.28", "The validator controls a sizeable share of the total stake. You can support the network by staking with a smaller validator."],
+        ["-1", "4.28", "The validator controls a healthy share of the total stake. Staking with this validator improves the network’s security."]
+    ]
+}
\ No newline at end of file
diff --git a/src/components/stake/assets/validators.mock.json b/src/components/stake/assets/validators.mock.json
new file mode 100644
index 000000000..9a8a7455b
--- /dev/null
+++ b/src/components/stake/assets/validators.mock.json
@@ -0,0 +1,82 @@
+[
+  {
+    "address": "overstake",
+    "icon": "overstake.svg",
+    "label": "Overstake",
+    "trust": 5.0,
+    "payout": 43200000,
+    "reward": 4.9,
+    "description": "We denounce with righteous indignation and dislike men who are so beguiled and. Demoralized by the charms of pleasure of the moment, so blinded by desire, that.",
+    "link": "https://www.nimiq.com",
+    "uptime": 99,
+    "monthsOld": 2,
+    "dominance": 12,
+    "stakedAmount": 0,
+    "unclaimedReward": 0,
+    "unstakePending": false
+  },
+  {
+    "address": "nimiq-watch",
+    "icon": "nimiq-watch.svg",
+    "label": "Nimiq Watch",
+    "trust": 4.99,
+    "payout": 43200000,
+    "reward": 5.1,
+    "description": "We denounce with righteous indignation and dislike men who are so beguiled and. Demoralized by the charms of pleasure of the moment, so blinded by desire, that.",
+    "link": "https://www.nimiq.com",
+    "uptime": 99,
+    "monthsOld": 48,
+    "dominance": 10,
+    "stakedAmount": 0,
+    "unclaimedReward": 0,
+    "unstakePending": false
+  },
+  {
+    "address": "nimpool",
+    "icon": "nimpool.svg",
+    "label": "NimPool",
+    "trust": 4.98,
+    "payout": 604800000,
+    "reward": 2.4,
+    "description": "We denounce with righteous indignation and dislike men who are so beguiled and. Demoralized by the charms of pleasure of the moment, so blinded by desire, that.",
+    "link": "https://www.nimiq.com",
+    "uptime": 99,
+    "monthsOld": 48,
+    "dominance": 25,
+    "stakedAmount": 0,
+    "unclaimedReward": 0,
+    "unstakePending": false
+  },
+  {
+    "address": "icestaking",
+    "icon": "icestaking.png",
+    "label": "Icestaking",
+    "trust": 1.28,
+    "payout": 86400000,
+    "reward": 8.3,
+    "description": "We denounce with righteous indignation and dislike men who are so beguiled and. Demoralized by the charms of pleasure of the moment, so blinded by desire, that.",
+    "link": "https://www.nimiq.com",
+    "uptime": 84,
+    "monthsOld": 48,
+    "dominance": 10,
+    "stakedAmount": 0,
+    "unclaimedReward": 0,
+    "unstakePending": false
+  },
+  {
+    "address": "acestaking",
+    "icon": "ace-staking.png",
+    "label": "Ace Staking",
+    "trust": 1.28,
+    "payout": 21600000,
+    "reward": 7.1,
+    "description": "We denounce with righteous indignation and dislike men who are so beguiled and. Demoralized by the charms of pleasure of the moment, so blinded by desire, that.",
+    "link": "https://www.nimiq.com",
+    "uptime": 80,
+    "monthsOld": 48,
+    "dominance": 10,
+    "stakedAmount": 0,
+    "unclaimedReward": 0,
+    "unstakePending": false
+  }
+]
diff --git a/src/components/stake/graph/StakingGraph.vue b/src/components/stake/graph/StakingGraph.vue
new file mode 100644
index 000000000..845861fdc
--- /dev/null
+++ b/src/components/stake/graph/StakingGraph.vue
@@ -0,0 +1,241 @@
+<template>
+    <div class="chart-container">
+        <Vue3ChartJs
+            :id="chartData.id"
+            ref="chartRef"
+            :type="chartData.type"
+            :data="chartData.data"
+            :options="chartData.options" />
+    </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, computed } from '@vue/composition-api';
+import { Duration, DateTime } from 'luxon';
+import { formatAmount } from '../../../lib/NumberFormatting';
+import { NIM_MAGNITUDE } from '../../../lib/Constants';
+import { i18n } from '../../../i18n/i18n-setup';
+import Vue3ChartJs from './lib/Vue3ChartJs.vue';
+
+export const NOW = DateTime.now();
+export const MONTH = DateTime.fromObject({ months: 1 });
+
+const getProjectionLine = (apy, staked, steps, stepSize, dV = 1.13) => {
+    const projection = [];
+    const apm = (apy / 12.0) / 100.0;
+
+    for (let i = 0; i < steps; i++) {
+        projection.push(
+            {
+                x: NOW.plus(Duration.fromObject({ months: stepSize * i })).toMillis(),
+                y: staked * (1.0 + (apm * stepSize * i * (dV ** i))),
+            });
+    }
+    return projection;
+};
+
+const createPatternFill = (lineColor = '', width = 718, height = 103) => {
+    const patternCanvas = document.createElement('canvas');
+    const patternContext = patternCanvas.getContext('2d');
+    patternCanvas.width = width;
+    patternCanvas.height = height;
+
+    patternContext.lineWidth = 0.5;
+    if (lineColor) {
+        patternContext.strokeStyle = lineColor;
+    } else {
+        patternContext.strokeStyle = 'rgba(31, 35, 72, 0.3)';
+    }
+    const gaps = [18 / 2.0, 20];
+
+    for (let x = gaps[0] - 1; x <= patternCanvas.width; x += gaps[0]) {
+        patternContext.moveTo(x, 0);
+        patternContext.lineTo(x, patternCanvas.height);
+        x += 0.075;
+    }
+
+    // for (let y = 4; y <= patternCanvas.height; y += gaps[1]) {
+    //     patternContext.moveTo(0, y);
+    //     patternContext.lineTo(patternCanvas.width, y);
+    // }
+    patternContext.stroke();
+
+    const pattern = patternContext.createPattern(patternCanvas, 'no-repeat');
+    return pattern;
+};
+
+export default defineComponent({
+    setup(props) {
+        const chartRef = ref(null);
+        const _amount = ref(props.stakedAmount);
+        const stakedAmount = computed(() => _amount.value);
+
+        const apy = ref(props.apy);
+
+        const getChartData = (noMonths = 12) => {
+            const steps = 5;
+            const sideSteps = 2;
+            const labeledSteps = steps - sideSteps;
+            const stepSize = noMonths / labeledSteps;
+            const labels = [];
+            const baseGrowth = apy.value / 1.5;
+            const bestGrowth = apy.value * 1.5;
+            const baseProjection = getProjectionLine(baseGrowth, stakedAmount.value, steps, stepSize);
+            const normProjection = getProjectionLine(apy.value, stakedAmount.value, steps, stepSize);
+            const bestProjection = getProjectionLine(bestGrowth, stakedAmount.value, steps, stepSize);
+            const pointLabels = Array(sideSteps / 2).fill('');
+            for (let i = 0; i < sideSteps; i++) {
+                labels.push('');
+            }
+            for (let i = 1; i <= labeledSteps; i++) {
+                labels.splice(i, 0, i18n.t('{number}M', { number: i * stepSize }));
+            }
+            for (let i = sideSteps / 2; i < steps - (sideSteps / 2); i++) {
+                const label = formatAmount(normProjection[i].y, NIM_MAGNITUDE);
+
+                pointLabels.push(`~ ${label} NIM`);
+            }
+            for (let i = 0; i < sideSteps / 2; i++) {
+                normProjection.splice(i, 1, null);
+                normProjection.splice(normProjection.length - 1 - i, 1, null);
+                pointLabels.push('');
+            }
+
+            const result = {
+                labels,
+                datasets: [
+                    {
+                        fill: false,
+                        data: normProjection,
+                        showLine: false,
+                        pointStyle: pointLabels,
+                    },
+                    {
+                        tension: 0,
+                        fill: 'origin',
+                        backgroundColor: createPatternFill(),
+                        borderColor: 'rgba(33, 188, 165, 0.8)',
+                        data: baseProjection,
+                        pointStyle: transparentPixel,
+                    },
+                    {
+                        fill: '-1',
+                        tension: 0,
+                        backgroundColor: createPatternFill('rgba(33, 188, 165, 0.7)'), // 'rgba(33, 188, 165, 0.1)',
+                        borderColor: 'rgba(33, 188, 165, 0.8)',
+                        data: bestProjection,
+                        pointStyle: transparentPixel,
+                    },
+                ],
+            };
+
+            return result;
+        };
+
+        const getScalesData = (data) => {
+            const minYValue = data.datasets[1].data[0].y;
+            const maxYValue = data.datasets[2].data[data.datasets[2].data.length - 1].y;
+
+            return {
+                y: {
+                    max: maxYValue,
+                    min: minYValue,
+                    ticks: {
+                        // source: 'data',
+                        stepSize: (maxYValue - minYValue) / 6.0,
+                        // maxTicksLimit: 7,
+                        callback: () => '',
+                        font: {
+                            size: 0,
+                        },
+                    },
+                },
+                x: {
+                    type: 'time',
+                    bounds: 'data',
+                    min: NOW.plus(Duration.fromObject({ months: 0 })).toMillis(),
+                    max: NOW.plus(Duration.fromObject({ months: (noMonths * 1.3334) + 0 })).toMillis(),
+                    time: {
+                        unit: 'month',
+                    },
+                    ticks: {
+                        source: 'data',
+                        callback: (value, index) => data.labels[index],
+                    },
+                },
+            };
+        };
+
+        const transparentPixel = new Image(1, 1);
+        transparentPixel.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1H'
+            + 'AwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+
+        const noMonths = 12;
+        const data = getChartData(noMonths);
+        const scales = getScalesData(data);
+
+        const chartData = {
+            id: 'stakingGraph',
+            type: 'line',
+            data,
+            options: {
+                animation: {
+                    duration: 0,
+                },
+                responsive: false,
+                maintainAspectRatio: false,
+                scales,
+                plugins: {
+                    legend: { display: false },
+                    tooltip: { enabled: false },
+                },
+            },
+        };
+
+        watch(() => props.stakedAmount, () => {
+            if (chartRef.value === null) return;
+            _amount.value = props.stakedAmount;
+            const _data = getChartData(noMonths);
+            const _scales = getScalesData(_data);
+
+            chartData.data.datasets = _data.datasets;
+            chartData.options.scales = _scales;
+
+            chartRef.value.update();
+        });
+
+        return {
+            chartData,
+            chartRef,
+        };
+    },
+    props: {
+        stakedAmount: {
+            type: Number,
+            required: true,
+        },
+        apy: {
+            type: Number,
+            required: true,
+        },
+    },
+    components: {
+        Vue3ChartJs,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .chart-container {
+        display: flex;
+        width: 110rem;
+        text-align: center;
+        position: relative;
+        left: -13.625rem;
+        flex-direction: column;
+        margin: 0;
+        margin-left: -0.625rem;
+        margin-right: -0.625rem;
+        overflow: hidden;
+    }
+</style>
diff --git a/src/components/stake/graph/lib/LICENSE b/src/components/stake/graph/lib/LICENSE
new file mode 100644
index 000000000..9e3e7d24c
--- /dev/null
+++ b/src/components/stake/graph/lib/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Tyson McCarney
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/components/stake/graph/lib/Vue3ChartJs.vue b/src/components/stake/graph/lib/Vue3ChartJs.vue
new file mode 100644
index 000000000..e8c74ac39
--- /dev/null
+++ b/src/components/stake/graph/lib/Vue3ChartJs.vue
@@ -0,0 +1,173 @@
+<template>
+    <canvas
+        :width="styles.width"
+        :height="styles.height"
+        aria-label="NIMIQ Graph"
+        role="img"
+        ref="chartRef"
+    />
+</template>
+<script>
+import { ref, onMounted, defineComponent } from '@vue/composition-api';
+import {
+    Chart,
+    // ArcElement,
+    LineElement,
+    // BarElement,
+    PointElement,
+    // BarController,
+    // BubbleController,
+    // DoughnutController,
+    LineController,
+    // PieController,
+    // PolarAreaController,
+    // RadarController,
+    // ScatterController,
+    CategoryScale,
+    LinearScale,
+    // LogarithmicScale,
+    // RadialLinearScale,
+    TimeScale,
+    TimeSeriesScale,
+    Decimation,
+    Filler,
+    Legend,
+    Title,
+    Tooltip,
+} from 'chart.js';
+import 'chartjs-adapter-luxon';
+
+import StakingGraphPointsPlugin from '../plugins/StakingGraphPointsPlugin';
+import { chartJsEventNames, generateEventObject, generateChartJsEventListener } from './includes';
+
+Chart.register(
+    // ArcElement,
+    LineElement,
+    // BarElement,
+    PointElement,
+    // BarController,
+    // BubbleController,
+    // DoughnutController,
+    LineController,
+    // PieController,
+    // PolarAreaController,
+    // RadarController,
+    // ScatterController,
+    CategoryScale,
+    LinearScale,
+    // LogarithmicScale,
+    // RadialLinearScale,
+    TimeScale,
+    TimeSeriesScale,
+    Decimation,
+    Filler,
+    Legend,
+    Title,
+    Tooltip,
+    StakingGraphPointsPlugin,
+);
+
+Chart.defaults.font.family = 'Muli, system-ui, sans-serif';
+Chart.defaults.font.size = 12;
+Chart.defaults.font.weight = '700';
+Chart.defaults.font.color = 'rgba(166, 167, 182, 1.0)';
+
+const fontSize = parseFloat(
+    window.getComputedStyle(document.querySelector(':root'), null).getPropertyValue('font-size'),
+);
+const remToPx = (x) => fontSize * x;
+
+const Vue3ChartJs = defineComponent({
+    name: 'Vue3ChartJs',
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        data: {
+            type: Object,
+            required: true,
+        },
+        options: {
+            type: Object,
+            default: () => ({}),
+        },
+        plugins: {
+            type: Array,
+            default: () => [],
+        },
+        chartStyles: {
+            type: Object,
+            required: false,
+            default: () => ({
+                width: `${remToPx(91)}px`,
+                height: `${remToPx(19)}px`,
+            }),
+        },
+    },
+    emits: chartJsEventNames,
+    setup(props, { emit }) {
+        const chartRef = ref(null);
+
+        // generate chart.js plugin to emit lib events
+        const chartJsEventsPlugin = chartJsEventNames
+            .reduce((reduced, eventType) => {
+                const event = generateEventObject(eventType, chartRef);
+                return { ...reduced, ...generateChartJsEventListener(emit, event) };
+            }, { id: 'Vue3ChartJsEventHookPlugin' });
+
+        const chartJSState = {
+            chart: null,
+            plugins: [
+                chartJsEventsPlugin,
+                ...props.plugins,
+            ],
+            props: { ...props },
+        };
+
+        const destroy = () => {
+            if (chartJSState.chart) {
+                chartJSState.chart.destroy();
+                chartJSState.chart = null;
+            }
+        };
+
+        const update = (animateSpeed = 750) => {
+            chartJSState.chart.data = { ...chartJSState.chart.data, ...chartJSState.props.data };
+            chartJSState.chart.options = { ...chartJSState.chart.options, ...chartJSState.props.options };
+            chartJSState.chart.update(animateSpeed);
+        };
+
+        const resize = () => chartJSState.chart && chartJSState.chart.resize();
+
+        const render = () => {
+            if (chartJSState.chart) {
+                return chartJSState.chart.update();
+            }
+
+            return chartJSState.chart = new Chart(
+                chartRef.value.getContext('2d'), {
+                    type: chartJSState.props.type,
+                    data: chartJSState.props.data,
+                    options: chartJSState.props.options,
+                    plugins: chartJSState.plugins,
+                },
+            );
+        };
+        onMounted(() => render());
+
+        return {
+            chartJSState,
+            chartRef,
+            render,
+            resize,
+            update,
+            destroy,
+            styles: props.chartStyles,
+        };
+    },
+});
+
+export default Vue3ChartJs;
+
+</script>
diff --git a/src/components/stake/graph/lib/includes.ts b/src/components/stake/graph/lib/includes.ts
new file mode 100644
index 000000000..5e8ebd45f
--- /dev/null
+++ b/src/components/stake/graph/lib/includes.ts
@@ -0,0 +1,56 @@
+const chartJsEventNames = [
+    'install',
+    'start',
+    'stop',
+    'beforeInit',
+    'afterInit',
+    'beforeUpdate',
+    'afterUpdate',
+    'beforeElementsUpdate',
+    'reset',
+    'beforeDatasetsUpdate',
+    'afterDatasetsUpdate',
+    'beforeDatasetUpdate',
+    'afterDatasetUpdate',
+    'beforeLayout',
+    'afterLayout',
+    'afterLayout',
+    'beforeRender',
+    'afterRender',
+    'resize',
+    'destroy',
+    'uninstall',
+    'afterTooltipDraw',
+    'beforeTooltipDraw',
+];
+
+function generateEventObject(type: string, chartRef = null) {
+    // chart js allows some events to be cancelled if they return false
+    // this implements familiar logic to allow vue emitted chart events to be canceled
+    return {
+        type,
+        chartRef,
+        preventDefault() {
+            this._defaultPrevented = true;
+        },
+        isDefaultPrevented() {
+            return !this._defaultPrevented;
+        },
+        _defaultPrevented: false,
+    };
+}
+
+function generateChartJsEventListener(emit: any, event: Event) {
+    return {
+        [event.type]: () => {
+            emit(event.type, event);
+            return event.defaultPrevented;
+        },
+    };
+}
+
+export {
+    chartJsEventNames,
+    generateEventObject,
+    generateChartJsEventListener,
+};
diff --git a/src/components/stake/graph/plugins/StakingGraphPointsPlugin.ts b/src/components/stake/graph/plugins/StakingGraphPointsPlugin.ts
new file mode 100644
index 000000000..51dda366e
--- /dev/null
+++ b/src/components/stake/graph/plugins/StakingGraphPointsPlugin.ts
@@ -0,0 +1,62 @@
+const drawRoundedRectBox = (ctx: CanvasRenderingContext2D, text: string, x: number, y: number) => {
+    const width = text.length * 7;
+    const height = 10;
+    const r = 10;
+    const x0 = x - (width / 2.0) - r;
+    const y0 = y - (height / 2.0) - r;
+    ctx.fillStyle = 'rgba(0, 0, 0, 1.0)';
+
+    ctx.beginPath();
+    ctx.moveTo(x0 + r, y0);
+    ctx.lineTo(x0 + r + width, y0);
+    ctx.quadraticCurveTo(x0 + (r * 2) + width, y0, x0 + (2 * r) + width, y0 + r);
+    ctx.lineTo(x0 + (2 * r) + width, y0 + height);
+    ctx.quadraticCurveTo(x0 + (r * 2) + width, y0 + r + height, x0 + width + r, y0 + r + height);
+    ctx.lineTo(x0 + r, y0 + r + height);
+    ctx.quadraticCurveTo(x0, y0 + r + height, x0, y0 + height);
+    ctx.lineTo(x0, y0 + r);
+    ctx.quadraticCurveTo(x0, y0, x0 + r, y0);
+    ctx.stroke();
+    ctx.fillStyle = 'rgba(255, 255, 255, 1.0)';
+    ctx.fill();
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(33, 188, 165, 1.0)';
+    ctx.fillText(text, x0 + r, y0 + (1.5 * r));
+};
+
+const points = [
+    { x: 195, y: 110 },
+    { x: 370, y: 81 },
+    { x: 545, y: 52 },
+];
+
+const plugin = {
+    id: 'staking-points',
+    afterDatasetDraw: (chart: any, args: any) => {
+        if (args.index !== 0) return;
+        const ctx = chart.canvas.getContext('2d');
+        ctx.save();
+        ctx.font = 'bold 14px Muli';
+        ctx.lineWidth = 3;
+
+        ctx.strokeStyle = 'rgba(33, 188, 165, 1.0)';
+
+        const yRange = args.meta._scaleRanges.ymax - args.meta._scaleRanges.ymin;
+
+        for (let i = 0; i < args.meta._dataset.data.length; i++) {
+            const point = args.meta._dataset.data[i];
+            if (point) {
+                const y = (152 - 16) - ((point.y - args.meta._scaleRanges.ymin) / yRange) * 152;
+                const x = (point.y === 0) ? 0 : points[i - 1].x;
+
+                const label = args.meta.data[i].$context.element.options.pointStyle;
+                if (label.length > 0) {
+                    drawRoundedRectBox(ctx, label, x, y);
+                }
+            }
+        }
+        ctx.restore();
+    },
+};
+
+export default plugin;
diff --git a/src/components/stake/partials/MonthMiniSwitchPartial.vue b/src/components/stake/partials/MonthMiniSwitchPartial.vue
new file mode 100644
index 000000000..47304af0f
--- /dev/null
+++ b/src/components/stake/partials/MonthMiniSwitchPartial.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script lang="ts">
+</script>
+
+<style lang="scss" scoped>
+    .switch-option {
+        width: 3.665rem;
+        height: 2.316rem;
+        left: 0.21rem;
+        bottom: 0.21rem;
+
+        background: #FFFFFF;
+        box-shadow:
+            0rem 0.526rem 2.105rem rgba(0, 0, 0, 0.07),
+            0rem 0.197rem 0.394rem rgba(0, 0, 0, 0.05),
+            0rem 0.0443rem 0.263rem rgba(0, 0, 0, 0.025);
+        border-radius: 19.210rem;
+    }
+</style>
diff --git a/src/components/stake/partials/StakeButtonPartial.vue b/src/components/stake/partials/StakeButtonPartial.vue
new file mode 100644
index 000000000..ae3dd6c46
--- /dev/null
+++ b/src/components/stake/partials/StakeButtonPartial.vue
@@ -0,0 +1,129 @@
+<template>
+    <span>
+        <Tooltip
+            v-if="asButton && visible && activeCurrency === 'nim'"
+            class="staking-feature-tip"
+            preferredPosition="bottom left"
+            :container="this.$parent">
+            <div slot="trigger">
+                <button class="stake"
+                    :class="{
+                        disabled: !activeAddressInfo || !activeAddressInfo.balance,
+                        inverse: inversePalette,
+                    }" @click="$router.push('/stake')"
+                    @mousedown.prevent
+                    :disabled="!activeAddressInfo || !activeAddressInfo.balance">
+                    <StakingHeroIcon />
+                </button>
+            </div>
+            <span>
+                {{ $t('Earn NIM every month by staking your NIM') }}
+            </span>
+        </Tooltip>
+        <div class="stake"
+            v-if="!asButton"
+            :class="{
+                inverse: inversePalette,
+            }">
+            <StakingHeroIcon />
+        </div>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import { Tooltip } from '@nimiq/vue-components';
+import { useAddressStore } from '../../../stores/Address';
+import { useAccountStore } from '../../../stores/Account';
+import { useStakingStore } from '../../../stores/Staking';
+
+import StakingHeroIcon from '../../icons/Staking/StakingHeroIcon.vue';
+
+export default defineComponent({
+    setup() {
+        const { activeAddressInfo } = useAddressStore();
+        const { activeCurrency } = useAccountStore();
+        const { activeStake } = useStakingStore();
+        const visible = computed(() => !activeStake.value?.activeStake && !activeStake.value?.inactiveStake);
+
+        return {
+            visible,
+            activeCurrency,
+            activeAddressInfo,
+        };
+    },
+    props: {
+        asButton: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
+        inversePalette: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    components: {
+        Tooltip,
+        StakingHeroIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.stake {
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 0.5rem;
+    transition: opacity 1s ease-in-out;
+
+    svg {
+        width: 6.75rem;
+        height: 6.75rem;
+
+        path:nth-child(1), path:nth-child(2), path:nth-child(4) {
+            animation: fastwave 1s ease alternate infinite;
+        }
+        path:nth-child(1) {
+            animation-delay: .5s;
+        }
+        path:nth-child(2) {
+            animation-delay: .7s;
+        }
+        path:nth-child(4) {
+            animation-delay: .9s;
+        }
+    }
+
+    &.disabled {
+        svg {
+            animation: initial;
+            path:nth-child(1), path:nth-child(2), path:nth-child(4) {
+                animation: initial;
+                opacity: 0;
+            }
+        }
+    }
+    &.inverse {
+        cursor: initial;
+        path:nth-child(1), path:nth-child(2), path:nth-child(4) {
+            stroke: white;
+        }
+    }
+}
+
+@keyframes fastwave {
+    0% {
+        opacity: 1.0;
+    }
+    50% {
+        opacity: 0.15;
+    }
+    100% {
+        opacity: 0.0;
+    }
+}
+</style>
diff --git a/src/components/stake/partials/StakePreviewPartial.vue b/src/components/stake/partials/StakePreviewPartial.vue
new file mode 100644
index 000000000..cb72994ea
--- /dev/null
+++ b/src/components/stake/partials/StakePreviewPartial.vue
@@ -0,0 +1,148 @@
+<template>
+    <span v-if="stake && (stake.activeStake || stake.inactiveStake)">
+        <div class="stake-preview"
+            :class="{ dark: isUnstaking }">
+            <div class="stake-preview-background"
+                :class="{ dark: isUnstaking }">
+                <img :src="isUnstaking
+                    ? '/img/staking/graph-preview-white.png'
+                    : '/img/staking/graph-preview-black.png'" />
+            </div>
+            <div class="stake-preview-layout flex-row">
+                <div class="col flex-column">
+                    <div class="top-left flex-row">
+                        <StakingIcon /> <span class="nq-label">{{ $t('Staked') }}</span>
+                    </div>
+                    <Amount :amount="stake.activeStake" class="bottom-left"/>
+                </div>
+                <div class="col right flex-column">
+                    <Amount class="top-right" :amount="0"/>
+                    <div class="bottom-right">
+                        <a href="javascript:void(0)"
+                            @click="$router.push('/stake')">
+                            Edit <img src='/img/staking/arrow-right.svg' />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { Amount } from '@nimiq/vue-components';
+import { useStakingStore } from '../../../stores/Staking';
+import StakingIcon from '../../icons/Staking/StakingIcon.vue';
+
+export default defineComponent({
+    setup() {
+        const { activeValidator: validator, activeStake: stake } = useStakingStore();
+
+        const isUnstaking = computed(() => stake.value?.inactiveStake && !stake.value.activeStake);
+
+        return {
+            validator,
+            stake,
+            isUnstaking,
+        };
+    },
+    components: {
+        StakingIcon,
+        Amount,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .stake-preview {
+        position: relative;
+        width: 52.375rem;
+        height: 10.25rem;
+        background: var(--nimiq-green-bg);
+        border-radius: .75rem;
+
+        .stake-preview-background {
+            position: absolute;
+        }
+
+        .stake-preview-layout {
+            padding: 2rem;
+            width: 100%;
+            height: 100%;
+            color: white;
+            position: relative;
+
+            .col {
+                width: 50%;
+                justify-content: space-between;
+
+                &.right {
+                    align-items: flex-end;
+                    margin-bottom: -0.5rem;
+                }
+            }
+
+            .top-left {
+                align-items: center;
+
+                svg {
+                    margin-right: .25rem;
+                    line, path {
+                        stroke: white;
+                        stroke-width: 1;
+                    }
+                }
+
+                .nq-label {
+                    color: inherit;
+                    margin: 0;
+                }
+            }
+
+            .top-right {
+                color: var(--nimiq-green);
+                padding: .25rem 1.25rem;
+                background: white;
+                font-weight: bold;
+                font-size: var(--body-size);
+                line-height: 125%;
+                box-shadow: 0rem 0.40082625rem 1.6033rem rgba(0, 0, 0, 0.07),
+                            0rem 0.15031rem 0.30062rem rgba(0, 0, 0, 0.05),
+                            0rem 0.03377075rem 0.20041375rem rgba(0, 0, 0, 0.0254662);
+                border-radius: 5rem;
+            }
+
+            .bottom-left {
+                font-weight: bold;
+                font-size: var(--h2-size);
+            }
+
+            .bottom-right {
+                font-weight: 600;
+                font-size: var(--label-size);
+
+                a {
+                    color: inherit;
+                    text-decoration: none;
+                }
+
+                img {
+                    padding-left: .25rem;
+                }
+            }
+        }
+
+        &.dark {
+            background: var(--text-60);
+
+            .stake-preview-background {
+                opacity: 0.4;
+            }
+
+            .top-right {
+                color: var(--text-60);
+            }
+        }
+    }
+</style>
diff --git a/src/components/stake/partials/StakingSummaryMobilePartial.vue b/src/components/stake/partials/StakingSummaryMobilePartial.vue
new file mode 100644
index 000000000..0c83163cb
--- /dev/null
+++ b/src/components/stake/partials/StakingSummaryMobilePartial.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="staking-summary">
+        <StakeButtonPartial :asButton="false" :inversePalette="true" />
+        <span class="staking-projection-text">
+            {{ $t('Earn ~304 NIM a month by staking your NIM') }}
+        </span>
+        <button @click="$router.push('/stake')" class="nq-button-s inverse staking-action">
+            {{ $t('Stake now') }}
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import StakeButtonPartial from './StakeButtonPartial.vue';
+
+export default defineComponent({
+    setup() {
+        return {};
+    },
+    components: {
+        StakeButtonPartial,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.staking-summary {
+    display: flex;
+    flex-direction: row;
+    height: 6.75rem;
+    margin-top: 1.25rem;
+    border-radius: .75rem;
+    background: radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%);
+    /deep/ svg {
+        width: 6.5rem;
+        height: 6.5rem;
+        position: relative;
+        top: .125rem;
+        left: .75rem;
+    }
+    .staking-projection-text {
+        width: 19.375rem;
+        height: 6.75;
+        padding: 1rem 0rem;
+        margin-left: 3rem;
+        color: white;
+        font-weight: 700;
+        font-size: 1.625rem;
+        line-height: 2.275rem;
+    }
+    .staking-action {
+        position: absolute;
+        right: 2.75rem;
+        color: white;
+        font-weight: 700;
+        font-size: 1.625rem;
+        line-height: 130%;
+        margin-top: 1.5rem;
+        margin-left: 2.5rem;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 1.6875rem;
+    }
+}
+</style>
diff --git a/src/components/stake/tooltips/LabelTooltip.vue b/src/components/stake/tooltips/LabelTooltip.vue
new file mode 100644
index 000000000..d73d47c37
--- /dev/null
+++ b/src/components/stake/tooltips/LabelTooltip.vue
@@ -0,0 +1,105 @@
+<template>
+    <Tooltip class="validator-label-tip"
+        preferredPosition="bottom right"
+        :styles="{width: 'description' in validatorData ? '40rem' : '25rem', 'text-align': 'left'}"
+    >
+        <div slot="trigger" class="validator-label-trigger flex-row">
+            <img v-if="'icon' in validatorData" :src="`/img/staking/providers/${validatorData.icon}`" />
+            <Identicon v-else :address="validatorData.address"/>
+
+            <span v-if="'label' in validatorData" class="validator-label">{{ validatorData.label }}</span>
+            <ShortAddress v-else :address="validatorData.address"/>
+        </div>
+
+        <template v-if="'description' in validatorData">
+            <p class="validator-description">
+                {{ validatorData.description }}
+            </p>
+            <p class="validator-disclaimer">
+                {{ $t('The validator is solely responsible for information provided above.') }}
+            </p>
+            <br />
+            <BlueLink v-if="validatorData.link" :href="validatorData.link" target="_blank" rel="noopener">
+                {{ $t('{poolName} Website', { poolName: validatorData.label }) }}
+            </BlueLink>
+        </template>
+        <p v-else>{{ $t('Unregistered validator') }}</p>
+    </Tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import { Tooltip, Identicon } from '@nimiq/vue-components';
+import BlueLink from '../../BlueLink.vue';
+import { ValidatorData } from '../../../stores/Staking';
+import ShortAddress from '../../ShortAddress.vue';
+
+export default defineComponent({
+    props: {
+        validatorData: {
+            type: Object as () => ValidatorData,
+            required: true,
+        },
+    },
+    components: {
+        Tooltip,
+        Identicon,
+        BlueLink,
+        ShortAddress,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.validator-label-trigger {
+    align-items: center;
+    box-shadow: inset 0 0 0 1.5px rgba(31, 35, 72, 0.15);
+    padding: 0 1.375rem 0 0.25rem;
+    border-radius: 5rem;
+    white-space: nowrap;
+    height: 3.25rem;
+    line-height: 3.25rem;
+
+    font-size: var(--small-size);
+    color: var(--text-60);
+
+    img, .identicon {
+        width: 2.75rem;
+        height: 2.75rem;
+        margin-right: 0.75rem;
+    }
+
+    .validator-label {
+        font-weight: 600;
+    }
+
+    .short-address {
+        font-weight: 500;
+    }
+}
+.validator-description {
+    margin-left: .75rem;
+    padding-left: 1.25rem;
+
+    font-weight: 600;
+    font-size: 2rem;
+    line-height: 130%;
+
+    color: white;
+    border-left: .1875rem solid rgba(255, 255, 255, 0.4);
+}
+
+.validator-disclaimer {
+    margin-bottom: -1rem;
+    font-weight: 600;
+    font-size: 1.75rem;
+    line-height: 130%;
+
+    opacity: 0.6;
+    width: 31.5rem;
+}
+
+.blue-link {
+    color: var(--nimiq-light-blue-on-dark);
+}
+</style>
diff --git a/src/components/stake/tooltips/ValidatorRewardBubble.vue b/src/components/stake/tooltips/ValidatorRewardBubble.vue
new file mode 100644
index 000000000..5d66a0578
--- /dev/null
+++ b/src/components/stake/tooltips/ValidatorRewardBubble.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="validator-reward-bubble"
+        :class="{
+            'validator-warning': reward < 2.5,
+            'dry': dry,
+        }"
+    >
+        {{ reward.toFixed(1) }}% {{ $t("p.a.") }}
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+    props: {
+        reward: {
+            type: Number,
+            required: true,
+        },
+        dry: Boolean,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.validator-reward-bubble {
+    height: 3.125rem;
+    line-height: 3.125rem;
+    padding: 0 .875rem;
+
+    --border-color: var(--nimiq-green);
+    box-shadow: inset 0 0 0 1.5px var(--border-color);
+    border-radius: 5rem;
+    white-space: nowrap;
+    color: var(--nimiq-green);
+    font-size: var(--body-size);
+    font-weight: bold;
+
+    &.validator-warning {
+        --border-color: var(--nimiq-orange);
+        color: var(--nimiq-orange);
+    }
+
+    &.dry {
+        --border-color: rgba(31, 35, 72, 0.15);
+        padding: 0 1.375rem;
+        height: 3.25rem;
+        line-height: 3.25rem;
+
+        font-size: var(--small-size);
+        font-weight: 600;
+        color: var(--text-60);
+    }
+}
+</style>
diff --git a/src/components/stake/tooltips/ValidatorTrustScore.vue b/src/components/stake/tooltips/ValidatorTrustScore.vue
new file mode 100644
index 000000000..0df495988
--- /dev/null
+++ b/src/components/stake/tooltips/ValidatorTrustScore.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="validator-trust-score flex-row"
+        :class="{
+            'high-score': !dry && score >= 5.0,
+            'low-score': !dry && score < 2.5,
+            'dry': dry,
+        }"
+    >
+        <StarIcon />
+        {{ score.toFixed(2) }}
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import StarIcon from '../../icons/Staking/StarIcon.vue';
+
+export default defineComponent({
+    props: {
+        score: {
+            type: Number,
+            required: true,
+        },
+        dry: Boolean,
+    },
+    components: {
+        StarIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+    .validator-trust-score {
+        white-space: nowrap;
+        align-items: center;
+        color: var(--text-50);
+
+        &.dry {
+            box-shadow: inset 0 0 0 .1875rem rgba(31, 35, 72, 0.15);
+            padding: 0 1.375rem;
+            border-radius: 5rem;
+            height: 3.25rem;
+
+            font-size: var(--small-size);
+            font-weight: 600;
+            color: var(--text-60);
+        }
+
+        &.high-score {
+            color: var(--nimiq-gold);
+        }
+
+        &.low-score {
+            color: var(--nimiq-red);
+        }
+    }
+
+    svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: 0.25rem;
+        margin-top: -0.125rem;
+    }
+</style>
diff --git a/src/lib/Constants.ts b/src/lib/Constants.ts
index 439ec6fde..1cc98a60d 100644
--- a/src/lib/Constants.ts
+++ b/src/lib/Constants.ts
@@ -23,3 +23,6 @@ export const BTC_MAX_COPYABLE_ADDRESSES = 5; // TODO: Update to 10 when BTC_ADDR
 export const BTC_UNCOPYABLE_ADDRESS_GAP = 1;
 
 export const OASIS_EUR_DETECTION_DELAY = 5; // minutes
+
+export const NIM_DECIMALS = 5;
+export const NIM_MAGNITUDE = 1e5;
diff --git a/src/lib/NumberFormatting.ts b/src/lib/NumberFormatting.ts
index 959431fa1..e20ccb445 100644
--- a/src/lib/NumberFormatting.ts
+++ b/src/lib/NumberFormatting.ts
@@ -1,5 +1,7 @@
+import { FormattableNumber } from '@nimiq/utils';
 import { useSettingsStore } from '../stores/Settings';
 import { CryptoCurrency } from './Constants';
+import { i18n } from '../i18n/i18n-setup';
 
 export function twoDigit(value: number) {
     if (value < 10) return `0${value}`;
@@ -45,3 +47,70 @@ export function calculateDisplayedDecimals(amount: number | null, currency: Cryp
     if (amount < 10 * 1e5) return Math.max(decimals.value, 1);
     return decimals.value;
 }
+
+export function numberToLiteral(n: number): string {
+    // https://stackoverflow.com/questions/5529934/javascript-numbers-to-words refactored
+    const ones = ['', i18n.t('one'), 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+    const tens = ['', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+    const teens = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen',
+        'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+
+    const magnitudes = [
+        ['million', 1e6, null],
+        ['thousand', 1e3, null],
+        ['hundred', 1e2, null],
+        ['', 2e1, [tens, ones]],
+        ['', 1e1, [teens], 10],
+        ['', 0, [ones], 0],
+    ];
+
+    if (n === 0) return i18n.t('zero').toString();
+    return magnitudes.reduce((result: string, mag: Array<any>) => {
+        if (n >= mag[1]) {
+            if (mag[2] === null) {
+                result += i18n.t('{number} {magnitude}', {
+                    number: numberToLiteral(Math.floor(n / mag[1])),
+                    magnitude: mag[0],
+                });
+                n %= mag[1];
+            } else if (mag[2].length === 2) {
+                const hi = Math.floor(n / mag[2][0].length) - 1;
+                const lo = n % mag[2][1].length;
+                result += i18n.t('{hi} {lo}', { hi: mag[2][0][hi], lo: mag[2][1][lo] });
+            } else if (mag[2].length === 1) {
+                result += i18n.t(mag[2][0][n - mag[3]]);
+            }
+        }
+        return result;
+    }, '').trim();
+}
+
+export function numberToLiteralTimes(n: number): string {
+    const timesTable = [
+        i18n.t('zero times'), i18n.t('once'), i18n.t('twice'), i18n.t('thrice'), i18n.t('four times'),
+        i18n.t('five times'), i18n.t('six times'), i18n.t('seven times'),
+        i18n.t('eight times'), i18n.t('nine times'),
+    ];
+
+    if (timesTable[n]) return timesTable[n].toString();
+    return i18n.t('{number} times', { number: n }).toString();
+}
+
+export function formatNumber(number: number, fractionDigits = 0): string {
+    return number.toFixed(fractionDigits);// .replace(/\B(?=(\d{3})+(?!\d))/g, '\'').trim();
+}
+
+export function formatAsNim(nim: number, fractionDigits = 0): string {
+    return `${formatNumber(nim, fractionDigits)} NIM`;
+}
+
+export function formatLunaAsNim(luna: number, fractionDigits = 0): string {
+    return formatAsNim(Math.round(luna / 100000), fractionDigits);
+}
+
+export const formatAmount = (value = 0, magnitude = 1): string => (
+    new FormattableNumber(Math.round(value / magnitude)).toString({
+        maxDecimals: 0,
+        useGrouping: true,
+    })
+);
diff --git a/src/lib/StakingUtils.ts b/src/lib/StakingUtils.ts
new file mode 100644
index 000000000..788f4c2a3
--- /dev/null
+++ b/src/lib/StakingUtils.ts
@@ -0,0 +1,32 @@
+import { i18n } from '../i18n/i18n-setup';
+import { numberToLiteralTimes } from './NumberFormatting';
+
+export function getPayoutText(payout: number) {
+    const periods = {
+        year: (((3600 * 1000) * 24) * 30) * 12,
+        month: ((3600 * 1000) * 24) * 30,
+        week: ((3600 * 1000) * 24) * 7,
+        day: (3600 * 1000) * 24,
+        h: 3600 * 1000,
+    };
+    let index = 0;
+    let value = 0;
+    const periodNames = Object.keys(periods);
+
+    for (const [, period] of Object.entries(periods)) {
+        value = payout / period;
+        if (value >= 1) {
+            break;
+        }
+        index += 1;
+    }
+
+    if (index === periodNames.length - 1) {
+        return i18n.t('pays out every {hourCount}', { hourCount: `${value}${periodNames[index]}` }) as string;
+    }
+
+    return i18n.t('pays out {numberOfTimes} a {period}', {
+        numberOfTimes: numberToLiteralTimes(Math.floor(value)),
+        period: periodNames[index],
+    }) as string;
+}
diff --git a/src/router.ts b/src/router.ts
index 26cddd01f..325b546d9 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -30,6 +30,8 @@ const DisclaimerModal = () =>
     import(/* webpackChunkName: "disclaimer-modal" */ './components/modals/DisclaimerModal.vue');
 const ReleaseNotesModal = () =>
     import(/* webpackChunkName: "release-notes-modal" */ './components/modals/ReleaseNotesModal.vue');
+const StakeModal = () =>
+    import(/* webpackChunkName: "stake-modal" */ './components/stake/StakeModal.vue');
 
 // Bitcoin Modals
 const BtcActivationModal = () =>
@@ -224,6 +226,14 @@ const routes: RouteConfig[] = [{
             name: 'simplex',
             // props: { modal: true },
             meta: { column: Columns.DYNAMIC },
+        }, {
+            path: '/stake',
+            components: {
+                modal: StakeModal,
+            },
+            name: 'stake',
+            props: { modal: true },
+            meta: { column: Columns.ACCOUNT }, // TODO: investigate usage
         }],
     }, {
         path: '/settings',
diff --git a/src/storage.ts b/src/storage.ts
index 0f3b30041..81abc64d6 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -16,6 +16,7 @@ import { useBtcTransactionsStore, Transaction as BtcTransaction } from './stores
 import { useBtcLabelsStore, BtcLabelsState } from './stores/BtcLabels';
 import { useSwapsStore, SwapsState } from './stores/Swaps';
 import { useBankStore, BankState } from './stores/Bank';
+import { StakingState, useStakingStore } from './stores/Staking';
 
 const StorageKeys = {
     TRANSACTIONS: 'wallet_transactions_v01',
@@ -29,6 +30,7 @@ const StorageKeys = {
     BTCADDRESSINFOS: 'wallet_btcaddresses_v01',
     SWAPS: 'wallet_swaps_v01',
     BANK: 'wallet_bank_v01',
+    STAKING: 'wallet_staking_dev_v01',
 };
 
 const PersistentStorageKeys = {
@@ -303,6 +305,21 @@ export async function initStorage() {
     unsubscriptions.push(
         bankStore.subscribe(() => Storage.set(StorageKeys.BANK, bankStore.state)),
     );
+
+    /**
+     * Staking
+     */
+    const stakingStore = useStakingStore();
+    const storedStakingState = await Storage.get<StakingState>(StorageKeys.STAKING);
+    if (storedStakingState) {
+        const partialState: Partial<StakingState> = storedStakingState;
+        delete partialState.validators;
+        stakingStore.patch(partialState);
+    }
+
+    unsubscriptions.push(
+        stakingStore.subscribe(() => Storage.set(StorageKeys.STAKING, stakingStore.state)),
+    );
 }
 
 export async function clearStorage() {
diff --git a/src/stores/Staking.ts b/src/stores/Staking.ts
new file mode 100644
index 000000000..b00fab988
--- /dev/null
+++ b/src/stores/Staking.ts
@@ -0,0 +1,118 @@
+import { createStore } from 'pinia';
+import { useAddressStore } from './Address';
+
+import mockValidators from '../components/stake/assets/validators.mock.json';
+
+export type StakingState = {
+    validators: {[id: string]: ValidatorData},
+    addressStakes: {[address: string]: AddressStake},
+}
+
+export type AddressStake = {
+    address: string,
+    activeStake: number,
+    inactiveStake: number,
+    validator: string,
+}
+
+export type RawValidator = {
+    address: string,
+    dominance: number, // Percentage
+}
+
+export type RegisteredValidator = {
+    address: string,
+    label: string,
+    icon: string,
+    trust: number,
+    payout: number,
+    reward: number,
+    description: string,
+    link: string | null,
+    uptime: number, // Percentage
+    monthsOld: number,
+    dominance: number, // Percentage
+}
+
+export type ValidatorData = RawValidator | RegisteredValidator;
+
+export type StakingScoringRules = any
+
+export type StakingData = {
+    validatorLabelDisclaimer: string,
+    uptimeRules: StakingScoringRules,
+    ageRules: StakingScoringRules,
+    dominanceRules: StakingScoringRules,
+}
+
+export const useStakingStore = createStore({
+    id: 'staking',
+    state: () => ({
+        // TODO: Remove mock data, replace with loader on network init
+        validators: Object.fromEntries(mockValidators
+            .map((validator) => [validator.address, validator])),
+        addressStakes: {},
+    } as StakingState),
+    getters: {
+        validatorsList: (state) => Object.values(state.validators),
+        activeStake: (state) => {
+            const { activeAddress } = useAddressStore();
+            if (!activeAddress.value) return null;
+            return state.addressStakes[activeAddress.value] || null;
+        },
+        activeValidator: (state, { activeStake }): ValidatorData | null => {
+            const stake = activeStake.value as AddressStake | null;
+            if (!stake) return null;
+            return state.validators[stake.validator] || null;
+        },
+    },
+    actions: {
+        setStake(stake: AddressStake) {
+            // Need to assign whole object for change detection of new addresses.
+            // TODO: Simply set new stake in Vue 3.
+            this.state.addressStakes = {
+                ...this.state.addressStakes,
+                [stake.address]: stake,
+            };
+        },
+        setStakes(stakes: AddressStake[]) {
+            const newStakes: {[address: string]: AddressStake} = {};
+
+            for (const stake of stakes) {
+                newStakes[stake.address] = stake;
+            }
+
+            this.state.addressStakes = newStakes;
+        },
+        patchStake(address: string, patch: Partial<Omit<AddressStake, 'address'>>) {
+            if (!this.state.addressStakes[address]) return;
+
+            this.state.addressStakes[address] = {
+                ...this.state.addressStakes[address],
+                ...patch,
+            };
+        },
+        removeStake(address: string) {
+            const stakes = { ...this.state.addressStakes };
+            delete stakes[address];
+            this.state.addressStakes = stakes;
+        },
+        setValidator(validator: ValidatorData) {
+            // Need to assign whole object for change detection of new addresses.
+            // TODO: Simply set new validator in Vue 3.
+            this.state.validators = {
+                ...this.state.validators,
+                [validator.address]: validator,
+            };
+        },
+        setValidators(validators: ValidatorData[]) {
+            const newValidators: {[address: string]: ValidatorData} = {};
+
+            for (const validator of validators) {
+                newValidators[validator.address] = validator;
+            }
+
+            this.state.validators = newValidators;
+        },
+    },
+});
diff --git a/yarn.lock b/yarn.lock
index d039bf1d4..e9284f38e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3224,6 +3224,16 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.1.1.tgz#2cdbda7fccea532313332fe822f0cae268f24cf3"
+  integrity sha512-ghNJersc9VD9MECwa5bL8gqvCkndW6RSCicdEHL9lIriNtXwKawlSmwo+u6KNXLYT2+f24GdFPBoynKW3ke4MQ==
+
+chartjs-adapter-luxon@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.0.0.tgz#4f37164295859a468b64cc24ec2718356aa63d94"
+  integrity sha512-oy4iH4o6+8FqDoHYsEmUAB8+q8QO+vERDDHkmODm+MwWW1cet02wHN2KYvidwgBLYUX0laNWaWGN7l8Thac2Zg==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -7112,6 +7122,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.27.0.tgz#ae10c69113d85dab8f15f5e8390d0cbeddf4f00f"
+  integrity sha512-VKsFsPggTA0DvnxtJdiExAucKdAnwbCCNlMM5ENvHlxubqWd0xhZcdb4XgZ7QFNhaRhilXCFxHuoObP5BNA4PA==
+
 magic-string@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.23.2.tgz#204d7c3ea36c7d940209fcc54c39b9f243f13369"