diff --git a/ODPC.Server/Features/Documenten/DocumentDetail/DocumentDetailController.cs b/ODPC.Server/Features/Documenten/DocumentDetail/DocumentDetailController.cs
new file mode 100644
index 0000000..304b47c
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/DocumentDetail/DocumentDetailController.cs
@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODPC.Features.Documenten.DocumentDetail
+{
+    [ApiController]
+    public class DocumentDetailController: ControllerBase
+    {
+        [HttpGet("api/v1/documenten/{uuid:guid}")]
+        public IActionResult Get(Guid uuid)
+        {
+            return DocumentenMock.Documenten.TryGetValue(uuid, out var document)
+                ? Ok(document)
+                : NotFound();
+        }
+    }
+}
diff --git a/ODPC.Server/Features/Documenten/DocumentenMock.cs b/ODPC.Server/Features/Documenten/DocumentenMock.cs
new file mode 100644
index 0000000..4db7c09
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/DocumentenMock.cs
@@ -0,0 +1,24 @@
+using ODPC.Features.Publicaties;
+
+namespace ODPC.Features.Documenten
+{
+    public static class DocumentenMock
+    {
+        public static readonly Dictionary<Guid, PublicatieDocument> Documenten = new PublicatieDocument[]
+        {
+            new()
+            {
+                Uuid = Guid.NewGuid(),
+                Publicatie = PublicatiesMock.Publicaties.Keys.First(),
+                OfficieleTitel = "Belangrijk document",
+                VerkorteTitel = "Document",
+                Omschrijving = "",
+                Creatiedatum = new DateOnly(2024, 09, 23),
+                Bestandsformaat = "DOCX",
+                Bestandsnaam = "belangrijk.docx",
+                Bestandsomvang = 100000
+            }
+        }
+        .ToDictionary(x => x.Uuid);
+    }
+}
diff --git a/ODPC.Server/Features/Documenten/DocumentenOverzicht/DocumentenOverzichtController.cs b/ODPC.Server/Features/Documenten/DocumentenOverzicht/DocumentenOverzichtController.cs
new file mode 100644
index 0000000..1ecc976
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/DocumentenOverzicht/DocumentenOverzichtController.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODPC.Features.Documenten.DocumentenOverzicht
+{
+    [ApiController]
+    public class DocumentenOverzichtController : ControllerBase
+    {
+        [HttpGet("api/v1/documenten")]
+        public IActionResult Get([FromQuery] Guid publicatie)
+        {
+            var documenten = DocumentenMock.Documenten.Values
+                .Where(x=> x.Publicatie == publicatie)
+                .OrderBy(x=> x.Creatiedatum)
+                .ToList();
+
+            return Ok(documenten);
+        }
+    }
+}
diff --git a/ODPC.Server/Features/Documenten/InitialiseerDocument/InitialiseerDocumentController.cs b/ODPC.Server/Features/Documenten/InitialiseerDocument/InitialiseerDocumentController.cs
new file mode 100644
index 0000000..1e52180
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/InitialiseerDocument/InitialiseerDocumentController.cs
@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODPC.Features.Documenten.InitialiseerDocument
+{
+    [ApiController]
+    public class InitialiseerDocumentController : ControllerBase
+    {
+        [HttpPost("api/v1/documenten")]
+        public IActionResult Post(PublicatieDocument document)
+        {
+            document.Uuid = Guid.NewGuid();
+            document.Creatiedatum = DateOnly.FromDateTime(DateTime.Now);
+
+            var halve = document.Bestandsomvang / 2;
+            var firstSize = Math.Ceiling(halve);
+            var secondSize = Math.Floor(halve);
+
+            document.Bestandsdelen =
+            [
+                new()
+                {
+                    Omvang = firstSize,
+                    Url = $"/api/v1/documenten/{document.Uuid}/bestandsdelen/1",
+                    Volgnummer = 0
+                },
+                new()
+                {
+                    Omvang = secondSize,
+                    Url = $"/api/v1/documenten/{document.Uuid}/bestandsdelen/2",
+                    Volgnummer = 1
+                }
+            ];
+
+            DocumentenMock.Documenten[document.Uuid] = document;
+            return Ok(document);
+        }
+    }
+}
diff --git a/ODPC.Server/Features/Documenten/PublicatieDocument.cs b/ODPC.Server/Features/Documenten/PublicatieDocument.cs
new file mode 100644
index 0000000..83fe769
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/PublicatieDocument.cs
@@ -0,0 +1,23 @@
+namespace ODPC.Features.Documenten
+{
+    public class PublicatieDocument
+    {
+        public Guid Uuid { get; set; }
+        public Guid Publicatie { get; set; }
+        public required string OfficieleTitel { get; set; }
+        public string? VerkorteTitel { get; set; }
+        public string? Omschrijving { get; set; }
+        public DateOnly Creatiedatum { get; set; }
+        public required string Bestandsnaam { get; set; }
+        public required string Bestandsformaat { get; set; }
+        public required double Bestandsomvang { get; set; }
+        public List<Bestandsdeel>? Bestandsdelen { get; set; }
+    }
+
+    public class Bestandsdeel
+    {
+        public required string Url { get; set; }
+        public required int Volgnummer { get; set; }
+        public required double Omvang { get; set; }
+    }
+}
diff --git a/ODPC.Server/Features/Documenten/UploadBestandsdeel/UploadBestandsdeelController.cs b/ODPC.Server/Features/Documenten/UploadBestandsdeel/UploadBestandsdeelController.cs
new file mode 100644
index 0000000..c74e5df
--- /dev/null
+++ b/ODPC.Server/Features/Documenten/UploadBestandsdeel/UploadBestandsdeelController.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODPC.Features.Documenten.UploadBestandsdeel
+{
+    [ApiController]
+    public class UploadBestandsdeelController : ControllerBase
+    {
+        [HttpPut("api/v1/documenten/{uuid:guid}/bestandsdelen/{volgnummer:int}")]
+        public IActionResult Put(Guid uuid, int volgnummer)
+        {
+            return NoContent();
+        }
+    }
+}
diff --git a/ODPC.Server/Features/Formats/Format.cs b/ODPC.Server/Features/Formats/Format.cs
new file mode 100644
index 0000000..a660963
--- /dev/null
+++ b/ODPC.Server/Features/Formats/Format.cs
@@ -0,0 +1,9 @@
+namespace ODPC.Features.Formats
+{
+    public class Format
+    {
+        public required string Identifier { get; set; }
+        public required string Name { get; set; }
+        public required string MimeType { get; set; }
+    }
+}
diff --git a/ODPC.Server/Features/Formats/FormatsMock.cs b/ODPC.Server/Features/Formats/FormatsMock.cs
new file mode 100644
index 0000000..f18fa22
--- /dev/null
+++ b/ODPC.Server/Features/Formats/FormatsMock.cs
@@ -0,0 +1,28 @@
+namespace ODPC.Features.Formats
+{
+    public static class FormatsMock
+    {
+        public static readonly Dictionary<string, Format> Formats = new Format[]
+        {
+            new() { Name = "7z", MimeType = "application/x-7z-compressed", Identifier = "a81129a3-ec70-40f3-8eb6-fc94e97ef865" },
+            new() { Name = "CSV", MimeType = "text/csv", Identifier = "6bdd2631-b5d5-472a-b336-9cc643822f0a" },
+            new() { Name = "Excel XLS", MimeType = "application/vnd.ms-excel", Identifier = "822928f7-73f0-45d3-b1a0-4f3a3dbc361a" },
+            new() { Name = "Excel XLSX", MimeType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", Identifier = "fd16ded8-f013-4ca7-ba21-ee3ca36a6054" },
+            new() { Name = "HTML", MimeType = "text/html", Identifier = "bf16a8af-f40b-4e36-96e3-0bdd5d6f5316" },
+            new() { Name = "ODF", MimeType = "application/vnd.oasis.opendocument.formula", Identifier = "26a3df9c-290c-40a4-98cb-387842816698" },
+            new() { Name = "ODP", MimeType = "application/vnd.oasis.opendocument.presentation", Identifier = "8b31aa20-d284-4540-aca4-222e1394c1d5" },
+            new() { Name = "ODS", MimeType = "application/vnd.oasis.opendocument.spreadsheet", Identifier = "837abc18-616f-4e82-945b-fe78ab939860" },
+            new() { Name = "ODT", MimeType = "application/vnd.oasis.opendocument.text", Identifier = "53b7d662-4413-4901-a3a4-6c129fcb93c1" },
+            new() { Name = "PDF", MimeType = "application/pdf", Identifier = "a8836b30-8b25-4af6-9b35-e68e4f644c59" },
+            new() { Name = "TXT", MimeType = "text/plain", Identifier = "549c6a31-6274-4b51-8528-fa9de141681e" },
+            new() { Name = "PPSX", MimeType = "application/vnd.openxmlformats-officedocument.presentationml.slideshow", Identifier = "ff7cf4ad-372f-4996-b6af-5bf8c5b178d8" },
+            new() { Name = "PPT", MimeType = "application/vnd.ms-powerpoint", Identifier = "580e3592-c5b2-40d0-ab7a-0c626c8e171a" },
+            new() { Name = "PPTX", MimeType = "application/vnd.openxmlformats-officedocument.presentationml.presentation", Identifier = "fc188a40-f0bf-415f-a339-fd7520b531f8" },
+            new() { Name = "PPS", MimeType = "application/vnd.ms-powerpoint.slideshow.macroEnabled.12", Identifier = "65298a3a-346d-4614-9fee-028f532ed8bc" },
+            new() { Name = "RTF", MimeType = "application/rtf", Identifier = "63026476-5d40-424e-a113-b02ed7fba760" },
+            new() { Name = "DOC", MimeType = "application/msword", Identifier = "26ccc5e3-acf2-4251-9618-46321e2b9d36" },
+            new() { Name = "DOCX", MimeType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", Identifier = "ae0ea877-3207-4a97-b5df-bf552bc9b895" },
+            new() { Name = "ZIP", MimeType = "application/zip", Identifier = "f879f55e-a9c2-4779-96b2-288d6359d86b" }
+        }.ToDictionary(x => x.Identifier);
+    }
+}
diff --git a/ODPC.Server/Features/Formats/FormatsOverzicht/FormatsOverzichtController.cs b/ODPC.Server/Features/Formats/FormatsOverzicht/FormatsOverzichtController.cs
new file mode 100644
index 0000000..bcbeb0e
--- /dev/null
+++ b/ODPC.Server/Features/Formats/FormatsOverzicht/FormatsOverzichtController.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODPC.Features.Formats.FormatsOverzicht
+{
+    [ApiController]
+    public class FormatsOverzichtController : ControllerBase
+    {
+        [HttpGet("/api/v1/formats")]
+        public IActionResult Get()
+        {
+            return Ok(FormatsMock.Formats.Values.OrderBy(x => x.Name));
+        }
+    }
+}
diff --git a/odpc.client/mock/api.mock.ts b/odpc.client/mock/api.mock.ts
index 88f2a8c..2323502 100644
--- a/odpc.client/mock/api.mock.ts
+++ b/odpc.client/mock/api.mock.ts
@@ -1,29 +1,20 @@
 import { type MockHandler } from "vite-plugin-mock-server";
-import type { Publicatie } from "@/features/publicatie/types";
+import { randomUUID } from "crypto";
+import type { Publicatie, MimeTypes, PublicatieDocument } from "@/features/publicatie/types";
+
+import publicatiesJson from "./publicaties.json";
+import documentenJson from "./documenten.json";
+import mimeTypesJson from "./mime-types.json";
 
 const getIndex = (url: string | undefined) => +(url?.substring(url.lastIndexOf("/") + 1) || 0); // ...
 
-const publicaties: Publicatie[] = [
-  {
-    uuid: "0",
-    officieleTitel:
-      "Openbaarheid en Verantwoording: De Impact van de Wet open overheid op Bestuurlijke Transparantie",
-    verkorteTitel: "Openbaarheid en Verantwoording",
-    omschrijving: "",
-    creatiedatum: "2024-08-24"
-  },
-  {
-    uuid: "1",
-    officieleTitel: "Inzicht voor Iedereen: Toepassing en Resultaten van de Wet open overheid",
-    verkorteTitel: "Inzicht voor Iedereen",
-    omschrijving: "",
-    creatiedatum: "2024-05-02"
-  }
-];
+const publicaties: Publicatie[] = publicatiesJson;
+const documenten: PublicatieDocument[] = documentenJson;
+const mimeTypes: MimeTypes[] = mimeTypesJson;
 
 const mocks: MockHandler[] = [
   {
-    pattern: "/api-mock/publicaties",
+    pattern: "/api-mock/v1/publicaties",
     method: "GET",
     handle: (_req, res) => {
       res.setHeader("Content-Type", "application/json");
@@ -32,7 +23,7 @@ const mocks: MockHandler[] = [
     }
   },
   {
-    pattern: "/api-mock/publicaties",
+    pattern: "/api-mock/v1/publicaties",
     method: "POST",
     handle: (req, res) => {
       res.setHeader("Content-Type", "application/json");
@@ -50,7 +41,7 @@ const mocks: MockHandler[] = [
     }
   },
   {
-    pattern: "/api-mock/publicaties/*",
+    pattern: "/api-mock/v1/publicaties/*",
     method: "GET",
     handle: (req, res) => {
       res.setHeader("Content-Type", "application/json");
@@ -59,7 +50,7 @@ const mocks: MockHandler[] = [
     }
   },
   {
-    pattern: "/api-mock/publicaties/*",
+    pattern: "/api-mock/v1/publicaties/*",
     method: "PUT",
     handle: (req, res) => {
       res.setHeader("Content-Type", "application/json");
@@ -72,6 +63,65 @@ const mocks: MockHandler[] = [
         setTimeout(() => res.end(JSON.stringify(publicatie)), 500);
       });
     }
+  },
+  {
+    pattern: "/api-mock/v1/documenten/*",
+    method: "GET",
+    handle: (_req, res) => {
+      res.setHeader("Content-Type", "application/json");
+
+      setTimeout(() => res.end(JSON.stringify(documenten[0])), 500);
+    }
+  },
+  {
+    pattern: "/api-mock/v1/documenten/**",
+    method: "POST",
+    handle: (req, res) => {
+      res.setHeader("Content-Type", "application/json");
+
+      req.on("data", (bodyString: string) => {
+        const body: any = JSON.parse(bodyString);
+        const { bestandsomvang } = body;
+
+        const uuid = randomUUID();
+        const halve = bestandsomvang / 2;
+        const firstSize = Math.ceil(halve);
+        const secondSize = Math.floor(halve);
+
+        const responseBody = {
+          ...documenten[0],
+          bestandsdelen: [
+            {
+              url: `/api-mock/v1/documenten/${uuid}/bestandsdelen/1`,
+              volgnummer: 0,
+              omvang: firstSize
+            },
+            {
+              url: `/api-mock/v1/documenten/${uuid}/bestandsdelen/2`,
+              volgnummer: 1,
+              omvang: secondSize
+            }
+          ]
+        };
+
+        setTimeout(() => res.end(JSON.stringify(responseBody)), 500);
+      });
+    }
+  },
+  {
+    pattern: "/api-mock/v1/documenten/*/bestandsdelen/*",
+    method: "PUT",
+    handle: (_req, res) => {
+      setTimeout(() => res.end(), 500);
+    }
+  },
+  {
+    pattern: "/api-mock/v1/formats",
+    method: "GET",
+    handle: (_req, res) => {
+      res.setHeader("Content-Type", "application/json");
+      setTimeout(() => res.end(JSON.stringify(mimeTypes)), 500);
+    }
   }
 ];
 
diff --git a/odpc.client/mock/documenten.json b/odpc.client/mock/documenten.json
new file mode 100644
index 0000000..ae7dea8
--- /dev/null
+++ b/odpc.client/mock/documenten.json
@@ -0,0 +1,13 @@
+[
+  {
+    "uuid": "0",
+    "publicatie": "0",
+    "officieleTitel": "Belangrijk document",
+    "verkorteTitel": "Document",
+    "omschrijving": "",
+    "creatiedatum": "2024-09-23",
+    "bestandsnaam": "belangrijk.docx",
+    "bestandsformaat": "DOCX",
+    "bestandsomvang": 100000
+  }
+]
diff --git a/odpc.client/mock/mime-types.json b/odpc.client/mock/mime-types.json
new file mode 100644
index 0000000..0335cb2
--- /dev/null
+++ b/odpc.client/mock/mime-types.json
@@ -0,0 +1,85 @@
+[
+  {
+    "name": "7z",
+    "mimeType": "application/x-7z-compressed",
+    "identifier": "a81129a3-ec70-40f3-8eb6-fc94e97ef865"
+  },
+  { "name": "CSV", "mimeType": "text/csv", "identifier": "6bdd2631-b5d5-472a-b336-9cc643822f0a" },
+  {
+    "name": "Excel XLS",
+    "mimeType": "application/vnd.ms-excel",
+    "identifier": "822928f7-73f0-45d3-b1a0-4f3a3dbc361a"
+  },
+  {
+    "name": "Excel XLSX",
+    "mimeType": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "identifier": "fd16ded8-f013-4ca7-ba21-ee3ca36a6054"
+  },
+  { "name": "HTML", "mimeType": "text/html", "identifier": "bf16a8af-f40b-4e36-96e3-0bdd5d6f5316" },
+  {
+    "name": "ODF",
+    "mimeType": "application/vnd.oasis.opendocument.formula",
+    "identifier": "26a3df9c-290c-40a4-98cb-387842816698"
+  },
+  {
+    "name": "ODP",
+    "mimeType": "application/vnd.oasis.opendocument.presentation",
+    "identifier": "8b31aa20-d284-4540-aca4-222e1394c1d5"
+  },
+  {
+    "name": "ODS",
+    "mimeType": "application/vnd.oasis.opendocument.spreadsheet",
+    "identifier": "837abc18-616f-4e82-945b-fe78ab939860"
+  },
+  {
+    "name": "ODT",
+    "mimeType": "application/vnd.oasis.opendocument.text",
+    "identifier": "53b7d662-4413-4901-a3a4-6c129fcb93c1"
+  },
+  {
+    "name": "PDF",
+    "mimeType": "application/pdf",
+    "identifier": "a8836b30-8b25-4af6-9b35-e68e4f644c59"
+  },
+  { "name": "TXT", "mimeType": "text/plain", "identifier": "549c6a31-6274-4b51-8528-fa9de141681e" },
+  {
+    "name": "PPSX",
+    "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+    "identifier": "ff7cf4ad-372f-4996-b6af-5bf8c5b178d8"
+  },
+  {
+    "name": "PPT",
+    "mimeType": "application/vnd.ms-powerpoint",
+    "identifier": "580e3592-c5b2-40d0-ab7a-0c626c8e171a"
+  },
+  {
+    "name": "PPTX",
+    "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "identifier": "fc188a40-f0bf-415f-a339-fd7520b531f8"
+  },
+  {
+    "name": "PPS",
+    "mimeType": "application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+    "identifier": "65298a3a-346d-4614-9fee-028f532ed8bc"
+  },
+  {
+    "name": "RTF",
+    "mimeType": "application/rtf",
+    "identifier": "63026476-5d40-424e-a113-b02ed7fba760"
+  },
+  {
+    "name": "DOC",
+    "mimeType": "application/msword",
+    "identifier": "26ccc5e3-acf2-4251-9618-46321e2b9d36"
+  },
+  {
+    "name": "DOCX",
+    "mimeType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "identifier": "ae0ea877-3207-4a97-b5df-bf552bc9b895"
+  },
+  {
+    "name": "ZIP",
+    "mimeType": "application/zip",
+    "identifier": "f879f55e-a9c2-4779-96b2-288d6359d86b"
+  }
+]
diff --git a/odpc.client/mock/publicaties.json b/odpc.client/mock/publicaties.json
new file mode 100644
index 0000000..1aa4329
--- /dev/null
+++ b/odpc.client/mock/publicaties.json
@@ -0,0 +1,16 @@
+[
+  {
+    "uuid": "0",
+    "officieleTitel": "Openbaarheid en Verantwoording: De Impact van de Wet open overheid op Bestuurlijke Transparantie",
+    "verkorteTitel": "Openbaarheid en Verantwoording",
+    "omschrijving": "",
+    "creatiedatum": "2024-08-24"
+  },
+  {
+    "uuid": "1",
+    "officieleTitel": "Inzicht voor Iedereen: Toepassing en Resultaten van de Wet open overheid",
+    "verkorteTitel": "Inzicht voor Iedereen",
+    "omschrijving": "",
+    "creatiedatum": "2024-05-02"
+  }
+]
diff --git a/odpc.client/src/assets/simple.css b/odpc.client/src/assets/simple.css
index 2abd5f1..8620f5a 100644
--- a/odpc.client/src/assets/simple.css
+++ b/odpc.client/src/assets/simple.css
@@ -709,5 +709,6 @@ sub {
   border: 2px solid var(--border);
   border-radius: var(--standard-border-radius);
   padding: 1.5rem;
-  margin: 2rem 0;
+  margin-block-start: 0;
+  margin-block-end: 2rem;
 }
diff --git a/odpc.client/src/features/publicatie/PublicatieDetails.vue b/odpc.client/src/features/publicatie/PublicatieDetails.vue
index 04f418d..75d7197 100644
--- a/odpc.client/src/features/publicatie/PublicatieDetails.vue
+++ b/odpc.client/src/features/publicatie/PublicatieDetails.vue
@@ -1,59 +1,51 @@
 <template>
-  <simple-spinner v-if="isFetching"></simple-spinner>
+  <simple-spinner v-show="loading"></simple-spinner>
 
-  <form v-else aria-live="polite" @submit.prevent="submit">
+  <form v-show="!loading" aria-live="polite" @submit.prevent="submit">
     <alert-inline v-if="error"
-      >Er is iets misgegaan bij het ophalen van de publicatie...</alert-inline
+      >Er is iets misgegaan bij het ophalen van de gegevens...</alert-inline
     >
-
-    <fieldset v-else-if="publicatie">
-      <div class="form-group">
-        <label for="titel">Titel</label>
-
-        <input
-          id="titel"
-          type="text"
-          v-model="publicatie.officieleTitel"
-          required
-          aria-required="true"
-        />
-      </div>
-
-      <div class="form-group">
-        <label for="verkorte_titel">Verkorte titel</label>
-
-        <input id="verkorte_titel" type="text" v-model="publicatie.verkorteTitel" class="small" />
-      </div>
-
-      <div class="form-group">
-        <label for="omschrijving">Omschrijving</label>
-
-        <textarea id="omschrijving" v-model="publicatie.omschrijving" rows="4"></textarea>
-      </div>
-    </fieldset>
-
-    <div class="form-submit" :class="{ error }">
-      <router-link :to="{ name: 'publicaties' }" class="button button-secondary">{{
-        error ? "&lt; Terug" : "Annuleren"
-      }}</router-link>
-
-      <button v-if="publicatie && !error" type="submit" title="Opslaan">Opslaan</button>
+    <section v-else-if="publicatie && publicatieDocument">
+      <publicatie-form v-model="publicatie" />
+
+      <document-form
+        v-model:publicatieDocument="publicatieDocument"
+        v-model:file="file"
+        @reset="resetDocument"
+      />
+    </section>
+
+    <div class="form-submit">
+      <router-link :to="{ name: 'publicaties' }" class="button button-secondary"
+        >Annuleren</router-link
+      >
+
+      <button type="submit" title="Opslaan" :disabled="error">Opslaan</button>
     </div>
   </form>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { useFetchApi } from "@/api/use-fetch-api";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import AlertInline from "@/components/AlertInline.vue";
 import toast from "@/stores/toast";
-import type { Publicatie } from "./types";
+import PublicatieForm from "./components/PublicatieForm.vue";
+import DocumentForm from "./components/DocumentForm.vue";
+import type { Publicatie, PublicatieDocument } from "./types";
+import { useFetchApi } from "@/api/use-fetch-api";
+import { uploadFile } from "./service";
 
 const router = useRouter();
-const props = defineProps<{ id?: string }>();
 
+const { uuid } = defineProps<{ uuid?: string }>();
+
+const uploading = ref(false);
+const loading = computed(() => loadingPublicatie.value || loadingDocument.value || uploading.value);
+const error = computed(() => publicatieError.value || documentError.value);
+
+// Publicatie
 const publicatie = ref<Publicatie | null>({
   officieleTitel: "",
   verkorteTitel: "",
@@ -61,34 +53,138 @@ const publicatie = ref<Publicatie | null>({
   creatiedatum: new Date().toISOString().split("T")[0]
 });
 
-const { data, isFetching, error, post, put, execute } = useFetchApi(
-  () => `/api/v1/publicaties${props.id ? "/" + props.id : ""}`,
-  { immediate: false }
-).json<Publicatie>();
+const {
+  data: publicatieData,
+  isFetching: loadingPublicatie,
+  error: publicatieError,
+  post: postPublicatie,
+  put: putPublicatie,
+  execute: execPublicatie
+} = useFetchApi(() => `/api/v1/publicaties${uuid ? "/" + uuid : ""}`, {
+  immediate: false
+}).json<Publicatie>();
+
+watch(publicatieData, (value) => (publicatie.value = value), { immediate: false });
+
+// Document
+const file = ref<File | null>();
+
+const initialDocument = (): PublicatieDocument => ({
+  publicatie: "",
+  officieleTitel: "",
+  verkorteTitel: "",
+  omschrijving: "",
+  creatiedatum: new Date().toISOString().split("T")[0],
+  bestandsnaam: "",
+  bestandsformaat: "",
+  bestandsomvang: 0,
+  bestandsdelen: []
+});
+
+const publicatieDocument = ref<PublicatieDocument | null>(initialDocument());
+
+const resetDocument = () => (publicatieDocument.value = initialDocument());
+
+const { post: postDocument } = useFetchApi(() => "/api/v1/documenten", {
+  immediate: false
+});
+
+const {
+  data: documentData,
+  isFetching: loadingDocument,
+  error: documentError,
+  execute: execDocument
+} = useFetchApi(() => `/api/v1/documenten?publicatie=${uuid}`, {
+  immediate: false
+}).json<PublicatieDocument[]>();
+
+watch(documentData, (value) => (publicatieDocument.value = value?.at(-1) || null), {
+  immediate: false
+});
+
+// Submit
+const submitPublicatie = async (): Promise<void> => {
+  uuid ? putPublicatie(publicatie) : postPublicatie(publicatie);
+
+  await execPublicatie();
+
+  if (publicatieError.value) {
+    toast.add({
+      text: "De publicatie kon niet worden opgeslagen, probeer het nogmaals...",
+      type: "error"
+    });
+
+    publicatieError.value = null;
+
+    throw new Error();
+  }
+};
+
+const submitDocument = async (): Promise<void> => {
+  if (!publicatie.value?.uuid || !publicatieDocument.value || publicatieDocument.value.uuid) return;
+
+  publicatieDocument.value.publicatie = publicatie.value?.uuid;
+
+  await postDocument(publicatieDocument).execute();
+  await execDocument();
 
-watch(data, () => (publicatie.value = data.value), { immediate: false });
+  if (documentError.value) {
+    toast.add({
+      text: "De metadata bij het document kon niet worden opgeslagen, probeer het nogmaals...",
+      type: "error"
+    });
+
+    documentError.value = null;
+
+    throw new Error();
+  }
+};
+
+const uploadDocument = async (): Promise<void> => {
+  const lastDoc = documentData.value?.at(-1);
+  if (file.value && lastDoc?.bestandsdelen?.length) {
+    uploading.value = true;
+
+    try {
+      await uploadFile(file.value, lastDoc.bestandsdelen);
+    } catch {
+      toast.add({
+        text: "Het document kon niet worden geupload, probeer het nogmaals...",
+        type: "error"
+      });
+
+      resetDocument();
+
+      throw new Error();
+    } finally {
+      uploading.value = false;
+    }
+  }
+};
 
 const submit = async (): Promise<void> => {
-  props.id ? put(publicatie) : post(publicatie);
-
-  await execute();
-
-  toast.add(
-    error.value
-      ? { text: "De publicatie kon niet worden opgeslagen, probeer het nogmaals...", type: "error" }
-      : { text: "De publicatie is succesvol opgeslagen." }
-  );
-
-  if (!error.value) {
-    // redirect
-    router.push({ name: "publicaties" });
-  } else {
-    // retry
-    error.value = null;
+  try {
+    await submitPublicatie();
+
+    await submitDocument();
+
+    await uploadDocument();
+  } catch {
+    return;
   }
+
+  toast.add({ text: "De publicatie is succesvol opgeslagen." });
+
+  router.push({ name: "publicaties" });
 };
 
-onMounted(async () => props.id && (await execute()));
+onMounted(async () => uuid && (await execPublicatie()) && (await execDocument()));
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--section-width), 1fr));
+  grid-gap: var(--spacing-default);
+}
+</style>
diff --git a/odpc.client/src/features/publicatie/PublicatiesOverview.vue b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
index def4812..9afb6f0 100644
--- a/odpc.client/src/features/publicatie/PublicatiesOverview.vue
+++ b/odpc.client/src/features/publicatie/PublicatiesOverview.vue
@@ -10,7 +10,7 @@
   <ul v-else class="reset">
     <li v-for="{ uuid, officieleTitel, creatiedatum } in data" :key="uuid">
       <router-link
-        :to="{ name: 'publicatie', params: { id: uuid } }"
+        :to="{ name: 'publicatie', params: { uuid } }"
         :title="officieleTitel"
         class="card-link icon-after pen"
       >
diff --git a/odpc.client/src/features/publicatie/components/DocumentForm.vue b/odpc.client/src/features/publicatie/components/DocumentForm.vue
new file mode 100644
index 0000000..1b3f752
--- /dev/null
+++ b/odpc.client/src/features/publicatie/components/DocumentForm.vue
@@ -0,0 +1,129 @@
+<template>
+  <fieldset>
+    <legend>Document</legend>
+
+    <section v-if="model">
+      <template v-if="model.uuid">
+        <dl>
+          <dt>Titel</dt>
+          <dd>{{ model.officieleTitel }}</dd>
+
+          <dt>Verkorte titel</dt>
+          <dd>{{ model.verkorteTitel }}</dd>
+
+          <dt>Omschrijving</dt>
+          <dd>{{ model.omschrijving || "-" }}</dd>
+
+          <dt>Bestandsnaam</dt>
+          <dd>{{ model.bestandsnaam }}</dd>
+        </dl>
+
+        <button @click="$emit('reset')" class="button secondary icon-after trash">
+          Verwijder document
+        </button>
+      </template>
+
+      <template v-else>
+        <div class="form-group">
+          <label for="titel">Titel</label>
+
+          <input
+            id="titel"
+            type="text"
+            v-model="model.officieleTitel"
+            required
+            aria-required="true"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="verkorte_titel">Verkorte titel</label>
+
+          <input id="verkorte_titel" type="text" v-model="model.verkorteTitel" />
+        </div>
+
+        <div class="form-group">
+          <label for="omschrijving">Omschrijving</label>
+
+          <textarea id="omschrijving" v-model="model.omschrijving" rows="4"></textarea>
+        </div>
+
+        <div class="form-group">
+          <label for="bestand">Bestand toevoegen</label>
+
+          <input
+            id="bestand"
+            type="file"
+            title="Voeg bestand toe"
+            required
+            aria-required="true"
+            :accept="accept"
+            @change="onFileSelected"
+          />
+        </div>
+      </template>
+    </section>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { PublicatieDocument } from "../types";
+import { mimeTypesMap } from "../service";
+
+const props = defineProps<{ publicatieDocument: PublicatieDocument }>();
+
+const emit = defineEmits<{
+  (e: "update:publicatieDocument", payload: PublicatieDocument): void;
+  (e: "update:file", payload: File): void;
+  (e: "reset"): void;
+}>();
+
+const model = computed({
+  get: () => props.publicatieDocument,
+  set: (value) => emit("update:publicatieDocument", value)
+});
+
+const accept = computed(() => Array.from(mimeTypesMap.value?.keys() || []).join(','));
+
+const onFileSelected = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+
+  if (target.files === null) return;
+
+  const file = target.files[0];
+
+  const bestandsformaat = mimeTypesMap.value?.get(file.type)?.identifier;
+
+  if (!model.value || !bestandsformaat) {
+    target.value = "";
+    return;
+  }
+
+  model.value.bestandsnaam = file.name;
+  model.value.bestandsomvang = file.size;
+  model.value.bestandsformaat = bestandsformaat;
+
+  emit("update:file", file);
+};
+</script>
+
+<style lang="scss" scoped>
+button {
+  display: flex;
+  column-gap: var(--spacing-small);
+}
+
+dl {
+  margin-block: 0;
+
+  dt {
+    font-weight: var(--font-bold);
+  }
+
+  dd {
+    margin-inline-start: 0;
+    margin-block-end: var(--spacing-default);
+  }
+}
+</style>
diff --git a/odpc.client/src/features/publicatie/components/FileUpload.vue b/odpc.client/src/features/publicatie/components/FileUpload.vue
deleted file mode 100644
index b18204d..0000000
--- a/odpc.client/src/features/publicatie/components/FileUpload.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="form-group">
-    <label for="bestand">Bestand toevoegen</label>
-
-    <input id="bestand" type="file" class="small" />
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/odpc.client/src/features/publicatie/components/PublicatieForm.vue b/odpc.client/src/features/publicatie/components/PublicatieForm.vue
new file mode 100644
index 0000000..ff329a1
--- /dev/null
+++ b/odpc.client/src/features/publicatie/components/PublicatieForm.vue
@@ -0,0 +1,47 @@
+<template>
+  <fieldset>
+    <legend>Publicatie</legend>
+
+    <section>
+      <div class="form-group">
+        <label for="titel">Titel</label>
+
+        <input
+          id="titel"
+          type="text"
+          v-model="model.officieleTitel"
+          required
+          aria-required="true"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="verkorte_titel">Verkorte titel</label>
+
+        <input id="verkorte_titel" type="text" v-model="model.verkorteTitel" />
+      </div>
+
+      <div class="form-group">
+        <label for="omschrijving">Omschrijving</label>
+
+        <textarea id="omschrijving" v-model="model.omschrijving" rows="4"></textarea>
+      </div>
+    </section>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Publicatie } from "../types";
+
+const props = defineProps<{ modelValue: Publicatie }>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", payload: Publicatie): void;
+}>();
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value)
+});
+</script>
diff --git a/odpc.client/src/features/publicatie/service.ts b/odpc.client/src/features/publicatie/service.ts
new file mode 100644
index 0000000..1535877
--- /dev/null
+++ b/odpc.client/src/features/publicatie/service.ts
@@ -0,0 +1,36 @@
+import { ref } from "vue";
+import { useFetchApi } from "@/api/use-fetch-api";
+import type { Bestandsdeel, MimeTypes } from "./types";
+
+const mimeTypesMap = ref<Map<string, MimeTypes> | null>(null);
+
+(async () => {
+  const { data } = await useFetchApi(() => `/api/v1/formats`).json<MimeTypes[]>();
+
+  mimeTypesMap.value = new Map(data.value?.map((type) => [type.mimeType, type]));
+})();
+
+const uploadFile = async (file: File, bestandsdelen: Bestandsdeel[]): Promise<void> => {
+  let blobStart = 0;
+
+  try {
+    for (const { url, omvang } of bestandsdelen) {
+      const body = new FormData();
+      const blob = file.slice(blobStart, blobStart + omvang);
+
+      body.append("inhoud", blob);
+
+      const { error } = await useFetchApi(url).put(body);
+
+      if (error.value) {
+        throw new Error(`Error uploadDocument: ${url}`);
+      }
+
+      blobStart += omvang;
+    }
+  } catch {
+    throw new Error();
+  }
+};
+
+export { mimeTypesMap, uploadFile };
diff --git a/odpc.client/src/features/publicatie/types.ts b/odpc.client/src/features/publicatie/types.ts
index 330834c..49a07f1 100644
--- a/odpc.client/src/features/publicatie/types.ts
+++ b/odpc.client/src/features/publicatie/types.ts
@@ -4,22 +4,6 @@ export const PUBLICATIESTATUS = {
   retracted: "Ingetrokken"
 } as const;
 
