diff --git a/package.json b/package.json
index e626a0a..644d8ae 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "bootstrap": "^4.5.2",
     "debug": "^4.1.1",
     "formik": "^2.1.5",
-    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index dc42f6f..d87434c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { Component } from "react";
 import "./App.scss";
 
 import { MainLayout } from "../layouts/main";
 
 import { WalletManager } from "./WalletManager";
+import { WalletManagerView } from "./WalletManagerView";
+
 import { kristService } from "@krist/KristConnectionService";
 
 import packageJson from "@/package.json";
@@ -11,9 +13,27 @@
 kristService().connect(packageJson.defaultSyncNode) // TODO
   .catch(console.error);
 
-export const App = (): JSX.Element => (
-  <>
-    <MainLayout />
-    <WalletManager />
-  </>
-);
+type AppState = {
+  walletManager: WalletManager
+}
+
+export class App extends Component<unknown, AppState> {
+  constructor(props: unknown) {
+    super(props);
+
+    this.state = {
+      walletManager: new WalletManager((walletManager: WalletManager) => {
+        this.setState({ walletManager });
+      })
+    };
+  }
+
+  render(): JSX.Element {
+    const { walletManager } = this.state;
+
+    return <>
+      <MainLayout walletManager={walletManager} />
+      <WalletManagerView walletManager={walletManager} />
+    </>;
+  }
+}
diff --git a/src/app/MasterPasswordDialog.tsx b/src/app/MasterPasswordDialog.tsx
index 5bb6030..53cf7e6 100644
--- a/src/app/MasterPasswordDialog.tsx
+++ b/src/app/MasterPasswordDialog.tsx
@@ -36,6 +36,10 @@
     }
   }
 
