diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 5be931a..f56ae50 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -92,6 +92,11 @@
     "columnTime": "Time"
   },
 
+  "addWallet": {
+    "dialogTitle": "Add wallet",
+    "dialogTitleCreate": "Create wallet"
+  },
+
   "credits": {
     "madeBy": "Made by <1>{{authorName}}</1>",
     "supportersTitle": "Supporters",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 09695ac..31a1c86 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -8,7 +8,7 @@
 
 import { createStore } from "redux";
 import { Provider } from "react-redux";
-import { devToolsEnhancer } from 'redux-devtools-extension';
+import { devToolsEnhancer } from "redux-devtools-extension";
 import rootReducer from "@/src/store/reducers/RootReducer";
 
 export const store = createStore(
diff --git a/src/layouts/dialogs/AddWalletDialog.tsx b/src/layouts/dialogs/AddWalletDialog.tsx
new file mode 100644
index 0000000..aec3480
--- /dev/null
+++ b/src/layouts/dialogs/AddWalletDialog.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { IconButton } from "@components/icon-button/IconButton";
+
+import { ModalDialog, withDialogLink } from "./ModalDialog";
+
+export const AddWalletButton = withDialogLink(
+  (show, handleClose) => 
+    <AddWalletDialog show={show} handleClose={handleClose} create={false} />
+)(IconButton);
+
+export const CreateWalletButton = withDialogLink(
+  (show, handleClose) => 
+    <AddWalletDialog show={show} handleClose={handleClose} create={true} />
+)(IconButton);
+
+interface Props {
+  show: boolean;
+  handleClose: () => void;
+
+  /** If true, show the 'create wallet' dialog instead of the 'add wallet'
+   * dialog. */
+  create?: boolean;
+}
+
+export const AddWalletDialog: React.FC<Props> = ({ show, handleClose, create }: Props) => {
+  const { t } = useTranslation();
+
+  return <ModalDialog
+    show={show}
+    handleClose={handleClose}
+    title={t(create ? "addWallet.dialogTitleCreate" : "addWallet.dialogTitle")}
+  >
+    Placeholder
+  </ModalDialog>;
+};
diff --git a/src/layouts/dialogs/HelpWalletStorageDialog.tsx b/src/layouts/dialogs/HelpWalletStorageDialog.tsx
index 4d3420d..47dd260 100644
--- a/src/layouts/dialogs/HelpWalletStorageDialog.tsx
+++ b/src/layouts/dialogs/HelpWalletStorageDialog.tsx
@@ -1,33 +1,25 @@
-import React, { useState, MouseEvent } from "react";
+import React, { Component, ReactNode } from "react";
 
-import { useTranslation } from "react-i18next";
+import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
 
-import { ModalDialog } from "./ModalDialog";
+import { WithDialogLink, withDialogLink, ModalDialog } from "./ModalDialog";
 
-export const HelpWalletStorageLink: React.FC = () => {
-  const { t } = useTranslation();
-  const [show, setShow] = useState(false);
+class HelpWalletStorageLinkComponent extends Component<WithDialogLink & WithTranslation> {
+  render(): ReactNode {
+    const { t, openDialog } = this.props;
+    return <a href="#" onClick={openDialog}>
+      {t("masterPassword.learnMore")}
+    </a>;
+  }
+}
 
-  // Help dialog show/close state is essentially handled by the link
-  const handleClose = () => setShow(false);
-  const handleShow = (e: MouseEvent) => {
-    e.preventDefault();
-    setShow(true);
-  };
-
-  return (
-    <>
-      {/* Add a link to show the dialog */}
-      {/* TODO: make this a <button> */}
-      {/* eslint-disable-next-line */}
-      (<a href="#" onClick={handleShow}>{t("masterPassword.learnMore")}</a>)
-      <HelpWalletStorageDialog
-        show={show}
-        handleClose={handleClose}
-      />
-    </>
-  );
-};
+export const HelpWalletStorageLink = withTranslation()(withDialogLink(
+  (show, handleClose) => 
+    <HelpWalletStorageDialog
+      show={show}
+      handleClose={handleClose} 
+    />
+)(HelpWalletStorageLinkComponent));
 
 interface Props {
   show: boolean;
diff --git a/src/layouts/dialogs/ModalDialog.tsx b/src/layouts/dialogs/ModalDialog.tsx
index cceabb4..d406f6d 100644
--- a/src/layouts/dialogs/ModalDialog.tsx
+++ b/src/layouts/dialogs/ModalDialog.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ReactNode } from "react";
+import React, { Component, ReactElement, ReactNode } from "react";
 
 import Modal from "react-bootstrap/Modal";
 import { CloseButton } from "./utils/CloseButton";
@@ -84,3 +84,39 @@
     );
   }
 };
