diff --git a/src/app/dashboard/(active)/web/associations/association-links.tsx b/src/app/dashboard/(active)/web/associations/association-links.tsx
new file mode 100644
index 0000000..e73a00c
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/association-links.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { Link, Save } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { LINK_FIELDS } from "./constants"
+import type { AssociationLinks } from "./types"
+
+function normalizeLinks(links: AssociationLinks) {
+  return Object.fromEntries(
+    LINK_FIELDS.map((field) => {
+      const value = links[field.key]?.trim()
+      return [field.key, value || null]
+    })
+  ) as AssociationLinks
+}
+
+export function AssociationLinksDialog({
+  name,
+  links,
+  onSave,
+}: {
+  name: string
+  links: AssociationLinks
+  onSave: (links: AssociationLinks) => boolean | Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [pending, setPending] = useState(false)
+  const [draftLinks, setDraftLinks] = useState(links)
+
+  function handleOpenChange(value: boolean) {
+    setOpen(value)
+    if (value) setDraftLinks(links)
+  }
+
+  async function handleSave() {
+    if (pending) return
+
+    setPending(true)
+    try {
+      const saved = await onSave(normalizeLinks(draftLinks))
+      if (saved) setOpen(false)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger
+        render={
+          <Button type="button" variant="outline" size="icon" aria-label={`Edit ${name} links`}>
+            <Link className="size-4" />
+          </Button>
+        }
+      />
+
+      <DialogContent className="sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>{name} links</DialogTitle>
+          <DialogDescription>Manage the public links for this association.</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-3 md:grid-cols-2">
+          {LINK_FIELDS.map((field) => {
+            const FieldIcon = field.icon
+
+            return (
+              <div className="grid gap-3" key={field.key}>
+                <Label htmlFor={`${name}-${field.key}`}>
+                  <FieldIcon className="size-4" />
+                  {field.label}
+                </Label>
+                <Input
+                  id={`${name}-${field.key}`}
+                  value={draftLinks[field.key] ?? ""}
+                  onChange={(event) =>
+                    setDraftLinks((currentLinks) => ({
+                      ...currentLinks,
+                      [field.key]: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+            )
+          })}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" disabled={pending} onClick={handleSave}>
+            <Save className="size-4" />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/associations/associations-view.tsx b/src/app/dashboard/(active)/web/associations/associations-view.tsx
new file mode 100644
index 0000000..bed4087
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/associations-view.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import { PlusIcon } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { toast } from "sonner"
+import WebHeader from "@/components/web-header"
+import { createAssociation, deleteAssociation, editAssociation, editAssociationLinks } from "@/server/actions/web"
+import CardAssociation from "./card-association"
+import { EMPTY_ASSOCIATION_LINKS } from "./constants"
+import type { Association, AssociationLinks } from "./types"
+
+export function AssociationsView({ initialAssociations }: { initialAssociations: Association[] }) {
+  const router = useRouter()
+  const [associations, setAssociations] = useState(initialAssociations)
+  const [editingAssociationId, setEditingAssociationId] = useState<number | null>(null)
+  const [draftAssociationIds, setDraftAssociationIds] = useState<Set<number>>(new Set())
+
+  // Creates a new temporary association, id will not be saved and will be replaced
+  function handleAdd() {
+    const association: Association = {
+      id: Date.now(),
+      name: "New Association",
+      logoSvg: null,
+      descriptionIt: "Description in Italian",
+      descriptionEn: "Description in English",
+      links: EMPTY_ASSOCIATION_LINKS,
+    }
+
+    setAssociations((items) => [association, ...items])
+    setEditingAssociationId(association.id)
+    setDraftAssociationIds((ids) => new Set(ids).add(association.id))
+  }
+
+  function removeAssociationLocally(id: number) {
+    setAssociations((items) => items.filter((item) => item.id !== id))
+    setDraftAssociationIds((ids) => {
+      const nextIds = new Set(ids)
+      nextIds.delete(id)
+      return nextIds
+    })
+    setEditingAssociationId((editingId) => (editingId === id ? null : editingId))
+  }
+
+  async function handleDelete(id: number) {
+    if (draftAssociationIds.has(id)) {
+      removeAssociationLocally(id)
+      return
+    }
+
+    try {
+      const result = await deleteAssociation(id)
+
+      if (result.error === "UNAUTHORIZED") {
+        toast.error("You don't have permission to delete associations.")
+        return
+      } else if (result.error === "NOT_FOUND") {
+        toast.info("This association was already deleted.")
+      } else {
+        toast.success("Association deleted successfully.")
+      }
+
+      removeAssociationLocally(id)
+      router.refresh()
+    } catch (_e) {
+      toast.error("There was an error deleting the association.")
+    }
+  }
+
+  // Draft ne crea una nuova, altrimenti modifica quella esistente
+  async function handleSave(id: number, values: Association) {
+    try {
+      const isDraft = draftAssociationIds.has(id)
+      const result = isDraft
+        ? await createAssociation({
+            name: values.name,
+            descriptionIt: values.descriptionIt,
+            descriptionEn: values.descriptionEn,
+            logoSvg: values.logoSvg,
+          })
+        : await editAssociation({
+            id,
+            name: values.name,
+            descriptionIt: values.descriptionIt,
+            descriptionEn: values.descriptionEn,
+            logoSvg: values.logoSvg,
+          })
+
+      if (result.error === "UNAUTHORIZED") {
+        toast.error("You don't have permission to save associations.")
+        return false
+      } else if (result.error === "NOT_FOUND") {
+        toast.error("This association does not exist anymore.")
+        return false
+      } else if (!result.association) {
+        toast.error("There was an error saving the association.")
+        return false
+      }
+
+      // anche qui, se facessi il refresh perderei gli altri edit locali
+      setAssociations((items) => items.map((item) => (item.id === id ? result.association : item)))
+      setDraftAssociationIds((ids) => {
+        const nextIds = new Set(ids)
+        nextIds.delete(id)
+        return nextIds
+      })
+      setEditingAssociationId((editingId) => (editingId === id ? null : editingId))
+      toast.success(`Association ${isDraft ? "created" : "updated"} successfully.`)
+      router.refresh()
+      // Mi ritorna true cosi poi chiudo l'edit della card
+      return true
+    } catch (_e) {
+      toast.error("There was an error saving the association.")
+      return false
+    }
+  }
+
+  async function handleSaveLinks(id: number, links: AssociationLinks) {
+    try {
+      const result = await editAssociationLinks({ id, links })
+
+      if (result.error === "UNAUTHORIZED") {
+        toast.error("You don't have permission to save association links.")
+        return false
+      } else if (result.error === "NOT_FOUND") {
+        toast.error("This association does not exist anymore.")
+        return false
+      } else if (!result.association) {
+        toast.error("There was an error saving the association links.")
+        return false
+      }
+
+      setAssociations((items) =>
+        items.map((item) => (item.id === id ? { ...item, links: result.association.links } : item))
+      )
+      toast.success("Association links updated successfully.")
+      router.refresh()
+      return true
+    } catch (_e) {
+      toast.error("There was an error saving the association links.")
+      return false
+    }
+  }
+
+  return (
+    <>
+      <WebHeader
+        title="Associations"
+        description="Manage and view associations displayed on the web platform."
+        action={{
+          label: "Add Association",
+          icon: <PlusIcon className="size-4" />,
+          onClick: handleAdd,
+        }}
+      />
+
+      <div className="grid gap-4">
+        {associations.length === 0 && (
+          <div className="grid min-h-64 place-items-center">
+            <p className="text-center text-lg text-muted-foreground">
+              No associations found. Click "Add Association" to create one.
+            </p>
+          </div>
+        )}
+        {associations.map((item) => (
+          <CardAssociation
+            key={item.id}
+            id={item.id}
+            name={item.name}
+            logoSvg={item.logoSvg}
+            descriptionIt={item.descriptionIt}
+            descriptionEn={item.descriptionEn}
+            links={item.links}
+            initialEditActive={editingAssociationId === item.id}
+            isDraft={draftAssociationIds.has(item.id)}
+            onCancelCreate={() => removeAssociationLocally(item.id)}
+            onDelete={() => handleDelete(item.id)}
+            onSave={(values) => handleSave(item.id, values)}
+            onSaveLinks={(links) => handleSaveLinks(item.id, links)}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/associations/card-association.tsx b/src/app/dashboard/(active)/web/associations/card-association.tsx
new file mode 100644
index 0000000..d3b8e3d
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/card-association.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import { Languages, LucidePencil, Save, Upload, X } from "lucide-react"
+import type { ChangeEvent } from "react"
+import { useState } from "react"
+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 { AssociationLinksDialog } from "./association-links"
+import type { Association, AssociationLinks } from "./types"
+
+export default function CardAssociation(
+  item: Association & {
+    initialEditActive?: boolean
+    isDraft?: boolean
+    onCancelCreate?: () => void
+    onDelete: () => void
+    onSave: (values: Association) => boolean | Promise<boolean>
+    onSaveLinks: (links: AssociationLinks) => boolean | Promise<boolean>
+  }
+) {
+  const iconInputId = `association-icon-${item.id}`
+  const [editActive, setEditActive] = useState(item.initialEditActive ?? false)
+  const [name, setName] = useState(item.name)
+  const [logoSvg, setLogoSvg] = useState(item.logoSvg)
+  const [descriptionIt, setDescriptionIt] = useState(item.descriptionIt)
+  const [descriptionEn, setDescriptionEn] = useState(item.descriptionEn)
+  const [links, setLinks] = useState(item.links)
+  const [pending, setPending] = useState(false)
+  const initials = getInitials(name)
+
+  async function handleIconUpload(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    setLogoSvg(await file.text())
+  }
+
+  // If it's draft, remove the card, otherwise reset the values to the original ones
+  function handleCancelEdit() {
+    if (item.isDraft) {
+      item.onCancelCreate?.()
+      return
+    }
+
+    setName(item.name)
+    setLogoSvg(item.logoSvg)
+    setDescriptionIt(item.descriptionIt)
+    setDescriptionEn(item.descriptionEn)
+    setLinks(item.links)
+    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, name, logoSvg, descriptionIt, descriptionEn, links })
+      if (saved) setEditActive(false)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function saveLinks(nextLinks: AssociationLinks) {
+    const saved = await item.onSaveLinks(nextLinks)
+    if (saved) setLinks(nextLinks)
+    return saved
+  }
+
+  function renderIcon() {
+    if (logoSvg) {
+      return (
+        <span
+          className="flex size-11 items-center justify-center text-foreground [&_svg]:size-full"
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: logoSvg }}
+        />
+      )
+    }
+    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 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,image/svg+xml"
+                  onChange={handleIconUpload}
+                  aria-label={`Upload ${name} icon`}
+                  className="sr-only"
+                />
+              </label>
+              <div className="grid w-full gap-2">
+                <Input value={name} onChange={(event) => setName(event.target.value)} className="text-lg font-medium" />
+              </div>
+            </>
+          ) : (
+            <>
+              {renderIcon()}
+              {name}
+            </>
+          )}
+        </CardTitle>
+        <CardAction className="flex items-center gap-2">
+          {editActive ? (
+            <>
+              <Button
+                type="button"
+                variant="success"
+                size="icon"
+                disabled={pending}
+                onClick={() => saveChanges()}
+                aria-label={`Save ${name}`}
+              >
+                <Save className="size-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="error"
+                size="icon"
+                disabled={pending}
+                onClick={handleCancelEdit}
+                aria-label={`Close ${name}`}
+              >
+                <X className="size-4" />
+              </Button>
+            </>
+          ) : (
+            <>
+              <AssociationLinksDialog name={name} links={links} onSave={saveLinks} />
+              <Button
+                type="button"
+                variant="default"
+                size="icon"
+                onClick={() => setEditActive(true)}
+                aria-label={`Edit ${name}`}
+              >
+                <LucidePencil className="size-4" />
+              </Button>
+              <DeleteDialog category="Association" name={name} onConfirm={item.onDelete} />
+            </>
+          )}
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="grid gap-3 md:grid-cols-2">
+        <div className="flex flex-col gap-2">
+          <Badge variant="default">
+            <Languages className="size-3" />
+            IT
+          </Badge>
+          <Textarea
+            aria-label={`${name} Italian description`}
+            value={descriptionIt}
+            readOnly={!editActive}
+            onChange={(event) => setDescriptionIt(event.target.value)}
+            className={cn(
+              "min-h-32 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={`${name} English description`}
+            value={descriptionEn}
+            readOnly={!editActive}
+            onChange={(event) => setDescriptionEn(event.target.value)}
+            className={cn(
+              "min-h-32 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/associations/constants.ts b/src/app/dashboard/(active)/web/associations/constants.ts
new file mode 100644
index 0000000..e2788ea
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/constants.ts
@@ -0,0 +1,41 @@
+import { AtSign, Globe, Instagram, Link, Linkedin, Mail, Music, Send, Youtube } from "lucide-react"
+import type { AssociationLinks, LinkField } from "./types"
+
+export const ASSOCIATION_LINK = {
+  EMAIL: "email",
+  WEBSITE: "website",
+  FACEBOOK: "facebook",
+  INSTAGRAM: "instagram",
+  TIKTOK: "tiktok",
+  X: "x",
+  TELEGRAM: "telegram",
+  LINKEDIN: "linkedin",
+  YOUTUBE: "youtube",
+  SPOTIFY: "spotify",
+} as const
+
+export const EMPTY_ASSOCIATION_LINKS: AssociationLinks = {
+  [ASSOCIATION_LINK.EMAIL]: null,
+  [ASSOCIATION_LINK.WEBSITE]: null,
+  [ASSOCIATION_LINK.FACEBOOK]: null,
+  [ASSOCIATION_LINK.INSTAGRAM]: null,
+  [ASSOCIATION_LINK.TIKTOK]: null,
+  [ASSOCIATION_LINK.X]: null,
+  [ASSOCIATION_LINK.YOUTUBE]: null,
+  [ASSOCIATION_LINK.TELEGRAM]: null,
+  [ASSOCIATION_LINK.LINKEDIN]: null,
+  [ASSOCIATION_LINK.SPOTIFY]: null,
+}
+
+export const LINK_FIELDS: LinkField[] = [
+  { key: ASSOCIATION_LINK.EMAIL, label: "Email", icon: Mail },
+  { key: ASSOCIATION_LINK.WEBSITE, label: "Website", icon: Globe },
+  { key: ASSOCIATION_LINK.FACEBOOK, label: "Facebook", icon: Link },
+  { key: ASSOCIATION_LINK.INSTAGRAM, label: "Instagram", icon: Instagram },
+  { key: ASSOCIATION_LINK.TIKTOK, label: "TikTok", icon: Music },
+  { key: ASSOCIATION_LINK.X, label: "X", icon: AtSign },
+  { key: ASSOCIATION_LINK.TELEGRAM, label: "Telegram", icon: Send },
+  { key: ASSOCIATION_LINK.LINKEDIN, label: "LinkedIn", icon: Linkedin },
+  { key: ASSOCIATION_LINK.YOUTUBE, label: "YouTube", icon: Youtube },
+  { key: ASSOCIATION_LINK.SPOTIFY, label: "Spotify", icon: Music },
+]
diff --git a/src/app/dashboard/(active)/web/associations/page.tsx b/src/app/dashboard/(active)/web/associations/page.tsx
new file mode 100644
index 0000000..8bcb4b7
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/page.tsx
@@ -0,0 +1,13 @@
+import { trpc } from "@/server/trpc"
+import { AssociationsView } from "./associations-view"
+import type { Association } from "./types"
+
+export default async function WebAssociationsIndex() {
+  const associations: Association[] = await trpc.web.associations.getAllAssociations.query()
+
+  return (
+    <div className="container space-y-6">
+      <AssociationsView initialAssociations={associations} />
+    </div>
+  )
+}
diff --git a/src/app/dashboard/(active)/web/associations/types.ts b/src/app/dashboard/(active)/web/associations/types.ts
new file mode 100644
index 0000000..3a361b2
--- /dev/null
+++ b/src/app/dashboard/(active)/web/associations/types.ts
@@ -0,0 +1,20 @@
+import type { LucideIcon } from "lucide-react"
+import type { ASSOCIATION_LINK } from "./constants"
+
+export type AssociationLink = (typeof ASSOCIATION_LINK)[keyof typeof ASSOCIATION_LINK]
+export type AssociationLinks = Record<AssociationLink, string | null>
+
+export type LinkField = {
+  key: AssociationLink
+  label: string
+  icon: LucideIcon
+}
+
+export type Association = {
+  id: number
+  name: string
+  descriptionIt: string
+  descriptionEn: string
+  logoSvg: string | null
+  links: AssociationLinks
+}
diff --git a/src/components/dashboard-sidebar/data.tsx b/src/components/dashboard-sidebar/data.tsx
index 7401a0c..32b20f2 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 { 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: "Associations", url: "/dashboard/web/associations", icon: <Users /> }],
+    },
   ],
 }
 
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..06e6f42
--- /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">
+      <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/lib/utils/index.ts b/src/lib/utils/index.ts
index 35a3c3e..baf1d20 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -5,11 +5,11 @@ export function getBaseUrl() {
 }
 
 export function getInitials(name: string): string {
-  const [first, second] = name.split(" ")
+  const [first, second] = name.replaceAll("-", " ").split(" ").filter(Boolean)
   if (first?.[0] && second?.[0]) return first[0].toUpperCase() + second[0].toUpperCase()
   if (first?.[0] && !second?.[0] && first?.[1]) return first[0].toUpperCase() + first[1].toLowerCase()
 
-  return name.slice(0, 2) // fallback
+  return name.replaceAll("-", "").slice(0, 2) // fallback
 }
 
 export async function wait(ms: number): Promise<void> {
diff --git a/src/server/actions/web.ts b/src/server/actions/web.ts
new file mode 100644
index 0000000..044c802
--- /dev/null
+++ b/src/server/actions/web.ts
@@ -0,0 +1,45 @@
+"use server"
+
+import { requireRole } from "../auth"
+import { trpc } from "../trpc"
+import type { ApiInput } from "../trpc/types"
+
+export async function createAssociation(input: Omit<ApiInput["web"]["associations"]["addAssociation"], "createdBy">) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { association: null, error: "UNAUTHORIZED" }
+
+  return {
+    association: await trpc.web.associations.addAssociation.mutate({ ...input, createdBy: telegramId }),
+    error: null,
+  }
+}
+
+export async function editAssociation(input: Omit<ApiInput["web"]["associations"]["editAssociation"], "modifiedBy">) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { association: null, error: "UNAUTHORIZED" }
+
+  const result = await trpc.web.associations.editAssociation.mutate({ ...input, modifiedBy: telegramId })
+  if ("error" in result) return { association: null, error: result.error }
+
+  return { association: result, error: null }
+}
+
+export async function editAssociationLinks({
+  id,
+  links,
+}: Pick<ApiInput["web"]["associations"]["editAssociationLinks"], "id" | "links">) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { association: null, error: "UNAUTHORIZED" }
+
+  const result = await trpc.web.associations.editAssociationLinks.mutate({ id, links, modifiedBy: telegramId })
+  if ("error" in result) return { association: null, error: result.error }
+
+  return { association: result, error: null }
+}
+
+export async function deleteAssociation(id: number) {
+  const { allowed } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { error: "UNAUTHORIZED" }
+
+  return await trpc.web.associations.deleteAssociation.mutate({ id })
+}