diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/layout.tsx
index 8f4ec5bbcaf..b18edbc6c73 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/layout.tsx
@@ -60,7 +60,7 @@ function TransactionsLayout(props: {
               </div>
             </div>
             <Link href={`${engineBaseSlug}/dedicated`}>
-              <Button variant="outline">View dedicated engines</Button>
+              <Button variant="outline">View Dedicated Engine</Button>
             </Link>
           </div>
         </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/EngineFooterCard.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/EngineFooterCard.stories.tsx
index c4d3b3f55c2..8c3058da6fe 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/EngineFooterCard.stories.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/EngineFooterCard.stories.tsx
@@ -5,8 +5,8 @@ const meta = {
   title: "Engine/EngineFooterCard",
   component: EngineFooterCard,
   args: {
-    team_slug: "demo-team",
-    project_slug: "demo-project",
+    teamSlug: "demo-team",
+    projectSlug: "demo-project",
   },
   decorators: [
     (Story) => (
@@ -20,26 +20,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Growth: Story = {
-  args: {
-    teamPlan: "growth",
-  },
-};
+export const Growth: Story = {};
 
-export const Accelerate: Story = {
-  args: {
-    teamPlan: "accelerate",
-  },
-};
+export const Scale: Story = {};
 
-export const Scale: Story = {
-  args: {
-    teamPlan: "scale",
-  },
-};
-
-export const Pro: Story = {
-  args: {
-    teamPlan: "pro",
-  },
-};
+export const Pro: Story = {};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx
index 237d482b273..e8bd59005a6 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx
@@ -1,4 +1,3 @@
-import type { Team } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
@@ -75,15 +74,14 @@ function EngineInfoSection(props: { team_slug: string; project_slug: string }) {
 }
 
 export function EngineFooterCard(props: {
-  teamPlan: Team["billingPlan"];
-  team_slug: string;
-  project_slug: string;
+  teamSlug: string;
+  projectSlug: string;
 }) {
   return (
     <div className="relative rounded-lg border p-6">
       <EngineInfoSection
-        team_slug={props.team_slug}
-        project_slug={props.project_slug}
+        team_slug={props.teamSlug}
+        project_slug={props.projectSlug}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx
index b5f703bcfa5..550563a8028 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx
@@ -1,5 +1,6 @@
 import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
 import type { Meta, StoryObj } from "@storybook/react";
+import { teamStub } from "../../../../../../../../../../stories/stubs";
 import { EngineInstancesTableUI } from "./engine-instances-table";
 
 const meta: Meta<typeof Story> = {
@@ -109,7 +110,7 @@ export const NoInstancesProPlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "pro",
+    team: teamStub("1", "pro"),
   },
 };
 
@@ -117,7 +118,7 @@ export const NoInstancesGrowthPlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "growth",
+    team: teamStub("2", "growth"),
   },
 };
 
@@ -127,7 +128,7 @@ export const NoInstancesAcceleratePlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "accelerate",
+    team: teamStub("3", "accelerate"),
   },
 };
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
index de58eae9213..9d2fdc6c635 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { Team } from "@/api/team";
+import { CheckoutButton } from "@/components/billing";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
@@ -10,9 +11,20 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -28,6 +40,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {} from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Table,
@@ -39,6 +52,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Textarea } from "@/components/ui/textarea";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import {
@@ -56,9 +70,13 @@ import { useTrack } from "hooks/analytics/useTrack";
 import {
   CheckIcon,
   CircleAlertIcon,
+  DatabaseIcon,
+  InfinityIcon,
   InfoIcon,
   PencilIcon,
+  ShieldCheckIcon,
   Trash2Icon,
+  WalletIcon,
 } from "lucide-react";
 import { MoreHorizontalIcon } from "lucide-react";
 import { ArrowRightIcon } from "lucide-react";
@@ -80,20 +98,18 @@ type RemovedEngineFromDashboard = (
 ) => Promise<void>;
 
 export function EngineInstancesTable(props: {
-  teamSlug: string;
+  team: Team;
   projectSlug: string;
   instances: EngineInstance[];
   engineLinkPrefix: string;
-  teamPlan: Team["billingPlan"];
 }) {
   const router = useDashboardRouter();
 
   return (
     <EngineInstancesTableUI
-      teamPlan={props.teamPlan}
+      team={props.team}
       instances={props.instances}
       engineLinkPrefix={props.engineLinkPrefix}
-      teamSlug={props.teamSlug}
       projectSlug={props.projectSlug}
       deleteCloudHostedEngine={async (params) => {
         await deleteCloudHostedEngine(params);
@@ -111,28 +127,116 @@ export function EngineInstancesTable(props: {
   );
 }
 
+function DedicatedEngineSubscriptionButton(props: { team: Team }) {
+  const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
+
+  const trigger = (
+    <Button>
+      <DatabaseIcon className="mr-2 size-4" />
+      Deploy Dedicated Engine
+    </Button>
+  );
+
+  const title = (
+    <div className="flex flex-row items-center gap-2">
+      <div className="grid size-8 place-items-center rounded-full bg-warning-text">
+        <DatabaseIcon className="size-4 text-white" />
+      </div>
+      <span className="font-semibold text-lg">Dedicated Engine</span>
+    </div>
+  );
+
+  const content = (
+    <div className="flex flex-col items-start justify-center gap-4 px-4 md:px-0">
+      <ul className="flex flex-col gap-1 self-start text-muted-foreground text-sm">
+        <li className="flex items-center gap-2">
+          <ShieldCheckIcon className="size-4 text-foreground" />
+          Isolated environment
+        </li>
+        <li className="flex items-center gap-2">
+          <WalletIcon className="size-4 text-foreground" />
+          EOA or Smart Wallets
+        </li>
+        <li className="flex items-center gap-2">
+          <InfinityIcon className="size-4 text-foreground" />
+          No usage limits or charges
+        </li>
+      </ul>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[90vh]">
+          <DrawerHeader>
+            <DrawerTitle>{title}</DrawerTitle>
+            <DrawerDescription>
+              Instantly deploy a dedicated engine instance for your team.
+            </DrawerDescription>
+          </DrawerHeader>
+          {content}
+          <DrawerFooter>
+            <CheckoutButton
+              billingStatus={props.team.billingStatus}
+              teamSlug={props.team.slug}
+              sku="product:engine_standard"
+            >
+              Deploy Now · $299 / month
+            </CheckoutButton>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            Instantly deploy a dedicated engine instance for your team.
+          </DialogDescription>
+        </DialogHeader>
+        {content}
+        <DialogFooter>
+          <CheckoutButton
+            billingStatus={props.team.billingStatus}
+            teamSlug={props.team.slug}
+            sku="product:engine_standard"
+          >
+            Deploy Now · $299 / month
+          </CheckoutButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export function EngineInstancesTableUI(props: {
   instances: EngineInstance[];
   engineLinkPrefix: string;
   deleteCloudHostedEngine: DeletedCloudHostedEngine;
   editEngineInstance: EditedEngineInstance;
   removeEngineFromDashboard: RemovedEngineFromDashboard;
-  teamPlan: Team["billingPlan"];
-  teamSlug: string;
+  team: Team;
   projectSlug: string;
 }) {
   return (
-    <div className="flex grow flex-col">
-      <h2 className="mb-4 font-semibold text-2xl tracking-tight">
-        Engine Instances
-      </h2>
+    <div className="flex grow flex-col gap-2">
+      <div className="mb-4 flex flex-row items-center justify-between text-center">
+        <h2 className="font-semibold text-2xl tracking-tight">
+          Engine Instances
+        </h2>
+        <DedicatedEngineSubscriptionButton team={props.team} />
+      </div>
 
       {props.instances.length === 0 ? (
-        <EmptyEngineState
-          teamPlan={props.teamPlan}
-          teamSlug={props.teamSlug}
-          projectSlug={props.projectSlug}
-        />
+        <EmptyEngineState team={props.team} projectSlug={props.projectSlug} />
       ) : (
         <TableContainer>
           <Table>
@@ -147,7 +251,7 @@ export function EngineInstancesTableUI(props: {
               {props.instances.map((instance) => (
                 <EngineInstanceRow
                   key={instance.id}
-                  teamIdOrSlug={props.teamSlug}
+                  teamIdOrSlug={props.team.slug}
                   instance={instance}
                   engineLinkPrefix={props.engineLinkPrefix}
                   deleteCloudHostedEngine={props.deleteCloudHostedEngine}
@@ -813,8 +917,7 @@ function DeleteEngineSubscriptionModalContent(props: {
 }
 
 function EmptyEngineState(props: {
-  teamPlan: Team["billingPlan"];
-  teamSlug: string;
+  team: Team;
   projectSlug: string;
 }) {
   const [selectedTab, setSelectedTab] = useState<
@@ -833,94 +936,85 @@ function EmptyEngineState(props: {
         instance.
       </p>
 
-      {props.teamPlan !== "accelerate" && props.teamPlan !== "scale" && (
-        <>
-          <div className="w-full max-w-md">
-            <div className="mx-auto max-w-sm">
-              <div className="grid grid-cols-2 gap-1 rounded-lg border p-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className={cn(selectedTab === "cloud-hosted" && "bg-accent")}
-                  onClick={() => setSelectedTab("cloud-hosted")}
-                >
-                  Managed
-                </Button>
+      <>
+        <div className="w-full max-w-md">
+          <div className="mx-auto max-w-sm">
+            <div className="grid grid-cols-2 gap-1 rounded-lg border p-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(selectedTab === "cloud-hosted" && "bg-accent")}
+                onClick={() => setSelectedTab("cloud-hosted")}
+              >
+                Managed
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(selectedTab === "self-hosted" && "bg-accent")}
+                onClick={() => setSelectedTab("self-hosted")}
+              >
+                Self-hosted
+              </Button>
+            </div>
+          </div>
 
+          <div className="h-5" />
+
+          {selectedTab === "self-hosted" && (
+            <div className="flex flex-col text-center">
+              <h3 className="mb-0.5 font-semibold text-base">
+                Self-Hosted Engine
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                Add engine instance running on your own infrastructure.
+              </p>
+              <div className="h-4" />
+              <div className="mt-auto">
                 <Button
-                  variant="ghost"
+                  className="w-full gap-2"
+                  variant="default"
                   size="sm"
-                  className={cn(selectedTab === "self-hosted" && "bg-accent")}
-                  onClick={() => setSelectedTab("self-hosted")}
+                  asChild
                 >
-                  Self-hosted
+                  <Link
+                    href={`/team/${props.team.slug}/${props.projectSlug}/engine/dedicated/import`}
+                  >
+                    Import self-hosted Engine
+                    <ArrowRightIcon size={16} />
+                  </Link>
                 </Button>
               </div>
             </div>
+          )}
 
-            <div className="h-5" />
-
-            {selectedTab === "self-hosted" && (
-              <div className="flex flex-col text-center">
-                <h3 className="mb-0.5 font-semibold text-base">
-                  Self-Hosted Engine
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  Add engine instance running on your own infrastructure.
-                </p>
-                <div className="h-4" />
-                <div className="mt-auto">
-                  <Button
-                    className="w-full gap-2"
-                    variant="default"
-                    size="sm"
-                    asChild
-                  >
-                    <Link
-                      href={`/team/${props.teamSlug}/${props.projectSlug}/engine/dedicated/import`}
-                    >
-                      Import self-hosted Engine
-                      <ArrowRightIcon size={16} />
-                    </Link>
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {selectedTab === "cloud-hosted" && (
-              <div className="flex flex-col text-center">
-                <h3 className="mb-0.5 font-semibold text-base">
-                  Managed Engine
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  Contact us to add a managed engine instance to your team.{" "}
-                  <br /> We recommend using Engine Cloud in most cases
-                </p>
-                <div className="h-4" />
-                <div className="mt-auto">
-                  <Button className="w-full gap-2" size="sm" asChild>
-                    <Link href={"/contact-us"} target="_blank">
-                      Contact Us
-                      <ArrowRightIcon size={16} />
-                    </Link>
-                  </Button>
-                </div>
+          {selectedTab === "cloud-hosted" && (
+            <div className="flex flex-col text-center">
+              <h3 className="mb-0.5 font-semibold text-base">Managed Engine</h3>
+              <p className="text-muted-foreground text-sm">
+                Deploy a managed engine instance to your team. <br /> We
+                recommend using Engine Cloud in most cases.
+              </p>
+              <div className="h-4" />
+              <div className="mt-auto">
+                <DedicatedEngineSubscriptionButton team={props.team} />
               </div>
-            )}
-          </div>
+            </div>
+          )}
+        </div>
 
-          <div className="mt-4 text-center text-muted-foreground text-sm">
-            Need help getting started? <br className="lg:hidden" />
-            <Link
-              href="https://portal.thirdweb.com/engine"
-              target="_blank"
-              className="text-foreground hover:underline"
-            >
-              View documentation
-            </Link>
-          </div>
-        </>
-      )}
+        <div className="mt-4 text-center text-muted-foreground text-sm">
+          Need help getting started? <br className="lg:hidden" />
+          <Link
+            href="https://portal.thirdweb.com/engine"
+            target="_blank"
+            className="text-foreground hover:underline"
+          >
+            View documentation
+          </Link>
+        </div>
+      </>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-list.tsx
index 7460dfb51e2..a60621b5b35 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-list.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-list.tsx
@@ -4,28 +4,25 @@ import { EngineFooterCard } from "../_components";
 import { EngineInstancesTable } from "./engine-instances-table";
 
 export const EngineInstancesList = (props: {
-  team_slug: string;
-  project_slug: string;
+  team: Team;
+  projectSlug: string;
   instances: EngineInstance[];
-  teamPlan: Team["billingPlan"];
 }) => {
-  const engineLinkPrefix = `/team/${props.team_slug}/${props.project_slug}/engine/dedicated`;
+  const engineLinkPrefix = `/team/${props.team.slug}/${props.projectSlug}/engine/dedicated`;
 
   return (
     <div className="flex grow flex-col">
       <EngineInstancesTable
-        teamSlug={props.team_slug}
-        projectSlug={props.project_slug}
+        team={props.team}
+        projectSlug={props.projectSlug}
         instances={props.instances}
         engineLinkPrefix={engineLinkPrefix}
-        teamPlan={props.teamPlan}
       />
 
       <div className="h-40" />
       <EngineFooterCard
-        teamPlan={props.teamPlan}
-        team_slug={props.team_slug}
-        project_slug={props.project_slug}
+        teamSlug={props.team.slug}
+        projectSlug={props.projectSlug}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/page.tsx
index dd50842de06..2834e6a3485 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/page.tsx
@@ -47,10 +47,9 @@ export default async function Page(props: {
 
   return (
     <EngineInstancesList
-      team_slug={params.team_slug}
-      project_slug={params.project_slug}
+      team={team}
+      projectSlug={params.project_slug}
       instances={res.data || []}
-      teamPlan={team.billingPlan}
     />
   );
 }