@@ -30,6 +30,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
     "marked": "^18.0.4",
+    "qrcode.react": "^4.2.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
 
@@ -10,6 +10,7 @@ import { ProjectsIndex } from '@/screens/ProjectsIndex';
 import { ProjectDetail } from '@/screens/ProjectDetail';
 import { ProjectEdit } from '@/screens/ProjectEdit';
 import { ProjectBuzzNew } from '@/screens/ProjectBuzzNew';
+import { ProjectTableCard } from '@/screens/ProjectTableCard';
 import { PeopleIndex } from '@/screens/PeopleIndex';
 import { PersonDetail } from '@/screens/PersonDetail';
 import { ProfileEdit } from '@/screens/ProfileEdit';
@@ -50,6 +51,7 @@ const router = createBrowserRouter([
       { path: '/projects/create', element: <ProjectEdit mode="create" /> },
       { path: '/projects/:slug', element: <ProjectDetail /> },
       { path: '/projects/:slug/edit', element: <ProjectEdit mode="edit" /> },
+      { path: '/projects/:slug/table-card', element: <ProjectTableCard /> },
       { path: '/projects/:slug/updates/:number', element: <ProjectDetail anchor="update" /> },
       { path: '/projects/:slug/buzz/:buzzSlug', element: <ProjectDetail anchor="buzz" /> },
       { path: '/projects/:slug/buzz/new', element: <ProjectBuzzNew /> },
 
@@ -177,9 +177,9 @@ export function AppFooter() {
             <h2 className="text-sm font-semibold text-foreground mb-3">Connect</h2>
             <ul className="space-y-2 text-sm text-muted-foreground mb-4">
               <li>
-                <Link to="/chat" className="hover:text-foreground transition-colors">
+                <a href="/chat" className="hover:text-foreground transition-colors">
                   Slack
-                </Link>
+                </a>
               </li>
             </ul>
             <div className="flex items-center gap-3 flex-wrap">
 
@@ -19,6 +19,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { SearchBox } from '@/components/SearchBox';
 import { GitHubIcon } from '@/components/icons/GitHubIcon';
+import { SlackIcon } from '@/components/icons/SlackIcon';
 import { useAuth } from '@/hooks/useAuth';
 
 const GITHUB_URL = 'https://github.com/CodeForPhilly';
@@ -192,12 +193,26 @@ const navLinkClass = ({ isActive }: { isActive: boolean }) =>
     isActive ? 'text-primary' : 'text-muted-foreground'
   }`;
 
+function SlackLink() {
+  return (
+    // A plain anchor: /chat is a server redirect the router can't resolve
+    // (specs/screens/chat.md).
+    <Button asChild variant="ghost" size="icon-sm">
+      <a
+        href="/chat"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Join Code for Philly on Slack (opens in new tab)"
+      >
+        <SlackIcon />
+      </a>
+    </Button>
+  );
+}
+
 function GitHubLink() {
   return (
-    // Desktop-only: between md and lg the header has no room for it (the
-    // utility cluster would push "Help Wanted" onto two lines); the mobile
-    // sheet carries its own GitHub row.
-    <Button asChild variant="ghost" size="icon-sm" className="hidden lg:inline-flex">
+    <Button asChild variant="ghost" size="icon-sm">
       <a
         href={GITHUB_URL}
         target="_blank"
@@ -245,7 +260,7 @@ export function AppHeader() {
             flex/gap spacing moves to the <ul>; the <li>s contribute none. */}
         <nav
           aria-label="Primary navigation"
-          className="hidden md:block ml-4 flex-1"
+          className="hidden lg:block ml-4 flex-1"
         >
           <ul className="flex items-center gap-2">
             <li>
@@ -274,12 +289,13 @@ export function AppHeader() {
           </ul>
         </nav>
 
-        {/* Desktop utility cluster: GitHub, search, auth, then the Volunteer
+        {/* Desktop utility cluster: Slack, GitHub, search, auth, then the Volunteer
             CTA pinned rightmost (specs/behaviors/app-shell.md). */}
         <nav
           aria-label="Utility"
-          className="hidden md:flex items-center gap-2 ml-auto"
+          className="hidden lg:flex items-center gap-2 ml-auto"
         >
+          <SlackLink />
           <GitHubLink />
           <SearchBox />
           <AuthControls />
@@ -293,7 +309,7 @@ export function AppHeader() {
         </nav>
 
         {/* Mobile: auth + hamburger */}
-        <div className="flex md:hidden items-center gap-2 ml-auto">
+        <div className="flex lg:hidden items-center gap-2 ml-auto">
           <AuthControls />
           <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
             <SheetTrigger asChild>
@@ -392,6 +408,18 @@ export function AppHeader() {
                 </ul>
                 <Separator />
                 <ul className="flex flex-col gap-2">
+                  <li>
+                    <a
+                      href="/chat"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block text-sm font-medium text-muted-foreground hover:text-primary"
+                      onClick={() => setMobileOpen(false)}
+                    >
+                      Slack
+                      <span className="sr-only"> (opens in new tab)</span>
+                    </a>
+                  </li>
                   <li>
                     <a
                       href={GITHUB_URL}
 
@@ -77,7 +77,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         )}
         {project.links.chatChannel && (
           <Button asChild size="sm" variant="outline">
-            <Link to={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>Chat</Link>
+            <a href={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>Chat</a>
           </Button>
         )}
         {project.openHelpWantedCount > 0 && (
 
@@ -0,0 +1,15 @@
+/** Slack mark (monochrome), sized to sit inline with text and icon buttons. */
+export function SlackIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+    </svg>
+  );
+}
@@ -74,9 +74,9 @@ function UpcomingList({ isStaff }: { isStaff: boolean }) {
       <div className="py-12 text-center">
         <p className="text-muted-foreground">
           Nothing on the calendar yet.{' '}
-          <Link to="/chat" className="text-primary hover:underline">
+          <a href="/chat" className="text-primary hover:underline">
             Join the Slack
-          </Link>{' '}
+          </a>{' '}
           and watch #announcements — or check back soon.
         </p>
         {isStaff && (
 
@@ -485,9 +485,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
               )}
               {project.links.chatChannel && (
                 <Button asChild variant="outline">
-                  <Link to={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>
+                  <a href={`/chat?channel=${encodeURIComponent(project.links.chatChannel)}`}>
                     Chat Channel
-                  </Link>
+                  </a>
                 </Button>
               )}
             </div>
@@ -603,6 +603,9 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
               >
                 Share to Slack
               </Button>
+              <Button asChild variant="outline">
+                <Link to={`/projects/${slug}/table-card`}>Table card</Link>
+              </Button>
             </div>
           </section>
 
 
@@ -0,0 +1,79 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link, useParams } from 'react-router';
+import { QRCodeSVG } from 'qrcode.react';
+import { Button } from '@/components/ui/button';
+import { api, ApiError } from '@/lib/api';
+
+/**
+ * Printable table sign for a project (specs/screens/project-table-card.md):
+ * a QR code to the project page, where a newcomer can sign in and join.
+ */
+export function ProjectTableCard() {
+  const { slug = '' } = useParams<{ slug: string }>();
+  const projectQ = useQuery({
+    queryKey: ['project', slug],
+    queryFn: () => api.projects.get(slug),
+  });
+
+  if (projectQ.isLoading) {
+    return <div className="container mx-auto px-4 py-12 text-muted-foreground">Loading project…</div>;
+  }
+
+  if (projectQ.isError) {
+    const err = projectQ.error;
+    if (err instanceof ApiError && err.status === 404) {
+      return (
+        <div className="container mx-auto px-4 py-16 text-center">
+          <h1 className="text-2xl font-bold mb-2">Project not found</h1>
+          <p className="text-muted-foreground mb-6">No project with the slug “{slug}” exists.</p>
+          <Link to="/projects" className="text-primary hover:underline">
+            ← Browse all projects
+          </Link>
+        </div>
+      );
+    }
+    return <div className="container mx-auto px-4 py-12 text-destructive">Failed to load project.</div>;
+  }
+
+  const project = projectQ.data!.data;
+  // The origin the card was opened on, so production prints codeforphilly.org
+  // and a test instance prints its own host.
+  const url = `${window.location.origin}/projects/${project.slug}`;
+  const displayUrl = url.replace(/^https?:\/\//, '');
+
+  return (
+    <div className="container mx-auto px-4 py-8 print:p-0">
+      <div className="flex items-center justify-center gap-3 mb-6 print:hidden">
+        <Button onClick={() => window.print()}>Print</Button>
+        <Button asChild variant="outline">
+          <Link to={`/projects/${project.slug}`}>Back to project</Link>
+        </Button>
+      </div>
+
+      <article className="mx-auto max-w-2xl rounded-lg border border-border bg-white text-black px-8 py-12 text-center print:max-w-none print:border-0 print:rounded-none print:py-0">
+        <img
+          src="/img/logo-horizontal.svg"
+          alt="Code for Philly"
+          className="mx-auto h-14 mb-10 print:h-20"
+        />
+        <h1 className="text-4xl font-bold leading-tight mb-3 print:text-5xl">{project.title}</h1>
+        {project.summary && <p className="text-lg text-neutral-700 mb-8 line-clamp-2">{project.summary}</p>}
+        <QRCodeSVG
+          value={url}
+          size={288}
+          marginSize={0}
+          title={`QR code for ${displayUrl}`}
+          className="mx-auto my-8 h-[3in] w-[3in] print:my-12 print:h-[4in] print:w-[4in]"
+        />
+        <p className="text-3xl font-semibold mb-2 print:text-4xl">Scan to join this project</p>
+        <p className="text-lg font-mono text-neutral-700 break-all">{displayUrl}</p>
+        {project.links.chatChannel && (
+          <p className="text-lg mt-6">
+            Chat: <span className="font-semibold">#{project.links.chatChannel}</span> on the Code
+            for Philly Slack
+          </p>
+        )}
+      </article>
+    </div>
+  );
+}
@@ -52,7 +52,7 @@ export function Volunteer() {
               We coordinate everything in our Slack workspace.
             </p>
             <Button asChild variant="outline" size="sm">
-              <Link to="/chat">Open Slack →</Link>
+              <a href="/chat">Open Slack →</a>
             </Button>
           </div>
           <div className="rounded-lg border border-border bg-card p-5">