diff --git a/apps/dashboard/src/app/account/components/AccountHeader.tsx b/apps/dashboard/src/app/account/components/AccountHeader.tsx
index 1b17c008897..98d01c8b840 100644
--- a/apps/dashboard/src/app/account/components/AccountHeader.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeader.tsx
@@ -77,7 +77,7 @@ export function AccountHeader(props: {
               isOpen: false,
             })
           }
-          onCreateAndComplete={() => {
+          onCreate={() => {
             // refresh projects
             router.refresh();
           }}
diff --git a/apps/dashboard/src/app/get-started/team/[team_slug]/create-project/page.tsx b/apps/dashboard/src/app/get-started/team/[team_slug]/create-project/page.tsx
new file mode 100644
index 00000000000..5df90a7ab30
--- /dev/null
+++ b/apps/dashboard/src/app/get-started/team/[team_slug]/create-project/page.tsx
@@ -0,0 +1,22 @@
+import { getTeamBySlug } from "@/api/team";
+import { notFound } from "next/navigation";
+import { CreateProjectPage } from "../../../../login/onboarding/create-project-onboarding/create-project-page";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string }>;
+}) {
+  const params = await props.params;
+  const team = await getTeamBySlug(params.team_slug);
+
+  if (!team) {
+    notFound();
+  }
+
+  return (
+    <CreateProjectPage
+      enableNebulaServiceByDefault={team.enabledScopes.includes("nebula")}
+      teamSlug={team.slug}
+      teamId={team.id}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPage.stories.tsx b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPage.stories.tsx
new file mode 100644
index 00000000000..465ab679df1
--- /dev/null
+++ b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPage.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { projectStub } from "../../../../stories/stubs";
+import { CreateProjectPageUI } from "./CreateProjectPageUI";
+
+const meta = {
+  title: "Onboarding/CreateProject",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <CreateProjectPageUI
+      createProject={async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        return {
+          project: projectStub("foo", "bar"),
+          secret: "secret",
+        };
+      }}
+      teamSlug="foo"
+      enableNebulaServiceByDefault={false}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPageUI.tsx b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPageUI.tsx
new file mode 100644
index 00000000000..b3c5a2d8c8b
--- /dev/null
+++ b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPageUI.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import { useState } from "react";
+import {
+  CreateProjectForm,
+  CreatedProjectDetails,
+} from "../../../../components/settings/ApiKeys/Create";
+import { CreateProjectOnboardingLayout } from "../onboarding-layout";
+
+export function CreateProjectPageUI(props: {
+  createProject: (param: Partial<Project>) => Promise<{
+    project: Project;
+    secret: string;
+  }>;
+  enableNebulaServiceByDefault: boolean;
+  teamSlug: string;
+}) {
+  const [screen, setScreen] = useState<
+    { id: "create" } | { id: "api-details"; project: Project; secret: string }
+  >({ id: "create" });
+  return (
+    <CreateProjectOnboardingLayout currentStep={screen.id === "create" ? 1 : 2}>
+      <div className="overflow-hidden rounded-lg border bg-card">
+        {screen.id === "create" && (
+          <CreateProjectForm
+            showTitle={false}
+            closeModal={undefined}
+            createProject={props.createProject}
+            onProjectCreated={(params) => {
+              setScreen({
+                id: "api-details",
+                project: params.project,
+                secret: params.secret,
+              });
+            }}
+            enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+          />
+        )}
+
+        {screen.id === "api-details" && (
+          <CreatedProjectDetails
+            project={screen.project}
+            secret={screen.secret}
+            teamSlug={props.teamSlug}
+          />
+        )}
+      </div>
+    </CreateProjectOnboardingLayout>
+  );
+}
diff --git a/apps/dashboard/src/app/login/onboarding/create-project-onboarding/create-project-page.tsx b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/create-project-page.tsx
new file mode 100644
index 00000000000..30132c48846
--- /dev/null
+++ b/apps/dashboard/src/app/login/onboarding/create-project-onboarding/create-project-page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { createProjectClient } from "@3rdweb-sdk/react/hooks/useApi";
+import { CreateProjectPageUI } from "./CreateProjectPageUI";
+
+export function CreateProjectPage(props: {
+  enableNebulaServiceByDefault: boolean;
+  teamSlug: string;
+  teamId: string;
+}) {
+  return (
+    <CreateProjectPageUI
+      enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+      teamSlug={props.teamSlug}
+      createProject={async (params) => {
+        const res = await createProjectClient(props.teamId, params);
+        return {
+          project: res.project,
+          secret: res.secret,
+        };
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx b/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
index f530c772447..8de46af4bb4 100644
--- a/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
+++ b/apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx
@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import {
   BoxIcon,
+  KeyRoundIcon,
   LogOutIcon,
   MailIcon,
   UserIcon,
@@ -99,6 +100,36 @@ export function TeamOnboardingLayout(props: {
   );
 }
 
+const createProjectOnboardingSteps: OnboardingStep[] = [
+  {
+    icon: BoxIcon,
+    title: "Configure Project",
+    description: "Provide project details",
+    number: 1,
+  },
+  {
+    icon: KeyRoundIcon,
+    title: "Save Keys",
+    description: "Securely store secret key",
+    number: 2,
+  },
+];
+
+export function CreateProjectOnboardingLayout(props: {
+  children: React.ReactNode;
+  currentStep: 1 | 2;
+}) {
+  return (
+    <OnboardingLayout
+      steps={createProjectOnboardingSteps}
+      currentStep={props.currentStep}
+      title="Create a project"
+    >
+      {props.children}
+    </OnboardingLayout>
+  );
+}
+
 function OnboardingLayout(props: {
   steps: OnboardingStep[];
   currentStep: number;
diff --git a/apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx b/apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx
index 80881e0367c..749c14538cf 100644
--- a/apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx
+++ b/apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx
@@ -104,7 +104,7 @@ export function InviteTeamMembers(props: {
     <InviteTeamMembersUI
       trackEvent={trackEvent}
       onComplete={() => {
-        router.replace(`/team/${props.team.slug}`);
+        router.replace(`/get-started/team/${props.team.slug}/create-project`);
       }}
       getTeam={async () => {
         const res = await apiServerProxy<{
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
index 53481e7db65..744e6b160c0 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
@@ -6,10 +6,8 @@ import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
-import {
-  type ProjectWithAnalytics,
-  TeamProjectsPage,
-} from "./~/projects/TeamProjectsPage";
+import { TeamProjectsPage } from "./~/projects/TeamProjectsPage";
+import type { ProjectWithAnalytics } from "./~/projects/TeamProjectsTable";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string }>;
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index 8db877b1eac..d8b67acf95c 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -1,234 +1,38 @@
 "use client";
-
-import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
-import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
-import { PaginationButtons } from "@/components/pagination-buttons";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
-import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
-import { formatDate } from "date-fns";
-import { PlusIcon, SearchIcon } from "lucide-react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-
-type SortById = "name" | "createdAt" | "monthlyActiveUsers";
-
-export type ProjectWithAnalytics = Project & {
-  monthlyActiveUsers: number;
-};
+import { LazyCreateProjectDialog } from "../../../../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
+import {
+  type ProjectWithAnalytics,
+  TeamProjectsTable,
+} from "./TeamProjectsTable";
 
 export function TeamProjectsPage(props: {
   projects: ProjectWithAnalytics[];
   team: Team;
   client: ThirdwebClient;
 }) {
-  const { projects } = props;
-  const [searchTerm, setSearchTerm] = useState("");
-  const [sortBy, setSortBy] = useState<SortById>("monthlyActiveUsers");
   const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] =
     useState(false);
   const router = useDashboardRouter();
 
-  const sortedProjects = useMemo(() => {
-    let _projectsToShow = !searchTerm
-      ? projects
-      : projects.filter(
-          (project) =>
-            project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            project.publishableKey
-              .toLowerCase()
-              .includes(searchTerm.toLowerCase()),
-        );
-
-    if (sortBy === "name") {
-      _projectsToShow = _projectsToShow.sort((a, b) =>
-        a.name.localeCompare(b.name),
-      );
-    } else if (sortBy === "createdAt") {
-      _projectsToShow = _projectsToShow.sort(
-        (a, b) =>
-          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-      );
-    } else if (sortBy === "monthlyActiveUsers") {
-      _projectsToShow = _projectsToShow.sort(
-        (a, b) => b.monthlyActiveUsers - a.monthlyActiveUsers,
-      );
-    }
-
-    return _projectsToShow;
-  }, [searchTerm, sortBy, projects]);
-
-  const pageSize = 10;
-  const [page, setPage] = useState(1);
-  const paginatedProjects = sortedProjects.slice(
-    (page - 1) * pageSize,
-    page * pageSize,
-  );
-
-  const showPagination = sortedProjects.length > pageSize;
-  const totalPages = Math.ceil(sortedProjects.length / pageSize);
-
   return (
-    <div className="flex grow flex-col">
-      <div className="relative flex flex-col gap-5 rounded-t-lg pb-4 lg:flex-row lg:items-center lg:justify-between lg:border lg:border-b-0 lg:bg-card lg:px-6 lg:py-6">
-        <h2 className="font-semibold text-2xl tracking-tight">Projects</h2>
-
-        {/* Filters + Add New */}
-        <div className="flex flex-col gap-3 md:flex-row md:items-center">
-          <SearchInput
-            value={searchTerm}
-            onValueChange={(v) => {
-              setSearchTerm(v);
-              setPage(1);
-            }}
-          />
-          <div className="flex gap-3">
-            <SelectBy
-              value={sortBy}
-              onChange={(v) => {
-                setSortBy(v);
-                setPage(1);
-              }}
-            />
-            <AddNewButton
-              createProject={() => setIsCreateProjectDialogOpen(true)}
-              teamMembersSettingsPath={`/team/${props.team.slug}/~/settings/members`}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Projects Table */}
-      {paginatedProjects.length === 0 ? (
-        <>
-          {searchTerm !== "" ? (
-            <div className="flex min-h-[450px] grow items-center justify-center border border-border bg-card">
-              <div className="flex flex-col items-center">
-                <p className="mb-5 text-center">No projects found</p>
-              </div>
-            </div>
-          ) : (
-            <div className="flex min-h-[450px] grow items-center justify-center rounded-b-lg border border-border bg-card">
-              <div className="flex flex-col items-center">
-                <p className="mb-5 text-center font-semibold text-lg">
-                  No projects created
-                </p>
-                <Button
-                  className="gap-2 bg-background"
-                  onClick={() => setIsCreateProjectDialogOpen(true)}
-                  variant="outline"
-                >
-                  <PlusIcon className="size-4" />
-                  Create Project
-                </Button>
-              </div>
-            </div>
-          )}
-        </>
-      ) : (
-        <div>
-          <TableContainer
-            className={cn(
-              "lg:rounded-t-none",
-              showPagination && "rounded-b-none",
-            )}
-          >
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="max-w-[300px]">Project</TableHead>
-                  <TableHead>Monthly Active Users</TableHead>
-                  <TableHead className="w-[250px]">Client ID</TableHead>
-                  <TableHead>Created</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedProjects.map((project) => (
-                  <TableRow
-                    key={project.id}
-                    linkBox
-                    className="hover:bg-accent/50"
-                  >
-                    <TableCell>
-                      <Link
-                        className="flex items-center gap-3 before:absolute before:inset-0"
-                        href={`/team/${props.team.slug}/${project.slug}`}
-                      >
-                        <ProjectAvatar
-                          className="size-8 rounded-full"
-                          src={project.image || ""}
-                          client={props.client}
-                        />
-                        <span className="font-medium text-sm">
-                          {project.name}
-                        </span>
-                      </Link>
-                    </TableCell>
-                    <TableCell>
-                      {project.monthlyActiveUsers === 0 ? (
-                        <span className="text-muted-foreground">No Users</span>
-                      ) : (
-                        project.monthlyActiveUsers
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <CopyTextButton
-                        textToCopy={project.publishableKey}
-                        textToShow={`${project.publishableKey.slice(0, 4)}...${project.publishableKey.slice(-4)}`}
-                        copyIconPosition="right"
-                        tooltip={undefined}
-                        variant="ghost"
-                        className="-translate-x-2 z-10 font-mono text-muted-foreground"
-                      />
-                    </TableCell>
-                    <TableCell className="text-muted-foreground">
-                      {formatDate(new Date(project.createdAt), "MMM d, yyyy")}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-
-          {showPagination && (
-            <div className="rounded-b-lg border border-t-0 bg-card p-4">
-              <PaginationButtons
-                activePage={page}
-                onPageClick={setPage}
-                totalPages={totalPages}
-              />
-            </div>
-          )}
-        </div>
-      )}
+    <div>
+      <TeamProjectsTable
+        projects={props.projects}
+        team={props.team}
+        client={props.client}
+        openCreateProjectModal={() => setIsCreateProjectDialogOpen(true)}
+      />
 
       <LazyCreateProjectDialog
         open={isCreateProjectDialogOpen}
         onOpenChange={setIsCreateProjectDialogOpen}
         teamSlug={props.team.slug}
         teamId={props.team.id}
-        onCreateAndComplete={() => {
-          // refresh projects
+        onCreate={() => {
           router.refresh();
         }}
         enableNebulaServiceByDefault={props.team.enabledScopes.includes(
@@ -238,73 +42,3 @@ export function TeamProjectsPage(props: {
     </div>
   );
 }
-
-function SearchInput(props: {
-  value: string;
-  onValueChange: (value: string) => void;
-}) {
-  return (
-    <div className="relative grow">
-      <Input
-        placeholder="Search Projects by name or Client ID"
-        value={props.value}
-        onChange={(e) => props.onValueChange(e.target.value)}
-        className="bg-background pl-9 lg:w-[400px]"
-      />
-      <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
-    </div>
-  );
-}
-
-function AddNewButton(props: {
-  createProject: () => void;
-  teamMembersSettingsPath: string;
-}) {
-  return (
-    <Button
-      variant="default"
-      className="absolute top-0 right-0 gap-2 lg:static"
-      onClick={props.createProject}
-    >
-      <PlusIcon className="size-4" />
-      <span>
-        <span className="hidden lg:inline">Create</span> Project
-      </span>
-    </Button>
-  );
-}
-
-function SelectBy(props: {
-  value: SortById;
-  onChange: (value: SortById) => void;
-}) {
-  const values: SortById[] = ["name", "createdAt", "monthlyActiveUsers"];
-  const valueToLabel: Record<SortById, string> = {
-    name: "Name",
-    createdAt: "Creation Date",
-    monthlyActiveUsers: "Monthly Active Users",
-  };
-
-  return (
-    <Select
-      value={props.value}
-      onValueChange={(v) => {
-        props.onChange(v as SortById);
-      }}
-    >
-      <SelectTrigger className="min-w-[200px] bg-background capitalize">
-        <div className="flex items-center gap-1.5">
-          <span className="text-muted-foreground">Sort by</span>
-          {valueToLabel[props.value]}
-        </div>
-      </SelectTrigger>
-      <SelectContent>
-        {values.map((value) => (
-          <SelectItem key={value} value={value}>
-            {valueToLabel[value]}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.stories.tsx
new file mode 100644
index 00000000000..1c83b33257f
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.stories.tsx
@@ -0,0 +1,83 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { Meta, StoryObj } from "@storybook/react";
+import { projectStub, teamStub } from "../../../../../../stories/stubs";
+import { storybookLog } from "../../../../../../stories/utils";
+import {
+  type ProjectWithAnalytics,
+  TeamProjectsTable,
+} from "./TeamProjectsTable";
+
+const meta: Meta<typeof Variant> = {
+  title: "Team/Projects",
+  component: Variant,
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="container py-10">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Variant>;
+
+function createProjectWithAnalyticsStub(len: number) {
+  return Array.from({ length: len }, (_, i) => {
+    return {
+      ...projectStub(`${i + 1}`, "foo"),
+      monthlyActiveUsers: Math.floor(Math.random() * 1000),
+    };
+  });
+}
+
+export const MultipleProjects: Story = {
+  args: {
+    projects: createProjectWithAnalyticsStub(10),
+  },
+};
+
+export const SingleProject: Story = {
+  args: {
+    projects: createProjectWithAnalyticsStub(1),
+  },
+};
+
+export const NoProjects: Story = {
+  args: {
+    projects: [],
+  },
+};
+
+export const NoUsers: Story = {
+  args: {
+    projects: createProjectWithAnalyticsStub(10).map((p) => ({
+      ...p,
+      monthlyActiveUsers: 0,
+    })),
+  },
+};
+
+const client = getThirdwebClient();
+const team = teamStub("foo", "free");
+
+function Variant(props: {
+  projects: ProjectWithAnalytics[];
+}) {
+  return (
+    <TeamProjectsTable
+      team={team}
+      client={client}
+      projects={props.projects}
+      openCreateProjectModal={() => {
+        storybookLog("showCreateProjectModal");
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.tsx
new file mode 100644
index 00000000000..049b419ce41
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsTable.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import type { Team } from "@/api/team";
+import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
+import { PaginationButtons } from "@/components/pagination-buttons";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { formatDate } from "date-fns";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+
+type SortById = "name" | "createdAt" | "monthlyActiveUsers";
+
+export type ProjectWithAnalytics = Project & {
+  monthlyActiveUsers: number;
+};
+
+export function TeamProjectsTable(props: {
+  projects: ProjectWithAnalytics[];
+  team: Team;
+  client: ThirdwebClient;
+  openCreateProjectModal: () => void;
+}) {
+  const { projects } = props;
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortBy, setSortBy] = useState<SortById>("monthlyActiveUsers");
+
+  const sortedProjects = useMemo(() => {
+    let _projectsToShow = !searchTerm
+      ? projects
+      : projects.filter(
+          (project) =>
+            project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            project.publishableKey
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase()),
+        );
+
+    if (sortBy === "name") {
+      _projectsToShow = _projectsToShow.sort((a, b) =>
+        a.name.localeCompare(b.name),
+      );
+    } else if (sortBy === "createdAt") {
+      _projectsToShow = _projectsToShow.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+      );
+    } else if (sortBy === "monthlyActiveUsers") {
+      _projectsToShow = _projectsToShow.sort(
+        (a, b) => b.monthlyActiveUsers - a.monthlyActiveUsers,
+      );
+    }
+
+    return _projectsToShow;
+  }, [searchTerm, sortBy, projects]);
+
+  const pageSize = 10;
+  const [page, setPage] = useState(1);
+  const paginatedProjects = sortedProjects.slice(
+    (page - 1) * pageSize,
+    page * pageSize,
+  );
+
+  const showPagination = sortedProjects.length > pageSize;
+  const totalPages = Math.ceil(sortedProjects.length / pageSize);
+
+  return (
+    <div className="flex grow flex-col">
+      <div className="relative flex flex-col gap-5 rounded-t-lg pb-4 lg:flex-row lg:items-center lg:justify-between lg:border lg:border-b-0 lg:bg-card lg:px-6 lg:py-6">
+        <h2 className="font-semibold text-2xl tracking-tight">Projects</h2>
+
+        {/* Filters + Add New */}
+        <div className="flex flex-col gap-3 md:flex-row md:items-center">
+          <SearchInput
+            value={searchTerm}
+            onValueChange={(v) => {
+              setSearchTerm(v);
+              setPage(1);
+            }}
+          />
+          <div className="flex gap-3">
+            <SelectBy
+              value={sortBy}
+              onChange={(v) => {
+                setSortBy(v);
+                setPage(1);
+              }}
+            />
+            <AddNewButton
+              createProject={() => props.openCreateProjectModal()}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Projects Table */}
+      {paginatedProjects.length === 0 ? (
+        <>
+          {searchTerm !== "" ? (
+            <div className="flex min-h-[450px] grow items-center justify-center border border-border bg-card">
+              <div className="flex flex-col items-center">
+                <p className="mb-5 text-center">No projects found</p>
+              </div>
+            </div>
+          ) : (
+            <div className="flex min-h-[450px] grow items-center justify-center rounded-b-lg border border-border bg-card">
+              <div className="flex flex-col items-center">
+                <p className="mb-3 text-center font-medium text-lg">
+                  No projects created
+                </p>
+                <Button
+                  className="gap-2 bg-background"
+                  onClick={() => props.openCreateProjectModal()}
+                  variant="outline"
+                >
+                  <PlusIcon className="size-4" />
+                  Create Project
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div>
+          <TableContainer
+            className={cn(
+              "lg:rounded-t-none",
+              showPagination && "rounded-b-none",
+            )}
+          >
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="max-w-[300px]">Project</TableHead>
+                  <TableHead>Monthly Active Users</TableHead>
+                  <TableHead className="w-[250px]">Client ID</TableHead>
+                  <TableHead>Created</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedProjects.map((project) => (
+                  <TableRow
+                    key={project.id}
+                    linkBox
+                    className="hover:bg-accent/50"
+                  >
+                    <TableCell>
+                      <Link
+                        className="flex items-center gap-3 before:absolute before:inset-0"
+                        href={`/team/${props.team.slug}/${project.slug}`}
+                      >
+                        <ProjectAvatar
+                          className="size-8 rounded-full"
+                          src={project.image || ""}
+                          client={props.client}
+                        />
+                        <span className="font-medium text-sm">
+                          {project.name}
+                        </span>
+                      </Link>
+                    </TableCell>
+                    <TableCell>
+                      {project.monthlyActiveUsers === 0 ? (
+                        <span className="text-muted-foreground">No Users</span>
+                      ) : (
+                        project.monthlyActiveUsers
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <CopyTextButton
+                        textToCopy={project.publishableKey}
+                        textToShow={`${project.publishableKey.slice(0, 4)}...${project.publishableKey.slice(-4)}`}
+                        copyIconPosition="right"
+                        tooltip={undefined}
+                        variant="ghost"
+                        className="-translate-x-2 z-10 font-mono text-muted-foreground"
+                      />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(new Date(project.createdAt), "MMM d, yyyy")}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          {showPagination && (
+            <div className="rounded-b-lg border border-t-0 bg-card p-4">
+              <PaginationButtons
+                activePage={page}
+                onPageClick={setPage}
+                totalPages={totalPages}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SearchInput(props: {
+  value: string;
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <div className="relative grow">
+      <Input
+        placeholder="Search Projects by name or Client ID"
+        value={props.value}
+        onChange={(e) => props.onValueChange(e.target.value)}
+        className="bg-background pl-9 lg:w-[400px]"
+      />
+      <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+    </div>
+  );
+}
+
+function AddNewButton(props: {
+  createProject: () => void;
+}) {
+  return (
+    <Button
+      variant="default"
+      className="absolute top-0 right-0 gap-2 lg:static"
+      onClick={props.createProject}
+    >
+      <PlusIcon className="size-4" />
+      <span>
+        <span className="hidden lg:inline">Create</span> Project
+      </span>
+    </Button>
+  );
+}
+
+function SelectBy(props: {
+  value: SortById;
+  onChange: (value: SortById) => void;
+}) {
+  const values: SortById[] = ["name", "createdAt", "monthlyActiveUsers"];
+  const valueToLabel: Record<SortById, string> = {
+    name: "Name",
+    createdAt: "Creation Date",
+    monthlyActiveUsers: "Monthly Active Users",
+  };
+
+  return (
+    <Select
+      value={props.value}
+      onValueChange={(v) => {
+        props.onChange(v as SortById);
+      }}
+    >
+      <SelectTrigger className="min-w-[200px] bg-background capitalize">
+        <div className="flex items-center gap-1.5">
+          <span className="text-muted-foreground">Sort by</span>
+          {valueToLabel[props.value]}
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        {values.map((value) => (
+          <SelectItem key={value} value={value}>
+            {valueToLabel[value]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
index 45464173d5c..6d44c407ee7 100644
--- a/apps/dashboard/src/app/team/[team_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
@@ -1,3 +1,4 @@
+import { getProjects } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { AppFooter } from "@/components/blocks/app-footer";
 import { redirect } from "next/navigation";
@@ -13,7 +14,10 @@ export default async function RootTeamLayout(props: {
   params: Promise<{ team_slug: string }>;
 }) {
   const { team_slug } = await props.params;
-  const team = await getTeamBySlug(team_slug).catch(() => null);
+  const [team, projects] = await Promise.all([
+    getTeamBySlug(team_slug).catch(() => null),
+    getProjects(team_slug),
+  ]);
 
   if (!team) {
     redirect("/team");
@@ -23,6 +27,10 @@ export default async function RootTeamLayout(props: {
     redirect(`/get-started/team/${team.slug}`);
   }
 
+  if (projects.length === 0) {
+    redirect(`/get-started/team/${team.slug}/create-project`);
+  }
+
   return (
     <div className="flex min-h-dvh flex-col">
       <div className="flex grow flex-col">
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
index 24472c44080..8f6bad50b3f 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx
@@ -83,7 +83,7 @@ export function TeamHeaderLoggedIn(props: {
               isOpen: false,
             })
           }
-          onCreateAndComplete={() => {
+          onCreate={() => {
             // refresh projects
             router.refresh();
           }}
diff --git a/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx b/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
index be65c35a259..24d7e371530 100644
--- a/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
+++ b/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
@@ -5,14 +5,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
 import {
   FormControl,
@@ -27,7 +20,6 @@ import { Textarea } from "@/components/ui/textarea";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { createProjectClient } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectService } from "@thirdweb-dev/service-utils";
 import { SERVICES } from "@thirdweb-dev/service-utils";
@@ -52,7 +44,7 @@ export type CreateProjectPrefillOptions = {
 export type CreateProjectDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreateAndComplete?: () => void;
+  onCreate?: () => void;
   prefill?: CreateProjectPrefillOptions;
   enableNebulaServiceByDefault: boolean;
   teamId: string;
@@ -79,7 +71,7 @@ export default CreateProjectDialog;
 export const CreateProjectDialogUI = (props: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreateAndComplete?: () => void;
+  onCreate?: () => void;
   createProject: (param: Partial<Project>) => Promise<{
     project: Project;
     secret: string;
@@ -88,61 +80,80 @@ export const CreateProjectDialogUI = (props: {
   enableNebulaServiceByDefault: boolean;
   teamSlug: string;
 }) => {
-  const [screen, setScreen] = useState<
-    { id: "create" } | { id: "api-details"; project: Project; secret: string }
-  >({ id: "create" });
-  const { open, onOpenChange } = props;
-
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(v) => {
-        // Prevent closing the dialog when the API key is created - to make sure user does not accidentally close the dialog without copying the secret key
-        if (screen.id === "api-details") {
-          return;
-        }
-
-        onOpenChange(v);
-      }}
-    >
+    <Dialog open={props.open}>
       <DialogContent
-        className="overflow-hidden p-0"
-        dialogCloseClassName={screen.id === "api-details" ? "hidden" : ""}
+        className="overflow-hidden bg-card p-0"
+        dialogCloseClassName={"hidden"}
+        aria-label="create-project"
       >
+        <DialogTitle className="sr-only">Create Project</DialogTitle>
         <DynamicHeight>
-          {screen.id === "create" && (
-            <CreateProjectForm
-              createProject={props.createProject}
-              onProjectCreated={(params) => {
-                setScreen({
-                  id: "api-details",
-                  project: params.project,
-                  secret: params.secret,
-                });
-              }}
-              prefill={props.prefill}
-              enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
-            />
-          )}
-
-          {screen.id === "api-details" && (
-            <CreatedProjectDetails
-              project={screen.project}
-              secret={screen.secret}
-              teamSlug={props.teamSlug}
-              onComplete={() => {
-                onOpenChange(false);
-                setScreen({ id: "create" });
-                props.onCreateAndComplete?.();
-              }}
-            />
-          )}
+          <CreateProjectDialogUIContent
+            onCreate={props.onCreate}
+            createProject={props.createProject}
+            prefill={props.prefill}
+            enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+            teamSlug={props.teamSlug}
+            closeModal={() => props.onOpenChange(false)}
+          />
         </DynamicHeight>
       </DialogContent>
     </Dialog>
   );
 };
 
+function CreateProjectDialogUIContent(props: {
+  onCreate?: () => void;
+  createProject: (param: Partial<Project>) => Promise<{
+    project: Project;
+    secret: string;
+  }>;
+  prefill?: CreateProjectPrefillOptions;
+  enableNebulaServiceByDefault: boolean;
+  teamSlug: string;
+  closeModal: () => void;
+}) {
+  const [screen, setScreen] = useState<
+    { id: "create" } | { id: "api-details"; project: Project; secret: string }
+  >({ id: "create" });
+
+  if (screen.id === "create") {
+    return (
+      <CreateProjectForm
+        showTitle={true}
+        closeModal={props.closeModal}
+        createProject={props.createProject}
+        onProjectCreated={(params) => {
+          setScreen({
+            id: "api-details",
+            project: params.project,
+            secret: params.secret,
+          });
+          props.onCreate?.();
+        }}
+        prefill={props.prefill}
+        enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+      />
+    );
+  }
+
+  if (screen.id === "api-details") {
+    return (
+      <CreatedProjectDetails
+        project={screen.project}
+        secret={screen.secret}
+        teamSlug={props.teamSlug}
+        onComplete={() => {
+          props.closeModal();
+        }}
+      />
+    );
+  }
+
+  return null;
+}
+
 const createProjectFormSchema = z.object({
   name: projectNameSchema,
   domains: projectDomainsSchema,
@@ -150,7 +161,9 @@ const createProjectFormSchema = z.object({
 
 type CreateProjectFormSchema = z.infer<typeof createProjectFormSchema>;
 
-function CreateProjectForm(props: {
+// Note: Do not use any dialog components
+// This is also used in create project onboarding flow
+export function CreateProjectForm(props: {
   createProject: (param: Partial<Project>) => Promise<{
     project: Project;
     secret: string;
@@ -161,6 +174,8 @@ function CreateProjectForm(props: {
     project: Project;
     secret: string;
   }) => void;
+  closeModal: (() => void) | undefined;
+  showTitle: boolean;
 }) {
   const [showAlert, setShowAlert] = useState<"no-domain" | "any-domain">();
   const trackEvent = useTrack();
@@ -272,9 +287,11 @@ function CreateProjectForm(props: {
     <Form {...form}>
       <form onSubmit={handleSubmit} autoComplete="off">
         <div className="p-6">
-          <DialogHeader className="mb-4">
-            <DialogTitle className="text-2xl">Create Project</DialogTitle>
-          </DialogHeader>
+          {props.showTitle && (
+            <h2 className="mb-3 font-semibold text-xl tracking-tight">
+              Create Project
+            </h2>
+          )}
 
           <div className="flex flex-col gap-6">
             <FormField
@@ -285,7 +302,7 @@ function CreateProjectForm(props: {
                   <FormLabel>Project Name</FormLabel>
                   <FormControl>
                     <Input
-                      className="bg-card"
+                      className="bg-background"
                       placeholder="My Project"
                       {...field}
                     />
@@ -316,7 +333,7 @@ function CreateProjectForm(props: {
                     <FormLabel>Allowed Domains</FormLabel>
                     <FormControl>
                       <Textarea
-                        className="bg-card"
+                        className="bg-background"
                         placeholder="thirdweb.com, *.example.com, localhost:3000"
                         {...field}
                       />
@@ -364,21 +381,26 @@ function CreateProjectForm(props: {
           </div>
         </div>
 
-        <DialogFooter className="flex gap-4 border-border border-t bg-card p-6 md:gap-2">
-          <DialogClose asChild>
-            <Button variant="outline" className="min-w-28 gap-2">
+        <div className="flex justify-end gap-3 border-border border-t bg-card p-6">
+          {props.closeModal && (
+            <Button
+              variant="outline"
+              className="bg-background"
+              onClick={props.closeModal}
+            >
               Cancel
             </Button>
-          </DialogClose>
+          )}
+
           <Button
             type="submit"
             disabled={createProject.isPending}
-            className="min-w-28 gap-2"
+            className="gap-2"
           >
             {createProject.isPending && <Spinner className="size-4" />}
-            Create
+            Create Project
           </Button>
-        </DialogFooter>
+        </div>
       </form>
     </Form>
   );
@@ -393,25 +415,23 @@ function DomainsAlert(props: {
   return (
     <div>
       <div className="mb-4 p-6">
-        <DialogHeader>
-          <DialogTitle className="text-2xl">
-            {props.type === "no-domain" && "No Domains Configured"}
-            {props.type === "any-domain" && "Unrestricted Web Access"}
-          </DialogTitle>
-          <DialogDescription>
-            {props.type === "no-domain" &&
-              "This will deny requests from all origins, rendering the key unusable in frontend applications. Proceed only if you intend to use this key in server or native apps environments."}
-            {props.type === "any-domain" &&
-              "Requests from all origins will be authorized. Your key can be used by any website without restriction"}
-          </DialogDescription>
-        </DialogHeader>
+        <h2 className="mb-1 font-semibold text-xl tracking-tight">
+          {props.type === "no-domain" && "No Domains Configured"}
+          {props.type === "any-domain" && "Unrestricted Web Access"}
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          {props.type === "no-domain" &&
+            "This will deny requests from all origins, rendering the key unusable in frontend applications. Proceed only if you intend to use this key in server or native apps environments."}
+          {props.type === "any-domain" &&
+            "Requests from all origins will be authorized. Your key can be used by any website without restriction"}
+        </p>
       </div>
 
-      <DialogFooter className="!justify-between flex gap-4 border-border border-t bg-card p-6">
+      <div className="flex justify-between gap-4 border-border border-t bg-card p-6">
         <Button
           variant="outline"
           onClick={props.onGoBack}
-          className="min-w-28 gap-2"
+          className="min-w-28 gap-2 bg-background"
         >
           <ArrowLeftIcon className="size-4" />
           Update Domains
@@ -427,15 +447,17 @@ function DomainsAlert(props: {
           {props.isCreating && <Spinner className="size-4" />}
           Proceed
         </Button>
-      </DialogFooter>
+      </div>
     </div>
   );
 }
 
-function CreatedProjectDetails(props: {
+// Note: Do not use any dialog components
+// This is also used in create project onboarding flow
+export function CreatedProjectDetails(props: {
   project: Project;
   secret: string;
-  onComplete: () => void;
+  onComplete?: () => void;
   teamSlug: string | undefined;
 }) {
   const [secretStored, setSecretStored] = useState(false);
@@ -446,11 +468,9 @@ function CreatedProjectDetails(props: {
   return (
     <div>
       <div className="p-6">
-        <DialogHeader>
-          <DialogTitle className="text-2xl">{props.project.name}</DialogTitle>
-        </DialogHeader>
-
-        <div className="h-3" />
+        <h2 className="mb-4 font-semibold text-xl tracking-tight">
+          {props.project.name}
+        </h2>
 
         <section>
           <h3>Client ID</h3>
@@ -460,7 +480,7 @@ function CreatedProjectDetails(props: {
 
           <CopyTextButton
             textToCopy={clientId}
-            className="!h-auto w-full justify-between truncate bg-card px-3 py-3 font-mono"
+            className="!h-auto w-full justify-between truncate bg-background px-3 py-3 font-mono"
             textToShow={clientId}
             copyIconPosition="right"
             tooltip="Copy Client ID"
@@ -477,7 +497,7 @@ function CreatedProjectDetails(props: {
 
           <CopyTextButton
             textToCopy={props.secret || ""}
-            className="!h-auto w-full justify-between truncate bg-card px-3 py-3 font-mono"
+            className="!h-auto w-full justify-between truncate bg-background px-3 py-3 font-mono"
             textToShow={props.secret || ""}
             copyIconPosition="right"
             tooltip="Copy Secret Key"
@@ -506,16 +526,18 @@ function CreatedProjectDetails(props: {
         </Alert>
       </div>
 
-      <DialogFooter className="flex border-border border-t bg-card p-6">
-        <Button
-          type="button"
-          onClick={props.onComplete}
-          disabled={!secretStored}
-          variant="outline"
-          className="min-w-28 gap-2"
-        >
-          {props.teamSlug ? "Close" : "Complete"}
-        </Button>
+      <div className="flex justify-end gap-4 border-border border-t bg-card p-6">
+        {props.onComplete && (
+          <Button
+            type="button"
+            onClick={props.onComplete}
+            disabled={!secretStored}
+            variant="outline"
+            className="min-w-28 gap-2"
+          >
+            {props.teamSlug ? "Close" : "Complete"}
+          </Button>
+        )}
 
         {props.teamSlug && (
           <Button
@@ -529,7 +551,7 @@ function CreatedProjectDetails(props: {
             <ExternalLinkIcon className="size-4" />
           </Button>
         )}
-      </DialogFooter>
+      </div>
     </div>
   );
 }