diff --git a/src/abi-types.ts b/src/abi-types.ts
index 309d40c5..2bf7cceb 100644
--- a/src/abi-types.ts
+++ b/src/abi-types.ts
@@ -121,6 +121,12 @@ export class REXDeposit extends Struct {
     @Struct.field('asset') amount!: Asset
 }
 
+@Struct.type('mvfrsavings')
+export class MVFRSAVINGS extends Struct {
+    @Struct.field('name') owner!: Name
+    @Struct.field('asset') rex!: Asset
+}
+
 @Struct.type('rexwithdraw')
 export class REXWithdraw extends Struct {
     @Struct.field('name') owner!: Name
diff --git a/src/app.svelte b/src/app.svelte
index 3533c14d..f537a4d8 100644
--- a/src/app.svelte
+++ b/src/app.svelte
@@ -115,6 +115,9 @@
 
         --main-blue: var(--lapis-lazuli);
         --main-black: #585d6e;
+
+        --ivory: var(--cultured);
+        --sky-blue: rgba(0, 93, 172, 0.3);
     }
 
     body.darkmode {
@@ -148,6 +151,9 @@
 
         --main-blue: var(--middle-green-eagle);
         --main-black: #c4c4c4;
+
+        --ivory: #5d504d;
+        --sky-blue: rgba(249, 197, 184, 0.3);
     }
 
     body {
diff --git a/src/components/elements/slider.svelte b/src/components/elements/slider.svelte
index 883c1eff..f6b00690 100644
--- a/src/components/elements/slider.svelte
+++ b/src/components/elements/slider.svelte
@@ -1,27 +1,27 @@
-<script>
+<script lang="ts">
     import {createEventDispatcher} from 'svelte'
     import {fly, fade} from 'svelte/transition'
 
     // Props
-    export let min = 0
-    export let max = 100
-    export let initialValue = 0
+    export let min: number = 0
+    export let max: number = 100
+    export let initialValue: number = 0
     export let id: any = null
-    export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
+    export let value: number = initialValue
 
     // Node Bindings
-    let container = null
-    let thumb = null
-    let progressBar = null
-    let element = null
+    let container: HTMLElement | null = null
+    let thumb: HTMLElement | null = null
+    let progressBar: HTMLElement | null = null
+    let element: HTMLElement | null = null
 
     // Internal State
-    let elementX = null
-    let currentThumb = null
-    let holding = false
-    let thumbHover = false
+    let elementX: number = 0
+    let currentThumb: HTMLElement | null = null
+    let holding: boolean = false
+    let thumbHover: boolean = false
     let keydownAcceleration = 0
-    let accelerationTimer = null
+    let accelerationTimer: NodeJS.Timeout | null = null
 
     // Dispatch 'change' events
     const dispatch = createEventDispatcher()
@@ -36,44 +36,40 @@
     })
 
     function resizeWindow() {
-        elementX = element.getBoundingClientRect().left
+        if (element) elementX = element.getBoundingClientRect().left
     }
 
     // Allows both bind:value and on:change for parent value retrieval
