diff --git a/app/web/cases/templates/cases/case_page.html b/app/web/cases/templates/cases/case_page.html
index c9a78f1..ab3d5d3 100644
--- a/app/web/cases/templates/cases/case_page.html
+++ b/app/web/cases/templates/cases/case_page.html
@@ -156,28 +156,44 @@ <h2 class="h3">Bijlagen <small>({{ object.document_set.all|length }})</small></h
             {% for document in object.document_set.all %}
                 {% if forloop.counter0 < 4 %}
                     <li>
-                        <div><a href="{% url 'download_case_document' object.id document.id %}" target="_blank" rel="noopener noreferrer"><span>{{ document.name }}</span></a> <span>{{ document.extension }}</span><span> {{ document.uploaded|timezone:FRONTEND_TIMEZONE|date:DATE_FORMAT }} </span></div>
-                        {% if not object.delete_request_date %}
                         <div>
+                            <a href="{% url 'view_case_document' object.id document.id %}" target="_blank" rel="noopener noreferrer">
+                                <span>{{ document.name }}</span>
+                            </a> 
+                            <span>{{ document.extension }}</span>
+                            <span> {{ document.uploaded|timezone:FRONTEND_TIMEZONE|date:DATE_FORMAT }} </span>
+                        </div>
 
-                            <button type="button" title="Bijlage aanpassen" class="text-link u-margin-top-none" data-handler="modal" data-contentid="modalDocumentUpdate-{{ document.id }}">
-                                <span><svg class="button__icon"  width="20" height="20" >
-                                    <use href="#edit-document" xlink:href="#edit-document"  width="20" height="20"></use>
-                                </svg></span>
-                            </button>
-                            <div role="dialog" class="modal" id="modalDocumentUpdate-{{ document.id }}">
-                                <iframe class="modal--update-document" id="iFrameDocumentUpdate-{{ document.id }}" data-src="{% url 'update_case_document' object.id document.id %}" src="about:blank" title="Bijlage {{ document.name }} aanpassen"></iframe>
-                            </div>
-                            <button type="button" title="Bijlage verwijderen" class="text-link u-margin-top-none" data-handler="modal" data-contentid="modalDocumentDelete-{{ document.id }}">
-                                <svg class="button__icon"  width="20" height="20" >
-                                    <use href="#trash" xlink:href="#trash"  width="20" height="20"></use>
-                                </svg>
-                            </button>
-                            <div role="dialog" class="modal" id="modalDocumentDelete-{{ document.id }}">
-                                <iframe class="modal--delete-document" id="iFrameDocumentDelete-{{ document.id }}" data-src="{% url 'delete_case_document' object.id document.id %}" src="about:blank" title="Verwijder bijlage {{ document.name }}"></iframe>
+                        {% if not object.delete_request_date %}
+                            <div>
+                                <a class="grid__wrapper" href="{% url 'download_case_document' object.id document.id %}" target="_blank" rel="noopener noreferrer">
+                                    <button type="button" title="Bijlage downloaden" class="text-link u-margin-top-none">
+                                        <span>
+                                            <svg class="button__icon"  width="20" height="20" >
+                                                <use href="#download" xlink:href="#download"  width="20" height="20"></use>
+                                            </svg>
+                                        </span>
+                                    </button>
+                                </a>
+                                <button type="button" title="Bijlage aanpassen" class="text-link u-margin-top-none" data-handler="modal" data-contentid="modalDocumentUpdate-{{ document.id }}">
+                                    <span><svg class="button__icon"  width="20" height="20" >
+                                        <use href="#edit-document" xlink:href="#edit-document"  width="20" height="20"></use>
+                                    </svg></span>
+                                </button>
+                                <div role="dialog" class="modal" id="modalDocumentUpdate-{{ document.id }}">
+                                    <iframe class="modal--update-document" id="iFrameDocumentUpdate-{{ document.id }}" data-src="{% url 'update_case_document' object.id document.id %}" src="about:blank" title="Bijlage {{ document.name }} aanpassen"></iframe>
+                                </div>
+                                <button type="button" title="Bijlage verwijderen" class="text-link u-margin-top-none" data-handler="modal" data-contentid="modalDocumentDelete-{{ document.id }}">
+                                    <svg class="button__icon"  width="20" height="20" >
+                                        <use href="#trash" xlink:href="#trash"  width="20" height="20"></use>
+                                    </svg>
+                                </button>
+                                <div role="dialog" class="modal" id="modalDocumentDelete-{{ document.id }}">
+                                    <iframe class="modal--delete-document" id="iFrameDocumentDelete-{{ document.id }}" data-src="{% url 'delete_case_document' object.id document.id %}" src="about:blank" title="Verwijder bijlage {{ document.name }}"></iframe>
+                                </div>
                             </div>
