diff --git a/README.md b/README.md
index c51a4d2..0d438d8 100644
--- a/README.md
+++ b/README.md
@@ -193,7 +193,7 @@ username ALL=(ALL) NOPASSWD: ALL
 
 It shows the real-time status, logs, and DAG configurations. You can edit DAG configurations on a browser.
 
-  ![example](assets/images/example.png)
+  ![example](assets/images/Demo.png)
 
   You can switch to the vertical graph with the button on the top right corner.
 
@@ -328,7 +328,7 @@ blackdagger version
 
 This example workflow showcases a data pipeline typically implemented in DevOps and Data Engineering scenarios. It demonstrates an end-to-end data processing cycle starting from data acquisition and cleansing to transformation, loading, analysis, reporting, and ultimately, cleanup.
 
-![Details-TD](assets/images/example.png)
+![Details-TD](assets/images/Demo.png)
 
 The YAML code below represents this workflow:
 
diff --git a/assets/images/Demo.png b/assets/images/Demo.png
deleted file mode 100644
index e28a8f6..0000000
Binary files a/assets/images/Demo.png and /dev/null differ
diff --git a/assets/images/example.png b/assets/images/example.png
index f33d1fe..3de2562 100644
Binary files a/assets/images/example.png and b/assets/images/example.png differ
diff --git a/assets/images/ui-dags.png b/assets/images/ui-dags.png
index 744cf31..ef74f2b 100644
Binary files a/assets/images/ui-dags.png and b/assets/images/ui-dags.png differ
diff --git a/assets/images/ui-dashboard.png b/assets/images/ui-dashboard.png
index 79f34bc..be42dee 100644
Binary files a/assets/images/ui-dashboard.png and b/assets/images/ui-dashboard.png differ
diff --git a/assets/images/ui-details.png b/assets/images/ui-details.png
index e28a8f6..3de2562 100644
Binary files a/assets/images/ui-details.png and b/assets/images/ui-details.png differ
diff --git a/assets/images/ui-history.png b/assets/images/ui-history.png
index 1fc2047..c7ece60 100644
Binary files a/assets/images/ui-history.png and b/assets/images/ui-history.png differ
diff --git a/assets/images/ui-logoutput.png b/assets/images/ui-logoutput.png
index 95655f1..c4c1ba0 100644
Binary files a/assets/images/ui-logoutput.png and b/assets/images/ui-logoutput.png differ
diff --git a/assets/images/ui-search.png b/assets/images/ui-search.png
index e22a628..d944c52 100644
Binary files a/assets/images/ui-search.png and b/assets/images/ui-search.png differ
diff --git a/ui/src/components/molecules/DashboardTimechart.tsx b/ui/src/components/molecules/DashboardTimechart.tsx
index f53db6b..125f5e8 100644
--- a/ui/src/components/molecules/DashboardTimechart.tsx
+++ b/ui/src/components/molecules/DashboardTimechart.tsx
@@ -12,8 +12,9 @@ import {
 } from 'recharts';
 import { statusColorMapping } from '../../consts';
 import { DAGStatus, SchedulerStatus, Status } from '../../models';
+import { WorkflowListItem,WorkflowStatus } from '../../models/api';
 
-type Props = { data: DAGStatus[] };
+type Props = { data: DAGStatus[] | WorkflowListItem[] };
 
 type DataFrame = {
   name: string;
@@ -25,7 +26,7 @@ function DashboardTimechart({ data: input }: Props) {
   const [data, setData] = React.useState<DataFrame[]>([]);
   React.useEffect(() => {
     const transformedData: DataFrame[] = input.map((dagStatus) => {
-      const status: Status | undefined = dagStatus.Status;
+      const status: Status | WorkflowStatus | undefined = dagStatus.Status;
       if (!status || status.StartedAt === '-' || !status.FinishedAt) {
         return null;
       }