diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
index 43160953..cdf51c71 100644
--- a/packages/common/src/scss/components/_BlockRichTable.scss
+++ b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -1,6 +1,3 @@
-// needed to @extend .BlockText
-@import '@explorer-1/common/src/scss/components/BlockText';
-
 .BlockRichTable {
   table {
     @apply border-gray-light-mid border-t border-b border-collapse w-full;
@@ -18,41 +15,12 @@
     @apply text-gray-dark;
   }
 
-  tbody tr {
-    @apply table-row bg-white border-t border-gray-light-mid;
-  }
-
-  .rich_text,
-  .link {
-    @extend .BlockText;
-  }
-  // Below selectors are extra-specific to ensure they take priority over the @extend-ed .BlockText styles.
-  td.rich_text p {
-    @apply mb-4;
-  }
-
-  td.rich_text ol {
-    @apply pl-6 mb-4;
-  }
-
-  td.rich_text ul {
-    @apply pl-6 mb-4 list-disc;
-
-    li {
-      @apply p-0;
+  tbody {
+    tr {
+      @apply table-row bg-white border-t border-gray-light-mid;
     }
-
-    li::before {
-      @apply hidden;
+    td {
+      @apply p-3 lg:p-5 align-top;
     }
   }
-
-  td.rich_text ul li,
-  td.rich_text ol li {
-    @apply my-1;
-  }
-
-  td.rich_text hr {
-    @apply my-4;
-  }
 }
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
index 2eeeb8d6..c6b85ce3 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -1,4 +1,5 @@
 import BlockRichTable from './BlockRichTable.vue'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
 
 export default {
   title: 'Components/Blocks/BlockRichTable',
@@ -8,63 +9,47 @@ export default {
 
 export const BlockRichTableData = {
   blockType: 'RichTableBlock',
-  table: `{ "data": {
-      "page": {
-        "body": [
-          {
-            "blockType": "RichTableBlock",
-            "tableCaption": "table caption",
-            "tableContent": {
-            "tableHead": [
-                [
-                  {
-                    "text": "1. Learn why we study geology on Earth and other planets"
-                  },
-                  {
-                    "text": "1. Learn why we study geology on Earth and other planets"
-                  }
-                ]
-              ],
-              "tableBody": [
-                [
-                  {
-                    "blockType": "ImageBlock",
-                    "image": {
-                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
-                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
-                    }
-                  },
-                  {
-                    "blockType": "ImageBlock",
-                    "image": {
-                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
-                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
-                    }
-                  }
-                ],
-                [
-                  {
-                    "blockType": "CharBlock",
-                    "value": "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
-                  },
-                  {
-                    "blockType": "CharBlock",
-                    "value": "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
-                  }
-                ]
-              ]
-            }
-          }
-        ],
-        "breadcrumb": null
-      }
-    }
-  }`
+  tableCaption: 'table caption',
+  tableContent: {
+    tableHead: [
+      [
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        },
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        }
+      ]
+    ],
+    tableBody: [
+      [
+        {
+          ...BlockImageData,
+          caption: '<p>My custom caption.</p>',
+          displayCaption: true,
+          blockType: 'ImageBlock'
+        },
+        { ...BlockImageData, blockType: 'ImageBlock' }
+      ],
+      [
+        {
+          blockType: 'CharBlock',
+          value:
+            "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
+        },
+        {
+          blockType: 'CharBlock',
+          value:
+            "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
+        }
+      ]
+    ]
+  }
 }
 
 export const BaseStory = {
   name: 'BlockRichTable',
   args: {
-    data: BlockRichTableData
+    table: BlockRichTableData
   }
 }
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
index 0ef42ff4..40cd07e3 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -1,40 +1,19 @@
 <script lang="ts">
-// eslint-disable vue/no-v-html
-// @ts-nocheck
-import { defineComponent, computed } from 'vue'
-import BlockImage from './../BlockImage/BlockImage.vue'
+import { defineComponent } from 'vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockText from './../BlockText/BlockText.vue'
 
 export default defineComponent({
   name: 'BlockRichTable',
+  components: {
+    BlockImageStandard,
+    BlockText
+  },
   props: {
-    data: {
+    table: {
       type: Object,
       required: true
     }
-  },
-  setup(props) {
-    // Parse the table data from the JSON string
-    const parsedData = computed(() => {
-      try {
-        return JSON.parse(props.data.table)
-      } catch (error) {
-        console.error('Error parsing table data:', error)
-        return null
-      }
-    })
-
-    // Extract the relevant table block
-    const table = computed(() => {
-      if (!parsedData.value || !parsedData.value.data.page.body) {
-        return null
-      }
-
-      return parsedData.value.data.page.body.find((block) => block.blockType === 'RichTableBlock')
-    })
-
-    return {
-      table
-    }
   }
 })
 </script>
@@ -42,13 +21,13 @@ export default defineComponent({
 <template>
   <div
     v-if="table"
-    class="BlockRichTable"
+    class="BlockRichTable BlockText -small text-body-sm"
   >
     <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
       <table
         class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
       >
-        <thead>
+        <thead v-if="table.tableContent.tableHead?.length">
           <tr>
             <th
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
@@ -60,7 +39,7 @@ export default defineComponent({
             </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody v-if="table.tableContent.tableBody?.length">
           <tr
             v-for="(row, rowIndex) in table.tableContent.tableBody"
             :key="rowIndex"
@@ -68,43 +47,39 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid p-0"
+              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
             >
               <template v-if="cell.blockType === 'CharBlock'">
-                <p class="text-sm text-left my-2 px-3 lg:px-5">
+                <p class="">
                   {{ cell.value }}
                 </p>
               </template>
               <template v-else-if="cell.blockType === 'RichTextBlock'">
-                <div class="text-xs text-left my-2 px-3 lg:px-5">{{ cell.value }}</div>
+                <BlockText
+                  variant="small"
+                  :text="cell.value"
+                />
               </template>
               <template v-else-if="cell.blockType === 'ImageBlock'">
-                <BlockImage
-                  :data="cell.value"
-                  :full-bleed="true"
-                ></BlockImage>
-                <figure>
-                  <img
-                    :src="cell.image.url"
-                    :alt="cell.image.caption"
-                    class="w-full h-auto"
-                  />
-                  <figcaption class="text-xs text-left my-2 px-3 lg:px-5">
-                    {{ cell.image.caption }}
-                  </figcaption>
-                </figure>
+                <BlockImageStandard
+                  class=""
+                  :data="cell.image"
+                  :display-caption="cell.displayCaption"
+                  :caption="cell.caption"
+                  :constrain="cell.constrain"
+                />
               </template>
             </td>
           </tr>
         </tbody>
       </table>
-      <div class="flex w-full">
-        <caption class="text-center font-bold my-2 px-3 lg:px-5">
+      <template v-if="table.tableCaption">
+        <caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
           {{
             table.tableCaption
           }}
         </caption>
-      </div>
+      </template>
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 472cea4c..a3749340 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -188,7 +188,7 @@
         indent="col-3"
         class="lg:mb-18 mb-10"
       >
-        <BlockRichTable :data="block" />
+        <BlockRichTable :table="block" />
       </LayoutHelper>
 
       <LayoutHelper