diff --git a/tauri-wallet/src/routes/bond/index.tsx b/tauri-wallet/src/routes/bond/index.tsx
new file mode 100644
index 0000000000..27c3ada6e9
--- /dev/null
+++ b/tauri-wallet/src/routes/bond/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Layout, NymCard, Page } from '../../components'
+import { BondNodeForm } from './BondForm'
+
+export const Bond = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
+          <BondNodeForm />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}
diff --git a/tauri-wallet/src/routes/delegate/DelegateForm.tsx b/tauri-wallet/src/routes/delegate/DelegateForm.tsx
new file mode 100644
index 0000000000..0d57fda428
--- /dev/null
+++ b/tauri-wallet/src/routes/delegate/DelegateForm.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from 'react'
+import { Alert } from '@material-ui/lab'
+import {
+  Button,
+  Grid,
+  InputAdornment,
+  TextField,
+  Theme,
+} from '@material-ui/core'
+import { useGetBalance } from '../../hooks/useGetBalance'
+import { NodeTypeSelector } from '../../components/NodeTypeSelector'
+import { EnumNodeType } from '../../types/global'
+import { useTheme } from '@material-ui/styles'
+
+export const DelegateForm = () => {
+  const [isValidAmount, setIsValidAmount] = useState(true)
+  const [validIdentity, setValidIdentity] = useState(true)
+  const [allocationWarning, setAllocationWarning] = useState<string>()
+  const [nodeType, setNodeType] = useState(EnumNodeType.Mixnode)
+
+  const { getBalance, accountBalance } = useGetBalance()
+  const theme: Theme = useTheme()
+
+  const handleAmountChange = (event: any) => {
+    // don't ask me about that. javascript works in mysterious ways
+    // and this is apparently a good way of checking if string
+    // is purely made of numeric characters
+    const parsed = +event.target.value
+
+    if (isNaN(parsed)) {
+      setIsValidAmount(false)
+    } else {
+      try {
+        const allocationCheck = { error: undefined, message: '' }
+        if (allocationCheck.error) {
+          setAllocationWarning(allocationCheck.message)
+          setIsValidAmount(false)
+        } else {
+          setAllocationWarning(allocationCheck.message)
+          setIsValidAmount(true)
+        }
+      } catch {
+        setIsValidAmount(false)
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={() => {}}>
+      <div style={{ padding: theme.spacing(3) }}>
+        <Grid container spacing={3} direction="column">
+          <Grid item xs={12}>
+            <NodeTypeSelector
+              nodeType={nodeType}
+              setNodeType={(nodeType) => setNodeType(nodeType)}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <TextField
+              required
+              variant="outlined"
+              id="identity"
+              name="identity"
+              label="Node identity"
+              error={!validIdentity}
+              helperText={
+                validIdentity
+                  ? ''
+                  : "Please enter a valid identity like '824WyExLUWvLE2mpSHBatN4AoByuLzfnHFeHWiBYzg4z'"
+              }
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12} lg={6}>
+            <TextField
+              required
+              variant="outlined"
+              id="amount"
+              name="amount"
+              label="Amount to delegate"
+              error={!isValidAmount}
+              helperText={isValidAmount ? '' : 'Please enter a valid amount'}
+              onChange={handleAmountChange}
+              fullWidth
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">punk</InputAdornment>
+                ),
+              }}
+            />
+          </Grid>
+          {allocationWarning && (
+            <Grid item xs={12} lg={6}>
+              <Alert severity={!isValidAmount ? 'error' : 'info'}>
+                {allocationWarning}
+              </Alert>
+            </Grid>
+          )}
+
+          {/*<Grid item xs={12}>*/}
+          {/*    <FormControlLabel*/}
+          {/*        control={*/}
+          {/*            <Checkbox*/}
+          {/*                checked={checkboxSet}*/}
+          {/*                onChange={handleCheckboxToggle}*/}
+
+          {/*            />*/}
+          {/*        }*/}
+          {/*        label="checkbox text"*/}
+          {/*    />*/}
+          {/*</Grid>*/}
+        </Grid>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          borderTop: `1px solid ${theme.palette.grey[200]}`,
+          background: theme.palette.grey[100],
+          padding: theme.spacing(2),
+        }}
+      >
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          disabled={!isValidAmount}
+          disableElevation
+        >
+          Delegate stake
+        </Button>
+      </div>
+    </form>
+  )
+}
diff --git a/tauri-wallet/src/routes/delegate/index.tsx b/tauri-wallet/src/routes/delegate/index.tsx
new file mode 100644
index 0000000000..9ca3a65d10
--- /dev/null
+++ b/tauri-wallet/src/routes/delegate/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { DelegateForm } from './DelegateForm'
+import { Layout, NymCard, Page } from '../../components'
+
+export const Delegate = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard
+          title="Delegate"
+          subheader="Delegate to mixnode or gateway"
+          noPadding
+        >
+          <DelegateForm />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}
diff --git a/tauri-wallet/src/routes/index.tsx b/tauri-wallet/src/routes/index.tsx
index 124233bc13..d935c442f3 100644
--- a/tauri-wallet/src/routes/index.tsx
+++ b/tauri-wallet/src/routes/index.tsx
@@ -3,7 +3,8 @@ import { Switch, Route } from 'react-router-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { NotFound } from './404'
 import { Balance } from './balance'
-import { Bond } from './bond/bond'
+import { Bond } from './bond'
+import { Delegate } from './delegate'
 import { Receive } from './receive'
 import { Send } from './send'
 import { SignIn } from './sign-in'
@@ -17,17 +18,26 @@ export const Routes = () => (
       <Route path="/balance">
         <Balance />
       </Route>
-      <Route path="/bond">
-        <Bond />
-      </Route>
-      <Route path="/signin">
-        <SignIn />
+      <Route path="/send">
+        <Send />
       </Route>
       <Route path="/receive">
         <Receive />
       </Route>
-      <Route path="/send">
-        <Send />
+      <Route path="/bond">
+        <Bond />
+      </Route>
+      <Route path="/unbond">
+        <Bond />
+      </Route>
+      <Route path="/delegate">
+        <Delegate />
+      </Route>
+      <Route path="/undelegate">
+        <Delegate />
+      </Route>
+      <Route path="/signin">
+        <SignIn />
       </Route>
       <Route path="*">
         <NotFound />