diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index 025987244..8313b8920 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -2,6 +2,7 @@ import ExampleFunnel from "./Examples/Funnel";
 import ExamplePath from "./Examples/Path";
 import ExampleTrend from "./Examples/Trend";
 import PerfBreakdown from "./Examples/PerfBreakdown";
+import BarChartCard from "./Examples/BarChart";
 import SlowestDomain from "./Examples/SlowestDomain";
 import ByBrowser from "./Examples/SessionsBy/ByBrowser";
 import BySystem from "./Examples/SessionsBy/BySystem";
@@ -315,21 +316,8 @@ export const CARD_LIST: CardType[] = [
         metricOf: FilterKey.ERRORS_PER_DOMAINS,
         category: CARD_CATEGORIES[3].key,
         example: Bars,
-        data: {
-            total: 90,
-            values: [
-                {
-                    "label": "company.domain.com",
-                    "value": 89
-                },
-                {
-                    "label": "openreplay.com",
-                    "value": 15
-                }
-            ]
-        }
+        data: generateRandomBarsData(),
     },
-
     {
         title: 'Errors by Type',
         key: FilterKey.ERRORS_PER_TYPE,
@@ -375,6 +363,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
     {
@@ -385,6 +374,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -396,6 +386,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -407,6 +398,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -418,6 +410,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -429,6 +422,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -440,6 +434,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -451,6 +446,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -462,6 +458,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -473,6 +470,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -484,6 +482,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
     {
@@ -494,6 +493,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -505,6 +505,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -516,6 +517,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -527,6 +529,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -538,6 +541,7 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 
@@ -549,6 +553,38 @@ export const CARD_LIST: CardType[] = [
         category: CARD_CATEGORIES[4].key,
         width: 1,
         height: 148,
+        data: generateWebVitalData(),
         example: WebVital,
     },
 ]
+
+
+function generateRandomBarsData(): { total: number, values: { label: string, value: number }[] } {
+    const labels = ["company.domain.com", "openreplay.com"];
+    const values = labels.map(label => ({
+        label,
+        value: Math.floor(Math.random() * 100)
+    }));
+    const total = values.reduce((acc, curr) => acc + curr.value, 0);
+
+    return {
+        total,
+        values: values.sort((a, b) => b.value - a.value)
+    };
+}
+
+
+function generateWebVitalData(): { value: number, chart: { timestamp: number, value: number }[], unit: string } {
+    const chart = Array.from({length: 7}, (_, i) => ({
+        timestamp: Date.now() + i * 86400000,
+        value: parseFloat((Math.random() * 10).toFixed(15))
+    }));
+
+    const value = chart.reduce((acc, curr) => acc + curr.value, 0) / chart.length;
+
+    return {
+        value,
+        chart,
+        unit: "%"
+    };
+}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
new file mode 100644
index 000000000..1283062d9
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
@@ -0,0 +1,74 @@
+import {GitCommitHorizontal} from 'lucide-react';
+import React from 'react';
+
+import ExCard from './ExCard';
+import {PERFORMANCE} from "App/constants/card";
+import {Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Styles} from "Components/Dashboard/Widgets/common";
+
+const _data = [
+    {
+        name: 'Jan',
+        uv: 4000,
+        pv: 2400,
+    },
+    {
+        name: 'Feb',
+        uv: 3000,
+        pv: 1398,
+    },
+    {
+        name: 'Mar',
+        uv: 2000,
+        pv: 9800,
+    },
+    {
+        name: 'Apr',
+        uv: 2780,
+        pv: 3908,
+    },
+    {
+        name: 'May',
+        uv: 1890,
+        pv: 4800,
+    },
+    {
+        name: 'Jun',
+        uv: 2390,
+        pv: 3800,
+    },
+    {
+        name: 'Jul',
+        uv: 3490,
+        pv: 4300,
+    },
+];
+
+function BarChartCard(props: any) {
+    return (
+        <ExCard
+            {...props}
+        >
+            <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                    width={400}
+                    height={280}
+                    data={_data}
+                    margin={Styles.chartMargins}
+                >
+                    {/*<CartesianGrid strokeDasharray="3 3"/>*/}
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>
+                    <XAxis {...Styles.xaxis} dataKey="name"/>
+                    <YAxis {...Styles.yaxis} />
+                    <Tooltip {...Styles.tooltip} />
+                    <Legend/>
+                    <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue"/>}/>
+                    {/*<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>*/}
+                </BarChart>
+            </ResponsiveContainer>
+        </ExCard>
+
+    );
+}
+
+export default BarChartCard;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
index 8fbe5e865..f741e4073 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
@@ -19,7 +19,9 @@ function ExCard({
       style={{width: '100%', height: height || 286}}
     >
       <div className={'font-medium text-lg'}>{title}</div>
-      <div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
+      <div className={'flex flex-col gap-2 mt-2 cursor-pointer'} style={{
+        height: height ? height - 50 : 236,
+      }} onClick={() => onCard(type)}>{children}</div>
     </div>
   );
 }
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx
index c15e3d86a..1b23a24f4 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx
@@ -6,10 +6,11 @@ interface Props {
     title: string;
     type: string;
     onCard: (card: string) => void;
+    data?: any,
 }
 
 function WebVital(props: Props) {
-    const data = {
+    const data = props.data || {
         "value": 8.33316146432396,
         "chart": [
             {