diff --git a/package.json b/package.json
index e56a047..48bed3a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@better-auth/passkey": "^1.5.5",
+    "@dnd-kit/react": "^0.4.0",
     "@polinetwork/backend": "^0.17.0",
     "@t3-oss/env-core": "^0.13.10",
     "@tanstack/react-router": "1.170.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a6d4e5..a1254fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@better-auth/passkey':
         specifier: ^1.5.5
         version: 1.5.5(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-call@1.3.2(zod@4.3.6))(jose@6.1.3)(kysely@0.28.12)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(@tanstack/react-start@1.168.27(crossws@0.4.9(srvx@0.11.21))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(rolldown@1.1.5)(vite@8.1.4(@types/node@22.20.1)(jiti@2.7.0)))(mongodb@7.1.0)(next@15.5.18(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14))(better-call@1.3.2(zod@4.3.5))(nanostores@1.2.0)
+      '@dnd-kit/react':
+        specifier: ^0.4.0
+        version: 0.4.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@polinetwork/backend':
         specifier: ^0.17.0
         version: 0.17.0
@@ -469,6 +472,27 @@ packages:
   '@date-fns/tz@1.5.0':
     resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
 
+  '@dnd-kit/abstract@0.4.0':
+    resolution: {integrity: sha512-loEEJxKT5oLOLeRBJVTO9qpgvvW/Qq902xO20v1JMbpANuN/NLurUdpxIwNpVz+RtOSyzznnbc7lO7psmOhc9A==}
+
+  '@dnd-kit/collision@0.4.0':
+    resolution: {integrity: sha512-oOHHUkH1h9Vl2m8TwLw/mPHA7Blf+s0PYcRoLNWNBVxDzugJKZo8WdpU58EMu9qkqyQGrR/YTOozGiMPhlqZ5Q==}
+
+  '@dnd-kit/dom@0.4.0':
+    resolution: {integrity: sha512-mJDKt0BtlHXetZyrvZXh6++aycleIbYWH/OVC4nlszDh8NvW7q8dfsxFllR5RtLKLcykLaI4o545Figfks/HZQ==}
+
+  '@dnd-kit/geometry@0.4.0':
+    resolution: {integrity: sha512-d1n+CU54V/qF/g792bmJK2oR4f5jOL7Pls2IfC+j9f5UBECpjsYbcPZ/krom/z8LgieqvMh1qrUkdcBjJJ7vpg==}
+
+  '@dnd-kit/react@0.4.0':
+    resolution: {integrity: sha512-J2/N4CpQf98zJBZhMljDNsc+QR4VtUKU9BRO1+Di4OGaB1qafMC4qZ11xKXOkjw+d7h82FRSXmXCo0c8+VWaWg==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  '@dnd-kit/state@0.4.0':
+    resolution: {integrity: sha512-vVdwOY9VsYdMNa7Z0xQhTXlzHqCcCugGuoM1kzvZhnZ0tYVPRdmIhWfeO6Y2ZoN92JwYAyJRRNl4ICkEe2mneg==}
+
   '@dotenvx/dotenvx@1.75.1':
     resolution: {integrity: sha512-/BITOC9dmS/edY2zQwZNicQ059O6RKabtQfyEafV0nGtfYRNHYy1DIPiYVcov40+tob9hfmBnbR963dS+EQ1DQ==}
     hasBin: true
@@ -814,6 +838,9 @@ packages:
   '@polinetwork/backend@0.17.0':
     resolution: {integrity: sha512-NfU0i4It86LOMsZ5xyOX8ccOcbazwsC8j/D/B4sBb9PaJjENAdyFS27l9I4i0ihM2MrcFBJixxDdmnPO7/D/Rg==}
 
+  '@preact/signals-core@1.14.4':
+    resolution: {integrity: sha512-HNB6HYeYKhQbJ1aKl+YRjrS4+QWHLKX6qKoUsfS/m0vqzsVaEBiZiaKbG/e+NKk2ch5ALQr/ihWaMHxiCuuWHA==}
+
   '@radix-ui/primitive@1.1.6':
     resolution: {integrity: sha512-w9hl+724uYEgCGR3bhuRepjBtrNB/6gkhCnAf58Ke+SLbHPPQqVZZB59z60roB+5H+nh3nWTcdJhQdFMEydWmw==}
 
@@ -3689,6 +3716,45 @@ snapshots:
 
   '@date-fns/tz@1.5.0': {}
 
+  '@dnd-kit/abstract@0.4.0':
+    dependencies:
+      '@dnd-kit/geometry': 0.4.0
+      '@dnd-kit/state': 0.4.0
+      tslib: 2.8.1
+
+  '@dnd-kit/collision@0.4.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.4.0
+      '@dnd-kit/geometry': 0.4.0
+      tslib: 2.8.1
+
+  '@dnd-kit/dom@0.4.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.4.0
+      '@dnd-kit/collision': 0.4.0
+      '@dnd-kit/geometry': 0.4.0
+      '@dnd-kit/state': 0.4.0
+      tslib: 2.8.1
+
+  '@dnd-kit/geometry@0.4.0':
+    dependencies:
+      '@dnd-kit/state': 0.4.0
+      tslib: 2.8.1
+
+  '@dnd-kit/react@0.4.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/abstract': 0.4.0
+      '@dnd-kit/dom': 0.4.0
+      '@dnd-kit/state': 0.4.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      tslib: 2.8.1
+
+  '@dnd-kit/state@0.4.0':
+    dependencies:
+      '@preact/signals-core': 1.14.4
+      tslib: 2.8.1
+
   '@dotenvx/dotenvx@1.75.1':
     dependencies:
       '@dotenvx/primitives': 0.8.0
@@ -4060,6 +4126,8 @@ snapshots:
 
   '@polinetwork/backend@0.17.0': {}
 
+  '@preact/signals-core@1.14.4': {}
+
   '@radix-ui/primitive@1.1.6': {}
 
   '@radix-ui/react-compose-refs@1.1.3(@types/react@19.2.17)(react@19.2.7)':
diff --git a/src/components/dashboard-navigation.ts b/src/components/dashboard-navigation.ts
index 6d7e311..249d30c 100644
--- a/src/components/dashboard-navigation.ts
+++ b/src/components/dashboard-navigation.ts
@@ -1,6 +1,7 @@
 import {
   BookOpen,
   Database,
+  FolderKanban,
   Globe,
   LayoutDashboard,
   type LucideIcon,
@@ -56,6 +57,7 @@ export const dashboardNavigation = [
     icon: Globe,
     iconSrc: undefined,
     items: [
+      { title: "Projects", url: "/dashboard/web/projects", icon: FolderKanban },
       { title: "Associations", url: "/dashboard/web/associations", icon: Users },
       { title: "Guides", url: "/dashboard/web/guides", icon: BookOpen },
     ],
diff --git a/src/features/projects/project-card.tsx b/src/features/projects/project-card.tsx
new file mode 100644
index 0000000..74d2af9
--- /dev/null
+++ b/src/features/projects/project-card.tsx
@@ -0,0 +1,421 @@
+import { useSortable } from "@dnd-kit/react/sortable"
+import {
+  ExternalLink,
+  GripVertical,
+  Languages,
+  Link as LinkIcon,
+  LoaderCircle,
+  MoreHorizontal,
+  Pencil,
+  Save,
+  Trash2,
+  Upload,
+  X,
+} from "lucide-react"
+import { type ChangeEvent, useEffect, useId, useState } from "react"
+import { toast } from "sonner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
+import { PROJECT_CATEGORIES, PROJECT_LOGO_MAX_SIZE, PROJECT_LOGO_TYPES } from "./projects.constants"
+import type { Project, ProjectCategory, ProjectFormValues } from "./types"
+
+type ProjectCardProps = {
+  project: Project
+  draft: boolean
+  initialEditActive: boolean
+  sortableIndex: number
+  onCancelDraft: () => void
+  onDelete: () => Promise<boolean>
+  onCategoryChange: (category: ProjectCategory) => Promise<void>
+  onSave: (values: ProjectFormValues) => Promise<boolean>
+}
+
+function initials(value: string) {
+  return value
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("")
+}
+
+export function ProjectCard({
+  project,
+  draft,
+  initialEditActive,
+  sortableIndex,
+  onCancelDraft,
+  onDelete,
+  onCategoryChange,
+  onSave,
+}: ProjectCardProps) {
+  const { ref, handleRef, isDragging } = useSortable({
+    id: project.id,
+    index: sortableIndex,
+    group: project.category,
+    disabled: draft,
+  })
+  const logoInputId = useId()
+  const [editing, setEditing] = useState(initialEditActive)
+  const [title, setTitle] = useState(project.title)
+  const [descriptionIt, setDescriptionIt] = useState(project.descriptionIt)
+  const [descriptionEn, setDescriptionEn] = useState(project.descriptionEn)
+  const [link, setLink] = useState(project.link ?? "")
+  const [logoFile, setLogoFile] = useState<File | null>(null)
+  const [logoPreview, setLogoPreview] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const canSave = Boolean(title.trim() && descriptionIt.trim() && descriptionEn.trim())
+
+  useEffect(() => {
+    return () => {
+      if (logoPreview) URL.revokeObjectURL(logoPreview)
+    }
+  }, [logoPreview])
+
+  function resetFields() {
+    setTitle(project.title)
+    setDescriptionIt(project.descriptionIt)
+    setDescriptionEn(project.descriptionEn)
+    setLink(project.link ?? "")
+    setLogoFile(null)
+    setLogoPreview(null)
+  }
+
+  function cancelEdit() {
+    if (draft) {
+      onCancelDraft()
+      return
+    }
+    resetFields()
+    setEditing(false)
+  }
+
+  function selectLogo(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    if (!PROJECT_LOGO_TYPES.some((type) => type === file.type)) {
+      toast.error("Choose an SVG, PNG, or JPEG logo.")
+      event.target.value = ""
+      return
+    }
+    if (file.size > PROJECT_LOGO_MAX_SIZE) {
+      toast.error("The logo must be no larger than 1 MB.")
+      event.target.value = ""
+      return
+    }
+    setLogoFile(file)
+    setLogoPreview(URL.createObjectURL(file))
+  }
+
+  async function save() {
+    if (saving || !canSave) return
+    setSaving(true)
+    try {
+      const saved = await onSave({
+        title: title.trim(),
+        descriptionIt: descriptionIt.trim(),
+        descriptionEn: descriptionEn.trim(),
+        link: link.trim() || null,
+        logo: project.logo,
+        logoFile,
+        category: project.category,
+      })
+      if (saved) {
+        setLogoFile(null)
+        setLogoPreview(null)
+        setEditing(false)
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function remove() {
+    setDeleting(true)
+    try {
+      if (await onDelete()) setDeleteOpen(false)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const logo = logoPreview ?? project.logo
+
+  return (
+    <>
+      <Card
+        ref={(element) => ref(element)}
+        className={cn("transition-opacity", isDragging && "relative z-10 opacity-60")}
+      >
+        <CardHeader className="grid-cols-[auto_1fr_auto] gap-x-3 gap-y-1">
+          <Button
+            ref={(element) => handleRef(element)}
+            type="button"
+            size="icon-sm"
+            variant="ghost"
+            className="cursor-grab self-center text-muted-foreground active:cursor-grabbing"
+            aria-label={`Reorder ${project.title}`}
+            disabled={draft || editing}
+          >
+            <GripVertical />
+          </Button>
+          <CardTitle className="flex min-w-0 items-center gap-3 self-center text-lg">
+            {editing ? (
+              <>
+                <label
+                  htmlFor={logoInputId}
+                  className="group relative grid size-11 shrink-0 cursor-pointer place-items-center overflow-hidden rounded-lg border border-input bg-background transition-colors hover:bg-muted"
+                >
+                  <ProjectLogo logo={logo} title={title} />
+                  <span className="absolute inset-0 grid place-items-center bg-background/80 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                    <Upload className="size-4" />
+                  </span>
+                  <Input
+                    id={logoInputId}
+                    type="file"
+                    aria-label="Project logo"
+                    accept="image/svg+xml,image/png,image/jpeg"
+                    className="sr-only"
+                    onChange={selectLogo}
+                  />
+                </label>
+                <Input
+                  aria-label="Project title"
+                  value={title}
+                  onChange={(event) => setTitle(event.target.value)}
+                  className="min-w-0 text-base font-medium"
+                  maxLength={160}
+                  required
+                />
+              </>
+            ) : (
+              <>
+                <ProjectLogo logo={project.logo} title={project.title} />
+                <span className="truncate">{project.title}</span>
+              </>
+            )}
+          </CardTitle>
+          <CardAction className="flex items-center gap-1.5">
+            {editing ? (
+              <>
+                <Button
+                  type="button"
+                  size="icon-sm"
+                  onClick={() => void save()}
+                  disabled={saving || !canSave}
+                  aria-label={`Save ${title}`}
+                >
+                  {saving ? <LoaderCircle className="animate-spin-slow" /> : <Save />}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon-sm"
+                  onClick={cancelEdit}
+                  disabled={saving}
+                  aria-label="Cancel editing"
+                >
+                  <X />
+                </Button>
+              </>
+            ) : (
+              <>
+                <ProjectCategoryMenu category={project.category} onCategoryChange={onCategoryChange} />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon-sm"
+                  onClick={() => {
+                    resetFields()
+                    setEditing(true)
+                  }}
+                  aria-label={`Edit ${project.title}`}
+                >
+                  <Pencil />
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="icon-sm"
+                  onClick={() => setDeleteOpen(true)}
+                  aria-label={`Delete ${project.title}`}
+                >
+                  <Trash2 />
+                </Button>
+              </>
+            )}
+          </CardAction>
+        </CardHeader>
+
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <ProjectField label="Link" icon={<LinkIcon />} className="md:col-span-2">
+            {editing ? (
+              <Input
+                type="url"
+                aria-label="Project link"
+                value={link}
+                onChange={(event) => setLink(event.target.value)}
+                maxLength={2048}
+                placeholder="https://…"
+              />
+            ) : project.link ? (
+              <a
+                href={project.link}
+                target="_blank"
+                rel="noreferrer"
+                className="flex min-h-10 items-center gap-2 break-all rounded-lg bg-muted/60 px-3 py-2 text-sm text-primary hover:underline"
+              >
+                {project.link} <ExternalLink className="size-3.5 shrink-0" />
+              </a>
+            ) : (
+              <p className="min-h-10 rounded-lg bg-muted/60 px-3 py-2 text-sm text-muted-foreground">
+                No link provided
+              </p>
+            )}
+          </ProjectField>
+          <ProjectField label="Italian" icon={<Languages />}>
+            {editing ? (
+              <Textarea
+                aria-label="Italian project description"
+                value={descriptionIt}
+                onChange={(event) => setDescriptionIt(event.target.value)}
+                className="min-h-28"
+                maxLength={5000}
+                required
+              />
+            ) : (
+              <p className="min-h-28 whitespace-pre-wrap rounded-lg bg-muted/60 px-3 py-2 text-sm leading-6">
+                {project.descriptionIt}
+              </p>
+            )}
+          </ProjectField>
+          <ProjectField label="English" icon={<Languages />}>
+            {editing ? (
+              <Textarea
+                aria-label="English project description"
+                value={descriptionEn}
+                onChange={(event) => setDescriptionEn(event.target.value)}
+                className="min-h-28"
+                maxLength={5000}
+                required
+              />
+            ) : (
+              <p className="min-h-28 whitespace-pre-wrap rounded-lg bg-muted/60 px-3 py-2 text-sm leading-6">
+                {project.descriptionEn}
+              </p>
+            )}
+          </ProjectField>
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={deleteOpen} onOpenChange={(open) => !deleting && setDeleteOpen(open)}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20">
+              <Trash2 />
+            </AlertDialogMedia>
+            <AlertDialogTitle>Delete project</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{project.title}</strong>? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting} onClick={() => setDeleteOpen(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction variant="destructive" disabled={deleting} onClick={() => void remove()}>
+              {deleting && <LoaderCircle data-icon="inline-start" className="animate-spin-slow" />} Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+function ProjectLogo({ logo, title }: { logo: string | null; title: string }) {
+  if (logo) return <img src={logo} alt="" className="size-11 shrink-0 rounded-lg object-contain" />
+  return (
+    <span
+      className="grid size-11 shrink-0 place-items-center rounded-lg bg-accent text-sm font-semibold text-primary"
+      aria-hidden="true"
+    >
+      {initials(title) || "PR"}
+    </span>
+  )
+}
+
+function ProjectField({
+  label,
+  icon,
+  className,
+  children,
+}: {
+  label: string
+  icon: React.ReactNode
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className={cn("flex min-w-0 flex-col gap-2", className)}>
+      <Badge variant="secondary" className="w-fit gap-1.5">
+        {icon} {label}
+      </Badge>
+      {children}
+    </div>
+  )
+}
+
+function ProjectCategoryMenu({
+  category,
+  onCategoryChange,
+}: {
+  category: ProjectCategory
+  onCategoryChange: (category: ProjectCategory) => Promise<void>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button type="button" variant="outline" size="icon-sm" aria-label="Move project to another category" />}
+      >
+        <MoreHorizontal />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuRadioGroup
+          value={category}
+          onValueChange={(value) => void onCategoryChange(value as ProjectCategory)}
+        >
+          {PROJECT_CATEGORIES.map((item) => (
+            <DropdownMenuRadioItem key={item.value} value={item.value}>
+              {item.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/src/features/projects/projects-page.tsx b/src/features/projects/projects-page.tsx
new file mode 100644
index 0000000..d0e9bf1
--- /dev/null
+++ b/src/features/projects/projects-page.tsx
@@ -0,0 +1,359 @@
+import { DragDropProvider, type DragEndEvent } from "@dnd-kit/react"
+import { useRouter } from "@tanstack/react-router"
+import { useServerFn } from "@tanstack/react-start"
+import { FolderKanban, Plus } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import { flushSync } from "react-dom"
+import { toast } from "sonner"
+import { DataToolbar } from "@/components/data-toolbar"
+import { EmptyState } from "@/components/empty-state"
+import { Button } from "@/components/ui/button"
+import { ProjectCard } from "./project-card"
+import { DEFAULT_PROJECT, getProjectCategoryLabel, PROJECT_CATEGORIES } from "./projects.constants"
+import { createProject, deleteProject, editProject, reorderProjects } from "./projects.functions"
+import type { Project, ProjectCategory, ProjectFormValues, ProjectReorder } from "./types"
+
+function formDataForProject(values: ProjectFormValues, id?: number) {
+  const data = new FormData()
+  if (id !== undefined) data.set("id", String(id))
+  data.set("title", values.title)
+  data.set("descriptionIt", values.descriptionIt)
+  data.set("descriptionEn", values.descriptionEn)
+  data.set("link", values.link ?? "")
+  data.set("logo", values.logo ?? "")
+  data.set("category", values.category)
+  if (values.logoFile) data.set("logoFile", values.logoFile)
+  return data
+}
+
+function moveProjectInCategory(items: Project[], category: ProjectCategory, sourceIndex: number, targetIndex: number) {
+  const categoryProjects = items.filter((project) => project.category === category)
+  if (
+    sourceIndex === targetIndex ||
+    sourceIndex < 0 ||
+    targetIndex < 0 ||
+    sourceIndex >= categoryProjects.length ||
+    targetIndex >= categoryProjects.length
+  ) {
+    return null
+  }
+
+  const reorderedCategory = [...categoryProjects]
+  const [movedProject] = reorderedCategory.splice(sourceIndex, 1)
+  if (!movedProject) return null
+  reorderedCategory.splice(targetIndex, 0, movedProject)
+
+  let categoryIndex = 0
+  const nextProjects = items.map((project) => {
+    if (project.category !== category) return project
+    return reorderedCategory[categoryIndex++] ?? project
+  })
+
+  return { nextProjects, orderedIds: reorderedCategory.map((project) => project.id) }
+}
+
+export function ProjectsPage({ loadedProjects }: { loadedProjects: Project[] }) {
+  const router = useRouter()
+  const createProjectFn = useServerFn(createProject)
+  const editProjectFn = useServerFn(editProject)
+  const deleteProjectFn = useServerFn(deleteProject)
+  const reorderProjectsFn = useServerFn(reorderProjects)
+  const [projects, setProjects] = useState(loadedProjects)
+  const [activeCategory, setActiveCategory] = useState<ProjectCategory>(DEFAULT_PROJECT.category)
+  const [editingProjectId, setEditingProjectId] = useState<number | null>(null)
+  const [draftProjectIds, setDraftProjectIds] = useState<Set<number>>(new Set())
+  const draftProjectIdsRef = useRef(draftProjectIds)
+  const reorderRequestId = useRef(0)
+  const reorderQueue = useRef<Promise<void>>(Promise.resolve())
+  draftProjectIdsRef.current = draftProjectIds
+
+  useEffect(() => {
+    setProjects((current) => {
+      const drafts = current.filter((project) => draftProjectIdsRef.current.has(project.id))
+      return drafts.length ? [...drafts, ...loadedProjects] : loadedProjects
+    })
+  }, [loadedProjects])
+
+  const visibleProjects = projects.filter((project) => project.category === activeCategory)
+
+  async function refresh() {
+    try {
+      await router.invalidate({ sync: true })
+    } catch {
+      toast.warning("Your change was saved, but the latest project list could not be refreshed.")
+    }
+  }
+
+  function persistedIds(items: Project[], category: ProjectCategory, draftIds = draftProjectIdsRef.current) {
+    return items
+      .filter((project) => project.category === category && !draftIds.has(project.id))
+      .map((project) => project.id)
+  }
+
+  async function persistOrders(projectIdGroups: number[][], rollback: Project[], requestId: number) {
+    const groups = projectIdGroups.filter((projectIds) => projectIds.length > 1)
+    if (!groups.length) {
+      if (reorderRequestId.current === requestId) void refresh()
+      return true
+    }
+
+    const operation = reorderQueue.current.then(async () => {
+      for (const projectIds of groups) await reorderProjectsFn({ data: { projectIds } })
+    })
+    reorderQueue.current = operation.catch(() => undefined)
+
+    try {
+      await operation
+      if (reorderRequestId.current === requestId) void refresh()
+      return true
+    } catch {
+      if (reorderRequestId.current === requestId) {
+        setProjects(rollback)
+        toast.error("The project order could not be saved.")
+      }
+      return false
+    }
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    if (event.canceled) return
+    const source = event.operation.source
+    if (
+      !source ||
+      !("initialIndex" in source) ||
+      !("index" in source) ||
+      typeof source.initialIndex !== "number" ||
+      typeof source.index !== "number"
+    ) {
+      return
+    }
+
+    const reordered = moveProjectInCategory(projects, activeCategory, source.initialIndex, source.index)
+    if (!reordered) return
+    const change: ProjectReorder = { ...reordered, previousProjects: projects }
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+
+    flushSync(() => setProjects(change.nextProjects))
+    const ids = change.orderedIds.filter((id) => !draftProjectIds.has(id))
+    void persistOrders([ids], change.previousProjects, requestId)
+  }
+
+  function addProject() {
+    const draft: Project = { ...DEFAULT_PROJECT, id: -Date.now(), category: activeCategory }
+    setProjects((current) => [draft, ...current])
+    setDraftProjectIds((current) => {
+      const next = new Set(current).add(draft.id)
+      draftProjectIdsRef.current = next
+      return next
+    })
+    setEditingProjectId(draft.id)
+  }
+
+  function cancelDraft(id: number) {
+    setProjects((current) => current.filter((project) => project.id !== id))
+    setDraftProjectIds((current) => {
+      const next = new Set(current)
+      next.delete(id)
+      draftProjectIdsRef.current = next
+      return next
+    })
+    setEditingProjectId((current) => (current === id ? null : current))
+  }
+
+  async function saveProject(id: number, values: ProjectFormValues) {
+    const draft = draftProjectIdsRef.current.has(id)
+    try {
+      const saved = draft
+        ? await createProjectFn({ data: formDataForProject(values) })
+        : await editProjectFn({ data: formDataForProject(values, id) })
+
+      let nextProjects: Project[] = []
+      let nextDraftIds = new Set<number>()
+      flushSync(() => {
+        setProjects((current) => {
+          nextProjects = current.map((project) => (project.id === id ? saved : project))
+          return nextProjects
+        })
+        setDraftProjectIds((current) => {
+          nextDraftIds = new Set(current)
+          nextDraftIds.delete(id)
+          draftProjectIdsRef.current = nextDraftIds
+          return nextDraftIds
+        })
+      })
+      setEditingProjectId((current) => (current === id ? null : current))
+      toast.success(`Project ${draft ? "created" : "updated"}.`)
+
+      if (draft) {
+        const requestId = reorderRequestId.current + 1
+        reorderRequestId.current = requestId
+        const ids = persistedIds(nextProjects, saved.category, nextDraftIds)
+        await persistOrders([ids], nextProjects, requestId)
+      } else {
+        void refresh()
+      }
+      return true
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : ""
+      toast.error(
+        message.includes("LOGO_TOO_LARGE")
+          ? "The logo must be no larger than 1 MB."
+          : message.includes("INVALID_LOGO_TYPE")
+            ? "Choose an SVG, PNG, or JPEG logo."
+            : "The project could not be saved. Check the fields and try again."
+      )
+      return false
+    }
+  }
+
+  async function removeProject(id: number) {
+    if (draftProjectIdsRef.current.has(id)) {
+      cancelDraft(id)
+      return true
+    }
+
+    let previousProjects: Project[] = []
+    let nextProjects: Project[] = []
+    let project: Project | undefined
+    flushSync(() => {
+      setProjects((current) => {
+        previousProjects = current
+        project = current.find((item) => item.id === id)
+        nextProjects = current.filter((item) => item.id !== id)
+        return project ? nextProjects : current
+      })
+    })
+    if (!project) return false
+    const removedProject = project
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+
+    try {
+      await deleteProjectFn({ data: { id } })
+      toast.success("Project deleted.")
+      const ids = persistedIds(nextProjects, removedProject.category)
+      await persistOrders([ids], nextProjects, requestId)
+      return true
+    } catch {
+      if (reorderRequestId.current === requestId) {
+        setProjects((current) => {
+          if (current.some((item) => item.id === id)) return current
+          const restored = [...current]
+          const previousIndex = previousProjects.findIndex((item) => item.id === id)
+          restored.splice(Math.min(Math.max(previousIndex, 0), restored.length), 0, removedProject)
+          return restored
+        })
+      }
+      toast.error("The project could not be deleted. Check your permissions and try again.")
+      return false
+    }
+  }
+
+  async function changeCategory(id: number, category: ProjectCategory) {
+    let project: Project | undefined
+    flushSync(() => {
+      setProjects((current) => {
+        const foundProject = current.find((item) => item.id === id)
+        project = foundProject
+        if (!foundProject || foundProject.category === category) return current
+        return current.map((item) => (item.id === id ? { ...foundProject, category } : item))
+      })
+    })
+    if (!project || project.category === category) return
+
+    const originalProject = project
+    const movedProject = { ...originalProject, category }
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+    setActiveCategory(category)
+
+    if (draftProjectIdsRef.current.has(id)) return
+
+    try {
+      const saved = await editProjectFn({ data: formDataForProject(movedProject, id) })
+      let savedProjects: Project[] = []
+      flushSync(() => {
+        setProjects((current) => {
+          savedProjects = current.map((item) => (item.id === id ? saved : item))
+          return savedProjects
+        })
+      })
+      toast.success("Project moved.")
+      const sourceIds = persistedIds(savedProjects, originalProject.category)
+      const destinationIds = persistedIds(savedProjects, category)
+      await persistOrders([sourceIds, destinationIds], savedProjects, requestId)
+    } catch {
+      if (reorderRequestId.current === requestId) {
+        setProjects((current) =>
+          current.map((item) => (item.id === id && item.category === category ? originalProject : item))
+        )
+        setActiveCategory((current) => (current === category ? originalProject.category : current))
+      }
+      toast.error("The project could not be moved.")
+    }
+  }
+
+  return (
+    <div className="animate-appear">
+      <DataToolbar
+        eyebrow="Web"
+        title="Projects"
+        description="Manage the projects displayed across the public web platform."
+        count={visibleProjects.length}
+        total={projects.length}
+        action={
+          <Button onClick={addProject}>
+            <Plus data-icon="inline-start" /> Add project
+          </Button>
+        }
+      >
+        <fieldset className="flex flex-wrap gap-1.5">
+          <legend className="sr-only">Project categories</legend>
+          {PROJECT_CATEGORIES.map((category) => (
+            <Button
+              key={category.value}
+              type="button"
+              size="sm"
+              variant={activeCategory === category.value ? "secondary" : "ghost"}
+              aria-pressed={activeCategory === category.value}
+              onClick={() => setActiveCategory(category.value)}
+            >
+              {category.label}
+              <span className="ml-1 text-xs text-muted-foreground">
+                {projects.filter((project) => project.category === category.value).length}
+              </span>
+            </Button>
+          ))}
+        </fieldset>
+      </DataToolbar>
+
+      {visibleProjects.length ? (
+        <DragDropProvider onDragEnd={handleDragEnd}>
+          <div className="space-y-4">
+            {visibleProjects.map((project, index) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+                draft={draftProjectIds.has(project.id)}
+                initialEditActive={editingProjectId === project.id}
+                sortableIndex={index}
+                onCancelDraft={() => cancelDraft(project.id)}
+                onDelete={() => removeProject(project.id)}
+                onCategoryChange={(category) => changeCategory(project.id, category)}
+                onSave={(values) => saveProject(project.id, values)}
+              />
+            ))}
+          </div>
+        </DragDropProvider>
+      ) : (
+        <EmptyState
+          icon={FolderKanban}
+          title={`No ${getProjectCategoryLabel(activeCategory)} projects yet`}
+          text="Add the first project in this category, or choose another category above."
+          action={<Button onClick={addProject}>Add project</Button>}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/features/projects/projects.constants.ts b/src/features/projects/projects.constants.ts
new file mode 100644
index 0000000..96c931b
--- /dev/null
+++ b/src/features/projects/projects.constants.ts
@@ -0,0 +1,23 @@
+import type { Project, ProjectCategory } from "./types"
+
+export const PROJECT_CATEGORIES = [
+  { value: "news", label: "News" },
+  { value: "general", label: "General" },
+  { value: "deprecated", label: "Deprecated" },
+] as const satisfies readonly { value: ProjectCategory; label: string }[]
+
+export const PROJECT_LOGO_TYPES = ["image/svg+xml", "image/png", "image/jpeg"] as const
+export const PROJECT_LOGO_MAX_SIZE = 1024 * 1024
+
+export const DEFAULT_PROJECT: Omit<Project, "id"> = {
+  title: "New project",
+  logo: null,
+  descriptionIt: "Descrizione in italiano",
+  descriptionEn: "Description in English",
+  link: null,
+  category: "general",
+}
+
+export function getProjectCategoryLabel(category: ProjectCategory) {
+  return PROJECT_CATEGORIES.find((item) => item.value === category)?.label ?? category
+}
diff --git a/src/features/projects/projects.functions.ts b/src/features/projects/projects.functions.ts
new file mode 100644
index 0000000..dee2255
--- /dev/null
+++ b/src/features/projects/projects.functions.ts
@@ -0,0 +1,79 @@
+import { createServerFn } from "@tanstack/react-start"
+import { z } from "zod"
+import { adminMiddleware } from "@/server/auth.middleware"
+import { parseProjectForm } from "./projects.validation"
+import type { Project } from "./types"
+
+function projectFields(project: Project) {
+  return {
+    id: project.id,
+    title: project.title,
+    descriptionIt: project.descriptionIt,
+    descriptionEn: project.descriptionEn,
+    logo: project.logo,
+    link: project.link,
+    category: project.category,
+  }
+}
+
+async function resolveLogo(currentLogo: string | null, logoFile: File | null) {
+  if (!logoFile) return currentLogo
+  const content = Buffer.from(await logoFile.arrayBuffer()).toString("base64")
+  return `data:${logoFile.type};base64,${content}`
+}
+
+export const getProjects = createServerFn()
+  .middleware([adminMiddleware])
+  .handler(async ({ context }) => {
+    const projects = await context.backend.web.projects.getAllProjects.query()
+    return projects.map(projectFields)
+  })
+
+export const createProject = createServerFn({ method: "POST" })
+  .middleware([adminMiddleware])
+  .validator(parseProjectForm)
+  .handler(async ({ data, context }) => {
+    const { logoFile, ...fields } = data
+    const project = await context.backend.web.projects.addProject.mutate({
+      ...fields,
+      logo: await resolveLogo(fields.logo, logoFile),
+      createdBy: context.telegramId,
+    })
+    return projectFields(project)
+  })
+
+export const editProject = createServerFn({ method: "POST" })
+  .middleware([adminMiddleware])
+  .validator((data: FormData) => {
+    const id = Number(data.get("id"))
+    if (!Number.isInteger(id) || id <= 0) throw new Error("INVALID_ID")
+    return { id, ...parseProjectForm(data) }
+  })
+  .handler(async ({ data, context }) => {
+    const { logoFile, ...fields } = data
+    const result = await context.backend.web.projects.editProject.mutate({
+      ...fields,
+      logo: await resolveLogo(fields.logo, logoFile),
+      modifiedBy: context.telegramId,
+    })
+    if ("error" in result) throw new Error(result.error)
+    return projectFields(result)
+  })
+
+export const deleteProject = createServerFn({ method: "POST" })
+  .middleware([adminMiddleware])
+  .validator(z.object({ id: z.number().int().positive() }))
+  .handler(async ({ data, context }) => {
+    const result = await context.backend.web.projects.deleteProject.mutate(data)
+    if (result.error) throw new Error(result.error)
+    return result
+  })
+
+export const reorderProjects = createServerFn({ method: "POST" })
+  .middleware([adminMiddleware])
+  .validator(z.object({ projectIds: z.array(z.number().int().positive()).min(1) }))
+  .handler(async ({ data, context }) => {
+    const result = await context.backend.web.projects.reorderProjects.mutate(data)
+    if (result.error) throw new Error(result.error)
+    return result
+  })
diff --git a/src/features/projects/projects.validation.ts b/src/features/projects/projects.validation.ts
new file mode 100644
index 0000000..8b63f0c
--- /dev/null
+++ b/src/features/projects/projects.validation.ts
@@ -0,0 +1,53 @@
+import { PROJECT_LOGO_MAX_SIZE, PROJECT_LOGO_TYPES } from "./projects.constants.ts"
+
+const PROJECT_CATEGORIES = new Set(["news", "general", "deprecated"])
+const IMAGE_TYPES = new Set<string>(PROJECT_LOGO_TYPES)
+
+function requiredText(data: FormData, key: string, maxLength: number) {
+  const value = data.get(key)
+  if (typeof value !== "string" || !value.trim() || value.trim().length > maxLength) {
+    throw new Error(`INVALID_${key.toUpperCase()}`)
+  }
+  return value.trim()
+}
+
+function optionalText(data: FormData, key: string, maxLength: number) {
+  const value = data.get(key)
+  if (typeof value !== "string") return null
+  const trimmed = value.trim()
+  if (trimmed.length > maxLength) throw new Error(`INVALID_${key.toUpperCase()}`)
+  return trimmed || null
+}
+
+function optionalLink(data: FormData) {
+  const link = optionalText(data, "link", 2048)
+  if (!link) return null
+  try {
+    const url = new URL(link)
+    if (url.protocol !== "http:" && url.protocol !== "https:") throw new Error("INVALID_LINK")
+  } catch {
+    throw new Error("INVALID_LINK")
+  }
+  return link
+}
+
+export function parseProjectForm(data: FormData) {
+  const category = data.get("category")
+  if (typeof category !== "string" || !PROJECT_CATEGORIES.has(category)) throw new Error("INVALID_CATEGORY")
+
+  const logoValue = data.get("logoFile")
+  const logoFile = logoValue instanceof File && logoValue.size > 0 ? logoValue : null
+  if (logoFile && (!IMAGE_TYPES.has(logoFile.type) || logoFile.size > PROJECT_LOGO_MAX_SIZE)) {
+    throw new Error(logoFile.size > PROJECT_LOGO_MAX_SIZE ? "LOGO_TOO_LARGE" : "INVALID_LOGO_TYPE")
+  }
+
+  return {
+    title: requiredText(data, "title", 160),
+    descriptionIt: requiredText(data, "descriptionIt", 5000),
+    descriptionEn: requiredText(data, "descriptionEn", 5000),
+    link: optionalLink(data),
+    logo: optionalText(data, "logo", 4 * 1024 * 1024),
+    logoFile,
+    category: category as "news" | "general" | "deprecated",
+  }
+}
diff --git a/src/features/projects/types.ts b/src/features/projects/types.ts
new file mode 100644
index 0000000..fadc229
--- /dev/null
+++ b/src/features/projects/types.ts
@@ -0,0 +1,15 @@
+import type { WebProject } from "@/lib/api/types"
+
+export type Project = WebProject
+export type ProjectCategory = Project["category"]
+
+export type ProjectFormValues = Omit<Project, "id" | "logo"> & {
+  logo: string | null
+  logoFile?: File | null
+}
+
+export type ProjectReorder = {
+  nextProjects: Project[]
+  orderedIds: number[]
+  previousProjects: Project[]
+}
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 99a72f5..5994e62 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -12,3 +12,4 @@ export type TgUserRole = NonNullable<ApiInput["tg"]["permissions"]["addRole"]["r
 
 export type AzureMember = ApiOutput["azure"]["members"]["getAll"][number]
 export type AzureGroup = ApiOutput["azure"]["groups"]["getAll"][number]
+export type WebProject = ApiOutput["web"]["projects"]["getAllProjects"][number]
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index d4c5451..b528482 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -16,6 +16,7 @@ import { Route as DashboardIndexRouteImport } from './routes/dashboard/index'
 import { Route as OnboardingUnauthorizedRouteImport } from './routes/onboarding/unauthorized'
 import { Route as OnboardingLinkRouteImport } from './routes/onboarding/link'
 import { Route as DashboardAccountRouteImport } from './routes/dashboard/account'
+import { Route as DashboardWebProjectsRouteImport } from './routes/dashboard/web/projects'
 import { Route as DashboardWebGuidesRouteImport } from './routes/dashboard/web/guides'
 import { Route as DashboardWebAssociationsRouteImport } from './routes/dashboard/web/associations'
 import { Route as DashboardTelegramGroupsRouteImport } from './routes/dashboard/telegram/groups'
@@ -61,6 +62,11 @@ const DashboardAccountRoute = DashboardAccountRouteImport.update({
   path: '/account',
   getParentRoute: () => DashboardRoute,
 } as any)
+const DashboardWebProjectsRoute = DashboardWebProjectsRouteImport.update({
+  id: '/web/projects',
+  path: '/web/projects',
+  getParentRoute: () => DashboardRoute,
+} as any)
 const DashboardWebGuidesRoute = DashboardWebGuidesRouteImport.update({
   id: '/web/guides',
   path: '/web/guides',
@@ -125,6 +131,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/telegram/groups': typeof DashboardTelegramGroupsRoute
   '/dashboard/web/associations': typeof DashboardWebAssociationsRoute
   '/dashboard/web/guides': typeof DashboardWebGuidesRoute
+  '/dashboard/web/projects': typeof DashboardWebProjectsRoute
   '/dashboard/telegram/users/$userId': typeof DashboardTelegramUsersUserIdRoute
   '/dashboard/telegram/users/': typeof DashboardTelegramUsersIndexRoute
 }
@@ -142,6 +149,7 @@ export interface FileRoutesByTo {
   '/dashboard/telegram/groups': typeof DashboardTelegramGroupsRoute
   '/dashboard/web/associations': typeof DashboardWebAssociationsRoute
   '/dashboard/web/guides': typeof DashboardWebGuidesRoute
+  '/dashboard/web/projects': typeof DashboardWebProjectsRoute
   '/dashboard/telegram/users/$userId': typeof DashboardTelegramUsersUserIdRoute
   '/dashboard/telegram/users': typeof DashboardTelegramUsersIndexRoute
 }
@@ -161,6 +169,7 @@ export interface FileRoutesById {
   '/dashboard/telegram/groups': typeof DashboardTelegramGroupsRoute
   '/dashboard/web/associations': typeof DashboardWebAssociationsRoute
   '/dashboard/web/guides': typeof DashboardWebGuidesRoute
+  '/dashboard/web/projects': typeof DashboardWebProjectsRoute
   '/dashboard/telegram/users/$userId': typeof DashboardTelegramUsersUserIdRoute
   '/dashboard/telegram/users/': typeof DashboardTelegramUsersIndexRoute
 }
@@ -181,6 +190,7 @@ export interface FileRouteTypes {
     | '/dashboard/telegram/groups'
     | '/dashboard/web/associations'
     | '/dashboard/web/guides'
+    | '/dashboard/web/projects'
     | '/dashboard/telegram/users/$userId'
     | '/dashboard/telegram/users/'
   fileRoutesByTo: FileRoutesByTo
@@ -198,6 +208,7 @@ export interface FileRouteTypes {
     | '/dashboard/telegram/groups'
     | '/dashboard/web/associations'
     | '/dashboard/web/guides'
+    | '/dashboard/web/projects'
     | '/dashboard/telegram/users/$userId'
     | '/dashboard/telegram/users'
   id:
@@ -216,6 +227,7 @@ export interface FileRouteTypes {
     | '/dashboard/telegram/groups'
     | '/dashboard/web/associations'
     | '/dashboard/web/guides'
+    | '/dashboard/web/projects'
     | '/dashboard/telegram/users/$userId'
     | '/dashboard/telegram/users/'
   fileRoutesById: FileRoutesById
@@ -280,6 +292,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardAccountRouteImport
       parentRoute: typeof DashboardRoute
     }
+    '/dashboard/web/projects': {
+      id: '/dashboard/web/projects'
+      path: '/web/projects'
+      fullPath: '/dashboard/web/projects'
+      preLoaderRoute: typeof DashboardWebProjectsRouteImport
+      parentRoute: typeof DashboardRoute
+    }
     '/dashboard/web/guides': {
       id: '/dashboard/web/guides'
       path: '/web/guides'
@@ -355,6 +374,7 @@ interface DashboardRouteChildren {
   DashboardTelegramGroupsRoute: typeof DashboardTelegramGroupsRoute
   DashboardWebAssociationsRoute: typeof DashboardWebAssociationsRoute
   DashboardWebGuidesRoute: typeof DashboardWebGuidesRoute
+  DashboardWebProjectsRoute: typeof DashboardWebProjectsRoute
   DashboardTelegramUsersUserIdRoute: typeof DashboardTelegramUsersUserIdRoute
   DashboardTelegramUsersIndexRoute: typeof DashboardTelegramUsersIndexRoute
 }
@@ -368,6 +388,7 @@ const DashboardRouteChildren: DashboardRouteChildren = {
   DashboardTelegramGroupsRoute: DashboardTelegramGroupsRoute,
   DashboardWebAssociationsRoute: DashboardWebAssociationsRoute,
   DashboardWebGuidesRoute: DashboardWebGuidesRoute,
+  DashboardWebProjectsRoute: DashboardWebProjectsRoute,
   DashboardTelegramUsersUserIdRoute: DashboardTelegramUsersUserIdRoute,
   DashboardTelegramUsersIndexRoute: DashboardTelegramUsersIndexRoute,
 }
diff --git a/src/routes/dashboard/web/projects.tsx b/src/routes/dashboard/web/projects.tsx
new file mode 100644
index 0000000..3cf0416
--- /dev/null
+++ b/src/routes/dashboard/web/projects.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { DataPageSkeleton } from "@/components/loading-skeleton"
+import { getProjects } from "@/features/projects/projects.functions"
+import { ProjectsPage } from "@/features/projects/projects-page"
+
+export const Route = createFileRoute("/dashboard/web/projects")({
+  loader: () => getProjects(),
+  pendingComponent: () => <DataPageSkeleton columns={2} rows={3} withTabs />,
+  component: ProjectsRoute,
+})
+
+function ProjectsRoute() {
+  return <ProjectsPage loadedProjects={Route.useLoaderData()} />
+}
diff --git a/tests/server-security.test.mjs b/tests/server-security.test.mjs
index f98eeec..79a9351 100644
--- a/tests/server-security.test.mjs
+++ b/tests/server-security.test.mjs
@@ -7,6 +7,7 @@ import {
   parseCreateAssociationForm,
 } from "../src/features/associations/associations.validation.ts"
 import { parseGuideForm } from "../src/features/guides/guides.validation.ts"
+import { parseProjectForm } from "../src/features/projects/projects.validation.ts"
 import { forwardAuthRequest } from "../src/server/auth-proxy-core.ts"
 import { hasAdminRole, isAgentModeEnabled } from "../src/server/authorization.ts"
 import { getForwardedCookieHeaders } from "../src/server/request-headers.ts"
@@ -80,6 +81,7 @@ test("admin server functions attach the authorization middleware", async () => {
     "src/features/associations/associations.functions.ts",
     "src/features/azure/azure.functions.ts",
     "src/features/guides/guides.functions.ts",
+    "src/features/projects/projects.functions.ts",
     "src/features/telegram/grants.functions.ts",
     "src/features/telegram/groups.functions.ts",
     "src/features/telegram/users.functions.ts",
@@ -110,6 +112,7 @@ test("event handlers integrate protected server-function redirects with the rout
     "src/features/azure/group-membership.tsx": ["addAzureGroupMember", "removeAzureGroupMember"],
     "src/features/azure/member-dialog.tsx": ["createAzureMember", "setAzureMemberNumber"],
     "src/features/guides/guide-dialogs.tsx": ["createGuide", "deleteGuide"],
+    "src/features/projects/projects-page.tsx": ["createProject", "deleteProject", "editProject", "reorderProjects"],
     "src/features/telegram/groups-page.tsx": ["setGroupVisibility"],
     "src/features/telegram/leave-group-dialog.tsx": ["leaveTelegramGroup"],
     "src/features/telegram/user-detail/grant-dialogs.tsx": ["interruptTelegramGrant"],
@@ -166,6 +169,34 @@ test("guide validation accepts only strict dated PDF uploads", () => {
   assert.throws(() => parseGuideForm(wrongType), /INVALID_FILE_TYPE/)
 })
 
+test("project validation accepts safe fields and supported logos", () => {
+  function validProjectForm() {
+    const data = new FormData()
+    data.set("title", " Project Atlas ")
+    data.set("descriptionIt", "Descrizione")
+    data.set("descriptionEn", "Description")
+    data.set("link", "https://example.com/project")
+    data.set("category", "general")
+    data.set("logoFile", new File([new Uint8Array(8)], "logo.png", { type: "image/png" }))
+    return data
+  }
+
+  const valid = validProjectForm()
+  assert.equal(parseProjectForm(valid).title, "Project Atlas")
+
+  const invalidLink = validProjectForm()
+  invalidLink.set("link", "javascript:alert(1)")
+  assert.throws(() => parseProjectForm(invalidLink), /INVALID_LINK/)
+
+  const wrongType = validProjectForm()
+  wrongType.set("logoFile", new File([new Uint8Array(8)], "logo.gif", { type: "image/gif" }))
+  assert.throws(() => parseProjectForm(wrongType), /INVALID_LOGO_TYPE/)
+
+  const oversized = validProjectForm()
+  oversized.set("logoFile", new File([new Uint8Array(1024 * 1024 + 1)], "logo.png", { type: "image/png" }))
+  assert.throws(() => parseProjectForm(oversized), /LOGO_TOO_LARGE/)
+})
+
 test("association validation accepts bounded image uploads and strict public links", () => {
   const valid = new FormData()
   valid.set("name", " Test association ")