diff --git a/packages/fe/assets/scss/main.scss b/packages/fe/assets/scss/main.scss
index cdebed5d..4ea193f5 100644
--- a/packages/fe/assets/scss/main.scss
+++ b/packages/fe/assets/scss/main.scss
@@ -220,6 +220,7 @@ h6, .h6 {
   line-height: 1.3;
   font-weight: 500;
   text-transform: none;
+  margin-bottom: toRem(18);
 }
 
 h1, .h1 {
@@ -319,31 +320,6 @@ p, .p1 {
 }
 
 .markdown {
-  h1, h2, h3, p, ul, ol, pre {
-    + h2, + h3 {
-      margin-top: 3.75rem;
-    }
-  }
-  h1, h2, h3 {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-    + ul, + ol {
-      margin-top: 2rem;
-    }
-  }
-  p {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-  a {
-    color: darkorange;
-    font-weight: 600;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
   pre,
   code {
     font-family: $font_Code;
diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss
index da3dae79..2a3683ce 100644
--- a/packages/fe/assets/scss/variables.scss
+++ b/packages/fe/assets/scss/variables.scss
@@ -28,6 +28,10 @@ $athensGray: #E7E9ED;
 $capeCod: #3C4748;
 $grayNurse2: #E0E7E0;
 $dodgerBlue: #3DA2FF;
+$blue: #001AFF;
+$neptune: #74C3B5;
+$iron: #DDDFE3;
+
 
 // ----------------------------------------------------------------- Breakpoints
 $breakpoint_Tiny: 25.9375rem; // 415px
@@ -57,7 +61,7 @@ $duration: 300ms;
   width: 2.1875rem;
   height: 2.1875rem;
   border-radius: 50%;
-  border: solid 1px #DDDFE3;
+  border: solid 1px $iron;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -102,7 +106,7 @@ $duration: 300ms;
 }
 
 @mixin focusBoxShadow {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($dodgerBlue, 0.5) !important;
 }
 
 @mixin focusBoxShadowSmall {
@@ -249,6 +253,13 @@ $duration: 300ms;
   @return math.div($px-vw * 100vw, $base-vw);
 }
 
+@mixin truncate($rowCount) {
+  display: -webkit-box;
+  -webkit-line-clamp: $rowCount;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 // ------------------------------------------------------------------- Animation
 @mixin animation($animate...) {
   $max: length($animate);
diff --git a/packages/fe/components/block-builder.vue b/packages/fe/components/block-builder.vue
index ca408819..37965d70 100644
--- a/packages/fe/components/block-builder.vue
+++ b/packages/fe/components/block-builder.vue
@@ -70,6 +70,7 @@ import TextBlock from '@/components/blocks/text-block'
 import ImageBlock from '@/components/blocks/image-block'
 import MarkdownBlock from '@/components/blocks/markdown-block'
 import CategorySliderBlock from '@/components/blocks/category-slider-block'
+import CardListBlock from '@/components/blocks/card-list-block'
 import CategoryTicker from '@/components/category-ticker'
 import BlockBuilder from '@/components/block-builder'
 
@@ -83,7 +84,8 @@ export default {
     BlockBuilder,
     MarkdownBlock,
     CategorySliderBlock,
-    CategoryTicker
+    CategoryTicker,
+    CardListBlock
   },
 
   props: {
diff --git a/packages/fe/components/blocks/card-list-block.vue b/packages/fe/components/blocks/card-list-block.vue
new file mode 100644
index 00000000..666990b4
--- /dev/null
+++ b/packages/fe/components/blocks/card-list-block.vue
@@ -0,0 +1,75 @@
+<template>
+  <div :class="['card-list-block', `type__${cardType}`]">
+    <div :class="['card-list', direction]">
+
+      <template v-for="(card, i) in cards">
+        <component
+          :is="cardComponent"
+          :key="`card-${i}`"
+          :index="i + 1"
+          :card="card"
+          class="card" />
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script>
+// ====================================================================== Import
+import FAQCard from '@/components/faq-card'
+
+// ====================================================================== Export
+export default {
+  name: 'CardListBlock',
+
+  components: {
+    FAQCard
+  },
+
+  props: {
+    block: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    cardType () {
+      return this.block.card_type
+    },
+    direction () {
+      return ['row', 'column', 'row-reverse', 'column-reverse'].includes(this.block.direction) ? this.block.direction : 'row'
+    },
+    cardComponent () {
+      switch (this.cardType) {
+        case 'faq': return 'FAQCard'
+        default : return 'FAQCard'
+      }
+    },
+    cards () {
+      return this.block.cards
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.card-list {
+  display: flex;
+  &.row {
+    flex-direction: row;
+  }
+  &.column {
+    flex-direction: column;
+  }
+  &.row-reverse {
+    flex-direction: row-reverse;
+  }
+  &.column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+</style>
diff --git a/packages/fe/components/blocks/category-slider-block.vue b/packages/fe/components/blocks/category-slider-block.vue
index 491c7031..c96f0c04 100644
--- a/packages/fe/components/blocks/category-slider-block.vue
+++ b/packages/fe/components/blocks/category-slider-block.vue
@@ -45,9 +45,9 @@
                 :style="{ 'background-image': `url('/images/categories/${slide.label.replaceAll(' ', '-')}.jpg')` }">
               </div>
               <div class="category">
-                <div class="text">
+                <button class="text">
                   {{ `${slide.label} (${slide.count})` }}
-                </div>
+                </button>
               </div>
             </div>
           </div>
diff --git a/packages/fe/components/breadcrumbs.vue b/packages/fe/components/breadcrumbs.vue
index b23f47a5..8c59d942 100644
--- a/packages/fe/components/breadcrumbs.vue
+++ b/packages/fe/components/breadcrumbs.vue
@@ -7,7 +7,6 @@
         v-if="link.url"
         :key="`link-${index}`"
         :button="link"
-        tabindex="0"
         class="breadcrumb link">
       </Button>
 
@@ -46,7 +45,8 @@ export default {
 
   data () {
     return {
-      links: false
+      links: false,
+      hidden: false
     }
   },
 
@@ -60,9 +60,6 @@ export default {
         return this.siteContent.general.breadcrumbs_mapping
       }
       return false
-    },
-    hidden () {
-      return this.links.length < 2
     }
   },
 
@@ -90,9 +87,11 @@ export default {
           url: '/',
           text: breadcrumbs.index
         }]
+        this.hidden = true
         items.forEach((item, i) => {
           const routeName = items.slice(0, i + 1).join('-')
           if (breadcrumbs.hasOwnProperty(routeName)) {
+            this.hidden = false
             const url = `/${items.slice(0, i + 1).join('/')}`
             if (i !== items.length - 1 && routeName !== 'dataset') {
               links.push({ type: 'default', url, text: breadcrumbs[routeName] })
@@ -101,6 +100,7 @@ export default {
             }
           } else {
             if (this.dataset) {
+              // single dataset
               links.push({ text: this.dataset.name })
             }
           }
@@ -130,11 +130,6 @@ export default {
 
 .breadcrumb {
   white-space: nowrap;
-  &.link {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 
 .link,
diff --git a/packages/fe/components/buttons/button-filters.vue b/packages/fe/components/buttons/button-filters.vue
index e547d581..d7d9a7eb 100644
--- a/packages/fe/components/buttons/button-filters.vue
+++ b/packages/fe/components/buttons/button-filters.vue
@@ -9,8 +9,8 @@
 
       <div :class="['button-content', { hide: loadingForced || loading }]">
         <slot />
-        <span v-if="selected">
-          <IconClose class="close" />
+        <span v-if="selected" class="close">
+          <IconClose />
         </span>
       </div>
 
@@ -56,7 +56,7 @@ export default {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   position: relative;
   padding: toRem(7) toRem(15);
   border: 1px solid $rangoonGreen;
@@ -77,11 +77,28 @@ export default {
   &.selected {
     background-color: $rangoonGreen;
     color: white;
-  }
-  :deep(.close) {
-    margin-left: toRem(10);
-    path {
-      fill: white;
+    .close {
+      @include fadeOut;
+      position: absolute;
+      right: 0;
+      border-radius: toRem(20);
+      background: linear-gradient(90deg, rgba(27,31,18,0) 0%, rgba(27,31,18,1) 85%);
+      padding-right: toRem(16);
+      width: 100%;
+      height: 100%;
+      text-align: right;
+      svg {
+        top: toRem(6);
+        position: relative;
+      }
+      path {
+        fill: white;
+      }
+    }
+    &:hover {
+      .close {
+        @include fadeIn;
+      }
     }
   }
   &:not(.selected):hover {
@@ -95,39 +112,37 @@ export default {
       }
     }
   }
-}
-
-.triple-dot-loader,
-.button-content {
-  width: 100%;
-  height: 100%;
-}
 
-::v-deep .triple-dot-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  &.show {
-    opacity: 1;
+  .triple-dot-loader,
+  .button-content {
+    width: 100%;
+    height: 100%;
   }
-  .dot {
-    transition: background-color 150 ease-in-out;
+  .triple-dot-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    &.show {
+      opacity: 1;
+    }
+    .dot {
+      transition: background-color 150 ease-in-out;
+    }
   }
-}
 
-.button-content {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  font-family: $font_Primary;
-  @include fontWeight_Medium;
-  @include fontSize_16;
-  line-height: leading(24, 16);
-  &.hide {
-    opacity: 0;
+  .button-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-family: $font_Primary;
+    @include fontWeight_Medium;
+    @include fontSize_16;
+    line-height: leading(24, 16);
+    &.hide {
+      opacity: 0;
+    }
   }
 }
-
 </style>
diff --git a/packages/fe/components/buttons/button-nav.vue b/packages/fe/components/buttons/button-nav.vue
index 69d8fc29..0654c34a 100644
--- a/packages/fe/components/buttons/button-nav.vue
+++ b/packages/fe/components/buttons/button-nav.vue
@@ -1,7 +1,6 @@
 <template>
   <Button
     v-bind="$props"
-    class="button-x"
     v-on="$listeners">
     <div class="button-content">
 
@@ -73,7 +72,7 @@ export default {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   display: inline-flex;
   flex-direction: row;
   position: relative;
@@ -89,6 +88,11 @@ export default {
   border-bottom-right-radius: toRem(5);
   position: relative;
   cursor: pointer;
+  &:focus-visible {
+    .top-notch {
+      display: none;
+    }
+  }
   &:hover {
     .tooltip {
       display: block;
diff --git a/packages/fe/components/buttons/button-toggle.vue b/packages/fe/components/buttons/button-toggle.vue
index 9a11f03a..b188a5c2 100644
--- a/packages/fe/components/buttons/button-toggle.vue
+++ b/packages/fe/components/buttons/button-toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div
+  <button
     v-bind="$props"
     :class="['button-toggle', `theme__${theme}`]"
     tabindex="0"
@@ -11,13 +11,13 @@
       <slot />
     </div>
 
-  </div>
+  </button>
 </template>
 
 <script>
 // ====================================================================== Export
 export default {
-  name: 'ButtonX',
+  name: 'ButtonToggle',
 
   props: {
     theme: {
diff --git a/packages/fe/components/buttons/button-x.vue b/packages/fe/components/buttons/button-x.vue
index 96b069fa..59a8b52e 100644
--- a/packages/fe/components/buttons/button-x.vue
+++ b/packages/fe/components/buttons/button-x.vue
@@ -55,7 +55,7 @@ export default {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   white-space: nowrap;
   cursor: pointer;
   &:not([disabled]) {
diff --git a/packages/fe/components/buttons/button.vue b/packages/fe/components/buttons/button.vue
index 0d8529bc..5b8f6a61 100644
--- a/packages/fe/components/buttons/button.vue
+++ b/packages/fe/components/buttons/button.vue
@@ -1,18 +1,35 @@
 <template>
-  <component
-    :is="tag"
-    :to="to"
-    :href="href"
-    :target="target"
-    :class="['button', `type__${button.type || ''}`, button.selected ? 'selected' : '', button.icon ? 'has-icon' : '']"
-    :disabled="button.disabled"
-    @click="$emit('clicked')">
-    <span v-if="button.text" class="text">{{ button.text }}</span>
-    <slot />
-    <div v-if="button.tooltip" class="tooltip">
-      {{ button.tooltip }}</div>
-    <ArrowRightIcon v-if="button.icon === 'arrow'" class="arrow-icon icon" />
-  </component>
+  <span class="button">
+    <!-- have to duplicate the component and add a v-if to ensure :focus-visible is properly showing. nuxt gets confused when we have :to and :href as props and end up not showing href for <a> tags -->
+    <component
+      :is="tag"
+      v-if="tag === 'a'"
+      :to="to"
+      :href="href"
+      :target="target"
+      :class="[`type__${button.type || ''}`, button.selected ? 'selected' : '', button.icon ? 'has-icon' : '']"
+      :disabled="button.disabled"
+      @click="$emit('clicked')">
+      <span v-if="button.text" class="text">{{ button.text }}</span>
+      <slot />
+      <div v-if="button.tooltip" class="tooltip">
+        {{ button.tooltip }}</div>
+      <ArrowRightIcon v-if="button.icon === 'arrow'" class="arrow-icon icon" />
+    </component>
+    <component
+      :is="tag"
+      v-if="tag !== 'a'"
+      :to="to"
+      :class="[`type__${button.type || ''}`, button.selected ? 'selected' : '', button.icon ? 'has-icon' : '']"
+      :disabled="button.disabled"
+      @click="$emit('clicked')">
+      <span v-if="button.text" class="text">{{ button.text }}</span>
+      <slot />
+      <div v-if="button.tooltip" class="tooltip">
+        {{ button.tooltip }}</div>
+      <ArrowRightIcon v-if="button.icon === 'arrow'" class="arrow-icon icon" />
+    </component>
+  </span>
 </template>
 
 <script>
diff --git a/packages/fe/components/cid-card.vue b/packages/fe/components/cid-card.vue
index 5161579f..fe1a0a98 100644
--- a/packages/fe/components/cid-card.vue
+++ b/packages/fe/components/cid-card.vue
@@ -13,7 +13,7 @@
 
           <div class="cid-title mobile-row">
             <div v-if="mobile" class="label">
-              CID
+              {{ content.cidLabel }}
             </div>
             <div v-if="!mobile" class="title">
               {{ title }}
@@ -30,34 +30,39 @@
 
           <div v-if="mobile" class="mobile-row">
             <div class="label">
-              Size
+              {{ content.sizeLabel }}
             </div>
             <div class="size">
-              {{ size }}
+              {{ size ? size : '-' }}
             </div>
           </div>
 
           <div class="mobile-row">
             <div v-if="mobile" class="label">
-              Type
+              {{ content.typeLabel }}
             </div>
             <div class="file-types">
-              <div
-                v-for="fileExtension in fileExtensions"
-                :key="fileExtension"
-                class="file-extension">
-                {{ fileExtension }}
-              </div>
+              <template v-if="fileExtensions.length == 0">
+                <span class="show-mobile-only">-</span>
+              </template>
+              <template v-else>
+                <div
+                  v-for="fileExtension in fileExtensions"
+                  :key="fileExtension"
+                  class="file-extension">
+                  {{ fileExtension }}
+                </div>
+              </template>
             </div>
           </div>
 
           <div v-if="!mobile" class="size">
-            {{ size }}
+            {{ size ? size : '-' }}
           </div>
 
           <div class="replicas mobile-row">
             <div v-if="mobile" class="label">
-              No. Replicas
+              {{ content.replicasLabel }}
             </div>
             <div class="replica-list">
               <div
@@ -72,18 +77,22 @@
           </div>
 
           <div class="expiry-date mobile-row">
-            <span class="date label">{{ expiryDate }}</span>
-            <span class="more">{{ mobile ? 'Available Until' : 'Avail. Until' }}</span>
+            <span class="date label">{{ expiryDate ? expiryDate : '-' }}</span>
+            <span class="more">{{ mobile ? content.availUntilLabel : content.availUntilMobileLabel }}</span>
           </div>
 
           <div class="mobile-row">
             <div v-if="mobile" class="label">
-              Status
+              {{ content.statusLabel }}
             </div>
             <div
-              v-if="status"
               :class="['status', status]">
-              {{ status }}
+              <template v-if="!status">
+                <span class="show-mobile-only">-</span>
+              </template>
+              <template v-else>
+                {{ status }}
+              </template>
             </div>
           </div>
 
@@ -95,14 +104,16 @@
               @click="storageProviders.length ? toggleBottomPanel : null">
               {{ open ? 'Less' : 'More' }}
             </ButtonToggle>
+            <!-- desktop -->
+            <CidInspectTooltip :link="zstLink" :btn-text="content.tooltipBtnText" :tooltip-text="content.tooltipText" />
           </div>
 
-          <div v-if="mobile" class="mobile-sp-section-heading">
+          <div v-if="mobile && storageProviders.length" class="mobile-sp-section-heading">
             <div class="heading">
-              Storage Providers
+              {{ content.storageProvidersLabel }}
             </div>
             <div class="subheading">
-              Select a storage provider to view retrieval commands
+              {{ content.storageProvidersSubLabel }}
             </div>
           </div>
 
@@ -140,7 +151,7 @@
                   <div class="info">
                     <div class="info-row">
                       <div class="label">
-                        Deal ID
+                        {{ content.dealIDLabel }}
                       </div>
                       <div class="cell deal-id">
                         {{ sp.dealId }}
@@ -148,7 +159,7 @@
                     </div>
                     <div class="info-row">
                       <div class="label">
-                        Available Until
+                        {{ content.availUntilLabel }}
                       </div>
                       <div class="cell deal-expiry">
                         {{ sp.expiry_date }}
@@ -156,7 +167,7 @@
                     </div>
                     <div class="info-row">
                       <div class="label">
-                        Retrieval Rate
+                        {{ content.retrievalRateLabel }}
                       </div>
                       <div class="cell retrieval">
                         {{ sp.retrieval_rate }}
@@ -164,7 +175,7 @@
                     </div>
                   </div>
                   <div class="retrieval-title">
-                    Retrieval Commands
+                    {{ content.retrievalCommandsLabel }}
                   </div>
                   <div class="retrieval-commands">
                     <div
@@ -190,6 +201,11 @@
         </div>
       </div>
 
+      <!-- mobile -->
+      <div v-if="mobile" class="inspect-file-mobile">
+        <CidInspectTooltip align="right" :btn-text="content.tooltipBtnText" :tooltip-text="content.tooltipText" />
+      </div>
+
     </div>
   </CardCutout>
 </template>
@@ -204,6 +220,7 @@ import Accordion from '@/components/accordion/accordion'
 import AccordionSection from '@/components/accordion/accordion-section'
 import AccordionHeader from '@/components/accordion/accordion-header'
 import AccordionContent from '@/components/accordion/accordion-content'
+import CidInspectTooltip from '@/components/cid-inspect-tooltip'
 
 // ====================================================================== Export
 export default {
@@ -214,6 +231,7 @@ export default {
     ButtonToggle,
     CopyIcon,
     CIDSlider,
+    CidInspectTooltip,
     Accordion,
     AccordionSection,
     AccordionHeader,
@@ -226,6 +244,11 @@ export default {
       required: true,
       default: () => ({})
     },
+    content: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
     mobile: {
       type: Boolean,
       required: false,
@@ -247,6 +270,9 @@ export default {
     hash () {
       return this.cidData.payload_cid
     },
+    zstLink () {
+      return `https://${this.hash}.ipfs.w3s.link/${this.title}`
+    },
     fileExtensions () {
       return [] // this.cidData.fileExtensions.split(',').map(ext => ext.replaceAll(' ', ''))
     },
@@ -287,10 +313,10 @@ export default {
 // ///////////////////////////////////////////////////////////////////// General
 .panel-top {
   transition: border 200ms ease;
-  border-bottom: solid 1px rgba(#DDDFE3, 0);
+  border-bottom: solid 1px rgba($iron, 0);
   &.open,
   &.mobile {
-    border-bottom: solid 1px rgba(#DDDFE3, 1);
+    border-bottom: solid 1px rgba($iron, 1);
   }
   &:not(.mobile) {
     .mobile-row,
@@ -338,7 +364,7 @@ export default {
 
 .bottom-content {
   @include medium {
-    padding-top: 1.125rem;
+    padding: 0;
   }
 }
 
@@ -357,6 +383,21 @@ export default {
 .label {
   @include medium {
     width: 40%;
+    min-width: toRem(120);
+    flex-shrink: 0;
+  }
+}
+
+:deep(.tooltip-c .tooltip-box-wrapper) {
+  transform: translateX(-60%);
+}
+
+.inspect-file-mobile {
+  padding-bottom: toRem(10);
+  :deep(.tooltip-c) {
+    display: flex;
+    justify-content: right;
+    padding-right: 1.875rem;
   }
 }
 
@@ -371,6 +412,9 @@ export default {
 
 .cid-title {
   max-width: 50%;
+  @include medium {
+    max-width: 100%;
+  }
   .title {
     font-family: $font_Primary;
     font-size: 1.125rem;
@@ -430,6 +474,10 @@ export default {
     &:not(:last-child) {
       margin-right: 0.375rem;
     }
+    @include medium {
+      @include fontSize_14;
+      @include fontWeight_Bold;
+    }
   }
 }
 
@@ -439,11 +487,15 @@ export default {
   margin-top: 0.4375rem;
   @include medium {
     margin-top: 0;
+    @include fontWeight_Bold;
   }
 }
 
 .replica-list {
   margin: 0.875rem 0;
+  @include medium {
+    margin: 0;
+  }
 }
 .replica {
   width: 0.8125rem;
@@ -473,14 +525,23 @@ export default {
   .date {
     @include fontSize_16;
     @include fontWeight_Medium;
-    margin-bottom: 0.375rem;
+    margin-bottom: toRem(11);
     @include medium {
       margin-bottom: 0;
+      order: 2;
+      @include fontWeight_Bold;
     }
   }
   .more {
     @include fontSize_14;
     @include fontWeight_Regular;
+    @include medium {
+      margin-bottom: 0;
+      order: 1;
+      width: 40%;
+      min-width: toRem(120);
+      flex-shrink: 0;
+    }
   }
 }
 
@@ -490,6 +551,8 @@ export default {
   margin-bottom: auto;
   @include medium {
     margin-top: 0;
+    @include fontSize_14;
+    @include fontWeight_Bold;
   }
   &.active {
     &:before {
@@ -499,9 +562,12 @@ export default {
       width: 1rem;
       height: 1rem;
       top: 0.25rem;
-      background-color: #74C3B5;
+      background-color: $neptune;
       border-radius: 50%;
       margin-right: 0.875rem;
+      @include medium {
+        margin-right: 0.5rem;
+      }
     }
   }
 }
@@ -520,7 +586,7 @@ export default {
 // ///////////////////////////////////////////////////// STORAGE PROVIDERS PANEL
 .mobile-sp-section-heading {
   .heading {
-    @include fontSize_20;
+    @include fontSize_24;
     @include fontWeight_Medium;
     line-height: leading(24, 20);
     margin: 0.625rem 0;
@@ -556,7 +622,7 @@ export default {
       width: 11px;
       height: 7px;
       top: calc(50% - 3.5px);
-      right: 1rem;
+      right: 0;
       transform: rotate(180deg);
       transition: transform 250ms ease;
       background-repeat: no-repeat;
@@ -564,6 +630,14 @@ export default {
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 6.5L6 1.5L1 6.5' stroke='%231B1F12' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e ");
     }
   }
+  @include medium {
+    border-bottom: 1px solid $iron;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
   &.open {
     .accordion-header {
       &:after {
@@ -589,6 +663,9 @@ export default {
 
 .cell {
   @include fontWeight_Medium;
+  @include medium {
+    @include fontWeight_Bold;
+  }
 }
 
 .retrieval-title,
diff --git a/packages/fe/components/cid-inspect-tooltip.vue b/packages/fe/components/cid-inspect-tooltip.vue
new file mode 100644
index 00000000..b9f9deba
--- /dev/null
+++ b/packages/fe/components/cid-inspect-tooltip.vue
@@ -0,0 +1,90 @@
+<template>
+  <Tooltip class="cid-inspect-tooltip" :align="align">
+    <template #tooltip-btn>
+      <TerminalIcon class="icon" />
+      <a :href="link" target="_blank">
+        {{ btnText }}</a>
+    </template>
+    <template #tooltip-box>
+      <div v-html="tooltipText"></div>
+    </template>
+  </Tooltip>
+</template>
+
+<script>
+// ===================================================================== Imports
+import Tooltip from '@/modules/tooltip/components/tooltip'
+import TerminalIcon from '@/components/icons/terminal.vue'
+
+// ====================================================================== Export
+export default {
+  name: 'CidInspectTooltip',
+
+  components: {
+    Tooltip,
+    TerminalIcon
+  },
+
+  props: {
+    align: {
+      type: String,
+      required: false,
+      default: 'center'
+    },
+    link: {
+      type: String,
+      required: true
+    },
+    tooltipText: {
+      type: String,
+      required: true
+    },
+    btnText: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.cid-inspect-tooltip {
+  margin-top: toRem(10);
+  &:hover {
+    :deep(.tooltip-btn-wrapper) {
+      color: $rangoonGreen;
+    }
+  }
+}
+
+:deep(.tooltip-btn-wrapper) {
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  color: $blue;
+  @include fontSize_14;
+  @include fontWeight_Medium;
+  .icon {
+    margin-right: toRem(7);
+  }
+  &:hover {
+    color: $rangoonGreen;
+  }
+}
+
+:deep(.tooltip-box-wrapper) {
+  width: toRem(275);
+  background-color: $rangoonGreen;
+  padding: toRem(15);
+  color: white;
+  border-radius: toRem(10);
+  a {
+    color: $neptune;
+    @include fontWeight_Semibold;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>
diff --git a/packages/fe/components/cid-table.vue b/packages/fe/components/cid-table.vue
index f255fdd1..6bc85fca 100644
--- a/packages/fe/components/cid-table.vue
+++ b/packages/fe/components/cid-table.vue
@@ -43,14 +43,16 @@
           v-for="(cid, i) in cidList"
           :key="`cid-${i}`"
           :cid-data="cid"
-          :mobile="mobileTable" />
+          :mobile="mobileTable"
+          :content="content.cidCard"
+          :style="{ zIndex: cidList.length - i}" />
       </template>
 
       <div class="table-messages">
         <h3
           v-if="Array.isArray(cidList) && !cidList.length && !cidsLoading"
           class="heading">
-          This dataset hasn’t been onboarded to the network yet
+          {{ content.notOnboarded }}
         </h3>
         <Spinner
           v-if="cidsLoading"
@@ -114,6 +116,14 @@ export default {
     Spinner
   },
 
+  props: {
+    content: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+
   data () {
     return {
       mobileTable: false,
diff --git a/packages/fe/components/form/fields/typeahead.vue b/packages/fe/components/form/fields/typeahead.vue
index 7a1d6849..f8b88c5e 100644
--- a/packages/fe/components/form/fields/typeahead.vue
+++ b/packages/fe/components/form/fields/typeahead.vue
@@ -314,9 +314,6 @@ $height: 3.125rem;
     cursor: no-drop;
     border-bottom-color: rgba(227, 211, 192, 0.25);
   }
-  &:focus {
-    box-shadow: none;
-  }
 }
 
 // //////////////////////////////////////////////////////////////////// Dropdown
diff --git a/packages/fe/components/icons/terminal.vue b/packages/fe/components/icons/terminal.vue
new file mode 100644
index 00000000..3a93a792
--- /dev/null
+++ b/packages/fe/components/icons/terminal.vue
@@ -0,0 +1,24 @@
+
+<template>
+  <svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_3543_29592" fill="white">
+      <rect y="0.000244141" width="19" height="13" rx="1" />
+    </mask>
+    <rect
+      y="0.000244141"
+      width="19"
+      height="13"
+      rx="1"
+      stroke="#1B1F12"
+      stroke-width="4"
+      mask="url(#path-1-inside-1_3543_29592)" />
+    <path d="M4 4.00024L7 6.50024L4 9.00024" stroke="black" stroke-linecap="round" />
+  </svg>
+</template>
+
+<script>
+// ====================================================================== Export
+export default {
+  name: 'TerminalIcon'
+}
+</script>
diff --git a/packages/fe/components/page-home/datasets-card-grid.vue b/packages/fe/components/page-home/datasets-card-grid.vue
index fc72b9d8..7a91f135 100644
--- a/packages/fe/components/page-home/datasets-card-grid.vue
+++ b/packages/fe/components/page-home/datasets-card-grid.vue
@@ -204,10 +204,7 @@ export default {
   min-height: toRem(116.5);
   .name {
     line-height: leading(26, 17);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    @include truncate(3);
   }
 }
 
@@ -253,8 +250,6 @@ export default {
 .button {
   align-self: flex-end;
   margin-top: auto;
-  margin-right: toRem(20);
-  margin-bottom: toRem(20);
   padding: toRem(10) toRem(20);
 }
 </style>
diff --git a/packages/fe/components/site-footer.vue b/packages/fe/components/site-footer.vue
index c95dae05..43c58d75 100644
--- a/packages/fe/components/site-footer.vue
+++ b/packages/fe/components/site-footer.vue
@@ -92,7 +92,7 @@ footer {
 .right {
   background-color: $rangoonGreen;
   color: $grayNurse;
-  padding: 13% 15% 11%;
+  padding: 13% 15% 9% 15%;
   border-top-left-radius: toRem(100);
   border-top-right-radius: toRem(100);
   border-bottom-left-radius: toRem(100);
@@ -114,9 +114,6 @@ footer {
     @include medium {
       margin-bottom: toRem(16);
     }
-    &:last-child {
-      margin-bottom: 0;
-    }
   }
   nav {
     @include tiny {
diff --git a/packages/fe/components/site-header.vue b/packages/fe/components/site-header.vue
index 675bf835..32967a89 100644
--- a/packages/fe/components/site-header.vue
+++ b/packages/fe/components/site-header.vue
@@ -154,6 +154,10 @@ export default {
       margin-right: 0;
     }
   }
+  :deep(.tooltip) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 @include large {
@@ -172,6 +176,7 @@ export default {
 }
 
 .logo-link {
+  display: inherit;
   z-index: 101;
   svg {
     display: block;
diff --git a/packages/fe/content/pages/about.json b/packages/fe/content/pages/about.json
index 65bc7f05..1ebcd1ea 100644
--- a/packages/fe/content/pages/about.json
+++ b/packages/fe/content/pages/about.json
@@ -72,7 +72,7 @@
           "push_left": "off-1_sm-1_mi-0"
         },
         "label": "Open Panda exists today because a decentralized model offers unique benefits when storing data at scale.",
-        "description": " The distributed nature of the network means that sources are for data are available in a variety of regions around the world, reducing latency and helping ensure a reliable connection for the download process. Storage Providers maintain significant hardware requirements, which typically include high bandwidth connections to the internet.<br><br>Aside from distribution, all content on the network is cryptographically hashed into a unique value called a CID, or content identifier. This means that if any data changes at all, the CID changes. For content within datasets, this adds a unique feature: immutability. Information contained in a dataset becomes tamper proof, because if anything changes, it's immediately evident from the CID being different. This is especially useful when considering the problem of safeguarding data from manipulation by biased parties.<br><br>One of Filecoin's core missions is to store humanity's most important information, and the Open Panda project is directly aligned with that mission.  At this point in time, downloading and working with the data on the platform still requires an understanding of how Filecoin works and some use of specialized software, but over time we plan to abstract those hurdles away, in the interest of a smoother and more user-friendly experience and a minimal learning curve.",
+        "description": " The distributed nature of the network means that sources are for data are available in a variety of regions around the world, reducing latency and helping ensure a reliable connection for the download process. Storage Providers maintain significant hardware requirements, which typically include high bandwidth connections to the internet.<br><br>Aside from distribution, all content on the network is cryptographically hashed into a unique value called a CID, or content identifier. This means that if any data changes at all, the CID changes. For content within datasets, this adds a unique feature: immutability. Information contained in a dataset becomes tamper proof, because if anything changes, it's immediately evident from the CID being different. This is especially useful when considering the problem of safeguarding data from manipulation by biased parties.<br><br><h5>One of Filecoin's core missions is to store humanity's most important information, and the Open Panda project is directly aligned with that mission.</h5><p>At this point in time, downloading and working with the data on the platform still requires an understanding of how Filecoin works and some use of specialized software, but over time we plan to abstract those hurdles away, in the interest of a smoother and more user-friendly experience and a minimal learning curve.</p>",
         "ctas": [
           {
             "type": "solid-tear",
diff --git a/packages/fe/content/pages/dataset-single.json b/packages/fe/content/pages/dataset-single.json
new file mode 100644
index 00000000..bf4643dd
--- /dev/null
+++ b/packages/fe/content/pages/dataset-single.json
@@ -0,0 +1,23 @@
+{
+    "page_content": {
+        "cidTable": {
+            "notOnboarded": "This dataset hasn’t been onboarded to the network yet",
+            "cidCard": {
+              "tooltipText": "You can access a preview of the files within this CID, however at this time it must be downloaded and unpacked from the zst format. <a href='/how-to-download'>Learn more</a>",
+              "tooltipBtnText": "Inspect files",
+              "cidLabel": "CID",
+              "sizeLabel": "Size",
+              "typeLabel": "Type",
+              "replicasLabel": "No. Replicas",
+              "statusLabel": "Status",
+              "storageProvidersLabel": "Storage Providers",
+              "storageProvidersSubLabel": "Select a storage provider to view retrieval commands",
+              "dealIDLabel": "dealID",
+              "availUntilLabel": "Available Until",
+              "availUntilMobileLabel": "Avail. Until",
+              "retrievalRateLabel": "Retrieval Rate",
+              "retrievalCommandsLabel": "Retrieval Commands"
+            }
+        }
+    }
+  }
diff --git a/packages/fe/content/pages/general.json b/packages/fe/content/pages/general.json
index 25f7ab92..e5390814 100644
--- a/packages/fe/content/pages/general.json
+++ b/packages/fe/content/pages/general.json
@@ -81,7 +81,7 @@
         "label": "Slack"
       },
       {
-        "href": "https://github.com",
+        "href": "https://github.com/data-preservation-programs/open-panda",
         "label": "Github"
       }
     ],
diff --git a/packages/fe/modules/button/components/button.vue b/packages/fe/modules/button/components/button.vue
index ed9f0b90..a0bb9fc7 100644
--- a/packages/fe/modules/button/components/button.vue
+++ b/packages/fe/modules/button/components/button.vue
@@ -1,16 +1,30 @@
 <template>
-  <component
-    :is="tag"
-    :to="tag === 'nuxt-link' ? to : false"
-    :href="tag === 'a' ? to : false"
-    :disabled="disabled || loading"
-    :target="target"
-    :class="['button', { selected }]"
-    @click="clickHandler($event)">
-
-    <slot :loading="loading" />
-
-  </component>
+  <span class="button-wrapper">
+    <!-- have to duplicate the component and add a v-if to ensure :focus-visible is properly showing. nuxt gets confused when we have :to and :href as props and end up not showing href for <a> tags -->
+    <component
+      :is="tag"
+      v-if="tag === 'a'"
+      :to="tag === 'nuxt-link' ? to : false"
+      :href="tag === 'a' ? to : false"
+      :disabled="disabled || loading"
+      :target="target"
+      :class="['button', { selected }]"
+      tabindex="0"
+      role="link"
+      @click="clickHandler($event)">
+      <slot :loading="loading" />
+    </component>
+    <component
+      :is="tag"
+      v-if="tag !== 'a'"
+      :to="tag === 'nuxt-link' ? to : false"
+      :disabled="disabled || loading"
+      :class="['button', { selected }]"
+      tabindex="0"
+      @click="clickHandler($event)">
+      <slot :loading="loading" />
+    </component>
+  </span>
 </template>
 
 <script>
diff --git a/packages/fe/modules/tooltip/components/tooltip.vue b/packages/fe/modules/tooltip/components/tooltip.vue
new file mode 100644
index 00000000..b8565330
--- /dev/null
+++ b/packages/fe/modules/tooltip/components/tooltip.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="`tooltip-c align-${align}`">
+
+    <div class="tooltip-btn-wrapper">
+      <slot name="tooltip-btn" />
+    </div>
+
+    <div class="tooltip-box-wrapper">
+      <slot name="tooltip-box" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+// ====================================================================== Export
+export default {
+  name: 'Tooltip',
+
+  props: {
+    align: {
+      type: String,
+      required: false,
+      default: 'center'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.tooltip-c {
+  position: relative;
+  z-index: 1000;
+  &:hover {
+    .tooltip-box-wrapper {
+      // fade in
+      opacity: 1;
+      visibility: visible;
+      transition: all 200ms ease-in;
+      pointer-events: auto;
+    }
+  }
+  &.align-right {
+    .tooltip-box-wrapper {
+      right: 0;
+      left: auto;
+      transform: none;
+    }
+  }
+  &.align-left {
+    .tooltip-box-wrapper {
+      left: 0;
+      right: auto;
+      transform: none;
+    }
+  }
+}
+
+.tooltip-box-wrapper {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 100%;
+  // fade out
+  opacity: 0;
+  visibility: hidden;
+  transition: all 200ms ease-in;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/fe/modules/tooltip/index.js b/packages/fe/modules/tooltip/index.js
new file mode 100644
index 00000000..6b62f0a2
--- /dev/null
+++ b/packages/fe/modules/tooltip/index.js
@@ -0,0 +1,37 @@
+/*
+ *
+ * 📦 [module] tooltip
+ *
+ */
+
+// ///////////////////////////////////////////////////////////////////// Imports
+// -----------------------------------------------------------------------------
+// ///////////////////////////////////////////////////////////////////// General
+import Path from 'path'
+
+// ///////////////////////////////////////////////////////////////////// Plugins
+const TooltipPlugin = Path.resolve(__dirname, 'plugins/index.js')
+
+// /////////////////////////////////////////////////////////////////// Functions
+// -----------------------------------------------------------------------------
+// ////////////////////////////////////////////////////////////// registerPlugin
+const registerPlugin = (instance, next) => {
+  return new Promise((next) => {
+    const TooltipPluginDst = instance.addTemplate({
+      src: TooltipPlugin,
+      fileName: 'tooltip/plugin-index.js'
+    }).dst
+    instance.options.plugins.push({
+      src: Path.join(instance.options.buildDir, TooltipPluginDst),
+      ssr: undefined,
+      mode: undefined
+    })
+    next()
+  })
+}
+
+// ////////////////////////////////////////////////////////////////////// Export
+// -----------------------------------------------------------------------------
+export default async function () {
+  await registerPlugin(this)
+}
diff --git a/packages/fe/modules/tooltip/plugins/index.js b/packages/fe/modules/tooltip/plugins/index.js
new file mode 100644
index 00000000..32a35acb
--- /dev/null
+++ b/packages/fe/modules/tooltip/plugins/index.js
@@ -0,0 +1,28 @@
+/*
+ *
+ * 🔌 [plugin | tooltip] index
+ *
+ */
+
+// ///////////////////////////////////////////////////////// Imports & Variables
+// -----------------------------------------------------------------------------
+import Store from '@/modules/tooltip/store'
+
+// /////////////////////////////////////////////////////////////////// Functions
+// -----------------------------------------------------------------------------
+// /////////////////////////////////////////////////////////////// registerStore
+const registerStore = (store, next) => {
+  return new Promise((next) => {
+    store.registerModule('tooltip', Object.assign({
+      namespaced: true
+    }, Store))
+    next()
+  })
+  if (next) { return next() }
+}
+
+// ////////////////////////////////////////////////////////////////////// Export
+// -----------------------------------------------------------------------------
+export default async function ({ app, store }, inject) {
+  await registerStore(store)
+}
diff --git a/packages/fe/modules/tooltip/store/index.js b/packages/fe/modules/tooltip/store/index.js
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/fe/nuxt.config.js b/packages/fe/nuxt.config.js
index 5e8b0639..079c54d4 100644
--- a/packages/fe/nuxt.config.js
+++ b/packages/fe/nuxt.config.js
@@ -103,7 +103,8 @@ export default {
     '~/modules/auth',
     '~/modules/search',
     '~/modules/form',
-    '~/modules/button'
+    '~/modules/button',
+    '~/modules/tooltip'
   ],
   // ///////////////////////////////////////////////////// [Module] Nuxt-content
   // ---------------------------------------------------------------------------
diff --git a/packages/fe/pages/dataset/_id.vue b/packages/fe/pages/dataset/_id.vue
index 4ec3aa37..5112e2d2 100644
--- a/packages/fe/pages/dataset/_id.vue
+++ b/packages/fe/pages/dataset/_id.vue
@@ -186,7 +186,7 @@
           data-push-left="off-1_xlg-0_md-1_sm-0"
           data-push-right="off-1_xlg-0_md-1_sm-0">
 
-          <CIDTable />
+          <CIDTable :content="pageContent.cidTable" />
 
         </div>
       </div>
@@ -199,6 +199,7 @@
 // ====================================================================== Import
 import { mapGetters, mapActions } from 'vuex'
 
+import DatasetPageData from '@/content/pages/dataset-single.json'
 import TextBlock from '@/components/blocks/text-block'
 import CardCutout from '@/components/card-cutout'
 import CIDTable from '@/components/cid-table'
@@ -244,12 +245,17 @@ export default {
   data () {
     const id = this.$route.params.id
     return {
+      pageTag: 'datasetSingle',
       id,
       resize: false,
       mobile: false
     }
   },
 
+  async fetch ({ app, store }) {
+    await store.dispatch('general/getBaseData', { key: 'datasetSingle', data: DatasetPageData })
+  },
+
   head () {
     const dataset = this.dataset
     const siteUrl = this.siteContent.general.og.url
@@ -268,6 +274,9 @@ export default {
       dataset: 'dataset/dataset',
       cidList: 'cid/cidList'
     }),
+    pageContent () {
+      return this.siteContent[this.pageTag].page_content
+    },
     slug () {
       return this.dataset.slug
     },
diff --git a/packages/fe/store/dataset.js b/packages/fe/store/dataset.js
index e855ac4a..2dfc4f42 100644
--- a/packages/fe/store/dataset.js
+++ b/packages/fe/store/dataset.js
@@ -50,4 +50,4 @@ export default {
   getters,
   actions,
   mutations
-}
+}
\ No newline at end of file