diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index 30f50cfe3..fcad68a3e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -1,4 +1,3 @@
-
 import ExampleFunnel from './Examples/Funnel';
 import ExamplePath from './Examples/Path';
 import ExampleTrend from './Examples/Trend';
@@ -14,6 +13,7 @@ import {
   TABLE,
   TIMESERIES,
   USER_PATH,
+  PERFORMANCE,
 } from 'App/constants/card';
 import { FilterKey } from 'Types/filter/filterType';
 import { BarChart, TrendingUp, SearchSlash } from 'lucide-react';
@@ -21,6 +21,8 @@ import ByIssues from 'Components/Dashboard/components/DashboardList/NewDashModal
 import InsightsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample';
 import ByUser from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser';
 import BarChartCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart';
+import SpeedIndexByLocationExample
+  from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample';
 import CallsWithErrorsExample
   from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample';
 import SlowestDomains
@@ -255,6 +257,20 @@ export const CARD_LIST: CardType[] = [
     ],
     example: ExampleTrend
   },
+  {
+    title: 'Speed Index',
+    key: FilterKey.SPEED_LOCATION,
+    cardType: PERFORMANCE,
+    metricOf: FilterKey.SPEED_LOCATION,
+    category: CARD_CATEGORIES[1].key,
+    data: {
+      chart: generateAreaData(),
+      namesMap: [
+        'Series 1'
+      ]
+    },
+    example: SpeedIndexByLocationExample
+  },
   {
     title: 'Sessions with Slow Network Requests',
     key: TIMESERIES + '_slow_network_requests',
diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
index 8cf2dbf3c..86952a4a7 100644
--- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
@@ -47,7 +47,8 @@ function WidgetPredefinedChart(props: Props) {
                 return <CallsErrors5xx data={data} metric={metric} />
             case FilterKey.CALLS_ERRORS:
                 return <CallWithErrors isTemplate={isTemplate} data={data} />
-
+            case FilterKey.SPEED_LOCATION:
+                return <SpeedIndexByLocation data={data} />
             default:
                 return <div className="h-40 color-red">Widget not supported</div>
         }
diff --git a/frontend/app/constants/card.ts b/frontend/app/constants/card.ts
index 44fa7ade6..3fa110cdc 100644
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@@ -21,6 +21,7 @@ export const USER_PATH = 'pathAnalysis';
 export const RETENTION = 'retention';
 export const FEATURE_ADOPTION = 'featureAdoption';
 export const INSIGHTS = 'insights';
+export const PERFORMANCE = 'performance';
 
 export interface Option {
   label: string;
@@ -73,6 +74,7 @@ export const TYPES: CardType[] = [
     description: 'Find out where users are dropping and understand why.',
     slug: FUNNEL,
   },
+  { title: 'Speed Index', slug: FilterKey.SPEED_LOCATION, description: '' },
   {
     title: 'Path Analysis',
     icon: 'signpost-split',