diff --git a/backend/core/templates/core/base_pdf.html b/backend/core/templates/core/base_pdf.html
index 9ae07a2b2..35a9f2ed0 100644
--- a/backend/core/templates/core/base_pdf.html
+++ b/backend/core/templates/core/base_pdf.html
@@ -16,8 +16,6 @@
 
 .main {
 font-family: 'Source Sans Pro', sans-serif;
-//font-family: 'Open Sans Condensed', sans-serif;
-//font-family: 'Barlow Condensed', sans-serif;
 
 }
 .flex {
@@ -32,9 +30,6 @@
 .container {
   width: 100%;
 }
-.w-full {
-  width: 100%;
-}
 
 .VL {
   background-color: rgb(187, 247, 208);
@@ -53,7 +48,7 @@
 }
 
 .bg-gray-50 {
-  background-color: rgb(255, 255, 255); //switched to white
+  background-color: rgb(250, 250, 251);
 }
 .bg-gray-100 {
   background-color: rgb(244, 244, 245);
@@ -223,10 +218,6 @@
 .p-4 {
   padding: 1rem;
 }
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -281,9 +272,6 @@
   justify-content: center;
 }
 
-.flex-row {
-  flex-direction: row;
-}
 
 .w-12 {
   width: 2rem;
diff --git a/backend/core/templates/snippets/mp_data.html b/backend/core/templates/snippets/mp_data.html
index 0306da304..f79441ff0 100644
--- a/backend/core/templates/snippets/mp_data.html
+++ b/backend/core/templates/snippets/mp_data.html
@@ -1,101 +1,111 @@
 {% load i18n %}
 
-<main class="p-2 m-2 main">
-    <div class="bg-white p-2 m-2 shadow rounded-lg space-x-3 flex flex-row justify-center">
-        <p class="font-semibold text-lg"> {% trans "Domain" %}: {{ risk_assessment.project.folder }}</p>
-        <p>/</p>
-        <p class="font-semibold text-lg"> {% trans "Project" %}: {{ risk_assessment.project }}</p>
-        <p>/</p>
-        <p class="font-semibold text-lg"> {% trans "Risk assessment" %}: {{ risk_assessment.name }} - {{ risk_assessment.version }}</p>
+<main class="p-4">
+    {# Header Section #}
+    <div class="bg-white p-4 mb-4 shadow rounded-lg">
+        <div class="flex flex-row justify-center space-x-3">
+            <p class="font-semibold text-lg">{% trans "Domain" %}: {{ risk_assessment.project.folder }}</p>
+            <span class="text-gray-500">/</span>
+            <p class="font-semibold text-lg">{% trans "Project" %}: {{ risk_assessment.project }}</p>
+            <span class="text-gray-500">/</span>
+            <p class="font-semibold text-lg">{% trans "Risk assessment" %}: {{ risk_assessment.name }} - {{ risk_assessment.version }}</p>
+        </div>
     </div>
-    <p class="p-2 m-2 text-lg font-semibold"> {% trans "Associated risk scenarios" %}: </p>
-    <div class="bg-white p-2 m-2 shadow overflow-hidden rounded-lg flex">
-        <table class="w-full p-2 mt-2">
-            <thead>
-            </thead>
-            <tbody>
+
+    {# Risk Scenarios Section #}
+    <h2 class="p-4 text-lg font-semibold">{% trans "Associated risk scenarios" %}</h2>
+
+    <div class="bg-white p-4 shadow rounded-lg">
+        <table class="w-full">
+            <caption class="sr-only">{% trans "Risk Scenarios and Controls" %}</caption>
             {% if not context %}
-            <tr class="">
-                <td colspan="" class="p-4 m-2 text-xl text-center"><i class="fas fa-exclamation-circle"></i>
-                {% trans "Risk risk_assessment seems to be empty. Measure Plan cannot be generated." %}
-                </td>
-            </tr>
-            {% endif %}
-            {% for scenario in context %}
-            <tr class="bg-gray-100">
-                <td class="text-lg p-3" colspan="9">
-                    <p class="text-indigo-500 hover:text-indigo-700">{{ scenario.ref_id }}: {{ scenario.name }}</p>
-                    <span class="text-xs text-center p-1 mx-1 rounded"
-                    {% if scenario.treatment == 'open' %}
-                    style="background-color: #fed7aa"
-                    {% elif scenario.treatment == 'mitigate' %}
-                    style="background-color: #bbf7d0"
-                    {% elif scenario.treatment == 'accept' %}
-                    style="background-color: #bae6fd"
-                    {% else %}
-                    style="background-color: #fca5a5"
-                    {% endif %}">{{ scenario.get_treatment_display|lower}}
-                    </span>
-                </td>
-            </tr>
-            {% if not scenario.applied_controls.all %}
-            <tr>
-                <td colspan="9" class="p-2 text-left"><i class="fas fa-exclamation-circle"></i> {% trans "No associated measure" %}
-                </td>
-            </tr>
+                <tr>
+                    <td colspan="9" class="p-4 text-xl text-center">
+                        <i class="fas fa-exclamation-circle"></i>
+                        {% trans "Risk assessment seems to be empty. Measure Plan cannot be generated." %}
+                    </td>
+                </tr>
             {% else %}
-            <tr>
-                <td class="text-md pl-6 pb-3 font-medium" colspan="9"> {% trans "Existing controls" %}: </td>
-            </tr>
-            <tr>
-                <td class="text-sm pl-6 pb-3" colspan="9"> {{ scenario.existing_controls }} </td>
-            </tr>
-            <tr>
-                <td class="text-md pl-6 pb-3 font-medium" colspan="9"> {% trans "Additional measures" %}: </td>
-            </tr>
-            <tr class="text-sm uppercase">
-                <td class="px-2 text-center">#</td>
-                <td class="px-2 font-semibold">{% trans "Name" %}</td>
-                <td class="px-2 font-semibold">{% trans "Description" %}</td>
-                <td class="px-2 font-semibold">{% trans "Type" %}</td>
-                <td class="px-2 font-semibold">{% trans "Reference control" %}</td>
-                <td class="px-2 font-semibold">{% trans "ETA" %}</td>
-                <td class="px-2 font-semibold">{% trans "Effort" %}</td>
-                <td class="px-2 font-semibold">{% trans "Cost" %}</td>
-                <td class="px-2 font-semibold text-center">{% trans "Link" %}</td>
-                <td class="px-2 font-semibold text-center">{% trans "Status" %}</td>
-            </tr>
-            {% endif %}
-            {% for appliedcontrol in scenario.applied_controls.all %}
-            <tr class="hover:text-indigo-500 border-b cursor-pointer hover:scale-[0.99] duration-500">
-                <td class="px-2 py-3 text-center pl-4">{{ appliedcontrol.mid }}</td>
-                <td class="px-2 py-3">{{ appliedcontrol.name }}</td>
-                <td class="px-2 py-3 max-w-md">{% if appliedcontrol.description %}{{ appliedcontrol.description|linebreaksbr }}{% endif %}</td>
-                <td class="px-2 py-3">{{ appliedcontrol.get_type_display }}</td>
-                <td class="px-2 py-3">{% if appliedcontrol.reference_control %}{{ appliedcontrol.reference_control }}{% else %}--{% endif %}</td>
-                <td class="px-2 py-3">{% if appliedcontrol.eta %}{{ appliedcontrol.eta }}{% else %}--{%endif%}</td>
-                <td class="px-2 py-3">{% if appliedcontrol.effort %}{{ appliedcontrol.effort }}{% else %}--{%endif%}</td>
-                <td class="px-2 py-3">{% if appliedcontrol.cost %}{{ appliedcontrol.cost }}{% else %}--{%endif%}</td>
-                <td class="px-2 py-3 text-center">{% if appliedcontrol.link %}<a onclick="event.stopPropagation();" href="{{ appliedcontrol.link }}"
-                                                                   class="hover:text-blue-400"><i
-                        class="fas fa-external-link-square-alt"></i></a>{% else %}--{% endif %}
-                </td>
-                <td class="text-center"><span class="text-xs text-gray-900 whitespace-nowrap text-center p-1 mx-1 rounded
-                    {% if appliedcontrol.status == 'open' %}
-                    bg-orange-200
-                    {% elif appliedcontrol.status == 'in_progress' %}
-                    bg-blue-200
-                    {% elif appliedcontrol.status == 'on_hold' %}
-                    bg-red-300
+                {% for scenario in context %}
+                    {# Scenario Header #}
+                    <tr class="bg-gray-100">
+                        <th colspan="9" class="text-lg p-4 text-left">
+                            <div class="text-indigo-700">{{ scenario.ref_id }}: {{ scenario.name }}</div>
+                            <span class="text-xs px-2 py-1 rounded inline-block mt-1"
+                                  style="background-color: {% if scenario.treatment == 'open' %}#fed7aa
+                                                         {% elif scenario.treatment == 'mitigate' %}#bbf7d0
+                                                         {% elif scenario.treatment == 'accept' %}#bae6fd
+                                                         {% else %}#fca5a5{% endif %}">
+                                {{ scenario.get_treatment_display|lower }}
+                            </span>
+                        </th>
+                    </tr>
+
+                    {# Existing Controls Section #}
+                    <tr>
+                        <th colspan="9" class="text-md p-4 text-left font-medium">
+                            {% trans "Existing controls" %}:
+                        </th>
+                    </tr>
+                    <tr>
+                        <td colspan="9" class="text-sm px-6 pb-4">
+                            {{ scenario.existing_controls|default:"--" }}
+                        </td>
+                    </tr>
+
+                    {% if scenario.applied_controls.exists %}
+                        {# Additional Measures Section #}
+                        <tr>
+                            <th colspan="9" class="text-md p-4 text-left font-medium">
+                                {% trans "Additional measures" %}:
+                            </th>
+                        </tr>
+
+                        {# Table Headers #}
+                        <tr class="text-sm uppercase bg-gray-50">
+                            <th class="p-2 text-center">#</th>
+                            <th class="p-2 text-left">{% trans "Name" %}</th>
+                            <th class="p-2 text-left">{% trans "Description" %}</th>
+                            <th class="p-2 text-left">{% trans "Type" %}</th>
+                            <th class="p-2 text-left">{% trans "Reference control" %}</th>
+                            <th class="p-2 text-left">{% trans "ETA" %}</th>
+                            <th class="p-2 text-left">{% trans "Effort" %}</th>
+                            <th class="p-2 text-left">{% trans "Cost" %}</th>
+                            <th class="p-2 text-center">{% trans "Status" %}</th>
+                        </tr>
+
+                        {# Applied Controls #}
+                        {% for appliedcontrol in scenario.applied_controls.all %}
+                            <tr class="border-b">
+                                <td class="p-3 text-center">{{ appliedcontrol.mid }}</td>
+                                <td class="p-3">{{ appliedcontrol.name }}</td>
+                                <td class="p-3 max-w-md">{{ appliedcontrol.description|default:"--"|linebreaksbr }}</td>
+                                <td class="p-3">{{ appliedcontrol.get_type_display }}</td>
+                                <td class="p-3">{{ appliedcontrol.reference_control|default:"--" }}</td>
+                                <td class="p-3">{{ appliedcontrol.eta|default:"--" }}</td>
+                                <td class="p-3">{{ appliedcontrol.effort|default:"--" }}</td>
+                                <td class="p-3">{{ appliedcontrol.cost|default:"--" }}</td>
+                                <td class="p-3 text-center">
+                                    <span class="text-xs px-2 py-1 rounded inline-block
+                                        {% if appliedcontrol.status == 'open' %}bg-orange-200
+                                        {% elif appliedcontrol.status == 'in_progress' %}bg-blue-200
+                                        {% elif appliedcontrol.status == 'on_hold' %}bg-red-300
+                                        {% else %}bg-green-200{% endif %}">
+                                        {{ appliedcontrol.get_status_display|lower }}
+                                    </span>
+                                </td>
+                            </tr>
+                        {% endfor %}
                     {% else %}
-                    bg-green-200
-                    {% endif %}">{{ appliedcontrol.get_status_display|lower }}
-                    </span></td>
-            </tr>
-            {% endfor %}
-            {% endfor %}
-            </tbody>
+                        <tr>
+                            <td colspan="9" class="p-4 text-center">
+                                <i class="fas fa-exclamation-circle"></i>
+                                {% trans "No associated measure" %}
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
         </table>
     </div>
-
 </main>
diff --git a/backend/core/templates/snippets/ra_data.html b/backend/core/templates/snippets/ra_data.html
index 5f13e534a..eb4d250dc 100644
--- a/backend/core/templates/snippets/ra_data.html
+++ b/backend/core/templates/snippets/ra_data.html
@@ -1,81 +1,112 @@
 {% load i18n %}
 
-<main class="flex-grow main">
-    <!--Information banner-->
-    <div class="">
-        <div class="bg-white py-4 px-12 m-4 shadow rounded-lg flex flex-row space-x-2 relative">
-            <div class="container w-1/3">
-                <div class="text-sm font-semibold ">{% trans "Risk assessment" %}</div>
-                <div id="name" class="text-base font-semibold ">{{ risk_assessment.project}}/{{ risk_assessment }}</div>
-                <br>
-                <div class="text-sm">
-                    <ul class="">
-                        <li class="pb-1"><span class="font-semibold">{% trans "Risk matrix:" %}</span>
-                            <ul>
-                                <li>{{ risk_assessment.risk_matrix }}</li>
-                            </ul>
-                          </li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Authors:" %}</span>
-                          <ul>
+<main class="p-4">
+    {# Information Banner #}
+    <div class="bg-white p-6 mb-8 shadow rounded-lg">
+        <div class="flex flex-row space-x-8">
+            {# Left Column - Assessment Details #}
+            <div class="w-1/3">
+                <h2 class="text-sm font-semibold mb-2">{% trans "Risk assessment" %}</h2>
+                <p class="text-base font-semibold mb-4">{{ risk_assessment.project }}/{{ risk_assessment }}</p>
+
+                <div class="space-y-2">
+                    {# Risk Matrix #}
+                    <div>
+                        <h3 class="text-sm font-semibold">{% trans "Risk matrix:" %}</h3>
+                        <p class="ml-4">{{ risk_assessment.risk_matrix }}</p>
+                    </div>
+
+                    {# Authors #}
+                    <div>
+                        <h3 class="text-sm font-semibold">{% trans "Authors:" %}</h3>
+                        <ul class="ml-4">
                             {% for author in risk_assessment.authors.all %}
                                 <li>{{ author }}</li>
                             {% endfor %}
-                          </ul>
-                        </li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Reviewers:" %}</span>
-                            <ul>
-                              {% for author in risk_assessment.reviewers.all %}
-                                  <li>{{ author }}</li>
-                              {% endfor %}
-                            </ul>
-                          </li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Status:" %}</span>
-                            {% if risk_assessment.status %} {{risk_assessment.status}} {% else %} -- {% endif %}
-                        </li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "ETA:" %}</span> {{ risk_assessment.eta|date }}</li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Due date:" %}</span> {{ risk_assessment.due_date|date }}</li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Created at:" %}</span> {{ risk_assessment.created_at|date }}</li>
-                        <li class="pb-1"><span class="font-semibold">{% trans "Updated at:" %}</span> {{ risk_assessment.updated_at|date }}</li>
-                    </ul>
+                        </ul>
+                    </div>
+
+                    {# Reviewers #}
+                    <div>
+                        <h3 class="text-sm font-semibold">{% trans "Reviewers:" %}</h3>
+                        <ul class="ml-4">
+                            {% for author in risk_assessment.reviewers.all %}
+                                <li>{{ author }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+
+                    {# Status Information #}
+                    <div class="space-y-1">
+                        <p>
+                            <span class="text-sm font-semibold">{% trans "Status:" %}</span>
+                            {{ risk_assessment.status|default:"--" }}
+                        </p>
+                        <p>
+                            <span class="text-sm font-semibold">{% trans "ETA:" %}</span>
+                            {{ risk_assessment.eta|date }}
+                        </p>
+                        <p>
+                            <span class="text-sm font-semibold">{% trans "Due date:" %}</span>
+                            {{ risk_assessment.due_date|date }}
+                        </p>
+                        <p>
+                            <span class="text-sm font-semibold">{% trans "Created at:" %}</span>
+                            {{ risk_assessment.created_at|date }}
+                        </p>
+                        <p>
+                            <span class="text-sm font-semibold">{% trans "Updated at:" %}</span>
+                            {{ risk_assessment.updated_at|date }}
+                        </p>
+                    </div>
                 </div>
             </div>
-            <div class="container w-2/3 rounded">
-                <div class="text-sm"><span class="font-semibold">{% trans "Description" %}:</div>
-                <div class="text-sm"> {% if risk_assessment.description %}{{ risk_assessment.description|linebreaksbr }}{% endif %}</div>
-            </div>
 
+            {# Right Column - Description #}
+            <div class="w-2/3">
+                <h3 class="text-sm font-semibold mb-2">{% trans "Description" %}:</h3>
+                <div class="text-sm">
+                    {{ risk_assessment.description|default:""|linebreaksbr }}
+                </div>
+            </div>
         </div>
     </div>
-    <!--Risk risk_assessment-->
-    <div class="m-4 px-4 py-10 shadow rounded-lg bg-white">
-        <p class="text-lg font-semibold pb-2"> {% trans "Associated Risk scenarios" %} ({{ context|length }}):</p>
+
+    {# Risk Scenarios Section #}
+    <div class="bg-white p-6 mb-8 shadow rounded-lg">
+        <h2 class="text-lg font-semibold mb-4">
+            {% trans "Associated Risk scenarios" %} ({{ context|length }}):
+        </h2>
         {% include 'snippets/ri_list_nested.html' %}
     </div>
-    <!--Risk matrix view-->
-    <div class="m-4 px-4 py-8 shadow rounded-lg bg-white page-break text-sm">
-        <div class="text-xl pb-4 font-semibold">{% trans "Risk matrix view" %}</div>
-        <div class="flex space-x-3">
-            <div class="w-1/2 shadow rounded-lg p-6">
-                <h3 class="font-bold p-2 m-2 text-lg">{% trans "Current" %}</h3>
-                {% if pdf %}
-                    {% include 'snippets/risk_matrix.html' with enriched_data=ri_clusters.current %}
-                {% else %}
-                    {% include 'snippets/risk_matrix.html' with data=ri_clusters.current %}
-                {% endif %}
-            </div>
-            <div class="w-1/2 shadow rounded-lg p-6">
-                <h3 class="font-bold p-2 m-2 text-lg">{% trans "Residual" %}</h3>
-                {% if pdf %}
-                    {% include 'snippets/risk_matrix.html' with enriched_data=ri_clusters.residual %}
-                {% else %}
-                    {% include 'snippets/risk_matrix.html' with data=ri_clusters.residual %}
-                {% endif %}
-            </div>
+
+    {# Risk Matrix View Section #}
+    <div class="bg-white p-6 mb-8 shadow rounded-lg page-break">
+        <h2 class="text-xl font-semibold mb-6">{% trans "Risk matrix view" %}</h2>
+
+        {# Current Risk Matrix #}
+        <div class="mb-8 shadow rounded-lg p-6">
+            <h3 class="font-bold text-lg mb-4">{% trans "Current" %}</h3>
+            {% if pdf %}
+                {% include 'snippets/risk_matrix.html' with enriched_data=ri_clusters.current %}
+            {% else %}
+                {% include 'snippets/risk_matrix.html' with data=ri_clusters.current %}
+            {% endif %}
+        </div>
+
+        {# Residual Risk Matrix #}
+        <div class="shadow rounded-lg p-6">
+            <h3 class="font-bold text-lg mb-4">{% trans "Residual" %}</h3>
+            {% if pdf %}
+                {% include 'snippets/risk_matrix.html' with enriched_data=ri_clusters.residual %}
+            {% else %}
+                {% include 'snippets/risk_matrix.html' with data=ri_clusters.residual %}
+            {% endif %}
         </div>
     </div>
 
-    <div class="m-4 px-4 text-xs">
+    {# Risk Legend #}
+    <div class="p-4">
         {% include 'snippets/risk_legend.html' %}
     </div>
-
 </main>
diff --git a/backend/core/templates/snippets/req_node.html b/backend/core/templates/snippets/req_node.html
index d90c910fe..5953d0304 100644
--- a/backend/core/templates/snippets/req_node.html
+++ b/backend/core/templates/snippets/req_node.html
@@ -1,90 +1,111 @@
 {% load i18n core_extras %}
 
 <div class="node">
-    {% if not node.requirement_node.assessable %}
-        <div class="font-semibold">
-            {{ node.requirement_node.display_long }}
+  {% if not node.requirement_node.assessable %}
+  <div class="font-semibold">{{ node.requirement_node.display_long }}</div>
+  {% if node.bar_graph %} {% bar_graph assessments ancestors
+  node.requirement_node %} {% endif %} {% else %}
+  <div
+    class="flex flex-col shadow-md border rounded-lg px-4 py-2 m-2 ml-0 items-center border-t-2 border-t-{{ node.result_color_class }} border-{{ node.result_color_class }}"
+  >
+    <div class="flex flex-row justify-between w-full">
+      <div class="font-semibold">{{ node.assessments.requirement }}</div>
+      <div class="flex flex-row space-x-2">
+        <div
+          class="text-center rounded-lg whitespace-nowrap px-2 py-1 text-{{ node.status_color_class }}"
+        >
+          {{ node.status }}
         </div>
-        {% if node.bar_graph %}
-            {% bar_graph assessments ancestors node.requirement_node %}
-        {% endif %}
-    {% else %}
-        <div class='flex flex-col shadow-md border rounded-lg px-4 py-2 m-2 ml-0 items-center border-t-2 border-t-{{ node.result_color_class }} border-{{ node.result_color_class }}'>
-            <div class='flex flex-row justify-between w-full'>
-                <div class='font-semibold'>{{ node.assessments.requirement }}</div>
-                <div class='flex flex-row space-x-2'>
-                    <div class='text-center rounded-lg whitespace-nowrap px-2 py-1 text-{{ node.status_color_class }}'>{{ node.status }}</div>
-                    <div class='text-white text-center rounded-lg whitespace-nowrap px-2 py-1 bg-{{ node.result_color_class }}'>{{ node.result }}</div>
-                    {% if node.assessments.is_scored %}
-                        <div class='text-center whitespace-nowrap px-2 py-1'>{{ node.assessments.score }}</div>
-                    {% endif %}
-                </div>
-            </div>
-            {% if node.assessments.requirement.description %}
-                <div class='text-left w-full'>{{ node.assessments.requirement.get_description_translated }}</div>
-            {% endif %}
-            {% if node.assessments.answer %}
-                {% for question in node.assessments.answer.questions %}
-                    <div class='text-left w-full'><p class="font-semibold">{{ question.text }}</p>
-                        {% if question.answer %}
-                            <span style="color: indigo;">{{ question.answer }}</span>
-                        {% else %}
-                            <span style="color: gray;"> {% trans "No answer" %}</span>
-                        {% endif %}
-                    </div>
-                {% endfor %}
-            {% endif %}
-            {% if node.assessments.observation %}
-                <div class='text-left w-full'><p class="font-semibold">{% trans "Observation:" %}<p> {{ node.assessments.observation }}</div>
-            {% endif %}
+        <div
+          class="text-white text-center rounded-lg whitespace-nowrap px-2 py-1 bg-{{ node.result_color_class }}"
+        >
+          {{ node.result }}
+        </div>
+        {% if node.assessments.is_scored %}
+        <div class="text-center whitespace-nowrap px-2 py-1">
+          {{ node.assessments.score }}
         </div>
-        {% if node.bar_graph %}
-            {% bar_graph assessments ancestors node.requirement_node %}
-        {% endif %}
-        {% if node.direct_evidences %}
-            <div class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 direct_evidences_block">
-                <div class="grid grid-cols-2 justify-items-left font-semibold">
-                    <div>{% trans "Associated evidence:" %}</div>
-                </div>
-                {% for evidence in node.direct_evidences %}
-                    {% if evidence.attachment %}
-                        <li><a class="text-indigo-700 hover:text-indigo-500" target="_blank" href="evidences/{{ evidence.attachment }}">{{ evidence.name }}</a></li>
-                    {% else %}
-                        <li>{{ evidence.name }}</li>
-                    {% endif %}
-                {% endfor %}
-            </div>
-        {% endif %}
-        {% if node.applied_controls %}
-            <div class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 applied_controls_block">
-                <div class="grid grid-cols-2 justify-items-left font-semibold">
-                    <div>{% trans "Applied controls:" %}</div>
-                    <div>{% trans "Evidence of applied controls:" %}</div>
-                </div>
-                <div class="flex flex-row">
-                    <div class="flex flex-col items-left w-1/2">
-                        {% for control in node.applied_controls %}
-                            <li>{{ control.measure.name }}: {{ control.measure.get_result_display }}</li>
-                        {% endfor %}
-                    </div>
-                    <div class="flex flex-col items-left w-1/2">
-                        {% for control in node.applied_controls %}
-                            {% for evidence in control.evidences %}
-                                {% if evidence.attachment %}
-                                    <li><a class="text-indigo-700 hover:text-indigo-500" target="_blank" href="evidences/{{ evidence.attachment }}">{{ control.measure.name }}/{{ evidence.name }}</a></li>
-                                {% else %}
-                                    <li>{{ evidence.name }}</li>
-                                {% endif %}
-                            {% endfor %}
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
         {% endif %}
+      </div>
+    </div>
+    {% if node.assessments.requirement.description %}
+    <div class="text-left w-full">
+      {{ node.assessments.requirement.get_description_translated }}
+    </div>
+    {% endif %} {% if node.assessments.answer %} {% for question in
+    node.assessments.answer.questions %}
+    <div class="text-left w-full">
+      <p class="font-semibold">{{ question.text }}</p>
+      {% if question.answer %}
+      <span style="color: indigo">{{ question.answer }}</span>
+      {% else %}
+      <span style="color: gray"> {% trans "No answer" %}</span>
+      {% endif %}
+    </div>
+    {% endfor %} {% endif %} {% if node.assessments.observation %}
+    <div class="text-left w-full">
+      <p class="font-semibold">{% trans "Observation:" %}</p>
+      <p>{{ node.assessments.observation }}</p>
+    </div>
     {% endif %}
-    <div id="children-of-{{ node.requirement_node.urn }}">
-        {% for child_node in node.children %}
-            {% include "snippets/req_node.html" with node=child_node %}
+  </div>
+  {% if node.bar_graph %} {% bar_graph assessments ancestors
+  node.requirement_node %} {% endif %} {% if node.direct_evidences %}
+  <div
+    class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 direct_evidences_block"
+  >
+    <div class="grid grid-cols-2 justify-items-left font-semibold">
+      <div>{% trans "Associated evidence:" %}</div>
+    </div>
+    {% for evidence in node.direct_evidences %} {% if evidence.attachment %}
+    <li>
+      <a
+        class="text-indigo-700 hover:text-indigo-500"
+        target="_blank"
+        href="evidences/{{ evidence.attachment }}"
+        >{{ evidence.name }}</a
+      >
+    </li>
+    {% else %}
+    <li>{{ evidence.name }}</li>
+    {% endif %} {% endfor %}
+  </div>
+  {% endif %} {% if node.applied_controls %}
+  <div
+    class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 applied_controls_block"
+  >
+    <div class="grid grid-cols-2 justify-items-left font-semibold">
+      <div>{% trans "Applied controls:" %}</div>
+      <div>{% trans "Evidence of applied controls:" %}</div>
+    </div>
+    <div class="flex flex-row">
+      <div class="flex flex-col items-left w-1/2">
+        {% for control in node.applied_controls %}
+        <li>
+          {{ control.measure.name }}: {{ control.measure.get_result_display }}
+        </li>
         {% endfor %}
+      </div>
+      <div class="flex flex-col items-left w-1/2">
+        {% for control in node.applied_controls %} {% for evidence in
+        control.evidences %} {% if evidence.attachment %}
+        <li>
+          <a
+            class="text-indigo-700 hover:text-indigo-500"
+            target="_blank"
+            href="evidences/{{ evidence.attachment }}"
+            >{{ control.measure.name }}/{{ evidence.name }}</a
+          >
+        </li>
+        {% else %}
+        <li>{{ evidence.name }}</li>
+        {% endif %} {% endfor %} {% endfor %}
+      </div>
     </div>
+  </div>
+  {% endif %} {% endif %}
+  <div id="children-of-{{ node.requirement_node.urn }}">
+    {% for child_node in node.children %} {% include "snippets/req_node.html"
+    with node=child_node %} {% endfor %}
+  </div>
 </div>
diff --git a/backend/core/templates/snippets/ri_list_nested.html b/backend/core/templates/snippets/ri_list_nested.html
index 59ee6d103..bef0fd332 100644
--- a/backend/core/templates/snippets/ri_list_nested.html
+++ b/backend/core/templates/snippets/ri_list_nested.html
@@ -1,100 +1,151 @@
 {% load i18n %}
-{% load static tailwind_tags %}
 
 <style>
-    th, td {
-        border: 1px solid black;
-    }
+  th,
+  td {
+    border: 1px solid #e2e8f0;
+    padding: 8px;
+  }
+
+  th {
+    background-color: #f8fafc;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 11px;
+    color: #475569;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f8fafc; /* for both the scenarios and matrices */
+  }
+
+  .risk-level {
+    padding: 4px 8px;
+    border-radius: 4px;
+    text-align: center;
+  }
+
+  tbody tr {
+    page-break-inside: avoid;
+  }
+
+  .cell-content {
+    max-width: 200px;
+    word-wrap: break-word;
+  }
 </style>
 
 <table class="w-full p-4 leading-normal">
-    <thead>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "ID" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Name" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Threats" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Existing controls" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Current risk level" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Residual risk level" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Status" %}
-        </th>
-        <th class="px-4 py-3 border-b border-gray-200 bg-white text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-            {% trans "Suggested measures" %}
-        </th>
-    </thead>
-    <tbody>
-        {% for scenario in scenarios %}
-            <tr class="hover:text-indigo-500 cursor-pointer hover:scale-[0.99] duration-500 text-center">
-                <td class="px-5 py-5 border-b border-gray-200 text-sm">
-                    {{ scenario.ref_id }}
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    <div class="flex items-center">
-
-                        <div class="ml-0">
-                            <p id="scenario{{ scenario.id }}" class="text-md font-semibold whitespace-no-wrap">
-                                {{ scenario.name }}
-                            </p>
-                        </div>
-                    </div>
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    {% for threat in scenario.threats.all %}
-                        <p class="whitespace-no-wrap">
-                            {{ threat.get_name_translated }}
-                        </p>
-                    {% empty %}
-                        --
-                    {% endfor %}
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    <p class="max-h-64 max-w-full box overflow-hidden">{{ scenario.existing_controls|linebreaksbr }}</p>
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    <p class="flex justify-center whitespace-no-wrap rounded" style="background-color: {{ scenario.get_current_risk.hexcolor }}">
-                        {{ scenario.get_current_risk.name }}
-                    </p>
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    <p class="flex justify-center whitespace-no-wrap rounded" style="background-color: {{ scenario.get_residual_risk.hexcolor }}">
-                        {{ scenario.get_residual_risk.name }}
-                    </p>
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    {{ scenario.get_treatment_display }}
-                </td>
-                <td class="px-4 py-5 border-b border-gray-200 text-sm">
-                    <ul class="list-disc space-y-4 ml-4">
-                        {% for measure in scenario.applied_controls.all %}
-                            <li class="text-gray-900">
-                                <p
-                                    class="text-gray-900 text-md font-semibold whitespace-no-wrap hover:text-blue-400">
-                                    {{ measure }}
-                                </p>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </td>
-            </tr>
-            {% empty %}
-            <tr class="text-black p-4 text-center">
-                <td colspan="8" class="py-2">
-                    <i class="inline fas fa-exclamation-triangle"></i>
-                    <p class="inline test-gray-900">{% trans "No scenario found." %}</p>
-                </td>
-            </tr>
-        {% endfor %}
-    </tbody>
+  <thead>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "ID" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Name" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Threats" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Existing controls" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Current risk level" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Residual risk level" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Status" %}
+    </th>
+    <th
+      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+    >
+      {% trans "Suggested measures" %}
+    </th>
+  </thead>
+  <tbody>
+    {% for scenario in scenarios %}
+    <tr class="">
+      <td class="px-5 py-5 border-b border-gray-200 text-sm">
+        {{ scenario.ref_id }}
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        <div class="flex items-center">
+          <div class="ml-0">
+            <p
+              id="scenario{{ scenario.id }}"
+              class="text-md font-semibold whitespace-no-wrap"
+            >
+              {{ scenario.name }}
+            </p>
+          </div>
+        </div>
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        {% for threat in scenario.threats.all %}
+        <p class="whitespace-no-wrap">{{ threat.get_name_translated }}</p>
+        {% empty %} -- {% endfor %}
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        <p class="max-h-64 max-w-full box overflow-hidden">
+          {{ scenario.existing_controls|linebreaksbr }}
+        </p>
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        <p
+          class="flex justify-center whitespace-no-wrap rounded"
+          style="background-color: {{ scenario.get_current_risk.hexcolor }}"
+        >
+          {{ scenario.get_current_risk.name }}
+        </p>
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        <p
+          class="flex justify-center whitespace-no-wrap rounded"
+          style="background-color: {{ scenario.get_residual_risk.hexcolor }}"
+        >
+          {{ scenario.get_residual_risk.name }}
+        </p>
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        {{ scenario.get_treatment_display }}
+      </td>
+      <td class="px-4 py-5 border-b border-gray-200 text-sm">
+        <ul class="list-disc space-y-4 ml-4">
+          {% for measure in scenario.applied_controls.all %}
+          <li class="text-gray-900">
+            <p
+              class="text-gray-900 text-md font-semibold whitespace-no-wrap hover:text-blue-400"
+            >
+              {{ measure }}
+            </p>
+          </li>
+          {% endfor %}
+        </ul>
+      </td>
+    </tr>
+    {% empty %}
+    <tr class="text-black p-4 text-center">
+      <td colspan="8" class="py-2">
+        <i class="inline fas fa-exclamation-triangle"></i>
+        <p class="inline test-gray-900">{% trans "No scenario found." %}</p>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
 </table>
diff --git a/backend/core/templates/snippets/risk_legend.html b/backend/core/templates/snippets/risk_legend.html
index 72f20cdea..cad8025b1 100644
--- a/backend/core/templates/snippets/risk_legend.html
+++ b/backend/core/templates/snippets/risk_legend.html
@@ -1,21 +1,19 @@
 {% load i18n core_extras %}
 
 <div class="w-full flex flex-col justify-start">
-    <h3 class="flex font-semibold p-2 m-2 text-md">{% trans "Risk levels" %}</h3>
-    <div class="flex justify-start mx-2">
-        <table class="w-3/4 border-separate">
-            {% for risk in risk_matrix.parse_json_translated.risk %}
-                <tr class="row">
-                    <td class="w-12 h-12 text-left border-4 border-white" style="background-color: {{ risk.hexcolor }}">
-                    </td>
-                    <td class="col font-medium">
-                        {{ risk.name }}
-                    </td>
-                    <td class="col italic">
-                        {{ risk.description|linebreaksbr }}
-                    </td>
-                </tr>
-            {% endfor %}
-        </table>
-    </div>
+  <h3 class="flex font-semibold p-2 m-2 text-md">{% trans "Risk levels" %}</h3>
+  <div class="flex justify-start mx-2">
+    <table class="w-3/4 border-separate">
+      {% for risk in risk_matrix.parse_json_translated.risk %}
+      <tr class="row">
+        <td
+          class="w-12 h-12 text-left border-4 border-white"
+          style="background-color: {{ risk.hexcolor }}"
+        ></td>
+        <td class="col font-medium">{{ risk.name }}</td>
+        <td class="col italic">{{ risk.description|linebreaksbr }}</td>
+      </tr>
+      {% endfor %}
+    </table>
+  </div>
 </div>