diff --git a/js/about/newTabComponents/clock.js b/js/about/newTabComponents/clock.js
index d5ce4a84439..2b53e6385dc 100644
--- a/js/about/newTabComponents/clock.js
+++ b/js/about/newTabComponents/clock.js
@@ -8,7 +8,8 @@ class Clock extends React.Component {
   constructor () {
     super()
     this.state = {
-      currentTime: this.currentTime
+      time: this.formattedTime,
+      timePeriod: this.formattedTimePeriod
     }
   }
   get currentTime () {
@@ -16,9 +17,20 @@ class Clock extends React.Component {
     const timeOptions = {hour: '2-digit', minute: '2-digit'}
     return date.toLocaleTimeString([], timeOptions)
   }
+  get formattedTime () {
+    const time = this.currentTime
+    return time.replace(' AM', '').replace(' PM', '')
+  }
+  get formattedTimePeriod () {
+    const time = this.currentTime
+    if (time.toUpperCase().indexOf(' AM') > -1) return 'AM'
+    if (time.toUpperCase().indexOf(' PM') > -1) return 'PM'
+    return ''
+  }
   updateClock () {
     this.setState({
-      currentTime: this.currentTime
+      time: this.formattedTime,
+      timePeriod: this.formattedTimePeriod
     })
   }
   componentDidMount () {
@@ -26,7 +38,7 @@ class Clock extends React.Component {
   }
   render () {
     return <div className='clock'>
-      <span className='time'>{this.state.currentTime}</span>
+      <span className='time'>{this.state.time}</span><span className='timePeriod'>{this.state.timePeriod}</span>
     </div>
   }
 }
diff --git a/less/about/newtab.less b/less/about/newtab.less
index 524c6f85da4..5a72e07bf04 100644
--- a/less/about/newtab.less
+++ b/less/about/newtab.less
@@ -138,6 +138,15 @@ ul {
         color: #fff;
       }
 
+      .timePeriod {
+        color: #fff;
+        display: inline-block;
+        font-size: 20px;
+        font-weight: 400;
+        margin-top: 6px;
+        vertical-align: top;
+      }
+
       .dayTime {
         font-size: 51px;
         color: #fff;