diff --git a/tauri-wallet/src/components/Nav.tsx b/tauri-wallet/src/components/Nav.tsx
index b9c98f1214..d6c2a7d272 100644
--- a/tauri-wallet/src/components/Nav.tsx
+++ b/tauri-wallet/src/components/Nav.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import {
   List,
   ListItem,
@@ -81,6 +81,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export const Nav = () => {
   const classes = useStyles()
   const { logOut } = useContext(ClientContext)
+  const location = useLocation()
 
   return (
     <div
diff --git a/tauri-wallet/src/components/NavigationCards.tsx b/tauri-wallet/src/components/NavigationCards.tsx
index 0ecbc7fea5..edd11fd0a0 100644
--- a/tauri-wallet/src/components/NavigationCards.tsx
+++ b/tauri-wallet/src/components/NavigationCards.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import {
   CardContent,
   CircularProgress,
diff --git a/tauri-wallet/src/components/index.ts b/tauri-wallet/src/components/index.ts
index a93ddf4809..f7269a253e 100644
--- a/tauri-wallet/src/components/index.ts
+++ b/tauri-wallet/src/components/index.ts
@@ -1,5 +1,4 @@
-export * from './Layout'
 export * from './NymCard'
 export * from './CopyToClipboard'
-export * from './Page'
 export * from './Nav'
+export * from './NavigationCards'
diff --git a/tauri-wallet/src/index.tsx b/tauri-wallet/src/index.tsx
index 8ede5a7d29..cf2589b282 100644
--- a/tauri-wallet/src/index.tsx
+++ b/tauri-wallet/src/index.tsx
@@ -1,21 +1,38 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import ReactDOM from 'react-dom'
 import { CssBaseline, ThemeProvider } from '@material-ui/core'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { Routes } from './routes'
 import { theme } from './theme'
-import { ClientContextProvider } from './context/main'
+import { ClientContext, ClientContextProvider } from './context/main'
+import { ApplicationLayout } from './layouts'
+import { SignIn } from './routes/sign-in'
 
-const App = () => (
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
+const AppWrapper = () => {
+  const { clientDetails } = useContext(ClientContext)
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {!clientDetails ? (
+        <SignIn />
+      ) : (
+        <ApplicationLayout>
+          <Routes />
+        </ApplicationLayout>
+      )}
+    </ThemeProvider>
+  )
+}
+
+const App = () => {
+  return (
     <Router>
       <ClientContextProvider>
-        <Routes />
+        <AppWrapper />
       </ClientContextProvider>
     </Router>
-  </ThemeProvider>
-)
+  )
+}
 
 const root = document.getElementById('root')
 
diff --git a/tauri-wallet/src/components/Page.tsx b/tauri-wallet/src/layouts/AppLayout.tsx
similarity index 88%
rename from tauri-wallet/src/components/Page.tsx
rename to tauri-wallet/src/layouts/AppLayout.tsx
index bd01cc78bf..a263c8e384 100644
--- a/tauri-wallet/src/components/Page.tsx
+++ b/tauri-wallet/src/layouts/AppLayout.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import { Divider } from '@material-ui/core'
-import { AddressCard, BalanceCard } from './NavigationCards'
-import { Nav } from './Nav'
+import { AddressCard, BalanceCard, Nav } from '../components'
 import Logo from '../images/logo.png'
 import { theme } from '../theme'
 
-export const Page = ({ children }: { children: React.ReactElement }) => {
+export const ApplicationLayout = ({
+  children,
+}: {
+  children: React.ReactElement
+}) => {
   return (
     <div
       style={{
@@ -16,6 +19,7 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
         gridTemplateRows: '100%',
         gridColumnGap: '8px',
         gridRowGap: '0px',
+        overflow: 'hidden',
       }}
     >
       <div
diff --git a/tauri-wallet/src/components/Layout.tsx b/tauri-wallet/src/layouts/ContentLayout.tsx
similarity index 84%
rename from tauri-wallet/src/components/Layout.tsx
rename to tauri-wallet/src/layouts/ContentLayout.tsx
index 1eeff7acad..627cea10a7 100644
--- a/tauri-wallet/src/components/Layout.tsx
+++ b/tauri-wallet/src/layouts/ContentLayout.tsx
@@ -13,9 +13,10 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        overflow: 'auto',
       }}
     >
-      <Grid container justifyContent="center">
+      <Grid container justifyContent="center" style={{ margin: 'auto' }}>
         <Grid item xs={12} md={8} xl={6}>
           {children}
         </Grid>
diff --git a/tauri-wallet/src/layouts/index.tsx b/tauri-wallet/src/layouts/index.tsx
new file mode 100644
index 0000000000..831d294045
--- /dev/null
+++ b/tauri-wallet/src/layouts/index.tsx
@@ -0,0 +1,2 @@
+export * from './AppLayout'
+export * from './ContentLayout'
diff --git a/tauri-wallet/src/routes/404.tsx b/tauri-wallet/src/routes/404.tsx
index f895b41bdd..0452e298ae 100644
--- a/tauri-wallet/src/routes/404.tsx
+++ b/tauri-wallet/src/routes/404.tsx
@@ -1,14 +1,12 @@
 import React, { useState } from 'react'
-import { Layout, Page } from '../components'
+import { Layout } from '../layouts'
 
 export const NotFound = () => {
   return (
-    <Page>
-      <Layout>
-        <>
-          <h1>404</h1>
-        </>
-      </Layout>
-    </Page>
+    <Layout>
+      <>
+        <h1>404</h1>
+      </>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/balance.tsx b/tauri-wallet/src/routes/balance.tsx
index 32a18a1a1f..61a6513653 100644
--- a/tauri-wallet/src/routes/balance.tsx
+++ b/tauri-wallet/src/routes/balance.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from 'react'
 import { Button, Grid } from '@material-ui/core'
-import { Refresh } from '@material-ui/icons'
-import { Layout, NymCard, Page } from '../components'
-import { ClientContext } from '../context/main'
 import { Alert } from '@material-ui/lab'
+import { Refresh } from '@material-ui/icons'
+import { NymCard } from '../components'
+import { Layout } from '../layouts'
+import { ClientContext } from '../context/main'
 import { theme } from '../theme'
 
 export const Balance = () => {
@@ -25,29 +26,27 @@ export const Balance = () => {
   )
 
   return (
-    <Page>
-      <Layout>
-        <NymCard title="Check Balance">
-          <Grid container direction="column" spacing={2}>
-            <Grid item>
-              {balanceError && (
-                <Alert severity="error" action={<RefreshAction />}>
-                  {balanceError}
-                </Alert>
-              )}
-              {!balanceError && (
-                <Alert
-                  severity="success"
-                  style={{ padding: theme.spacing(2, 3) }}
-                  action={<RefreshAction />}
-                >
-                  {'The current balance is ' + balance?.amount}
-                </Alert>
-              )}
-            </Grid>
+    <Layout>
+      <NymCard title="Check Balance">
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            {balanceError && (
+              <Alert severity="error" action={<RefreshAction />}>
+                {balanceError}
+              </Alert>
+            )}
+            {!balanceError && (
+              <Alert
+                severity="success"
+                style={{ padding: theme.spacing(2, 3) }}
+                action={<RefreshAction />}
+              >
+                {'The current balance is ' + balance?.printable_balance}
+              </Alert>
+            )}
           </Grid>
-        </NymCard>
-      </Layout>
-    </Page>
+        </Grid>
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/bond/index.tsx b/tauri-wallet/src/routes/bond/index.tsx
index 5b0395e095..d34a4cd90a 100644
--- a/tauri-wallet/src/routes/bond/index.tsx
+++ b/tauri-wallet/src/routes/bond/index.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-import { Layout, NymCard, Page } from '../../components'
+import { NymCard } from '../../components'
+import { Layout } from '../../layouts'
 import { BondForm } from './BondForm'
 
 export const Bond = () => {
   return (
-    <Page>
-      <Layout>
-        <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
-          <BondForm />
-        </NymCard>
-      </Layout>
-    </Page>
+    <Layout>
+      <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
+        <BondForm />
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/delegate/index.tsx b/tauri-wallet/src/routes/delegate/index.tsx
index 9ca3a65d10..c0a8806c3f 100644
--- a/tauri-wallet/src/routes/delegate/index.tsx
+++ b/tauri-wallet/src/routes/delegate/index.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
 import { DelegateForm } from './DelegateForm'
-import { Layout, NymCard, Page } from '../../components'
+import { NymCard } from '../../components'
+import { Layout } from '../../layouts'
 
 export const Delegate = () => {
   return (
-    <Page>
-      <Layout>
-        <NymCard
-          title="Delegate"
-          subheader="Delegate to mixnode or gateway"
-          noPadding
-        >
-          <DelegateForm />
-        </NymCard>
-      </Layout>
-    </Page>
+    <Layout>
+      <NymCard
+        title="Delegate"
+        subheader="Delegate to mixnode or gateway"
+        noPadding
+      >
+        <DelegateForm />
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/internal-docs/index.tsx b/tauri-wallet/src/routes/internal-docs/index.tsx
index 97554a4ec5..f7cdc36375 100644
--- a/tauri-wallet/src/routes/internal-docs/index.tsx
+++ b/tauri-wallet/src/routes/internal-docs/index.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from 'react'
-import { Layout, Page, NymCard } from '../../components'
+import { NymCard } from '../../components'
 import { ApiList } from './ApiList'
+import { Layout } from '../../layouts'
 
 export const InternalDocs = () => {
   if (process.env.NODE_ENV == 'development') {
     return (
-      <Page>
-        <Layout>
-          <NymCard title="Docs" subheader="Internal API docs">
-            <ApiList />
-          </NymCard>
-        </Layout>
-      </Page>
+      <Layout>
+        <NymCard title="Docs" subheader="Internal API docs">
+          <ApiList />
+        </NymCard>
+      </Layout>
     )
   }
 
diff --git a/tauri-wallet/src/routes/receive.tsx b/tauri-wallet/src/routes/receive.tsx
index ee0ed97b4f..37685a15fa 100644
--- a/tauri-wallet/src/routes/receive.tsx
+++ b/tauri-wallet/src/routes/receive.tsx
@@ -1,8 +1,9 @@
 import React, { useContext } from 'react'
-import { Card, CardContent, Grid, Typography } from '@material-ui/core'
+import { Card, Grid, Typography } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
-import { CopyToClipboard, Layout, NymCard, Page } from '../components'
 import { useMediaQuery } from '@material-ui/core'
+import { CopyToClipboard, NymCard } from '../components'
+import { Layout } from '../layouts'
 import { theme } from '../theme'
 import { ClientContext } from '../context/main'
 
@@ -11,38 +12,36 @@ export const Receive = () => {
   const matches = useMediaQuery('(min-width:769px)')
 
   return (
-    <Page>
-      <Layout>
-        <NymCard title="Receive Nym">
-          <Grid container direction="column" spacing={1}>
-            <Grid item>
-              <Alert severity="info">
-                You can receive tokens by providing this address to the sender
-              </Alert>
-            </Grid>
-            <Grid item>
-              <Card
-                style={{
-                  margin: theme.spacing(1, 0),
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  padding: theme.spacing(3),
-                }}
-                variant="outlined"
-              >
-                <Typography
-                  variant={matches ? 'h5' : 'subtitle1'}
-                  style={{ wordBreak: 'break-word' }}
-                >
-                  {clientDetails?.client_address}
-                </Typography>
-                <CopyToClipboard text={clientDetails?.client_address || ''} />
-              </Card>
-            </Grid>
+    <Layout>
+      <NymCard title="Receive Nym">
+        <Grid container direction="column" spacing={1}>
+          <Grid item>
+            <Alert severity="info">
+              You can receive tokens by providing this address to the sender
+            </Alert>
           </Grid>
-        </NymCard>
-      </Layout>
-    </Page>
+          <Grid item>
+            <Card
+              style={{
+                margin: theme.spacing(1, 0),
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexWrap: 'wrap',
+                padding: theme.spacing(3),
+              }}
+              variant="outlined"
+            >
+              <Typography
+                variant={matches ? 'h5' : 'subtitle1'}
+                style={{ wordBreak: 'break-word' }}
+              >
+                {clientDetails?.client_address}
+              </Typography>
+              <CopyToClipboard text={clientDetails?.client_address || ''} />
+            </Card>
+          </Grid>
+        </Grid>
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/send/index.tsx b/tauri-wallet/src/routes/send/index.tsx
index 0a4c2d3e02..db998cd8ea 100644
--- a/tauri-wallet/src/routes/send/index.tsx
+++ b/tauri-wallet/src/routes/send/index.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-import { Layout, NymCard, Page } from '../../components'
+import { NymCard } from '../../components'
 import { SendWizard } from './SendWizard'
+import { Layout } from '../../layouts'
 
 export const Send = () => {
   return (
-    <Page>
-      <Layout>
-        <NymCard title="Send tokens" noPadding>
-          <SendWizard />
-        </NymCard>
-      </Layout>
-    </Page>
+    <Layout>
+      <NymCard title="Send tokens" noPadding>
+        <SendWizard />
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/sign-in.tsx b/tauri-wallet/src/routes/sign-in.tsx
index bcd8c49bdd..c1b8293bd2 100644
--- a/tauri-wallet/src/routes/sign-in.tsx
+++ b/tauri-wallet/src/routes/sign-in.tsx
@@ -31,7 +31,7 @@ export const SignIn = () => {
     setIsLoading(true)
     setInputError(undefined)
 
-    invoke('connect_with_mnemonic', { mnemonic })
+    await invoke('connect_with_mnemonic', { mnemonic })
       .then((res) => {
         logIn(res as TClientDetails)
       })
diff --git a/tauri-wallet/src/routes/unbond/index.tsx b/tauri-wallet/src/routes/unbond/index.tsx
index 2333437b57..ff768ab63e 100644
--- a/tauri-wallet/src/routes/unbond/index.tsx
+++ b/tauri-wallet/src/routes/unbond/index.tsx
@@ -1,19 +1,14 @@
 import React from 'react'
-import { Layout, NymCard, Page } from '../../components'
+import { NymCard } from '../../components'
 import { UnbondForm } from './UnbondForm'
+import { Layout } from '../../layouts'
 
 export const Unbond = () => {
   return (
-    <Page>
-      <Layout>
-        <NymCard
-          title="Unbond"
-          subheader="Unbond a mixnode or gateway"
-          noPadding
-        >
-          <UnbondForm />
-        </NymCard>
-      </Layout>
-    </Page>
+    <Layout>
+      <NymCard title="Unbond" subheader="Unbond a mixnode or gateway" noPadding>
+        <UnbondForm />
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/src/routes/undelegate/index.tsx b/tauri-wallet/src/routes/undelegate/index.tsx
index 80dbf5161b..479554d89b 100644
--- a/tauri-wallet/src/routes/undelegate/index.tsx
+++ b/tauri-wallet/src/routes/undelegate/index.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
-import { Layout, NymCard, Page } from '../../components'
+import { NymCard } from '../../components'
 import { UndelegateForm } from './UndelegateForm'
+import { Layout } from '../../layouts'
 
 export const Undelegate = () => {
   return (
-    <Page>
-      <Layout>
-        <NymCard
-          title="Undelegate"
-          subheader="Undelegate from a mixnode or gateway"
-          noPadding
-        >
-          <UndelegateForm />
-        </NymCard>
-      </Layout>
-    </Page>
+    <Layout>
+      <NymCard
+        title="Undelegate"
+        subheader="Undelegate from a mixnode or gateway"
+        noPadding
+      >
+        <UndelegateForm />
+      </NymCard>
+    </Layout>
   )
 }
diff --git a/tauri-wallet/tsconfig.json b/tauri-wallet/tsconfig.json
index c161daf48c..47c3a46834 100644
--- a/tauri-wallet/tsconfig.json
+++ b/tauri-wallet/tsconfig.json
@@ -47,7 +47,7 @@
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     "typeRoots": [
-      "node_modules/@types",
+      "../node_modules/@types",
       "src/types",
       "./"
     ] /* List of folders to include type definitions from. */,