From 68d8fc3987c4f97c8b0c1554b000e73b6f9a6801 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 2 Mar 2026 07:47:24 -0600
Subject: [PATCH] add back button

---
 web/src/pages/Replay.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Replay.tsx b/web/src/pages/Replay.tsx
index c1c50f56d..187a9a76b 100644
--- a/web/src/pages/Replay.tsx
+++ b/web/src/pages/Replay.tsx
@@ -53,6 +53,7 @@ import Logo from "@/components/Logo";
 import { Separator } from "@/components/ui/separator";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import DebugDrawingLayer from "@/components/overlay/DebugDrawingLayer";
+import { IoMdArrowRoundBack } from "react-icons/io";
 
 type DebugReplayStatus = {
   active: boolean;
@@ -258,10 +259,23 @@ export default function Replay() {
       <Toaster position="top-center" closeButton={true} />
 
       {/* Top bar */}
-      <div className="flex min-h-12 items-end justify-end border-b border-secondary px-2 py-2 md:min-h-16 md:px-3 md:py-3">
+      <div className="flex min-h-12 items-center justify-between border-b border-secondary px-2 py-2 md:min-h-16 md:px-3 md:py-3">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
         )}
+        <Button
+          className="flex items-center gap-2.5 rounded-lg"
+          aria-label={t("label.back", { ns: "common" })}
+          size="sm"
+          onClick={() => navigate(-1)}
+        >
+          <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+          {isDesktop && (
+            <div className="text-primary">
+              {t("button.back", { ns: "common" })}
+            </div>
+          )}
+        </Button>
         <div className="flex items-center gap-2">
           <Button
             variant="outline"