diff --git a/admin/tool/dataprivacy/styles.css b/admin/tool/dataprivacy/styles.css
index 4a3c9b9d244..836fac56232 100644
--- a/admin/tool/dataprivacy/styles.css
+++ b/admin/tool/dataprivacy/styles.css
@@ -35,4 +35,12 @@ dd a.contactdpo {
 
 .context-level-view {
     margin: 1em;
-}
\ No newline at end of file
+}
+
+[data-region="purposes"] .col-name-description {
+    width: 25%;
+}
+
+[data-region="categories"] .col-description {
+    width: 50%;
+}
diff --git a/admin/tool/dataprivacy/templates/categories.mustache b/admin/tool/dataprivacy/templates/categories.mustache
index 523a56b1990..ebe9ba577b8 100644
--- a/admin/tool/dataprivacy/templates/categories.mustache
+++ b/admin/tool/dataprivacy/templates/categories.mustache
@@ -56,12 +56,12 @@
             {{#pix}}t/add, moodle, {{#str}}addcategory, tool_dataprivacy{{/str}}{{/pix}}
         </button>
     </div>
-    <table class="generaltable fullwidth">
+    <table class="table table-striped table-hover">
         <caption class="accesshide">{{#str}}categorieslist, tool_dataprivacy{{/str}}</caption>
         <thead>
             <tr>
                 <th scope="col">{{#str}}name{{/str}}</th>
-                <th scope="col">{{#str}}description{{/str}}</th>
+                <th scope="col" class="col-description">{{#str}}description{{/str}}</th>
                 <th scope="col">{{#str}}actions{{/str}}</th>
             </tr>
         </thead>
diff --git a/admin/tool/dataprivacy/templates/purposes.mustache b/admin/tool/dataprivacy/templates/purposes.mustache
index b0d09896765..e331f7f811f 100644
--- a/admin/tool/dataprivacy/templates/purposes.mustache
+++ b/admin/tool/dataprivacy/templates/purposes.mustache
@@ -63,26 +63,33 @@
             {{#pix}}t/add, moodle, {{#str}}addpurpose, tool_dataprivacy{{/str}}{{/pix}}
         </button>
     </div>
-    <table class="generaltable fullwidth">
+    <table class="table table-striped table-hover">
         <caption class="accesshide">{{#str}}purposeslist, tool_dataprivacy{{/str}}</caption>
         <thead>
-            <tr style="display: flex;">
-                <th scope="col" class="col-md-2">{{#str}}name{{/str}}</th>
-                <th scope="col" class="col-md-3">{{#str}}description{{/str}}</th>
-                <th scope="col" class="col-md-2">{{#str}}lawfulbases, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-2">{{#str}}sensitivedatareasons, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}retentionperiod, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}protected, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}actions{{/str}}</th>
+            <tr>
+                <th scope="col" class="col-name-description">{{#str}}name{{/str}}</th>
+                <th scope="col">{{#str}}lawfulbases, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}sensitivedatareasons, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}retentionperiod, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}protected, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}actions{{/str}}</th>
             </tr>
         </thead>
         <tbody>
             {{#purposes}}
             <tr data-purposeid="{{id}}">
-                <td class="col-md-2">{{{name}}}</td>
-                <td class="col-md-3">{{{description}}}</td>
-                <td class="col-md-2">
-                    <ul>
+                <td>
+                    <dl>
+                        <dt>
+                            {{{name}}}
+                        </dt>
+                        <dd>
+                            {{{description}}}
+                        </dd>
+                    </dl>
+                </td>
+                <td>
+                    <ul class="list-unstyled">
                         {{#formattedlawfulbases}}
                             <li>
                                 <span>{{name}}{{# pix }} i/info, core, {{description}} {{/ pix }}</span>
@@ -90,8 +97,8 @@
                         {{/formattedlawfulbases}}
                     </ul>
                 </td>
-                <td class="col-md-2">
-                    <ul>
+                <td>
+                    <ul class="list-unstyled">
                         {{#formattedsensitivedatareasons}}
                             <li>
                                 <span>{{name}}{{# pix }} i/info, core, {{description}} {{/ pix }}</span>
@@ -99,8 +106,8 @@
                         {{/formattedsensitivedatareasons}}
                     </ul>
                 </td>
-                <td class="col-md-1">{{formattedretentionperiod}}</td>
-                <td class="col-md-1">
+                <td>{{formattedretentionperiod}}</td>
+                <td>
                     {{#protected}}
                         {{#pix}}i/checked, core, {{#str}}yes{{/str}}{{/pix}}
                     {{/protected}}
@@ -108,7 +115,7 @@
                         {{#str}}no{{/str}}
                     {{/protected}}
                 </td>
-                <td class="col-md-1">
+                <td>
                     {{#actions}}
                         {{> core/action_menu}}
                     {{/actions}}