diff --git a/package.json b/package.json
index cc55384..6b20144 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "next build",
-    "dev": "PORT=3001 next dev --turbo",
+    "dev": "PORT=3001 next dev",
     "check": "biome check",
     "check:fix": "biome check --fix --unsafe",
     "preview": "next build && next start",
@@ -15,6 +15,7 @@
   "dependencies": {
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
+    "@dnd-kit/react": "^0.4.0",
     "@hookform/resolvers": "^3.9.1",
     "@polinetwork/backend": "^0.16.0",
     "@radix-ui/react-dialog": "^1.1.15",
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/page.tsx b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
index bc83ede..3f01a78 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
@@ -11,7 +11,7 @@ import { NewGroupAdmin } from "./new-group-admin"
 export default async function TgUserDetails({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const parsedInt = parseInt(id, 10)
-  if (isNaN(parsedInt)) notFound()
+  if (Number.isNaN(parsedInt)) notFound()
   const data = await getUserDetails(parsedInt)
 
   if (!data) notFound()
diff --git a/src/app/dashboard/(active)/web/projects/card-project.tsx b/src/app/dashboard/(active)/web/projects/card-project.tsx
new file mode 100644
index 0000000..8090790
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/card-project.tsx
@@ -0,0 +1,243 @@
+"use client"
+
+import { useSortable } from "@dnd-kit/react/sortable"
+import { Languages, Link, LucidePencil, Save, Upload, X } from "lucide-react"
+import Image from "next/image"
+import type { ChangeEvent } from "react"
+import { useEffect, useState } from "react"
+import { ProjectCategoryMenu } from "@/app/dashboard/(active)/web/projects/category-menu"
+import { DeleteDialog } from "@/components/delete-dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { getInitials } from "@/lib/utils"
+import { cn } from "@/lib/utils/shadcn"
+import type { CardProjectProps } from "./types"
+
+export default function CardProject(item: CardProjectProps) {
+  const { ref } = useSortable({
+    id: item.id,
+    index: item.sortableIndex ?? 0,
+    group: item.category,
+    disabled: item.sortableIndex === undefined,
+  })
+  const iconInputId = `project-icon-${item.id}`
+  const [editActive, setEditActive] = useState(item.initialEditActive ?? false)
+  const [title, setTitle] = useState(item.title)
+  const [logoFile, setLogoFile] = useState<File | null>(null)
+  const [logoPreview, setLogoPreview] = useState<string | null>(null)
+  const [descriptionIt, setDescriptionIt] = useState(item.descriptionIt)
+  const [descriptionEn, setDescriptionEn] = useState(item.descriptionEn)
+  const [link, setLinks] = useState(item.link)
+  const [pending, setPending] = useState(false)
+  const initials = getInitials(title)
+
+  async function handleIconUpload(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    setLogoFile(file)
+    setLogoPreview(URL.createObjectURL(file))
+  }
+
+  useEffect(() => {
+    return () => {
+      if (logoPreview) URL.revokeObjectURL(logoPreview)
+    }
+  }, [logoPreview])
+
+  // If it's draft, remove the card, otherwise reset the values to the original ones
+  function handleCancelEdit() {
+    if (item.isDraft) {
+      item.onCancelCreate?.()
+      return
+    }
+
+    setTitle(item.title)
+    setLogoFile(null)
+    setLogoPreview(null)
+    setDescriptionIt(item.descriptionIt)
+    setDescriptionEn(item.descriptionEn)
+    setLinks(item.link)
+    setEditActive(false)
+  }
+
+  // TODO: forse spostare la cosa salvata per ultima nella lista? Perche poi ordinata per id finisce li
+  // se gli id sono crescenti. O tipo la creo direttamente ultima e non in cima? Pero poi devi scorrere per editarla
+  async function saveChanges() {
+    if (pending) return
+
+    setPending(true)
+    try {
+      const saved = await item.onSave({
+        id: item.id,
+        title,
+        logo: item.logo,
+        logoFile,
+        descriptionIt,
+        descriptionEn,
+        link,
+        category: item.category,
+      })
+      if (saved) {
+        setLogoFile(null)
+        setLogoPreview(null)
+        setEditActive(false)
+      }
+    } finally {
+      setPending(false)
+    }
+  }
+
+  function renderIcon() {
+    const logoSource = logoPreview ?? item.logo
+    if (logoSource) {
+      return <Image src={logoSource} alt="" width={44} height={44} unoptimized className="size-full object-contain" />
+    }
+    return (
+      <span
+        className="flex size-11 items-center justify-center rounded-lg bg-muted text-sm font-semibold text-muted-foreground"
+        aria-hidden="true"
+      >
+        {initials}
+      </span>
+    )
+  }
+
+  return (
+    <Card ref={ref} key={item.id} className="border border-border bg-card">
+      <CardHeader className="grid-cols-[auto_1fr_auto] gap-x-4 gap-y-1">
+        <CardTitle className="flex items-center gap-3 self-center text-lg">
+          {editActive ? (
+            <>
+              <label
+                htmlFor={iconInputId}
+                className="group relative flex size-11 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                {renderIcon()}
+                <span className="absolute inset-0 flex items-center justify-center bg-background/80 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                  <Upload className="size-5" />
+                </span>
+                <Input
+                  id={iconInputId}
+                  type="file"
+                  accept=".svg,.png,.jpg,.jpeg,image/svg+xml,image/png,image/jpeg"
+                  onChange={handleIconUpload}
+                  aria-label={`Upload ${title} icon`}
+                  className="sr-only"
+                />
+              </label>
+              <div className="grid w-full gap-2">
+                <Input
+                  value={title}
+                  onChange={(event) => setTitle(event.target.value)}
+                  className="text-lg font-medium"
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              {renderIcon()}
+              {title}
+            </>
+          )}
+        </CardTitle>
+        <CardAction className="flex items-center gap-2">
+          {editActive ? (
+            <>
+              <Button
+                type="button"
+                variant="success"
+                size="icon"
+                disabled={pending}
+                onClick={() => saveChanges()}
+                aria-label={`Save ${title}`}
+              >
+                <Save className="size-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="error"
+                size="icon"
+                disabled={pending}
+                onClick={handleCancelEdit}
+                aria-label={`Close ${title}`}
+              >
+                <X className="size-4" />
+              </Button>
+            </>
+          ) : (
+            <>
+              <ProjectCategoryMenu category={item.category} onCategoryChange={item.onCategoryChange} />
+
+              <Button
+                type="button"
+                variant="default"
+                size="icon"
+                onClick={() => setEditActive(true)}
+                aria-label={`Edit ${title}`}
+              >
+                <LucidePencil className="size-4" />
+              </Button>
+              <DeleteDialog category="Project" name={title} onConfirm={item.onDelete} />
+            </>
+          )}
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="grid gap-3 md:grid-cols-2">
+        <div className="flex flex-col gap-2 col-span-2">
+          <Badge variant="default">
+            <Link className="size-3" />
+            Link
+          </Badge>
+          <Input
+            value={link ?? ""}
+            readOnly={!editActive}
+            onChange={(event) => setLinks(event.target.value)}
+            className={cn(
+              "border-0 bg-transparent p-3 shadow-none",
+              !editActive &&
+                "cursor-default resize-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent"
+            )}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Badge variant="default">
+            <Languages className="size-3" />
+            IT
+          </Badge>
+          <Textarea
+            aria-label={`${title} Italian description`}
+            value={descriptionIt}
+            readOnly={!editActive}
+            onChange={(event) => setDescriptionIt(event.target.value)}
+            className={cn(
+              "min-h-25 border-0 bg-transparent p-3 shadow-none",
+              !editActive &&
+                "cursor-default resize-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent"
+            )}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Badge variant="default">
+            <Languages className="size-3" />
+            EN
+          </Badge>
+          <Textarea
+            aria-label={`${title} English description`}
+            value={descriptionEn}
+            readOnly={!editActive}
+            onChange={(event) => setDescriptionEn(event.target.value)}
+            className={cn(
+              "min-h-25 border-0 bg-transparent p-3 shadow-none",
+              !editActive &&
+                "cursor-default resize-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent"
+            )}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/projects/category-menu.tsx b/src/app/dashboard/(active)/web/projects/category-menu.tsx
new file mode 100644
index 0000000..0b32c36
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/category-menu.tsx
@@ -0,0 +1,38 @@
+import { MoreHorizontalIcon } from "lucide-react"
+import { PROJECT_CATEGORIES } from "@/app/dashboard/(active)/web/projects/constants"
+import type { ProjectCategory } from "@/app/dashboard/(active)/web/projects/types"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ProjectCategoryMenu({
+  category,
+  onCategoryChange,
+}: {
+  category: ProjectCategory
+  onCategoryChange: (category: ProjectCategory) => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="outline" size="icon" aria-label="Move project">
+          <MoreHorizontalIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuRadioGroup value={category} onValueChange={(value) => onCategoryChange(value as ProjectCategory)}>
+          {PROJECT_CATEGORIES.map((projectCategory) => (
+            <DropdownMenuRadioItem key={projectCategory.value} value={projectCategory.value}>
+              {projectCategory.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/projects/constants.ts b/src/app/dashboard/(active)/web/projects/constants.ts
new file mode 100644
index 0000000..24d9c62
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/constants.ts
@@ -0,0 +1,34 @@
+import type { Project } from "./types"
+
+export const PROJECT_CATEGORY = {
+  NEWS: "news",
+  GENERAL: "general",
+  DEPRECATED: "deprecated",
+} as const
+
+export const PROJECT_CATEGORIES = [
+  {
+    value: PROJECT_CATEGORY.NEWS,
+    label: "News",
+    emptyLabel: 'No news projects found. Click "Add Project" to create one.',
+  },
+  {
+    value: PROJECT_CATEGORY.GENERAL,
+    label: "General",
+    emptyLabel: 'No general projects found. Click "Add Project" to create one.',
+  },
+  {
+    value: PROJECT_CATEGORY.DEPRECATED,
+    label: "Deprecated",
+    emptyLabel: 'No deprecated projects found. Click "Add Project" to create one.',
+  },
+] as const
+
+export const DEFAULT_PROJECT: Omit<Project, "id"> = {
+  title: "New Project",
+  logo: null,
+  descriptionIt: "Description in Italian",
+  descriptionEn: "Description in English",
+  link: null,
+  category: PROJECT_CATEGORY.GENERAL,
+}
diff --git a/src/app/dashboard/(active)/web/projects/page.tsx b/src/app/dashboard/(active)/web/projects/page.tsx
new file mode 100644
index 0000000..e3a30b7
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/page.tsx
@@ -0,0 +1,13 @@
+import { trpc } from "@/server/trpc"
+import { ProjectsView } from "./projects-view"
+import type { Project } from "./types"
+
+export default async function WebProjectsIndex() {
+  const projects: Project[] = await trpc.web.projects.getAllProjects.query()
+
+  return (
+    <div className="container">
+      <ProjectsView initialProjects={projects} />
+    </div>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/projects/projects-drag.tsx b/src/app/dashboard/(active)/web/projects/projects-drag.tsx
new file mode 100644
index 0000000..6ba4934
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/projects-drag.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { DragDropProvider, type DragEndEvent } from "@dnd-kit/react"
+import { flushSync } from "react-dom"
+import { TabsContent } from "@/components/ui/tabs"
+import CardProject from "./card-project"
+import { PROJECT_CATEGORIES } from "./constants"
+import type { Project, ProjectCategory, ProjectsDragProps } from "./types"
+
+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 nextCategoryProjects = [...categoryProjects]
+  const [movedProject] = nextCategoryProjects.splice(sourceIndex, 1)
+  if (!movedProject) return null
+
+  nextCategoryProjects.splice(targetIndex, 0, movedProject)
+
+  let categoryIndex = 0
+  const nextProjects = items.map((project) => {
+    if (project.category !== category) return project
+    return nextCategoryProjects[categoryIndex++] ?? project
+  })
+
+  return { nextProjects, orderedIds: nextCategoryProjects.map((project) => project.id) }
+}
+
+export function ProjectsDrag({
+  projects,
+  activeCategory,
+  editingProjectId,
+  draftProjectIds,
+  onReorder,
+  onCancelCreate,
+  onDelete,
+  onCategoryChange,
+  onSave,
+}: ProjectsDragProps) {
+  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
+
+    // mi serve flush perche se no la ui si aggiorna in ritardo e sembra che aspetta il post (sembra strano l'effetto del frag senza)
+    flushSync(() => {
+      onReorder({ ...reordered, previousProjects: projects })
+    })
+  }
+
+  return (
+    <DragDropProvider onDragEnd={handleDragEnd}>
+      {PROJECT_CATEGORIES.map((category) => {
+        const categoryProjects = projects.filter((project) => project.category === category.value)
+
+        return (
+          <TabsContent key={category.value} value={category.value} className="border-0 p-0 space-y-4">
+            {categoryProjects.length === 0 && (
+              <div className="grid min-h-64 place-items-center">
+                <p className="text-center text-lg text-muted-foreground">{category.emptyLabel}</p>
+              </div>
+            )}
+            {categoryProjects.map((item, index) => (
+              <CardProject
+                key={item.id}
+                id={item.id}
+                title={item.title}
+                logo={item.logo}
+                descriptionIt={item.descriptionIt}
+                descriptionEn={item.descriptionEn}
+                link={item.link}
+                category={item.category}
+                sortableIndex={index}
+                initialEditActive={editingProjectId === item.id}
+                isDraft={draftProjectIds.has(item.id)}
+                onCancelCreate={() => onCancelCreate(item.id)}
+                onDelete={() => onDelete(item.id)}
+                onCategoryChange={(nextCategory) => onCategoryChange(item.id, nextCategory)}
+                onSave={(values) => onSave(item.id, values)}
+              />
+            ))}
+          </TabsContent>
+        )
+      })}
+    </DragDropProvider>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/projects/projects-view.tsx b/src/app/dashboard/(active)/web/projects/projects-view.tsx
new file mode 100644
index 0000000..872e05c
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/projects-view.tsx
@@ -0,0 +1,298 @@
+"use client"
+
+import { PlusIcon } from "lucide-react"
+import { useRef, useState } from "react"
+import { toast } from "sonner"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import WebHeader from "@/components/web-header"
+import { createProject, deleteProject, editProject, reorderProjects } from "@/server/actions/projects"
+import { DEFAULT_PROJECT, PROJECT_CATEGORIES } from "./constants"
+import { ProjectsDrag } from "./projects-drag"
+import type { Project, ProjectCategory, ProjectSaveValues, ProjectsReorder } from "./types"
+
+function getPersistedProjectIds(items: Project[], category: ProjectCategory, draftProjectIds: Set<number>) {
+  return items
+    .filter((project) => project.category === category)
+    .filter((project) => !draftProjectIds.has(project.id))
+    .map((project) => project.id)
+}
+
+export function ProjectsView({ initialProjects }: { initialProjects: Project[] }) {
+  const [projects, setProjects] = useState(initialProjects)
+  const [editingProjectId, setEditingProjectId] = useState<number | null>(null)
+  const [draftProjectIds, setDraftProjectIds] = useState<Set<number>>(new Set())
+  const [activeCategory, setActiveCategory] = useState<ProjectCategory>(DEFAULT_PROJECT.category)
+  // contatore della versione della ultima operazione cosi se arrivano risposte non in ordine o vecchie, non sovrascrivo
+  const reorderRequestId = useRef(0)
+
+  // nextProjects é l'ordine nuovo, previous quello vecchio
+  function handleProjectsReorder({ nextProjects, orderedIds, previousProjects }: ProjectsReorder) {
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+
+    setProjects(nextProjects)
+
+    // aggiorno la ui subito, se é draft non lo considero
+    const projectIds = orderedIds.filter((id) => !draftProjectIds.has(id))
+    if (projectIds.length < 2) return
+
+    // aspetto che la ui si aggiorni prima di mandare
+    window.setTimeout(() => {
+      void persistProjectOrder(projectIds, previousProjects, requestId)
+    }, 0)
+  }
+
+  function restoreProjectSnapshot(rollbackProjects: Project[], requestId: number, activeCategory?: ProjectCategory) {
+    if (reorderRequestId.current !== requestId) return false
+
+    setProjects(rollbackProjects)
+    if (activeCategory) setActiveCategory(activeCategory)
+    return true
+  }
+
+  function rollbackProjectOrder(rollbackProjects: Project[], requestId: number, message: string) {
+    if (!restoreProjectSnapshot(rollbackProjects, requestId)) return
+
+    toast.error(message)
+  }
+
+  async function persistProjectOrder(projectIds: number[], rollbackProjects: Project[], requestId: number) {
+    try {
+      const result = await reorderProjects({ projectIds })
+
+      if (result.error === "UNAUTHORIZED") {
+        rollbackProjectOrder(rollbackProjects, requestId, "You don't have permission to reorder projects.")
+        return
+      }
+
+      if (result.error) {
+        rollbackProjectOrder(rollbackProjects, requestId, "There was an error reordering projects.")
+      }
+    } catch (_e) {
+      rollbackProjectOrder(rollbackProjects, requestId, "There was an error reordering projects.")
+    }
+  }
+
+  // Creates a new temporary project, id will not be saved and will be replaced
+  function handleAdd() {
+    const project: Project = {
+      ...DEFAULT_PROJECT,
+      id: Date.now(),
+      category: activeCategory,
+    }
+
+    setProjects((items) => [project, ...items])
+    setEditingProjectId(project.id)
+    setDraftProjectIds((ids) => new Set(ids).add(project.id))
+  }
+
+  function removeProjectLocally(id: number) {
+    setProjects((items) => items.filter((item) => item.id !== id))
+    setDraftProjectIds((ids) => {
+      const nextIds = new Set(ids)
+      nextIds.delete(id)
+      return nextIds
+    })
+    setEditingProjectId((editingId) => (editingId === id ? null : editingId))
+  }
+
+  // remove implica reorder
+  async function handleDelete(id: number) {
+    if (draftProjectIds.has(id)) {
+      removeProjectLocally(id)
+      return
+    }
+
+    const project = projects.find((item) => item.id === id)
+    if (!project) return
+
+    const previousProjects = projects
+    const nextProjects = projects.filter((item) => item.id !== id)
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+
+    setProjects(nextProjects)
+    setEditingProjectId((editingId) => (editingId === id ? null : editingId))
+
+    try {
+      const result = await deleteProject(id)
+      if (reorderRequestId.current !== requestId) return
+
+      if (result.error === "UNAUTHORIZED") {
+        if (restoreProjectSnapshot(previousProjects, requestId)) {
+          toast.error("You don't have permission to delete projects.")
+        }
+        return
+      } else if (result.error === "NOT_FOUND") {
+        toast.info("This project was already deleted.")
+      } else if (result.error) {
+        if (restoreProjectSnapshot(previousProjects, requestId)) {
+          toast.error("There was an error deleting the project.")
+        }
+        return
+      } else {
+        toast.success("Project deleted successfully.")
+      }
+
+      const projectIds = getPersistedProjectIds(nextProjects, project.category, draftProjectIds)
+      if (projectIds.length > 0) {
+        await persistProjectOrder(projectIds, nextProjects, requestId)
+      }
+    } catch (_e) {
+      if (restoreProjectSnapshot(previousProjects, requestId)) {
+        toast.error("There was an error deleting the project.")
+      }
+    }
+  }
+
+  async function handleCategoryChange(id: number, category: ProjectCategory) {
+    const project = projects.find((item) => item.id === id)
+    if (!project || project.category === category) return
+
+    const previousProjects = projects
+    const movedProject = { ...project, category }
+    const nextProjects = projects.map((item) => (item.id === id ? movedProject : item))
+    const requestId = reorderRequestId.current + 1
+    reorderRequestId.current = requestId
+
+    setActiveCategory(category)
+    setProjects(nextProjects)
+
+    if (draftProjectIds.has(id)) return
+
+    try {
+      const result = await editProject(movedProject)
+      if (reorderRequestId.current !== requestId) return
+
+      if (result.error === "UNAUTHORIZED") {
+        if (restoreProjectSnapshot(previousProjects, requestId, project.category)) {
+          toast.error("You don't have permission to move projects.")
+        }
+        return
+      }
+
+      if (result.error === "NOT_FOUND" || !result.project) {
+        if (restoreProjectSnapshot(previousProjects, requestId, project.category)) {
+          toast.error("There was an error moving the project.")
+        }
+        return
+      }
+
+      const savedProjects = nextProjects.map((item) => (item.id === id ? result.project : item))
+      setProjects(savedProjects)
+      toast.success("Project moved successfully.")
+
+      const projectIds = getPersistedProjectIds(savedProjects, category, draftProjectIds)
+      if (projectIds.length > 0) {
+        await persistProjectOrder(projectIds, savedProjects, requestId)
+      }
+    } catch (_e) {
+      if (restoreProjectSnapshot(previousProjects, requestId, project.category)) {
+        toast.error("There was an error moving the project.")
+      }
+    }
+  }
+
+  // Draft ne crea una nuova, altrimenti modifica quella esistente
+  async function handleSave(id: number, values: ProjectSaveValues) {
+    try {
+      const isDraft = draftProjectIds.has(id)
+      const result = isDraft
+        ? await createProject({
+            title: values.title,
+            logoFile: values.logoFile,
+            descriptionIt: values.descriptionIt,
+            descriptionEn: values.descriptionEn,
+            link: values.link,
+            category: values.category,
+          })
+        : await editProject({
+            id,
+            title: values.title,
+            logoFile: values.logoFile,
+            descriptionIt: values.descriptionIt,
+            descriptionEn: values.descriptionEn,
+            link: values.link,
+            category: values.category,
+          })
+
+      if (result.error === "UNAUTHORIZED") {
+        toast.error("You don't have permission to save projects.")
+        return false
+      } else if (result.error === "NOT_FOUND") {
+        toast.error("This project does not exist anymore.")
+        return false
+      } else if (!result.project) {
+        toast.error("There was an error saving the project.")
+        return false
+      }
+
+      const savedProjects = projects.map((item) => (item.id === id ? result.project : item))
+      const nextDraftProjectIds = new Set(draftProjectIds)
+      nextDraftProjectIds.delete(id)
+
+      setProjects(savedProjects)
+      setDraftProjectIds(nextDraftProjectIds)
+      setEditingProjectId((editingId) => (editingId === id ? null : editingId))
+      toast.success(`Project ${isDraft ? "created" : "updated"} successfully.`)
+
+      if (isDraft) {
+        const requestId = reorderRequestId.current + 1
+        reorderRequestId.current = requestId
+        const projectIds = getPersistedProjectIds(savedProjects, result.project.category, nextDraftProjectIds)
+
+        if (projectIds.length > 0) {
+          await persistProjectOrder(projectIds, savedProjects, requestId)
+        }
+      }
+
+      // Mi ritorna true cosi poi chiudo l'edit della card
+      return true
+    } catch (_e) {
+      toast.error("There was an error saving the project.")
+      return false
+    }
+  }
+
+  return (
+    <>
+      <WebHeader
+        title="Projects"
+        description="Manage and view projects displayed on the web platform."
+        action={{
+          label: "Add Project",
+          icon: <PlusIcon className="size-4" />,
+          onClick: handleAdd,
+        }}
+      />
+
+      <div className="flex w-full">
+        <Tabs
+          value={activeCategory}
+          onValueChange={(value) => setActiveCategory(value as ProjectCategory)}
+          className="w-full space-y-4"
+        >
+          <TabsList>
+            {PROJECT_CATEGORIES.map((category) => (
+              <TabsTrigger key={category.value} value={category.value}>
+                {category.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <ProjectsDrag
+            projects={projects}
+            activeCategory={activeCategory}
+            editingProjectId={editingProjectId}
+            draftProjectIds={draftProjectIds}
+            onReorder={handleProjectsReorder}
+            onCancelCreate={removeProjectLocally}
+            onDelete={handleDelete}
+            onCategoryChange={handleCategoryChange}
+            onSave={handleSave}
+          />
+        </Tabs>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/projects/types.ts b/src/app/dashboard/(active)/web/projects/types.ts
new file mode 100644
index 0000000..f66bf4a
--- /dev/null
+++ b/src/app/dashboard/(active)/web/projects/types.ts
@@ -0,0 +1,45 @@
+import type { PROJECT_CATEGORY } from "./constants"
+
+export type ProjectCategory = (typeof PROJECT_CATEGORY)[keyof typeof PROJECT_CATEGORY]
+
+export type Project = {
+  id: number
+  title: string
+  descriptionIt: string
+  descriptionEn: string
+  logo: string | null
+  link: string | null
+  category: ProjectCategory
+}
+
+export type ProjectSaveValues = Project & {
+  logoFile?: File | null
+}
+
+export type ProjectsReorder = {
+  nextProjects: Project[]
+  orderedIds: number[]
+  previousProjects: Project[]
+}
+
+export type ProjectsDragProps = {
+  projects: Project[]
+  activeCategory: ProjectCategory
+  editingProjectId: number | null
+  draftProjectIds: Set<number>
+  onReorder: (reorder: ProjectsReorder) => void
+  onCancelCreate: (id: number) => void
+  onDelete: (id: number) => void
+  onCategoryChange: (id: number, category: ProjectCategory) => void
+  onSave: (id: number, values: ProjectSaveValues) => Promise<boolean>
+}
+
+export type CardProjectProps = Project & {
+  initialEditActive?: boolean
+  isDraft?: boolean
+  sortableIndex?: number
+  onCancelCreate?: () => void
+  onDelete: () => void
+  onCategoryChange: (category: ProjectCategory) => void
+  onSave: (values: ProjectSaveValues) => boolean | Promise<boolean>
+}
diff --git a/src/components/dashboard-sidebar/data.tsx b/src/components/dashboard-sidebar/data.tsx
index 7401a0c..f4a1f22 100644
--- a/src/components/dashboard-sidebar/data.tsx
+++ b/src/components/dashboard-sidebar/data.tsx
@@ -1,4 +1,4 @@
-import { MessageCircleMoreIcon, Sparkle, Users } from "lucide-react"
+import { Folders, Globe, MessageCircleMoreIcon, Sparkle, Users } from "lucide-react"
 import Image from "next/image"
 import azureSvg from "@/assets/svg/azure.svg"
 import telegramSvg from "@/assets/svg/telegram.svg"
@@ -19,6 +19,11 @@ export const DSData = {
       icon: <Image alt="azure logo" src={azureSvg} className="size-4" />,
       items: [{ title: "Members", url: "/dashboard/azure/members", icon: <Users /> }],
     },
+    {
+      title: "Web",
+      icon: <Globe />,
+      items: [{ title: "Projects", url: "/dashboard/web/projects", icon: <Folders /> }],
+    },
   ],
 }
 
diff --git a/src/components/delete-dialog.tsx b/src/components/delete-dialog.tsx
new file mode 100644
index 0000000..9fd72f8
--- /dev/null
+++ b/src/components/delete-dialog.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { OctagonX, Trash } from "lucide-react"
+import { useState } from "react"
+import { Spinner } from "@/components/spinner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+
+export function DeleteDialog({
+  category,
+  name,
+  onConfirm,
+}: {
+  category: string
+  name: string
+  onConfirm: () => void | Promise<void>
+}) {
+  const [open, setOpen] = useState(false)
+  const [pending, setPending] = useState(false)
+
+  async function handleConfirm() {
+    setPending(true)
+
+    try {
+      await onConfirm()
+      setOpen(false)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger
+        render={
+          <Button type="button" variant="error" size="icon" aria-label={`Delete ${name}`}>
+            <Trash className="size-4" />
+          </Button>
+        }
+      />
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <OctagonX />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Delete {category}</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete <strong>{name}</strong>? <br />
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={pending} onClick={handleConfirm} variant="destructive">
+            {pending ? <Spinner /> : "Confirm"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index e696922..391dc6c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,6 +13,10 @@ const buttonVariants = cva(
           "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        success:
+          "bg-green-500 text-white hover:bg-green-600 aria-expanded:bg-green-600 aria-expanded:text-white",
+        error:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 aria-expanded:bg-destructive/90 aria-expanded:text-destructive-foreground",
         ghost:
           "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
         destructive:
diff --git a/src/components/web-header.tsx b/src/components/web-header.tsx
new file mode 100644
index 0000000..bfe2628
--- /dev/null
+++ b/src/components/web-header.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Button } from "@/components/ui/button"
+
+interface WebHeaderProps {
+  title: string
+  description?: string
+  action?: {
+    label: string
+    icon?: ReactNode
+    onClick: () => void
+  }
+}
+
+export default function WebHeader({ title, description, action }: WebHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 w-full">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/75 bg-clip-text text-transparent">
+          {title}
+        </h1>
+        {description && <p className="text-muted-foreground mt-1.5 text-sm">{description}</p>}
+      </div>
+      {action && (
+        <Button className="shrink-0" onClick={action.onClick}>
+          {action.icon}
+          {action.label}
+        </Button>
+      )}
+    </div>
+  )
+}
diff --git a/src/server/actions/projects.ts b/src/server/actions/projects.ts
new file mode 100644
index 0000000..461e2de
--- /dev/null
+++ b/src/server/actions/projects.ts
@@ -0,0 +1,68 @@
+"use server"
+
+import { requireRole } from "../auth"
+import { trpc } from "../trpc"
+import type { ApiInput, ApiOutput } from "../trpc/types"
+
+type ProjectCategory = ApiOutput["web"]["projects"]["getAllProjects"][number]["category"]
+
+type ProjectFields = {
+  title: string
+  descriptionIt: string
+  descriptionEn: string
+  link: string | null
+  category: ProjectCategory
+  logoFile?: File | null
+}
+
+function getProjectFormData(input: ProjectFields) {
+  const formData = new FormData()
+  formData.set("title", input.title)
+  formData.set("descriptionIt", input.descriptionIt)
+  formData.set("descriptionEn", input.descriptionEn)
+  formData.set("link", input.link ?? "")
+  formData.set("category", input.category)
+  if (input.logoFile) formData.set("logo", input.logoFile)
+  return formData
+}
+
+export async function createProject(input: ProjectFields) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { project: null, error: "UNAUTHORIZED" }
+
+  const formData = getProjectFormData(input)
+  formData.set("createdBy", String(telegramId))
+
+  return {
+    project: await trpc.web.projects.addProject.mutate(formData),
+    error: null,
+  }
+}
+
+export async function editProject(input: ProjectFields & { id: number }) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { project: null, error: "UNAUTHORIZED" }
+
+  const formData = getProjectFormData(input)
+  formData.set("id", String(input.id))
+  formData.set("modifiedBy", String(telegramId))
+
+  const result = await trpc.web.projects.editProject.mutate(formData)
+  if ("error" in result) return { project: null, error: result.error }
+
+  return { project: result, error: null }
+}
+
+export async function deleteProject(id: number) {
+  const { allowed } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { error: "UNAUTHORIZED" }
+
+  return await trpc.web.projects.deleteProject.mutate({ id })
+}
+
+export async function reorderProjects(input: ApiInput["web"]["projects"]["reorderProjects"]) {
+  const { allowed } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { error: "UNAUTHORIZED" }
+
+  return await trpc.web.projects.reorderProjects.mutate(input)
+}