diff --git a/frontend/app/components/progress-tooltip/component.js b/frontend/app/components/progress-tooltip/component.js
index 2aec8f17..69aa0772 100644
--- a/frontend/app/components/progress-tooltip/component.js
+++ b/frontend/app/components/progress-tooltip/component.js
@@ -82,37 +82,41 @@ export default class ProgressTooltipComponent extends Component {
       : 0;
   }
 
+  get badgeClass() {
+    return "text-foreground-primary rounded-xl py-1 px-1.5 font-mono text-xs rounded-xl m-0.5 inline-block min-w-2.5 text-center whitespace-nowrap";
+  }
+
   // The color of the badge and progress bar for billable time spent
   get colorBillable() {
     if (this.progressBillable > 1) {
-      return "danger";
+      return "bg-danger";
     } else if (this.progressBillable >= 0.9) {
-      return "warning";
+      return "bg-warning";
     }
 
-    return "success";
+    return "bg-success";
   }
 
   // The color of the badge and progress bar for total time spent
   get colorTotal() {
     if (this.progressTotal > 1) {
-      return "danger";
+      return "bg-danger";
     } else if (this.progressTotal >= 0.9) {
-      return "warning";
+      return "bg-warning";
     }
 
-    return "success";
+    return "bg-success";
   }
 
   // The color of the badge and progress bar for remaining effort
   get colorRemainingEffort() {
     if (this.progressRemainingEffort > 1) {
-      return "danger";
+      return "bg-danger";
     } else if (this.progressRemainingEffort >= 0.9) {
-      return "warning";
+      return "bg-warning";
     }
 
-    return "success";
+    return "bg-success";
   }
 
   get tooltipVisible() {
diff --git a/frontend/app/components/progress-tooltip/template.hbs b/frontend/app/components/progress-tooltip/template.hbs
index ab48d7da..9a0205eb 100644
--- a/frontend/app/components/progress-tooltip/template.hbs
+++ b/frontend/app/components/progress-tooltip/template.hbs
@@ -1,24 +1,23 @@
 {{#if this.tooltipVisible}}
   <EmberTether
-    @class="progress-tooltip"
+    @class="progress-tooltip z-30 py-1.5 px-2 bg-foreground-mid text-foreground-primary"
     @target={{@target}}
     @targetAttachment="middle left"
     @attachment="middle right"
     @offset="0 20px"
   >
-    <div class="time-info">
+    <div class="time-info grid grid-cols-[minmax(0,1fr),auto]">
 
       <span data-test-spent-total>Spent (Total):
         {{humanize-duration this.spent}}</span>
       <div class="progress-badge">
         {{#if this.progressTotal}}
-          <span class="badge badge--{{this.colorTotal}}">
+          <span class="badge {{this.colorTotal}} {{this.badgeClass}}">
             {{#if (gt this.progressTotal 1)}}<FaIcon
                 @icon="exclamation-triangle"
                 @prefix="fas"
               />
-            {{/if}}
-            {{round (mult 100 this.progressTotal)}}%
+            {{/if}}{{round (mult 100 this.progressTotal)}}%
           </span>
         {{/if}}
       </div>
@@ -27,7 +26,7 @@
         {{humanize-duration this.billable}}</span>
       <div class="progress-badge">
         {{#if this.progressBillable}}
-          <span class="badge badge--{{this.colorBillable}}">
+          <span class="badge {{this.colorBillable}} {{this.badgeClass}}">
             {{#if (gt this.progressBillable 1)}}<FaIcon
                 @icon="exclamation-triangle"
                 @prefix="fas"
@@ -38,7 +37,7 @@
         {{/if}}
       </div>
 
-      <span data-test-budget>Budget:
+      <span data-test-budget class="col-span-2">Budget:
         {{if this.estimated (humanize-duration this.estimated) "None"}}</span>
 
       {{#if this.remainingEffort}}
@@ -48,7 +47,9 @@
           }}</span>
         <div class="progress-badge">
           {{#if this.progressRemainingEffort}}
-            <span class="badge badge--{{this.colorRemainingEffort}}">
+            <span
+              class="badge {{this.colorRemainingEffort}} {{this.badgeClass}}"
+            >
               {{#if (gt this.progressRemainingEffort 1)}}<FaIcon
                   @icon="exclamation-triangle"
                   @prefix="fas"
@@ -62,4 +63,4 @@
 
     </div>
   </EmberTether>
-{{/if}}
+{{/if}}
\ No newline at end of file