diff --git a/frontend/app/common/utils/utils.ts b/frontend/app/common/utils/utils.ts
index 5a2627c8..d248dfb9 100644
--- a/frontend/app/common/utils/utils.ts
+++ b/frontend/app/common/utils/utils.ts
@@ -413,3 +413,18 @@ export function getStringColumnValue(
   }
   return String((row[columnIndex] || {}).v || '');
 }
+
+/**
+ * Format the duration in picoseconds to a string with proper unit.
+ * durationPs: duration in picoseconds
+ * dp: number of decimal places to display, default is 2
+ */
+export function formatDurationPs(durationPs: number, dp = 2) {
+  const units = ['ps', 'ns', 'us', 'ms', 's'];
+  let i = 0;
+  while (durationPs >= 1000 && i < units.length - 1) {
+    durationPs /= 1000;
+    i++;
+  }
+  return `${durationPs.toFixed(dp)} ${units[i]}`;
+}
diff --git a/frontend/app/components/op_profile/op_details/op_details.ng.html b/frontend/app/components/op_profile/op_details/op_details.ng.html
index 7097a9aa..27a85251 100644
--- a/frontend/app/components/op_profile/op_details/op_details.ng.html
+++ b/frontend/app/components/op_profile/op_details/op_details.ng.html
@@ -39,9 +39,9 @@
             </button>
           </a>
         </div>
-        <div class="info" [hidden]="!avgTimeMs">
+        <div class="info" [hidden]="!avgTime">
           <div class="title">Total Time Avg:</div>
-          <code class="expression">{{avgTimeMs}}</code>
+          <code class="expression">{{avgTime}}</code>
         </div>
         <div class="info" [hidden]="!flopsUtilization">
           <div class="title">FLOPS utilization:</div>
diff --git a/frontend/app/components/op_profile/op_details/op_details.ts b/frontend/app/components/op_profile/op_details/op_details.ts
index 5feb34be..74ac2299 100644
--- a/frontend/app/components/op_profile/op_details/op_details.ts
+++ b/frontend/app/components/op_profile/op_details/op_details.ts
@@ -52,7 +52,7 @@ export class OpDetails {
   provenance: string = '';
   rawTimeMs = '';
   occurrences = 0;
-  avgTimeMs = '';
+  avgTime = '';
   fused: boolean = false;
   hasCategory: boolean = false;
   hasLayout: boolean = false;
@@ -273,10 +273,9 @@ export class OpDetails {
     this.occurrences = this.node.metrics?.occurrences || 0;
 
     if (this.node.metrics && this.node.metrics.avgTimePs) {
-      this.avgTimeMs = utils.humanReadableText(
-          this.node.metrics.avgTimePs / 1e9, {si: true, dp: 2, suffix: ' ms'});
+      this.avgTime = utils.formatDurationPs(this.node.metrics.avgTimePs);
     } else {
-      this.avgTimeMs = '';
+      this.avgTime = '';
     }
 
     this.fused = !!this.node.xla && !this.node.metrics;