diff --git a/src/open_inwoner/cms/cases/forms.py b/src/open_inwoner/cms/cases/forms.py
index 8db8e84767..2e9d4fb0d5 100644
--- a/src/open_inwoner/cms/cases/forms.py
+++ b/src/open_inwoner/cms/cases/forms.py
@@ -1,20 +1,17 @@
 import os
 
 from django import forms
-from django.core.exceptions import ValidationError
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
 from django.utils.translation import gettext_lazy as _
 
 from open_inwoner.openzaak.models import (
     OpenZaakConfig,
+    ZaakTypeConfig,
     ZaakTypeInformatieObjectTypeConfig,
 )
-from open_inwoner.utils.validators import CharFieldValidator
 
 
 class CaseUploadForm(forms.Form):
-    title = forms.CharField(
-        label=_("Titel bestand"), max_length=255, validators=[CharFieldValidator()]
-    )
     type = forms.ModelChoiceField(
         ZaakTypeInformatieObjectTypeConfig.objects.none(),
         empty_label=None,
@@ -23,8 +20,19 @@ class CaseUploadForm(forms.Form):
     file = forms.FileField(label=_("Bestand"))
 
     def __init__(self, case, **kwargs):
+        self.oz_config = OpenZaakConfig.get_solo()
         super().__init__(**kwargs)
 
+        help_text = f"Grootte max. { self.oz_config.max_upload_size } MB, toegestane document formaten: { ', '.join(self.oz_config.allowed_file_extensions) }."
+
+        try:
+            ztc = ZaakTypeConfig.objects.filter_case_type(case.zaaktype).get()
+            help_text = ztc.description or help_text
+        except (AttributeError, ObjectDoesNotExist):
+            pass
+
+        self.fields["file"].help_text = help_text
+
         if case:
             self.fields[
                 "type"
@@ -41,14 +49,13 @@ def __init__(self, case, **kwargs):
     def clean_file(self):
         file = self.cleaned_data["file"]
 
-        config = OpenZaakConfig.get_solo()
-        max_allowed_size = 1024**2 * config.max_upload_size
-        allowed_extensions = sorted(config.allowed_file_extensions)
+        max_allowed_size = 1024**2 * self.oz_config.max_upload_size
+        allowed_extensions = sorted(self.oz_config.allowed_file_extensions)
         filename, file_extension = os.path.splitext(file.name)
 
         if file.size > max_allowed_size:
             raise ValidationError(
-                f"Een aangeleverd bestand dient maximaal {config.max_upload_size} MB te zijn, uw bestand is te groot."
+                f"Een aangeleverd bestand dient maximaal {self.oz_config.max_upload_size} MB te zijn, uw bestand is te groot."
             )
 
         if file_extension.lower().replace(".", "") not in allowed_extensions:
diff --git a/src/open_inwoner/cms/cases/tests/test_htmx.py b/src/open_inwoner/cms/cases/tests/test_htmx.py
index ff67b3cdcd..00a6220fa1 100644
--- a/src/open_inwoner/cms/cases/tests/test_htmx.py
+++ b/src/open_inwoner/cms/cases/tests/test_htmx.py
@@ -432,7 +432,8 @@ def test_cases(self, m):
         upload_form = page.locator("#document-upload")
         expect(upload_form).to_be_visible()
 
-        upload_form.get_by_label(_("Document selecteren")).set_input_files(
+        file_input = upload_form.get_by_text(_("Sleep of selecteer bestand"))
+        file_input.set_input_files(
             files=[
                 {
                     "name": "uploaded_test_file.txt",
@@ -441,13 +442,9 @@ def test_cases(self, m):
                 }
             ],
         )
-        submit_button = upload_form.get_by_role("button", name=_("Document uploaden"))
+        submit_button = upload_form.get_by_role("button", name=_("Upload documenten"))
         expect(submit_button).to_be_visible()
 
-        title_input = upload_form.get_by_label(_("Titel bestand"))
-        expect(title_input).to_be_visible()
-        title_input.fill("uploaded document")
-
         submit_button.click()
 
         # check for new file
diff --git a/src/open_inwoner/cms/cases/views/status.py b/src/open_inwoner/cms/cases/views/status.py
index 7d18eba55c..2b182ffc10 100644
--- a/src/open_inwoner/cms/cases/views/status.py
+++ b/src/open_inwoner/cms/cases/views/status.py
@@ -478,7 +478,7 @@ def handle_document_upload(self, request, form):
         cleaned_data = form.cleaned_data
 
         file = cleaned_data["file"]
-        title = cleaned_data["title"]
+        title = file.name
         document_type = cleaned_data["type"]
         source_organization = self.case.bronorganisatie
 
diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
index 6dd222e4de..724b41d08e 100644
--- a/src/open_inwoner/components/templates/components/Button/Button.html
+++ b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -21,7 +21,7 @@
         {% endif %}
     </a>
 {% else %}
-    <button
+    <{{ tag }}
         class="{{ classes }}"
         type="{{type}}"
         name="{{ name }}"
@@ -42,5 +42,5 @@
         {% else %}
             {% if not hide_text %}{{text}}{% endif %}
         {% endif %}
-    </button>
+    </{{ tag }}>
 {% endif %}
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
index b23192d430..5e0e7b2e94 100644
--- a/src/open_inwoner/components/templates/components/Form/FileInput.html
+++ b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -1,21 +1,18 @@
-{% load i18n form_tags icon_tags %}
 
-<div class="form__control {{ extra_classes|default:"upload" }}">
-    <div class="inputfile-group">
-        <label class="label">
-            <span class="input-file">
-            {{ field|addclass:"inputfile" }}
+{% load i18n button_tags card_tags form_tags icon_tags %}
 
-                <span class="label__label" for="{{ field.auto_id }}">
-                {% icon icon="cloud_upload" icon_position="before" outlined=True %}
-                    {{ text }}
+<div class="form__control file-input">
+    {% render_card direction="vertical" %}
+        {% icon icon="upload" icon_position="before" outlined=True %}
+        <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file">
+        {% button primary=True tag='label' text=text|default:_('Sleep of selecteer bestand') extra_attributes='for='|add:field.auto_id %}
+    {% endrender_card %}
 
-                </span>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
-            </span>
+    {% if field.help_text %}<p class="p p--muted p--small">{{ field.help_text }}</p>{% endif %}
+    {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
-            {% if field.errors %}
-                {% errors errors=field.errors %}
-            {% endif %}
-        </label>
+    <div class="file-list" aria-live="polite">
+        <h4 class="h4">{% trans 'Geselecteerd bestand'%}</h4>
+        <ul class="file-list__list" aria-live="polite" data-label-delete="{% trans 'Verwijderen' %}"></ul>
     </div>
 </div>
diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py
index a467ec36ba..a70a9d69c2 100644
--- a/src/open_inwoner/components/templatetags/button_tags.py
+++ b/src/open_inwoner/components/templatetags/button_tags.py
@@ -58,6 +58,7 @@ def button(text, **kwargs):
         - icon: string | the icon that you want to display.
         - icon_position: enum[before, after] | where the icon should be positioned to the text.
         - icon_outlined: bool | if the outlined icons should be used.
+        - tag: string | The tag to use (if not a link, defaults to button)
         - text_icon: string | An additional icon to show before the (current value) text.
         - type: string | the type of button that should be used.
         - title: string | The HTML title attribute if different than the text.
@@ -129,4 +130,5 @@ def get_classes():
 
     kwargs["classes"] = get_classes()
     kwargs["text"] = text
+    kwargs["tag"] = kwargs.get("tag", "button")
     return {**kwargs}
diff --git a/src/open_inwoner/components/templatetags/form_tags.py b/src/open_inwoner/components/templatetags/form_tags.py
index a995dbd7eb..e0047f5bc3 100644
--- a/src/open_inwoner/components/templatetags/form_tags.py
+++ b/src/open_inwoner/components/templatetags/form_tags.py
@@ -277,12 +277,12 @@ def input(field, **kwargs):
 
 
 @register.inclusion_tag("components/Form/FileInput.html")
-def file_input(file, text, **kwargs):
+def file_input(file, text="", **kwargs):
     """
     Displaying a file upload interface.
 
     Usage:
-        {% file_input form.field text=_('Document selecteren') %}
+        {% file_input form.field text=_('Selecteer bestanden') %}
 
     Variables:
         + field: Field | The field that needs to be rendered.
diff --git a/src/open_inwoner/components/templatetags/helpers.py b/src/open_inwoner/components/templatetags/helpers.py
index 9558e11b0a..3143cf1649 100644
--- a/src/open_inwoner/components/templatetags/helpers.py
+++ b/src/open_inwoner/components/templatetags/helpers.py
@@ -63,4 +63,7 @@ def get_product_url(context, product):
 def as_attributes(attribute_dict):
     if not attribute_dict:
         return ""
-    return format_html_join(" ", '{}="{}"', attribute_dict.items())
+    try:
+        return format_html_join(" ", '{}="{}"', attribute_dict.items())
+    except AttributeError:
+        return attribute_dict
diff --git a/src/open_inwoner/conf/base.py b/src/open_inwoner/conf/base.py
index dbbec34055..5ba071c9a7 100644
--- a/src/open_inwoner/conf/base.py
+++ b/src/open_inwoner/conf/base.py
@@ -71,6 +71,10 @@
     }
 }
 
+# Geospatial libraries
+GEOS_LIBRARY_PATH = config("GEOS_LIBRARY_PATH", None)
+GDAL_LIBRARY_PATH = config("GDAL_LIBRARY_PATH", None)
+
 CACHES = {
     "default": {
         "BACKEND": "django_redis.cache.RedisCache",
diff --git a/src/open_inwoner/js/components/abstract/component.js b/src/open_inwoner/js/components/abstract/component.js
index ee3471668c..bd55d1a5db 100644
--- a/src/open_inwoner/js/components/abstract/component.js
+++ b/src/open_inwoner/js/components/abstract/component.js
@@ -20,6 +20,7 @@ export class Component {
 
     this.setState(initialState)
     this.bindEvents()
+    this.setupMutationObserver()
   }
 
   /**
@@ -28,6 +29,28 @@ export class Component {
    */
   bindEvents() {}
 
+  /**
+   * Unbinds events from callbacks.
+   * Callbacks functions should be strict equal between `bindEvents()` and `unbindEvents`.
+   * Use this to call `removeEventListener()` for every `addEventListener`()` called.
+   */
+  unbindEvents() {}
+
+  /**
+   * Sets up the mutation observer managing §this.unbindEvents()`.
+   */
+  setupMutationObserver() {
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && !document.contains(this.node)) {
+          // Element has been removed from the DOM
+          this.unbindEvents()
+          this.mutationObserver.disconnect() // Stop observing once the element is removed
+        }
+      })
+    })
+  }
+
   /**
    * Mutates state, then re-renders.
    * @param {Object} changes Object containing (only) changes to state.
diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
new file mode 100644
index 0000000000..d4af4b2f64
--- /dev/null
+++ b/src/open_inwoner/js/components/form/FileInput.js
@@ -0,0 +1,201 @@
+import { Component } from '../abstract/component'
+
+/**
+ * Drag-and-drop capable custom file input component.
+ */
+export class FileInput extends Component {
+  /** @type {string} Use this as selector to instantiate the file input. */
+  static selector = '.file-input'
+
+  /**
+   * Returns the card (drop zone) associated with the file input.
+   * @return {HTMLDivElement}
+   */
+  getCard() {
+    return this.node.querySelector(`${FileInput.selector} .card`)
+  }
+
+  /**
+   * Return the input associated with the file input.
+   * @return HTMLInputElement
+   */
+  getInput() {
+    return this.node.querySelector(`${FileInput.selector}__input`)
+  }
+
+  /**
+   * Return the element associated with the files section.
+   * @return {HTMLDivElement}
+   */
+  getFilesSection() {
+    return this.node.querySelector(`${FileInput.selector} .file-list`)
+  }
+
+  /**
+   * Return the element associated with the file list.
+   * @return {HTMLUListElement}
+   */
+  getFilesList() {
+    return this.node.querySelector(`${FileInput.selector} .file-list__list`)
+  }
+
+  /**
+   * Binds events to callbacks.
+   * Callbacks should trigger `setState` which in turn triggers `render`.
+   * NOTE: CHANGE EVENT MAY BE BYPASSED WHEN USING HTMX.
+   */
+  bindEvents() {
+    this.boundRender = this.render.bind(this)
+    this.boundOnDragEnter = this.onDragEnter.bind(this)
+    this.boundOnDragLeave = this.onDragLeave.bind(this)
+    this.boundOnDrop = this.onDrop.bind(this)
+    this.boundOnClick = this.onClick.bind(this)
+    this.boundNoop = this.noop.bind(this)
+
+    this.node.addEventListener('change', this.boundRender)
+    this.getCard().addEventListener('dragenter', this.boundOnDragEnter)
+    this.getCard().addEventListener('dragover', this.boundNoop)
+    this.getCard().addEventListener('dragleave', this.boundOnDragLeave)
+    this.getCard().addEventListener('drop', this.boundOnDrop)
+    this.getFilesList().addEventListener('click', this.boundOnClick)
+  }
+
+  /**
+   * Unbinds events from callbacks.
+   * Callbacks functions should be strict equal between `bindEvents()` and `unbindEvents`.
+   * Use this to call `removeEventListener()` for every `addEventListener`()` called.
+   */
+  unbindEvents() {
+    this.node.removeEventListener('change', this.boundRender)
+    this.getCard().removeEventListener('dragenter', this.boundOnDragLeave)
+    this.getCard().removeEventListener('dragover', this.boundNoop)
+    this.getCard().removeEventListener('dragleave', this.boundOnDragLeave)
+    this.getCard().removeEventListener('drop', this.boundOnDrop)
+    this.getFilesList().removeEventListener('click', this.boundOnClick)
+  }
+
+  /**
+   * Gets called when files are dropped on the card (drop zone).
+   * @param {DragEvent} e
+   */
+  onDrop(e) {
+    e.preventDefault()
+
+    this.node.classList.remove('file-input--drag-active')
+    this.addFiles(e.dataTransfer.files)
+
+    // We need to render manually since we're not making state changes.
+    this.render()
+  }
+
+  /**
+   * Gets called when dragging starts on the card (drop zone).
+   */
+  onDragEnter(e) {
+    this.node.classList.add('file-input--drag-active')
+  }
+
+  /**
+   * Gets called when dragging ends on the card (drop zone).
+   */
+  onDragLeave(e) {
+    this.node.classList.remove('file-input--drag-active')
+  }
+
+  /**
+   * Gets called when click event is received on the files list, it originates from a delete button, handle the deletion
+   * accordingly.
+   * @param {PointerEvent} e
+   */
+  onClick(e) {
+    e.preventDefault()
+    const { target } = e
+
+    // Do nothing if the click does not originate from a delete button.
+    if (
+      !target.classList.contains('link') &&
+      !target.parentElement.classList.contains('link')
+    ) {
+      return
+    }
+
+    // Filter the file list.
+    const listItem = target.closest('.file-list__list-item')
+    const index = [...this.getFilesList().children].indexOf(listItem)
+    const input = this.getInput()
+
+    const files = [...input.files].filter((_, i) => i !== index)
+
+    this.addFiles(files)
+
+    // We need to render manually since we're not making state changes.
+    this.render()
+  }
+
+  /**
+   * Generic no op (no operation) event handler. Calls `preventDefault()` on given event.
+   * @param {Event} e
+   */
+  noop(e) {
+    e.preventDefault()
+  }
+
+  /**
+   * Adds files in dataTransfer to input, only the first item is added if not `[multiple]`.
+   * @param {File[]} files
+   */
+  addFiles(files) {
+    const input = this.getInput()
+    const dataTransfer = new DataTransfer()
+    const _files = input.multiple ? [...files] : [files[0]]
+
+    _files.filter((v) => v).forEach((file) => dataTransfer.items.add(file))
+    input.files = dataTransfer.files
+  }
+
+  /**
+   * Persists state to DOM.
+   * NOTE: We inspect the actual input here to obtain the `FileList` state.
+   * NOTE: CHANGE EVENT MAY BE BYPASSED WHEN USING HTMX.
+   */
+  render() {
+    const { files } = this.getInput()
+    const filesSection = this.getFilesSection()
+
+    // Only show files section when files are selected.
+    filesSection.setAttribute('hidden', true)
+    files.length && filesSection.removeAttribute('hidden')
+
+    // Populate the file list.
+    const html = [...files].map((file) => this.renderFileHTML(file)).join('')
+    this.getFilesList().innerHTML = html
+  }
+
+  /**
+   * Returns the HTML to be used for a file.
+   * @param {File} file
+   * @return {string}
+   */
+  renderFileHTML(file) {
+    const { name, size, type } = file
+    const ext = name.split('.').pop().toUpperCase()
+    const sizeMB = (size / (1024 * 1024)).toFixed(2)
+    const labelDelete = this.getFilesList().dataset.labelDelete || 'Delete'
+
+    return `
+      <li class="file-list__list-item">
+        <aside class="file">
+          <div class="file__file">
+              <span aria-hidden="true" class="material-icons-outlined">${
+                type.match('image') ? 'image' : 'description'
+              }</span>
+              <p class="p">${name} (${ext}, ${sizeMB}MB)</p>
+              <a class="link link--primary" href="#" role="button" aria-label="${labelDelete}">
+                <span aria-hidden="true" class="material-icons-outlined">delete</span>
+              </a>
+          </div>
+        </aside>
+      </li>
+    `
+  }
+}
diff --git a/src/open_inwoner/js/components/form/index.js b/src/open_inwoner/js/components/form/index.js
new file mode 100644
index 0000000000..27529c308e
--- /dev/null
+++ b/src/open_inwoner/js/components/form/index.js
@@ -0,0 +1 @@
+import './FileInput'
diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js
index dff12f9f32..7db293478f 100644
--- a/src/open_inwoner/js/components/index.js
+++ b/src/open_inwoner/js/components/index.js
@@ -17,6 +17,7 @@ import { CookieBanner } from './cookie-consent'
 import './datepicker'
 import { Dropdown } from './dropdown'
 import './emoji-button'
+import './form'
 import './header'
 import './map'
 import './message-file'
@@ -34,6 +35,7 @@ import { ShowInfo } from './upload-document/show-file-info'
 import { FileInputError } from './upload-document/file-input-errors'
 import './session'
 import './twofactor-sms'
+import { FileInput } from './form/FileInput'
 
 const htmx = (window.htmx = require('htmx.org'))
 
@@ -58,7 +60,7 @@ const elementWrappers = [
   [Notification.selector, (elt) => new Notification(elt)],
   [AnchorMobile.selector, (elt) => new AnchorMobile(elt)],
   [StatusAccordion.selector, (elt) => new StatusAccordion(elt)],
-  // add more when needed
+  [FileInput.selector, (elt) => new FileInput(elt)],
 ]
 
 // harden against multiple events
diff --git a/src/open_inwoner/js/components/upload-document/show-file-info.js b/src/open_inwoner/js/components/upload-document/show-file-info.js
index 2eafcbef99..b70a792b6a 100644
--- a/src/open_inwoner/js/components/upload-document/show-file-info.js
+++ b/src/open_inwoner/js/components/upload-document/show-file-info.js
@@ -6,6 +6,11 @@ export class ShowInfo {
     this.showData()
   }
 
+  getFileExtension(fileName) {
+    const parts = fileName.split('.')
+    return parts[parts.length - 1]
+  }
+
   showData() {
     // get the closest parent element (the form section element)
     const documentUpload = this.fileUploadInput.closest('#form_upload')
@@ -19,8 +24,15 @@ export class ShowInfo {
     const iconDrive = documentUpload.querySelectorAll('.drive')
     // show info
     const formControlInfo = documentUpload.querySelectorAll(
-      '.form__control__info'
+      '.form__content__info'
     )
+    const fileInput = document.getElementById('id_file')
+    const fileList = document.getElementById('fileList')
+    const fileDivsContainer =
+      documentUpload.querySelectorAll('.fieldset--files')
+    let selectedFiles = []
+    // read maximum size from backend
+    const maxBytes = Number(fileInput.dataset.maxSize)
 
     // Convert the file size to a readable format
     const formatFileSize = function (bytes) {
@@ -36,8 +48,8 @@ export class ShowInfo {
       elem.classList.add('error')
     })
 
-    this.fileUploadInput.addEventListener('change', function (e) {
-      const files = e.target.files
+    this.fileUploadInput.addEventListener('change', (e) => {
+      const files = Array.from(e.target.files)
 
       if ((files.length === 0) | (files === null) | (files === undefined)) {
         submit_upload.disabled = true
@@ -52,6 +64,9 @@ export class ShowInfo {
           elem.style.display = 'none'
         })
       } else {
+        //When files are selected
+        console.log('More than 1 file is selected.', files)
+        console.log('This is the data attribute size: ', maxBytes)
         submit_upload.disabled = false
         validationInfo.classList.remove('error')
         closeButton.classList.remove('error')
@@ -59,13 +74,51 @@ export class ShowInfo {
           elem.classList.remove('error')
         })
 
+        fileDivsContainer.forEach((file) => {
+          //add template for selected files
+          const fileName = files[0].name
+          const fileExtension = this.getFileExtension(fileName)
+          const fileDivBig = document.createElement('div')
+          fileDivBig.classList.add('file-item')
+
+          const fileHTML = `
+      <div class="file__file symbol"><span class="file-material-icon">
+        <span aria-hidden="true" class="material-icons-outlined ">insert_drive_file</span>
+      </span></div>
+      <span class="file-name">name: ${files[0].name}</span>
+      <span class="file-extension"><span class="file--uppercase">(${fileExtension}</span>, ${formatFileSize(
+            files[0].size
+          )})</span>
+      <button class="button button--textless button--icon button--icon-after button--transparent button-file-remove" type="button" title="Toegevoegd bestand verwijderen" aria-label="Toegevoegd bestand verwijderen">
+        <span aria-hidden="true" class="material-icons-outlined ">delete</span>
+      </button>
+    `
+
+          fileDivBig.innerHTML = fileHTML
+
+          if (files[0].size > maxBytes) {
+            console.log('Dit bestand is te groot')
+            fileDivBig.classList.add('error-message')
+            const fileSizeError = document.createElement('div')
+            fileSizeError.textContent = 'Dit bestand is te groot'
+            fileSizeError.classList.add('error-message')
+            fileDivBig
+              .querySelector('.file-material-icon')
+              .appendChild(fileSizeError)
+          }
+
+          fileList.appendChild(fileDivBig)
+          selectedFiles.push(file)
+        })
+        //end template
+
         // Display info
         sizeInfo.textContent = formatFileSize(files[0].size)
         nameInfo.textContent = `${files[0].name}`
         // Display in DOM
         formControlInfo.forEach((elem) => {
-          elem.classList.remove('form__control__info')
-          elem.classList.add('form__control__info--active')
+          elem.classList.remove('form__content__info')
+          elem.classList.add('form__content__info--active')
         })
       }
     })
@@ -80,8 +133,8 @@ export class ShowInfo {
         })
 
         formControlInfo.forEach((elem) => {
-          elem.classList.remove('form__control__info--active')
-          elem.classList.add('form__control__info')
+          elem.classList.remove('form__content__info--active')
+          elem.classList.add('form__content__info')
         })
       })
     }
diff --git a/src/open_inwoner/openzaak/tests/test_case_detail.py b/src/open_inwoner/openzaak/tests/test_case_detail.py
index 3b4580b9e9..3dc812b94c 100644
--- a/src/open_inwoner/openzaak/tests/test_case_detail.py
+++ b/src/open_inwoner/openzaak/tests/test_case_detail.py
@@ -904,7 +904,7 @@ def test_successful_document_upload_flow(self, m):
         form.action = reverse(
             "cases:case_detail_document_form", kwargs={"object_id": self.zaak["uuid"]}
         )
-        form["title"] = "uploaded file"
+        # form["title"] = "uploaded file"
         form["type"] = zaak_type_iotc.id
         form["file"] = Upload("upload.txt", b"data", "text/plain")
         form_response = form.submit()
@@ -944,7 +944,6 @@ def test_successful_document_upload_flow_with_uppercase_extension(self, m):
         form.action = reverse(
             "cases:case_detail_document_form", kwargs={"object_id": self.zaak["uuid"]}
         )
-        form["title"] = "uploaded file"
         form["type"] = zaak_type_iotc.id
         form["file"] = Upload("upload.TXT", b"data", "text/plain")
         form_response = form.submit()
@@ -993,7 +992,6 @@ def test_upload_file_flow_fails_with_invalid_file_extension(self, m):
             user=self.user,
         )
         form = response.forms["document-upload"]
-        form["title"] = "uploaded file"
         form["type"] = zaak_type_iotc.id
         form["file"] = Upload("upload.xml", b"data", "application/xml")
         form_response = form.submit()
@@ -1034,7 +1032,6 @@ def test_upload_with_larger_file_size_fails(self, m):
         )
         form = response.forms["document-upload"]
 
-        form["title"] = "uploaded file"
         form["type"] = zaak_type_iotc.id
         form["file"] = Upload("upload.txt", b"data", "text/plain")
         form_response = form.submit()
@@ -1209,7 +1206,6 @@ def test_request_error_in_uploading_document_shows_proper_message(self, m):
         form.action = reverse(
             "cases:case_detail_document_form", kwargs={"object_id": self.zaak["uuid"]}
         )
-        form["title"] = "uploaded file"
         form["file"] = Upload("upload.txt", b"data", "text/plain")
         form_response = form.submit()
 
@@ -1250,7 +1246,6 @@ def test_request_error_in_connecting_doc_with_zaak_shows_proper_message(self, m)
         form.action = reverse(
             "cases:case_detail_document_form", kwargs={"object_id": self.zaak["uuid"]}
         )
-        form["title"] = "A title"
         form["file"] = Upload("upload.txt", b"data", "text/plain")
         form_response = form.submit()
 
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index a1cb606640..faff9f764a 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -96,6 +96,7 @@
   &__img--contain {
     object-fit: contain;
   }
+
   &__body {
     padding: var(--card-spacing);
 
@@ -105,6 +106,13 @@
       flex-wrap: wrap;
     }
 
+    &--direction-vertical {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
     .spacer {
       display: inline-block;
       width: 100%;
diff --git a/src/open_inwoner/scss/components/Form/DocumentUpload.scss b/src/open_inwoner/scss/components/Form/DocumentUpload.scss
index b3c4b8f999..e69de29bb2 100644
--- a/src/open_inwoner/scss/components/Form/DocumentUpload.scss
+++ b/src/open_inwoner/scss/components/Form/DocumentUpload.scss
@@ -1,255 +0,0 @@
-#document-upload {
-  gap: var(--spacing-tiny);
-  max-width: var(--mobile-xs-width);
-
-  .button[type='submit']:disabled {
-    background-color: var(--color-gray) !important;
-    border-color: var(--color-gray) !important;
-    color: var(--color-white);
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .form__control.upload .form__submit {
-    *[class*='icon'],
-    .button {
-      position: initial;
-      margin-top: 2em;
-    }
-  }
-
-  .inputfile-group {
-    display: block;
-
-    .label,
-    .close {
-      display: block;
-    }
-
-    .input-file {
-      .label__label--required {
-        display: none;
-      }
-    }
-  }
-
-  .form__control__info {
-    display: none;
-
-    &--active {
-      display: block;
-    }
-  }
-}
-
-/// File-input site wide
-input[type='file'] {
-  background-color: var(--color-white);
-  color: var(--color-primary);
-  border: 1px solid var(--color-mute);
-  border-radius: var(--border-radius);
-  display: inline-block;
-  filter: saturate(70%);
-  min-width: 100%;
-  max-width: var(--form-width);
-  padding: 0;
-  overflow: hidden;
-  cursor: pointer;
-
-  @media (min-width: 768px) {
-    display: flex;
-    flex-direction: column;
-    min-width: var(--form-width);
-  }
-}
-
-/// File-input button site wide
-input[type='file']::file-selector-button {
-  color: var(--color-white);
-  background-color: var(--color-primary);
-  text-transform: uppercase;
-  border: 1px;
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-body);
-  line-height: var(--font-line-height-body);
-  height: var(--row-height);
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  white-space: nowrap;
-  padding: 0 12px 0 12px;
-  margin: 0 12px 0 0;
-  width: 150px;
-
-  @media (min-width: 768px) {
-    width: 200px;
-  }
-}
-
-.button-row .upload-button--disabled {
-  background-color: var(--color-gray) !important;
-  border-color: var(--color-gray) !important;
-}
-
-.form__open-upload {
-  .file-type__select {
-    max-width: var(--mobile-xs-width);
-  }
-  .form__control > .label *[class*='icon'] {
-    top: 69%;
-  }
-
-  .input-file {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 7px;
-    position: relative;
-    //width: 200px;
-
-    *[class*='icons'] {
-      position: absolute;
-      top: 18px;
-      left: 12px;
-      color: orange;
-    }
-
-    /// Hidden file-input for cases
-    .inputfile {
-      display: inline-block;
-      margin-top: var(--spacing-medium);
-      min-width: 200px;
-      height: var(--row-height);
-      opacity: 0;
-      overflow: hidden;
-      z-index: 200;
-    }
-
-    .inputfile + .label,
-    .inputfile + .label__label {
-      display: inline-block;
-      position: absolute;
-      top: 5px;
-      left: 0;
-      padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium)
-        calc(3 * (var(--spacing-extra-large)));
-      font-size: var(--font-size-body);
-      color: var(--color-font-primary);
-      background-color: var(--color-primary);
-      border: 1px solid var(--color-primary);
-      border-radius: var(--border-radius);
-      min-width: 202px;
-      z-index: -1;
-    }
-
-    .inputfile:focus + .label__label,
-    .inputfile.has-focus + .label__label,
-    .inputfile:hover + .label__label,
-    .inputfile + .label__label:hover,
-    .inputfile:focus + .label,
-    .inputfile.has-focus + .label,
-    .inputfile:hover + .label,
-    .inputfile + .label:hover {
-      background-color: var(--color-primary-darker);
-      top: 4px;
-      transition: all 0.3s, background-color 0.3s;
-    }
-
-    .inputfile + .label__label *[class*='icons'],
-    .inputfile + .label *[class*='icons'] {
-      width: 1.3em;
-      vertical-align: middle;
-      color: white;
-      margin-left: var(--spacing-medium);
-    }
-
-    .inputfile + .label__label {
-      cursor: pointer; /* "hand" cursor */
-    }
-
-    .inputfile:focus + .label,
-    .inputfile:focus-visible + .label,
-    .inputfile:focus + .label__label,
-    .inputfile:focus-visible + .label__label {
-      outline: var(--border-width) solid var(--color-secondary);
-      outline: -webkit-focus-ring-color auto 5px;
-    }
-  }
-
-  .drive {
-    display: block;
-
-    &.error {
-      display: none;
-    }
-  }
-
-  .close .button--transparent {
-    color: var(--color-red);
-
-    &.error {
-      display: none;
-    }
-  }
-
-  .info-container {
-    display: none;
-  }
-
-  .fieldset-container {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: row;
-    justify-content: space-around;
-    border: 1px solid lightgray;
-    border-radius: 4px;
-    height: 80px;
-    padding-top: var(--spacing-large);
-    margin-bottom: 20px;
-
-    .fieldset__content {
-      color: var(--color-mute);
-      width: 200px;
-
-      .upload-info {
-        display: inline-block;
-        font-family: var(--font-family-body);
-        font-size: var(--font-size-body);
-        color: var(--color-mute);
-        width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &__name {
-          color: var(--font-color-body);
-          font-weight: bold;
-        }
-
-        &__error {
-          display: none;
-          position: relative;
-
-          & *[class*='icon'] {
-            position: absolute;
-            top: var(--spacing-small);
-            right: -100px;
-            color: var(--color-primary);
-          }
-
-          &.error {
-            color: var(--font-color-body);
-            font-weight: bold;
-            font-size: 19px;
-            line-height: var(--spacing-giant);
-            display: block;
-            margin-left: calc(-1 * (var(--spacing-large)));
-            overflow: initial;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
new file mode 100644
index 0000000000..0118882380
--- /dev/null
+++ b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -0,0 +1,42 @@
+.file-input {
+  .card:first-child {
+    text-align: center;
+    position: relative;
+  }
+
+  &--drag-active .card:first-child {
+    background-color: var(--color-gray-lightest);
+  }
+
+  .card__body {
+    box-sizing: border-box;
+    padding: var(--row-height);
+  }
+
+  [class*='icon'] {
+    pointer-events: none;
+    position: static !important;
+    transform: none !important;
+  }
+
+  &--drag-active .button {
+    pointer-events: none;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  > .p {
+    margin: calc(0.5 * var(--gutter-width)) 0;
+    display: block;
+    text-align: center;
+  }
+
+  .h4 {
+    margin-top: var(--gutter-width);
+    margin-bottom: calc(0.5 * var(--gutter-width));
+  }
+}
diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss
index ed1cda4bb2..8ec0d0e375 100644
--- a/src/open_inwoner/scss/components/_index.scss
+++ b/src/open_inwoner/scss/components/_index.scss
@@ -31,6 +31,7 @@
 @import './Form/DocumentUpload.scss';
 @import './Form/Error.scss';
 @import './Form/Fieldset.scss';
+@import './Form/FileInput.scss';
 @import './Form/Form.scss';
 @import './Form/GroupInput';
 @import './Form/Input.scss';
diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
index 49ba5ef658..f4d12d5857 100644
--- a/src/open_inwoner/templates/pages/cases/document_form.html
+++ b/src/open_inwoner/templates/pages/cases/document_form.html
@@ -1,37 +1,9 @@
 {% load i18n form_tags button_tags icon_tags %}
 
-<div class="upload-interface">
-    {#  if local upload is enabled #}
-    {% render_form id="document-upload" form=form method="POST" hxencoding="multipart/form-data" hxpost=hxpost_document_action hxtarget="#form_upload" submit_text=_("Bestand uploaden") show_required=True extra_classes="case-detail-form" %}
-        {% csrf_token %}
-        <div id="info_container" class="info-container form__control__info">
-            <div class="upload-interface__info">
-                <fieldset class="fieldset-container">
-                    <div class="drive">{% icon icon="insert_drive_file" outlined=True icon_position="before" %}</div>
-                    <div class="fieldset__content">
-                        <div id="upload_error" class="upload-info upload-info__error">
-                            <span>{% trans "Selecteer uw bestand opnieuw" %} {% icon icon="arrow_downward" outlined=True icon_position="before" %}</span></div>
-                        <div id="upload_name" class="upload-info upload-info__name"></div>
-                        <div id="upload_size" class="upload-info upload-info__size"></div>
-                    </div>
-                    <div class="close">{% button id="close_upload" icon="cancel" type='reset' text='' transparent=True icon_outlined=True icon_position="before" %}</div>
-                </fieldset>
-            </div>
-        </div>
-
-        <div class="form__control__info">{% input form.title no_label=False no_help=True id="id_title" %}</div>
-
-        <div class="form__control__info">{% input form.type no_label=False no_help=True icon="expand_more" icon_position="after" class="label input" id="id_type" extra_classes="file-type__select" %}</div>
-
-        <div class="form__control upload">
-            <div class="upload__container">
-                {% file_input form.file text=_("Document selecteren") no_label=False no_help=True extra_classes="file-upload" %}
-                <div class="form__submit">
-                    {% button_row %}
-                        {% button type="submit" text=_("Document uploaden") id="submit_upload" primary=True %}
-                    {% endbutton_row %}
-                </div>
-            </div>
-        </div>
-    {% endrender_form %}
-</div>
+{#  if local upload is enabled #}
+{% render_form id="document-upload" form=form method="POST" hxencoding="multipart/form-data" hxpost=hxpost_document_action hxtarget="#form_upload" submit_text=_("Bestand uploaden") extra_classes="case-detail-form" %}
+    {% csrf_token %}
+    {% input form.type no_label=False no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
+    {% file_input form.file %}
+    {% form_actions primary_text=_("Upload documenten") primary_icon="arrow_forward" enctype="multipart/form-data" %}
+{% endrender_form %}
diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
index 0d28ad5664..7106c8fff4 100644
--- a/src/open_inwoner/templates/pages/cases/status_inner.html
+++ b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -102,16 +102,6 @@ <h2 class="h2" id="documents-upload">{% trans "Document uploaden" %}</h2>
                 </div>
                 {% endif %}
 
-                {% if case.case_type_config_description %}
-                    <p class="p">{{ case.case_type_config_description }}</p>
-                {% else %}
-                    <p class="p">
-                        {% blocktranslate with max_filesize=openzaak_config.max_upload_size allowed_extensions=case.allowed_file_extensions|join:', ' %}
-                            Grootte max. {{ max_filesize }} MB, toegestane document formaten: {{ allowed_extensions }}.
-                        {% endblocktranslate %}
-                    </p>
-                {% endif %}
-
                 {#  Upload document form. #}
                 <section id="form_upload" class="form__open-upload">
                     {% include 'pages/cases/document_form.html' %}