diff --git a/src/_data/facets.json b/src/_data/facets.json
index dd707416..90d6eb30 100644
--- a/src/_data/facets.json
+++ b/src/_data/facets.json
@@ -146,7 +146,7 @@
     "title": "Playlists",
     "category": "Data",
     "featured": true,
-    "desc": "An overview of all playlists and their contents."
+    "desc": "Manage your playlists."
   },
   {
     "url": "facets/playback/preload/prelude/index.html",
diff --git a/src/facets/data/playlists/index.html b/src/facets/data/playlists/index.html
index d236c087..8e750c47 100644
--- a/src/facets/data/playlists/index.html
+++ b/src/facets/data/playlists/index.html
@@ -1,7 +1,9 @@
 <style>
+  @import "./vendor/@phosphor-icons/web/bold/style.css";
+  @import "./vendor/@phosphor-icons/web/fill/style.css";
+
   @import "./styles/base.css";
   @import "./styles/diffuse/facet.css";
-  @import "./vendor/@phosphor-icons/web/fill/style.css";
 
   @layer base, diffuse;
 
@@ -98,6 +100,7 @@
 </style>
 
 <dialog id="playlists-dialog"></dialog>
+<dialog id="create-playlist-dialog"></dialog>
 
 <main>
   <div class="facet__left">
@@ -114,6 +117,12 @@
     </div>
     <h1>Playlists</h1>
     <p>An overview of all playlists and their contents.</p>
+    <p class="button-row" style="margin-top: var(--space-md)">
+      <button id="create-playlist-btn" class="button button--accent">
+        <i class="ph-bold ph-plus"></i>
+        Create playlist
+      </button>
+    </p>
   </div>
 
   <div class="facet__right">
diff --git a/src/facets/data/playlists/index.inline.js b/src/facets/data/playlists/index.inline.js
index 5cf8a897..d522412b 100644
--- a/src/facets/data/playlists/index.inline.js
+++ b/src/facets/data/playlists/index.inline.js
@@ -2,6 +2,7 @@ import { html, render as litRender } from "lit-html";
 
 import * as Output from "~/common/output.js";
 import * as Playlist from "~/common/playlist.js";
+import * as TID from "@atcute/tid";
 import foundation from "~/common/foundation.js";
 import { effect } from "~/common/signal.js";
 
@@ -28,12 +29,26 @@ const list =
 const empty =
   /** @type {HTMLElement} */ (document.querySelector("#playlists-empty"));
 const dialog =
-  /** @type {HTMLDialogElement} */ (document.querySelector("#playlists-dialog"));
+  /** @type {HTMLDialogElement} */ (document.querySelector(
+    "#playlists-dialog",
+  ));
+const createDialog =
+  /** @type {HTMLDialogElement} */ (document.querySelector(
+    "#create-playlist-dialog",
+  ));
+
+document.querySelector("#create-playlist-btn")?.addEventListener(
+  "click",
+  () => {
+    showCreatePlaylist();
+  },
+);
 
 effect(() => {
   const playlistItemsCol = outputOrchestrator.playlistItems.collection();
-  const playlistItems =
-    playlistItemsCol.state === "loaded" ? playlistItemsCol.data : [];
+  const playlistItems = playlistItemsCol.state === "loaded"
+    ? playlistItemsCol.data
+    : [];
 
   const tracksCol = outputOrchestrator.tracks.collection();
   const tracks = tracksCol.state === "loaded" ? tracksCol.data : [];
@@ -48,10 +63,11 @@ effect(() => {
   empty.hidden = playlists.length > 0;
 
   /** @param {typeof playlists} group @param {number} offset */
-  const renderGroup = (group, offset) => group.map(({ name, items }, index) => {
-    const menuId = `playlists-menu-${offset + index}`;
-    return html`
-      <li class="playlists-item">
+  const renderGroup = (group, offset) =>
+    group.map(({ name, items }, index) => {
+      const menuId = `playlists-menu-${offset + index}`;
+      return html`
+        <li class="playlists-item">
           <div class="playlists-item__info">
             <span class="playlists-item__name">${name}</span>
           </div>
@@ -65,7 +81,8 @@ effect(() => {
           <div id="${menuId}" class="dropdown" popover>
             <button
               @click="${(/** @type {MouseEvent} */ e) => {
-                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e.currentTarget).closest("[popover]"))?.hidePopover();
+                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e
+                  .currentTarget).closest("[popover]"))?.hidePopover();
                 showDetails(name, tracks, items);
               }}"
             >
@@ -74,7 +91,8 @@ effect(() => {
             </button>
             <button
               @click="${(/** @type {MouseEvent} */ e) => {
-                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e.currentTarget).closest("[popover]"))?.hidePopover();
+                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e
+                  .currentTarget).closest("[popover]"))?.hidePopover();
                 removeDuplicates(name, items);
               }}"
             >
