diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36c124d3d8e13bc7d2348ea2046cfd95da971454
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div>12h</div>
+    {{ normalisedCount }}
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    normalisedCount() {
+      return 10
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
index 21c557e663603c943574eaa6d0ca2944763d914d..bfcc65637f2a2e1ae05cd0cf06a49470467b270b 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
@@ -1,22 +1,31 @@
 <template>
   <div>
-    <v-row v-for="cellData in cellViabilityData" :key="cellData.cellLine.name">
-      <v-col cols="12">
-        <div class="d-flex justify-space-between">
-          <div>{{ cellData.cellLine.name }}</div>
-          <div>NCG</div>
-        </div>
-      </v-col>
-      <v-col cols="12"> <LineChart :cell-health="cellHealth" /> </v-col>
-    </v-row>
+    <template v-for="cellData in cellViabilityData">
+      <v-row :key="cellData.cellLine.name">
+        <v-col cols="12">
+          <div class="d-flex justify-space-between">
+            <div>{{ cellData.cellLine.name }}</div>
+            <div>NCG</div>
+          </div>
+        </v-col>
+        <v-col cols="12"> <ImagesInTime /></v-col>
+        <v-col cols="12"> <LineChart :cell-health="cellHealth" /> </v-col>
+        <v-col cols="12"> <CellCount /> </v-col>
+      </v-row>
+      <v-divider :key="`${cellData.cellLine.name}- divider`" />
+    </template>
   </div>
 </template>
 
 <script>
 import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue'
+import ImagesInTime from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue'
+import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellCount.vue'
 export default {
   components: {
     LineChart,
+    ImagesInTime,
+    CellCount,
   },
   props: {
     cellHealth: {
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue
index 520049f2c93d06294aef8c2c40ea3bf9389adfa5..652f45f35a80282d241c997d0cf55f2f37a3f685 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue
@@ -2,14 +2,14 @@
   <div class="text-center">
     <v-dialog v-model="dialog" width="500">
       <template #activator="{ on, attrs }">
-        <v-btn color="primary" dark v-bind="attrs" v-on="on">
-          How to interpret this data?
+        <v-btn color="primary" v-bind="attrs" v-on="on">
+          {{ activatorBtnText }} <v-icon right> mdi-help-circle </v-icon>
         </v-btn>
       </template>
 
       <v-card>
         <v-card-title class="text-h5 grey lighten-2">
-          Privacy Policy
+          About the data
         </v-card-title>
 
         <v-card-text>
@@ -26,7 +26,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" text @click="dialog = false"> I accept </v-btn>
+          <v-btn color="primary" text @click="dialog = false"> Close </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -40,6 +40,13 @@ export default {
       dialog: false,
     }
   },
+  computed: {
+    activatorBtnText() {
+      return this.$vuetify.breakpoint.xs
+        ? 'Help'
+        : 'How to interpret this data?'
+    },
+  },
 }
 </script>
 
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..464cadcf53a1405621c8f9b323e36e54d1ae0f18
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <template #activator="{ on, attrs }">
+        <div>
+          <div>
+            {{ title }}
+          </div>
+          <v-btn color="primary" icon v-bind="attrs" v-on="on">
+            <v-icon> mdi-image-multiple </v-icon>
+          </v-btn>
+        </div>
+      </template>
+
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2"> Image </v-card-title>
+        <v-container>
+          <v-img src="https://picsum.photos/400"></v-img>
+        </v-container>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="dialog = false"> Close </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => '',
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67514b19bbf191c177b50b07ab29289e509c80f4
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesInTime.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="d-flex justify-space-between">
+      <ImagesDialog title="12h" />
+      <ImagesDialog title="24h" />
+      <ImagesDialog title="48h" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ImagesDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/ImagesInTime/ImagesDialog.vue'
+export default {
+  components: {
+    ImagesDialog,
+  },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue
index bbb055aca6906dc81daff1c9e1facca389b6c33d..0c1a2c73f65781114d1c3a9f18916b02156f4eba 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue
@@ -1,13 +1,14 @@
 <template>
-  <!-- <div>hola</div> -->
-  <client-only>
-    <apexchart
-      type="line"
-      height="200"
-      :series="series"
-      :options="chartOptions"
-    ></apexchart>
-  </client-only>
+  <div>
+    <client-only>
+      <apexchart
+        type="line"
+        height="200"
+        :series="series"
+        :options="chartOptions"
+      ></apexchart>
+    </client-only>
+  </div>
 </template>
 
 <script>