diff --git a/api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css b/api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css
index 463069433..d6170e0a6 100644
--- a/api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css
+++ b/api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css
@@ -87,12 +87,12 @@ h6.numbered {
 
 
 /* Increment figure counter */
-figcaption {
+figure:has(figcaption) {
   counter-increment: figure-counter;
 }
 
 /* Increment table counter */
-caption {
+table:has(caption) {
   counter-increment: table-counter;
 }
 
diff --git a/api/src/reportcreator_api/tests/test_rendering.py b/api/src/reportcreator_api/tests/test_rendering.py
index 09e4e0fc3..e9fdaf8b8 100644
--- a/api/src/reportcreator_api/tests/test_rendering.py
+++ b/api/src/reportcreator_api/tests/test_rendering.py
@@ -181,13 +181,13 @@ def test_comma_and_join(self, props, items, html):
         ('<ref to="h1-numbered-appendix" />', '<a href="#h1-numbered-appendix" class="ref ref-heading ref-appendix ref-appendix-level1"><span class="ref-title">H1 appendix</span></a>'),
         ('<ref to="h1.1-numbered-appendix" />', '<a href="#h1.1-numbered-appendix" class="ref ref-heading ref-appendix ref-appendix-level2"><span class="ref-title">H1.1 appendix</span></a>'),
         ('<ref to="h1-numbered">title</ref>', '<a href="#h1-numbered" class="ref"><span class="ref-title">title</span></a>'),
-        ('<ref to="fig1" />', '<a href="#fig1-caption" class="ref ref-figure"><span class="ref-title">caption1</span></a>'),
-        ('<ref to="fig2-img" />', '<a href="#fig2-caption" class="ref ref-figure"><span class="ref-title">caption2</span></a>'),
-        ('<ref to="fig3-caption" />', '<a href="#fig3-caption" class="ref ref-figure"><span class="ref-title">caption3</span></a>'),
-        ('<ref to="fig1">title</ref>', '<a href="#fig1-caption" class="ref"><span class="ref-title">title</span></a>'),
-        ('<ref to="table1" />', '<a href="#table1-caption" class="ref ref-table"><span class="ref-title">caption1</span></a>'),
-        ('<ref to="table2-caption" />', '<a href="#table2-caption" class="ref ref-table"><span class="ref-title">caption2</span></a>'),
-        ('<ref to="table1">title</ref>', '<a href="#table1-caption" class="ref"><span class="ref-title">title</span></a>'),
+        ('<ref to="fig1" />', '<a href="#fig1" class="ref ref-figure"><span class="ref-title">caption1</span></a>'),
+        ('<ref to="fig2-img" />', '<a href="#fig2" class="ref ref-figure"><span class="ref-title">caption2</span></a>'),
+        ('<ref to="fig3-caption" />', '<a href="#fig3" class="ref ref-figure"><span class="ref-title">caption3</span></a>'),
+        ('<ref to="fig1">title</ref>', '<a href="#fig1" class="ref"><span class="ref-title">title</span></a>'),
+        ('<ref to="table1" />', '<a href="#table1" class="ref ref-table"><span class="ref-title">caption1</span></a>'),
+        ('<ref to="table2-caption" />', '<a href="#table2" class="ref ref-table"><span class="ref-title">caption2</span></a>'),
+        ('<ref to="table1">title</ref>', '<a href="#table1" class="ref"><span class="ref-title">title</span></a>'),
         ('<ref to="other">title</ref>', '<a href="#other" class="ref"><span class="ref-title">title</span></a>'),
     ])
     def test_ref_rendering(self, template, expected):
@@ -262,9 +262,9 @@ def test_lof_rendering(self):
                 </ul>
             </section>
         </list-of-figures>
-        <figure><img src="/assets/name/image.png" /><figcaption id="fig1">caption1</figcaption></figure>
-        <figure><img src="/assets/name/image.png" /><figcaption id="fig2">caption2</figcaption></figure>
-        <figure><img src="/assets/name/image.png" /><figcaption id="fig3">caption3</figcaption></figure>
+        <figure id="fig1"><img src="/assets/name/image.png" /><figcaption>caption1</figcaption></figure>
+        <figure id="fig2"><img src="/assets/name/image.png" /><figcaption>caption2</figcaption></figure>
+        <figure id="fig3"><img src="/assets/name/image.png" /><figcaption>caption3</figcaption></figure>
         """)
         assertHTMLEqual(self.extract_html_part(html, '<ul>', '</ul>'), """
         <ul>
@@ -286,8 +286,8 @@ def test_lot_rendering(self):
                 </ul>
             </section>
         </list-of-tables>
-        <table><caption id="table1">caption1</caption></table>
-        <table><caption id="table2">caption2</caption></table>
+        <table id="table1"><caption>caption1</caption></table>
+        <table id="table2"><caption>caption2</caption></table>
         """)
         assertHTMLEqual(self.extract_html_part(html, '<ul>', '</ul>'), """
         <ul>
diff --git a/docs/docs/designer/figures.md b/docs/docs/designer/figures.md
index a4f7addda..ccba953c6 100755
--- a/docs/docs/designer/figures.md
+++ b/docs/docs/designer/figures.md
@@ -51,7 +51,7 @@ html {
   counter-reset: figure-counter;
 }
 
-figcaption::before {
+figure:has(figcaption) {
     counter-increment: figure-counter;
     content: "Figure " counter(figure-counter) ": ";
 }
diff --git a/docs/docs/designer/tables.md b/docs/docs/designer/tables.md
index 552805909..57233196c 100755
--- a/docs/docs/designer/tables.md
+++ b/docs/docs/designer/tables.md
@@ -74,9 +74,11 @@ html {
   counter-reset: table-counter;
 }
 
-table caption::before {
+table:has(caption) {
     counter-increment: table-counter;
-    content: "Table " counter(table-counter) ": ";
+}
+caption::before {
+  content: "Table " counter(table-counter) " - ";
 }
 ```
 
diff --git a/rendering/src/components/Ref.vue b/rendering/src/components/Ref.vue
index cb6ffcc55..faec75063 100644
--- a/rendering/src/components/Ref.vue
+++ b/rendering/src/components/Ref.vue
@@ -2,9 +2,7 @@
   <a :href="'#' + (refEl?.id || toId)"  :class="refClasses">
     <span class="ref-title">
       <slot name="default">
-        <template v-if="refEl && !error">
-          {{ refEl.getAttribute('data-toc-title') || refEl.textContent }}
-        </template>
+        <template v-if="refTitle">{{ refTitle }}</template>
       </slot>
     </span>
   </a>
@@ -48,14 +46,33 @@ const refClasses = computed(() => {
       } else {
         out.push('ref-heading');
       }
-    } else if (refEl.value.tagName === 'FIGCAPTION') {
+    } else if (['FIGCAPTION', 'FIGURE'].includes(refEl.value.tagName)) {
       out.push('ref-figure');
-    } else if (refEl.value.tagName === 'CAPTION') {
+    } else if (['CAPTION', 'TABLE'].includes(refEl.value.tagName)) {
       out.push('ref-table');
     }
   }
   return out;
 });
+const refTitle = computed(() => {
+  if (slots.default || !refEl.value || error.value) {
+    return null;
+  }
+
+  const titleAttr = refEl.value.getAttribute('data-toc-title');
+  if (titleAttr) {
+    return titleAttr
+  }
+
+  let titleEl = refEl.value;
+  if (titleEl.tagName === 'FIGURE') {
+    titleEl = titleEl.querySelector('figcaption');
+  } else if (titleEl.tagName === 'TABLE') {
+    titleEl = titleEl.querySelector('caption');
+  }
+
+  return titleEl.textContent;
+});
 
 
 function updateReference() {
@@ -89,8 +106,19 @@ function updateReference() {
       return;
     }
   }
-  if (refEl.value.tagName === 'FIGCAPTION' && !refEl.value.id) {
-    refEl.value.setAttribute('id', uuidv4());
+  if (refEl.value.tagName === 'FIGCAPTION') {
+    // If possible, reference the figure instead of the caption
+    const figureEl = refEl.value.closest('figure');
+    if (figureEl) {
+      if (!figureEl.id) {
+        figureEl.setAttribute('id', uuidv4());
+      }
+      refEl.value = figureEl;
+    } else {
+      if (!refEl.value.id) {
+        refEl.value.setAttribute('id', uuidv4());
+      }
+    }
   }
 
   // Check table reference
@@ -104,12 +132,23 @@ function updateReference() {
       return;
     }
   }
-  if (refEl.value.tagName === 'CAPTION' && !refEl.value.id) {
-    refEl.value.setAttribute('id', uuidv4());
+  if (refEl.value.tagName === 'CAPTION') {
+    // If possible, reference the table instead of the caption
+    const tableEl = refEl.value.closest('table');
+    if (tableEl) {
+      if (!tableEl.id) {
+        tableEl.setAttribute('id', uuidv4());
+      }
+      refEl.value = tableEl;
+    } else {
+      if (!refEl.value.id) {
+        refEl.value.setAttribute('id', uuidv4());
+      }
+    }
   }
 
   // Check heading reference
-  const tagNames = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'FIGCAPTION', 'CAPTION'];
+  const tagNames = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'FIGURE', 'FIGCAPTION', 'TABLE', 'CAPTION'];
   if (!tagNames.map(t => t.toUpperCase()).includes(refEl.value.tagName) && !slots.default) {
     error.value = {
       message: 'Invalid reference',