+  browseAsGuest(): void {
+    this.props.walletManager.browseAsGuest();
+  }
+
   render(): JSX.Element {
     const { hasMasterPassword } = this.props;
     const body = hasMasterPassword
@@ -54,7 +58,10 @@
       /* TODO: Animation is disabled for now, because react-bootstrap (or more
         specifically, react-transition-group) has an incompatibility with
         strict mode. */
-      <Modal show={true} centered animation={false}>
+      <Modal 
+        show={true} centered animation={false}
+        onHide={this.browseAsGuest.bind(this)}
+      >
         <Formik initialValues={{ password: "" }} onSubmit={this.onSubmit.bind(this)}>
           {({ handleSubmit, handleChange, values, errors, isSubmitting }) => (
             <Form noValidate onSubmit={handleSubmit}>
@@ -83,8 +90,15 @@
                 <Form.Control.Feedback type="invalid">{errors.password}</Form.Control.Feedback>
               </Modal.Body>
               <Modal.Footer>
-                {/* Left side */}
-                <Button variant="secondary" style={{ marginRight: "auto" }} tabIndex={3}>Browse as guest</Button>
+                {/* Left side, "Browse as guest" button */}
+                <Button 
+                  variant="secondary" 
+                  style={{ marginRight: "auto" }} 
+                  onClick={this.browseAsGuest.bind(this)}
+                  tabIndex={3}
+                >
+                  Browse as guest
+                </Button>
 
                 {/* Right side */}
                 {hasMasterPassword
diff --git a/src/app/WalletManager.tsx b/src/app/WalletManager.tsx
index 5ac2b2c..5d61854 100644
--- a/src/app/WalletManager.tsx
+++ b/src/app/WalletManager.tsx
@@ -1,20 +1,16 @@
-import React, { Component } from "react";
-
 import { toHex } from "@utils";
 import { aesGcmEncrypt, aesGcmDecrypt } from "@utils/crypto";
 
-import { MasterPasswordDialog } from "./MasterPasswordDialog";
-
 import Debug from "debug";
 const debug = Debug("kristweb:walletManager");
 
-type WalletManagerData = {
+export class WalletManager {
   /** Whether or not the user has logged in, either as a guest, or with a
    * master password. */
-  isLoggedIn: boolean;
+  isLoggedIn = false;
 
   /** Whether or not the user is browsing KristWeb as a guest. */
-  isGuest: boolean;
+  isGuest = true;
 
   /** The master password used to encrypt and decrypt local storage data. */
   masterPassword?: string;
@@ -28,28 +24,20 @@
 
   /** Whether or not the user has configured and saved a master password
    * before (whether or not salt+tester are present in local storage). */
-  hasMasterPassword: boolean;
-}
+  hasMasterPassword = false;
 
-export class WalletManager extends Component<unknown, WalletManagerData> {
-  constructor(props: unknown) {
-    super(props);
+  constructor(private stateChangeListener: (walletManager: WalletManager) => void) {
+    this.isLoggedIn = false;
+    this.isGuest = true;
 
-    // Check current data stored in local storage.
-    const salt = localStorage.getItem("salt") || undefined;
-    const tester = localStorage.getItem("tester") || undefined;
+    // Salt and tester from local storage (or undefined)
+    this.salt = localStorage.getItem("salt") || undefined;
+    this.tester = localStorage.getItem("tester") || undefined;
 
-    this.state = {
-      isLoggedIn: false,
-      isGuest: true,
+    // There is a master password configured if both `salt` and `tester` exist
+    this.hasMasterPassword = !!this.salt && !!this.tester;
 
-      // Salt and tester from local storage (or undefined)
-      salt, tester,
-      // There is a master password configured if both `salt` and `tester` exist
-      hasMasterPassword: !!salt && !!tester
-    };
-
-    debug("hasMasterPassword: %b", this.state.hasMasterPassword);
+    debug("hasMasterPassword: %b", this.hasMasterPassword);
   }
 
   async setMasterPassword(password: string): Promise<void> {
@@ -69,18 +57,19 @@
     localStorage.setItem("tester", tester);
 
     // Set the logged in state
-    this.setState({
-      isLoggedIn: true,
-      isGuest: false,
-      masterPassword: password
-    });
+    this.isLoggedIn = true;
+    this.isGuest = false;
+    this.masterPassword = password;
+
+    // Delegate to the App's listener
+    this.stateChangeListener(this);
   }
 
   async testMasterPassword(password: string): Promise<void> {
     if (!password) throw new Error("Password is required.");
 
     // Get the salt and tester from local storage and ensure they exist
-    const { salt, tester } = this.state;
+    const { salt, tester } = this;
     if (!salt || !tester) throw new Error("Master password has not been set up.");
 
     try {
@@ -97,23 +86,20 @@
     }
 
     // Set the logged in state and don't return any errors (login successful)
-    this.setState({
-      isLoggedIn: true,
-      isGuest: false,
-      masterPassword: password
-    });
+    this.isLoggedIn = true;
+    this.isGuest = false;
+    this.masterPassword = password;
+
+    // Delegate to the App's listener
+    this.stateChangeListener(this);
   }
 
-  /** Render the master password login/setup dialog */
-  render(): JSX.Element | null {
-    const { isLoggedIn, hasMasterPassword } = this.state;
-    if (isLoggedIn) return null; // Don't show the dialog again
+  browseAsGuest(): void {
+    // Set the logged in state as a guest
+    this.isLoggedIn = true;
+    this.isGuest = true;
 
-    return (
-      <MasterPasswordDialog 
-        hasMasterPassword={hasMasterPassword} // Show the setup dialog if needed
-        walletManager={this} 
-      />
-    );
+    // Delegate to the App's listener
+    this.stateChangeListener(this);
   }
-}
+};
diff --git a/src/app/WalletManagerView.tsx b/src/app/WalletManagerView.tsx
new file mode 100644
index 0000000..4ffcef3
--- /dev/null
+++ b/src/app/WalletManagerView.tsx
@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+
+import { MasterPasswordDialog } from "./MasterPasswordDialog";
+import { WalletManager } from "./WalletManager";
+
+interface Props {
+  walletManager: WalletManager;
+}
+
+export class WalletManagerView extends Component<Props> {
+  /** Render the master password login/setup dialog */
+  render(): JSX.Element | null {
+    const { walletManager } = this.props;
+    const { isLoggedIn, hasMasterPassword } = walletManager;
+    if (isLoggedIn) return null; // Don't show the dialog again
+
+    return (
+      <MasterPasswordDialog 
+        hasMasterPassword={hasMasterPassword} // Show the setup dialog if needed
+        walletManager={walletManager} 
+      />
+    );
+  }
+}
diff --git a/src/layouts/main/components/sidebar/SidebarItem.tsx b/src/layouts/main/components/sidebar/SidebarItem.tsx
index cd03bcb..d5562ef 100644
--- a/src/layouts/main/components/sidebar/SidebarItem.tsx
+++ b/src/layouts/main/components/sidebar/SidebarItem.tsx
@@ -1,34 +1,23 @@
-import React, { Component, ReactNode } from "react";
-import PropTypes from "prop-types";
+import React from "react";
 
 import "./SidebarItem.scss";
 
 import Nav from "react-bootstrap/Nav";
 import { LinkContainer } from "react-router-bootstrap";
 
-type SidebarItemProps = {
+type Props = {
   url: string,
   text: string,
   icon: string
 };
 
-export class SidebarItem extends Component<SidebarItemProps> {
-  public static propTypes = {
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired
-  }
-
-  render(): ReactNode {
-    const { url, text, icon } = this.props;
-
-    return <Nav.Item>
-      <LinkContainer to={url}>
-        <Nav.Link>
-          <span className={"sidebar-icon icon-" + icon}></span>
-          {text}
-        </Nav.Link>
-      </LinkContainer>
-    </Nav.Item>;
-  }
-}
+export const SidebarItem: React.FC<Props> = ({ url, text, icon }: Props) => (
+  <Nav.Item>
+    <LinkContainer to={url}>
+      <Nav.Link>
+        <span className={"sidebar-icon icon-" + icon}></span>
+        {text}
+      </Nav.Link>
+    </LinkContainer>
+  </Nav.Item>
+);
diff --git a/src/layouts/main/components/sidebar/TotalBalance.scss b/src/layouts/main/components/sidebar/TotalBalance.scss
index 53d14c5..c587897 100644
--- a/src/layouts/main/components/sidebar/TotalBalance.scss
+++ b/src/layouts/main/components/sidebar/TotalBalance.scss
@@ -1,6 +1,6 @@
 @import "~scss/variables";
 
-#nav-total-balance {
+.nav-total-balance {
   background-color: $gray-200;
 
   padding: 0.5rem 1rem;
@@ -19,4 +19,4 @@
   .krist-value {
     font-size: 120%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/main/components/sidebar/TotalBalance.tsx b/src/layouts/main/components/sidebar/TotalBalance.tsx
index 83e4b42..5600c9c 100644
--- a/src/layouts/main/components/sidebar/TotalBalance.tsx
+++ b/src/layouts/main/components/sidebar/TotalBalance.tsx
@@ -1,25 +1,15 @@
-import React, { Component, ReactNode } from "react";
-import PropTypes from "prop-types";
-
+import React from "react";
 import { KristValue } from "@components/krist-value";
 
 import "./TotalBalance.scss";
 
-type TotalBalanceProps = {
+type Props = {
   balance: number
 };
 
-export class TotalBalance extends Component<TotalBalanceProps> {
-  public static propTypes = {
-    balance: PropTypes.number.isRequired
-  }
-
-  render(): ReactNode {
-    const { balance } = this.props;
-
-    return <div id="nav-total-balance">
-      <h5>Total Balance</h5>
-      <KristValue value={balance} long />
-    </div>;
-  }
-}
+export const TotalBalance: React.FC<Props> = ({ balance }: Props) => (
+  <div className="nav-total-balance">
+    <h5>Total Balance</h5>
+    <KristValue value={balance} long />
+  </div>
+);
diff --git a/src/layouts/main/components/sidebar/index.tsx b/src/layouts/main/components/sidebar/index.tsx
index c776f6a..ab03eac 100644
--- a/src/layouts/main/components/sidebar/index.tsx
+++ b/src/layouts/main/components/sidebar/index.tsx
@@ -1,15 +1,22 @@
 import React from "react";
 
-import "./index.scss";
-
 import Nav from "react-bootstrap/Nav";
+
+import { WalletManager } from "@app/WalletManager";
+
 import { TotalBalance } from "./TotalBalance";
 import { SidebarItem } from "./SidebarItem";
 import { Footer } from "./Footer";
 
-export const MainSidebar = (): JSX.Element => (
+import "./index.scss";
+
+interface Props {
+  walletManager: WalletManager;
+}
+
+export const MainSidebar: React.FC<Props> = (props: Props): JSX.Element => (
   <Nav id="main-sidebar">
-    <TotalBalance balance={250000} /> 
+    {!props.walletManager.isGuest && <TotalBalance balance={250000} />}
 
     <div className="sidebar-content">
       <SidebarItem url="/" icon="home" text="Dashboard" />
diff --git a/src/layouts/main/index.tsx b/src/layouts/main/index.tsx
index 89aa458..d77cb6f 100644
--- a/src/layouts/main/index.tsx
+++ b/src/layouts/main/index.tsx
@@ -6,6 +6,8 @@
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 
+import { WalletManager } from "@app/WalletManager";
+
 import { MainNav } from "./components/nav";
 import { MainSidebar } from "./components/sidebar";
 
@@ -13,12 +15,16 @@
 
 import "./index.scss";
 
-export const MainLayout = (): JSX.Element => (
+interface Props {
+  walletManager: WalletManager;
+}
+
+export const MainLayout: React.FC<Props> = (props: Props): JSX.Element => (
   <Router>
     <MainNav />
     <Container fluid id="main-container">
       <Row>
-        <MainSidebar />
+        <MainSidebar walletManager={props.walletManager} />
         <Col id="page-container">
           <Switch>
             <Route exact path="/">
diff --git a/tsconfig.extend.json b/tsconfig.extend.json
index dc65e92..4241b0c 100644
--- a/tsconfig.extend.json
+++ b/tsconfig.extend.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@app/*": ["./src/app/*"],
       "@components/*": ["./src/shared-components/*"],
       "@layouts/*": ["./src/layouts/*"],
       "@krist/*": ["./src/krist/*"],