diff --git a/tomatic/ui/src/mithril/components/callinfo.js b/tomatic/ui/src/mithril/components/callinfo.js
index 66eb1f68..8aa30981 100644
--- a/tomatic/ui/src/mithril/components/callinfo.js
+++ b/tomatic/ui/src/mithril/components/callinfo.js
@@ -255,8 +255,10 @@ CallInfo.selectedPartner = subscriptable(function () {
 
 
 CallInfo.contractDetails = subscriptable(function() {
+  const contract = CallInfo.selectedContract()
   return {
-    atr_cases: CallInfo.selectedContract()?.atr_cases ?? null,
+    atr_cases: contract?.atr_cases ?? null,
+    lectures_comptadors: contract?.lectures_comptadors ?? null,
   }
 })
 
diff --git a/tomatic/ui/src/pages/CallinfoPage/AtrCases.js b/tomatic/ui/src/pages/CallinfoPage/AtrCases.js
index 7f0b6cd1..2a5b7cbc 100644
--- a/tomatic/ui/src/pages/CallinfoPage/AtrCases.js
+++ b/tomatic/ui/src/pages/CallinfoPage/AtrCases.js
@@ -44,7 +44,7 @@ export default function AtrCases() {
               <tr key={i}>
                 <td>
                   {
-                    // Not the time
+                    // Date not time
                     atr_case.date.slice(0, 10)
                   }
                 </td>
diff --git a/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js b/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js
index 7123d8c1..8a16d745 100644
--- a/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js
+++ b/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js
@@ -4,6 +4,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import m from '../../services/hyperscript'
 import TabbedCard from './TabbedCard'
 import AtrCases from './AtrCases'
+import Meterings from './Meterings'
 import CallInfo from '../../mithril/components/callinfo'
 import { useSubscriptable } from '../../services/subscriptable'
 
@@ -30,7 +31,7 @@ export default function DetailsInfo() {
         <Box className="contract-info-box">
           {activeView === 0 && <AtrCases />}
           {/* activeView === 1 && <Invoices invoices={contract.invoices} /> */}
-          {/* activeView === 2 && <Meterings meterings={contract.lectures_comptadors} /> */}
+          { activeView === 2 && <Meterings /> }
         </Box>
       </TabbedCard>
     </Box>
diff --git a/tomatic/ui/src/pages/CallinfoPage/Meterings.js b/tomatic/ui/src/pages/CallinfoPage/Meterings.js
new file mode 100644
index 00000000..52b4b528
--- /dev/null
+++ b/tomatic/ui/src/pages/CallinfoPage/Meterings.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+import CallInfo from '../../mithril/components/callinfo'
+import { useSubscriptable } from '../../services/subscriptable'
+
+export default function Meterings() {
+  const contract = useSubscriptable(CallInfo.selectedContract)
+  const readings = useSubscriptable(CallInfo.contractDetails).lectures_comptadors
+  if (readings === null) {
+    return (
+      <Box className="meter-readings">
+        <Box className="loading  layout vertical center">
+          {'Carregant lectures...'}
+          <CircularProgress />
+        </Box>
+      </Box>
+    )
+  }
+  if (readings.length === 0) {
+    return (
+      <Box className="meter-readings">
+        <Box className="loading  layout vertical center">
+          {'No hi ha lectures disponibles.'}
+        </Box>
+      </Box>
+    )
+  }
+  return (
+    <Box className="meter-readings">
+      <table>
+        <thead>
+          <tr>
+            <th>{'Comptador'}</th>
+            <th>{'Data'}</th>
+            <th>{'Lectura'}</th>
+            <th>{'Origen'}</th>
+            <th>{'Període'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {readings.map(function (reading, i) {
+            return (
+              <tr key={i}>
+                <td>{reading.comptador}</td>
+                <td>{reading.data}</td>
+                <td>{reading.lectura}</td>
+                <td>{reading.origen}</td>
+                <td>{reading.periode}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </Box>
+  )
+}