diff --git a/app/components/SubscriptionCancelModal.tsx b/app/components/SubscriptionCancelModal.tsx
new file mode 100644
index 00000000..12cea77e
--- /dev/null
+++ b/app/components/SubscriptionCancelModal.tsx
@@ -0,0 +1,54 @@
+import { useNavigate } from "@remix-run/react";
+
+import { Button } from "~/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+
+interface SubscriptionCancelModalProperties {
+  children: React.ReactNode;
+  onReactivateSubscription?: () => void;
+}
+
+export default function SubscriptionCancelModal({
+  children,
+  onReactivateSubscription,
+}: SubscriptionCancelModalProperties) {
+  const navigate = useNavigate();
+
+  const onGoToDashboard = () => {
+    navigate("/dashboard");
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{children}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Subscription canceled</DialogTitle>
+          <DialogDescription>
+            Your subscription has been successfully canceled. If you change your
+            mind, you can reactivate your subscription anytime
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onReactivateSubscription}>
+            Reactivate Subscription
+          </Button>
+          <Button type="submit" onClick={onGoToDashboard}>
+            Go to Dashboard
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}