diff --git a/frontend/app/components/shared/SessionItem/Counter.tsx b/frontend/app/components/shared/SessionItem/Counter.tsx
index 20731f4fc..f7466992a 100644
--- a/frontend/app/components/shared/SessionItem/Counter.tsx
+++ b/frontend/app/components/shared/SessionItem/Counter.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { convertTimestampToUtcTimestamp } from 'App/date';
+import { Duration } from 'luxon';
+import { durationFormatted, convertTimestampToUtcTimestamp } from 'App/date';
 
 interface Props {
   startTime: any,
@@ -10,10 +11,11 @@ function Counter({ startTime, className }: Props) {
   let intervalId: NodeJS.Timer;
   const [duration, setDuration] = useState(convertTimestampToUtcTimestamp(new Date().getTime()) - convertTimestampToUtcTimestamp(startTime));
 
-  const secsFull = ~~(duration / 1000)
-  const mins = ~~(secsFull / 60)
-  const secs = secsFull - mins * 60
-  const formattedDuration = `${mins}:${secs < 10 ? 0 : ''}${secs}`
+  // const secsFull = ~~(duration / 1000)
+  // const mins = ~~(secsFull / 60)
+  // const secs = secsFull - mins * 60
+  // const formattedDuration = `${mins}:${secs < 10 ? 0 : ''}${secs}`
+  const formattedDuration = durationFormatted(Duration.fromMillis(duration));
 
   useEffect(() => {
     if (!intervalId) {