diff --git a/packages/app/src/pages/color-picker.css.ts b/packages/app/src/pages/color-picker.css.ts
index a300d2b..2fa594e 100644
--- a/packages/app/src/pages/color-picker.css.ts
+++ b/packages/app/src/pages/color-picker.css.ts
@@ -29,3 +29,34 @@ export const colorInput = style({
   border: "none",
   cursor: "pointer",
 });
+
+export const reorderArrows = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+});
+
+export const arrowBtn = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  inlineSize: "24px",
+  blockSize: "24px",
+  border: `1px solid ${vars.color.border}`,
+  borderRadius: vars.radius.sm,
+  backgroundColor: vars.color.surface,
+  color: vars.color.text,
+  cursor: "pointer",
+  padding: 0,
+  fontSize: "12px",
+  lineHeight: 1,
+  selectors: {
+    "&:disabled": {
+      opacity: 0.3,
+      cursor: "default",
+    },
+    "&:hover:not(:disabled)": {
+      backgroundColor: vars.color.surfaceHover,
+    },
+  },
+});
diff --git a/packages/app/src/pages/sphere-labels.tsx b/packages/app/src/pages/sphere-labels.tsx
index 3f0788e..9e8f92b 100644
--- a/packages/app/src/pages/sphere-labels.tsx
+++ b/packages/app/src/pages/sphere-labels.tsx
@@ -11,6 +11,7 @@ import {
   createSphereLabel,
   updateSphereLabel,
   deleteSphereLabel,
+  reorderSphereLabels,
   type LabelData,
 } from "../api/spheres.ts";
 
@@ -108,6 +109,24 @@ function LabelsContent({ handle }: { handle: string }) {
     }
   };
 
+  const handleMove = async (index: number, direction: -1 | 1) => {
+    if (!data) return;
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= data.labels.length) return;
+    const reordered = [...data.labels];
+    const [item] = reordered.splice(index, 1);
+    reordered.splice(newIndex, 0, item);
+    try {
+      await reorderSphereLabels(
+        handle,
+        reordered.map((l) => l.id),
+      );
+      refetch();
+    } catch (err) {
+      listError.value = err instanceof Error ? err.message : "Failed to reorder labels.";
+    }
+  };
+
   const confirmingDeleteId = useSignal<string | null>(null);
 
   const handleDelete = async (id: string) => {
@@ -189,7 +208,7 @@ function LabelsContent({ handle }: { handle: string }) {
           <p class={ui.emptyState}>No labels yet.</p>
         ) : (
           <div class={ui.stackSm}>
-            {data.labels.map((label) => (
+            {data.labels.map((label, index) => (
               <div key={label.id} class={ui.card}>
                 {editingId.value === label.id ? (
                   <div class={ui.formStack}>
@@ -233,13 +252,33 @@ function LabelsContent({ handle }: { handle: string }) {
                   </div>
                 ) : (
                   <div class={ui.row}>
-                    <div>
-                      <LabelBadge label={label} />
-                      {label.description && (
-                        <span class={ui.muted} style={{ marginInlineStart: "8px" }}>
-                          {label.description}
-                        </span>
-                      )}
+                    <div class={ui.row}>
+                      <div class={cpUi.reorderArrows}>
+                        <button
+                          class={cpUi.arrowBtn}
+                          disabled={index === 0}
+                          onClick={() => handleMove(index, -1)}
+                          title="Move up"
+                        >
+                          &#8593;
+                        </button>
+                        <button
+                          class={cpUi.arrowBtn}
+                          disabled={index === data!.labels.length - 1}
+                          onClick={() => handleMove(index, 1)}
+                          title="Move down"
+                        >
+                          &#8595;
+                        </button>
+                      </div>
+                      <div>
+                        <LabelBadge label={label} />
+                        {label.description && (
+                          <span class={ui.muted} style={{ marginInlineStart: "8px" }}>
+                            {label.description}
+                          </span>
+                        )}
+                      </div>
                     </div>
                     <div class={ui.row}>
                       <button class={ui.buttonInline} onClick={() => startEdit(label)}>