diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
index fa909b5d2..b50191203 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
@@ -1,6 +1,59 @@
 import Link from "next/link";
 
 import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+const paymentPlans = [
+  {
+    name: "Free",
+    price: 0,
+    text: "The essential to provide your best work for clients.",
+    features: ["10 Projects", "Up to 10 subscribers", "Advanced analytics"],
+    buttonText: "Current Plan",
+    link: "/dashboard/admin/settings/payment-information",
+  },
+  {
+    name: "Basic",
+    price: 20,
+    text: "Ideal for growing needs who want more features.",
+    features: [
+      "100 Projects",
+      "Up to 50 subscribers",
+      "Advanced analytics",
+      "24-hour support",
+    ],
+    buttonText: "Upgrade",
+    link: "/dashboard/admin/settings/payment-information/upgrade/basic",
+  },
+  {
+    name: "Advanced",
+    price: 50,
+    text: "Designed for power users and maximum functionalities.",
+    features: [
+      "200 Projects",
+      "Up to 100 subscribers",
+      "Advanced analytics",
+      "24-hour support",
+      "Marketing advisor",
+    ],
+    buttonText: "Upgrade",
+    link: "/dashboard/admin/settings/payment-information/upgrade/advanced",
+  },
+  {
+    name: "Premium",
+    price: 100,
+    text: "Perfect for users who want more features.",
+    features: [
+      "300 Projects",
+      "Up to 500 subscribers",
+      "Advanced analytics",
+      "24-hour support",
+      "Marketing advisor",
+    ],
+    buttonText: "Upgrade",
+    link: "/dashboard/admin/settings/payment-information/upgrade/premium",
+  },
+];
 
 const PaymentInformation = () => {
   return (
@@ -17,132 +70,53 @@ const PaymentInformation = () => {
           <p className="text-sm text-[#525252]">$0/month</p>
         </div>
         <div className="flex w-full p-5">
-          <div className="hidden w-[152px] py-[20px] md:block">
+          <div className="hidden w-[152px] py-[20px] md:block md:grow">
             <p className="font-semibold">Subscribe to your desired plan</p>
           </div>
 
-          <div className="flex w-full flex-col items-center justify-center gap-8 md:flex-row md:items-start md:justify-between md:gap-0">
-            <div className="flex w-[258px] flex-col gap-[16px] px-[20px] py-[15px] hover:rounded-md hover:border hover:border-primary md:w-[200px] md:border-none">
-              <p className="font-semibold">Free</p>
-              <p>
-                {" "}
-                <span className="text-[25px] font-medium">$0</span>{" "}
-                <span className="text-[13px]">/month</span>{" "}
-              </p>
-              <p className="text-sm text-[#525252]">
-                The essential to provide your best work for clients.
-              </p>
-              <ul className="flex w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px] md:hidden">
-                <li>
-                  <span className="text-[14px]">10 Projects</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Up to 10 subscribers</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Advanced analytics</span>{" "}
-                </li>
-              </ul>
-              <Button className="w-full rounded-[6px] bg-[#FDEEE3] px-12 py-2 text-black">
-                Current Plan
-              </Button>
-            </div>
-            <div className="flex w-[258px] flex-col gap-[16px] rounded-md border-primary bg-[#FFF8F2] px-[20px] py-[15px] hover:border md:w-[200px] md:bg-white">
-              <p className="font-semibold">Basic</p>
-              <p>
-                {" "}
-                <span className="text-[25px] font-medium">$20</span>{" "}
-                <span className="text-[13px]">/month</span>{" "}
-              </p>
-              <p className="text-sm text-[#525252]">
-                Ideal for growing needs who want more features.
-              </p>
-              <ul className="flex w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px] md:hidden">
-                <li>
-                  <span className="text-[14px]">100 Projects</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Up to 50 subscribers</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Advanced analytics</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">24-hour support</span>{" "}
-                </li>
-              </ul>
-              <Link href="/dashboard/admin/settings/payment-information/upgrade">
-                <Button className="w-full rounded-[6px] bg-primary px-12 py-2 text-white">
-                  Upgrade
-                </Button>
-              </Link>
-            </div>
-            <div className="flex w-[258px] flex-col gap-[16px] rounded-md border-primary bg-[#FFF8F2] px-[20px] py-[15px] hover:border md:w-[200px] md:bg-white">
-              <p className="font-semibold">Advanced</p>
-              <p>
-                {" "}
-                <span className="text-[25px] font-medium">$50</span>{" "}
-                <span className="text-[13px]">/month</span>{" "}
-              </p>
-              <p className="text-sm text-[#525252]">
-                Designed for power users and maximum functionalities.
-              </p>
-              <ul className="flex w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px] md:hidden">
-                <li>
-                  <span className="text-[14px]">200 Projects</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Up to 100 subscribers</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Advanced analytics</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">24-hour support</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Marketing advisor</span>{" "}
-                </li>
-              </ul>
-              <Link href="/dashboard/admin/settings/payment-information/upgrade">
-                <Button className="w-full rounded-[6px] bg-primary px-12 py-2 text-white">
-                  Upgrade
-                </Button>
-              </Link>
-            </div>
-            <div className="flex w-[258px] flex-col justify-between gap-[16px] rounded-md border-primary bg-[#FFF8F2] px-[20px] py-[15px] hover:border md:h-full md:w-[200px] md:bg-white">
-              <p className="font-semibold">Premium</p>
-              <p>
-                {" "}
-                <span className="text-[25px] font-medium">$100</span>{" "}
-                <span className="text-[13px]">/month</span>{" "}
-              </p>
-              <p className="text-sm text-[#525252]">
-                Perfect for users who want more features.
-              </p>
-              <ul className="flex w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px] md:hidden">
-                <li>
-                  <span className="text-[14px]">300 Projects</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Up to 500 subscribers</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Advanced analytics</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">24-hour support</span>{" "}
-                </li>
-                <li>
-                  <span className="text-[14px]">Marketing advisor</span>{" "}
-                </li>
-              </ul>
-              <Link href="/dashboard/admin/settings/payment-information/upgrade">
-                <Button className="w-full rounded-[6px] bg-primary px-12 py-2 text-white">
-                  Upgrade
+          <div className="flex h-full w-full flex-col items-center justify-center gap-8 md:flex-row md:flex-wrap md:items-stretch md:justify-start md:gap-4">
+            {paymentPlans.map((plan) => (
+              <div
+                key={plan.name}
+                className={cn(
+                  "flex w-[258px] flex-col gap-[16px] px-[20px] py-[15px] hover:rounded-md hover:border hover:border-primary md:w-[200px] md:border-none",
+                  plan.name === "Free"
+                    ? ""
+                    : "border-primary bg-[#FFF8F2] md:bg-white",
+                )}
+              >
+                <p className="font-semibold">{plan.name}</p>
+                <p>
+                  {" "}
+                  <span className="text-[25px] font-medium">
+                    ${plan.price}
+                  </span>{" "}
+                  <span className="text-[13px]">/month</span>{" "}
+                </p>
+                <p className="text-sm text-[#525252]">{plan.text}</p>
+                <ul className="flex w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px] md:hidden">
+                  {plan.features.map((f) => (
+                    <li key={f}>
+                      <span className="text-[14px]">{f}</span>{" "}
+                    </li>
+                  ))}
+                </ul>
+                <Button
+                  disabled={plan.name === "Free"}
+                  className={cn(
+                    "mt-auto w-full rounded-[6px] px-12 py-2",
+                    plan.name === "Free"
+                      ? "bg-[#FDEEE3] text-black hover:bg-[#FDEEE3]"
+                      : "bg-primary text-white",
+                  )}
+                  asChild
+                >
+                  <Link href={plan.link}>
+                    {plan.name === "Free" ? "Current Plan" : "Upgrade"}
+                  </Link>
                 </Button>
-              </Link>
-            </div>
+              </div>
+            ))}
           </div>
         </div>
 
@@ -150,7 +124,7 @@ const PaymentInformation = () => {
           <div className="w-[152px] py-[20px]">
             <p className="font-semibold">Highlights</p>
           </div>
-          <div className="flex items-start justify-between">
+          <div className="flex flex-wrap items-start justify-between">
             <ul className="flex h-[220px] w-[200px] list-disc flex-col gap-[8px] px-[20px] py-[15px]">
               <li>
                 <span className="text-[14px]">10 Projects</span>{" "}
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/[plan]/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/[plan]/page.tsx
new file mode 100644
index 000000000..e10de8a5d
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/[plan]/page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { ArrowLeft, ChevronDown, ChevronUp } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import CustomInput from "~/components/common/input/input";
+import PlanUpgradeSuccessfulModal from "~/components/common/modals/plan-upgrade-successful";
+
+const billingOption = [
+  {
+    name: "Pay monthly",
+    description: "$20/ month/member",
+  },
+  {
+    name: "Pay yearly",
+    description: "$200/ year/member",
+  },
+];
+
+const paymentMethod = [
+  {
+    name: "Credit Card",
+    icon: "/user-dashboard/svg/credit-card.svg",
+    width: 64,
+  },
+  {
+    name: "Stripe Payment",
+    icon: "/user-dashboard/svg/stripe-logo.svg",
+    width: 84,
+  },
+  {
+    name: "Paypal Payment",
+    icon: "/user-dashboard/svg/paypal-logo.svg",
+    width: 153,
+  },
+];
+
+const Checkout = ({ params }: { params: { plan: string } }) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const router = useRouter();
+
+  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+
+  const toggleDetails = () => {
+    setIsDetailsVisible(!isDetailsVisible);
+  };
+
+  return (
+    <section className="px-8 py-6">
+      <div className="flex max-w-[592px] flex-col gap-[34px]">
+        <span className="flex flex-col gap-4">
+          <span className="flex items-center gap-3">
+            <button type="button" onClick={() => router.back()} title="Back">
+              <ArrowLeft className="size-6" />
+            </button>
+            <h1 className="text-lg font-semibold text-zinc-950 md:text-2xl">
+              Upgrade to <span className="capitalize">{params.plan}</span>
+            </h1>
+          </span>
+          <p className="text-xs font-normal leading-[19.36px] text-zinc-950 md:text-base">
+            Do more with unlimited users and integration when you upgrade
+          </p>
+        </span>
+
+        <div className="flex flex-col gap-4">
+          <CustomInput
+            placeholder="Full Name"
+            label="Enter Full Name"
+            className="border-border"
+            type="text"
+          />
+          <CustomInput
+            placeholder="Business Name"
+            label="Business Name (Optional)"
+            className="border-border"
+            type="text"
+          />
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <label htmlFor="billing_option" className="text-base font-semibold">
+            Billing Option
+          </label>
+
+          <ul className="space-y-4">
+            {billingOption.map((item, index) => (
+              <li key={index}>
+                <label htmlFor={item.name} className="relative">
+                  <input
+                    id={item.name}
+                    type="radio"
+                    defaultChecked={index == 1 ? true : false}
+                    name="billing_option"
+                    className="peer sr-only"
+                    required
+                  />
+                  <div className="flex h-[88px] w-full cursor-pointer flex-col justify-center rounded-lg border bg-white p-5 shadow-sm ring-primary duration-200 peer-checked:ring-2">
+                    <div className="flex flex-col gap-1 pl-10">
+                      <h3 className="text-base font-semibold">{item.name}</h3>
+                      <p className="text-xs text-neutral-dark-1">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                  <span className="absolute left-5 top-8 block h-5 w-5 rounded-full border border-border peer-checked:border-[5px] peer-checked:border-primary"></span>
+                </label>
+              </li>
+            ))}
+          </ul>
+
+          <div className="flex flex-col gap-4">
+            <span className="flex items-center justify-between gap-8">
+              <p className="text-base font-semibold">$20 /month</p>
+              <CustomButton
+                variant="outline"
+                icon={isDetailsVisible ? <ChevronUp /> : <ChevronDown />}
+                isRightIconVisible={true}
+                size="sm"
+                onClick={toggleDetails}
+              >
+                Details
+              </CustomButton>
+            </span>
+
+            {isDetailsVisible && (
+              <div className="flex flex-col gap-[10px] text-xs text-neutral-dark-1">
+                <span className="flex justify-between gap-8">
+                  <p>Members in your workspace</p>
+                  <p>1</p>
+                </span>
+                <span className="flex justify-between gap-8">
+                  <p>x$20/month/member</p>
+                  <p>$20</p>
+                </span>
+                <hr />
+                <span className="flex justify-between gap-8">
+                  <p>Subtotal</p>
+                  <p>$20</p>
+                </span>
+                <span className="flex justify-between gap-8">
+                  <p>Tax if applicable</p>
+                  <p>$20</p>
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <label htmlFor="payment_method" className="text-base font-semibold">
+            Choose Payment Method
+          </label>
+
+          <ul className="space-y-4">
+            {paymentMethod.map((item, index) => (
+              <li key={index}>
+                <label htmlFor={item.name} className="relative">
+                  <input
+                    id={item.name}
+                    type="radio"
+                    defaultChecked={index == 1 ? true : false}
+                    name="payment_method"
+                    className="peer sr-only"
+                    required
+                  />
+                  <div className="flex h-[88px] w-full cursor-pointer flex-col justify-center rounded-lg border bg-white p-5 shadow-sm ring-primary duration-200 peer-checked:ring-2">
+                    <div className="flex items-center justify-between gap-8 pl-10">
+                      <h3 className="text-base font-semibold">{item.name}</h3>
+                      <Image
+                        src={item.icon}
+                        alt={item.name}
+                        className=""
+                        width={item.width}
+                        height={40}
+                      />
+                    </div>
+                  </div>
+                  <span className="absolute left-5 top-8 block h-5 w-5 rounded-full border border-border peer-checked:border-[5px] peer-checked:border-primary"></span>
+                </label>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="">
+          <label htmlFor="termsAndConditions" className="flex gap-4">
+            <input
+              type="checkbox"
+              id="termsAndConditions"
+              name="terms_and_conditions"
+              className="size-4 bg-white text-neutral-dark-1 accent-primary"
+            />
+
+            <span className="text- text-xs">
+              By submitting this form, you confirm that you agree to our{" "}
+              <Link
+                href=""
+                className="font-bold text-primary duration-150 hover:underline"
+              >
+                Terms of Service
+              </Link>{" "}
+              and{" "}
+              <Link
+                href=""
+                className="font-bold text-primary duration-150 hover:underline"
+              >
+                Privacy Policy
+              </Link>
+              .
+            </span>
+          </label>
+        </div>
+
+        <CustomButton
+          type="submit"
+          className="bg-primary"
+          onClick={() => setOpen(true)}
+        >
+          Proceed to Payment
+        </CustomButton>
+      </div>
+
+      <PlanUpgradeSuccessfulModal onClose={() => setOpen(!open)} show={open} />
+    </section>
+  );
+};
+
+export default Checkout;
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/page.tsx
index 35ea600b4..caf3555f6 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/upgrade/page.tsx
@@ -1,232 +1,18 @@
 "use client";
 
-import { ArrowLeft, ChevronDown, ChevronUp } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect } from "react";
 
-import CustomButton from "~/components/common/common-button/common-button";
-import CustomInput from "~/components/common/input/input";
-import PlanUpgradeSuccessfulModal from "~/components/common/modals/plan-upgrade-successful";
-
-const billingOption = [
-  {
-    name: "Pay monthly",
-    description: "$20/ month/member",
-  },
-  {
-    name: "Pay yearly",
-    description: "$200/ year/member",
-  },
-];
-
-const paymentMethod = [
-  {
-    name: "Credit Card",
-    icon: "/user-dashboard/svg/credit-card.svg",
-    width: 64,
-  },
-  {
-    name: "Stripe Payment",
-    icon: "/user-dashboard/svg/stripe-logo.svg",
-    width: 84,
-  },
-  {
-    name: "Paypal Payment",
-    icon: "/user-dashboard/svg/paypal-logo.svg",
-    width: 153,
-  },
-];
-
-const Checkout = () => {
-  const [open, setOpen] = useState<boolean>(false);
+const UpgradePage = () => {
   const router = useRouter();
 
-  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-
-  const toggleDetails = () => {
-    setIsDetailsVisible(!isDetailsVisible);
-  };
-
-  return (
-    <section className="px-8 py-6">
-      <div className="flex max-w-[592px] flex-col gap-[34px]">
-        <span className="flex flex-col gap-4">
-          <span className="flex items-center gap-3">
-            <button type="button" onClick={() => router.back()} title="Back">
-              <ArrowLeft className="size-6" />
-            </button>
-            <h1 className="text-lg font-semibold text-zinc-950 md:text-2xl">
-              Upgrade to Basic
-            </h1>
-          </span>
-          <p className="text-xs font-normal leading-[19.36px] text-zinc-950 md:text-base">
-            Do more with unlimited users and Integration when you upgrade
-          </p>
-        </span>
-
-        <div className="flex flex-col gap-4">
-          <CustomInput
-            placeholder="Full Name"
-            label="Enter Full Name"
-            className="border-border"
-            type="text"
-          />
-          <CustomInput
-            placeholder="Business Name"
-            label="Business Name (Optional)"
-            className="border-border"
-            type="text"
-          />
-        </div>
-
-        <div className="flex flex-col gap-4">
-          <label htmlFor="billing_option" className="text-base font-semibold">
-            Billing Option
-          </label>
-
-          <ul className="space-y-4">
-            {billingOption.map((item, index) => (
-              <li key={index}>
-                <label htmlFor={item.name} className="relative">
-                  <input
-                    id={item.name}
-                    type="radio"
-                    defaultChecked={index == 1 ? true : false}
-                    name="billing_option"
-                    className="peer sr-only"
-                    required
-                  />
-                  <div className="flex h-[88px] w-full cursor-pointer flex-col justify-center rounded-lg border bg-white p-5 shadow-sm ring-primary duration-200 peer-checked:ring-2">
-                    <div className="flex flex-col gap-1 pl-10">
-                      <h3 className="text-base font-semibold">{item.name}</h3>
-                      <p className="text-xs text-neutral-dark-1">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
-                  <span className="absolute left-5 top-8 block h-5 w-5 rounded-full border border-border peer-checked:border-[5px] peer-checked:border-primary"></span>
-                </label>
-              </li>
-            ))}
-          </ul>
-
-          <div className="flex flex-col gap-4">
-            <span className="flex items-center justify-between gap-8">
-              <p className="text-base font-semibold">$20 /month</p>
-              <CustomButton
-                variant="outline"
-                icon={isDetailsVisible ? <ChevronUp /> : <ChevronDown />}
-                isRightIconVisible={true}
-                size="sm"
-                onClick={toggleDetails}
-              >
-                Details
-              </CustomButton>
-            </span>
-
-            {isDetailsVisible && (
-              <div className="flex flex-col gap-[10px] text-xs text-neutral-dark-1">
-                <span className="flex justify-between gap-8">
-                  <p>Members in your workspace</p>
-                  <p>1</p>
-                </span>
-                <span className="flex justify-between gap-8">
-                  <p>x$20/month/member</p>
-                  <p>$20</p>
-                </span>
-                <hr />
-                <span className="flex justify-between gap-8">
-                  <p>Subtotal</p>
-                  <p>$20</p>
-                </span>
-                <span className="flex justify-between gap-8">
-                  <p>Tax if applicable</p>
-                  <p>$20</p>
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          <label htmlFor="payment_method" className="text-base font-semibold">
-            Choose Payment Method
-          </label>
-
-          <ul className="space-y-4">
-            {paymentMethod.map((item, index) => (
-              <li key={index}>
-                <label htmlFor={item.name} className="relative">
-                  <input
-                    id={item.name}
-                    type="radio"
-                    defaultChecked={index == 1 ? true : false}
-                    name="payment_method"
-                    className="peer sr-only"
-                    required
-                  />
-                  <div className="flex h-[88px] w-full cursor-pointer flex-col justify-center rounded-lg border bg-white p-5 shadow-sm ring-primary duration-200 peer-checked:ring-2">
-                    <div className="flex items-center justify-between gap-8 pl-10">
-                      <h3 className="text-base font-semibold">{item.name}</h3>
-                      <Image
-                        src={item.icon}
-                        alt={item.name}
-                        className=""
-                        width={item.width}
-                        height={40}
-                      />
-                    </div>
-                  </div>
-                  <span className="absolute left-5 top-8 block h-5 w-5 rounded-full border border-border peer-checked:border-[5px] peer-checked:border-primary"></span>
-                </label>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="">
-          <label htmlFor="termsAndConditions" className="flex gap-4">
-            <input
-              type="checkbox"
-              id="termsAndConditions"
-              name="terms_and_conditions"
-              className="size-4 bg-white text-neutral-dark-1 accent-primary"
-            />
-
-            <span className="text- text-xs">
-              By submitting this form, you confirm that you agree to our{" "}
-              <Link
-                href=""
-                className="font-bold text-primary duration-150 hover:underline"
-              >
-                Terms of Service
-              </Link>{" "}
-              and{" "}
-              <Link
-                href=""
-                className="font-bold text-primary duration-150 hover:underline"
-              >
-                Privacy Policy
-              </Link>
-              .
-            </span>
-          </label>
-        </div>
-
-        <CustomButton
-          type="submit"
-          className="bg-primary"
-          onClick={() => setOpen(true)}
-        >
-          Proceed to Payment
-        </CustomButton>
-      </div>
+  useEffect(() => {
+    router.replace(
+      "/dashboard/admin/settings/payment-information/upgrade/basic",
+    );
+  }, [router]);
 
-      <PlanUpgradeSuccessfulModal onClose={() => setOpen(!open)} show={open} />
-    </section>
-  );
+  return;
 };
 
-export default Checkout;
+export default UpgradePage;