diff --git a/packages/ava-react/package.json b/packages/ava-react/package.json
index 5bdf133fd..476d47db4 100644
--- a/packages/ava-react/package.json
+++ b/packages/ava-react/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "@antv/ava-react",
-  "version": "3.3.2",
+  "name": "@formant/ava-react",
+  "version": "3.3.24-formant",
   "description": "React components of AVA.",
   "author": {
-    "name": "AntV",
+    "name": "formant",
     "url": "https://antv.antgroup.com/"
   },
   "homepage": "https://ava.antv.antgroup.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/antvis/AVA/tree/master/packages/ava-react"
+    "url": "https://github.com/FormantIO/AVA/tree/master/packages/ava-react"
   },
   "keywords": [
     "visualization",
@@ -42,7 +42,8 @@
     "build": "father build",
     "test": "jest",
     "coverage": "jest --coverage",
-    "watch": "yarn module && yarn build --w"
+    "watch": "yarn module && yarn build --w",
+    "dev": "vite"
   },
   "sideEffects": false,
   "lint-staged": {
@@ -52,12 +53,13 @@
     ]
   },
   "dependencies": {
-    "@antv/ava": "^3.4.0",
     "@antv/g2": "^5.0.8",
+    "@formant/ava": "3.4.16-formant",
     "canvg": "^4.0.1",
     "classnames": "^2.3.2",
     "katex": "^0.16.4",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.484.0",
     "styled-components": "^5.3.5",
     "uuid": "^8.3.2"
   },
@@ -70,6 +72,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.25",
     "@types/uuid": "^8.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "antd": "^4.16.13",
     "eslint": "^7.32.0",
     "father": "^4.1.0",
@@ -80,7 +83,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "vite": "^5.1.0"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
diff --git a/packages/ava-react/src/InsightCard/InsightCard.tsx b/packages/ava-react/src/InsightCard/InsightCard.tsx
index 0d7288d10..8a541d0d5 100644
--- a/packages/ava-react/src/InsightCard/InsightCard.tsx
+++ b/packages/ava-react/src/InsightCard/InsightCard.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Empty, message, Row, Spin } from 'antd';
 import cx from 'classnames';
 import { isFunction } from 'lodash';
-import { getInsights } from '@antv/ava';
+import { getInsights } from '@formant/ava';
 
 import { copyToClipboard, NarrativeTextVis, NtvPluginManager, TextExporter } from '../NarrativeTextVis';
 
@@ -15,7 +15,7 @@ import { EXPORT_DATA_LABEL, INSIGHT_CARD_PREFIX_CLS } from './constants';
 import { Container } from './styled/container';
 import { defaultMoreButton } from './Toolbar/defaultTools';
 
-import type { InsightInfo } from '@antv/ava';
+import type { InsightInfo } from '@formant/ava';
 import type { Tool } from './Toolbar/types';
 import type { InsightCardProps, InsightCardInfo, InsightDataStatus } from './types';
 