+
+export interface WithDialogLink {
+  openDialog?: () => void;
+}
+
+interface DialogLinkState {
+  show: boolean;
+}
+
+export const withDialogLink = (renderDialog: (show: boolean, handleClose: () => void) => ReactElement<ModalDialog>) =>
+  <P extends WithDialogLink>(Component: React.ComponentType<P>): React.ComponentType<P> =>
+    class WrappedDialogLink extends React.Component<P, DialogLinkState> {
+      constructor(props: P) {
+        super(props);
+        
+        this.state = {
+          show: false
+        };
+      }
+
+      openDialog = () => this.setState({ show: true });
+      closeDialog = () => this.setState({ show: false });
+
+      render() {
+        const { show } = this.state;
+
+        return <>
+          <Component 
+            {...this.props as P} 
+            onClick={this.openDialog}
+            openDialog={this.openDialog}
+          />
+          {renderDialog(show, this.closeDialog)}
+        </>;
+      }
+    };
diff --git a/src/layouts/my-wallets/MyWalletsPage.tsx b/src/layouts/my-wallets/MyWalletsPage.tsx
index fc29aa8..96a27a0 100644
--- a/src/layouts/my-wallets/MyWalletsPage.tsx
+++ b/src/layouts/my-wallets/MyWalletsPage.tsx
@@ -8,17 +8,16 @@
 
 import { IconButton } from "@components/icon-button/IconButton";
 import Button from "react-bootstrap/Button";
+import { AddWalletButton, CreateWalletButton } from "@layouts/dialogs/AddWalletDialog";
 
 import { SearchTextbox } from "@components/list-view/SearchTextbox";
 import { FilterSelect } from "@components/list-view/FilterSelect";
-import { DateString } from "@krist/types/KristTypes";
 
 import { MyWalletsMobileItem } from "./MyWalletsMobileItem";
 
 import { Wallet } from "@krist/wallets/Wallet";
 
 import { sleep } from "@utils";
-import { KristWalletFormat } from "@krist/wallets/formats/WalletFormat";
 
 const WALLET_COLUMNS = new Map<ColumnKey<Wallet>, ColumnSpec<Wallet>>()
   .set("label", { nameKey: "myWallets.columnLabel" })
@@ -49,13 +48,13 @@
         <IconButton size="sm" variant="secondary" icon="database">
           {t("myWallets.manageBackups")}
         </IconButton>
-        <IconButton size="sm" variant="success" icon="plus">
+        <CreateWalletButton size="sm" variant="success" icon="plus">
           {t("myWallets.createWallet")}
-        </IconButton>
-        <Button size="sm" variant="outline-primary">
+        </CreateWalletButton>
+        <AddWalletButton size="sm" variant="outline-primary">
           {/* TODO: find an icon for this */}
           {t("myWallets.addExistingWallet")}
-        </Button>
+        </AddWalletButton>
       </>}
       filters={<>
         {/* Search filter textbox */}
diff --git a/src/shared-components/icon-button/IconButton.tsx b/src/shared-components/icon-button/IconButton.tsx
index 0864262..6acf0ff 100644
--- a/src/shared-components/icon-button/IconButton.tsx
+++ b/src/shared-components/icon-button/IconButton.tsx
@@ -4,13 +4,14 @@
 
 import "./IconButton.scss";
 
-interface Props extends ButtonProps {
-  icon: string;
+export interface Props extends ButtonProps {
+  icon?: string;
+  openDialog?: () => void;
 }
 
-export const IconButton: React.FC<Props> = (props: PropsWithChildren<Props>) => {
-  return <Button {...props}>
-    <span className={`btn-icon icon-${props.icon}`}></span>
+export const IconButton: React.FC<Props> = ({ openDialog, ...props }: PropsWithChildren<Props>) => {
+  return <Button as="a" onClick={openDialog} {...props}>
+    {props.icon && <span className={`btn-icon icon-${props.icon}`}></span>}
     {props.children}
   </Button>;
 };