diff --git a/src/app/(inbox)/spam/page.tsx b/src/app/(inbox)/spam/page.tsx
new file mode 100644
index 0000000..e59345f
--- /dev/null
+++ b/src/app/(inbox)/spam/page.tsx
@@ -0,0 +1,7 @@
+export default function SpamPage() {
+  return (
+    <div className="hidden md:flex items-center justify-center h-full text-sm text-stone-400 dark:text-stone-500">
+      Select a spam email to read it
+    </div>
+  );
+}
diff --git a/src/components/NotSpamButton.tsx b/src/components/NotSpamButton.tsx
new file mode 100644
index 0000000..6a67c44
--- /dev/null
+++ b/src/components/NotSpamButton.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import { promoteNotSpamAction } from "@/app/(inbox)/email/[id]/actions";
+
+interface Props {
+  emailId: string;
+  mailboxIds: Record<string, boolean>;
+  inboxMailboxId: string;
+}
+
+export default function NotSpamButton({ emailId, mailboxIds, inboxMailboxId }: Props) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  function handleClick() {
+    startTransition(async () => {
+      await promoteNotSpamAction(emailId, mailboxIds, inboxMailboxId);
+      router.push("/spam");
+    });
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isPending}
+      className="whitespace-nowrap text-xs px-3 py-1.5 rounded-md border border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-100 transition-colors disabled:opacity-50"
+    >
+      {isPending ? "Moving…" : "Not Spam"}
+    </button>
+  );
+}