@@ -83,7 +101,8 @@ effect(() => {
             </button>
             <button
               @click="${(/** @type {MouseEvent} */ e) => {
-                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e.currentTarget).closest("[popover]"))?.hidePopover();
+                /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e
+                  .currentTarget).closest("[popover]"))?.hidePopover();
                 removePlaylist(name);
               }}"
             >
@@ -93,18 +112,21 @@ effect(() => {
           </div>
         </li>
       `;
-  });
+    });
 
   litRender(
     html`
-      ${orderedPlaylists.length > 0 ? html`
-        <li class="playlists-category">Ordered</li>
-        ${renderGroup(orderedPlaylists, 0)}
-      ` : null}
-      ${unorderedPlaylists.length > 0 ? html`
-        <li class="playlists-category">Not ordered</li>
-        ${renderGroup(unorderedPlaylists, orderedPlaylists.length)}
-      ` : null}
+      ${orderedPlaylists.length > 0
+        ? html`
+          <li class="playlists-category">Ordered</li>
+          ${renderGroup(orderedPlaylists, 0)}
+        `
+        : null} ${unorderedPlaylists.length > 0
+        ? html`
+          <li class="playlists-category">Not ordered</li>
+          ${renderGroup(unorderedPlaylists, orderedPlaylists.length)}
+        `
+        : null}
     `,
     list,
   );
@@ -213,13 +235,23 @@ function showDetails(name, tracks, items) {
     }
   }
 
-  found.sort((a, b) => (a.tags?.title ?? "").localeCompare(b.tags?.title ?? ""));
+  found.sort((a, b) =>
+    (a.tags?.title ?? "").localeCompare(b.tags?.title ?? "")
+  );
 
   const notFound = notFoundItems
     .map((item) => ({
-      title: String(item.criteria.find((c) => c.field === "tags.title")?.value ?? ""),
-      artist: String(item.criteria.find((c) => c.field === "tags.artist")?.value ?? "") || null,
-      album: String(item.criteria.find((c) => c.field === "tags.album")?.value ?? "") || null,
+      title: String(
+        item.criteria.find((c) => c.field === "tags.title")?.value ?? "",
+      ),
+      artist:
+        String(
+          item.criteria.find((c) => c.field === "tags.artist")?.value ?? "",
+        ) || null,
+      album:
+        String(
+          item.criteria.find((c) => c.field === "tags.album")?.value ?? "",
+        ) || null,
     }))
     .sort((a, b) => a.title.localeCompare(b.title));
 
@@ -238,29 +270,47 @@ function showDetails(name, tracks, items) {
         <div class="tracks-section">
           <span class="tracks-section__heading">${found.length} found</span>
           <ul class="tracks-list">
-            ${found.map((t) => html`
-              <li>
-                <span class="tracks-list__name">${t.tags?.title ?? t.uri}</span>
-                ${t.tags?.artist
-                  ? html`<span class="tracks-list__artist">${t.tags.artist}</span>`
-                  : null}
-              </li>
-            `)}
-          </ul>
-        </div>
-        ${notFound.length > 0 ? html`
-          <div class="tracks-section">
-            <span class="tracks-section__heading">${notFound.length} not found</span>
-            <ul class="tracks-list">
-              ${notFound.map(({ title, artist, album }) => html`
+            ${found.map((t) =>
+              html`
                 <li>
-                  <span class="tracks-list__name">${title}</span>
-                  ${artist ? html`<span class="tracks-list__artist">${artist}${album ? html` · ${album}` : null}</span>` : null}
+                  <span class="tracks-list__name">${t.tags?.title ??
+                    t.uri}</span>
+                  ${t.tags?.artist
+                    ? html`
+                      <span class="tracks-list__artist">${t.tags.artist}</span>
+                    `
+                    : null}
                 </li>
-              `)}
-            </ul>
-          </div>
-        ` : null}
+              `
+            )}
+          </ul>
+        </div>
+        ${notFound.length > 0
+          ? html`
+            <div class="tracks-section">
+              <span class="tracks-section__heading">${notFound
+                .length} not found</span>
+              <ul class="tracks-list">
+                ${notFound.map(({ title, artist, album }) =>
+                  html`
+                    <li>
+                      <span class="tracks-list__name">${title}</span>
+                      ${artist
+                        ? html`
+                          <span class="tracks-list__artist">${artist}${album
+                            ? html`
+                              · ${album}
+                            `
+                            : null}</span>
+                        `
+                        : null}
+                    </li>
+                  `
+                )}
+              </ul>
+            </div>
+          `
+          : null}
       </div>
     `,
     dialog,
@@ -269,6 +319,77 @@ function showDetails(name, tracks, items) {
   dialog.showModal();
 }
 
+function showCreatePlaylist() {
+  litRender(
+    html`
+      <div class="dialog-header">
+        <strong>Create playlist</strong>
+        <button
+          class="button--plain button--icon"
+          @click="${() => createDialog.close()}"
+        >
+          <i class="ph-fill ph-x"></i>
+        </button>
+      </div>
+      <div class="dialog-body">
+        <form
+          class="create-form"
+          @submit="${async (/** @type {SubmitEvent} */ e) => {
+            e.preventDefault();
+            const form = /** @type {HTMLFormElement} */ (e.currentTarget);
+            const name =
+              /** @type {HTMLInputElement} */ (form.elements.namedItem("name"))
+                ?.value.trim();
+            if (!name) return;
+            await createPlaylist(name);
+            createDialog.close();
+          }}"
+        >
+          <label>
+            <span class="create-form__label">Name</span>
+            <input
+              name="name"
+              type="text"
+              placeholder="My playlist"
+              autocomplete="off"
+              required
+              autofocus
+            />
+          </label>
+          <p class="button-row">
+            <button class="button button--accent" type="submit">
+              <i class="ph-bold ph-plus"></i>
+              Create playlist
+            </button>
+          </p>
+        </form>
+      </div>
+    `,
+    createDialog,
+  );
+
+  createDialog.showModal();
+}
+
+/** @param {string} name */
+async function createPlaylist(name) {
+  const existing = await Output.data(outputOrchestrator.playlistItems);
+
+  const now = new Date().toISOString();
+
+  /** @type {import("~/definitions/types.d.ts").PlaylistItem} */
+  const item = {
+    $type: "sh.diffuse.output.playlistItem",
+    id: TID.now(),
+    playlist: name,
+    criteria: [],
+    createdAt: now,
+    updatedAt: now,
+  };
+
+  await outputOrchestrator.playlistItems.save([...existing, item]);
+}
+
 ////////////////////////////////////////////
 // 🚀
 ////////////////////////////////////////////
diff --git a/src/styles/diffuse/facet.css b/src/styles/diffuse/facet.css
index 82f55a82..e29fa17f 100644
--- a/src/styles/diffuse/facet.css
+++ b/src/styles/diffuse/facet.css
@@ -286,6 +286,30 @@ p,
   margin: var(--space-sm) 0;
 }
 
+.create-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.create-form__label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wider);
+  opacity: 0.5;
+  text-transform: uppercase;
+}
+
+.create-form__checkbox-row {
+  align-items: center;
+  flex-direction: row;
+  gap: var(--space-2xs);
+
+  input {
+    width: auto;
+  }
+}
+
 .dropdown {
   background: oklch(from var(--bg-color) calc(l + 0.2) c h / 0.975);
   border: 1px solid var(--border-color);