diff --git a/hypha/apply/projects/templates/application_projects/includes/project_documents.html b/hypha/apply/projects/templates/application_projects/includes/project_documents.html
index 2693c07cb1..aadeb005ed 100644
--- a/hypha/apply/projects/templates/application_projects/includes/project_documents.html
+++ b/hypha/apply/projects/templates/application_projects/includes/project_documents.html
@@ -3,73 +3,73 @@
 
 <div class="docs-block wrapper--outer-space-large" {% if collapsible_header %} x-data="{ collapsed: true }" {% endif %}>
     <div class="docs-block__header" id="project-documents-section" {% if collapsible_header %} x-on:click="collapsed = ! collapsed" role="button" aria-label="Toggle Project documents visibility" aria-controls="project-documents-elements" {% endif %}>
-        <div class="flex justify-between w-full" >
+        <div class="flex justify-between gap-2 w-full items-center">
             <h2 class="text-lg font-semibold m-0">
                 {% trans "Project documents" %}
             </h2>
 
-            {% if collapsible_header %}
-                <button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' ">
-                    {% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %}
-                    <span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span>
-                </button>
-            {% endif %}
-        </div>
-        <div>
-            {% user_can_send_for_approval object user as can_send_to_approve %}
-            {% if can_send_to_approve %}
-                <a class="button button--project-action"
-                   href="{% url 'apply:projects:submit_project_for_approval' object.id %}"
-                   hx-get="{% url 'apply:projects:submit_project_for_approval' object.id %}"
-                   hx-target="#htmx-modal"
-                >
-                    {% if object.paf_approvals.exists %}
-                        {% trans "Resubmit for approval" %}
-                    {% else %}
-                        {% trans "Submit for approval" %}
-                    {% endif %}
-                </a>
-            {% endif %}
-            {% user_can_update_paf_approvers object user request as can_update_paf_approvers %}
-            {% user_can_assign_approvers_to_project object user request as can_assign_paf_approvers %}
-            {% if can_update_paf_approvers %}
-                {% if user == project.lead %}
-                    <a class="button button--project-action button--project-action--white ms-2"
-                       href="{% url 'apply:projects:update_pafapprovers' object.id %}"
-                       hx-get="{% url 'apply:projects:update_pafapprovers' object.id %}"
+            <div class="flex gap-2 flex-wrap">
+                {% user_can_send_for_approval object user as can_send_to_approve %}
+                {% if can_send_to_approve %}
+                    <a class="button button--project-action"
+                       href="{% url 'apply:projects:submit_project_for_approval' object.id %}"
+                       hx-get="{% url 'apply:projects:submit_project_for_approval' object.id %}"
                        hx-target="#htmx-modal"
                     >
-                        {% trans "View/Update Approvers" %}
+                        {% if object.paf_approvals.exists %}
+                            {% trans "Resubmit for approval" %}
+                        {% else %}
+                            {% trans "Submit for approval" %}
+                        {% endif %}
                     </a>
-                {% else %}
-                    <a class="button button--project-action button--project-action--white ms-2"
+                {% endif %}
+                {% user_can_update_paf_approvers object user request as can_update_paf_approvers %}
+                {% user_can_assign_approvers_to_project object user request as can_assign_paf_approvers %}
+                {% if can_update_paf_approvers %}
+                    {% if user == project.lead %}
+                        <a class="button button--project-action button--project-action--white ms-2"
+                           href="{% url 'apply:projects:update_pafapprovers' object.id %}"
+                           hx-get="{% url 'apply:projects:update_pafapprovers' object.id %}"
+                           hx-target="#htmx-modal"
+                        >
+                            {% trans "View/Update Approvers" %}
+                        </a>
+                    {% else %}
+                        <a class="button button--project-action button--project-action--white ms-2"
+                           href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
+                           hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
+                           hx-target="#htmx-modal"
+                        >
+                            {% trans "Change approver" %}
+                        </a>
+                    {% endif %}
+                {% endif %}
+                {% if can_assign_paf_approvers %}
+                    <a class="button button--project-action"
                        href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
                        hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
                        hx-target="#htmx-modal"
                     >
-                        {% trans "Change approver" %}
+                        {% trans "Assign approver" %}
                     </a>
                 {% endif %}