-// type OrganisatieReference = {
-//   name: string;
-//   identifier: string;
-// };
-
-// export type Doc = {
-//   uitgever: OrganisatieReference;
-//   verantwoordelijke: OrganisatieReference;
-//   titel: string;
-//   informatiecategorie: {
-//     name: string;
-//     identifier: string;
-//     origin: string;
-//   }
-// };
-
 export type Publicatie = {
   uuid?: string;
   officieleTitel: string;
@@ -29,14 +13,27 @@ export type Publicatie = {
   status?: keyof typeof PUBLICATIESTATUS;
 };
 
-// export type Publicatie = {
-//   uuid: string;
-//   name: string;
-//   status: keyof typeof PUBLICATIESTATUS;
-//   documenten: Doc[];
-//   createdOn: Date;
-//   creator: {
-//     displayName: string;
-//     identifier: string;
-//   }
-// };
+export type PublicatieDocument = {
+  uuid?: string;
+  publicatie: string;
+  officieleTitel: string;
+  verkorteTitel?: string;
+  omschrijving?: string;
+  creatiedatum: string;
+  bestandsnaam: string;
+  bestandsformaat: string;
+  bestandsomvang: number;
+  bestandsdelen?: Bestandsdeel[];
+};
+
+export type Bestandsdeel = {
+  url: string;
+  volgnummer: number;
+  omvang: number;
+};
+
+export type MimeTypes = {
+  identifier: string;
+  name: string;
+  mimeType: string;
+};
diff --git a/odpc.client/src/router/index.ts b/odpc.client/src/router/index.ts
index 4c9c51f..c84395b 100644
--- a/odpc.client/src/router/index.ts
+++ b/odpc.client/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import LoginView from "@/views/LoginView.vue";
-import PublicatiesView from "../views/beheer/PublicatiesView.vue";
-import PublicatieView from "../views/beheer/PublicatieView.vue";
+import PublicatiesView from "@/views/PublicatiesView.vue";
+import PublicatieView from "@/views/PublicatieView.vue";
 import getUser from "@/stores/user";
 
 const resetFocus = () => {
@@ -31,7 +31,7 @@ const router = createRouter({
       }
     },
     {
-      path: "/beheer/publicaties/overzicht",
+      path: "/publicaties/overzicht",
       name: "publicaties",
       component: PublicatiesView,
       meta: {
@@ -40,7 +40,7 @@ const router = createRouter({
       }
     },
     {
-      path: "/beheer/publicaties/:id?",
+      path: "/publicaties/:uuid?",
       name: "publicatie",
       component: PublicatieView,
       props: true,
diff --git a/odpc.client/src/views/beheer/PublicatieView.vue b/odpc.client/src/views/PublicatieView.vue
similarity index 56%
rename from odpc.client/src/views/beheer/PublicatieView.vue
rename to odpc.client/src/views/PublicatieView.vue
index 865a9bc..2ca9395 100644
--- a/odpc.client/src/views/beheer/PublicatieView.vue
+++ b/odpc.client/src/views/PublicatieView.vue
@@ -1,13 +1,13 @@
 <template>
-  <h1>{{ !id ? `Nieuwe publicatie` : `Publicatie` }}</h1>
+  <h1>{{ !uuid ? `Nieuwe publicatie` : `Publicatie` }}</h1>
 
-  <publicatie-details :id="id" />
+  <publicatie-details :uuid="uuid" />
 </template>
 
 <script setup lang="ts">
 import PublicatieDetails from "@/features/publicatie/PublicatieDetails.vue";
 
-defineProps<{ id?: string }>();
+defineProps<{ uuid?: string }>();
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/odpc.client/src/views/beheer/PublicatiesView.vue b/odpc.client/src/views/PublicatiesView.vue
similarity index 100%
rename from odpc.client/src/views/beheer/PublicatiesView.vue
rename to odpc.client/src/views/PublicatiesView.vue
diff --git a/odpc.client/vite.config.ts b/odpc.client/vite.config.ts
index 860d691..5843137 100644
--- a/odpc.client/vite.config.ts
+++ b/odpc.client/vite.config.ts
@@ -8,7 +8,7 @@ const proxyCalls = ["/api", "/signin-oidc", "/signout-callback-oidc", "/healthz"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), mockServer({ urlPrefixes: ["/api-mock/"] })],
+  plugins: [vue(), mockServer({ urlPrefixes: ["/api-mock"] })],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url))