diff --git a/web-admin/src/features/projects/ProjectTabs.svelte b/web-admin/src/features/projects/ProjectTabs.svelte
index a58b490823b..b9c32e3c9c0 100644
--- a/web-admin/src/features/projects/ProjectTabs.svelte
+++ b/web-admin/src/features/projects/ProjectTabs.svelte
@@ -46,9 +46,7 @@
       hasPermission: projectPermissions.manageProject,
     },
     {
-      // TODO: Change this back to `/${organization}/${project}/-/settings`
-      // Once project settings are implemented
-      route: `/${organization}/${project}/-/settings/environment-variables`,
+      route: `/${organization}/${project}/-/settings`,
       label: "Settings",
       hasPermission: projectPermissions.manageProject,
     },
diff --git a/web-admin/src/features/projects/settings/DeleteProject.svelte b/web-admin/src/features/projects/settings/DeleteProject.svelte
new file mode 100644
index 00000000000..e9a18d1af98
--- /dev/null
+++ b/web-admin/src/features/projects/settings/DeleteProject.svelte
@@ -0,0 +1,60 @@
+<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";
+
+  export let organization: string;
+  export let project: string;
+
+  const deleteProjectMutation = createAdminServiceDeleteProject();
+
+  $: deleteProjectResult = $deleteProjectMutation;
+
+  async function deleteProject() {
+    await $deleteProjectMutation.mutateAsync({
+      org: organization,
+      project: project,
+    });
+
+    void goto(`/${organization}`);
+    queryClient.removeQueries({
+      queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+    });
+    await queryClient.invalidateQueries({
+      queryKey:
+        getAdminServiceListProjectsForOrganizationQueryKey(organization),
+    });
+    eventBus.emit("notification", {
+      message: "Deleted project",
+    });
+  }
+</script>
+
+<SettingsContainer title="Delete project">
+  <svelte:fragment slot="body">
+    Permanently remove all contents of this project. This action cannot be
+    undone.
+  </svelte:fragment>
+
+  <AlertDialogGuardedConfirmation
+    slot="action"
+    title="Delete this project?"
+    description={`The project ${project} will be deleted permanently. This action cannot be undone.`}
+    confirmText={`delete ${project}`}
+    loading={deleteProjectResult.isPending}
+    error={deleteProjectResult.error?.message ?? ""}
+    onConfirm={deleteProject}
+  >
+    <svelte:fragment let:builder>
+      <Button builders={[builder]} type="destructive">Delete project</Button>
+    </svelte:fragment>
+  </AlertDialogGuardedConfirmation>
+</SettingsContainer>
diff --git a/web-admin/src/features/projects/settings/HibernateProject.svelte b/web-admin/src/features/projects/settings/HibernateProject.svelte
new file mode 100644
index 00000000000..2d296e6e1e6
--- /dev/null
+++ b/web-admin/src/features/projects/settings/HibernateProject.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {
+    createAdminServiceHibernateProject,
+    getAdminServiceGetProjectQueryKey,
+  } 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";
+
+  export let organization: string;
+  export let project: string;
+
+  const hibernateProjectMutation = createAdminServiceHibernateProject();
+
+  $: hibernateResult = $hibernateProjectMutation;
+
+  async function hibernateProject() {
+    await $hibernateProjectMutation.mutateAsync({
+      org: organization,
+      project: project,
+    });
+
+    void queryClient.refetchQueries({
+      queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+    });
+
+    eventBus.emit("notification", {
+      message: "Project hibernated",
+    });
+  }
+</script>
+
+<SettingsContainer title="Hibernate project">
+  <svelte:fragment slot="body">
+    Put this project into hibernation mode. Hibernated projects are paused and
+    do not consume resources. The project can be woken up at any time by
+    accessing it.
+  </svelte:fragment>
+
+  <AlertDialogGuardedConfirmation
+    slot="action"
+    title="Hibernate this project?"
+    description={`The project ${project} will be put into hibernation mode. It can be reactivated by accessing it again.`}
+    confirmText={`hibernate ${project}`}
+    loading={hibernateResult.isPending}
+    error={hibernateResult.error?.message ?? ""}
+    onConfirm={hibernateProject}
+  >
+    <svelte:fragment slot="default" let:builder>
+      <Button builders={[builder]} type="secondary-destructive"
+        >Hibernate project</Button
+      >
+    </svelte:fragment>
+  </AlertDialogGuardedConfirmation>
+</SettingsContainer>
diff --git a/web-admin/src/features/projects/settings/ProjectNameSettings.svelte b/web-admin/src/features/projects/settings/ProjectNameSettings.svelte
new file mode 100644
index 00000000000..a89092820cc
--- /dev/null
+++ b/web-admin/src/features/projects/settings/ProjectNameSettings.svelte
@@ -0,0 +1,170 @@
+<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 { sanitizeOrgName } from "@rilldata/web-common/features/organization/sanitizeOrgName";
+  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";
+
+  export let organization: string;
+  export let project: string;
+
+  // Reuse org name sanitizer for project names
+  const sanitizeProjectName = sanitizeOrgName;
+
+  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 = sanitizeProjectName(values.name);
+
+        try {
+          await $updateProjectMutation.mutateAsync({
+            org: organization,
+            project: 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;
+        }
+
+        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,
+    },
+  );
+
+  $: projectResp = createAdminServiceGetProject(organization, project);
+  $: if ($projectResp.data?.project) {
+    $form.name = $projectResp.data.project.name ?? "";
+    $form.description = $projectResp.data.project.description ?? "";
+  }
+
+  $: changed =
+    $projectResp.data?.project?.name !== $form.name ||
+    $projectResp.data?.project?.description !== $form.description;
+
+  $: error = parseUpdateProjectError(
+    $updateProjectMutation.error as unknown as AxiosError<RpcStatus>,
+  );
+</script>
+
+<SettingsContainer title="Project">
+  <form
+    slot="body"
+    id="project-update-form"
+    on:submit|preventDefault={submit}
+    class="update-project-form"
+    use:enhance
+  >
+    <Input
+      bind:value={$form.name}
+      errors={$errors?.name}
+      id="name"
+      label="Name"
+      description={`Your project URL will be https://ui.rilldata.com/${organization}/${sanitizeProjectName($form.name)}, to comply with our naming rules.`}
+      textClass="text-sm"
+      alwaysShowError
+      additionalClass="max-w-[520px]"
+    />
+    {#if $form.name && sanitizeProjectName($form.name) !== project}
+      <div class="warning-message">
+        Renaming this project will invalidate all existing URLs and shared
+        links.
+      </div>
+    {/if}
+    <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}
+  <Button
+    onClick={submit}
+    type="primary"
+    loading={$updateProjectMutation.isPending}
+    disabled={!changed}
+    slot="action"
+  >
+    Save
+  </Button>
+</SettingsContainer>
+
+<style lang="postcss">
+  .update-project-form {
+    @apply flex flex-col gap-y-5 w-full;
+  }
+
+  .warning-message {
+    @apply text-sm text-yellow-600 bg-yellow-50 border border-yellow-200 rounded px-3 py-2;
+  }
+</style>
diff --git a/web-admin/src/features/projects/settings/PublicVisibilitySettings.svelte b/web-admin/src/features/projects/settings/PublicVisibilitySettings.svelte
new file mode 100644
index 00000000000..34146b98517
--- /dev/null
+++ b/web-admin/src/features/projects/settings/PublicVisibilitySettings.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import {
+    createAdminServiceGetProject,
+    createAdminServiceUpdateProject,
+    getAdminServiceGetProjectQueryKey,
+    type RpcStatus,
+  } 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 type { AxiosError } from "axios";
+
+  export let organization: string;
+  export let project: string;
+
+  const updateProjectMutation = createAdminServiceUpdateProject();
+
+  $: projectResp = createAdminServiceGetProject(organization, project);
+  $: isPublic = $projectResp.data?.project?.public ?? false;
+
+  let error = "";
+
+  async function makePublic() {
+    error = "";
+    try {
+      await $updateProjectMutation.mutateAsync({
+        org: organization,
+        project: project,
+        data: {
+          public: true,
+        },
+      });
+
+      await queryClient.refetchQueries({
+        queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+      });
+
+      eventBus.emit("notification", {
+        message: "Project is now public",
+      });
+    } catch (err) {
+      const axiosError = err as AxiosError<RpcStatus>;
+      error =
+        axiosError.response?.data?.message ?? "Failed to update visibility";
+    }
+  }
+
+  async function makePrivate() {
+    try {
+      await $updateProjectMutation.mutateAsync({
+        org: organization,
+        project: project,
+        data: {
+          public: false,
+        },
+      });
+
+      await queryClient.refetchQueries({
+        queryKey: getAdminServiceGetProjectQueryKey(organization, project),
+      });
+
+      eventBus.emit("notification", {
+        message: "Project is now private",
+      });
+    } catch (err) {
+      const axiosError = err as AxiosError<RpcStatus>;
+      eventBus.emit("notification", {
+        message:
+          axiosError.response?.data?.message ?? "Failed to update visibility",
+        type: "error",
+      });
+    }
+  }
+</script>
+
+<SettingsContainer title="Public visibility">
+  <svelte:fragment slot="body">
+    <div class="flex flex-col gap-2">
+      <p>
+        {#if isPublic}
+          This project is currently <strong>public</strong>. Anyone with the URL
+          can view this project.
+        {:else}
+          This project is currently <strong>private</strong>. Only members of
+          the organization can access this project.
+        {/if}
+      </p>
+    </div>
+  </svelte:fragment>
+
+  <svelte:fragment slot="action">
+    {#if isPublic}
+      <Button
+        onClick={makePrivate}
+        type="secondary"
+        loading={$updateProjectMutation.isPending}
+      >
+        Make private
+      </Button>
+    {:else}
+      <AlertDialogGuardedConfirmation
+        title="Make this project public?"
+        description={`The project ${project} will be publicly accessible. Anyone with the URL will be able to view this project.`}
+        confirmText={`make ${project} public`}
+        loading={$updateProjectMutation.isPending}
+        {error}
+        onConfirm={makePublic}
+      >
+        <svelte:fragment let:builder>
+          <Button builders={[builder]} type="secondary-destructive"
+            >Make public</Button
+          >
+        </svelte:fragment>
+      </AlertDialogGuardedConfirmation>
+    {/if}
+  </svelte:fragment>
+</SettingsContainer>
diff --git a/web-admin/src/features/projects/settings/errors.ts b/web-admin/src/features/projects/settings/errors.ts
new file mode 100644
index 00000000000..afc09e32ee5
--- /dev/null
+++ b/web-admin/src/features/projects/settings/errors.ts
@@ -0,0 +1,13 @@
+import type { RpcStatus } from "@rilldata/web-admin/client";
+import type { AxiosError } from "axios";
+
+export function parseUpdateProjectError(err: AxiosError<RpcStatus> | null) {
+  if (!err) return {};
+
+  const message = err.response?.data?.message ?? err.message;
+
+  return {
+    duplicateProject: message?.includes("already exists"),
+    message,
+  };
+}
diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
index c6a0aba8a10..ebf5d2698fd 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
@@ -10,6 +10,11 @@
   $: basePage = `/${organization}/${project}/-/settings`;
 
   const navItems = [
+    {
+      label: "General",
+      route: "",
+      hasPermission: true,
+    },
     {
       label: "Environment Variables",
       route: "/environment-variables",
diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/+page.svelte
index 183d98ab41d..dcecbe30531 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/+page.svelte
@@ -1 +1,37 @@
-<!-- TODO: Add project settings -->
+<script lang="ts">
+  import { page } from "$app/stores";
+  import ProjectNameSettings from "@rilldata/web-admin/features/projects/settings/ProjectNameSettings.svelte";
+  import PublicVisibilitySettings from "@rilldata/web-admin/features/projects/settings/PublicVisibilitySettings.svelte";
+  import HibernateProject from "@rilldata/web-admin/features/projects/settings/HibernateProject.svelte";
+  import DeleteProject from "@rilldata/web-admin/features/projects/settings/DeleteProject.svelte";
+
+  $: organization = $page.params.organization;
+  $: project = $page.params.project;
+</script>
+
+<div class="flex flex-col gap-6">
+  <ProjectNameSettings {organization} {project} />
+
+  <div class="danger-zone">
+    <h3 class="danger-zone-title">Danger zone</h3>
+    <div class="danger-zone-items">
+      <PublicVisibilitySettings {organization} {project} />
+      <HibernateProject {organization} {project} />
+      <DeleteProject {organization} {project} />
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .danger-zone {
+    @apply flex flex-col gap-4;
+  }
+
+  .danger-zone-title {
+    @apply text-lg font-semibold;
+  }
+
+  .danger-zone-items {
+    @apply flex flex-col gap-4 border border-red-300 rounded-md p-4;
+  }
+</style>
diff --git a/web-admin/tests/projects.spec.ts b/web-admin/tests/projects.spec.ts
index 75a24e526f2..cd7f096bd25 100644
--- a/web-admin/tests/projects.spec.ts
+++ b/web-admin/tests/projects.spec.ts
@@ -1,5 +1,10 @@
 import { expect } from "@playwright/test";
 import { test } from "./setup/base";
+import {
+  RILL_ORG_NAME,
+  RILL_PROJECT_NAME,
+  RILL_PROJECT_DISPLAY_NAME,
+} from "./setup/constants";
 
 test.describe("Projects", () => {
   test("admins should see the admin-only pages", async ({ adminPage }) => {
@@ -9,4 +14,172 @@ test.describe("Projects", () => {
       adminPage.getByRole("link", { name: "Settings" }),
     ).toBeVisible();
   });
+
+  test.describe("Settings", () => {
+    const settingsUrl = `/${RILL_ORG_NAME}/${RILL_PROJECT_NAME}/-/settings`;
+
+    test("should display the settings page with all sections", async ({
+      adminPage,
+    }) => {
+      await adminPage.goto(settingsUrl);
+
+      // Check that the page title sections are visible
+      await expect(
+        adminPage.getByText("Project", { exact: true }),
+      ).toBeVisible();
+      await expect(adminPage.getByText("Danger zone")).toBeVisible();
+
+      // Check that all settings sections are visible
+      await expect(adminPage.getByText("Public visibility")).toBeVisible();
+      await expect(adminPage.getByText("Hibernate project")).toBeVisible();
+      await expect(adminPage.getByText("Delete project")).toBeVisible();
+    });
+
+    test("should display current project name", async ({ adminPage }) => {
+      await adminPage.goto(settingsUrl);
+
+      const nameInput = adminPage.locator("#name");
+      await expect(nameInput).toHaveValue(RILL_PROJECT_DISPLAY_NAME);
+    });
+
+    test("should show warning when renaming project", async ({ adminPage }) => {
+      await adminPage.goto(settingsUrl);
+
+      const nameInput = adminPage.locator("#name");
+      await nameInput.fill("Test Project Rename");
+
+      await expect(
+        adminPage.getByText(
+          "Renaming this project will invalidate all existing URLs and shared links.",
+        ),
+      ).toBeVisible();
+    });
+
+    test("should enable Save button when changes are made", async ({
+      adminPage,
+    }) => {
+      await adminPage.goto(settingsUrl);
+
+      const saveButton = adminPage.getByRole("button", { name: "Save" });
+      await expect(saveButton).toBeDisabled();
+
+      const descriptionInput = adminPage.locator("#description");
+      await descriptionInput.fill("Test description change");
+
+      await expect(saveButton).toBeEnabled();
+    });
+
+    test("should update project description successfully", async ({
+      adminPage,
+    }) => {
+      await adminPage.goto(settingsUrl);
+
+      const descriptionInput = adminPage.locator("#description");
+      const saveButton = adminPage.getByRole("button", { name: "Save" });
+
+      const originalDescription = await descriptionInput.inputValue();
+
+      const testDescription = `E2E test description - ${Date.now()}`;
+      await descriptionInput.fill(testDescription);
+      await saveButton.click();
+
+      await expect(adminPage.getByLabel("Notification")).toHaveText(
+        "Updated project",
+      );
+
+      // Restore the original description
+      await descriptionInput.fill(originalDescription);
+      await saveButton.click();
+
+      await expect(adminPage.getByLabel("Notification")).toHaveText(
+        "Updated project",
+      );
+    });
+
+    test("should display current visibility status", async ({ adminPage }) => {
+      await adminPage.goto(settingsUrl);
+
+      const isPublicText = adminPage.getByText("This project is currently", {
+        exact: false,
+      });
+      await expect(isPublicText).toBeVisible();
+    });
+
+    test("should show confirmation dialog when making project public", async ({
+      adminPage,
+    }) => {
+      await adminPage.goto(settingsUrl);
+
+      const makePublicButton = adminPage.getByRole("button", {
+        name: "Make public",
+      });
+
+      // Only run if project is private
+      if (await makePublicButton.isVisible()) {
+        await makePublicButton.click();
+
+        await expect(
+          adminPage.getByText("Make this project public?"),
+        ).toBeVisible();
+
+        await adminPage.getByRole("button", { name: "Cancel" }).click();
+      }
+    });
+
+    test("should show hibernate confirmation dialog", async ({ adminPage }) => {
+      await adminPage.goto(settingsUrl);
+
+      await adminPage
+        .getByRole("button", { name: "Hibernate project" })
+        .click();
+
+      await expect(
+        adminPage.getByText("Hibernate this project?"),
+      ).toBeVisible();
+
+      await expect(
+        adminPage.getByText(`Type hibernate ${RILL_PROJECT_NAME}`),
+      ).toBeVisible();
+
+      await expect(
+        adminPage.getByRole("button", { name: "Continue" }),
+      ).toBeDisabled();
+
+      // Enter confirmation text
+      const confirmInput = adminPage.locator("#confirmation");
+      await confirmInput.fill(`hibernate ${RILL_PROJECT_NAME}`);
+
+      await expect(
+        adminPage.getByRole("button", { name: "Continue" }),
+      ).toBeEnabled();
+
+      await adminPage.getByRole("button", { name: "Cancel" }).click();
+    });
+
+    test("should show delete confirmation dialog", async ({ adminPage }) => {
+      await adminPage.goto(settingsUrl);
+
+      await adminPage.getByRole("button", { name: "Delete project" }).click();
+
+      await expect(adminPage.getByText("Delete this project?")).toBeVisible();
+
+      await expect(
+        adminPage.getByText(`Type delete ${RILL_PROJECT_NAME}`),
+      ).toBeVisible();
+
+      await expect(
+        adminPage.getByRole("button", { name: "Continue" }),
+      ).toBeDisabled();
+
+      // Enter confirmation text
+      const confirmInput = adminPage.locator("#confirmation");
+      await confirmInput.fill(`delete ${RILL_PROJECT_NAME}`);
+
+      await expect(
+        adminPage.getByRole("button", { name: "Continue" }),
+      ).toBeEnabled();
+
+      await adminPage.getByRole("button", { name: "Cancel" }).click();
+    });
+  });
 });
diff --git a/web-common/src/components/button/Button.svelte b/web-common/src/components/button/Button.svelte
index 921a31aa618..0c0b17c1262 100644
--- a/web-common/src/components/button/Button.svelte
+++ b/web-common/src/components/button/Button.svelte
@@ -2,6 +2,7 @@
   export type ButtonType =
     | "primary"
     | "secondary"
+    | "secondary-destructive"
     | "tertiary"
     | "neutral"
     | "destructive"
@@ -117,11 +118,17 @@
     @apply cursor-not-allowed;
   }
 
-  /* button:focus {
+  button:focus,
+  a:focus {
+    @apply outline-none;
+  }
+
+  button:focus-visible,
+  a:focus-visible {
     @apply outline-none;
     box-shadow: 0px 0px 4px 1px
       color-mix(in oklab, var(--focus-color) 50%, transparent);
-  } */
+  }
 
   /* PRIMARY STYLES */
 
@@ -170,6 +177,25 @@
     @apply opacity-50;
   }
 
+  /* SECONDARY DESTRUCTIVE STYLES */
+
+  .secondary-destructive {
+    --focus-color: var(--color-destructive-600);
+    @apply bg-transparent border border-destructive text-destructive;
+  }
+
+  :global(.dark) .secondary-destructive {
+    @apply bg-transparent;
+  }
+
+  .secondary-destructive:hover:not(:disabled) {
+    @apply bg-destructive/10 text-destructive;
+  }
+
+  .secondary-destructive:disabled {
+    @apply opacity-50;
+  }
+
   /* GHOST STYLES */
 
   .ghost {