@@ -39,7 +39,7 @@ export const InsightCard: React.FC<InsightCardProps> = ({
   const [dataStatus, setDataStatus] = useState<InsightDataStatus>('SUCCESS');
   const [errorMessage, setErrorMessage] = useState<string>('');
   const pluginManager = useRef<NtvPluginManager>(new NtvPluginManager([...insightCardPresetPlugins, ...extraPlugins]));
-  const { measures = [], dimensions = [], patterns = [] } = currentInsightInfo || {};
+  const { measures = [], dimensions = [], patterns = [], subspace = [], data = [] } = currentInsightInfo || {};
   const ref = useRef<HTMLDivElement>(null);
 
   const calculateAndSetInsightPatterns = useCallback(() => {
@@ -139,8 +139,8 @@ export const InsightCard: React.FC<InsightCardProps> = ({
   };
 
   return (
-    <Container className={cx(className, prefixCls)} style={styles} ref={ref}>
-      <Title title={title} measures={measures} dimensions={dimensions} patterns={patterns} headerTools={headerTools} />
+    <Container className={cx(className, prefixCls)} style={{ ...styles, backgroundColor: '#2d3855' }} ref={ref}>
+      <Title title={title} measures={measures} dimensions={dimensions} patterns={patterns} subspace={subspace} headerTools={headerTools} />
       {/* content */}
       <Spin spinning={dataStatus === 'RUNNING'}>
         {dataStatus === 'SUCCESS' && !!contentSpec ? (
diff --git a/packages/ava-react/src/InsightCard/Title/customStyled.tsx b/packages/ava-react/src/InsightCard/Title/customStyled.tsx
new file mode 100644
index 000000000..ade0c99e3
--- /dev/null
+++ b/packages/ava-react/src/InsightCard/Title/customStyled.tsx
@@ -0,0 +1,131 @@
+import styled from "styled-components";
+import { AlertCircle, Info } from "lucide-react";
+
+const Card = styled.div`
+  background-color: 282f45;
+  border-radius: 8px;
+`
+
+const CardHeader = styled.div`
+  padding: 0.5rem 0.5rem  0.25rem;
+  white-space:nowrap;
+`
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const TitleContainer = styled.div``
+
+const CardTitle = styled.h2`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #bac4e2;
+  margin: 0;
+  display: flex;
+  align-items: center;
+`
+
+const CardDescription = styled.p`
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #bac4e2;
+`
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  background-color: #ef4444;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+`
+
+const CardContent = styled.div`
+  padding: 0 1.25rem 1.25rem;
+`
+
+const Alert = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+`
+
+const AlertTitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+`
+
+const AlertTitle = styled.h3`
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0;
+  color: #bac4e2;
+`
+
+const AlertDescription = styled.p`
+  font-size: 0.75rem;
+  margin: 0;
+  padding-left: 1.25rem;
+  
+`
+
+const Highlight = styled.span`
+  font-weight: 600;
+`
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+const TooltipIcon = styled(Info)`
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #64748b;
+  cursor: help;
+`
+
+const TooltipContent = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 200px;
+  padding: 0.5rem;
+  background-color: #1e293b;
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  
+  ${TooltipContainer}:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: 10px;
+    border-width: 0 6px 6px 6px;
+    border-style: solid;
+    border-color: transparent transparent #1e293b transparent;
+  }
+`
+export { Card, CardHeader, HeaderContainer, TitleContainer, CardTitle, CardDescription, Badge, CardContent, Alert, AlertTitleRow, AlertTitle, AlertDescription, Highlight, TooltipContainer, TooltipIcon, TooltipContent };
\ No newline at end of file
diff --git a/packages/ava-react/src/InsightCard/Title/index.tsx b/packages/ava-react/src/InsightCard/Title/index.tsx
index a9502c464..4c465f90b 100644
--- a/packages/ava-react/src/InsightCard/Title/index.tsx
+++ b/packages/ava-react/src/InsightCard/Title/index.tsx
@@ -1,33 +1,49 @@
 import React from 'react';
 
-import cx from 'classnames';
-import { isFunction, uniq } from 'lodash';
+import {  uniq } from 'lodash';
 
 import { Toolbar } from '../Toolbar';
 import { ALGORITHM_NAME_MAP, ALGORITHM_NAME_MAP_ZH, INSIGHT_CARD_PREFIX_CLS } from '../constants';
-import { MeasureName, Tag as StyledTag } from '../styled/tag';
 
 import type { InsightCardProps, InsightCardInfo } from '../types';
+import { Badge, Card, CardDescription, CardHeader, CardTitle, Highlight, HeaderContainer, TitleContainer, TooltipContainer, TooltipContent, TooltipIcon } from './customStyled';
 
-export type TitleProps = Pick<InsightCardProps, 'headerTools' | 'title' | 'visualizationOptions'> &
-  Pick<InsightCardInfo, 'measures' | 'dimensions' | 'patterns'>;
-export const Title: React.FC<TitleProps> = ({ title, patterns, measures, headerTools, visualizationOptions }) => {
+export type TitleProps = Pick<InsightCardProps, 'headerTools' | 'title' | 'visualizationOptions' |  'period'  > &
+  Pick<InsightCardInfo, 'measures' | 'dimensions' | 'patterns' | 'subspace'>;
+export const Title: React.FC<TitleProps> = ({ title, patterns, measures, headerTools, visualizationOptions, dimensions, period, subspace }) => {
   const prefixCls = INSIGHT_CARD_PREFIX_CLS;
   const insightTypes = uniq(patterns?.map((pattern) => pattern.type) ?? []);
   const measureNames = uniq(measures?.map((measure) => measure.fieldName)).join(',');
   const algorithmNameMap = visualizationOptions?.lang === 'zh-CN' ? ALGORITHM_NAME_MAP_ZH : ALGORITHM_NAME_MAP;
-  const analysisName = insightTypes.map((algorithm) => algorithmNameMap[algorithm]).join(',') ?? '';
-  const defaultTitle = (
-    <div>
-      <MeasureName className={`${prefixCls}-measure-name`}>{measureNames}</MeasureName>
-      <StyledTag className={cx(`${prefixCls}-analysis-tag`)}>{analysisName}</StyledTag>
-    </div>
-  );
-  const customTitle = title && isFunction(title) ? title(defaultTitle) : title;
+  const capitalize = s => s && String(s[0]).toUpperCase() + String(s).slice(1);
+  const analysisName = insightTypes.map((algorithm) => capitalize(algorithmNameMap[algorithm])).join(',') ?? '';
+ 
+  const newTitle  = ( <Card>
+    <CardHeader>
+      <HeaderContainer>
+        <TitleContainer>
+          <CardTitle>
+            {title ? `${title}- ${measureNames}`: {measureNames}}
+            <Badge> {analysisName}</Badge>
+          </CardTitle>
+          <CardDescription> 
+           {subspace && subspace.length > 0 && subspace.map(_ => <><Highlight> {_.dimension}: </Highlight> <Highlight> {_.value} </Highlight></> )}   
+          </CardDescription>
+        </TitleContainer>
+        <TooltipContainer>
+          <TooltipIcon />
+          <TooltipContent>
+            <p>This chart displays that {analysisName} was detected.</p>
+          </TooltipContent>
+        </TooltipContainer>
+      </HeaderContainer>
+    </CardHeader>
+      </Card>
+  )
 
   return (
     <div className={`${prefixCls}-title`}>
-      {customTitle ?? defaultTitle}
+      {newTitle}
       {!!headerTools?.length && (
         <div className={`${prefixCls}-title-tools`}>
           <Toolbar tools={headerTools} />
diff --git a/packages/ava-react/src/InsightCard/constants.tsx b/packages/ava-react/src/InsightCard/constants.tsx
index 1df84a932..0934d40d4 100644
--- a/packages/ava-react/src/InsightCard/constants.tsx
+++ b/packages/ava-react/src/InsightCard/constants.tsx
@@ -1,4 +1,4 @@
-import { InsightType } from '@antv/ava';
+import { InsightType } from '@formant/ava';
 
 import { getPrefixCls } from '../utils';
 /** class name prefix for InsightCard, avar-insight-card */
diff --git a/packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx b/packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx
index 6f75bdeab..09b6f94df 100644
--- a/packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx
+++ b/packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx
@@ -16,14 +16,14 @@ export const G2Chart = ({ spec, height, width }: { spec: G2Spec; height?: number
         autoFit: true,
         padding: 'auto',
       });
-      chartRef.current.options(spec);
+      chartRef.current.options({ ...spec, theme: 'classicDark' });
     } else {
       chartRef.current.clear();
       chartRef.current.options({
         autoFit: true,
         padding: 'auto',
       });
-      chartRef.current.options(spec);
+      chartRef.current.options({ ...spec, theme: 'classicDark' });
     }
 
     if (!isRendering.current) {
diff --git a/packages/ava-react/src/InsightCard/ntvPlugins/plugins/subspaceDescriptionPlugin.tsx b/packages/ava-react/src/InsightCard/ntvPlugins/plugins/subspaceDescriptionPlugin.tsx
index df9c99dc8..54a62d721 100644
--- a/packages/ava-react/src/InsightCard/ntvPlugins/plugins/subspaceDescriptionPlugin.tsx
+++ b/packages/ava-react/src/InsightCard/ntvPlugins/plugins/subspaceDescriptionPlugin.tsx
@@ -5,19 +5,8 @@ import { createCustomPhraseFactory } from "../../../NarrativeTextVis";
 import { SUBSPACE_DESCRIPTION_PLUGIN_KEY } from "../../constants";
 
 export const SubspaceDescription = ({ subspaceDescription }: { subspaceDescription: string }) => {
-  return (
-    <Typography.Text
-      ellipsis={{ tooltip: subspaceDescription }}
-      style={{
-        display: 'block',
-        color: 'rgba(0, 0, 0, 0.3)',
-        backgroundColor: 'rgba(0, 0, 0, 0.02)',
-        marginTop: '10px'
-      }}
-    >
-      {subspaceDescription}
-    </Typography.Text>
-  );
+  return (<></>)
+  
 };
 
 export const subspaceDescriptionPlugin = createCustomPhraseFactory({
diff --git a/packages/ava-react/src/InsightCard/ntvPlugins/types.ts b/packages/ava-react/src/InsightCard/ntvPlugins/types.ts
index 85f65e73d..227de09aa 100644
--- a/packages/ava-react/src/InsightCard/ntvPlugins/types.ts
+++ b/packages/ava-react/src/InsightCard/ntvPlugins/types.ts
@@ -1,5 +1,5 @@
 import type { G2Spec } from '@antv/g2';
-import type { CustomBlockElement } from '@antv/ava';
+import type { CustomBlockElement } from '@formant/ava';
 
 export type ChartsSchema = CustomBlockElement & {
   chartSpecs: G2Spec[];
diff --git a/packages/ava-react/src/InsightCard/styled/container.tsx b/packages/ava-react/src/InsightCard/styled/container.tsx
index 2fa4414c8..882162f32 100644
--- a/packages/ava-react/src/InsightCard/styled/container.tsx
+++ b/packages/ava-react/src/InsightCard/styled/container.tsx
@@ -4,9 +4,9 @@ export const Container = styled.div`
   margin-bottom: 8px;
   padding: 8px;
   font-size: 12px;
-  font-family: roboto-regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB',
+  font-family: Moderat, roboto-regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  background-color: #fff;
+  background-color: rgb(45, 56, 85);
   border-radius: 2px;
-  border: 1px solid #e8e8e8;
+  border: 1px solid rgb(30, 41, 59);
 `;
diff --git a/packages/ava-react/src/InsightCard/styled/tag.tsx b/packages/ava-react/src/InsightCard/styled/tag.tsx
index b8be31091..8bf29f16f 100644
--- a/packages/ava-react/src/InsightCard/styled/tag.tsx
+++ b/packages/ava-react/src/InsightCard/styled/tag.tsx
@@ -4,11 +4,11 @@ export const Tag = styled.span`
   display: inline-block;
   margin-right: 4px;
   padding: 3px;
-  color: #250462;
+  color: #0a0b10;
   font-weight: 400;
   font-size: 12px;
   line-height: 12px;
-  background-color: rgba(37, 4, 98, 0.08);
+  background-color: #f89973;
   border-radius: 2px;
 `;
 
@@ -16,7 +16,7 @@ export const MeasureName = styled.span`
   display: inline-block;
   height: 20px;
   margin-right: 4px;
-  color: rgba(0, 0, 0, 0.88);
+  color: #18d2ff;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
diff --git a/packages/ava-react/src/InsightCard/types.ts b/packages/ava-react/src/InsightCard/types.ts
index a5a52206a..d023c5faf 100644
--- a/packages/ava-react/src/InsightCard/types.ts
+++ b/packages/ava-react/src/InsightCard/types.ts
@@ -1,7 +1,7 @@
 import type { NtvPluginType } from '../NarrativeTextVis';
 import type { CSSProperties, ReactNode } from 'react';
 import type { Tool } from './Toolbar/types';
-import type { InsightInfo, InsightOptions, NarrativeTextSpec, InsightVisualizationOptions } from '@antv/ava';
+import type { InsightInfo, InsightOptions, NarrativeTextSpec, InsightVisualizationOptions } from '@formant/ava';
 
 export type CardType = 'mini' | 'standard' | 'expand' | 'detail';
 
@@ -36,6 +36,8 @@ export type InsightCardProps = CommonProps &
   InsightCardEventHandlers & {
     /** title of insight card, analysis name and measure name by default 洞察卡片的标题，默认为一个分析类型+分析指标名称 */
     title?: ((defaultTitle?: ReactNode) => ReactNode) | ReactNode;
+    period?: string;
+
     /** basic info of an insight, if not defined, will be referred by autoInsightOptions. One of `insightInfo` and `autoInsightOptions` must be assigned 洞察结果数据，如果不传入，需要通过配置`autoInsightOptions` 指定自动产生洞察结果的方式。`autoInsightOptions` 和 `insightInfo` 至少有一个必须被赋值 */
     insightInfo?: InsightCardInfo;
     /** tools in the header of card, by default, there are no tools 标题右侧的工具栏 */
diff --git a/packages/ava-react/src/InsightCard/utils/specGenerator.ts b/packages/ava-react/src/InsightCard/utils/specGenerator.ts
index 477e7ff39..8e94d80be 100644
--- a/packages/ava-react/src/InsightCard/utils/specGenerator.ts
+++ b/packages/ava-react/src/InsightCard/utils/specGenerator.ts
@@ -1,9 +1,9 @@
-import { Subspace, generateInsightVisualizationSpec } from '@antv/ava';
+import { Subspace, generateInsightVisualizationSpec } from '@formant/ava';
 
 import { DISPLAY_CHARTS_PLUGIN_KEY, SUBSPACE_DESCRIPTION_PLUGIN_KEY } from '../constants';
 
 import type { G2Spec } from '@antv/g2';
-import type { NarrativeTextSpec, ParagraphSpec, InsightInfo, InsightVisualizationOptions } from '@antv/ava';
+import type { NarrativeTextSpec, ParagraphSpec, InsightInfo, InsightVisualizationOptions } from '@formant/ava';
 
 /**
  * generate description of data subspace (the conditions of data subset)
@@ -41,8 +41,8 @@ export const generateContentVisSpec = (
     const chartSpecs: G2Spec[] = [];
 
     if (insightInfo.subspace?.length) {
-      const subspaceDescriptionSpec = getSubspaceDescriptionSpec(insightInfo.subspace);
-      narrativeParagraphs.push(subspaceDescriptionSpec);
+      // const subspaceDescriptionSpec = getSubspaceDescriptionSpec(insightInfo.subspace);
+      // narrativeParagraphs.push(subspaceDescriptionSpec);
     }
 
     visualizationSpecs.forEach((visualizationSpec) => {
diff --git a/packages/ava-react/src/NarrativeTextVis/NarrativeTextVis.tsx b/packages/ava-react/src/NarrativeTextVis/NarrativeTextVis.tsx
index ced61d04b..5c977b915 100644
--- a/packages/ava-react/src/NarrativeTextVis/NarrativeTextVis.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/NarrativeTextVis.tsx
@@ -17,7 +17,7 @@ import type { NarrativeTextVisProps } from './types';
 export function NarrativeTextVis({
   spec,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   showCollapse = false,
diff --git a/packages/ava-react/src/NarrativeTextVis/chore/exporter/TextExporter.ts b/packages/ava-react/src/NarrativeTextVis/chore/exporter/TextExporter.ts
index 7aff610a9..46d45708c 100644
--- a/packages/ava-react/src/NarrativeTextVis/chore/exporter/TextExporter.ts
+++ b/packages/ava-react/src/NarrativeTextVis/chore/exporter/TextExporter.ts
@@ -8,7 +8,7 @@ import {
   isCustomPhrase,
   isEntityPhrase,
   getHeadingWeight,
-} from '@antv/ava';
+} from '@formant/ava';
 import { pad } from 'lodash';
 
 import { PluginManager } from '../plugin';
@@ -16,7 +16,7 @@ import { NTV_PREFIX_CLS } from '../../constants';
 
 import { ImageExtra, transformHtml } from './helpers/transformHtml';
 
-import type { NarrativeTextSpec, SectionSpec, ParagraphSpec, BulletItemSpec, PhraseSpec } from '@antv/ava';
+import type { NarrativeTextSpec, SectionSpec, ParagraphSpec, BulletItemSpec, PhraseSpec } from '@formant/ava';
 
 const NTV_CONTAINER_CLS = `${NTV_PREFIX_CLS}-container`;
 
diff --git a/packages/ava-react/src/NarrativeTextVis/chore/plugin/PluginManager.ts b/packages/ava-react/src/NarrativeTextVis/chore/plugin/PluginManager.ts
index a2be0f665..b7b272e06 100644
--- a/packages/ava-react/src/NarrativeTextVis/chore/plugin/PluginManager.ts
+++ b/packages/ava-react/src/NarrativeTextVis/chore/plugin/PluginManager.ts
@@ -1,10 +1,10 @@
-import { isCustomPhrase, isEntityPhrase } from '@antv/ava';
+import { isCustomPhrase, isEntityPhrase } from '@formant/ava';
 import { isArray } from 'lodash';
 
 import { isBlockDescriptor, isEntityDescriptor, isCustomPhraseDescriptor } from './plugin-protocol.type';
 import { presetPlugins } from './presets';
 
-import type { EntityType, EntityMetaData, PhraseSpec } from '@antv/ava';
+import type { EntityType, EntityMetaData, PhraseSpec } from '@formant/ava';
 import type { PhraseDescriptor, BlockDescriptor, PluginType } from './plugin-protocol.type';
 
 function getPlugins(plugins?: PluginType[]) {
diff --git a/packages/ava-react/src/NarrativeTextVis/chore/plugin/createEntityPhraseFactory.tsx b/packages/ava-react/src/NarrativeTextVis/chore/plugin/createEntityPhraseFactory.tsx
index 4747641bc..6c3bd38f2 100644
--- a/packages/ava-react/src/NarrativeTextVis/chore/plugin/createEntityPhraseFactory.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/chore/plugin/createEntityPhraseFactory.tsx
@@ -6,7 +6,7 @@ import { functionalize } from '../../utils';
 
 import { createPhraseFactory } from './createPhraseFactory';
 
-import type { EntityType, EntityMetaData } from '@antv/ava';
+import type { EntityType, EntityMetaData } from '@formant/ava';
 import type { CSSProperties } from 'react';
 import type { PhraseDescriptor, SpecificEntityPhraseDescriptor, CustomEntityMode } from './plugin-protocol.type';
 import type { ThemeStylesProps } from '../../types';
diff --git a/packages/ava-react/src/NarrativeTextVis/chore/plugin/plugin-protocol.type.ts b/packages/ava-react/src/NarrativeTextVis/chore/plugin/plugin-protocol.type.ts
index a8bec496d..5dbb979e9 100644
--- a/packages/ava-react/src/NarrativeTextVis/chore/plugin/plugin-protocol.type.ts
+++ b/packages/ava-react/src/NarrativeTextVis/chore/plugin/plugin-protocol.type.ts
@@ -1,6 +1,6 @@
 import { isObject } from 'lodash';
 
-import type { EntityMetaData, EntityType } from '@antv/ava';
+import type { EntityMetaData, EntityType } from '@formant/ava';
 import type { CSSProperties, ReactNode } from 'react';
 import type { TooltipProps } from 'antd';
 import type { EntityEncoding, ThemeStylesProps } from '../../types';
diff --git a/packages/ava-react/src/NarrativeTextVis/chore/plugin/presets/createCompare.tsx b/packages/ava-react/src/NarrativeTextVis/chore/plugin/presets/createCompare.tsx
index 078cda5cc..86d069ef5 100644
--- a/packages/ava-react/src/NarrativeTextVis/chore/plugin/presets/createCompare.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/chore/plugin/presets/createCompare.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 
 import { get } from 'lodash';
-import { ValueAssessment, EntityMetaData } from '@antv/ava';
+import { ValueAssessment, EntityMetaData } from '@formant/ava';
 
 import { ArrowDown, ArrowUp } from '../../../assets/icons';
 import { createEntityPhraseFactory } from '../createEntityPhraseFactory';
diff --git a/packages/ava-react/src/NarrativeTextVis/index.ts b/packages/ava-react/src/NarrativeTextVis/index.ts
index d167b30ab..fd2d27e1c 100644
--- a/packages/ava-react/src/NarrativeTextVis/index.ts
+++ b/packages/ava-react/src/NarrativeTextVis/index.ts
@@ -76,6 +76,6 @@ export type {
   Structure,
   StructureTemp,
   Variable,
-} from '@antv/ava';
+} from '@formant/ava';
 export type { NarrativeTextVisProps } from './types';
 export type { PluginType as NtvPluginType } from './chore/plugin';
diff --git a/packages/ava-react/src/NarrativeTextVis/line-charts/line/SingleLineChart.tsx b/packages/ava-react/src/NarrativeTextVis/line-charts/line/SingleLineChart.tsx
index a0bf6fd80..8d9194b47 100644
--- a/packages/ava-react/src/NarrativeTextVis/line-charts/line/SingleLineChart.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/line-charts/line/SingleLineChart.tsx
@@ -12,7 +12,7 @@ const LINEAR_FILL_COLOR_ID = 'wsc-line-fill';
 export const SingleLineChart: React.FC<{ data: number[] } & ThemeStylesProps> = ({
   data,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
 }) => {
   const [Svg, fontSize] = useSvgWrapper(size);
   const { width, height, linePath, polygonPath } = useLineCompute(fontSize, data);
diff --git a/packages/ava-react/src/NarrativeTextVis/line-charts/proportion/ProportionChart.tsx b/packages/ava-react/src/NarrativeTextVis/line-charts/proportion/ProportionChart.tsx
index af928a577..128aacc9d 100644
--- a/packages/ava-react/src/NarrativeTextVis/line-charts/proportion/ProportionChart.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/line-charts/proportion/ProportionChart.tsx
@@ -10,7 +10,7 @@ import type { ThemeStylesProps } from '../../types';
 export const ProportionChart: React.FC<{ data: number } & ThemeStylesProps> = ({
   data,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
 }) => {
   const [Svg, fontSize] = useSvgWrapper(size);
   const r = fontSize / 2;
diff --git a/packages/ava-react/src/NarrativeTextVis/nested/index.tsx b/packages/ava-react/src/NarrativeTextVis/nested/index.tsx
index 4b534e24d..db9c85316 100644
--- a/packages/ava-react/src/NarrativeTextVis/nested/index.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/nested/index.tsx
@@ -5,7 +5,7 @@ import { v4 } from 'uuid';
 import { Paragraph, type ParagraphProps } from '../paragraph';
 import { Container } from '../styled';
 
-import type { NestedParagraphSpec } from '@antv/ava';
+import type { NestedParagraphSpec } from '@formant/ava';
 
 type NestedParagraphProps = Omit<ParagraphProps, 'spec'> & {
   spec: NestedParagraphSpec;
diff --git a/packages/ava-react/src/NarrativeTextVis/paragraph/Bullets.tsx b/packages/ava-react/src/NarrativeTextVis/paragraph/Bullets.tsx
index 14ae0e4ba..1c82ae10b 100644
--- a/packages/ava-react/src/NarrativeTextVis/paragraph/Bullets.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/paragraph/Bullets.tsx
@@ -9,7 +9,7 @@ import { getCollapseProps } from '../utils';
 import { classnames as cx } from '../../utils';
 import { presetPluginManager } from '../chore/plugin';
 
-import type { BulletsParagraphSpec } from '@antv/ava';
+import type { BulletsParagraphSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, ParagraphEvents } from '../types';
 
 type BulletsProps = ThemeStylesProps &
@@ -22,7 +22,7 @@ type BulletsProps = ThemeStylesProps &
 export function Bullets({
   spec,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   showCollapse = false,
diff --git a/packages/ava-react/src/NarrativeTextVis/paragraph/Heading.tsx b/packages/ava-react/src/NarrativeTextVis/paragraph/Heading.tsx
index a5c06845e..c156ca095 100644
--- a/packages/ava-react/src/NarrativeTextVis/paragraph/Heading.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/paragraph/Heading.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getHeadingWeight } from '@antv/ava';
+import { getHeadingWeight } from '@formant/ava';
 import { isNaN } from 'lodash';
 
 import * as Elements from '../styled';
@@ -9,8 +9,10 @@ import { Phrases } from '../phrases';
 import { classnames as cx } from '../../utils';
 import { presetPluginManager } from '../chore/plugin';
 
-import type { HeadingParagraphSpec } from '@antv/ava';
+import type { HeadingParagraphSpec } from '@formant/ava';
 import type { ExtensionProps, PhraseEvents, ThemeStylesProps } from '../types';
+import { Alert, AlertDescription, AlertTitle, AlertTitleRow } from '../../InsightCard/Title/customStyled';
+import { AlertCircle } from 'lucide-react';
 
 type HeadingProps = ExtensionProps &
   ThemeStylesProps &
@@ -20,7 +22,7 @@ type HeadingProps = ExtensionProps &
 
 export function Heading({
   spec,
-  theme = 'light',
+  theme = 'dark',
   size = 'normal',
   palette,
   pluginManager = presetPluginManager,
@@ -37,8 +39,13 @@ export function Heading({
   const Tag = Elements[`H${weight}`];
 
   return (
-    <Tag {...themeStyles} className={cx(`${NTV_PREFIX_CLS}-h${weight}`, spec.className)} style={spec.styles}>
+    
+           
+         
+          <Tag {...themeStyles} className={cx(`${NTV_PREFIX_CLS}-h${weight}`, spec.className)} style={spec.styles}>
       <Phrases spec={spec.phrases} pluginManager={pluginManager} {...themeStyles} {...events} />
     </Tag>
+        
+    
   );
 }
diff --git a/packages/ava-react/src/NarrativeTextVis/paragraph/Headline.tsx b/packages/ava-react/src/NarrativeTextVis/paragraph/Headline.tsx
index 5b5747c72..ce89ed3d1 100644
--- a/packages/ava-react/src/NarrativeTextVis/paragraph/Headline.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/paragraph/Headline.tsx
@@ -6,8 +6,11 @@ import { Phrases } from '../phrases';
 import { classnames as cx } from '../../utils';
 import { presetPluginManager } from '../chore/plugin';
 
-import type { HeadlineSpec } from '@antv/ava';
+import type { HeadlineSpec } from '@formant/ava';
 import type { ExtensionProps, ParagraphEvents, ThemeStylesProps } from '../types';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle, AlertTitleRow } from '../../InsightCard/Title/customStyled';
+
 
 type HeadlineProps = Pick<ExtensionProps, 'pluginManager'> &
   ThemeStylesProps &
@@ -19,7 +22,7 @@ export function Headline({
   spec,
   pluginManager = presetPluginManager,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   ...events
 }: HeadlineProps) {
   const { onClickParagraph, onMouseEnterParagraph, onMouseLeaveParagraph, ...phraseEvents } = events || {};
@@ -39,6 +42,12 @@ export function Headline({
   };
 
   return (
+    <Alert>
+          <AlertTitleRow>
+            <AlertCircle size={16} color="#ef4444" />
+            <AlertTitle>Time Series Outlier Detected</AlertTitle>
+          </AlertTitleRow>
+          <AlertDescription>
     <StyledHeadline
       onClick={onClick}
       onMouseEnter={onMouseEnter}
@@ -49,5 +58,7 @@ export function Headline({
     >
       <Phrases spec={spec.phrases} pluginManager={pluginManager} {...themeStyles} {...phraseEvents} />
     </StyledHeadline>
+    </AlertDescription>
+        </Alert>
   );
 }
diff --git a/packages/ava-react/src/NarrativeTextVis/paragraph/TextLine.tsx b/packages/ava-react/src/NarrativeTextVis/paragraph/TextLine.tsx
index 9c31c8ba5..d779154a3 100644
--- a/packages/ava-react/src/NarrativeTextVis/paragraph/TextLine.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/paragraph/TextLine.tsx
@@ -6,8 +6,11 @@ import { Phrases } from '../phrases';
 import { classnames as cx } from '../../utils';
 import { presetPluginManager } from '../chore/plugin';
 
-import type { TextParagraphSpec } from '@antv/ava';
+import type { TextParagraphSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, PhraseEvents } from '../types';
+import { AlertDescription, AlertTitle } from '../../InsightCard/Title/customStyled';
+import { Alert, AlertTitleRow } from '../../InsightCard/Title/customStyled';
+import { AlertCircle } from 'lucide-react';
 
 type TextLineProps = ThemeStylesProps &
   Pick<ExtensionProps, 'pluginManager'> &
@@ -18,13 +21,29 @@ type TextLineProps = ThemeStylesProps &
 export function TextLine({
   spec,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   ...events
 }: TextLineProps) {
   const themeStyles = { size, theme, palette };
+  let baseText = "Anamoly was detected";
+  if (JSON.stringify(spec).includes("outliers")) {
+    baseText = "Time Series Outlier Detected";
+  } else if (JSON.stringify(spec).includes("trend")) {
+    baseText = "Trend Anamoly Detected";
+  } else if (JSON.stringify(spec).includes("correlated")) {
+    baseText = "Correlation Detected";
+  } else if (JSON.stringify(spec).includes("significantly higher than the other dimensions")) {
+    baseText = "Majority Anamoly Detected";
+  }
   return (
+    <Alert>
+         <AlertTitleRow>
+         <AlertCircle size={16} color="#ef4444" />
+         <AlertTitle>{baseText}</AlertTitle>
+         </AlertTitleRow>
+            <AlertDescription>
     <StyledP
       {...themeStyles}
       indents={spec.indents}
@@ -32,6 +51,10 @@ export function TextLine({
       style={spec.styles}
     >
       <Phrases spec={spec.phrases} pluginManager={pluginManager} {...themeStyles} {...events} />
-    </StyledP>
-  );
+      </StyledP>
+      </AlertDescription>
+     
+      </Alert>
+     
+    )
 }
diff --git a/packages/ava-react/src/NarrativeTextVis/paragraph/index.tsx b/packages/ava-react/src/NarrativeTextVis/paragraph/index.tsx
index 2e94271b3..6b8135aaf 100644
--- a/packages/ava-react/src/NarrativeTextVis/paragraph/index.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/paragraph/index.tsx
@@ -7,13 +7,13 @@ import {
   isTextParagraph,
   isBulletParagraph,
   isDividerParagraph,
-} from '@antv/ava';
+} from '@formant/ava';
 
 import { Heading } from './Heading';
 import { TextLine } from './TextLine';
 import { Bullets } from './Bullets';
 
-import type { ParagraphSpec } from '@antv/ava';
+import type { ParagraphSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, ParagraphEvents } from '../types';
 
 export type ParagraphProps = ThemeStylesProps &
@@ -30,7 +30,7 @@ export function Paragraph({
   spec,
   pluginManager,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   ...events
 }: ParagraphProps) {
diff --git a/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx b/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
index ea2378427..8fee7931d 100644
--- a/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Tooltip, TooltipProps } from 'antd';
-import { isTextPhrase, isEntityPhrase, isEscapePhrase, isFormulaPhrase, isImagePhrase } from '@antv/ava';
+import { isTextPhrase, isEntityPhrase, isEscapePhrase, isFormulaPhrase, isImagePhrase } from '@formant/ava';
 import { isFunction, kebabCase, isEmpty, isNil } from 'lodash';
 import katex from 'katex';
 
@@ -13,7 +13,7 @@ import { PhraseDescriptor, presetPluginManager } from '../chore/plugin';
 import { getThemeColor } from '../theme';
 
 import type { ReactNode } from 'react';
-import type { PhraseSpec, EntityPhraseSpec, CustomPhraseSpec } from '@antv/ava';
+import type { PhraseSpec, EntityPhraseSpec, CustomPhraseSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, PhraseEvents } from '../types';
 
 type PhraseProps = ThemeStylesProps &
@@ -34,7 +34,7 @@ function renderPhraseByDescriptor({
   events: PhraseEvents;
 }) {
   const { value = '', metadata = {}, styles: specStyles = {} } = spec;
-  const { theme = 'light' } = themeStyles;
+  const theme = 'dark';
 
   const {
     overwrite,
@@ -92,10 +92,10 @@ function renderPhraseByDescriptor({
   const showTooltip = tooltip && (tooltip?.title(value, metadata, themeStyles) as TooltipProps['title']);
   return !isNil(showTooltip) ? (
     <Tooltip
-      color={theme === 'dark' ? 'white' : undefined}
+      color={'black'}
       {...tooltip}
       overlayInnerStyle={
-        theme === 'dark' ? { color: getThemeColor({ colorToken: 'colorBase', theme: 'light' }) } : undefined
+        { color: getThemeColor({ colorToken: 'colorBase', theme: 'dark' }) }
       }
       title={showTooltip}
     >
@@ -110,7 +110,7 @@ function renderPhraseByDescriptor({
 export const Phrase: React.FC<PhraseProps> = ({
   spec: phrase,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   ...events
diff --git a/packages/ava-react/src/NarrativeTextVis/phrases/index.tsx b/packages/ava-react/src/NarrativeTextVis/phrases/index.tsx
index 32a69cd71..05d6d69fe 100644
--- a/packages/ava-react/src/NarrativeTextVis/phrases/index.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/phrases/index.tsx
@@ -4,7 +4,7 @@ import { presetPluginManager } from '../chore/plugin';
 
 import { Phrase } from './Phrase';
 
-import type { PhraseSpec } from '@antv/ava';
+import type { PhraseSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, PhraseEvents } from '../types';
 
 type PhrasesProps = ThemeStylesProps &
@@ -20,7 +20,7 @@ type PhrasesProps = ThemeStylesProps &
 export function Phrases({
   spec,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   ...events
diff --git a/packages/ava-react/src/NarrativeTextVis/section/index.tsx b/packages/ava-react/src/NarrativeTextVis/section/index.tsx
index 5d795e9fc..8e7723e57 100644
--- a/packages/ava-react/src/NarrativeTextVis/section/index.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/section/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { isCustomSection, isStandardSection } from '@antv/ava';
+import { isCustomSection, isStandardSection } from '@formant/ava';
 import { v4 } from 'uuid';
 import { isFunction } from 'lodash';
 
@@ -10,7 +10,7 @@ import { classnames as cx } from '../../utils';
 import { Paragraph } from '../paragraph';
 import { Container } from '../styled';
 
-import type { SectionSpec } from '@antv/ava';
+import type { SectionSpec } from '@formant/ava';
 import type { ThemeStylesProps, ExtensionProps, SectionEvents } from '../types';
 
 type SectionProps = ThemeStylesProps &
@@ -26,7 +26,7 @@ type SectionProps = ThemeStylesProps &
 export function Section({
   spec,
   size = 'normal',
-  theme = 'light',
+  theme = 'dark',
   palette,
   pluginManager = presetPluginManager,
   showCollapse = false,
diff --git a/packages/ava-react/src/NarrativeTextVis/styled/bullet.tsx b/packages/ava-react/src/NarrativeTextVis/styled/bullet.tsx
index 71bd43170..e0f73d97c 100644
--- a/packages/ava-react/src/NarrativeTextVis/styled/bullet.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/styled/bullet.tsx
@@ -18,6 +18,24 @@ export const Bullet = styled.div<ThemeStylesProps>`
 
 export const Ol = styled(Bullet)`
   list-style-type: decimal;
+  max-height: 100px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #bac4e2;
+    border-radius: 0.25rem;
+    -webkit-border-radius: 0.25rem;
+    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: #bac4e2;
+  }
 `;
 
 export const Ul = styled(Bullet)`
diff --git a/packages/ava-react/src/NarrativeTextVis/styled/paragraph.tsx b/packages/ava-react/src/NarrativeTextVis/styled/paragraph.tsx
index 7cac9a9ac..c64085a1f 100644
--- a/packages/ava-react/src/NarrativeTextVis/styled/paragraph.tsx
+++ b/packages/ava-react/src/NarrativeTextVis/styled/paragraph.tsx
@@ -2,18 +2,23 @@ import styled from 'styled-components';
 
 import { getThemeColor, getFontSize, getLineHeight } from '../theme';
 
-import type { TextParagraphSpec } from '@antv/ava';
+import type { TextParagraphSpec } from '@formant/ava';
 import type { ThemeStylesProps } from '../types';
 
 export const P = styled.p<ThemeStylesProps & Pick<TextParagraphSpec, 'indents'>>`
   white-space: pre-wrap; // 默认 pre 显示，可以显示空格和转义字符
   font-family: PingFangSC, sans-serif;
-  color: ${({ theme, palette }) => getThemeColor({ colorToken: 'colorBase', theme, palette, type: 'text' })};
-  font-size: ${({ size }) => getFontSize(size)};
+  color: #bac4e2;
+  font-size: 12px;
   min-height: 24px;
-  line-height: ${({ size }) => getLineHeight(size)};
+      font-size: 16px;
+      line-height: 24px;
   margin-bottom: 4px;
   text-indent: ${({ indents }) => indents?.find((item) => item.type === 'first-line')?.length};
   padding-left: ${({ indents }) => indents?.find((item) => item.type === 'left')?.length};
   padding-right: ${({ indents }) => indents?.find((item) => item.type === 'right')?.length};
+  span {
+    font-size: 15px;
+    line-height: 24px;
+  }
 `;
diff --git a/packages/ava-react/src/NarrativeTextVis/theme/getThemeColor.ts b/packages/ava-react/src/NarrativeTextVis/theme/getThemeColor.ts
index 52b979104..de9237465 100644
--- a/packages/ava-react/src/NarrativeTextVis/theme/getThemeColor.ts
+++ b/packages/ava-react/src/NarrativeTextVis/theme/getThemeColor.ts
@@ -2,7 +2,7 @@ import { get } from 'lodash';
 
 import { seedToken } from './seed';
 
-import type { EntityType } from '@antv/ava';
+import type { EntityType } from '@formant/ava';
 import type { ColorToken } from './seed';
 import type { ThemeType, ThemeStylesProps } from '../types';
 
diff --git a/packages/ava-react/src/NarrativeTextVis/types/enhance-spec.ts b/packages/ava-react/src/NarrativeTextVis/types/enhance-spec.ts
index 370a15952..d6fd218d1 100644
--- a/packages/ava-react/src/NarrativeTextVis/types/enhance-spec.ts
+++ b/packages/ava-react/src/NarrativeTextVis/types/enhance-spec.ts
@@ -1,4 +1,4 @@
-import type { EntityMetaData } from '@antv/ava';
+import type { EntityMetaData } from '@formant/ava';
 import type { ThemeStylesProps } from './props';
 
 export type TypeOrMetaReturnType<T> =
diff --git a/packages/ava-react/src/NarrativeTextVis/types/props.ts b/packages/ava-react/src/NarrativeTextVis/types/props.ts
index 82e0544c1..674ccdefe 100644
--- a/packages/ava-react/src/NarrativeTextVis/types/props.ts
+++ b/packages/ava-react/src/NarrativeTextVis/types/props.ts
@@ -7,7 +7,7 @@ import type {
   BulletItemSpec,
   SectionSpec,
   NarrativeTextSpec,
-} from '@antv/ava';
+} from '@formant/ava';
 import type { PluginManager } from '../chore/plugin';
 
 export type ThemeType = 'light' | 'dark';
diff --git a/packages/ava-react/src/demo/default-theme-colors.ts b/packages/ava-react/src/demo/default-theme-colors.ts
new file mode 100644
index 000000000..2f153f105
--- /dev/null
+++ b/packages/ava-react/src/demo/default-theme-colors.ts
@@ -0,0 +1,359 @@
+export const DEFAULT_THEME_COLORS = {
+    // Background colors
+    "--color-background-primary": {
+        displayName: "Background Primary",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#cac8c5",
+    },
+    "--color-background-secondary": {
+        displayName: "Background Secondary",
+        defaultValue: "#282f45",
+        defaultLightValue: "#dad7d4",
+    },
+    "--color-background-tertiary": {
+        displayName: "Background Tertiary",
+        defaultValue: "#1c1e2d",
+        defaultLightValue: "#e6e4e2",
+    },
+    "--color-background-surface": {
+        displayName: "Background Surface",
+        defaultValue: "#000000",
+        defaultLightValue: "#ffffff",
+    },
+    "--color-background-active": {
+        displayName: "Background Active",
+        defaultValue: "#3b4668",
+        defaultLightValue: "#aca7a1",
+    },
+    "--color-background-active2": {
+        displayName: "Background Active 2",
+        defaultValue: "#657197",
+        defaultLightValue: "#817e7c",
+    },
+    "--color-background-header-module": {
+        displayName: "Background Header Module",
+        defaultValue: "#1c1e2d",
+        defaultLightValue: "#e6e4e2",
+    },
+    "--color-background-header-module-active": {
+        displayName: "Background Header Module Active",
+        defaultValue: "#657197",
+        defaultLightValue: "#817e7c",
+    },
+    "--color-background-header-table": {
+        displayName: "Background Header Table",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#cac8c5",
+    },
+
+    // Text colors
+    "--color-text-primary": {
+        displayName: "Text Primary",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#000000",
+    },
+    "--color-text-secondary": {
+        displayName: "Text Secondary",
+        defaultValue: "#bac4e2",
+        defaultLightValue: "#4b4948",
+    },
+    "--color-text-tertiary": {
+        displayName: "Text Tertiary",
+        defaultValue: "#657197",
+        defaultLightValue: "#817e7c",
+    },
+    "--color-text-muted": {
+        displayName: "Text Muted",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#cac8c5",
+    },
+    "--color-text-inverse": {
+        displayName: "Text Inverse",
+        defaultValue: "#000000",
+        defaultLightValue: "#ffffff",
+    },
+    "--color-text-header-module": {
+        displayName: "Text Header Module",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#000000",
+    },
+    "--color-text-header-table": {
+        displayName: "Text Header Table",
+        defaultValue: "#dad7d4",
+        defaultLightValue: "#000000",
+    },
+
+    // Border colors
+    "--color-border-primary": {
+        displayName: "Border Primary",
+        defaultValue: "#1c1e2d",
+        defaultLightValue: "#e6e4e2",
+    },
+    "--color-border-secondary": {
+        displayName: "Border Secondary",
+        defaultValue: "#3b4668",
+        defaultLightValue: "#aca7a1",
+    },
+    "--color-border-tertiary": {
+        displayName: "Border Tertiary",
+        defaultValue: "#282f45",
+        defaultLightValue: "#dad7d4",
+    },
+    "--color-border-active": {
+        displayName: "Border Active",
+        defaultValue: "#18d2ff",
+        defaultLightValue: "#2e79be",
+    },
+    "--color-border-current": {
+        displayName: "Border Current",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#000000",
+    },
+
+    // Action colors
+    "--color-action-primary": {
+        displayName: "Action Primary",
+        defaultValue: "#18d2ff",
+        defaultLightValue: "#2e79be",
+    },
+    "--color-action-secondary": {
+        displayName: "Action Secondary",
+        defaultValue: "#bac4e2",
+        defaultLightValue: "#4b4948",
+    },
+    "--color-action-tertiary": {
+        displayName: "Action Tertiary",
+        defaultValue: "#3b4668",
+        defaultLightValue: "#aca7a1",
+    },
+    "--color-action-quaternary": {
+        displayName: "Action Quaternary",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#cac8c5",
+    },
+    "--color-action-destructive": {
+        displayName: "Action Destructive",
+        defaultValue: "#ea719d",
+        defaultLightValue: "#df5285",
+    },
+
+    // Status colors
+    "--color-status-active": {
+        displayName: "Status Active",
+        defaultValue: "#18d2ff",
+        defaultLightValue: "#000000",
+    },
+    "--color-status-inactive": {
+        displayName: "Status Inactive",
+        defaultValue: "#bac4e2",
+        defaultLightValue: "#4b4948",
+    },
+    "--color-status-error": {
+        displayName: "Status Error",
+        defaultValue: "#ea719d",
+        defaultLightValue: "#df5285",
+    },
+
+    // Severity colors
+    "--color-severity-open": {
+        displayName: "Severity Open",
+        defaultValue: "#2ec495",
+        defaultLightValue: "#3eb28e",
+    },
+    "--color-severity-info": {
+        displayName: "Severity Info",
+        defaultValue: "#20a0ff",
+        defaultLightValue: "#0d8dec",
+    },
+    "--color-severity-warning": {
+        displayName: "Severity Warning",
+        defaultValue: "#a961e4",
+        defaultLightValue: "#9f43eb",
+    },
+    "--color-severity-error": {
+        displayName: "Severity Error",
+        defaultValue: "#f89973",
+        defaultLightValue: "#ee845a",
+    },
+    "--color-severity-critical": {
+        displayName: "Severity Critical",
+        defaultValue: "#ea719d",
+        defaultLightValue: "#df5285",
+    },
+
+    // Node variables
+    "--node-top-typeA": {
+        displayName: "Node Top Type A",
+        defaultValue: "#564a94",
+        defaultLightValue: "#e7a88c",
+    },
+    "--node-bottom-typeA": {
+        displayName: "Node Bottom Type A",
+        defaultValue: "#a960e4",
+        defaultLightValue: "#ffe3d7",
+    },
+    "--node-top-typeB": {
+        displayName: "Node Top Type B",
+        defaultValue: "#256faf",
+        defaultLightValue: "#ad8ad0",
+    },
+    "--node-bottom-typeB": {
+        displayName: "Node Bottom Type B",
+        defaultValue: "#1fa0ff",
+        defaultLightValue: "#ead6fd",
+    },
+    "--node-top-typeC": {
+        displayName: "Node Top Type C",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#829ef3",
+    },
+    "--node-bottom-typeC": {
+        displayName: "Node Bottom Type C",
+        defaultValue: "#3b4668",
+        defaultLightValue: "#dee1ea",
+    },
+    "--node-top-typeD": {
+        displayName: "Node Top Type D",
+        defaultValue: "#94645f",
+        defaultLightValue: "#7dcbc8",
+    },
+    "--node-bottom-typeD": {
+        displayName: "Node Bottom Type D",
+        defaultValue: "#b07d76",
+        defaultLightValue: "#e8fffe",
+    },
+    "--node-header-text": {
+        displayName: "Header Text",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#282F45",
+    },
+    "--node-pins": {
+        displayName: "Pins",
+        defaultValue: "#657197",
+        defaultLightValue: "#657197",
+    },
+    "--node-ai-icons": {
+        displayName: "AI Icons",
+        defaultValue: "#692EA4",
+        defaultLightValue: "#692EA4",
+    },
+    "--node-body-text": {
+        displayName: "Body Text",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#3B4668",
+    },
+    "--node-wire-control-flow": {
+        displayName: "Control Flow",
+        defaultValue: "#FFC45E",
+        defaultLightValue: "#FFC45E",
+    },
+    "--node-wire-ai-flow": {
+        displayName: "AI Flow",
+        defaultValue: "#692EA4",
+        defaultLightValue: "#692EA4",
+    },
+    "--node-wire-data-flow": {
+        displayName: "Data Flow",
+        defaultValue: "#6E7EB0",
+        defaultLightValue: "#6E7EB0",
+    },
+    // "--node-wire-default-flow": {
+    //     displayName: "Default Flow",
+    //     defaultValue: "#5E6374",
+    //     defaultLightValue: "#5E6374",
+    // },
+
+    // V1 Colors
+    "--formant-dark-02": {
+        displayName: "Dark 02",
+        defaultValue: "#171824",
+        defaultLightValue: "#f2efeb",
+    },
+    "--formant-black": {
+        displayName: "Black",
+        defaultValue: "#000000",
+        defaultLightValue: "#ffffff",
+    },
+    "--formant-flagship": {
+        displayName: "Flagship",
+        defaultValue: "#1c1e2d",
+        defaultLightValue: "#e6e4e2",
+    },
+    "--formant-steel-02": {
+        displayName: "Steel 02",
+        defaultValue: "#3b4668",
+        defaultLightValue: "#aca7a1",
+    },
+    "--formant-primary-module": {
+        displayName: "Primary Module",
+        defaultValue: "#2d3855",
+        defaultLightValue: "#cac8c5",
+    },
+    "--formant-highlights-blue": {
+        displayName: "Highlights Blue",
+        defaultValue: "#18d2ff",
+        defaultLightValue: "#20a0ff",
+    },
+    "--formant-white": {
+        displayName: "White",
+        defaultValue: "#ffffff",
+        defaultLightValue: "#000000",
+    },
+    "--formant-silver": {
+        displayName: "Silver",
+        defaultValue: "#bac4e2",
+        defaultLightValue: "#4b4948",
+    },
+    "--formant-steel-01": {
+        displayName: "Steel 01",
+        defaultValue: "#282f45",
+        defaultLightValue: "#dad7d4",
+    },
+    "--formant-steel-03": {
+        displayName: "Steel 03",
+        defaultValue: "#657197",
+        defaultLightValue: "#817e7c",
+    },
+    "--formant-dark": {
+        displayName: "Dark",
+        defaultValue: "#0a0b10",
+        defaultLightValue: "#ffffff",
+    },
+    "--formant-data-royal-blue": {
+        displayName: "Data Royal Blue",
+        defaultValue: "#20a0ff",
+        defaultLightValue: "#20a0ff",
+    },
+    "--formant-data-purple": {
+        displayName: "Data Purple",
+        defaultValue: "#a961e4",
+        defaultLightValue: "#a961e4",
+    },
+    "--formant-data-red": {
+        displayName: "Data Red",
+        defaultValue: "#ea719d",
+        defaultLightValue: "#ea719d",
+    },
+    "--formant-data-orange": {
+        displayName: "Data Orange",
+        defaultValue: "#f89973",
+        defaultLightValue: "#f89973",
+    },
+    "--formant-data-yellow": {
+        displayName: "Data Yellow",
+        defaultValue: "#f9c36e",
+        defaultLightValue: "#f9c36e",
+    },
+    "--formant-data-green": {
+        displayName: "Data Green",
+        defaultValue: "#2ec495",
+        defaultLightValue: "#2ec495",
+    },
+    "--formant-background": {
+        displayName: "Background",
+        defaultValue: "#1d1f2e",
+        defaultLightValue: "#1d1f2e",
+    },
+};
+
+
diff --git a/packages/ava-react/src/demo/index.html b/packages/ava-react/src/demo/index.html
new file mode 100644
index 000000000..df1045772
--- /dev/null
+++ b/packages/ava-react/src/demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AVA React Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html> 
\ No newline at end of file
diff --git a/packages/ava-react/src/demo/main.tsx b/packages/ava-react/src/demo/main.tsx
new file mode 100644
index 000000000..022eb2275
--- /dev/null
+++ b/packages/ava-react/src/demo/main.tsx
@@ -0,0 +1,1368 @@
+import ReactDOM from 'react-dom';
+import React, { useEffect, useState } from 'react';
+import { InsightCard } from '../InsightCard';
+import { getInsights, InsightInfo } from "@formant/ava";
+import 'antd/dist/antd.css';
+
+// New function to generate sample data
+const generateSampleData = (days: number = 7, baseValue: number = 100, trend: number = 5, noise: number = 2) => {
+  const data = [];
+  const labels = ['CPU', 'GPU', 'Memory'];
+  
+  for (let i = 0; i < days; i++) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    
+    // Generate data for each label
+    labels.forEach(label => {
+      const value = baseValue + (trend * i) + (Math.random() * noise - noise/2);
+      data.push({
+        time: date.toISOString().split('T')[0],
+        device_id: "test-device",
+        label: label,
+        value: value,
+        name: "system_metrics",
+        type: "numeric set"
+      });
+    });
+  }
+
+  return data.reverse();
+};
+
+const App = () => {
+
+   
+    const [insights, setInsights] = useState<InsightInfo[]>([]);
+  // Sample data for the InsightCard
+  const sampleData = [
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 41.01294875228525,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 39.19233671413941,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 38.65977502707361,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 41.33233992758036,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 40.74777895509006,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 43.19466599909179,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 43.69244984160507,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 41.3194297782471,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 41.8460764255574,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-22 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 44.32475137204699,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-22 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 42.23008902006804,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-22 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 42.749447032460544,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 39.58273297564041,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 37.58094063151034,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 37.997311483806264,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 42.68184319655315,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 42.27589264755745,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 43.22556140945724,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "thermal",
+        "unit": "C",
+        "value": 43.49976992971086,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "GPU",
+        "unit": "C",
+        "value": 43.02632934101895,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "CPU",
+        "unit": "C",
+        "value": 60.24809382215651,
+        "name": "$.host.temperature",
+        "type": "numeric set"
+    }
+  ];
+
+  const thirdSampleData =  [
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Could not upload the mission: : "
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Could not parse the graph"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to open file for reading: /spot_integration_top/maps/graph_mission_!"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Mission ended with state: 1"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the velocity command: "
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Robot is estopped. Please use an external E-Stop client, such as the estop Python SDK example, to configure E-Stop."
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the stand command as we don't own the lease and can't take it "
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Uploading graph from: /spot_integration_top/maps/graph_mission_1"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Playing mission"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the teleop command as we don't own the lease and can't take it"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the stand command as we don't own the lease and can't take it"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the play mission command as we don't own the lease and can't take it "
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to open file for reading: /spot_integration_top/maps/missions/mission_!"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Finished uploading mission"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Could not upload the mission: :"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the teleop command as we don't own the lease and can't take it "
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the play mission command as we don't own the lease and can't take it"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "The StandCommand failed or timed out."
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Could not parse the mission file"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the velocity command:"
+    },
+    {
+        "time": "2024-12-10 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Uploading graph from: /spot_integration_top/maps/graph_mission_!"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the teleop command as we don't own the lease and can't take it "
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the stand command as we don't own the lease and can't take it"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the teleop command as we don't own the lease and can't take it"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Finished uploading mission"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "No dock found"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Failed to complete the stand command as we don't own the lease and can't take it "
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Mission ended with state: 1"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Playing mission"
+    },
+    {
+        "time": "2024-12-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Uploading graph from: /spot_integration_top/maps/graph_mission_1"
+    },
+    {
+        "time": "2024-12-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2024-12-20 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2024-12-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2024-12-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2024-12-30 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-01 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-02 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-02 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-07 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-07 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-08 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-09 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-09 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-12 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-12 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-13 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-01-16 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-17 00:00:00",
+        "value": 1,
+        "label": "warning",
+        "message": "broken wheel"
+    },
+    {
+        "time": "2025-01-17 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "oh no"
+    },
+    {
+        "time": "2025-01-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "bad camera"
+    },
+    {
+        "time": "2025-01-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-20 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-21 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-21 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-22 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-22 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-25 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-27 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-01-27 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-27 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-28 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-01-28 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-28 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-01-29 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "bosdyn.api.PowerCommandResponse (KeepaliveMotorsOffError): Cannot power on while Keepalive requests motors off."
+    },
+    {
+        "time": "2025-01-30 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "bosdyn.api.PowerCommandResponse (KeepaliveMotorsOffError): Cannot power on while Keepalive requests motors off."
+    },
+    {
+        "time": "2025-01-31 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "bosdyn.api.PowerCommandResponse (KeepaliveMotorsOffError): Cannot power on while Keepalive requests motors off."
+    },
+    {
+        "time": "2025-01-31 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-01-31 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-05 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-12 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-12 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-13 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Docking Failed, status: 'STATUS_ERROR_NOT_AVAILABLE'"
+    },
+    {
+        "time": "2025-02-13 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-02-13 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-13 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-14 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-02-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-18 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-02-18 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-19 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-19 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-20 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-20 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-25 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-25 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-26 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-27 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-02-27 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-02-28 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-01 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-01 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-03-01 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-03 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "SpotBase Service Restarted, starting up..."
+    },
+    {
+        "time": "2025-03-03 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-03 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "bosdyn.api.PowerCommandResponse (EstoppedError): Cannot power on while estopped; inspect EStopState for more info."
+    },
+    {
+        "time": "2025-03-03 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "SpotBase Service Started."
+    },
+    {
+        "time": "2025-03-03 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "Restarting SpotBase Service"
+    },
+    {
+        "time": "2025-03-04 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-04 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "bosdyn.api.PowerCommandResponse (KeepaliveMotorsOffError): Cannot power on while Keepalive requests motors off."
+    },
+    {
+        "time": "2025-03-05 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Docking Failed, status: 'STATUS_ERROR_NOT_AVAILABLE'"
+    },
+    {
+        "time": "2025-03-05 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-11 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-12 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-03-12 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-13 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-17 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-18 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-22 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device online"
+    },
+    {
+        "time": "2025-03-22 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "device offline"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "vahag got in the way of the robot"
+    },
+    {
+        "time": "2025-03-28 00:00:00",
+        "value": 1,
+        "label": "error",
+        "message": "Dock not in view, please move closer to dock and re-issue command."
+    },
+    {
+        "time": "2025-03-28 00:00:00",
+        "value": 1,
+        "label": "info",
+        "message": "someone in the way"
+    }
+];
+
+
+  
+
+  const secondSampleData = [
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0.0005073491009475491,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 0.9985077967619189,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0.0015220473028426471,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-19 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 0.9933298515257778,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-20 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0.0014268927312405574,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0.43847574282356894,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 0.5615242571764311,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-21 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 0.5615242571764311,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-23 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 0.9986804315764961,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0.0009314600636497711,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0.0013195684235038424,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-24 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 0.9986804315764961,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "stairs",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "walk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "sit",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "ptz",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "pose",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "autowalk",
+        "value": 0,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    },
+    {
+        "time": "2025-03-25 00:00:00",
+        "device_id": "b0990d5a-cdff-4c3c-ab71-c6c72be385ad",
+        "label": "docked",
+        "value": 1,
+        "name": "state.movement.mode",
+        "type": "bitset"
+    }
+];
+
+  const fetchInsights =  () => {
+ //generateSampleData()
+  const insightResult = getInsights(thirdSampleData , {
+    // limit: 10,
+    // measures: [
+    //   { fieldName: "life_expect", method: "MEAN" },
+    //   { fieldName: "pop", method: "SUM" },
+    //   { fieldName: "fertility", method: "MEAN" },
+    // { fieldName: "label", method: "MEAN" },
+    // { fieldName: "pop", method: "SUM" },
+    // { fieldName: "value", method: "MEAN" },
+    // ],
+    insightTypes: ["category_outlier", "time_series_outlier",  "trend", "correlation", "majority"],
+    // Add a custom color palette to avoid using @ant-design/colors
+  });
+
+  setInsights(insightResult.insights);
+ 
+}
+
+  useEffect(() => {
+    fetchInsights();
+  }, []);
+
+ 
+
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1>AVA React Demo</h1>
+      <div style={{ width: '600px', margin: '20px auto' }}>
+        
+  {false ? (
+    <div className="text-center py-4 text-gray-400">
+      <div className="animate-pulse">Loading insights...</div>
+    </div>
+  ) : insights.length === 0 ? (
+    <div className="text-center py-4 text-gray-400">
+      No insights available for this data
+    </div>
+  ) : (
+    insights.map((insight, index) => (
+      <InsightCard 
+        title={"$.cpu"}
+        key={`insight-${index}`} 
+        insightInfo={insight}
+        className="w-full" 
+        footerTools={[]}
+      />
+    ))
+  )}
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+); 
\ No newline at end of file
diff --git a/packages/ava-react/src/demo/theme-provider.tsx b/packages/ava-react/src/demo/theme-provider.tsx
new file mode 100644
index 000000000..5a8debf6a
--- /dev/null
+++ b/packages/ava-react/src/demo/theme-provider.tsx
@@ -0,0 +1,111 @@
+import React, {
+    createContext,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from "react";
+import { DEFAULT_THEME_COLORS } from "./default-theme-colors";
+import { createGlobalStyle } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+  :root {
+    /* Loop through theme keys and set them as CSS custom properties */
+    ${({ theme }) =>
+      Object.entries(theme).reduce((styles, [key, value]) => {
+        return styles + `${key}: ${value};\n`
+      }, '')
+    }
+  }
+`;
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+export const darkTheme = Object.keys(DEFAULT_THEME_COLORS).reduce((theme, key) => ({
+    ...theme,
+    [key]: DEFAULT_THEME_COLORS[key].defaultValue,
+  }), {});
+  
+  export const lightTheme = Object.keys(DEFAULT_THEME_COLORS).reduce((theme, key) => ({
+    ...theme,
+    [key]: DEFAULT_THEME_COLORS[key].defaultLightValue,
+  }), {});
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function CustomThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia(
+                "(prefers-color-scheme: dark)",
+            ).matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = useMemo(
+        () => ({
+            theme,
+            setTheme: (t: Theme) => {
+                localStorage.setItem(storageKey, t);
+                setTheme(t);
+            },
+        }),
+        [theme, storageKey],
+    );
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+
+    return context;
+};
+
diff --git a/packages/ava-react/vite.config.ts b/packages/ava-react/vite.config.ts
new file mode 100644
index 000000000..1b12e15f5
--- /dev/null
+++ b/packages/ava-react/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: 'src/demo',
+  build: {
+    outDir: '../../dist/demo',
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      '@formant/ava-react': path.resolve(__dirname, './src'),
+    },
+  },
+}); 
\ No newline at end of file
diff --git a/packages/ava/package.json b/packages/ava/package.json
index 876967c25..4ad37c623 100644
--- a/packages/ava/package.json
+++ b/packages/ava/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "@antv/ava",
-  "version": "3.4.1",
+  "name": "@formant/ava",
+  "version": "3.4.18-formant",
   "description": "A framework for automated visual analytics.",
   "author": {
-    "name": "AntV",
-    "url": "https://antv.antgroup.com/"
+    "name": "formant",
+    "url": "https://antcd v.antgroup.com/"
   },
   "homepage": "https://ava.antv.antgroup.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/antvis/AVA/tree/master/packages/ava"
+    "url": "https://https://github.com/FormantIO/AVA/tree/master/packages/ava"
   },
   "sideEffects": false,
   "keywords": [
@@ -59,8 +59,9 @@
     "@antv/smart-color": "^0.2.1",
     "bayesian-changepoint": "^1.0.1",
     "csstype": "^3.1.2",
+    "date-fns": "^2.30.0",
     "heap-js": "^2.1.6",
-    "lodash": "^4.17.21",
+    "little-date": "^1.0.0",
     "regression": "^2.0.1",
     "tslib": "^2.3.1"
   },
@@ -69,9 +70,9 @@
     "@antv/color-schema": "^0.2.3",
     "@antv/data-samples": "^1.0.1",
     "@stdlib/types": "^0.0.12",
+    "@testing-library/jest-dom": "^4.2.4",
     "@types/d3-array": "^3.0.1",
     "@types/jest": "^23.3.12",
-    "@testing-library/jest-dom": "^4.2.4",
     "@types/lodash": "^4.14.171",
     "@types/numeral": "^2.0.2",
     "eslint": "^7.32.0",
diff --git a/packages/ava/src/insight/chart/constants.ts b/packages/ava/src/insight/chart/constants.ts
index 2bc648648..4742216de 100644
--- a/packages/ava/src/insight/chart/constants.ts
+++ b/packages/ava/src/insight/chart/constants.ts
@@ -1,9 +1,9 @@
 import { ChartType, InsightType } from '../types';
 
 export const INSIGHT_COLOR_PLATTE: Record<string, string> = {
-  highlight: '#E09322',
-  outlier: '#CB5140',
-  font: '#2C3542',
+  highlight: '#f89973',
+  outlier: '#ea719d',
+  font: '#bac4e2',
   defaultPointColor: '#fff',
 } as const;
 
@@ -12,7 +12,8 @@ export const BOLD_FONT_WEIGHT = 500;
 export const TEXT_STYLE = {
   textAlign: 'center',
   fill: INSIGHT_COLOR_PLATTE.font,
-  opacity: 0.65,
+  fontFamily: 'Moderat',
+  opacity: 0.85,
 };
 
 export const ChartTypeMap: Record<InsightType, ChartType> = {
diff --git a/packages/ava/src/insight/chart/strategy/augmentedMarks/changePoint.ts b/packages/ava/src/insight/chart/strategy/augmentedMarks/changePoint.ts
index 2f15b4235..00f79db8c 100644
--- a/packages/ava/src/insight/chart/strategy/augmentedMarks/changePoint.ts
+++ b/packages/ava/src/insight/chart/strategy/augmentedMarks/changePoint.ts
@@ -29,7 +29,7 @@ export const changePointAugmentedMarksStrategy = (insight: InsightInfo<ChangePoi
         backgroundRadius: 2,
         connector: true,
         startMarker: true,
-        startMarkerFill: '#2C3542',
+        startMarkerFill: '#1c1e2d',
         startMarkerFillOpacity: 0.65,
       },
     });
diff --git a/packages/ava/src/insight/chart/strategy/viewSpec.ts b/packages/ava/src/insight/chart/strategy/viewSpec.ts
index 2ac4b0ea2..b55c5a468 100644
--- a/packages/ava/src/insight/chart/strategy/viewSpec.ts
+++ b/packages/ava/src/insight/chart/strategy/viewSpec.ts
@@ -12,7 +12,7 @@ export const viewSpecStrategy = (marks: Mark[], insight?: InsightInfo<PatternInf
 
   return {
     type: 'view',
-    theme: 'classic',
+    theme: 'dark',
     axis: {
       x: { labelAutoHide: true, labelAutoRotate: false, title: false },
       y: { title: false },
diff --git a/packages/ava/src/insight/narrative/strategy/categoryOutlier.ts b/packages/ava/src/insight/narrative/strategy/categoryOutlier.ts
index 4e2ea8898..5c085fc2a 100644
--- a/packages/ava/src/insight/narrative/strategy/categoryOutlier.ts
+++ b/packages/ava/src/insight/narrative/strategy/categoryOutlier.ts
@@ -34,6 +34,7 @@ export default class CategoryOutlierNarrativeStrategy extends InsightNarrativeSt
         template:
           '${measure} has ${total} categories in the ${dimension} that are prominent compared to other dimensions: &{outliers}.',
         variableMetaMap,
+        displayType: 'paragraph',
       },
     ],
   };
@@ -45,7 +46,7 @@ export default class CategoryOutlierNarrativeStrategy extends InsightNarrativeSt
         template: '${.x}',
         separator: getDefaultSeparator('zh-CN'),
         variableMetaMap,
-        useVariable: 'patterns',
+        useVariable: 'paragraph',
       },
     ],
     'en-US': [
@@ -53,8 +54,9 @@ export default class CategoryOutlierNarrativeStrategy extends InsightNarrativeSt
         templateId: 'outliers',
         template: '${.x}',
         separator: getDefaultSeparator('en-US'),
+       
         variableMetaMap,
-        useVariable: 'patterns',
+        useVariable: 'paragraph',
       },
     ],
   };
diff --git a/packages/ava/src/insight/narrative/strategy/changePoint.ts b/packages/ava/src/insight/narrative/strategy/changePoint.ts
index b2e8429c7..c3e484444 100644
--- a/packages/ava/src/insight/narrative/strategy/changePoint.ts
+++ b/packages/ava/src/insight/narrative/strategy/changePoint.ts
@@ -32,7 +32,7 @@ export default class ChangePointNarrativeStrategy extends InsightNarrativeStrate
     ],
     'en-US': [
       {
-        template: 'In ${dateRange}, ${measure} has ${total} major changes, which is worthy of attention.',
+        template: '${total} major changes detected for ${measure} during ${dateRange}',
         variableMetaMap,
       },
     ],
diff --git a/packages/ava/src/insight/narrative/strategy/correlation.ts b/packages/ava/src/insight/narrative/strategy/correlation.ts
index ddde41bde..b81fadb1f 100644
--- a/packages/ava/src/insight/narrative/strategy/correlation.ts
+++ b/packages/ava/src/insight/narrative/strategy/correlation.ts
@@ -30,8 +30,9 @@ export default class CorrelationNarrativeStrategy extends InsightNarrativeStrate
     ],
     'en-US': [
       {
-        template: '${m1} is most correlated with ${m2} with a correlation coefficient of ${pcorr}.',
+        template: " ${m1} and ${m2}, are highly correlated. Their relationship is measured by a number, ${pcorr}, which tells us just how closely they're linked. A higher number means they move in sync more often.",
         variableMetaMap,
+        displayType: 'paragraph',
       },
     ],
   };
diff --git a/packages/ava/src/insight/narrative/strategy/lowVariance.ts b/packages/ava/src/insight/narrative/strategy/lowVariance.ts
index 88719b329..9fd241f83 100644
--- a/packages/ava/src/insight/narrative/strategy/lowVariance.ts
+++ b/packages/ava/src/insight/narrative/strategy/lowVariance.ts
@@ -28,7 +28,7 @@ export default class LowVarianceNarrativeStrategy extends InsightNarrativeStrate
     'en-US': [
       {
         template:
-          'The quantity is disassembled according to ${dimension}, and ${measure} are evenly distributed, with an average of ${mean}.',
+          'We broke down the total based on ${dimension}, and the ${measure} are spread out evenly, averaging ${mean} each.',
         variableMetaMap,
       },
     ],
diff --git a/packages/ava/src/insight/narrative/strategy/majority.ts b/packages/ava/src/insight/narrative/strategy/majority.ts
index e2770084f..2a4adfc38 100644
--- a/packages/ava/src/insight/narrative/strategy/majority.ts
+++ b/packages/ava/src/insight/narrative/strategy/majority.ts
@@ -40,7 +40,7 @@ export default class MajorityNarrativeStrategy extends InsightNarrativeStrategy<
     'en-US': [
       {
         template:
-          'Breaking down the ${measure} by ${dimension}, the ${measure} for ${dimValue} is significantly higher than the other dimensions, at ${y}, ${proportion} of the total (${total}).',
+          'The ${measure} for ${dimValue} is significantly higher than the other dimensions, at ${y}, ${proportion} of the total (${total}).',
         variableMetaMap,
       },
     ],
diff --git a/packages/ava/src/insight/narrative/strategy/timeSeriesOutlier.ts b/packages/ava/src/insight/narrative/strategy/timeSeriesOutlier.ts
index 217a261b4..61e75b9a3 100644
--- a/packages/ava/src/insight/narrative/strategy/timeSeriesOutlier.ts
+++ b/packages/ava/src/insight/narrative/strategy/timeSeriesOutlier.ts
@@ -8,6 +8,8 @@ import { getDiffDesc } from './helpers';
 
 import type { InsightType, Language, InsightInfo, TimeSeriesOutlierInfo } from '../../types';
 import type { ParagraphSpec, Structure } from '../../../ntv/types';
+import { formatDateRange } from "little-date";
+import { formatDate } from 'date-fns';
 
 const variableMetaMap = {
   dateRange: {
@@ -60,15 +62,16 @@ export default class TimeSeriesOutlierNarrativeStrategy extends InsightNarrative
     'en-US': [
       {
         template:
-          'In ${dateRange}, ${measure} fluctuates within the range of ${max} to ${min}, with ${total} outliers, sorted by size above the baseline as follows.',
+          '${total} outliers detected for ${measure} during ${dateRange}',
+        displayType: 'paragraph',
         variableMetaMap,
       },
       {
-        template: '${.x}, ${measure} for ${.y}, compared to the baseline value ${.base}, ${.diffDesc} ${.diff}.',
+        template: '${.x}: ${measure} at ${.y} (${.diffDesc} ${.diff} baseline)',
         displayType: 'bullet',
         bulletOrder: true,
         useVariable: 'outliers',
-        variableMetaMap,
+        variableMetaMap,  
       },
     ],
   };
@@ -80,7 +83,7 @@ export default class TimeSeriesOutlierNarrativeStrategy extends InsightNarrative
     const spec = generateTextSpec({
       structures: TimeSeriesOutlierNarrativeStrategy.structures[lang],
       variable: {
-        dateRange: `${first(data)[dimension]}~${last(data)[dimension]}`,
+        dateRange: `${formatDateRange(new Date(first(data)[dimension]), new Date(last(data)[dimension]), {includeTime: false})}`,
         total: patterns.length,
         measure,
         max: maxBy(data, measure)[measure],
@@ -92,6 +95,7 @@ export default class TimeSeriesOutlierNarrativeStrategy extends InsightNarrative
             ...point,
             base,
             diffDesc: getDiffDesc(diff, lang),
+            x: formatDate(new Date(point.x), 'MMM d, yyyy'),
             diff,
           };
         }),
diff --git a/packages/ava/src/insight/narrative/strategy/trend.ts b/packages/ava/src/insight/narrative/strategy/trend.ts
index 02a3dc3d7..f56e651eb 100644
--- a/packages/ava/src/insight/narrative/strategy/trend.ts
+++ b/packages/ava/src/insight/narrative/strategy/trend.ts
@@ -7,6 +7,8 @@ import { InsightNarrativeStrategy } from './base';
 
 import type { InsightType, Language, InsightInfo, TrendInfo, TrendType } from '../../types';
 import type { ParagraphSpec, Structure } from '../../../ntv/types';
+import { formatDateRange } from "little-date";
+
 
 const trendMapping: Record<TrendType, string> = {
   decreasing: '下降',
@@ -38,7 +40,7 @@ export default class TrendNarrativeStrategy extends InsightNarrativeStrategy<Tre
     ],
     'en-US': [
       {
-        template: 'In ${dateRange}, the ${measure} goes ${trend}.',
+        template: 'There is a signifcant ${trend} trend for ${measure} during ${dateRange} with a slope of ${slope}X.',
         variableMetaMap,
       },
     ],
@@ -47,12 +49,17 @@ export default class TrendNarrativeStrategy extends InsightNarrativeStrategy<Tre
   generateTextSpec(insightInfo: InsightInfo<TrendInfo>, lang: Language) {
     const { patterns, data } = insightInfo;
     const { dimension, measure, trend } = patterns[0];
+    const regression = patterns[0].regression;
+
+   
+   
     const spec = generateTextSpec({
       structures: TrendNarrativeStrategy.structures[lang],
       variable: {
-        dateRange: `${first(data)[dimension]}~${last(data)[dimension]}`,
+        dateRange: `${formatDateRange(new Date(first(data)[dimension]), new Date(last(data)[dimension]), {includeTime: false})}`,
         measure,
         trend: lang === 'en-US' ? trend : trendMapping[trend],
+        slope: regression.equation[0],
       },
     });
 
diff --git a/site/examples/insight-card/basic/demo/auto.tsx b/site/examples/insight-card/basic/demo/auto.tsx
index 032932cc2..4145af5d6 100644
--- a/site/examples/insight-card/basic/demo/auto.tsx
+++ b/site/examples/insight-card/basic/demo/auto.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { InsightCard } from '@antv/ava-react';
+import { InsightCard } from '@formant/ava-react';
 
 const timeSeriesData = [
   {
diff --git a/site/examples/insight-card/basic/demo/basic.tsx b/site/examples/insight-card/basic/demo/basic.tsx
index a5aa04660..90ce3bbf2 100644
--- a/site/examples/insight-card/basic/demo/basic.tsx
+++ b/site/examples/insight-card/basic/demo/basic.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { InsightCard, InsightCardProps } from '@antv/ava-react';
+import { InsightCard, InsightCardProps } from '@formant/ava-react';
 
 const timeSeriesData = [
   { year: '1991', value: 0.3 },
diff --git a/site/examples/insight-card/basic/demo/insight.tsx b/site/examples/insight-card/basic/demo/insight.tsx
index e9f2e55ac..2e6b5a7a4 100644
--- a/site/examples/insight-card/basic/demo/insight.tsx
+++ b/site/examples/insight-card/basic/demo/insight.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { InsightCard } from '@antv/ava-react';
-import { getInsights } from '@antv/ava';
+import { InsightCard } from '@formant/ava-react';
+import { getInsights } from '@formant/ava';
 
 const data = [
   { year: '2000', value: 1 },
diff --git a/site/examples/ntv/basic/demo/basic.tsx b/site/examples/ntv/basic/demo/basic.tsx
index 9d0c5465d..4081e01d6 100644
--- a/site/examples/ntv/basic/demo/basic.tsx
+++ b/site/examples/ntv/basic/demo/basic.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
-import type { NarrativeTextSpec, BulletItemSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec, BulletItemSpec } from '@formant/ava-react';
 
 const spec: NarrativeTextSpec = {
   sections: [
diff --git a/site/examples/ntv/basic/demo/collapse.tsx b/site/examples/ntv/basic/demo/collapse.tsx
index 8473e872a..ff97f8b7a 100644
--- a/site/examples/ntv/basic/demo/collapse.tsx
+++ b/site/examples/ntv/basic/demo/collapse.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 // import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
 
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 const spec: NarrativeTextSpec = {
   sections: [
diff --git a/site/examples/ntv/basic/demo/entity-phrases.tsx b/site/examples/ntv/basic/demo/entity-phrases.tsx
index f58bea24d..444e5da3b 100644
--- a/site/examples/ntv/basic/demo/entity-phrases.tsx
+++ b/site/examples/ntv/basic/demo/entity-phrases.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 import { Descriptions } from 'antd';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
 const { Phrase } = NarrativeTextVis;
 
diff --git a/site/examples/ntv/basic/demo/export.tsx b/site/examples/ntv/basic/demo/export.tsx
index 474596c7c..fc923819f 100644
--- a/site/examples/ntv/basic/demo/export.tsx
+++ b/site/examples/ntv/basic/demo/export.tsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { Space, Button, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import copy from 'copy-to-clipboard';
-import { NarrativeTextVis, TextExporter, createRatioValue, createDeltaValue, copyToClipboard } from '@antv/ava-react';
+import { NarrativeTextVis, TextExporter, createRatioValue, createDeltaValue, copyToClipboard } from '@formant/ava-react';
 
 const exporter = new TextExporter();
 
diff --git a/site/examples/ntv/basic/demo/extra-phrases.tsx b/site/examples/ntv/basic/demo/extra-phrases.tsx
index 1bb9328c7..3c3f378d0 100644
--- a/site/examples/ntv/basic/demo/extra-phrases.tsx
+++ b/site/examples/ntv/basic/demo/extra-phrases.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
-import type { NarrativeTextSpec } from '@antv/ava';
+import type { NarrativeTextSpec } from '@formant/ava';
 
 // 在使用代码中，需要加入类似下面的方式的样式引用从而支持渲染正确的公式样式
 // import 'katex/dist/katex.min.css';
diff --git a/site/examples/ntv/basic/demo/generate.tsx b/site/examples/ntv/basic/demo/generate.tsx
index 09951d114..0152778d7 100644
--- a/site/examples/ntv/basic/demo/generate.tsx
+++ b/site/examples/ntv/basic/demo/generate.tsx
@@ -2,8 +2,8 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { generateTextSpec } from '@antv/ava';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { generateTextSpec } from '@formant/ava';
+import { NarrativeTextVis } from '@formant/ava-react';
 
 ReactDOM.render(
   <NarrativeTextVis
diff --git a/site/examples/ntv/basic/demo/nested-paragraph.tsx b/site/examples/ntv/basic/demo/nested-paragraph.tsx
index 5ab9ac755..cb65aad21 100644
--- a/site/examples/ntv/basic/demo/nested-paragraph.tsx
+++ b/site/examples/ntv/basic/demo/nested-paragraph.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
-import type { NestedParagraphSpec } from '@antv/ava-react';
+import type { NestedParagraphSpec } from '@formant/ava-react';
 
 const { NestedParagraph } = NarrativeTextVis;
 
diff --git a/site/examples/ntv/basic/demo/palette.tsx b/site/examples/ntv/basic/demo/palette.tsx
index 2745a6d5c..379a54f8a 100644
--- a/site/examples/ntv/basic/demo/palette.tsx
+++ b/site/examples/ntv/basic/demo/palette.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Form, Skeleton, Popover } from 'antd';
-import { NarrativeTextVis, seedToken } from '@antv/ava-react';
+import { NarrativeTextVis, seedToken } from '@formant/ava-react';
 import { TwitterPicker } from 'react-color';
 
 const ColorSelector: React.FC<{ value?: string; onChange?: (color: string) => void }> = ({ value, onChange }) => {
diff --git a/site/examples/ntv/basic/demo/paragraph.tsx b/site/examples/ntv/basic/demo/paragraph.tsx
index 8231fd5f0..7f5a4be38 100644
--- a/site/examples/ntv/basic/demo/paragraph.tsx
+++ b/site/examples/ntv/basic/demo/paragraph.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 const spec: NarrativeTextSpec = {
   sections: [
diff --git a/site/examples/ntv/basic/demo/size.tsx b/site/examples/ntv/basic/demo/size.tsx
index 57bc41f2b..789ee85de 100644
--- a/site/examples/ntv/basic/demo/size.tsx
+++ b/site/examples/ntv/basic/demo/size.tsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Form, Radio } from 'antd';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
-import type { NarrativeTextSpec, BulletItemSpec, NarrativeTextVisProps } from '@antv/ava-react';
+import type { NarrativeTextSpec, BulletItemSpec, NarrativeTextVisProps } from '@formant/ava-react';
 
 const spec: NarrativeTextSpec = {
   sections: [
diff --git a/site/examples/ntv/basic/demo/theme.tsx b/site/examples/ntv/basic/demo/theme.tsx
index 360ee8cab..21f2cf7ff 100644
--- a/site/examples/ntv/basic/demo/theme.tsx
+++ b/site/examples/ntv/basic/demo/theme.tsx
@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Form, Radio, Descriptions, Skeleton } from 'antd';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 import insertCss from 'insert-css';
 
-import type { NarrativeTextVisProps } from '@antv/ava-react';
+import type { NarrativeTextVisProps } from '@formant/ava-react';
 
 insertCss(`
   .ntv-dark-desc .ant-descriptions-item-label{
diff --git a/site/examples/ntv/case/demo/chart-explanation.tsx b/site/examples/ntv/case/demo/chart-explanation.tsx
index a728c9b1a..1b3df5144 100644
--- a/site/examples/ntv/case/demo/chart-explanation.tsx
+++ b/site/examples/ntv/case/demo/chart-explanation.tsx
@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Skeleton } from 'antd';
-import { getInsights } from '@antv/ava';
-import { InsightCard } from '@antv/ava-react';
+import { getInsights } from '@formant/ava';
+import { InsightCard } from '@formant/ava-react';
 
-import type { InsightsResult } from '@antv/ava';
+import type { InsightsResult } from '@formant/ava';
 
 const App = () => {
   const [loading, setLoading] = useState(true);
diff --git a/site/examples/ntv/case/demo/fluctuation.tsx b/site/examples/ntv/case/demo/fluctuation.tsx
index e4498b6d0..f4838ff2b 100644
--- a/site/examples/ntv/case/demo/fluctuation.tsx
+++ b/site/examples/ntv/case/demo/fluctuation.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 import { Tooltip, Popover, Checkbox } from 'antd';
-import { generateTextSpec } from '@antv/ava';
-import { NarrativeTextVis, NtvPluginManager, createCustomPhraseFactory, seedToken } from '@antv/ava-react';
+import { generateTextSpec } from '@formant/ava';
+import { NarrativeTextVis, NtvPluginManager, createCustomPhraseFactory, seedToken } from '@formant/ava-react';
 import numeral from 'numeral';
 
 const fluctuationData = {
diff --git a/site/examples/ntv/case/demo/report.tsx b/site/examples/ntv/case/demo/report.tsx
index cfe6f8a08..d39c87845 100644
--- a/site/examples/ntv/case/demo/report.tsx
+++ b/site/examples/ntv/case/demo/report.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import { Skeleton } from 'antd';
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 
 const App = () => {
   const [loading, setLoading] = useState(true);
diff --git a/site/examples/ntv/custom/demo/block.tsx b/site/examples/ntv/custom/demo/block.tsx
index 6a1a54e43..01498d632 100644
--- a/site/examples/ntv/custom/demo/block.tsx
+++ b/site/examples/ntv/custom/demo/block.tsx
@@ -2,9 +2,9 @@ import React, { useRef, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Line } from '@antv/g2plot';
-import { NarrativeTextVis, NtvPluginManager, createCustomBlockFactory } from '@antv/ava-react';
+import { NarrativeTextVis, NtvPluginManager, createCustomBlockFactory } from '@formant/ava-react';
 
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 const SALES_BY_AREA = [
   { month: '2020-01', value: 2681567, count: 1 },
diff --git a/site/examples/ntv/custom/demo/entity.tsx b/site/examples/ntv/custom/demo/entity.tsx
index cdae55c85..4ecff46fa 100644
--- a/site/examples/ntv/custom/demo/entity.tsx
+++ b/site/examples/ntv/custom/demo/entity.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
-import { NarrativeTextVis, NtvPluginManager, createRatioValue, createDeltaValue } from '@antv/ava-react';
+import { NarrativeTextVis, NtvPluginManager, createRatioValue, createDeltaValue } from '@formant/ava-react';
 
 const POS_COLOR = '#269075';
 const NEG_COLOR = '#f4664a';
diff --git a/site/examples/ntv/custom/demo/phrase.tsx b/site/examples/ntv/custom/demo/phrase.tsx
index 40b0a41b9..2be2d4f45 100644
--- a/site/examples/ntv/custom/demo/phrase.tsx
+++ b/site/examples/ntv/custom/demo/phrase.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 import { Tooltip } from 'antd';
-import { NarrativeTextVis, NtvPluginManager, createMetricName, createCustomPhraseFactory } from '@antv/ava-react';
+import { NarrativeTextVis, NtvPluginManager, createMetricName, createCustomPhraseFactory } from '@formant/ava-react';
 
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 const textSpec: NarrativeTextSpec = {
   sections: [
diff --git a/site/examples/ntv/interactive/demo/analysis.tsx b/site/examples/ntv/interactive/demo/analysis.tsx
index 8c0700e2c..c56ba515a 100644
--- a/site/examples/ntv/interactive/demo/analysis.tsx
+++ b/site/examples/ntv/interactive/demo/analysis.tsx
@@ -9,13 +9,13 @@ import {
   NtvPluginManager,
   createCustomPhraseFactory,
   createCustomBlockFactory,
-} from '@antv/ava-react';
+} from '@formant/ava-react';
 import { isEqual } from 'lodash';
 import moment from 'moment';
 import Mock from 'mockjs';
 
 import type { Plot } from '@antv/g2plot';
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 const DATE_FORMAT = 'YYYY.MM.DD';
 const mockData = Array.from({ length: 100 }, (v, i) => ({
diff --git a/site/examples/ntv/interactive/demo/coordinated-chart.tsx b/site/examples/ntv/interactive/demo/coordinated-chart.tsx
index 23cee2c79..421d2be03 100644
--- a/site/examples/ntv/interactive/demo/coordinated-chart.tsx
+++ b/site/examples/ntv/interactive/demo/coordinated-chart.tsx
@@ -2,11 +2,11 @@ import React, { useRef, useEffect } from 'react';
 
 import ReactDOM from 'react-dom';
 import { Pie } from '@antv/g2plot';
-import { NarrativeTextVis } from '@antv/ava-react';
+import { NarrativeTextVis } from '@formant/ava-react';
 import { get } from 'lodash';
 import insertCss from 'insert-css';
 
-import type { NarrativeTextSpec } from '@antv/ava-react';
+import type { NarrativeTextSpec } from '@formant/ava-react';
 
 insertCss(`
   .hover-g2plot-pie {