diff --git a/editors/editoria/src/demo.js b/editors/editoria/src/demo.js
index 8e7c1a649d32949d6c45625f02994917b464195a..5e735e3ea3aa044588e61b1d3639d3f7d1764a3b 100644
--- a/editors/editoria/src/demo.js
+++ b/editors/editoria/src/demo.js
@@ -1,4 +1,4 @@
-export const demo = `<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis. <span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">this is an addition </span>Vestibulum non nibh at dolor sodales euismod. Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit, euismod sit amet tellus sed, molestie gravida tortor.</p><ol><li><p class="paragraph">list item 1</p></li><li><p class="paragraph">list <span class="comment" data-id="f109db7c-61df-456b-b933-8cc9d43e65a3" data-conversation="[{&quot;content&quot;:&quot;demo comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559766164}]" data-viewid="main" data-group="main">item</span> 2</p><p class="paragraph">list item 2 second paragraph</p></li><li><p class="paragraph">list item 3</p><ol><li><p class="paragraph">nested 1</p></li><li><p class="paragraph">nested 2</p></li><li><p class="paragraph">nested 3</p></li></ol></li><li><p class="paragraph">list item 4</p></li></ol><p class="paragraph">Quisque posuere <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class="format-change" data-id="37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5" data-user="1234" data-username="demo" data-date="1608638467" data-before="[]" data-after="[&quot;strong&quot;]" data-group="main">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. <footnote id="de87b2a3-6186-440e-9249-fb07ce9ff344">note 2 with <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">some</span> more content </footnote>Duis ut volutpat nunc.<footnote id="b8cc2013-ba52-48cb-b42c-dbe407de0c69">note 1 <span class="comment" data-id="48abf2f8-f58f-4157-b966-42276abee599" data-conversation="[{&quot;content&quot;:&quot;comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559909838}]" data-viewid="b8cc2013-ba52-48cb-b42c-dbe407de0c69" data-group="notes">content</span><span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group=""> and tracked text</span></footnote> Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class="paragraph">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam in aliquam ex.</p><pre data-params=""><code>#include &lt;iostream&gt;
+export const demo = `<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis. <span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">this is an addition </span>Vestibulum non nibh at dolor sodales euismod. Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit, euismod sit amet tellus sed, molestie gravida tortor.</p><ol><li><p class="paragraph">list item 1</p></li><li><p class="paragraph">list <span class="comment" data-id="f109db7c-61df-456b-b933-8cc9d43e65a3" data-conversation="[{&quot;content&quot;:&quot;demo comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559766164}]" data-viewid="main" data-group="main">item</span> 2</p><p class="paragraph">list item 2 second paragraph</p></li><li><p class="paragraph">list item 3</p><ol><li><p class="paragraph">nested 1</p></li><li><p class="paragraph">nested 2</p></li><li><p class="paragraph">nested 3</p></li></ol></li><li><p class="paragraph">list item 4</p></li></ol><p class="paragraph">Quisque posuere <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class="format-change" data-id="37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5" data-user="1234" data-username="demo" data-date="1609243477509" data-before="[]" data-after="[&quot;strong&quot;]" data-group="main">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. <footnote id="de87b2a3-6186-440e-9249-fb07ce9ff344">note 2 with <span class="deletion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group="">some</span> more content </footnote>Duis ut volutpat nunc.<footnote id="b8cc2013-ba52-48cb-b42c-dbe407de0c69">note 1 <span class="comment" data-id="48abf2f8-f58f-4157-b966-42276abee599" data-conversation="[{&quot;content&quot;:&quot;comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559909838}]" data-viewid="b8cc2013-ba52-48cb-b42c-dbe407de0c69" data-group="notes">content</span><span class="insertion" data-id="" data-user="1234" data-username="demo" data-date="0" data-group=""> and tracked text</span></footnote> Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class="paragraph">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam in aliquam ex.</p><pre data-params=""><code>#include &lt;iostream&gt;
 
 int main(int argc, char *argv[]) {
 
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
index d40fa63f87948ba4e1c97c6655cafa625d2535dc..8fff54d83e5a18ab2099dcdbef85d307e13958ce 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js
@@ -1,6 +1,8 @@
 /* eslint react/prop-types: 0 */
 import React from 'react';
 import styled, { css } from 'styled-components';
+import DateParser from '../../helpers/DateParser';
+
 import icons from '../../icons/icons';
 
 const { check, times } = icons;
@@ -101,7 +103,13 @@ const TrackChangesBox = props => {
       <HeadWrapper>
         <Info>
           <Name>{trackData.attrs.username}</Name>
-          <Timestamp>{trackData.attrs.date}</Timestamp>
+          <Timestamp>
+            <DateParser timestamp={trackData.attrs.date}>
+              {(timeStamp, timeAgo) => {
+                return `${timeAgo} ago`;
+              }}
+            </DateParser>
+          </Timestamp>
         </Info>
         {active && (
           <Tools>