diff --git a/app/src/components/MigrateTempFlowchartsModal.tsx b/app/src/components/MigrateTempFlowchartsModal.tsx
deleted file mode 100644
index dda1c52fb..000000000
--- a/app/src/components/MigrateTempFlowchartsModal.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { Close, Content, Overlay } from "../ui/Dialog";
-import { Trans } from "@lingui/macro";
-import { Button2 } from "../ui/Shared";
-import { getTemporaryCharts } from "../lib/getTemporaryCharts";
-import { ReactNode, useState } from "react";
-import * as Progress from "@radix-ui/react-progress";
-import { makeChart } from "../lib/queries";
-import { titleToLocalStorageKey } from "../lib/helpers";
-import { useSession } from "./AppContextProvider";
-import { getDefaultChart } from "../lib/getDefaultChart";
-
-/**
- * A modal to handle migrating temporary flowcharts into hosted ones
- */
-export function MigrateTempFlowchartsModal({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const [numCharts] = useState(() => getTemporaryCharts().length);
-  const [isMigrating, setIsMigrating] = useState(false);
-  const [migrated, setMigrated] = useState(0);
-  const userId = useSession()?.user.id;
-  if (!userId) return null;
-  return (
-    <Dialog.Root open={isMigrating ? true : undefined}>
-      <Dialog.Trigger>{children}</Dialog.Trigger>
-      <Dialog.Portal>
-        <Overlay />
-        <Content maxWidthClass="w-full max-w-md p-6">
-          <Dialog.Title className="text-xl mb-2 mt-3 font-bold text-center">
-            <Trans>Migrate Flowcharts</Trans>
-          </Dialog.Title>
-          <Trans>
-            <p className="leading-6 text-neutral-600 dark:text-neutral-400">
-              Click the button below to migrate all of your temporary flowcharts
-              into hosted ones.
-            </p>
-            <p className="leading-6 text-neutral-600 dark:text-neutral-400">
-              Do not close this window. The page will refresh when the migration
-              is complete.
-            </p>
-          </Trans>
-          <Button2
-            color="blue"
-            className="mt-4"
-            isLoading={isMigrating}
-            onClick={() => {
-              setIsMigrating(true);
-              migrateTemporaryFlowcharts(setMigrated, userId);
-            }}
-          >
-            <Trans>Start Migration</Trans>
-          </Button2>
-          <p className="mt-4 text-center font-mono text-neutral-600 dark:text-neutral-400 text-xs">
-            {migrated} / {numCharts}
-          </p>
-          <Progress.Root
-            className="relative overflow-hidden rounded-full w-full h-2 bg-neutral-300 dark:bg-neutral-700"
-            style={{
-              // Fix overflow clipping in Safari
-              // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
-              transform: "translateZ(0)",
-            }}
-          >
-            <Progress.Indicator
-              className="w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)] bg-blue-500 dark:bg-neutral-400 animate-pulse"
-              style={{
-                transform: `translateX(-${
-                  100 - (migrated / numCharts) * 100
-                }%)`,
-              }}
-            />
-          </Progress.Root>
-          {isMigrating ? null : <Close />}
-        </Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
-
-async function migrateTemporaryFlowcharts(
-  setMigrated: (n: number) => void,
-  userId: string
-) {
-  const temporaryCharts = getTemporaryCharts();
-
-  let i = 0;
-  for (const key of temporaryCharts) {
-    const name = key ? key : "flowchart.fun";
-    const localStorageKey = titleToLocalStorageKey(key);
-    const chart = localStorage.getItem(localStorageKey);
-
-    if (chart) {
-      const response = await makeChart({
-        name,
-        chart,
-        user_id: userId,
-      });
-
-      if (!response || response.error) {
-        // don't delete the temporary chart
-        continue;
-      }
-
-      // delete the temporary chart, unless it's the default one, in which case, reset it
-      if (key) {
-        localStorage.removeItem(localStorageKey);
-      } else {
-        localStorage.setItem(localStorageKey, getDefaultChart());
-      }
-    }
-
-    setMigrated(++i);
-  }
-
-  // refresh the page
-  window.location.reload();
-}
diff --git a/app/src/components/PaymentStepper.tsx b/app/src/components/PaymentStepper.tsx
deleted file mode 100644
index 02b10b96c..000000000
--- a/app/src/components/PaymentStepper.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { t, Trans } from "@lingui/macro";
-import { useStripe } from "@stripe/react-stripe-js";
-import {
-  StripeElements,
-  StripeElementsOptionsClientSecret,
-} from "@stripe/stripe-js";
-import { ArrowRight, RocketLaunch, WarningCircle } from "phosphor-react";
-import { useEffect, useRef, useState } from "react";
-import { useQuery } from "react-query";
-
-import { useLightOrDarkMode, useSession } from "../lib/hooks";
-import { Button2 } from "../ui/Shared";
-import { Warning } from "./Warning";
-import { sendLoopsEvent } from "../lib/sendLoopsEvent";
-import { PlanButton } from "./PlanButton";
-import { PaymentStepperTitle } from "./PaymentStepperTitle";
-
-/**
- * This component allows the user to select a plan,
- * enter their email if they are not logged in,
- * and enter their payment information.
- */
-export function PaymentStepper() {
-  const session = useSession();
-  const sessionEmail = session?.user?.email;
-  const [plan, setPlan] = useState<null | "yearly" | "monthly">(() => {
-    return window.location.hash === "#annually" ? "yearly" : null;
-  });
-  const [confirmPlan, setConfirmPlan] = useState(false);
-
-  const [email, setEmail] = useState("");
-  const [confirmEmail, setConfirmEmail] = useState(false);
-
-  const subscriptionDetails = useQuery(
-    ["subscriptionDetails", email, plan],
-    () => plan && getSubscriptionDetails(email, plan),
-    {
-      enabled: Boolean(confirmEmail && plan && email),
-      retry: false,
-      onError: () => {
-        setConfirmEmail(false);
-      },
-    }
-  );
-  const [parent] = useAutoAnimate();
-
-  /**
-   * watch the session email and if the user is logged in auto-fill this step!
-   */
-  useEffect(() => {
-    if (sessionEmail) {
-      setEmail(sessionEmail);
-      setConfirmEmail(true);
-    }
-  }, [sessionEmail]);
-
-  let step = "one";
-  if (confirmPlan) step = "two";
-  if (
-    confirmPlan &&
-    subscriptionDetails.data?.subscriptionId &&
-    subscriptionDetails.data?.clientSecret
-  )
-    step = "three";
-
-  return (
-    <div className={"z-10 overflow-hidden p-4 w-full"}>
-      <div className={"grid gap-6 max-w-3xl mx-auto"} ref={parent}>
-        {step === "one" && (
-          <div className="h-full grid gap-4">
-            <PaymentStepperTitle>
-              <Trans>Choose a Plan</Trans>
-            </PaymentStepperTitle>
-            <div className="w-full grid grid-rows-2 gap-2">
-              <PlanButton
-                aria-current={plan === "monthly" ? "true" : "false"}
-                aria-pressed={plan === "monthly" ? "true" : "false"}
-                onClick={() => {
-                  setPlan("monthly");
-                }}
-                className="mr-2 aria-[current=true]:text-blue-500"
-                title={t`Monthly`}
-                price={t`$3 per month`}
-                data-testid="monthly-plan-button"
-              />
-              <PlanButton
-                aria-current={plan === "yearly" ? "true" : "false"}
-                aria-pressed={plan === "yearly" ? "true" : "false"}
-                onClick={() => {
-                  setPlan("yearly");
-                }}
-                className="aria-[current=true]:text-blue-500"
-                title={t`Yearly`}
-                price={t`$30 per year`}
-                data-testid="yearly-plan-button"
-                extra={
-                  <span className="!text-[14px] uppercase bg-yellow-300 py-2 px-3 text-neutral-900 rounded font-bold absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[22px] transform whitespace-nowrap transition-transform group-aria-pressed:scale-[1.1] group-aria-pressed:translate-y-[18px] group-aria-pressed:rotate-[3deg]">
-                    <Trans>Save 16%</Trans>
-                  </span>
-                }
-              />
-            </div>
-            <Button2
-              onClick={() => setConfirmPlan(true)}
-              disabled={plan === null}
-              className="mt-8 disabled:!opacity-100 !py-4 font-bold"
-              rightIcon={<ArrowRight size={16} />}
-              color="blue"
-            >
-              <Trans>Continue</Trans>
-            </Button2>
-          </div>
-        )}
-        {step === "two" && (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              const email = new FormData(e.target as HTMLFormElement).get(
-                "email"
-              ) as string;
-              setEmail(email);
-              setConfirmEmail(true);
-            }}
-            autoComplete="false"
-            className="grid gap-4"
-          >
-            <PaymentStepperTitle>
-              <Trans>Enter your email</Trans>
-            </PaymentStepperTitle>
-            <div className="grid gap-4">
-              <Description>
-                {t`Make sure you use the same email you will use to log in.`}
-              </Description>
-              <input
-                type="email"
-                name="email"
-                data-testid="email-input"
-                className="border border-neutral-400 font-mono rounded p-4 w-full justify-self-center focus:outline-none focus:border-blue-500 dark:border-neutral-700 dark:focus:border-blue-500 dark:bg-neutral-800/50 dark:text-neutral-50"
-                autoComplete="off"
-                required
-              />
-            </div>
-            <Button2
-              disabled={subscriptionDetails.isLoading}
-              className="mt-4 font-bold !py-4"
-              rightIcon={<ArrowRight size={16} />}
-              color="blue"
-              isLoading={subscriptionDetails.isLoading}
-            >
-              <Trans>Continue</Trans>
-            </Button2>
-            {subscriptionDetails.error ? (
-              <div className="justify-self-center">
-                <Warning>
-                  {(subscriptionDetails.error as Error).message}
-                </Warning>
-              </div>
-            ) : null}
-          </form>
-        )}
-        {step === "three" && (
-          <div className="grid gap-4">
-            <PaymentStepperTitle>{t`Activate your Account`}</PaymentStepperTitle>
-            <PaymentForm
-              email={email}
-              clientSecret={subscriptionDetails.data?.clientSecret || ""}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function PaymentForm({
-  clientSecret,
-  email,
-}: {
-  clientSecret: string;
-  email: string;
-}) {
-  const stripe = useStripe();
-  const elements = useRef<StripeElements | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<null | string>(null);
-  const mode = useLightOrDarkMode();
-  const session = useSession();
-
-  useEffect(() => {
-    if (!stripe) return;
-    const options: StripeElementsOptionsClientSecret = {
-      clientSecret,
-      appearance: {
-        theme: mode === "dark" ? "night" : undefined,
-        variables: {
-          colorPrimary: "#5c6fff",
-          colorPrimaryText: "#ffffff",
-        },
-      },
-    };
-
-    elements.current = stripe.elements(options);
-    const paymentElement = elements.current.create("payment");
-    paymentElement?.mount("#payment-element");
-  }, [clientSecret, mode, stripe]);
-
-  async function signup() {
-    if (!stripe || !elements.current) return;
-
-    setLoading(true);
-
-    const returnUrl = session
-      ? `${window.location.origin}/`
-      : `${window.location.origin}/l#success`;
-
-    // send loops event
-    sendLoopsEvent({
-      email,
-      eventName: "new_subscriber",
-    });
-
-    const { error } = await stripe.confirmPayment({
-      //`Elements` instance that was used to create the Payment Element
-      elements: elements.current,
-      confirmParams: {
-        return_url: returnUrl,
-      },
-    });
-
-    if (error) {
-      // This point will only be reached if there is an immediate error when
-      // confirming the payment. Show error to your customer (for example, payment
-      // details incomplete)
-      setError(error.message ?? `An unknown error occurred`);
-    } else {
-      // Your customer will be redirected to your `return_url`. For some payment
-      // methods like iDEAL, your customer will be redirected to an intermediate
-      // site first to authorize the payment, then redirected to the `return_url`.
-    }
-  }
-
-  return (
-    <form
-      id="payment-form"
-      className="grid gap-2"
-      onSubmit={(e) => {
-        e.preventDefault();
-        signup().finally(() => setLoading(false));
-      }}
-    >
-      <div id="payment-element" />
-      <Button2
-        id="submit"
-        disabled={!stripe || loading}
-        className="mt-5 justify-self-center"
-        color="blue"
-        rightIcon={<RocketLaunch size={16} />}
-        isLoading={loading}
-      >
-        <Trans>Sign Up</Trans>
-      </Button2>
-      {error && (
-        <Warning>
-          <div className="flex items-center justify-start gap-2">
-            <WarningCircle />
-            <span className="text-xs">{error}</span>
-          </div>
-        </Warning>
-      )}
-    </form>
-  );
-}
-
-/**
- * Creates incomplete subscription and returns client secret needed to complete it
- */
-async function getSubscriptionDetails(
-  email: string,
-  plan: "monthly" | "yearly"
-): Promise<{
-  subscriptionId: string;
-  clientSecret: string;
-}> {
-  // hit some api endpoint to get the payment details
-  const response = await fetch("/api/get-signup-client-secret", {
-    method: "POST",
-    body: JSON.stringify({ email, plan }),
-    headers: {
-      "Content-Type": "application/json",
-    },
-  }).then((res) => res.json());
-
-  // if there is an error, throw it
-  if (response.error) throw new Error(response.error.message);
-
-  // return the payment token
-  return response;
-}
-
-function Description({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <p
-      className={`text-neutral-600 dark:text-neutral-100 leading-normal ${className}`}
-    >
-      {children}
-    </p>
-  );
-}
diff --git a/app/src/components/WelcomeMessage.tsx b/app/src/components/WelcomeMessage.tsx
deleted file mode 100644
index 57b5968d5..000000000
--- a/app/src/components/WelcomeMessage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { ReactComponent as Success } from "./Success.svg";
-
-/**
- * The message that is displayed when user
- * is redirected to the login page
- * after first signing up
- */
-export function WelcomeMessage() {
-  return (
-    <>
-      <div
-        className="p-8 bg-purple-50 rounded-xl flex flex-col gap-3 items-center text-purple-700 shadow shadow-neutral-800/10 border-2 border-dashed border-purple-400 mx-4 dark:bg-transparent dark:border-purple-600 mb-5"
-        data-testid="welcome-message"
-      >
-        <Success className="w-36 h-36" />
-        <h1 className="text text-center text-lg font-bold">{t`Welcome to Flowchart Fun Pro!`}</h1>
-        <p className="text-base leading-tight">
-          {t`Log in to start creating flowcharts.`}
-        </p>
-      </div>
-    </>
-  );
-}
diff --git a/app/src/pages/Pricing.tsx b/app/src/pages/Pricing.tsx
index 3dfc6f032..c97a5be61 100644
--- a/app/src/pages/Pricing.tsx
+++ b/app/src/pages/Pricing.tsx
@@ -7,7 +7,6 @@ import styles from "./Pricing.module.css";
 import { PostHogProvider } from "posthog-js/react";
 import posthog from "posthog-js";
 import classNames from "classnames";
-import { PaymentStepper } from "../components/PaymentStepper";
 import { Checkout } from "../components/Checkout";
 
 const posthogToken = process.env.REACT_APP_PUBLIC_POSTHOG_KEY;