diff --git a/src/js/background.js b/src/js/background.js
index 7a72a09..765c366 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -58,7 +58,7 @@ chrome.runtime.onMessage.addListener(action => {
         const apiClient = new ApiClient(settings)
         apiClient
           .createActivity(activity)
-          .then(() => resetBubble({ tab, apiClient, service }))
+          .then(() => resetBubble({ tab, apiClient, service, settings }))
           .catch(error => {
             if (error.response?.status === 422) {
               chrome.runtime.sendMessage({
diff --git a/src/js/components/Bubble.js b/src/js/components/Bubble.js
index 9c611b2..da378b7 100644
--- a/src/js/components/Bubble.js
+++ b/src/js/components/Bubble.js
@@ -3,16 +3,19 @@ import PropTypes from "prop-types"
 import mocoLogo from "images/moco-32x32.png"
 import mocoTimerLogo from "images/moco-timer-32x32.png"
 import { parseISO } from "date-fns"
+import { formatDuration } from "utils"
 import Timer from "./shared/Timer"
 
-const Bubble = ({ bookedSeconds, timedActivity }) => {
+const Bubble = ({ bookedSeconds, timedActivity, settingTimeTrackingHHMM }) => {
   const logo = timedActivity ? mocoTimerLogo : mocoLogo
 
   return (
     <div className="moco-bx-bubble-inner">
       <img className="moco-bx-logo" src={chrome.extension.getURL(logo)} />
       {!timedActivity && bookedSeconds > 0 && (
-        <span className="moco-bx-booked-hours">{(bookedSeconds / 3600).toFixed(2)}</span>
+        <span className="moco-bx-booked-hours">
+          {formatDuration(bookedSeconds, { settingTimeTrackingHHMM, showSeconds: false })}
+        </span>
       )}
       {timedActivity && (
         <Timer
@@ -32,10 +35,12 @@ Bubble.propTypes = {
     timer_started_at: PropTypes.string.isRequired,
     seconds: PropTypes.number.isRequired,
   }),
+  settingTimeTrackingHHMM: PropTypes.bool,
 }
 
 Bubble.defaultProps = {
   bookedSeconds: 0,
+  settingTimeTrackingHHMM: false,
 }
 
 export default Bubble
diff --git a/src/js/components/Options.js b/src/js/components/Options.js
index e1ba458..c54af85 100644
--- a/src/js/components/Options.js
+++ b/src/js/components/Options.js
@@ -25,7 +25,11 @@ class Options extends Component {
   handleSubmit = _event => {
     this.isSuccess = false
     this.errorMessage = null
-    setStorage({ subdomain: this.subdomain, apiKey: this.apiKey }).then(() => {
+    setStorage({
+      subdomain: this.subdomain,
+      apiKey: this.apiKey,
+      settingTimeTrackingHHMM: false,
+    }).then(() => {
       const { version } = chrome.runtime.getManifest()
       const apiClient = new ApiClient({
         subdomain: this.subdomain,
@@ -34,6 +38,9 @@ class Options extends Component {
       })
       apiClient
         .login()
+        .then(({ data }) =>
+          setStorage({ settingTimeTrackingHHMM: data.setting_time_tracking_hh_mm }),
+        )
         .then(() => {
           this.isSuccess = true
           this.closeWindow()
diff --git a/src/js/components/shared/Timer.js b/src/js/components/shared/Timer.js
index f454821..1643883 100644
--- a/src/js/components/shared/Timer.js
+++ b/src/js/components/shared/Timer.js
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import PropTypes from "prop-types"
 import { useInterval } from "./hooks"
-import { differenceInSeconds, addSeconds, startOfDay, format } from "date-fns"
+import { differenceInSeconds } from "date-fns"
+import { formatDuration } from "utils"
 
 Timer.propTypes = {
   startedAt: PropTypes.instanceOf(Date).isRequired,
@@ -22,7 +23,7 @@ function Timer({ startedAt, offset = 0, onTick, ...domProps }) {
 
 function formattedTimerLabel(startedAt, offset) {
   const seconds = differenceInSeconds(new Date(), startedAt) + offset
-  return format(addSeconds(startOfDay(new Date()), seconds), "HH:mm:ss")
+  return formatDuration(seconds)
 }
 
 export default Timer
diff --git a/src/js/content.js b/src/js/content.js
index 609bb16..04f6075 100644
--- a/src/js/content.js
+++ b/src/js/content.js
@@ -25,7 +25,7 @@ chrome.runtime.onConnect.addListener(function(port) {
     document.removeEventListener("click", clickHandler, true)
   })
 
-  function updateBubble({ service, bookedSeconds, timedActivity } = {}) {
+  function updateBubble({ service, bookedSeconds, settingTimeTrackingHHMM, timedActivity } = {}) {
     if (!document.getElementById("moco-bx-root")) {
       const domRoot = document.createElement("div")
       domRoot.setAttribute("id", "moco-bx-root")
@@ -50,6 +50,7 @@ chrome.runtime.onConnect.addListener(function(port) {
               <Bubble
                 key={service.url}
                 bookedSeconds={bookedSeconds}
+                settingTimeTrackingHHMM={settingTimeTrackingHHMM}
                 timedActivity={timedActivity}
               />
             </animated.div>
diff --git a/src/js/utils/browser.js b/src/js/utils/browser.js
index 753bb08..985fbea 100644
--- a/src/js/utils/browser.js
+++ b/src/js/utils/browser.js
@@ -5,7 +5,7 @@ export const isFirefox = () => typeof browser !== "undefined" && chrome
 const DEFAULT_SUBDOMAIN = "unset"
 
 export const getSettings = (withDefaultSubdomain = true) => {
-  const keys = ["subdomain", "apiKey"]
+  const keys = ["subdomain", "apiKey", "settingTimeTrackingHHMM"]
   const { version } = chrome.runtime.getManifest()
   if (isChrome()) {
     return new Promise(resolve => {
diff --git a/src/js/utils/index.js b/src/js/utils/index.js
index 163c6c4..7f3c7f5 100644
--- a/src/js/utils/index.js
+++ b/src/js/utils/index.js
@@ -12,6 +12,7 @@ import {
   pick,
   head,
   defaultTo,
+  padCharsStart,
 } from "lodash/fp"
 import { startOfWeek, endOfWeek } from "date-fns"
 import { format } from "date-fns"
@@ -118,3 +119,22 @@ export const extractAndSetTag = changeset => {
     tag: match[1],
   }
 }
+
+export const formatDuration = (
+  durationInSeconds,
+  { settingTimeTrackingHHMM = true, showSeconds = true },
+) => {
+  if (settingTimeTrackingHHMM) {
+    const hours = Math.floor(durationInSeconds / 3600)
+    const minutes = Math.floor((durationInSeconds % 3600) / 60)
+    const result = `${padCharsStart("0", 2, hours)}:${padCharsStart("0", 2, minutes)}`
+    if (!showSeconds) {
+      return result
+    } else {
+      const seconds = durationInSeconds % 60
+      return result + `:${padCharsStart("0", 2, seconds)}`
+    }
+  } else {
+    return (durationInSeconds / 3600).toFixed(2)
+  }
+}
diff --git a/src/js/utils/messageHandlers.js b/src/js/utils/messageHandlers.js
index 480ece9..705de4b 100644
--- a/src/js/utils/messageHandlers.js
+++ b/src/js/utils/messageHandlers.js
@@ -10,7 +10,7 @@ import {
 import { get, forEach, reject, isNil } from "lodash/fp"
 import { createMatcher } from "utils/urlMatcher"
 import remoteServices from "remoteServices"
-import { queryTabs, isBrowserTab, getSettings } from "utils/browser"
+import { queryTabs, isBrowserTab, getSettings, setStorage } from "utils/browser"
 
 const matcher = createMatcher(remoteServices)
 
@@ -31,6 +31,7 @@ export function tabUpdated(tab, { messenger, settings }) {
             type: "showBubble",
             payload: {
               bookedSeconds: data.seconds,
+              settingTimeTrackingHHMM: settings.settingTimeTrackingHHMM,
               timedActivity: data.timed_activity,
               service,
             },
@@ -41,6 +42,7 @@ export function tabUpdated(tab, { messenger, settings }) {
             type: "showBubble",
             payload: {
               bookedSeconds: 0,
+              settingTimeTrackingHHMM: settings.settingTimeTrackingHHMM,
               service,
             },
           })
@@ -97,6 +99,9 @@ export async function openPopup(tab, { service, messenger }) {
       )
     }
 
+    const settingTimeTrackingHHMM = get("[0].data.setting_time_tracking_hh_mm", responses)
+    !isNil(settingTimeTrackingHHMM) && setStorage({ settingTimeTrackingHHMM })
+
     const action = {
       type: "openPopup",
       payload: {