diff --git a/web/src/components/overlay/DebugReplayDialog.tsx b/web/src/components/overlay/DebugReplayDialog.tsx
index 9c3efb4f5..2a9e09d08 100644
--- a/web/src/components/overlay/DebugReplayDialog.tsx
+++ b/web/src/components/overlay/DebugReplayDialog.tsx
@@ -113,18 +113,19 @@ export function DebugReplayContent({
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
 
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+        <Button
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         <Button
           className={isDesktop ? "" : "w-full"}
           variant="select"
-          size="sm"
           disabled={isStarting}
           onClick={() => {
             if (selectedOption === "timeline") {
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index f17b5a9c0..eeec65f96 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -1043,20 +1043,21 @@ export function ExportContent({
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+        <Button
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         {activeTab === "export" ? (
           <Button
             className={isDesktop ? "" : "w-full"}
             aria-label={t("export.selectOrExport")}
             variant="select"
-            size="sm"
             disabled={isStartingExport}
             onClick={async () => {
               if (selectedOption == "timeline") {
diff --git a/web/src/components/overlay/ShareTimestampDialog.tsx b/web/src/components/overlay/ShareTimestampDialog.tsx
index 120e67269..234579819 100644
--- a/web/src/components/overlay/ShareTimestampDialog.tsx
+++ b/web/src/components/overlay/ShareTimestampDialog.tsx
@@ -197,24 +197,21 @@ export function ShareTimestampContent({
       {isDesktop && <Separator className="my-4 bg-secondary" />}
 
       <DialogFooter
-        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-4")}
+        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
       >
         {onCancel && (
-          <button
-            type="button"
-            className={cn(
-              "cursor-pointer p-2 text-center",
-              !isDesktop && "w-full",
-            )}
+          <Button
+            className={cn(!isDesktop && "w-full")}
+            aria-label={t("button.cancel", { ns: "common" })}
+            variant="outline"
             onClick={onCancel}
           >
             {t("button.cancel", { ns: "common" })}
-          </button>
+          </Button>
         )}
         <Button
           className={cn(!isDesktop && "w-full")}
           variant="select"
-          size="sm"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
           {t("recording.shareTimestamp.button", { ns: "components/dialog" })}