-            {% endif %}
-            {% if can_assign_paf_approvers %}
-                <a class="button button--project-action"
-                   href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
-                   hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
-                   hx-target="#htmx-modal"
-                >
-                    {% trans "Assign approver" %}
-                </a>
-            {% endif %}
-            {% user_can_update_paf_status object user request=request as can_update_paf_status %}
-            {% if object.can_make_approval and can_update_paf_status %}
-                <a class="button button--project-action ms-2"
-                   href="{% url 'apply:projects:update_pafstatus' object.id %}"
-                   hx-get="{% url 'apply:projects:update_pafstatus' object.id %}"
-                   hx-target="#htmx-modal"
-                >
-                    {% trans "Update Status" %}
-                </a>
-            {% endif %}
+                {% user_can_update_paf_status object user request=request as can_update_paf_status %}
+                {% if object.can_make_approval and can_update_paf_status %}
+                    <a class="button button--project-action ms-2"
+                       href="{% url 'apply:projects:update_pafstatus' object.id %}"
+                       hx-get="{% url 'apply:projects:update_pafstatus' object.id %}"
+                       hx-target="#htmx-modal"
+                    >
+                        {% trans "Update Status" %}
+                    </a>
+                {% endif %}
+                {% if collapsible_header %}
+                    <button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' ">
+                        {% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %}
+                        <span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span>
+                    </button>
+                {% endif %}
+            </div>
         </div>
     </div>
     <ul class="docs-block__inner" id="project-documents-elements" {% if collapsible_header %} x-show="!collapsed" role="region"
diff --git a/hypha/apply/projects/templates/application_projects/partials/contracting_category_documents.html b/hypha/apply/projects/templates/application_projects/partials/contracting_category_documents.html
index 5173e65a51..4f01942d05 100644
--- a/hypha/apply/projects/templates/application_projects/partials/contracting_category_documents.html
+++ b/hypha/apply/projects/templates/application_projects/partials/contracting_category_documents.html
@@ -1,4 +1,4 @@
-{% load i18n contract_tools project_tags heroicons %}
+{% load i18n apply_tags contract_tools project_tags heroicons %}
 
 <li class="docs-block__row">
     <div class="docs-block__row-inner">
@@ -13,13 +13,12 @@
 
     {% if all_contract_document_categories %}
 
-        <div class="w-full ps-9">
-            <p></p>
-            <ul>
+        <div class="w-full ps-7">
+            <ul class="space-y-2 pt-3">
                 {% for document_category in all_contract_document_categories %}
-                    <li class="docs-block__document">
+                    <li class="flex justify-between bg-gray-100 px-3 py-2 rounded">
                         <div class="docs-block__document-inner">
-                            <p class="docs-block__document-info">
+                            <span>
                                 {% if document_category in remaining_contract_document_categories %}
                                     {% trans "Pending " %}
                                     {{ document_category.name|lower }}
@@ -29,12 +28,14 @@
                                 {% if document_category.required %}<span class="text-red-700">*</span>{% endif %}
                                 {% if document_category.template %}
                                     {% heroicon_mini "information-circle" class="fill-light-blue inline align-middle" aria_hidden=true %}
-                                    <a class="font-bold border-b-2 border-dashed" href="{% url 'apply:projects:category_template' pk=object.pk type='contract_document' category_pk=document_category.pk %}" target="_blank">{% trans "View template" %}</a>
+                                    <a class="font-semibold border-b-2 border-dashed" href="{% url 'apply:projects:category_template' pk=object.pk type='contract_document' category_pk=document_category.pk %}" target="_blank">{% trans "View template" %}</a>
                                 {% endif %}
-                            </p>
+                            </span>
                             {% if document_category not in remaining_contract_document_categories %}
                                 {% contract_category_latest_file object document_category as latest_file %}
-                                <p class="docs-block__document-info"><b>{{ latest_file.title }}</b> - {{ latest_file.created_at }}</p>
+                                <div class="text-sm">
+                                    <span>{{ latest_file.title|truncatechars_middle:45 }}</span> - <span class="text-fg-muted">{{ latest_file.created_at }}</span>
+                                </div>
                             {% endif %}
                         </div>
                         {% if document_category in remaining_contract_document_categories and can_update_documents %}
@@ -53,7 +54,10 @@
                             {% contract_category_latest_file object document_category as latest_file %}
                             {% if latest_file %}
                                 <div class="docs-block__row-inner">
-                                    <a class="docs-block__icon-link" href="{% url 'apply:projects:contract_document' pk=object.pk file_pk=latest_file.pk %}" target="_blank">
+                                    <a class="docs-block__icon-link"
+                                       href="{% url 'apply:projects:contract_document' pk=object.pk file_pk=latest_file.pk %}"
+                                       target="_blank"
+                                    >
                                         {% heroicon_micro "eye" class="inline me-1 w-4 h-4" aria_hidden=true %}
                                         {% trans "View" %}
                                     </a>
@@ -92,4 +96,3 @@
         {% trans "Submit contract documents" %}
     </a>
 {% endif %}
-
diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss
index 20a14f226f..a5a7e047e7 100644
--- a/hypha/static_src/sass/components/_docs-block.scss
+++ b/hypha/static_src/sass/components/_docs-block.scss
@@ -95,6 +95,10 @@
         &:last-child {
             margin-inline-end: 0;
         }
+
+        &:hover {
+            opacity: 0.8;
+        }
     }
 
     &__icon-link {
@@ -112,6 +116,10 @@
         &:last-child {
             margin-inline-end: 0;
         }
+
+        &:hover {
+            opacity: 0.8;
+        }
     }
 
     &__info-text {