diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx
index 8d8f7609b..019411d1f 100644
--- a/web/pages/components/chart.tsx
+++ b/web/pages/components/chart.tsx
@@ -1,6 +1,7 @@
 import { LineChart } from 'react-chartkick'
 import styles from '../../styles/styles.module.scss';
 import 'chart.js';
+import format from 'date-fns/format'
 
 interface TimedValue {
   time: Date;
@@ -19,7 +20,7 @@ function createGraphDataset(dataArray) {
   const dataValues = {};
   dataArray.forEach(item => {
     const dateObject = new Date(item.time);
-    const dateString = `${dateObject.getFullYear()  }-${  dateObject.getMonth()  }-${  dateObject.getDay()  } ${  dateObject.getHours()  }:${  dateObject.getMinutes()}`;
+    const dateString = format(dateObject, 'p P');
     dataValues[dateString] = item.value;
   })
   return dataValues;
diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index a264ca5b6..70edf11fd 100644
--- a/web/pages/viewer-info.tsx
+++ b/web/pages/viewer-info.tsx
@@ -120,7 +120,7 @@ export default function ViewersOverTime() {
         />
       </Row>
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
-      <Table dataSource={clients} columns={columns} rowKey={(row) => row.userAgent} />
+      <Table dataSource={clients} columns={columns} rowKey={(row) => row.clientID} />
     </div>
   );
 }