-    function setValue(val) {
+    function setValue(val: number) {
         value = val
         dispatch('change', {value})
     }
 
-    function onTrackEvent(e) {
+    function onTrackEvent(e: MouseEvent | TouchEvent) {
         // Update value immediately before beginning drag
         updateValueOnEvent(e)
         onDragStart(e)
     }
 
-    function onHover(e) {
-        thumbHover = thumbHover ? false : true
-    }
-
-    function onDragStart(e) {
+    function onDragStart(e: MouseEvent | TouchEvent) {
         // If mouse event add a pointer events shield
         if (e.type === 'mousedown') document.body.append(mouseEventShield)
         currentThumb = thumb
     }
 
-    function onDragEnd(e) {
+    function onDragEnd(e: MouseEvent | TouchEvent) {
         // If using mouse - remove pointer event shield
         if (e.type === 'mouseup') {
             if (document.body.contains(mouseEventShield))
                 document.body.removeChild(mouseEventShield)
             // Needed to check whether thumb and mouse overlap after shield removed
-            if (isMouseInElement(e, thumb)) thumbHover = true
+            if (e instanceof MouseEvent && isMouseInElement(e, thumb)) thumbHover = true
         }
         currentThumb = null
     }
 
     // Check if mouse event cords overlay with an element's area
-    function isMouseInElement(event, element) {
+    function isMouseInElement(event: MouseEvent, element: HTMLElement | null) {
         if (element === null) {
             return false
         }
@@ -85,7 +81,7 @@
     }
 
     // Accessible keypress handling
-    function onKeyPress(e) {
+    function onKeyPress(e: KeyboardEvent) {
         // Max out at +/- 10 to value per event (50 events / 5)
         // 100 below is to increase the amount of events required to reach max velocity
         if (keydownAcceleration < 50) keydownAcceleration++
@@ -105,28 +101,27 @@
                 setValue(value - throttled)
             }
         }
-
         // Reset acceleration after 100ms of no events
-        clearTimeout(accelerationTimer)
+        if (accelerationTimer) clearTimeout(accelerationTimer)
         accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
     }
 
-    function calculateNewValue(clientX) {
+    function calculateNewValue(clientX: number) {
         // Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
         let delta = clientX - (elementX + 10)
 
         // Use width of the container minus (5px * 2 sides) offset for percent calc
-        let percent = (delta * 100) / (container.clientWidth - 10)
+        let percent = (delta * 100) / (container!.clientWidth - 10)
 
         // Limit percent 0 -> 100
         percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
 
         // Limit value min -> max
-        setValue(parseInt((percent * (max - min)) / 100) + min)
+        setValue(Math.floor((percent * (max - min)) / 100) + min)
     }
 
     // Handles both dragging of touch/mouse as well as simple one-off click/touches
-    function updateValueOnEvent(e) {
+    function updateValueOnEvent(e: MouseEvent | TouchEvent) {
         // touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
         if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
 
@@ -135,7 +130,11 @@
 
         // Get client's x cord either touch or mouse
         const clientX =
-            e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
+            e.type === 'touchmove' || (e.type === 'touchstart' && e instanceof TouchEvent)
+                ? (e as TouchEvent).touches[0].clientX
+                : e instanceof MouseEvent
+                ? (e as MouseEvent).clientX
+                : 0
 
         calculateNewValue(clientX)
     }
@@ -153,7 +152,7 @@
         value = value < max ? value : max
 
         let percent = ((value - min) * 100) / (max - min)
-        let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
+        let offsetLeft = (container!.clientWidth - 10) * (percent / 100) + 5
 
         // Update thumb position + active slider track width
         thumb.style.left = `${offsetLeft}px`
@@ -161,7 +160,7 @@
     }
 </script>
 
-<style>
+<style lang="scss">
     .slider {
         position: relative;
         flex: 1;
@@ -181,7 +180,7 @@
 
     .slider__track {
         height: 6px;
-        background-color: var(--cultured);
+        background-color: var(--ivory);
         border-radius: 999px;
     }
 
@@ -200,7 +199,7 @@
         position: absolute;
         width: 20px;
         height: 20px;
-        background-color: var(--thumb-bgcolor, white);
+        background-color: var(--main-blue);
         cursor: pointer;
         border-radius: 999px;
         margin-top: -8px;
@@ -213,16 +212,25 @@
         );
     }
 
+    .slider__thumb::after {
+        content: '';
+        width: 15px;
+        height: 15px;
+        background-color: var(--main-blue);
+        border: 2px solid var(--white, white);
+        border-radius: 50%;
+    }
+
     .slider__thumb--holding {
         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
-            0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
+            0 0 0 6px var(--sky-blue);
     }
 
     .slider__tooltip {
         pointer-events: none;
         position: absolute;
         top: -33px;
-        color: var(--tooltip-text, white);
+        color: var(--white);
         width: 38px;
         padding: 4px 0;
         border-radius: 4px;
diff --git a/src/components/layout/account/list.svelte b/src/components/layout/account/list.svelte
index d2513a7c..5c34faf6 100644
--- a/src/components/layout/account/list.svelte
+++ b/src/components/layout/account/list.svelte
@@ -69,6 +69,9 @@
 
     .list {
         margin: 10px;
+        .add-account {
+            padding: 0 16px;
+        }
         .network {
             .header {
                 color: var(--dark-grey);
@@ -138,7 +141,6 @@
         }
         :global(.button) {
             line-height: 1em;
-            margin: 0 16px;
         }
     }
 
@@ -191,10 +193,12 @@
 
 {#if $activeSession}
     <div class="list">
-        <Button fluid style="primary" on:action={handleAdd}>
-            <Icon name="user-plus" />
-            <Text>Add another account</Text>
-        </Button>
+        <div class="add-account">
+            <Button fluid style="primary" on:action={handleAdd}>
+                <Icon name="user-plus" />
+                <Text>Add another account</Text>
+            </Button>
+        </div>
         {#each $groupings as group}
             <div class="network">
                 <div class="header" on:click={() => toggle(group.chainId)}>
diff --git a/src/pages/dashboard/row.svelte b/src/pages/dashboard/row.svelte
index 1605a3ba..ee1e7bd5 100644
--- a/src/pages/dashboard/row.svelte
+++ b/src/pages/dashboard/row.svelte
@@ -210,8 +210,8 @@
                 }
             }
             .extra {
-                :global(.button) {
-                    margin: 9px;
+                .send {
+                    padding: 9px;
                 }
             }
             &.expanded .extra {
@@ -283,10 +283,12 @@
                 {/if}
             </div>
             {#if transferable}
-                <Button fluid href={$url} style="secondary">
-                    <Icon name="arrow-up" />
-                    <Text>Send</Text>
-                </Button>
+                <div class="send">
+                    <Button fluid href={$url} style="secondary">
+                        <Icon name="arrow-up" />
+                        <Text>Send</Text>
+                    </Button>
+                </div>
             {/if}
         </div>
     </div>
diff --git a/src/pages/earn/index.svelte b/src/pages/earn/index.svelte
index ccdf0ac1..e3397b0c 100644
--- a/src/pages/earn/index.svelte
+++ b/src/pages/earn/index.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import type {Readable, Writable} from 'svelte/store'
     import {derived, writable, get} from 'svelte/store'
-    import {AnyAction, Asset, Int128} from 'anchor-link'
+    import {AnyAction, Asset, Int128, Int64} from 'anchor-link'
 
     import {currentAccount} from '~/store'
     import {activeBlockchain, activeSession} from '~/store'
     import type {Token} from '~/stores/tokens'
     import {systemTokenKey, tokens} from '~/stores/tokens'
     import {balances} from '~/stores/balances'
-    import {REXDeposit, REXWithdraw, REXBUYREX, REXSELLREX} from '~/abi-types'
+    import {REXDeposit, MVFRSAVINGS, REXWithdraw, REXBUYREX, REXSELLREX} from '~/abi-types'
     import type {FormTransaction} from '~/ui-types'
     import {rexIsAvailable} from '~/lib/rex'
 
@@ -130,6 +130,7 @@
             let matured = defaultZero
             let apy = ''
             const fiveYearsFromNow = new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5
+            const now = new Date()
 
             if ($stateREX && $stateREX.value) {
                 const annualReward = 31250000
@@ -137,9 +138,18 @@
                 apy = ((annualReward / totalStaked) * 100).toFixed(2)
                 if ($currentAccount && $currentAccount.rex_info) {
                     total = convertRexToEos($currentAccount.rex_info.rex_balance.value)
+
+                    const claimableBuckets = $currentAccount.rex_info.rex_maturities.filter(
+                        (maturity) => +new Date(maturity.first!.toString()) < +now
+                    )
+                    let claimable = claimableBuckets.reduce(
+                        (acc, r) => acc.adding(r.second!),
+                        Int64.from(0)
+                    )
+
                     matured = convertRexToEos(
                         Asset.fromUnits(
-                            $currentAccount.rex_info.matured_rex,
+                            $currentAccount.rex_info.matured_rex.adding(claimable),
                             $currentAccount.rex_info.rex_balance.symbol
                         ).value
                     )
@@ -194,6 +204,8 @@
             })
             if (result.rows.length > 0) {
                 rexEOSBalance.set(Asset.from(result.rows[0].balance, $systemToken!.symbol))
+            } else {
+                rexEOSBalance.set(Asset.from(0, $systemToken!.symbol))
             }
         })
         return () => {
@@ -276,7 +288,7 @@
                 authorization: [$activeSession!.auth],
                 account: 'eosio',
                 name: 'mvfrsavings',
-                data: REXWithdraw.from({
+                data: MVFRSAVINGS.from({
                     owner: $activeSession!.auth.actor,
                     amount: rexAmount,
                 }),
diff --git a/yarn.lock b/yarn.lock
index e6294e2e..82c8148c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1741,10 +1741,10 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-anchor-link-browser-transport@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/anchor-link-browser-transport/-/anchor-link-browser-transport-3.3.0.tgz#ffb4f0e41cc2b900a714be3969e322491110b4f9"
-  integrity sha512-0pHuBtxtzdT4hkbtMVfjT0ksAfWvmTwyzldxI32I2oo4j3jsao7IfqCf/Oew5DqMOr9ZSDYQiwbPxt8QhU1zOQ==
+anchor-link-browser-transport@^3.2.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/anchor-link-browser-transport/-/anchor-link-browser-transport-3.6.1.tgz#8e112f00f2322f466bb69a93008976df1021b9c8"
+  integrity sha512-lrV+qpXVN28VyAK3nKTXKvBQNLdKcwqTM92iBBnZVqulPFhhNAVAqDeLgq78zd9Pl4m9Cdq27hlSC1wcMyr63w==
   dependencies:
     tslib "^2.0.3"