diff --git a/tauri-wallet/package.json b/tauri-wallet/package.json
index a6864d6a52..3da57e9d6f 100644
--- a/tauri-wallet/package.json
+++ b/tauri-wallet/package.json
@@ -15,6 +15,7 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "@types/react-dom": "^17.0.9",
+    "bs58": "^4.0.1",
     "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -27,6 +28,7 @@
     "@babel/preset-react": "^7.14.5",
     "@tauri-apps/api": "^1.0.0-beta.6",
     "@tauri-apps/cli": "^1.0.0-beta.9",
+    "@types/bs58": "^4.0.1",
     "@types/react-router-dom": "^5.1.8",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
diff --git a/tauri-wallet/src/components/BalanceCard.tsx b/tauri-wallet/src/components/BalanceCard.tsx
index b30caf8ef4..65116de259 100644
--- a/tauri-wallet/src/components/BalanceCard.tsx
+++ b/tauri-wallet/src/components/BalanceCard.tsx
@@ -25,13 +25,6 @@ const useStyles = makeStyles(({ spacing }) => ({
     minWidth: 300,
     position: 'relative',
   },
-  media: {
-    marginLeft: spacing(-7),
-    position: 'fixed',
-  },
-  content: {
-    marginLeft: theme.spacing(4),
-  },
 }))
 
 export const BalanceCard = React.memo(function BlogCard() {
@@ -39,11 +32,7 @@ export const BalanceCard = React.memo(function BlogCard() {
   const { client } = useContext(ClientContext)
   return (
     <Card className={styles.root}>
-      <CardHeader
-        avatar={<img src={logo} style={{ width: 75 }} />}
-        className={styles.media}
-      />
-      <CardContent className={styles.content}>
+      <CardContent>
         <BalanceCardField
           primaryText="Balance"
           subText={client.balance}
diff --git a/tauri-wallet/src/components/Nav.tsx b/tauri-wallet/src/components/Nav.tsx
index 86130dd608..90e7c915d0 100644
--- a/tauri-wallet/src/components/Nav.tsx
+++ b/tauri-wallet/src/components/Nav.tsx
@@ -84,7 +84,7 @@ export const Nav = () => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        marginTop: theme.spacing(10),
+        marginTop: theme.spacing(6),
       }}
     >
       <List>
diff --git a/tauri-wallet/src/components/NymCard.tsx b/tauri-wallet/src/components/NymCard.tsx
index 57a2aabfc5..a73d0866dd 100644
--- a/tauri-wallet/src/components/NymCard.tsx
+++ b/tauri-wallet/src/components/NymCard.tsx
@@ -4,10 +4,12 @@ import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
 export const NymCard = ({
   title,
   subheader,
+  noPadding,
   children,
 }: {
   title: string
   subheader?: string
+  noPadding?: boolean
   children: React.ReactElement
 }) => {
   const theme = useTheme()
@@ -26,7 +28,7 @@ export const NymCard = ({
       <CardContent
         style={{
           background: theme.palette.grey[50],
-          padding: theme.spacing(2, 5),
+          padding: noPadding ? 0 : theme.spacing(2, 5),
         }}
       >
         {children}
diff --git a/tauri-wallet/src/components/Page.tsx b/tauri-wallet/src/components/Page.tsx
index 592a7e7fb8..198da00e08 100644
--- a/tauri-wallet/src/components/Page.tsx
+++ b/tauri-wallet/src/components/Page.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import { BalanceCard } from './BalanceCard'
 import { Nav } from './Nav'
+import Logo from '../images/logo.png'
+import { theme } from '../theme'
+import { Divider } from '@material-ui/core'
 
 export const Page = ({ children }: { children: React.ReactElement }) => {
   return (
@@ -24,7 +27,23 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
           borderBottomRightRadius: 10,
         }}
       >
-        <BalanceCard />
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            marginTop: theme.spacing(6),
+          }}
+        >
+          <img src={Logo} style={{ width: 75 }} />
+        </div>
+        <Divider
+          light
+          variant="middle"
+          style={{
+            background: theme.palette.grey[100],
+            marginTop: theme.spacing(6),
+          }}
+        />
         <Nav />
         <div />
       </div>
diff --git a/tauri-wallet/src/hooks/useGetBalance.tsx b/tauri-wallet/src/hooks/useGetBalance.tsx
new file mode 100644
index 0000000000..6ccd98e17a
--- /dev/null
+++ b/tauri-wallet/src/hooks/useGetBalance.tsx
@@ -0,0 +1,31 @@
+import { useCallback, useContext, useState } from 'react'
+import { ClientContext } from '../context/main'
+
+export const useGetBalance = () => {
+  const { client } = useContext(ClientContext)
+  const [isLoading, setIsLoading] = useState(false)
+  const [balanceCheckError, setBalanceCheckError] = useState(null)
+  const [accountBalance, setAccountBalance] = useState<number>()
+
+  const getBalance = useCallback(async () => {
+    if (client) {
+      setIsLoading(true)
+
+      try {
+        const value = await Promise.resolve(1000)
+        setAccountBalance(value)
+        setIsLoading(false)
+      } catch (e) {
+        setBalanceCheckError(e)
+      }
+    }
+  }, [])
+
+  return {
+    balanceCheckError,
+    isBalanceLoading: isLoading,
+    accountBalance,
+    printedBalance: '',
+    getBalance,
+  }
+}
diff --git a/tauri-wallet/src/routes/balance.tsx b/tauri-wallet/src/routes/balance.tsx
index 136d91fff4..3b5ee323e8 100644
--- a/tauri-wallet/src/routes/balance.tsx
+++ b/tauri-wallet/src/routes/balance.tsx
@@ -33,6 +33,7 @@ export const Balance = () => {
                     type="submit"
                     onClick={() => {}}
                     disabled={false}
+                    disableElevation
                     startIcon={<Refresh />}
                   >
                     Refresh
diff --git a/tauri-wallet/src/routes/bond.tsx b/tauri-wallet/src/routes/bond.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/tauri-wallet/src/routes/bond/BondForm.tsx b/tauri-wallet/src/routes/bond/BondForm.tsx
new file mode 100644
index 0000000000..dcb53eac9a
--- /dev/null
+++ b/tauri-wallet/src/routes/bond/BondForm.tsx
@@ -0,0 +1,189 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  InputAdornment,
+  TextField,
+  Theme,
+  useMediaQuery,
+} from '@material-ui/core'
+import { EnumNodeType } from '../../types/global'
+import { useTheme } from '@material-ui/styles'
+
+type TBondNodeFormProps = {
+  // minimumBond: Coin
+  // onSubmit: (values: BondingInformation) => void
+}
+
+export const BondNodeForm = () => {
+  const [advancedShown, setAdvancedShown] = React.useState(false)
+  const [type, setType] = useState(EnumNodeType.Mixnode)
+
+  const theme: Theme = useTheme()
+  const matches = useMediaQuery('(min-width:768px)')
+
+  return (
+    <form>
+      <div style={{ padding: theme.spacing(3) }}>
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <TextField
+              variant="outlined"
+              required
+              id="identityKey"
+              name="identityKey"
+              label="Identity key"
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <TextField
+              variant="outlined"
+              required
+              id="sphinxKey"
+              name="sphinxKey"
+              label="Sphinx key"
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="amount"
+              name="amount"
+              label="Amount to bond"
+              fullWidth
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">punks</InputAdornment>
+                ),
+              }}
+            />
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="host"
+              name="host"
+              label="Host"
+              fullWidth
+            />
+          </Grid>
+
+          {/* if it's a gateway - get location */}
+          <Grid item xs={12} sm={6}>
+            {type === EnumNodeType.Gateway && (
+              <TextField
+                variant="outlined"
+                required
+                id="location"
+                name="location"
+                label="Location"
+                fullWidth
+              />
+            )}
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="version"
+              name="version"
+              label="Version"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={advancedShown}
+                  onChange={() => {
+                    setAdvancedShown((shown) => {
+                      return !shown
+                    })
+                  }}
+                />
+              }
+              label="Use advanced options"
+            />
+          </Grid>
+
+          {advancedShown && (
+            <>
+              <Grid item xs={12} sm={4}>
+                <TextField
+                  variant="outlined"
+                  id="mixPort"
+                  name="mixPort"
+                  label="Mix Port"
+                  fullWidth
+                />
+              </Grid>
+              {type === EnumNodeType.Mixnode ? (
+                <>
+                  <Grid item xs={12} sm={4}>
+                    <TextField
+                      variant="outlined"
+                      id="verlocPort"
+                      name="verlocPort"
+                      label="Verloc Port"
+                      fullWidth
+                    />
+                  </Grid>
+
+                  <Grid item xs={12} sm={4}>
+                    <TextField
+                      variant="outlined"
+                      id="httpApiPort"
+                      name="httpApiPort"
+                      label="HTTP API Port"
+                      fullWidth
+                    />
+                  </Grid>
+                </>
+              ) : (
+                <Grid item xs={12} sm={4}>
+                  <TextField
+                    variant="outlined"
+                    id="clientsPort"
+                    name="clientsPort"
+                    label="client WS API Port"
+                    fullWidth
+                  />
+                </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"
+          size="large"
+          disableElevation
+        >
+          Bond
+        </Button>
+      </div>
+    </form>
+  )
+}
diff --git a/tauri-wallet/src/routes/bond/bond.tsx b/tauri-wallet/src/routes/bond/bond.tsx
new file mode 100644
index 0000000000..27c3ada6e9
--- /dev/null
+++ b/tauri-wallet/src/routes/bond/bond.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/index.tsx b/tauri-wallet/src/routes/index.tsx
index d462bd3919..124233bc13 100644
--- a/tauri-wallet/src/routes/index.tsx
+++ b/tauri-wallet/src/routes/index.tsx
@@ -3,6 +3,7 @@ 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 { Receive } from './receive'
 import { Send } from './send'
 import { SignIn } from './sign-in'
@@ -16,6 +17,9 @@ export const Routes = () => (
       <Route path="/balance">
         <Balance />
       </Route>
+      <Route path="/bond">
+        <Bond />
+      </Route>
       <Route path="/signin">
         <SignIn />
       </Route>
diff --git a/tauri-wallet/src/routes/sign-in.tsx b/tauri-wallet/src/routes/sign-in.tsx
index 365c8ea47c..ee884d6e75 100644
--- a/tauri-wallet/src/routes/sign-in.tsx
+++ b/tauri-wallet/src/routes/sign-in.tsx
@@ -76,6 +76,7 @@ export const SignIn = () => {
                   type="submit"
                   disabled={loading}
                   size="large"
+                  disableElevation
                 >
                   Sign In
                 </Button>
diff --git a/tauri-wallet/src/theme.tsx b/tauri-wallet/src/theme.tsx
index 7b4729aa70..c5332bfb6d 100644
--- a/tauri-wallet/src/theme.tsx
+++ b/tauri-wallet/src/theme.tsx
@@ -10,6 +10,22 @@ export const theme = createTheme({
     MuiButton: {
       containedPrimary: {
         color: 'white',
+        borderRadius: 50,
+      },
+      contained: {
+        padding: '12px 24px',
+      },
+      containedSizeLarge: {
+        padding: '12px 24px',
+      },
+    },
+    MuiOutlinedInput: {
+      root: {
+        borderRadius: 50,
+        background: '#fff',
+      },
+      notchedOutline: {
+        margin: -2,
       },
     },
   },
diff --git a/tauri-wallet/src/types/global.ts b/tauri-wallet/src/types/global.ts
new file mode 100644
index 0000000000..ef70c982fe
--- /dev/null
+++ b/tauri-wallet/src/types/global.ts
@@ -0,0 +1,9 @@
+export enum EnumNodeType {
+  Mixnode = 'Mixnode',
+  Gateway = 'Gateway',
+}
+
+export type TNodeOwnership = {
+  ownsMixnode: boolean
+  ownsGateway: boolean
+}
diff --git a/tauri-wallet/yarn.lock b/tauri-wallet/yarn.lock
index 1dff6a144f..e1c7025e01 100644
--- a/tauri-wallet/yarn.lock
+++ b/tauri-wallet/yarn.lock
@@ -1127,6 +1127,13 @@
   "resolved" "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz"
   "version" "0.3.0"
 
+"@types/bs58@^4.0.1":
+  "integrity" "sha512-yfAgiWgVLjFCmRv8zAcOIHywYATEwiTVccTLnRp6UxTNavT55M9d/uhK3T03St/+8/z/wW+CRjGKUNmEqoHHCA=="
+  "resolved" "https://registry.npmjs.org/@types/bs58/-/bs58-4.0.1.tgz"
+  "version" "4.0.1"
+  dependencies:
+    "base-x" "^3.0.6"
+
 "@types/cacheable-request@^6.0.1":
   "integrity" "sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA=="
   "resolved" "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz"
@@ -1674,6 +1681,13 @@
   "resolved" "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz"
   "version" "1.0.2"
 
+"base-x@^3.0.2", "base-x@^3.0.6":
+  "integrity" "sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA=="
+  "resolved" "https://registry.npmjs.org/base-x/-/base-x-3.0.8.tgz"
+  "version" "3.0.8"
+  dependencies:
+    "safe-buffer" "^5.0.1"
+
 "base@^0.11.1":
   "integrity" "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg=="
   "resolved" "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz"
@@ -1866,6 +1880,13 @@
     "escalade" "^3.1.1"
     "node-releases" "^1.1.75"
 
+"bs58@^4.0.1":
+  "integrity" "sha1-vhYedsNU9veIrkBx9j806MTwpCo="
+  "resolved" "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz"
+  "version" "4.0.1"
+  dependencies:
+    "base-x" "^3.0.2"
+
 "buffer-alloc-unsafe@^1.1.0":
   "integrity" "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
   "resolved" "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz"