diff --git a/src/Controller/DocumentController.php b/src/Controller/DocumentController.php
new file mode 100644
index 0000000..f0846b5
--- /dev/null
+++ b/src/Controller/DocumentController.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Controller;
+
+use App\Entity\Document;
+use App\Entity\Bibliography;
+use App\Entity\Collector;
+use App\RecordStatus;
+use App\Security\Voter\RecordVoter;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Core\Exception\AccessDeniedException;
+
+class DocumentController extends AbstractController
+{
+    #[Route('/document', name: 'app_document')]
+    public function index(EntityManagerInterface $em): Response
+    {
+        $repo = $em->getRepository(Document::class);
+        $records = $repo->findBy([], ['modifiedAt' => 'DESC']);
+        $count = count($records);
+
+        $records = array_slice($records, 0, 15);
+
+        return $this->render('document/index.html.twig', [
+            'controller_name' => 'DocumentController',
+            'records' => $records,
+            'count' => $count,
+        ]);
+    }
+
+    #[Route('/document/{id<\d+>}', name: 'app_document_view')]
+    public function view(document $document, EntityManagerInterface $em): Response
+    {
+        $repo = $em->getRepository(Bibliography::class);
+        /*
+        $bibliographies = $repo->findAllByDocument($document->getId());
+        $document->setBibliographies($bibliographies);
+        */
+
+        $repo = $em->getRepository(document::class);
+        $isEditable = $repo->hasCreatorEditor($document->getCreator());
+        $document->setEditableStatus($isEditable);
+
+        return $this->render('document/view.html.twig', [
+            'controller_name' => 'documentController',
+            'record' => $document,
+        ]);
+    }
+
+    #[Route('/document/delete/{id<\d+>}', name: 'app_document_del')]
+    public function delete(Document $document, EntityManagerInterface $em): Response
+    {
+        try {
+            $this->denyAccessUnlessGranted(RecordVoter::DELETE, $document);
+        }
+        catch (AccessDeniedException) {
+            $this->addFlash('warning', 'You are not authorized to delete this record');
+            return $this->redirectToRoute('app_home');
+        }
+
+        if ($document) {
+            $em->remove($document);
+            $em->flush();
+        }
+
+        $this->addFlash('notice', 'Record deleted successfully');
+
+        return $this->redirectToRoute('app_document');
+    }
+    /**
+     * @todo Move clone logic to __clone() in Entity or Repository
+     */
+    #[Route('/document/copy/{id<\d+>}', name: 'app_document_copy')]
+    public function copy(Document $document, EntityManagerInterface $em): Response
+    {
+        try {
+            $this->denyAccessUnlessGranted(RecordVoter::EDIT, $document);
+        }
+        catch (AccessDeniedException) {
+            $this->addFlash('warning', 'You are not authorized to copy this record');
+            return $this->redirectToRoute('app_home');
+        }
+
+        $user = $this->getUser();
+        $editor = "{$user->getFirstname()} {$user->getLastName()}"; 
+
+        $copy = clone $document;
+        $copy->setEditor($editor);
+        $copy->setOwner($editor);
+        $copy->setCreator($user->getUsername());
+        $repo = $em->getRepository(Bibliography::class);
+        $copy->setBibliographies(
+            $repo->findAllBydocument($document->getId())
+        );
+        /*
+        $repo = $em->getRepository(Collector::class);
+        $copy->setCollectors(
+            $repo->findAllByBibliography($bibliography->getId())
+        );
+        */
+        $copy->setTitle("{$document->getTitle()} - Copy");
+        $copy->setModifiedAt(new \DateTimeImmutable());
+        $copy->setStatus(RecordStatus::Draft->value);
+
+        $em->persist($copy);
+        $em->flush();
+
+        $this->addFlash('notice', 'Record copied successfully');
+
+        return $this->redirectToRoute('app_document_view', ['id' => $copy->getId()]);
+    }
+}
diff --git a/src/Entity/Document.php b/src/Entity/Document.php
new file mode 100644
index 0000000..047b070
--- /dev/null
+++ b/src/Entity/Document.php
@@ -0,0 +1,339 @@
+<?php
+
+namespace App\Entity;
+
+use App\RecordInterface;
+use App\Repository\DocumentRepository;
+use DateTimeImmutable;
+use Doctrine\ORM\Mapping as ORM;
+use Doctrine\DBAL\Types\Types;
+use App\RecordStatus;
+use Doctrine\Common\Collections\Collection as DoctrineCollection;
+
+#[ORM\Entity(repositoryClass: DocumentRepository::class)]
+#[ORM\Table(name: 'document')]
+class Document implements RecordInterface
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(name: 'id')]
+    private ?int $id = null;
+
+    #[ORM\Column(name: 'stato')]
+    private ?int $status = null;
+
+    #[ORM\Column(name: 'modif')]
+    private ?DateTimeImmutable $modifiedAt = null;
+
+    #[ORM\Column(name: 'tit_doc', type: Types::TEXT)]
+    private ?string $title = null;
+
+    #[ORM\Column(name: 'aut_doc', type: Types::TEXT)]
+    private ?string $author = null;
+
+    #[ORM\Column(name: 'data_doc', type: Types::TEXT)]
+    private ?string $chronology = null;
+
+    #[ORM\Column(name: 'inventario', type: Types::TEXT)]
+    private ?string $inventory = null;
+
+    #[ORM\Column(name: 'inizio_doc', length: 50)]
+    private ?string $startDate = null;
+
+    #[ORM\Column(name: 'fine_doc', length: 50)]
+    private ?string $endDate = null;
+
+    #[ORM\Column(name: 'desc_doc', type: Types::TEXT)]
+    private ?string $description = null;
+
+    #[ORM\Column(name: 'inedito_doc', type: Types::BOOLEAN)]
+    private ?bool $unpublished = null;
+
+    #[ORM\Column(name: 'desc_br_doc', type: Types::TEXT)]
+    private ?string $shortDescription = null;
+
+    #[ORM\Column(name: 'id_est_doc', type: Types::TEXT)]
+    private ?string $externalIdentifier = null;
+
+    #[ORM\Column(name: 'link_doc', type: Types::TEXT)]
+    private ?string $link = null;
+
+    #[ORM\Column(name: 'sogg_doc', type: Types::TEXT)]
+    private ?string $subjectHeadings = null;
+
+    #[ORM\Column(name: 'resp', length: 100)]
+    private ?string $owner = null;
+
+    #[ORM\Column(name: 'note_doc', type: Types::TEXT)]
+    private ?string $notes = null;
+
+    #[ORM\Column(length: 100, name: 'editor')]
+    private ?string $editor = null;
+
+    #[ORM\Column(length: 100, name: 'creator')]
+    private ?string $creator = null;
+
+    // TODO: These are references to vocabs
+    #[ORM\Column(name: 'dir_aut_doc')]
+    private ?int $authorRights = null;
+
+    #[ORM\Column(name: 'dir_acc_doc')]
+    private ?int $accessRights = null;
+
+    #[ORM\Column(name: 'lic_doc')]
+    private ?int $license = null;
+
+    #[ORM\JoinTable(name: 'rel_riferimento_documento')]
+    #[ORM\JoinColumn(name: 'Documento_id_doc', referencedColumnName: 'id')]
+    #[ORM\InverseJoinColumn(name: 'Bibliografia_id_bib', referencedColumnName: 'id')]
+    #[ORM\ManyToMany(targetEntity: Bibliography::class, inversedBy: 'document')]
+    private DoctrineCollection $bibliographies;
+
+    private bool $isEditable = false;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getStatus(): ?string
+    {
+        $status = RecordStatus::tryFrom($this->status);
+        return $status->toString();
+    }
+
+    public function setStatus(int $status): static
+    {
+        $this->status = $status;
+
+        return $this;
+    }
+
+    public function getModifiedAt(): ?DateTimeImmutable
+    {
+        return $this->modifiedAt;
+    }
+
+    public function setModifiedAt(DateTimeImmutable $modifiedAt): static
+    {
+        $this->modifiedAt = $modifiedAt;
+
+        return $this;
+    }
+
+    public function getOwner(): ?string
+    {
+        return $this->owner;
+    }
+
+    public function setOwner(string $owner): static
+    {
+        $this->owner = $owner;
+
+        return $this;
+    }
+
+    public function getEditor(): ?string
+    {
+        return $this->editor;
+    }
+
+    public function setEditor(string $editor): static
+    {
+        $this->editor = $editor;
+
+        return $this;
+    }
+
+    public function getCreator(): ?string
+    {
+        return $this->creator;
+    }
+
+    public function setCreator(string $creator): static
+    {
+        $this->creator = $creator;
+
+        return $this;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(string $title): static
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function getAuthor(): ?string
+    {
+        return $this->author;
+    }
+
+    public function setAuthor(string $author): static
+    {
+        $this->author = $author;
+
+        return $this;
+    }
+
+    public function getChronology(): ?string
+    {
+        return $this->chronology;
+    }
+
+    public function setChronology(string $chronology): static
+    {
+        $this->chronology = $chronology;
+
+        return $this;
+    }
+
+    public function getInventory(): ?string
+    {
+        return $this->inventory;
+    }
+
+    public function setInventory(string $inventory): static
+    {
+        $this->inventory = $inventory;
+
+        return $this;
+    }
+
+    public function getStartDate(): ?string
+    {
+        return $this->startDate;
+    }
+
+    public function setStartDate(string $startDate): static
+    {
+        $this->startDate = $startDate;
+
+        return $this;
+    }
+
+    public function getEndDate(): ?string
+    {
+        return $this->endDate;
+    }
+
+    public function setEndDate(string $endDate): static
+    {
+        $this->endDate = $endDate;
+
+        return $this;
+    }
+
+    public function getUnpublished(): ?bool
+    {
+        return $this->unpublished;
+    }
+
+    public function setUnpublished(bool $unpublished): static
+    {
+        $this->unpublished = $unpublished;
+
+        return $this;
+    }
+    public function getDescription(): ?string
+    {
+        return $this->description;
+    }
+
+    public function setDescription(string $description): static
+    {
+        $this->description = $description;
+
+        return $this;
+    }
+
+    public function getShortDescription(): ?string
+    {
+        return $this->shortDescription;
+    }
+
+    public function setShortDescription(string $shortDescription): static
+    {
+        $this->shortDescription = $shortDescription;
+
+        return $this;
+    }
+
+    public function getExternalIdentifier(): ?string
+    {
+        return $this->externalIdentifier;
+    }
+
+    public function setExternalIdentifier(string $externalIdentifier): static
+    {
+        $this->externalIdentifier = $externalIdentifier;
+
+        return $this;
+    }
+
+    public function getLink(): ?string
+    {
+        return $this->link;
+    }
+
+    public function setLink(string $link): static
+    {
+        $this->link = $link;
+
+        return $this;
+    }
+
+    public function getSubjectHeadings(): ?string
+    {
+        return $this->subjectHeadings;
+    }
+
+    public function setSubjectHeadings(string $subjectHeadings): static
+    {
+        $this->subjectHeadings = $subjectHeadings;
+
+        return $this;
+    }
+
+    public function getNotes(): ?string
+    {
+        return $this->notes;
+    }
+
+    public function setNotes(string $notes): static
+    {
+        $this->notes = $notes;
+
+        return $this;
+    }
+
+    public function getBibliographies(): ?DoctrineCollection
+    {
+        return $this->bibliographies;
+    }
+
+    public function setBibliographies(DoctrineCollection $bibliographies): static
+    {
+        $this->bibliographies = $bibliographies;
+
+        return $this;
+    }
+
+    public function getEditableStatus(): bool
+    {
+        return $this->isEditable;
+    }
+
+    public function setEditableStatus(bool $status): static
+    {
+        $this->isEditable = $status;
+        
+        return $this;
+    }
+}
+
diff --git a/src/Repository/DocumentRepository.php b/src/Repository/DocumentRepository.php
new file mode 100644
index 0000000..e8a0bd8
--- /dev/null
+++ b/src/Repository/DocumentRepository.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Repository;
+
+use App\Entity\Document;
+use App\Entity\User;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\ORM\Query\ResultSetMappingBuilder;
+
+/**
+ * @extends ServiceEntityRepository<Document>
+ */
+class DocumentRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Document::class);
+    }
+
+    public function hasCreatorEditor(string $creator): bool
+    {
+        $em = $this->getEntityManager();
+        $repo = $em->getRepository(User::class);
+        
+        $creator = $repo->findOneBy(['username' => $creator]);
+
+        return in_array('ROLE_EDITOR', $creator->getRoles());
+    }
+
+    public function findAllByBibliography(int $biblioId): ?ArrayCollection
+    {
+        $rsm = new ResultSetMappingBuilder($this->getEntityManager());
+        $rsm->addRootEntityFromClassMetadata('App\Entity\Document', 'd');
+
+        $query = $this->getEntityManager()->createNativeQuery(
+            "SELECT
+                id,
+                stato,
+                editor,
+                tit_doc,
+                aut_doc
+            FROM document d
+            JOIN rel_riferimento_documento
+            ON Documento_id_doc = id
+            WHERE Bibliografia_id_bib = :biblioId",
+            $rsm
+        );
+        $query->setParameter('biblioId', $biblioId);
+
+        return new ArrayCollection($query->getResult());
+    }
+}
+
diff --git a/templates/conservation_place/view.html.twig b/templates/conservation_place/view.html.twig
index ce8e830..505e1df 100644
--- a/templates/conservation_place/view.html.twig
+++ b/templates/conservation_place/view.html.twig
@@ -94,7 +94,8 @@
                 <tr><th>Coordinates</th>
                     <td>
                         <span data-map-target="coords">{{ record.lat }}, {{ record.lng }}</span>
-                        <button class="button is-link is-small ml-3" data-action="click->map#open">
+                        <button class="button is-link is-small ml-3"
+                           title="Open map" data-action="click->map#open">
                             <span class="icon is-small p-2">
                                 <i class="fa fa-map"></i>
                             </span>
diff --git a/templates/data_entry.html.twig b/templates/data_entry.html.twig
index aa4f111..0c0d211 100644
--- a/templates/data_entry.html.twig
+++ b/templates/data_entry.html.twig
@@ -237,7 +237,7 @@
                     </a>
                 </li>
                 <li class="pt-1 pb-1">
-                    <a href="">
+                    <a href="{{ path('app_document') }}">
                         Document
                     </a>
                 </li>
diff --git a/templates/document/index.html.twig b/templates/document/index.html.twig
new file mode 100644
index 0000000..bb5171a
--- /dev/null
+++ b/templates/document/index.html.twig
@@ -0,0 +1,109 @@
+{% extends 'data_entry.html.twig' %}
+
+{% block title %}Document | ArCOA{% endblock %}
+
+{% block rightpanel %}
+<div class="container" style="max-width: 60vw" data-controller="delete-record">
+    <h1 class="is-size-1 mt-0 has-text-centered">Document</h1>
+    <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
+
+    {% for message in app.flashes('notice') %}
+       <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
+            {{ message }}
+        </div> 
+    {% endfor %}
+    <div class="card p-5 mt-6 pt-6 pb-6">
+        <div class="columns">
+            <div class="column is-half has-text-centered">
+                <button class="button is-medium">
+                    Search
+                    <span class="icon ml-2">
+                        <i class="fa fa-search"></i>
+                    </span>
+                </button>
+            </div>
+            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') or is_granted('ROLE_EDITOR') %}
+            <div class="column has-text-centered">
+                <a href="" class="button is-link is-medium">
+                    Add new
+                    <span class="icon ml-2">
+                        <i class="fa fa-plus"></i>
+                    </span>
+                </a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <h3 class="has-text-centered is-size-4 mt-6">Records</h3>
+    <p class="pt-4 pb-4"><strong>{{ count }} result(s) found</strong></p>
+    <table class="table is-hoverable is-fullwidth mt-5 has-text-centered results">
+        <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Status</th>
+            <th>Editor</th>
+            <th>Author(s)</th>
+            <th>Last modified</th>
+            <th>Actions</th>
+        </tr>
+        {% for record in records %}
+        <tr>
+            <td><a href="{{ path('app_document_view', {'id' : record.id}) }}">{{ record.id }}</a></td>
+            <td>
+                <a data-delete-record-target="name" href="{{ path('app_document_view', {'id' : record.id}) }}">
+                    {{ record.title }}
+                </a>
+            </td>
+            <td>{{ record.status }}</td>
+            <td>{{ record.owner }}</td>
+            <td style="max-width: 350px;">{{ record.author }}</td>
+            <td>
+                {{ record.modifiedAt.format('Y-m-d') }}<br>
+                {{ record.editor }} at {{ record.modifiedAt.format('H:i:s') }}
+            </td>
+            <td style="min-width: 120px;">
+                <div class="buttons">
+                    <button class="button is-small is-link" title="Edit record">
+                        <span class="icon">
+                            <i class="fa fa-edit"></i>
+                        </span>
+                    </button>
+                    <button data-url="{{ path('app_document_del', {'id' : record.id}) }}"
+                        class="button is-small is-danger" title="Delete record"
+                        data-delete-record-target="path" data-action="click->delete-record#warn">
+                        <span class="icon">
+                            <i class="fa fa-trash"></i>
+                        </span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        {% endfor %}
+    </table>
+    <div class="modal" data-delete-record-target="modal">
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <span class="icon is-large has-text-warning">
+                    <i class="fa fa-warning fa-2x"></i>
+                </span>
+                <p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
+            <button class="delete" aria-label="close"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="is-size-5" data-delete-record-target="message"></p>
+            </section>
+            <footer class="modal-card-foot">
+                <div class="buttons is-right">
+                    <button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
+                    <button class="button is-light" id="cancel">Cancel</button>
+                </div>
+            </footer>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/document/view.html.twig b/templates/document/view.html.twig
new file mode 100644
index 0000000..4ec2d9b
--- /dev/null
+++ b/templates/document/view.html.twig
@@ -0,0 +1,135 @@
+{% extends 'data_entry.html.twig' %}
+
+{% block title %}Document - {{ record.title }} | ArCOA{% endblock %}
+
+{% block rightpanel %}
+<div class="container" style="max-width: 60vw" data-controller="delete-record">
+
+    <p class="pb-3">
+        <a class="button is-link is-outlined"
+            href="{{ path('app_document') }}">
+            Back to index
+            <span class="icon ml-2">
+                <i class="fa fa-arrow-left"></i>
+            </span>
+        </a>
+    </p>
+
+    <h1 class="is-size-1 mt-0 has-text-centered">Document</h1>
+    <h2 class="is-size-3 mt-3 has-text-centered">{{ record.title }}</h2>
+
+    {% for message in app.flashes('notice') %}
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
+            {{ message }}
+        </div>
+    {% endfor %}
+
+    <article class="message is-info mt-3">
+        <div class="message-body">
+            <p>
+                <strong>Last modified:</strong> {{ record.modifiedAt.format('Y-m-d') }}
+                at {{ record.modifiedAt.format('H:i:s') }}
+            </p>
+            <p><strong>Editor:</strong> {{ record.editor }}</p>
+        </div>
+    </article>
+    <div class="card p-5">
+        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
+        <div class="columns">
+            <div class="column is-half"></div>
+            <div class="column has-text-right">
+                <button class="button is-link">
+                    Edit
+                    <span class="icon ml-2">
+                        <i class="fa fa-edit"></i>
+                    </span>
+                </button>
+                <a href="{{ path('app_document_copy', {'id' : record.id}) }}"
+                    class="button is-link">
+                    Copy
+                    <span class="icon ml-2">
+                        <i class="fa fa-copy"></i>
+                    </span>
+                </a>
+                <button data-url="{{ path('app_document_del', {'id' : record.id}) }}"
+                    class="button is-danger"
+                    data-delete-record-target="path" data-action="click->delete-record#warn">
+                    Delete
+                    <span class="icon ml-2">
+                        <i class="fa fa-trash"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+        {% endif %}
+        <div class="tabs is-boxed is-fullwidth">
+            <ul>
+                <li class="is-active">Record</li>
+                <li>Relations</li>
+            </ul>
+        </div>
+        <div class="data-tabs" id="record">
+            <table class="table is-fullwidth pt-4 record">
+                <tr><th>Record ID</th><td>{{ record.id }}</td></tr>
+                <tr><th>Status</th><td>{{ record.getStatus() }}</td></tr>
+                <tr><th>Editor(s)</th><td>{{ record.editor }}</td></tr>
+                <tr><th>Title</th><td data-delete-record-target="name">{{ record.title }}</td></tr>
+                <tr><th>Author(s)</th><td>{{ record.author }}</td></tr>
+                <tr><th>Inventory identifier</th><td>{{ record.inventory }}</td></tr>
+                <tr><th>Chronology</th><td>{{ record.chronology }}</td></tr>
+                <tr><th>Start date</th><td>{{ record.startDate }}</td></tr>
+                <tr><th>End date</th><td>{{ record.endDate }}</td></tr>
+                <tr><th>Unpublished document</th><td>{{ record.unpublished }}</td></tr>
+                <tr><th>Description</th><td>{{ record.description }}</td></tr>
+                <tr><th>Short description</th><td>{{ record.shortDescription }}</td></tr>
+                <tr><th>External identifier(s)</th><td>{{ record.externalIdentifier }}</td></tr>
+                <tr><th>External link(s)</th><td>{{ record.link }}</td></tr>
+                <tr><th>Subject headings</th><td>{{ record.subjectHeadings }}</td></tr>
+                <tr><th>ArCOA URI</th><td>arcoa.cnr.it/document/{{ record.id }}</td></tr>
+                <tr><th>Editorial notes</th><td>{{ record.notes }}</td></tr>
+            </table>
+        </div>
+        <div class="data-tabs is-hidden" id="relations">
+            {% if record.bibliographies %}
+            <p class="p-4 has-text-bold">Bibliographies</p>
+            <table class="table is-fullwidth is-hoverable has-text-centered">
+                <tr><th>ID</th><th>Status</th><th>Citation</th><th>Editor</th><th>Reference</th></tr>
+            {% for biblio in record.bibliographies %}
+               <tr>
+                    <td><a href="{{ path('app_bibliography', {'id' : biblio.id}) }}">{{ biblio.id }}</a></td>
+                    <td><a href="{{ path('app_bibliography', {'id' : biblio.id}) }}">{{ biblio.citation }}</a></td>
+                    <td>{{ biblio.status }}</td>
+                    <td>{{ biblio.editor }}</td>
+                    <td>{{ biblio.reference }}</td>
+                </tr> 
+            {% endfor %}
+            </table>
+            {% endif %}
+        </div>
+    </div>
+    <div class="modal" data-delete-record-target="modal">
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <span class="icon is-large has-text-warning">
+                    <i class="fa fa-warning fa-2x"></i>
+                </span>
+                <p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
+            <button class="delete" aria-label="close"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="is-size-5" data-delete-record-target="message"></p>
+            </section>
+            <footer class="modal-card-foot">
+                <div class="buttons is-right">
+                    <button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
+                    <button class="button is-light" id="cancel">Cancel</button>
+                </div>
+            </footer>
+        </div>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file