diff --git a/frontend/app/panda.config.ts b/frontend/app/panda.config.ts
index db9c51f50..0a859b5c6 100644
--- a/frontend/app/panda.config.ts
+++ b/frontend/app/panda.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
   globalCss: defineGlobalStyles({
     "html, body": {
       height: "100%",
-      minWidth: 960,
+      minWidth: 960 + 48,
       lineHeight: 1.5,
       fontSize: 16,
       fontWeight: 500,
diff --git a/frontend/app/src/comps/TopBar/AccountButton.tsx b/frontend/app/src/comps/AppLayout/AccountButton.tsx
similarity index 100%
rename from frontend/app/src/comps/TopBar/AccountButton.tsx
rename to frontend/app/src/comps/AppLayout/AccountButton.tsx
diff --git a/frontend/app/src/comps/AppLayout/AppLayout.tsx b/frontend/app/src/comps/AppLayout/AppLayout.tsx
index 93925e757..bd7a3768c 100644
--- a/frontend/app/src/comps/AppLayout/AppLayout.tsx
+++ b/frontend/app/src/comps/AppLayout/AppLayout.tsx
@@ -3,15 +3,13 @@
 import type { ReactNode } from "react";
 
 import { Banner } from "@/Banner";
-import { useAbout } from "@/src/comps/About/About";
-import { ProtocolStats } from "@/src/comps/ProtocolStats/ProtocolStats";
-import { TopBar } from "@/src/comps/TopBar/TopBar";
 import { css } from "@/styled-system/css";
-import { AnchorTextButton, TextButton } from "@liquity2/uikit";
+import { AnchorTextButton } from "@liquity2/uikit";
 import Link from "next/link";
+import { BottomBar } from "./BottomBar";
+import { TopBar } from "./TopBar";
 
 export const LAYOUT_WIDTH = 1092;
-export const MIN_WIDTH = 960;
 
 export function AppLayout({
   children,
@@ -30,6 +28,9 @@ export function AppLayout({
     >
       <div
         className={css({
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
           width: "100%",
         })}
       >
@@ -40,23 +41,15 @@ export function AppLayout({
         className={css({
           display: "grid",
           gridTemplateRows: "auto 1fr auto",
-          minWidth: 960,
-          maxWidth: 1092,
+          gap: 48,
+          maxWidth: `calc(${LAYOUT_WIDTH}px + 48px)`,
           margin: "0 auto",
           width: "100%",
         })}
       >
+        <TopBar />
         <div
           className={css({
-            width: "100%",
-            paddingBottom: 48,
-          })}
-        >
-          <TopBar />
-        </div>
-        <div
-          className={css({
-            flexDirection: "column",
             width: "100%",
             minHeight: 0,
             padding: "0 24px",
@@ -64,48 +57,12 @@ export function AppLayout({
         >
           {children}
         </div>
-        <div
-          className={css({
-            width: "100%",
-            padding: "48px 24px 0",
-          })}
-        >
-          <BuildInfo />
-          <ProtocolStats />
-        </div>
+        <BottomBar />
       </div>
     </div>
   );
 }
 
-function BuildInfo() {
-  const about = useAbout();
-  return (
-    <div
-      className={css({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        height: 40,
-      })}
-    >
-      <TextButton
-        label={about.fullVersion}
-        title={`About Liquity V2 App ${about.fullVersion}`}
-        onClick={() => {
-          about.openModal();
-        }}
-        className={css({
-          color: "dimmed",
-        })}
-        style={{
-          fontSize: 12,
-        }}
-      />
-    </div>
-  );
-}
-
 function EarnRiskBanner() {
   return (
     <div
diff --git a/frontend/app/src/comps/AppLayout/BottomBar.tsx b/frontend/app/src/comps/AppLayout/BottomBar.tsx
new file mode 100644
index 000000000..f6ac861c2
--- /dev/null
+++ b/frontend/app/src/comps/AppLayout/BottomBar.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import type { TokenSymbol } from "@/src/types";
+
+import { useAbout } from "@/src/comps/About/About";
+import { Amount } from "@/src/comps/Amount/Amount";
+import { Logo } from "@/src/comps/Logo/Logo";
+import { ACCOUNT_SCREEN } from "@/src/env";
+import { useLiquityStats } from "@/src/liquity-utils";
+import { useAccount } from "@/src/services/Ethereum";
+import { usePrice } from "@/src/services/Prices";
+import { css } from "@/styled-system/css";
+import { AnchorTextButton, HFlex, shortenAddress, TextButton, TokenIcon } from "@liquity2/uikit";
+import { blo } from "blo";
+import Image from "next/image";
+import Link from "next/link";
+
+const DISPLAYED_PRICES = ["LQTY", "BOLD", "ETH"] as const;
+
+export function BottomBar() {
+  const account = useAccount();
+  const stats = useLiquityStats();
+
+  const tvl = stats.data?.totalValueLocked;
+
+  return (
+    <div
+      className={css({
+        width: "100%",
+        padding: "0 24px",
+      })}
+    >
+      <BuildInfo />
+      <div
+        className={css({
+          display: "flex",
+          width: "100%",
+        })}
+      >
+        <div
+          className={css({
+            display: "flex",
+            justifyContent: "space-between",
+            width: "100%",
+            height: 48,
+            fontSize: 12,
+            borderTop: "1px solid token(colors.tableBorder)",
+            userSelect: "none",
+          })}
+        >
+          <HFlex gap={4} alignItems="center">
+            <Logo size={16} />
+            <span>TVL</span>{" "}
+            <span>
+              {tvl && (
+                <Amount
+                  fallback="…"
+                  format="compact"
+                  prefix="$"
+                  value={tvl}
+                />
+              )}
+            </span>
+          </HFlex>
+          <HFlex gap={16}>
+            {DISPLAYED_PRICES.map((symbol) => (
+              <Price
+                key={symbol}
+                symbol={symbol}
+              />
+            ))}
+            {account.address && ACCOUNT_SCREEN && (
+              <Link
+                id="footer-account-button"
+                href={`/account?address=${account.address}`}
+                passHref
+                legacyBehavior
+                scroll={true}
+              >
+                <AnchorTextButton
+                  label={
+                    <HFlex gap={4} alignItems="center">
+                      <Image
+                        alt=""
+                        width={16}
+                        height={16}
+                        src={blo(account.address)}
+                        className={css({
+                          borderRadius: "50%",
+                        })}
+                      />
+
+                      {shortenAddress(account.address, 3)}
+                    </HFlex>
+                  }
+                  className={css({
+                    color: "content",
+                    borderRadius: 4,
+                    _focusVisible: {
+                      outline: "2px solid token(colors.focused)",
+                    },
+                    _active: {
+                      translate: "0 1px",
+                    },
+                  })}
+                />
+              </Link>
+            )}
+            <Link
+              id="footer-redeem-button"
+              href="/redeem"
+              passHref
+              legacyBehavior
+              scroll={true}
+            >
+              <AnchorTextButton
+                label={
+                  <HFlex gap={4} alignItems="center">
+                    <TokenIcon
+                      size={16}
+                      symbol="BOLD"
+                    />
+                    Redeem BOLD
+                  </HFlex>
+                }
+                className={css({
+                  color: "content",
+                  borderRadius: 4,
+                  _focusVisible: {
+                    outline: "2px solid token(colors.focused)",
+                  },
+                  _active: {
+                    translate: "0 1px",
+                  },
+                })}
+              />
+            </Link>
+          </HFlex>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Price({ symbol }: { symbol: TokenSymbol }) {
+  const price = usePrice(symbol);
+  return (
+    <HFlex
+      key={symbol}
+      gap={4}
+    >
+      <TokenIcon
+        size={16}
+        symbol={symbol}
+      />
+      <HFlex gap={8}>
+        <span>{symbol}</span>
+        <Amount
+          prefix="$"
+          fallback="…"
+          value={price.data}
+          format="2z"
+        />
+      </HFlex>
+    </HFlex>
+  );
+}
+
+function BuildInfo() {
+  const about = useAbout();
+  return (
+    <div
+      className={css({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        height: 40,
+      })}
+    >
+      <TextButton
+        label={about.fullVersion}
+        title={`About Liquity V2 App ${about.fullVersion}`}
+        onClick={() => {
+          about.openModal();
+        }}
+        className={css({
+          color: "dimmed",
+        })}
+        style={{
+          fontSize: 12,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/src/comps/TopBar/Menu.tsx b/frontend/app/src/comps/AppLayout/Menu.tsx
similarity index 100%
rename from frontend/app/src/comps/TopBar/Menu.tsx
rename to frontend/app/src/comps/AppLayout/Menu.tsx
diff --git a/frontend/app/src/comps/TopBar/MenuDrawer.tsx b/frontend/app/src/comps/AppLayout/MenuDrawer.tsx
similarity index 100%
rename from frontend/app/src/comps/TopBar/MenuDrawer.tsx
rename to frontend/app/src/comps/AppLayout/MenuDrawer.tsx
diff --git a/frontend/app/src/comps/TopBar/MenuItem.tsx b/frontend/app/src/comps/AppLayout/MenuItem.tsx
similarity index 100%
rename from frontend/app/src/comps/TopBar/MenuItem.tsx
rename to frontend/app/src/comps/AppLayout/MenuItem.tsx
diff --git a/frontend/app/src/comps/TopBar/TopBar.tsx b/frontend/app/src/comps/AppLayout/TopBar.tsx
similarity index 100%
rename from frontend/app/src/comps/TopBar/TopBar.tsx
rename to frontend/app/src/comps/AppLayout/TopBar.tsx
diff --git a/frontend/app/src/comps/ProtocolStats/ProtocolStats.tsx b/frontend/app/src/comps/ProtocolStats/ProtocolStats.tsx
deleted file mode 100644
index 0cb706cf9..000000000
--- a/frontend/app/src/comps/ProtocolStats/ProtocolStats.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-"use client";
-
-import type { TokenSymbol } from "@/src/types";
-
-import { Amount } from "@/src/comps/Amount/Amount";
-import { Logo } from "@/src/comps/Logo/Logo";
-import { ACCOUNT_SCREEN } from "@/src/env";
-import { useLiquityStats } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
-import { usePrice } from "@/src/services/Prices";
-import { css } from "@/styled-system/css";
-import { AnchorTextButton, HFlex, shortenAddress, TokenIcon } from "@liquity2/uikit";
-import { blo } from "blo";
-import Image from "next/image";
-import Link from "next/link";
-
-const DISPLAYED_PRICES = ["LQTY", "BOLD", "ETH"] as const;
-
-export function ProtocolStats() {
-  const account = useAccount();
-  const stats = useLiquityStats();
-
-  const tvl = stats.data?.totalValueLocked;
-
-  return (
-    <div
-      className={css({
-        display: "flex",
-        width: "100%",
-      })}
-    >
-      <div
-        className={css({
-          display: "flex",
-          justifyContent: "space-between",
-          width: "100%",
-          height: 48,
-          fontSize: 12,
-          borderTop: "1px solid token(colors.tableBorder)",
-          userSelect: "none",
-        })}
-      >
-        <HFlex gap={4} alignItems="center">
-          <Logo size={16} />
-          <span>TVL</span>{" "}
-          <span>
-            {tvl && (
-              <Amount
-                fallback="…"
-                format="compact"
-                prefix="$"
-                value={tvl}
-              />
-            )}
-          </span>
-        </HFlex>
-        <HFlex gap={16}>
-          {DISPLAYED_PRICES.map((symbol) => (
-            <Price
-              key={symbol}
-              symbol={symbol}
-            />
-          ))}
-          {account.address && ACCOUNT_SCREEN && (
-            <Link
-              id="footer-account-button"
-              href={`/account?address=${account.address}`}
-              passHref
-              legacyBehavior
-              scroll={true}
-            >
-              <AnchorTextButton
-                label={
-                  <HFlex gap={4} alignItems="center">
-                    <Image
-                      alt=""
-                      width={16}
-                      height={16}
-                      src={blo(account.address)}
-                      className={css({
-                        borderRadius: "50%",
-                      })}
-                    />
-
-                    {shortenAddress(account.address, 3)}
-                  </HFlex>
-                }
-                className={css({
-                  color: "content",
-                  borderRadius: 4,
-                  _focusVisible: {
-                    outline: "2px solid token(colors.focused)",
-                  },
-                  _active: {
-                    translate: "0 1px",
-                  },
-                })}
-              />
-            </Link>
-          )}
-          <Link
-            id="footer-redeem-button"
-            href="/redeem"
-            passHref
-            legacyBehavior
-            scroll={true}
-          >
-            <AnchorTextButton
-              label={
-                <HFlex gap={4} alignItems="center">
-                  <TokenIcon
-                    size={16}
-                    symbol="BOLD"
-                  />
-                  Redeem BOLD
-                </HFlex>
-              }
-              className={css({
-                color: "content",
-                borderRadius: 4,
-                _focusVisible: {
-                  outline: "2px solid token(colors.focused)",
-                },
-                _active: {
-                  translate: "0 1px",
-                },
-              })}
-            />
-          </Link>
-        </HFlex>
-      </div>
-    </div>
-  );
-}
-
-function Price({ symbol }: { symbol: TokenSymbol }) {
-  const price = usePrice(symbol);
-  return (
-    <HFlex
-      key={symbol}
-      gap={4}
-    >
-      <TokenIcon
-        size={16}
-        symbol={symbol}
-      />
-      <HFlex gap={8}>
-        <span>{symbol}</span>
-        <Amount
-          prefix="$"
-          fallback="…"
-          value={price.data}
-          format="2z"
-        />
-      </HFlex>
-    </HFlex>
-  );
-}
diff --git a/frontend/uikit/src/Modal/Modal.tsx b/frontend/uikit/src/Modal/Modal.tsx
index f7300b510..4cd477624 100644
--- a/frontend/uikit/src/Modal/Modal.tsx
+++ b/frontend/uikit/src/Modal/Modal.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 
 import { a, useTransition } from "@react-spring/web";
 import FocusTrap from "focus-trap-react";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { css } from "../../styled-system/css";
 import { IconCross } from "../icons";
 import { Root } from "../Root/Root";