-                        </div>
                         {% endif %}
+                        
                     </li>
                 {% endif %}
             {% endfor %}
diff --git a/app/web/cases/urls.py b/app/web/cases/urls.py
index 72b450c..86b760e 100644
--- a/app/web/cases/urls.py
+++ b/app/web/cases/urls.py
@@ -34,4 +34,5 @@
     path('<int:case_pk>/verwijder-bijlage/<int:pk>/', DocumentDelete.as_view(), name='delete_case_document'),
 
     path('<int:case_pk>/download-bijlage/<int:document_pk>', download_document, name='download_case_document'),
+    path('<int:case_pk>/bekijk-bijlage/<int:document_pk>', view_document, name='view_case_document'),
 ]
diff --git a/app/web/cases/views.py b/app/web/cases/views.py
index 990dc77..5080998 100644
--- a/app/web/cases/views.py
+++ b/app/web/cases/views.py
@@ -36,6 +36,7 @@
 from operator import or_
 from django.utils import timezone
 from django.http.response import HttpResponse
+import mimetypes  
 
 logger = logging.getLogger(__name__)
 
@@ -1286,14 +1287,37 @@ def download_document(request, case_pk, document_pk):
         response = HttpResponse(file.read(), content_type='application/octet-stream')
         response['Content-Disposition'] = f'attachment; filename="{document.uploaded_file.name}"'
         return response
+    
 
+@user_passes_test(auth_test, user_type=[WONEN, BEGELEIDER, PB_FEDERATIE_BEHEERDER, WONINGCORPORATIE_MEDEWERKER])
+def view_document(request, case_pk, document_pk):
+    qs = Case._default_manager.by_user(user=request.user)
+    case = qs.filter(pk=case_pk).first()
+    if not case:
+        raise PermissionDenied
+    document = get_object_or_404(Document, id=document_pk)
+    
+    if any(user_type in [WONEN, WONINGCORPORATIE_MEDEWERKER] for user_type in request.user.user_type_values):
+        form_status_list = [f[0] for f in case.casestatus_set.all().order_by('form').distinct().values_list('form')]
+        shared_in_forms = [f for f in document.forms if f in form_status_list]
+        if not shared_in_forms:
+            raise PermissionDenied
 
+    if document.case != case:
+        raise PermissionDenied
 
+    if not default_storage.exists(default_storage.generate_filename(document.uploaded_file.name)):
+        raise Http404()
 
+    # Open the file and adjust the content type to match the file type
+    with default_storage.open(document.uploaded_file.name, 'rb') as file:
+        file_data = file.read()
 
+    # Guess the MIME type of the file based on its name
+    content_type = mimetypes.guess_type(document.uploaded_file.name)[0] or 'application/octet-stream'
 
-
-
-
-
-
+    # Set Content-Disposition to inline for browser preview
+    response = HttpResponse(file_data, content_type=content_type)
+    response['Content-Disposition'] = f'inline; filename="{document.uploaded_file.name}"'
+    
+    return response