diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 42535d5e1..80471b8bd 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -849,7 +849,11 @@ function LifecycleIconRow({
     () =>
       Array.isArray(item.data.attribute_box) &&
       item.data.attribute_box.length >= 4
-        ? (item.data.attribute_box[2] * item.data.attribute_box[3]).toFixed(4)
+        ? (
+            item.data.attribute_box[2] *
+            item.data.attribute_box[3] *
+            100
+          ).toFixed(2)
         : undefined,
     [item.data.attribute_box],
   );
@@ -857,7 +861,7 @@ function LifecycleIconRow({
   const areaPct = useMemo(
     () =>
       Array.isArray(item.data.box) && item.data.box.length >= 4
-        ? (item.data.box[2] * item.data.box[3]).toFixed(4)
+        ? (item.data.box[2] * item.data.box[3] * 100).toFixed(2)
         : undefined,
     [item.data.box],
   );
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index 9258ca457..c6413ed97 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -744,7 +744,7 @@ function LifecycleItem({
   const areaPct = useMemo(
     () =>
       Array.isArray(item?.data.box) && item?.data.box.length >= 4
-        ? (item?.data.box[2] * item?.data.box[3]).toFixed(4)
+        ? (item?.data.box[2] * item?.data.box[3] * 100).toFixed(2)
         : undefined,
     [item],
   );
@@ -766,7 +766,11 @@ function LifecycleItem({
     () =>
       Array.isArray(item?.data.attribute_box) &&
       item?.data.attribute_box.length >= 4
-        ? (item?.data.attribute_box[2] * item?.data.attribute_box[3]).toFixed(4)
+        ? (
+            item?.data.attribute_box[2] *
+            item?.data.attribute_box[3] *
+            100
+          ).toFixed(2)
         : undefined,
     [item],
   );
@@ -845,7 +849,7 @@ function LifecycleItem({
                   </span>
                   {areaPx !== undefined && areaPct !== undefined ? (
                     <span className="font-medium text-foreground">
-                      {areaPx} {t("information.pixels", { ns: "common" })}{" "}
+                      {t("information.pixels", { ns: "common", area: areaPx })}{" "}
                       <span className="text-secondary-foreground">·</span>{" "}
                       {areaPct}%
                     </span>