diff --git a/web-admin/src/features/branches/deployment-utils.ts b/web-admin/src/features/branches/deployment-utils.ts
index d9cd7016ca9..226f263fd5f 100644
--- a/web-admin/src/features/branches/deployment-utils.ts
+++ b/web-admin/src/features/branches/deployment-utils.ts
@@ -77,7 +77,7 @@ export async function maybeRedirectToEditableDeployment(
   const isActiveEditableDeployment =
     editableDeployment && isActiveDeployment(editableDeployment);
   // Editable deployment is inactive as well, project is probably hibernating, skip redirect.
-  if (!isActiveEditableDeployment) return;
+  if (!isActiveEditableDeployment && prodDeployment) return;
 
   // If user is already in a specific deployment do not redirect.
   // This method is meant as a convenience for direct links to unpublished project.
diff --git a/web-admin/src/features/projects/ProjectCard.svelte b/web-admin/src/features/projects/ProjectCard.svelte
index 0122d8102ac..be0df9e94a8 100644
--- a/web-admin/src/features/projects/ProjectCard.svelte
+++ b/web-admin/src/features/projects/ProjectCard.svelte
@@ -7,12 +7,23 @@
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { createAdminServiceGetProject } from "../../client";
   import ProjectAccessControls from "./ProjectAccessControls.svelte";
+  import ProjectCardActions from "@rilldata/web-admin/features/projects/ProjectCardActions.svelte";
+  import GuardedDeleteProjectConfirmation from "@rilldata/web-admin/features/projects/settings/GuardedDeleteProjectConfirmation.svelte";
+  import ProjectRenameDialog from "@rilldata/web-admin/features/projects/settings/ProjectRenameDialog.svelte";
+  import EditBranchDialog from "@rilldata/web-admin/features/edit-session/EditBranchDialog.svelte";
 
-  export let organization: string;
-  export let project: string;
+  let { organization, project }: { organization: string; project: string } =
+    $props();
 
   // Check whether project is public or private
-  $: proj = createAdminServiceGetProject(organization, project);
+  let proj = $derived(createAdminServiceGetProject(organization, project));
+  let primaryBranch = $derived($proj.data?.project?.primaryBranch);
+
+  let hovering = $state(false);
+  let actionsOpen = $state(false);
+  let editProjectOpen = $state(false);
+  let renameProjectOpen = $state(false);
+  let deleteProjectOpen = $state(false);
 
   function doesProjectNameIncludeUnderscores(project: string) {
     return project.includes("_");
@@ -20,7 +31,7 @@
 </script>
 
 {#if $proj.data}
-  <Card href="/{organization}/{project}">
+  <Card href="/{organization}/{project}" bind:hovering>
     <!-- Project name -->
     <h2
       class="text-fg-primary font-medium text-lg text-center px-4 {doesProjectNameIncludeUnderscores(
@@ -31,6 +42,19 @@
     >
       {project}
     </h2>
+    <!-- Project actions -->
+    {#if hovering || actionsOpen}
+      <div class="absolute top-2.5 right-2.5 text-fg-secondary">
+        <ProjectCardActions
+          {organization}
+          {project}
+          bind:open={actionsOpen}
+          onEdit={() => (editProjectOpen = true)}
+          onRename={() => (renameProjectOpen = true)}
+          onDelete={() => (deleteProjectOpen = true)}
+        />
+      </div>
+    {/if}
     <!-- Permissions tag -->
     <Tag>
       <ProjectAccessControls {organization} {project}>
@@ -60,3 +84,19 @@
     </div>
   </Card>
 {/if}
+
+<ProjectRenameDialog {organization} {project} bind:open={renameProjectOpen} />
+
+<GuardedDeleteProjectConfirmation
+  {organization}
+  {project}
+  bind:open={deleteProjectOpen}
+  button={false}
+/>
+
+<EditBranchDialog
+  bind:open={editProjectOpen}
+  {organization}
+  {project}
+  {primaryBranch}
+/>
diff --git a/web-admin/src/features/projects/ProjectCardActions.svelte b/web-admin/src/features/projects/ProjectCardActions.svelte
new file mode 100644
index 00000000000..31b6951b0f9
--- /dev/null
+++ b/web-admin/src/features/projects/ProjectCardActions.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import * as Dropdown from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import FeatherEditIcon from "@rilldata/web-common/components/icons/FeatherEditIcon.svelte";
+  import PencilIcon from "@rilldata/web-common/components/icons/PencilIcon.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import { ShareIcon } from "lucide-svelte";
+
+  let {
+    organization,
+    project,
+    open = $bindable(false),
+    onEdit,
+    onRename,
+    onDelete,
+  }: {
+    organization: string;
+    project: string;
+    open?: boolean;
+    onEdit: () => void;
+    onRename: () => void;
+    onDelete: () => void;
+  } = $props();
+</script>
+
+<Dropdown.Root bind:open>
+  <Dropdown.Trigger>
+    <ThreeDot size="16px" />
+  </Dropdown.Trigger>
+  <Dropdown.Content class="w-48" align="start" side="right">
+    <Dropdown.Item class="text-sm" onclick={onEdit}>
+      <FeatherEditIcon /> Edit
+    </Dropdown.Item>
+    <Dropdown.Item class="text-sm" onclick={onRename}>
+      <PencilIcon /> Rename
+    </Dropdown.Item>
+    <Dropdown.Item
+      href="/{organization}/{project}/-/dashboards?share=true"
+      class="text-sm"
+    >
+      <ShareIcon size={14} /> Share
+    </Dropdown.Item>
+    <Dropdown.Item class="text-sm text-destructive" onclick={onDelete}>
+      <Trash /> Delete
+    </Dropdown.Item>
+  </Dropdown.Content>
+</Dropdown.Root>
diff --git a/web-admin/src/features/projects/ProjectCards.svelte b/web-admin/src/features/projects/ProjectCards.svelte
index 33a643e77bc..a2c374fa1c0 100644
--- a/web-admin/src/features/projects/ProjectCards.svelte
+++ b/web-admin/src/features/projects/ProjectCards.svelte
@@ -5,9 +5,19 @@
   import { listProjectsForOrgQueryOptions } from "@rilldata/web-admin/features/projects/list-projects-query-options";
   import { createQuery } from "@tanstack/svelte-query";
 
-  export let organization: string;
+  let {
+    organization,
+    createProjectsPermission,
+  }: { organization: string; createProjectsPermission: boolean } = $props();
 
-  $: projs = createQuery(listProjectsForOrgQueryOptions(organization));
+  let projectsQuery = $derived(
+    createQuery(listProjectsForOrgQueryOptions(organization)),
+  );
+  let projects = $derived($projectsQuery.data?.projects ?? []);
+
+  let showNewProject = $derived(
+    projectWelcomeEnabled && createProjectsPermission,
+  );
 </script>
 
 <div class="flex flex-col gap-y-4">
@@ -15,24 +25,22 @@
     class="flex flex-row items-center text-fg-secondary text-base font-normal leading-normal"
   >
     <span class="grow">Check out your projects below.</span>
-    {#if projectWelcomeEnabled}
-      <Button type="primary" href="/{organization}/-/create-project">
-        Create new
+    {#if showNewProject}
+      <Button type="secondary" href="/{organization}/-/create-project">
+        + New project
       </Button>
     {/if}
   </span>
 
-  {#if $projs.data && $projs.data.projects?.length === 0}
-    <p class="text-fg-secondary text-xs">
-      This organization has no projects yet.
-    </p>
-  {:else if $projs.data && $projs.data.projects?.length > 0}
-    <ol class="flex gap-6 flex-wrap">
-      {#each $projs.data.projects as proj}
-        <li>
-          <ProjectCard {organization} project={proj.name} />
-        </li>
-      {/each}
-    </ol>
-  {/if}
+  <ol class="flex gap-6 flex-wrap">
+    {#each projects as proj (proj.name)}
+      <li>
+        <ProjectCard {organization} project={proj.name} />
+      </li>
+    {:else}
+      <p class="text-fg-secondary text-xs">
+        This organization has no projects yet.
+      </p>
+    {/each}
+  </ol>
 </div>
diff --git a/web-admin/src/features/projects/settings/DeleteProject.svelte b/web-admin/src/features/projects/settings/DeleteProject.svelte
index 5550a825066..c15689b8fbb 100644
--- a/web-admin/src/features/projects/settings/DeleteProject.svelte
+++ b/web-admin/src/features/projects/settings/DeleteProject.svelte
@@ -1,44 +1,9 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import {
-    createAdminServiceDeleteProject,
-    getAdminServiceGetProjectQueryKey,
-    getAdminServiceListProjectsForOrganizationQueryKey,
-  } from "@rilldata/web-admin/client";
   import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
-  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-  import AlertDialogGuardedConfirmation from "@rilldata/web-common/components/alert-dialog/alert-dialog-guarded-confirmation.svelte";
+  import GuardedDeleteProjectConfirmation from "@rilldata/web-admin/features/projects/settings/GuardedDeleteProjectConfirmation.svelte";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
-
-  const deleteProjectMutation = createAdminServiceDeleteProject();
-
-  let deleteProjectResult = $derived($deleteProjectMutation);
-
-  async function deleteProject() {
-    await $deleteProjectMutation.mutateAsync({
-      org: organization,
-      project,
-    });
-
-    // Clean up cache before navigating to ensure the new page has fresh data
-    queryClient.removeQueries({
-      queryKey: getAdminServiceGetProjectQueryKey(organization, project),
-    });
-    await queryClient.invalidateQueries({
-      queryKey:
-        getAdminServiceListProjectsForOrganizationQueryKey(organization),
-    });
-
-    eventBus.emit("notification", {
-      message: "Deleted project",
-    });
-
-    await goto(`/${organization}`);
-  }
 </script>
 
 <SettingsContainer title="Delete Project">
@@ -46,17 +11,6 @@
   platform. This action is not reversible — please continue with caution.
 
   {#snippet action()}
-    <AlertDialogGuardedConfirmation
-      title="Delete Project?"
-      description={`The project "${project}" will be permanently deleted along with all its dashboards, data, and settings. This action cannot be undone.`}
-      confirmText={`delete ${project}`}
-      confirmButtonText="Delete"
-      confirmButtonType="destructive"
-      loading={deleteProjectResult.isPending}
-      error={deleteProjectResult.error?.message}
-      onConfirm={deleteProject}
-    >
-      <Button type="destructive">Delete Project</Button>
-    </AlertDialogGuardedConfirmation>
+    <GuardedDeleteProjectConfirmation {organization} {project} />
   {/snippet}
 </SettingsContainer>
diff --git a/web-admin/src/features/projects/settings/GuardedDeleteProjectConfirmation.svelte b/web-admin/src/features/projects/settings/GuardedDeleteProjectConfirmation.svelte
new file mode 100644
index 00000000000..d0f9434edfb
--- /dev/null
+++ b/web-admin/src/features/projects/settings/GuardedDeleteProjectConfirmation.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button/index.ts";
+  import AlertDialogGuardedConfirmation from "@rilldata/web-common/components/alert-dialog/alert-dialog-guarded-confirmation.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
+  import {
+    createAdminServiceDeleteProject,
+    getAdminServiceGetProjectQueryKey,
+    getAdminServiceListProjectsForOrganizationQueryKey,
+  } from "@rilldata/web-admin/client/index.ts";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus.ts";
+  import { goto } from "$app/navigation";
+
+  let {
+    organization,
+    project,
+    open = $bindable(false),
+    button = true,
+  }: {
+    organization: string;
+    project: string;
+    open?: boolean;
+    button?: boolean;
+  } = $props();
+
+  const deleteProjectMutation = createAdminServiceDeleteProject();
+
+  let deleteProjectResult = $derived($deleteProjectMutation);
+
+  async function deleteProject() {
+    await $deleteProjectMutation.mutateAsync({
+      org: organization,
+      project,
+    });
+
+    // Clean up cache before navigating to ensure the new page has fresh data
+    queryClient.removeQueries({
+      queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+    });
+    await queryClient.invalidateQueries({
+      queryKey:
+        getAdminServiceListProjectsForOrganizationQueryKey(organization),
+    });
+
+    eventBus.emit("notification", {
+      message: "Deleted project",
+    });
+
+    await goto(`/${organization}`);
+  }
+</script>
+
+<AlertDialogGuardedConfirmation
+  bind:open
+  title="Delete Project?"
+  description={`The project "${project}" will be permanently deleted along with all its dashboards, data, and settings. This action cannot be undone.`}
+  confirmText={`delete ${project}`}
+  confirmButtonText="Delete"
+  confirmButtonType="destructive"
+  loading={deleteProjectResult.isPending}
+  error={deleteProjectResult.error?.message}
+  onConfirm={deleteProject}
+>
+  {#if button}
+    <Button type="destructive">Delete Project</Button>
+  {:else}
+    <div class="hidden"></div>
+  {/if}
+</AlertDialogGuardedConfirmation>
diff --git a/web-admin/src/features/projects/settings/ProjectNameSettings.svelte b/web-admin/src/features/projects/settings/ProjectNameSettings.svelte
index 915c639fbe8..8db98c0d1ee 100644
--- a/web-admin/src/features/projects/settings/ProjectNameSettings.svelte
+++ b/web-admin/src/features/projects/settings/ProjectNameSettings.svelte
@@ -1,173 +1,37 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import {
-    createAdminServiceGetProject,
-    createAdminServiceUpdateProject,
-    getAdminServiceGetProjectQueryKey,
-    getAdminServiceListProjectsForOrganizationQueryKey,
-    type RpcStatus,
-  } from "@rilldata/web-admin/client";
-  import { parseUpdateProjectError } from "@rilldata/web-admin/features/projects/settings/errors";
   import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
   import { Button } from "@rilldata/web-common/components/button";
-  import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import { sanitizeSlug } from "@rilldata/web-common/lib/string-utils";
-  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-  import type { AxiosError } from "axios";
-  import { defaults, superForm } from "sveltekit-superforms";
-  import { yup } from "sveltekit-superforms/adapters";
-  import { object, string } from "yup";
+  import ProjectRenameForm, {
+    ProjectRenameFormId,
+  } from "@rilldata/web-admin/features/projects/settings/ProjectRenameForm.svelte";
+  import { goto } from "$app/navigation";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
 
-  // Track if form has been initialized to prevent overwriting user edits
-  let formInitialized = false;
-
-  const initialValues: {
-    name: string;
-    description: string;
-  } = {
-    name: "",
-    description: "",
-  };
-  const schema = yup(
-    object({
-      name: string().required(),
-      description: string(),
-    }),
-  );
-
-  const updateProjectMutation = createAdminServiceUpdateProject();
-
-  const { form, errors, enhance, submit } = superForm(
-    defaults(initialValues, schema),
-    {
-      SPA: true,
-      validators: schema,
-      async onUpdate({ form }) {
-        if (!form.valid) return;
-        const values = form.data;
-
-        const newProject = sanitizeSlug(values.name);
-
-        try {
-          await $updateProjectMutation.mutateAsync({
-            org: organization,
-            project,
-            data: {
-              newName: newProject,
-              description: values.description,
-            },
-          });
-
-          await queryClient.invalidateQueries({
-            queryKey:
-              getAdminServiceListProjectsForOrganizationQueryKey(organization),
-          });
-        } catch (err) {
-          const parsedErr = parseUpdateProjectError(
-            err as AxiosError<RpcStatus>,
-          );
-          if (parsedErr.duplicateProject) {
-            form.errors.name = [`The name ${newProject} is already taken`];
-          }
-          return;
-        }
+  let loading = $state(false);
+  let changed = $state(false);
 
-        if (project !== newProject) {
-          queryClient.removeQueries({
-            queryKey: getAdminServiceGetProjectQueryKey(organization, project),
-          });
-          setTimeout(() => goto(`/${organization}/${newProject}/-/settings`));
-        } else {
-          void queryClient.refetchQueries({
-            queryKey: getAdminServiceGetProjectQueryKey(organization, project),
-          });
-        }
-        eventBus.emit("notification", {
-          message: "Updated project",
-        });
-      },
-      resetForm: false,
-    },
-  );
-
-  let projectResp = $derived(
-    createAdminServiceGetProject(organization, project),
-  );
-
-  // Only sync server data to form on initial load or when form hasn't been modified
-  $effect(() => {
-    if ($projectResp.data?.project && !formInitialized) {
-      $form.name = $projectResp.data.project.name ?? "";
-      $form.description = $projectResp.data.project.description ?? "";
-      formInitialized = true;
+  function onRename(newProject: string) {
+    console.log(newProject, project);
+    if (newProject !== project) {
+      void goto(`/${organization}/${newProject}/-/settings`);
     }
-  });
-
-  let changed = $derived(
-    $projectResp.data?.project?.name !== $form.name ||
-      $projectResp.data?.project?.description !== $form.description,
-  );
-
-  let error = $derived(
-    parseUpdateProjectError(
-      $updateProjectMutation.error as unknown as AxiosError<RpcStatus>,
-    ),
-  );
+  }
 </script>
 
 <SettingsContainer title="Project">
-  <form
-    id="project-update-form"
-    onsubmit={(e) => {
-      e.preventDefault();
-      submit(e);
-    }}
-    class="update-project-form"
-    use:enhance
-  >
-    <Input
-      bind:value={$form.name}
-      errors={$errors?.name}
-      id="name"
-      label="Name"
-      description={`Your project will be available at https://ui.rilldata.com/${organization}/${sanitizeSlug($form.name)}.`}
-      textClass="text-sm"
-      alwaysShowError
-      additionalClass="max-w-[520px]"
-    />
-    <Input
-      bind:value={$form.description}
-      errors={$errors?.description}
-      id="description"
-      label="Description"
-      placeholder="Describe your project"
-      textClass="text-sm"
-      additionalClass="max-w-[520px]"
-    />
-  </form>
-  {#if error?.message}
-    <div class="text-red-500 text-sm py-px">
-      {error.message}
-    </div>
-  {/if}
+  <ProjectRenameForm {organization} {project} bind:loading bind:changed />
   {#snippet action()}
     <Button
-      onClick={submit}
+      submitForm
+      form={ProjectRenameFormId}
       type="primary"
-      loading={$updateProjectMutation.isPending}
+      {loading}
       disabled={!changed}
+      {onRename}
     >
       Save
     </Button>
   {/snippet}
 </SettingsContainer>
-
-<style lang="postcss">
-  .update-project-form {
-    @apply flex flex-col gap-y-5 w-full;
-  }
-</style>
diff --git a/web-admin/src/features/projects/settings/ProjectRenameDialog.svelte b/web-admin/src/features/projects/settings/ProjectRenameDialog.svelte
new file mode 100644
index 00000000000..029e2481033
--- /dev/null
+++ b/web-admin/src/features/projects/settings/ProjectRenameDialog.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import * as Dialog from "@rilldata/web-common/components/dialog";
+  import ProjectRenameForm, {
+    ProjectRenameFormId,
+  } from "@rilldata/web-admin/features/projects/settings/ProjectRenameForm.svelte";
+  import { Button } from "@rilldata/web-common/components/button/index.ts";
+
+  let {
+    organization,
+    project,
+    open = $bindable(false),
+  }: { organization: string; project: string; open: boolean } = $props();
+
+  let loading = $state(false);
+  let changed = $state(false);
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger><div class="hidden"></div></Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Title>Rename Project</Dialog.Title>
+    <ProjectRenameForm {organization} {project} bind:loading bind:changed />
+    <Dialog.Footer>
+      <Dialog.Close>Cancel</Dialog.Close>
+      <Button
+        submitForm
+        form={ProjectRenameFormId}
+        type="primary"
+        {loading}
+        disabled={!changed}
+        onRename={() => (open = false)}
+      >
+        Rename
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/web-admin/src/features/projects/settings/ProjectRenameForm.svelte b/web-admin/src/features/projects/settings/ProjectRenameForm.svelte
new file mode 100644
index 00000000000..af17d12d41d
--- /dev/null
+++ b/web-admin/src/features/projects/settings/ProjectRenameForm.svelte
@@ -0,0 +1,165 @@
+<script module lang="ts">
+  export const ProjectRenameFormId = "project-update-form";
+</script>
+
+<script lang="ts">
+  import {
+    createAdminServiceGetProject,
+    createAdminServiceUpdateProject,
+    getAdminServiceGetProjectQueryKey,
+    getAdminServiceListProjectsForOrganizationQueryKey,
+    type RpcStatus,
+  } from "@rilldata/web-admin/client";
+  import { parseUpdateProjectError } from "@rilldata/web-admin/features/projects/settings/errors";
+  import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import { sanitizeSlug } from "@rilldata/web-common/lib/string-utils";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import type { AxiosError } from "axios";
+  import { defaults, superForm } from "sveltekit-superforms";
+  import { yup } from "sveltekit-superforms/adapters";
+  import { object, string } from "yup";
+
+  let {
+    organization,
+    project,
+    loading = $bindable(false),
+    changed = $bindable(false),
+    onRename,
+  }: {
+    organization: string;
+    project: string;
+    loading: boolean;
+    changed: boolean;
+    onRename?: (newProject: string) => void;
+  } = $props();
+
+  const initialValues: {
+    name: string;
+  } = {
+    name: "",
+  };
+  const schema = yup(
+    object({
+      name: string().required(),
+    }),
+  );
+
+  const updateProjectMutation = createAdminServiceUpdateProject();
+
+  const { form, tainted, errors, enhance, submit, submitting } = superForm(
+    defaults(initialValues, schema),
+    {
+      SPA: true,
+      validators: schema,
+      async onUpdate({ form }) {
+        if (!form.valid) return;
+        const values = form.data;
+
+        const newProject = sanitizeSlug(values.name);
+
+        try {
+          await $updateProjectMutation.mutateAsync({
+            org: organization,
+            project,
+            data: {
+              newName: newProject,
+            },
+          });
+
+          await queryClient.invalidateQueries({
+            queryKey:
+              getAdminServiceListProjectsForOrganizationQueryKey(organization),
+          });
+        } catch (err) {
+          const parsedErr = parseUpdateProjectError(
+            err as AxiosError<RpcStatus>,
+          );
+          if (parsedErr.duplicateProject) {
+            form.errors.name = [`The name ${newProject} is already taken`];
+          }
+          return;
+        }
+
+        if (project !== newProject) {
+          queryClient.removeQueries({
+            queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+          });
+        } else {
+          void queryClient.refetchQueries({
+            queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+          });
+        }
+        eventBus.emit("notification", {
+          message: "Updated project",
+        });
+        setTimeout(() => onRename?.(newProject));
+      },
+      resetForm: false,
+    },
+  );
+
+  let projectResp = $derived(
+    createAdminServiceGetProject(organization, project),
+  );
+
+  // Only sync server data to form on initial load or when form hasn't been modified
+  $effect(() => {
+    if (!$projectResp.data?.project || $tainted?.["name"]) return;
+    form.update(
+      (f) => {
+        f.name = $projectResp.data.project.name ?? "";
+        return f;
+      },
+      {
+        taint: false,
+      },
+    );
+  });
+
+  $effect(() => {
+    changed = $projectResp.data?.project?.name !== $form.name;
+  });
+  $effect(() => {
+    loading = $submitting || $projectResp.isPending;
+  });
+
+  let error = $derived(
+    parseUpdateProjectError(
+      $updateProjectMutation.error as unknown as AxiosError<RpcStatus>,
+    ),
+  );
+</script>
+
+<form
+  id={ProjectRenameFormId}
+  onsubmit={(e) => {
+    e.preventDefault();
+    submit(e);
+  }}
+  class="update-project-form"
+  use:enhance
+>
+  <Input
+    bind:value={$form.name}
+    errors={$errors?.name}
+    id="name"
+    label="Name"
+    description={`Your project will be available at https://ui.rilldata.com/${organization}/${sanitizeSlug($form.name)}.`}
+    textClass="text-sm"
+    alwaysShowError
+    additionalClass="max-w-[520px]"
+  />
+
+  {#if error?.message}
+    <div class="text-red-500 text-sm py-px">
+      {error.message}
+    </div>
+  {/if}
+</form>
+
+<style lang="postcss">
+  .update-project-form {
+    @apply flex flex-col gap-y-5 w-full;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/+page.svelte b/web-admin/src/routes/[organization]/+page.svelte
index d7756a6b97f..5038ecf169c 100644
--- a/web-admin/src/routes/[organization]/+page.svelte
+++ b/web-admin/src/routes/[organization]/+page.svelte
@@ -6,9 +6,9 @@
   import { createQuery } from "@tanstack/svelte-query";
   import OrganizationHero from "../../features/organizations/OrganizationHero.svelte";
   import ProjectCards from "../../features/projects/ProjectCards.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
-  import { projectWelcomeEnabled } from "@rilldata/web-admin/features/welcome/project/welcome-status.ts";
 
+  export let data;
+  $: ({ organizationPermissions } = data);
   $: ({
     params: { organization: orgName },
   } = $page);
@@ -27,28 +27,9 @@
 </svelte:head>
 
 <ContentContainer showTitle={false} maxWidth={1300}>
-  {#if $org.data && $org.data.organization && $projs.data}
-    {#if $projs.data.projects?.length === 0}
-      <OrganizationHero {title} />
-      <span>
-        This organization has no projects yet. <a
-          href="https://docs.rilldata.com/"
-          target="_blank"
-          rel="noreferrer noopener">See docs</a
-        >
-      </span>
-      {#if projectWelcomeEnabled}
-        <div class="w-fit">
-          <Button type="primary" href="/{orgName}/-/create-project">
-            Create new
-          </Button>
-        </div>
-      {/if}
-    {:else}
-      <div class="flex flex-col gap-y-8">
-        <OrganizationHero {title} />
-        <ProjectCards organization={orgName} />
-      </div>
-    {/if}
-  {/if}
+  <OrganizationHero {title} />
+  <ProjectCards
+    organization={orgName}
+    createProjectsPermission={organizationPermissions.createProjects}
+  />
 </ContentContainer>
diff --git a/web-common/src/components/card/Card.svelte b/web-common/src/components/card/Card.svelte
index 40f6b0211e1..2a545559d0a 100644
--- a/web-common/src/components/card/Card.svelte
+++ b/web-common/src/components/card/Card.svelte
@@ -8,6 +8,7 @@
   export let imageUrl = "";
   export let onclick: ((e: MouseEvent) => void | Promise<void>) | undefined =
     undefined;
+  export let hovering = false;
 </script>
 
 <a
@@ -15,6 +16,8 @@
   class:gradient={!imageUrl}
   {onclick}
   onkeydown={(e) => e.key === "Enter" && e.currentTarget.click()}
+  onmouseenter={() => (hovering = true)}
+  onmouseleave={() => (hovering = false)}
   aria-disabled={disabled}
   class:loading={isLoading}
   style:background-image={imageUrl ? `url('${imageUrl}')` : ""}
diff --git a/web-common/src/components/icons/FeatherEditIcon.svelte b/web-common/src/components/icons/FeatherEditIcon.svelte
new file mode 100644
index 00000000000..1ac1550e61b
--- /dev/null
+++ b/web-common/src/components/icons/FeatherEditIcon.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let size = "1em";
+  export let className = "";
+</script>
+
+<svg
+  class={className}
+  height={size}
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_8973_54371)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.6673 0.512695C11.1844 0.512695 10.7213 0.704526 10.3798 1.04599L4.83817 6.58765C4.76341 6.66241 4.71038 6.75608 4.68473 6.85865L4.1014 9.19199C4.0517 9.39077 4.10995 9.60106 4.25484 9.74594C4.39973 9.89083 4.61001 9.94908 4.8088 9.89938L7.14213 9.31605C7.2447 9.29041 7.33837 9.23737 7.41313 9.16261L12.9548 3.62094C13.2963 3.27948 13.4881 2.81636 13.4881 2.33347C13.4881 1.85057 13.2963 1.38745 12.9548 1.04599C12.6133 0.704526 12.1502 0.512695 11.6673 0.512695ZM11.2048 1.87094C11.3275 1.74828 11.4938 1.67936 11.6673 1.67936C11.8408 1.67936 12.0072 1.74828 12.1298 1.87094C12.2525 1.99361 12.3214 2.15999 12.3214 2.33347C12.3214 2.50694 12.2525 2.67332 12.1298 2.79599L6.70242 8.2234L5.46903 8.53175L5.77738 7.29836L11.2048 1.87094Z"
+      fill="#0A0A0A"
+    />
+    <path
+      d="M2.33398 1.75014C1.86986 1.75014 1.42474 1.93452 1.09655 2.26271C0.768359 2.59089 0.583984 3.03601 0.583984 3.50014V11.6668C0.583984 12.1309 0.768359 12.5761 1.09655 12.9042C1.42474 13.2324 1.86986 13.4168 2.33398 13.4168H10.5007C10.9648 13.4168 11.4099 13.2324 11.7381 12.9042C12.0663 12.5761 12.2507 12.1309 12.2507 11.6668V7.58348C12.2507 7.26131 11.9895 7.00014 11.6673 7.00014C11.3452 7.00014 11.084 7.26131 11.084 7.58348V11.6668C11.084 11.8215 11.0225 11.9699 10.9131 12.0793C10.8037 12.1887 10.6554 12.2501 10.5007 12.2501H2.33398C2.17927 12.2501 2.0309 12.1887 1.92151 12.0793C1.81211 11.9699 1.75065 11.8215 1.75065 11.6668V3.50014C1.75065 3.34543 1.81211 3.19706 1.92151 3.08766C2.0309 2.97827 2.17927 2.91681 2.33398 2.91681H6.41732C6.73948 2.91681 7.00065 2.65564 7.00065 2.33348C7.00065 2.01131 6.73948 1.75014 6.41732 1.75014H2.33398Z"
+      fill="#0A0A0A"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_8973_54371">
+      <rect width="14" height="14" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/web-common/src/components/icons/PencilIcon.svelte b/web-common/src/components/icons/PencilIcon.svelte
new file mode 100644
index 00000000000..2c9d41079ef
--- /dev/null
+++ b/web-common/src/components/icons/PencilIcon.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let size = "1em";
+  export let className = "";
+</script>
+
+<svg
+  class={className}
+  height={size}
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.4994 1.0957C10.0165 1.0957 9.55334 1.28753 9.21188 1.62899L1.92022 8.92066C1.84546 8.99542 1.79242 9.08909 1.76678 9.19166L1.18344 11.525C1.13375 11.7238 1.19199 11.9341 1.33688 12.079C1.48177 12.2238 1.69206 12.2821 1.89084 12.2324L4.22417 11.6491C4.32674 11.6234 4.42041 11.5704 4.49517 11.4956L11.7868 4.20395C11.9559 4.03488 12.09 3.83416 12.1815 3.61325C12.273 3.39235 12.3201 3.15558 12.3201 2.91647C12.3201 2.67737 12.273 2.4406 12.1815 2.21969C12.09 1.99879 11.9559 1.79807 11.7868 1.62899C11.6178 1.45992 11.417 1.3258 11.1961 1.2343C10.9752 1.1428 10.7385 1.0957 10.4994 1.0957ZM10.0368 2.45395C10.1595 2.33128 10.3259 2.26237 10.4994 2.26237C10.5853 2.26237 10.6703 2.27929 10.7497 2.31216C10.829 2.34503 10.9011 2.39321 10.9619 2.45395C11.0226 2.51469 11.0708 2.5868 11.1037 2.66616C11.1365 2.74552 11.1535 2.83058 11.1535 2.91647C11.1535 3.00237 11.1365 3.08743 11.1037 3.16679C11.0708 3.24615 11.0226 3.31825 10.9619 3.37899L3.78447 10.5564L2.55108 10.8648L2.85942 9.63137L10.0368 2.45395Z"
+    fill="#0A0A0A"
+  />
+  <path
+    d="M6.99936 11.0831C6.6772 11.0831 6.41603 11.3443 6.41603 11.6665C6.41603 11.9886 6.6772 12.2498 6.99936 12.2498H12.2494C12.5715 12.2498 12.8327 11.9886 12.8327 11.6665C12.8327 11.3443 12.5715 11.0831 12.2494 11.0831H6.99936Z"
+    fill="#0A0A0A"
+  />
+</svg>