diff --git a/components/index.ts b/components/index.ts
index 781f3a8b73..c9c0537492 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./providers/AccountInfo";
+export * from "./providers/ScanStatus";
 export * from "./ui/header/Header";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";
diff --git a/components/providers/ScanStatus.tsx b/components/providers/ScanStatus.tsx
new file mode 100644
index 0000000000..e0d826edbd
--- /dev/null
+++ b/components/providers/ScanStatus.tsx
@@ -0,0 +1,28 @@
+import { formatDuration, intervalToDuration, parseISO } from "date-fns";
+import React from "react";
+
+interface ScanStatusProps {
+  status: string;
+  createdAt: string; // ISO string
+}
+
+export const ScanStatus: React.FC<ScanStatusProps> = ({
+  status,
+  createdAt,
+}) => {
+  const duration = intervalToDuration({
+    start: parseISO(createdAt),
+    end: new Date(),
+  });
+
+  const formattedDuration = formatDuration(duration, { delimiter: ", " });
+
+  return (
+    <div className="border-none max-w-fit">
+      <div className="flex flex-col space-y-2">
+        <span className="text-md font-semibold">{status}</span>
+        <span className="text-sm text-gray-500">{formattedDuration}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/package.json b/package.json
index 3756a3d8e8..11352e1295 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
     "clsx": "2.1.1",
+    "date-fns": "^3.6.0",
     "framer-motion": "~11.1.1",
     "intl-messageformat": "^10.5.0",
     "next": "14.2.3",