diff --git a/components/layout/Page.tsx b/components/layout/Page.tsx
index 421823e..cc42c77 100644
--- a/components/layout/Page.tsx
+++ b/components/layout/Page.tsx
@@ -1,30 +1,69 @@
-import React from "react";
-
+import { useRouter } from "next/router";
+import { useState } from "react";
 import Head from "../head";
 import StackableContainer from "./StackableContainer";
 
-interface Props {
-  title?: string;
-  rootMultisig?: string;
-  children: React.ReactNode;
+interface PageProps {
+  readonly title?: string;
+  readonly goBack?: {
+    readonly pathname: string;
+    readonly title: string;
+    readonly needsConfirm?: boolean;
+  };
+  readonly children: React.ReactNode;
 }
 
-const Page = (props: Props) => {
+const Page = ({ title, goBack, children }: PageProps) => {
+  const router = useRouter();
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const linkProps = (() => {
+    if (!goBack) {
+      return {};
+    }
+
+    if (goBack.needsConfirm && !showConfirm) {
+      return {
+        href: "",
+        onClick: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => {
+          e.preventDefault();
+          setShowConfirm(true);
+        },
+      };
+    }
+
+    return {
+      href: goBack.pathname,
+    };
+  })();
+
   return (
     <div className="page">
-      <Head title={props.title || "Cosmos Multisig Manager"} />
-      <div className="container">
-        {props.rootMultisig && (
-          <div className="nav">
-            <StackableContainer base lessPadding lessMargin>
-              <p>
-                <a href={`/multi/${props.rootMultisig}`}>← Back to multisig account</a>
-              </p>
-            </StackableContainer>
-          </div>
-        )}
-        {props.children}
-      </div>
+      <Head title={title || "Cosmos Multisig Manager"} />
+      <StackableContainer>
+        {goBack ? (
+          <StackableContainer
+            base
+            lessPadding
+            lessMargin
+            divProps={{
+              style: { width: "fit-content", cursor: "pointer" },
+              onClick: linkProps.href ? () => router.push(linkProps.href) : linkProps.onClick,
+            }}
+          >
+            <p>
+              <a {...linkProps}>← Back to {goBack.title}</a>
+            </p>
+            {showConfirm ? (
+              <>
+                <p style={{ marginTop: "8px" }}>Changes to any form will be lost if you go back</p>
+                <p>Click again to confirm</p>
+              </>
+            ) : null}
+          </StackableContainer>
+        ) : null}
+        {children}
+      </StackableContainer>
       <div className="footer-links">
         <StackableContainer base lessPadding lessMargin>
           <p>
@@ -38,15 +77,6 @@ const Page = (props: Props) => {
           justify-content: center;
           padding: 120px 0;
         }
-        .container {
-          position: relative;
-        }
-        .nav {
-          position: absolute;
-          top: -40px;
-          left: 0;
-          display: flex;
-        }
         a,
         a:visited {
           color: white;
diff --git a/components/layout/StackableContainer.tsx b/components/layout/StackableContainer.tsx
index 4262e43..d4b6667 100644
--- a/components/layout/StackableContainer.tsx
+++ b/components/layout/StackableContainer.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 interface Props {
   base?: boolean;
   children: React.ReactNode;
@@ -7,10 +5,11 @@ interface Props {
   lessMargin?: boolean;
   lessRadius?: boolean;
   fullHeight?: boolean;
+  divProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 const StackableContainer = (props: Props) => (
-  <div className={`container ${props.base ? "base" : ""}`}>
+  <div className={`container ${props.base ? "base" : ""}`} {...props.divProps}>
     {props.children}
 
     <style jsx>{`
diff --git a/pages/create.tsx b/pages/create.tsx
index 0b5d8b7..3ea7938 100644
--- a/pages/create.tsx
+++ b/pages/create.tsx
@@ -1,11 +1,9 @@
-import React from "react";
-
 import MultisigForm from "../components/forms/MultisigForm";
 import Page from "../components/layout/Page";
 import StackableContainer from "../components/layout/StackableContainer";
 
 const CreatePage = () => (
-  <Page>
+  <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
     <StackableContainer base>
       <StackableContainer lessPadding>
         <h1 className="title">Create Legacy Multisig</h1>
diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 02be400..6dd8a6d 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -27,14 +27,14 @@ const Multipage = () => {
   assert(state.chain.addressPrefix, "address prefix missing");
 
   const [holdings, setHoldings] = useState<readonly Coin[]>([]);
-  const [multisigAddress, setMultisigAddress] = useState("");
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
   const [pubkey, setPubkey] = useState<MultisigThresholdPubkey>();
   const [accountError, setAccountError] = useState(null);
 
+  const multisigAddress = router.query.address?.toString();
   const explorerHref = explorerLinkAccount(
     process.env.NEXT_PUBLIC_EXPLORER_LINK_ACCOUNT || "",
-    multisigAddress,
+    multisigAddress || "",
   );
 
   const fetchMultisig = useCallback(
@@ -64,15 +64,13 @@ const Multipage = () => {
   );
 
   useEffect(() => {
-    const address = router.query.address?.toString();
-    if (address) {
-      setMultisigAddress(address);
-      fetchMultisig(address);
+    if (multisigAddress) {
+      fetchMultisig(multisigAddress);
     }
-  }, [fetchMultisig, router.query.address]);
+  }, [fetchMultisig, multisigAddress]);
 
   return (
-    <Page>
+    <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>
@@ -125,7 +123,7 @@ const Multipage = () => {
             </div>
           </StackableContainer>
         ) : null}
-        {!!accountOnChain ? (
+        {accountOnChain && multisigAddress ? (
           <CreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
         ) : null}
       </StackableContainer>
diff --git a/pages/multi/[address]/transaction/[transactionID].tsx b/pages/multi/[address]/transaction/[transactionID].tsx
index 51d2442..4ade7d7 100644
--- a/pages/multi/[address]/transaction/[transactionID].tsx
+++ b/pages/multi/[address]/transaction/[transactionID].tsx
@@ -55,13 +55,11 @@ export const getServerSideProps: GetServerSideProps = async (context): Promise<P
 };
 
 const TransactionPage = ({
-  multisigAddress,
   transactionJSON,
   transactionID,
   signatures,
   txHash,
 }: {
-  multisigAddress: string;
   transactionJSON: string;
   transactionID: string;
   signatures: DbSignature[];
@@ -77,6 +75,7 @@ const TransactionPage = ({
   const [accountError, setAccountError] = useState(null);
   const txInfo: DbTransaction = transactionJSON ? JSON.parse(transactionJSON) : null;
   const router = useRouter();
+  const multisigAddress = router.query.address?.toString();
 
   const addSignature = (signature: DbSignature) => {
     setCurrentSignatures((prevState: DbSignature[]) => [...prevState, signature]);
@@ -101,11 +100,10 @@ const TransactionPage = ({
   );
 
   useEffect(() => {
-    const address = router.query.address?.toString();
-    if (address) {
-      fetchMultisig(address);
+    if (multisigAddress) {
+      fetchMultisig(multisigAddress);
     }
-  }, [fetchMultisig, router.query.address]);
+  }, [fetchMultisig, multisigAddress]);
 
   const broadcastTx = async () => {
     try {
@@ -146,7 +144,7 @@ const TransactionPage = ({
     : false;
 
   return (
-    <Page rootMultisig={multisigAddress}>
+    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig" }}>
       <StackableContainer base>
         <StackableContainer>
           <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>
