diff --git a/frontend/src/components/CloseChannelDialog.tsx b/frontend/src/components/CloseChannelDialog.tsx
new file mode 100644
index 00000000..123dfe0a
--- /dev/null
+++ b/frontend/src/components/CloseChannelDialog.tsx
@@ -0,0 +1,243 @@
+import { AlertTriangleIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import React from "react";
+import ExternalLink from "src/components/ExternalLink";
+import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
+import { Button } from "src/components/ui/button";
+import { Checkbox } from "src/components/ui/checkbox";
+import { toast } from "src/components/ui/use-toast";
+import { useChannels } from "src/hooks/useChannels";
+import { useCSRF } from "src/hooks/useCSRF";
+import { copyToClipboard } from "src/lib/clipboard";
+import { Channel, CloseChannelResponse } from "src/types";
+import { request } from "src/utils/request";
+import {
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+
+type Props = {
+  alias: string;
+  channel: Channel;
+};
+
+export function CloseChannelDialog({ alias, channel }: Props) {
+  const [closeType, setCloseType] = React.useState("normal");
+  const [step, setStep] = React.useState(channel.active ? 2 : 1);
+  const [fundingTxId, setFundingTxId] = React.useState("");
+  const { data: channels, mutate: reloadChannels } = useChannels();
+  const { data: csrf } = useCSRF();
+
+  const onContinue = () => {
+    setStep(step + 1);
+  };
+
+  const copy = (text: string) => {
+    copyToClipboard(text);
+    toast({ title: "Copied to clipboard." });
+  };
+
+  async function closeChannel() {
+    try {
+      if (!csrf) {
+        throw new Error("csrf not loaded");
+      }
+
+      console.info(`🎬 Closing channel with ${channel.remotePubkey}`);
+
+      const closeChannelResponse = await request<CloseChannelResponse>(
+        `/api/peers/${channel.remotePubkey}/channels/${channel.id}?force=${
+          closeType === "force"
+        }`,
+        {
+          method: "DELETE",
+          headers: {
+            "X-CSRF-Token": csrf,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!closeChannelResponse) {
+        throw new Error("Error closing channel");
+      }
+
+      const closedChannel = channels?.find(
+        (c) => c.id === channel.id && c.remotePubkey === channel.remotePubkey
+      );
+      console.info("Closed channel", closedChannel);
+      if (closedChannel) {
+        setFundingTxId(closedChannel.fundingTxId);
+        setStep(step + 1);
+      }
+      toast({ title: "Sucessfully closed channel" });
+    } catch (error) {
+      console.error(error);
+      toast({
+        variant: "destructive",
+        description: "Something went wrong: " + error,
+      });
+    }
+  }
+
+  return (
+    <AlertDialogContent>
+      {step === 1 && (
+        <>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Are you sure you want to close the channel with {alias}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This channel is inactive. Some channels require up to 6 onchain
+              confirmations before they are usable. Proceed only if you still
+              want to continue
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button onClick={onContinue}>Continue</Button>
+          </AlertDialogFooter>
+        </>
+      )}
+
+      {step === 2 && (
+        <>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Are you sure you want to close the channel with {alias}?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-left">
+              <div>
+                <p className="text-primary font-medium">Node ID</p>
+                <p className="break-all">{channel.remotePubkey}</p>
+              </div>
+              <div className="mt-4">
+                <p className="text-primary font-medium">Channel ID</p>
+                <p className="break-all">{channel.id}</p>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button onClick={onContinue}>Continue</Button>
+          </AlertDialogFooter>
+        </>
+      )}
+
+      {step === 3 && (
+        <>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Select mode of channel closure</AlertDialogTitle>
+            <AlertDialogDescription className="text-left">
+              {closeType === "force" && (
+                <Alert className="mb-4">
+                  <AlertTriangleIcon className="h-4 w-4" />
+                  <AlertTitle>Heads up!</AlertTitle>
+                  <AlertDescription>
+                    Your channel balance will be locked for up to two weeks if
+                    you force close
+                  </AlertDescription>
+                </Alert>
+              )}
+              <div className="flex flex-col gap-4 text-xs mt-2">
+                <div className="items-top flex space-x-2">
+                  <Checkbox
+                    id="normal"
+                    onCheckedChange={() =>
+                      setCloseType(closeType === "normal" ? "force" : "normal")
+                    }
+                    checked={closeType === "normal"}
+                  />
+                  <div className="grid gap-1.5 leading-none">
+                    <label
+                      htmlFor="normal"
+                      className="text-primary text-sm font-medium leading-none cursor-pointer"
+                    >
+                      Normal Close
+                    </label>
+                    <p className="text-sm text-muted-foreground">
+                      Closes the channel cooperatively, usually faster and with
+                      lower fees
+                    </p>
+                  </div>
+                </div>
+                <div className="items-top flex space-x-2">
+                  <Checkbox
+                    id="force"
+                    onCheckedChange={() =>
+                      setCloseType(closeType === "force" ? "normal" : "force")
+                    }
+                    checked={closeType === "force"}
+                  />
+                  <div className="grid gap-1.5 leading-none">
+                    <label
+                      htmlFor="force"
+                      className="text-primary text-sm font-medium leading-none cursor-pointer"
+                    >
+                      Force Close
+                    </label>
+                    <p className="text-sm text-muted-foreground">
+                      Closes the channel unilaterally, can take longer and might
+                      incur higher fees
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <ExternalLink
+                to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/faq-alby-hub/how-can-i-close-this-channel-what-happens-to-the-sats-in-this-channel"
+                className="underline flex items-center mt-4"
+              >
+                Learn more about closing channels
+                <ExternalLinkIcon className="w-4 h-4 ml-2" />
+              </ExternalLink>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button onClick={closeChannel}>Close Channel</Button>
+          </AlertDialogFooter>
+        </>
+      )}
+
+      {step === 4 && (
+        <>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Channel closed successfully</AlertDialogTitle>
+            <AlertDialogDescription className="text-left">
+              <p className="text-primary font-medium">Funding Transaction Id</p>
+              <div className="flex items-center justify-between gap-4">
+                <p className="break-all">{fundingTxId}</p>
+                <CopyIcon
+                  className="cursor-pointer text-muted-foreground w-4 h-4"
+                  onClick={() => {
+                    copy(fundingTxId);
+                  }}
+                />
+              </div>
+              <ExternalLink
+                to={`https://mempool.space/tx/${fundingTxId}`}
+                className="underline flex items-center mt-2"
+              >
+                View on Mempool
+                <ExternalLinkIcon className="w-4 h-4 ml-2" />
+              </ExternalLink>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={async () => {
+                await reloadChannels();
+              }}
+            >
+              Done
+            </AlertDialogCancel>
+          </AlertDialogFooter>
+        </>
+      )}
+    </AlertDialogContent>
+  );
+}
diff --git a/frontend/src/components/channels/ChannelsCards.tsx b/frontend/src/components/channels/ChannelsCards.tsx
index 164e13d0..39ac1fad 100644
--- a/frontend/src/components/channels/ChannelsCards.tsx
+++ b/frontend/src/components/channels/ChannelsCards.tsx
@@ -6,7 +6,12 @@ import {
   Trash2,
 } from "lucide-react";
 import { ChannelWarning } from "src/components/channels/ChannelWarning";
+import { CloseChannelDialog } from "src/components/CloseChannelDialog";
 import ExternalLink from "src/components/ExternalLink";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+} from "src/components/ui/alert-dialog";
 import { Badge } from "src/components/ui/badge.tsx";
 import { Button } from "src/components/ui/button.tsx";
 import {
@@ -36,18 +41,12 @@ import { Channel, Node } from "src/types";
 type ChannelsCardsProps = {
   channels?: Channel[];
   nodes?: Node[];
-  closeChannel(
-    channelId: string,
-    counterpartyNodeId: string,
-    isActive: boolean
-  ): void;
   editChannel(channel: Channel): void;
 };
 
 export function ChannelsCards({
   channels,
   nodes,
-  closeChannel,
   editChannel,
 }: ChannelsCardsProps) {
   if (!channels?.length) {
@@ -80,55 +79,51 @@ export function ChannelsCards({
                         <div className="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
                           {alias}
                         </div>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button size="icon" variant="ghost">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
-                              <ExternalLink
-                                to={`https://mempool.space/tx/${channel.fundingTxId}`}
-                                className="w-full flex flex-row items-center gap-2"
-                              >
-                                <ExternalLinkIcon className="w-4 h-4" />
-                                <p>View Funding Transaction</p>
-                              </ExternalLink>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
-                              <ExternalLink
-                                to={`https://amboss.space/node/${channel.remotePubkey}`}
-                                className="w-full flex flex-row items-center gap-2"
-                              >
-                                <ExternalLinkIcon className="w-4 h-4" />
-                                <p>View Node on amboss.space</p>
-                              </ExternalLink>
-                            </DropdownMenuItem>
-                            {channel.public && (
-                              <DropdownMenuItem
-                                className="flex flex-row items-center gap-2 cursor-pointer"
-                                onClick={() => editChannel(channel)}
-                              >
-                                <HandCoins className="h-4 w-4" />
-                                Set Routing Fee
+                        <AlertDialog>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button size="icon" variant="ghost">
+                                <MoreHorizontal className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                <ExternalLink
+                                  to={`https://mempool.space/tx/${channel.fundingTxId}`}
+                                  className="w-full flex flex-row items-center gap-2"
+                                >
+                                  <ExternalLinkIcon className="w-4 h-4" />
+                                  <p>View Funding Transaction</p>
+                                </ExternalLink>
                               </DropdownMenuItem>
-                            )}
-                            <DropdownMenuItem
-                              className="flex flex-row items-center gap-2 cursor-pointer"
-                              onClick={() =>
-                                closeChannel(
-                                  channel.id,
-                                  channel.remotePubkey,
-                                  channel.active
-                                )
-                              }
-                            >
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                              Close Channel
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                              <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                <ExternalLink
+                                  to={`https://amboss.space/node/${channel.remotePubkey}`}
+                                  className="w-full flex flex-row items-center gap-2"
+                                >
+                                  <ExternalLinkIcon className="w-4 h-4" />
+                                  <p>View Node on amboss.space</p>
+                                </ExternalLink>
+                              </DropdownMenuItem>
+                              {channel.public && (
+                                <DropdownMenuItem
+                                  className="flex flex-row items-center gap-2 cursor-pointer"
+                                  onClick={() => editChannel(channel)}
+                                >
+                                  <HandCoins className="h-4 w-4" />
+                                  Set Routing Fee
+                                </DropdownMenuItem>
+                              )}
+                              <AlertDialogTrigger asChild>
+                                <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                  Close Channel
+                                </DropdownMenuItem>
+                              </AlertDialogTrigger>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                          <CloseChannelDialog alias={alias} channel={channel} />
+                        </AlertDialog>
                       </div>
                     </CardTitle>
                     <Separator className="mt-5" />
diff --git a/frontend/src/components/channels/ChannelsTable.tsx b/frontend/src/components/channels/ChannelsTable.tsx
index aaf9cec2..93b83ec8 100644
--- a/frontend/src/components/channels/ChannelsTable.tsx
+++ b/frontend/src/components/channels/ChannelsTable.tsx
@@ -6,8 +6,13 @@ import {
   Trash2,
 } from "lucide-react";
 import { ChannelWarning } from "src/components/channels/ChannelWarning";
+import { CloseChannelDialog } from "src/components/CloseChannelDialog";
 import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading.tsx";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+} from "src/components/ui/alert-dialog";
 import { Badge } from "src/components/ui/badge.tsx";
 import { Button } from "src/components/ui/button.tsx";
 import {
@@ -37,18 +42,12 @@ import { Channel, Node } from "src/types";
 type ChannelsTableProps = {
   channels?: Channel[];
   nodes?: Node[];
-  closeChannel(
-    channelId: string,
-    counterpartyNodeId: string,
-    isActive: boolean
-  ): void;
   editChannel(channel: Channel): void;
 };
 
 export function ChannelsTable({
   channels,
   nodes,
-  closeChannel,
   editChannel,
 }: ChannelsTableProps) {
   if (channels && !channels.length) {
@@ -176,55 +175,51 @@ export function ChannelsTable({
                         <ChannelWarning channel={channel} />
                       </TableCell>
                       <TableCell>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button size="icon" variant="ghost">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
-                              <ExternalLink
-                                to={`https://mempool.space/tx/${channel.fundingTxId}`}
-                                className="w-full flex flex-row items-center gap-2"
-                              >
-                                <ExternalLinkIcon className="w-4 h-4" />
-                                <p>View Funding Transaction</p>
-                              </ExternalLink>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
-                              <ExternalLink
-                                to={`https://amboss.space/node/${channel.remotePubkey}`}
-                                className="w-full flex flex-row items-center gap-2"
-                              >
-                                <ExternalLinkIcon className="w-4 h-4" />
-                                <p>View Node on amboss.space</p>
-                              </ExternalLink>
-                            </DropdownMenuItem>
-                            {channel.public && (
-                              <DropdownMenuItem
-                                className="flex flex-row items-center gap-2 cursor-pointer"
-                                onClick={() => editChannel(channel)}
-                              >
-                                <HandCoins className="h-4 w-4" />
-                                Set Routing Fee
+                        <AlertDialog>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button size="icon" variant="ghost">
+                                <MoreHorizontal className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                <ExternalLink
+                                  to={`https://mempool.space/tx/${channel.fundingTxId}`}
+                                  className="w-full flex flex-row items-center gap-2"
+                                >
+                                  <ExternalLinkIcon className="w-4 h-4" />
+                                  <p>View Funding Transaction</p>
+                                </ExternalLink>
                               </DropdownMenuItem>
-                            )}
-                            <DropdownMenuItem
-                              className="flex flex-row items-center gap-2 cursor-pointer"
-                              onClick={() =>
-                                closeChannel(
-                                  channel.id,
-                                  channel.remotePubkey,
-                                  channel.active
-                                )
-                              }
-                            >
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                              Close Channel
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                              <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                <ExternalLink
+                                  to={`https://amboss.space/node/${channel.remotePubkey}`}
+                                  className="w-full flex flex-row items-center gap-2"
+                                >
+                                  <ExternalLinkIcon className="w-4 h-4" />
+                                  <p>View Node on amboss.space</p>
+                                </ExternalLink>
+                              </DropdownMenuItem>
+                              {channel.public && (
+                                <DropdownMenuItem
+                                  className="flex flex-row items-center gap-2 cursor-pointer"
+                                  onClick={() => editChannel(channel)}
+                                >
+                                  <HandCoins className="h-4 w-4" />
+                                  Set Routing Fee
+                                </DropdownMenuItem>
+                              )}
+                              <AlertDialogTrigger asChild>
+                                <DropdownMenuItem className="flex flex-row items-center gap-2 cursor-pointer">
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                  Close Channel
+                                </DropdownMenuItem>
+                              </AlertDialogTrigger>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                          <CloseChannelDialog alias={alias} channel={channel} />
+                        </AlertDialog>
                       </TableCell>
                     </TableRow>
                   );
diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx
index 4b180b19..fe77bb31 100644
--- a/frontend/src/screens/channels/Channels.tsx
+++ b/frontend/src/screens/channels/Channels.tsx
@@ -63,12 +63,7 @@ import { useRedeemOnchainFunds } from "src/hooks/useRedeemOnchainFunds.ts";
 import { useSyncWallet } from "src/hooks/useSyncWallet.ts";
 import { copyToClipboard } from "src/lib/clipboard.ts";
 import { cn } from "src/lib/utils.ts";
-import {
-  Channel,
-  CloseChannelResponse,
-  Node,
-  UpdateChannelRequest,
-} from "src/types";
+import { Channel, Node, UpdateChannelRequest } from "src/types";
 import { request } from "src/utils/request";
 import { useCSRF } from "../../hooks/useCSRF.ts";
 
@@ -114,85 +109,6 @@ export default function Channels() {
     loadNodeStats();
   }, [loadNodeStats]);
 
-  async function closeChannel(
-    channelId: string,
-    nodeId: string,
-    isActive: boolean
-  ) {
-    try {
-      if (!csrf) {
-        throw new Error("csrf not loaded");
-      }
-      if (!isActive) {
-        if (
-          !confirm(
-            `This channel is inactive. Some channels require up to 6 onchain confirmations before they are usable. If you really want to continue, click OK.`
-          )
-        ) {
-          return;
-        }
-      }
-
-      if (
-        !confirm(
-          `Are you sure you want to close the channel with ${
-            nodes.find((node) => node.public_key === nodeId)?.alias ||
-            "Unknown Node"
-          }?\n\nNode ID: ${nodeId}\n\nChannel ID: ${channelId}`
-        )
-      ) {
-        return;
-      }
-
-      const closeType = prompt(
-        "Select way to close the channel. Type 'force close' if you want to force close the channel. Note: your channel balance will be locked for up to two weeks if you force close.",
-        "normal close"
-      );
-      if (!closeType) {
-        console.error("Cancelled close channel");
-        return;
-      }
-
-      console.info(`🎬 Closing channel with ${nodeId}`);
-
-      const closeChannelResponse = await request<CloseChannelResponse>(
-        `/api/peers/${nodeId}/channels/${channelId}?force=${
-          closeType === "force close"
-        }`,
-        {
-          method: "DELETE",
-          headers: {
-            "X-CSRF-Token": csrf,
-            "Content-Type": "application/json",
-          },
-        }
-      );
-
-      if (!closeChannelResponse) {
-        throw new Error("Error closing channel");
-      }
-
-      const closedChannel = channels?.find(
-        (c) => c.id === channelId && c.remotePubkey === nodeId
-      );
-      console.info("Closed channel", closedChannel);
-      if (closedChannel) {
-        prompt(
-          "Closed channel. Copy channel funding TX to view on mempool",
-          closedChannel.fundingTxId
-        );
-      }
-      await reloadChannels();
-      toast({ title: "Sucessfully closed channel" });
-    } catch (error) {
-      console.error(error);
-      toast({
-        variant: "destructive",
-        description: "Something went wrong: " + error,
-      });
-    }
-  }
-
   async function editChannel(channel: Channel) {
     try {
       if (!csrf) {
@@ -651,14 +567,12 @@ export default function Channels() {
         <ChannelsTable
           channels={channels}
           nodes={nodes}
-          closeChannel={closeChannel}
           editChannel={editChannel}
         />
       ) : (
         <ChannelsCards
           channels={channels}
           nodes={nodes}
-          closeChannel={closeChannel}
           editChannel={editChannel}
         />
       )}