diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index fc4a4af74..55b378c0f 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -46,7 +46,6 @@ declare module 'vue' {
     ListFilter: typeof import('./src/components/ListFilter/ListFilter.vue')['default']
     ListPicker: typeof import('./src/components/Controls/ListPicker.vue')['default']
     LoginBox: typeof import('./src/components/LoginBox.vue')['default']
-    LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     NestedPopover: typeof import('./src/components/ListFilter/NestedPopover.vue')['default']
     NewDialogWithTypes: typeof import('./src/components/NewDialogWithTypes.vue')['default']
     PageBreadcrumbs: typeof import('./src/components/PageBreadcrumbs.vue')['default']
diff --git a/frontend/src2/charts/chart.ts b/frontend/src2/charts/chart.ts
index b3684240d..a6e036ef3 100644
--- a/frontend/src2/charts/chart.ts
+++ b/frontend/src2/charts/chart.ts
@@ -19,9 +19,9 @@ import {
 	DonutChartConfig,
 	MapChartConfig,
 	NumberChartConfig,
+	BubbleChartConfig,
 	TableChartConfig,
 } from '../types/chart.types'
-import { AdhocFilters, Dimension, Measure } from '../types/query.types'
 import { InsightsChartv3 } from '../types/workbook.types'
 import useWorkbook, { getLinkedQueries } from '../workbook/workbook'
 import { handleOldXAxisConfig, handleOldYAxisConfig, setDimensionNames } from './helpers'
@@ -176,6 +176,22 @@ function makeChart(name: string) {
 			}
 		}
 
+		if (chart.doc.chart_type === 'Bubble') {
+			const config = chart.doc.config as BubbleChartConfig
+			if (!config.xAxis?.measure_name) {
+				messages.push({
+					variant: 'error',
+					message: 'X-axis is required',
+				})
+			}
+			if (!config.yAxis?.measure_name) {
+				messages.push({
+					variant: 'error',
+					message: 'Y-axis is required',
+				})
+			}
+		}
+
 		return !messages.length
 	}
 
@@ -212,6 +228,10 @@ function makeChart(name: string) {
 		if (chart.doc.chart_type === 'Map') {
 			addMapChartOperation(query)
 		}
+
+		if (chart.doc.chart_type === 'Bubble') {
+			addBubbleChartOperation(query)
+		}
 	}
 
 	function addAxisChartOperation(query: Query) {
@@ -291,6 +311,38 @@ function makeChart(name: string) {
 		})
 	}
 
+	function addBubbleChartOperation(query: Query) {
+		const config = chart.doc.config as BubbleChartConfig
+
+		const dimensions: any[] = []
+		const measures: any[] = []
+
+		if (config.xAxis?.measure_name) {
+			measures.push(config.xAxis)
+		}
+
+		if (config.yAxis?.measure_name) {
+			measures.push(config.yAxis)
+		}
+
+		if (config.size_column?.measure_name) {
+			measures.push(config.size_column)
+		}
+
+		if (config.dimension?.column_name) {
+			dimensions.push(config.dimension)
+		}
+
+		if (config.quadrant_column?.column_name) {
+			dimensions.push(config.quadrant_column)
+		}
+
+		query.addSummarize({
+			measures: measures,
+			dimensions: dimensions,
+		})
+	}
+
 	function addOrderByOperation(query: Query) {
 		chart.doc.config.order_by.forEach((sort) => {
 			if (sort.column.column_name && sort.direction) {
diff --git a/frontend/src2/charts/components/BubbleChartConfigForm.vue b/frontend/src2/charts/components/BubbleChartConfigForm.vue
new file mode 100644
index 000000000..c61402f5b
--- /dev/null
+++ b/frontend/src2/charts/components/BubbleChartConfigForm.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { BubbleChartConfig } from '../../types/chart.types'
+import { ColumnOption, Dimension, DimensionOption, Measure } from '../../types/query.types'
+import CollapsibleSection from './CollapsibleSection.vue'
+import MeasurePicker from './MeasurePicker.vue'
+import DimensionPicker from './DimensionPicker.vue'
+
+const props = defineProps<{
+	dimensions: DimensionOption[]
+	columnOptions: ColumnOption[]
+}>()
+
+const config = defineModel<BubbleChartConfig>({
+	required: true,
+	default: () => ({
+		xAxis: {} as Measure,
+		yAxis: {} as Measure,
+		size_column: {} as Measure,
+		dimension: {} as Dimension,
+		quadrant_column: {} as Dimension,
+		show_data_labels: false,
+		show_quadrants: false,
+	}),
+})
+
+if (!config.value.xAxis) {
+	config.value.xAxis = {} as Measure
+}
+if (!config.value.yAxis) {
+	config.value.yAxis = {} as Measure
+}
+if (!config.value.size_column) {
+	config.value.size_column = {} as Measure
+}
+
+</script>
+
+<template>
+	<CollapsibleSection title="Setup">
+		<div class="flex flex-col gap-3 pt-1">
+			<MeasurePicker
+				label="X Axis"
+				v-model="config.xAxis"
+				:column-options="props.columnOptions"
+			/>
+
+			<MeasurePicker
+				label="Y Axis"
+				v-model="config.yAxis"
+				:column-options="props.columnOptions"
+			/>
+			<DimensionPicker
+				label="Color by"
+				v-model="config.quadrant_column!"
+				:options="props.dimensions"
+				@remove="config.quadrant_column = {} as Dimension"
+			/>
+			<MeasurePicker
+				label="Size Column"
+				v-model="config.size_column!"
+				:column-options="props.columnOptions"
+				@remove="config.size_column = {} as Measure"
+			/>
+		</div>
+	</CollapsibleSection>
+
+	<CollapsibleSection title="Options">
+		<div class="flex flex-col gap-2 pt-1">
+			<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-3">
+				<DimensionPicker
+					label="Name Column"
+					v-model="config.dimension!"
+					:options="props.dimensions"
+					@remove="config.dimension = {} as Dimension"
+						/>
+					</div>
+				<div
+					class="group  flex flex-col items-between justify-between rounded py-2"
+				>
+					<div class=" gap-3">
+						<Toggle
+							v-model="config.show_data_labels"
+							label="Show Data Labels"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</CollapsibleSection>
+
+</template>
diff --git a/frontend/src2/charts/components/ChartConfigForm.vue b/frontend/src2/charts/components/ChartConfigForm.vue
index 423277f2c..18eb5f319 100644
--- a/frontend/src2/charts/components/ChartConfigForm.vue
+++ b/frontend/src2/charts/components/ChartConfigForm.vue
@@ -3,6 +3,7 @@ import { computed, inject } from 'vue'
 import useQuery, { Query } from '../../query/query'
 import {
 	BarChartConfig,
+	BubbleChartConfig,
 	DonutChartConfig,
 	FunnelChartConfig,
 	LineChartConfig,
@@ -18,6 +19,7 @@ import FunnelChartConfigForm from './FunnelChartConfigForm.vue'
 import LineChartConfigForm from './LineChartConfigForm.vue'
 import MapChartConfigForm from './MapChartConfigForm.vue'
 import NumberChartConfigForm from './NumberChartConfigForm.vue'
+import BubbleChartConfigForm from './BubbleChartConfigForm.vue'
 import TableChartConfigForm from './TableChartConfigForm.vue'
 
 const props = defineProps<{ chart: Chart }>()
@@ -82,4 +84,10 @@ const columnOptions = computed(() => chartQuery.value.result?.columnOptions || [
 		:dimensions="dimensions"
 		:column-options="columnOptions"
 	/>
+	<BubbleChartConfigForm
+		v-if="props.chart.doc.chart_type == 'Bubble'"
+		v-model="(props.chart.doc.config as BubbleChartConfig)"
+		:dimensions="dimensions"
+		:column-options="columnOptions"
+	/>
 </template>
diff --git a/frontend/src2/charts/components/ChartIcon.vue b/frontend/src2/charts/components/ChartIcon.vue
index 6461c5e75..02cce655e 100644
--- a/frontend/src2/charts/components/ChartIcon.vue
+++ b/frontend/src2/charts/components/ChartIcon.vue
@@ -24,7 +24,7 @@ const icon = computed(() => {
 			return LineChart
 		case 'Row':
 			return BarChartHorizontal
-		case 'Scatter':
+		case 'Bubble':
 			return ScatterChart
 		case 'Area':
 			return AreaChart
diff --git a/frontend/src2/charts/components/ChartRenderer.vue b/frontend/src2/charts/components/ChartRenderer.vue
index cfb21f7a4..7816fc010 100644
--- a/frontend/src2/charts/components/ChartRenderer.vue
+++ b/frontend/src2/charts/components/ChartRenderer.vue
@@ -9,6 +9,7 @@ import {
 	LineChartConfig,
 	MapChartConfig,
 	NumberChartConfig,
+	BubbleChartConfig,
 } from '../../types/chart.types'
 import { Chart } from '../chart'
 import {
@@ -17,6 +18,7 @@ import {
 	getFunnelChartOptions,
 	getLineChartOptions,
 	getMapChartOptions,
+	getBubbleChartOptions,
 } from '../helpers'
 import { FIELDTYPES } from '../../helpers/constants.ts'
 import { titleCase } from '../../helpers'
@@ -56,6 +58,9 @@ const eChartOptions = computed(() => {
 	if (chart_type.value === 'Map') {
 		return getMapChartOptions(config.value as MapChartConfig, result.value)
 	}
+	if (chart_type.value === 'Bubble') {
+		return getBubbleChartOptions(config.value as BubbleChartConfig, result.value)
+	}
 })
 
 const showDrillDown = ref(false)
diff --git a/frontend/src2/charts/components/XAxisConfig.vue b/frontend/src2/charts/components/XAxisConfig.vue
index 08a292ffd..19af9f503 100644
--- a/frontend/src2/charts/components/XAxisConfig.vue
+++ b/frontend/src2/charts/components/XAxisConfig.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
 import { AxisChartConfig } from '../../types/chart.types'
 import { Dimension, DimensionOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 
-const props = defineProps<{ dimensions: DimensionOption[] }>()
+const props = defineProps<{ dimensions: DimensionOption[], showRotateLabels?: boolean}>()
 const x_axis = defineModel<AxisChartConfig['x_axis']>({
 	required: true,
 	default: () => ({}),
@@ -35,6 +34,7 @@ watchEffect(() => {
 				@remove="x_axis.dimension = {} as Dimension"
 			/>
 			<FormControl
+				v-if="props.showRotateLabels"
 				label="Rotate Values"
 				type="select"
 				v-model="x_axis.label_rotation"
diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts
index a8cbfefc9..cac11ec5c 100644
--- a/frontend/src2/charts/helpers.ts
+++ b/frontend/src2/charts/helpers.ts
@@ -10,13 +10,13 @@ import {
 	FunnelChartConfig,
 	LineChartConfig,
 	MapChartConfig,
+	BubbleChartConfig,
 	Series,
 	SeriesLine,
 	XAxis,
 } from '../types/chart.types'
 import { QueryResult, QueryResultColumn, QueryResultRow } from '../types/query.types'
 import { getColors, getGradientColors } from './colors'
-import { EMPTY_RESULT } from '../query/query'
 
 interface GeoJSONFeature {
 	type: string
@@ -811,8 +811,190 @@ export function getMapChartOptions(config: MapChartConfig, result: QueryResult)
 	return options
 }
 
+export function getBubbleChartOptions(config: BubbleChartConfig, result: QueryResult) {
+	const _rows = result.rows
+
+	const xColumnName = config.xAxis?.measure_name
+	const yColumnName = config.yAxis?.measure_name
+
+	if (!xColumnName || !yColumnName) {
+		return null
+	}
+
+	const colors = getColors()
+	const sizeColumnName = config.size_column?.measure_name
+	const nameColumnName = config.dimension?.dimension_name || config.dimension?.column_name
+	const groupByColumnName = config.quadrant_column?.dimension_name || config.quadrant_column?.column_name
+	const show_data_labels = config.show_data_labels || false
+
+	const scatterData = _rows.map((row) => {
+		const xValue = row[xColumnName]
+		const yValue = row[yColumnName]
+		const sizeValue = sizeColumnName ? row[sizeColumnName] : undefined
+		const nameValue = nameColumnName ? row[nameColumnName] : undefined
+		const groupValue = groupByColumnName ? row[groupByColumnName] : undefined
+		return [xValue, yValue, sizeValue, nameValue, groupValue]
+	})
+
+	const seriesMap = new Map<string, any[]>()
+	scatterData.forEach((dataPoint) => {
+		const groupValue = dataPoint[4]
+		if (!seriesMap.has(groupValue)) {
+			seriesMap.set(groupValue, [])
+		}
+		seriesMap.get(groupValue)!.push(dataPoint)
+	})
+
+	// calculate symbol size
+	let symbolSizeConfig: any = 10
+	if (sizeColumnName) {
+		const allSizes = _rows.map((r) => r[sizeColumnName]).filter((val) => val != null && !isNaN(val))
+		if (allSizes.length > 0) {
+			const minSize = Math.min(...allSizes)
+			const maxSize = Math.max(...allSizes)
+			const sizeRange = maxSize - minSize
+
+			symbolSizeConfig = (value: any[]) => {
+				const size = value[2]
+				if (size === undefined || size === null || isNaN(size)) return 10
+				if (sizeRange === 0) return 20
+				const normalized = (size - minSize) / sizeRange
+				return 10 + normalized * 25
+			}
+		}
+	}
+
+	const show_legend = !!groupByColumnName && seriesMap.size > 1
+	const series = Array.from(seriesMap.entries()).map(([groupName, data], idx) => {
+		const color = colors[idx % colors.length]
+
+		const seriesConfig: any = {
+			name: groupName,
+			type: 'scatter',
+			data: data,
+			symbolSize: symbolSizeConfig,
+			itemStyle: {
+				color: color,
+			},
+			label: {
+				show: show_data_labels,
+				position: 'top',
+				fontSize: 11,
+				formatter: (params: any) => {
+					if (nameColumnName && params.data[3]) {
+						return params.data[3]
+					}
+					const yVal = params.data[1]
+					return isNaN(yVal) ? yVal : getShortNumber(yVal, 1)
+				},
+			},
+			labelLayout: { hideOverlap: true },
+			emphasis: {
+				itemStyle: {
+					borderWidth: 6,
+					borderCap: 'round',
+					borderJoin: 'round',
+				},
+			},
+		}
+
+		if (idx === 0 && config.show_quadrants) {
+			const markLines: any[] = []
+			if (config.xAxis_refLine !== undefined && config.xAxis_refLine !== null) {
+				markLines.push({
+					xAxis: config.xAxis_refLine,
+					lineStyle: { type: 'dashed', width: 1.5 },
+				})
+			}
+			if (config.yAxis_refLine !== undefined && config.yAxis_refLine !== null) {
+				markLines.push({
+					yAxis: config.yAxis_refLine,
+					lineStyle: { type: 'dashed', width: 1.5 },
+				})
+			}
+			if (markLines.length > 0) {
+				seriesConfig.markLine = {
+					silent: true,
+					symbol: 'none',
+					data: markLines,
+				}
+			}
+		}
+
+		return seriesConfig
+	})
+
+	const xColumnLabel = result.columnOptions.find((c) => c.value === xColumnName)?.label || xColumnName
+	const yColumnLabel = result.columnOptions.find((c) => c.value === yColumnName)?.label || yColumnName
+
+	const xAxis = {
+		...getYAxis(),
+		name: xColumnLabel,
+		nameLocation: 'middle',
+		nameGap: 25,
+	}
+
+	const yAxis = {
+		...getYAxis(),
+		name: yColumnLabel,
+		nameLocation: 'middle',
+		nameGap: 35,
+	}
+
+	const titles: any[] = []
+
+	return {
+		animation: true,
+		animationDuration: 700,
+		color: colors,
+		title: titles,
+		grid: getGrid({ show_legend }),
+		xAxis,
+		yAxis,
+		series,
+		tooltip: {
+			trigger: 'item',
+			confine: true,
+			appendToBody: false,
+			formatter: (params: any) => {
+				const xVal = params.value[0]
+				const yVal = params.value[1]
+				const sizeVal = params.value[2]
+				const name = params.value[3] || params.seriesName
+				const formattedX = isNaN(xVal) ? xVal : formatNumber(xVal)
+				const formattedY = isNaN(yVal) ? yVal : formatNumber(yVal)
+
+				let html = `
+					<div class="flex flex-col gap-1">
+						<div class="font-bold">${name}</div>
+						<div class="flex items-center justify-between gap-5">
+							<div>${xColumnLabel}:</div>
+							<div class="font-bold">${formattedX}</div>
+						</div>
+						<div class="flex items-center justify-between gap-5">
+							<div>${yColumnLabel}:</div>
+							<div class="font-bold">${formattedY}</div>
+						</div>`
+
+				if (sizeVal !== undefined && sizeVal !== null) {
+					const formattedSize = isNaN(sizeVal) ? sizeVal : formatNumber(sizeVal)
+					html += `
+						<div class="flex items-center justify-between gap-5">
+							<div>${sizeColumnName}:</div>
+							<div class="font-bold">${formattedSize}</div>
+						</div>`
+				}
+
+				html += `</div>`
+				return html
+			},
+		},
+		legend: getLegend(show_legend),
+	}
+}
+
 function getGrid(options: any = {}) {
-	let bottom = options.show_legend ? 36 : 22;
+	let bottom = options.show_legend ? 45 : 22;
 	if (options.show_scrollbar && !options.swapAxes) {
 		bottom += 30;
 	}
diff --git a/frontend/src2/types/chart.types.ts b/frontend/src2/types/chart.types.ts
index 275b14ba2..1076b821c 100644
--- a/frontend/src2/types/chart.types.ts
+++ b/frontend/src2/types/chart.types.ts
@@ -4,7 +4,7 @@ import { Dimension, Measure } from './query.types'
 export const AXIS_CHARTS = ['Bar', 'Line', 'Row']
 export type AxisChartType = (typeof AXIS_CHARTS)[number]
 
-export const CHARTS = ['Number', ...AXIS_CHARTS, 'Donut', 'Funnel', 'Table', 'Map']
+export const CHARTS = ['Number', ...AXIS_CHARTS, 'Donut', 'Funnel', 'Table', 'Map', 'Bubble']
 export type ChartType = (typeof CHARTS)[number]
 
 export type AxisChartConfig = {
@@ -127,6 +127,18 @@ export type MapChartConfig = {
 	map_type?: 'world' | 'india'
 }
 
+export type BubbleChartConfig = {
+	xAxis: Measure
+	yAxis: Measure
+	size_column?: Measure
+	dimension?: Dimension
+	quadrant_column?: Dimension
+	show_data_labels?: boolean
+	show_quadrants?: boolean
+	xAxis_refLine?: number
+	yAxis_refLine?: number
+}
+
 export type ChartConfig =
 	| LineChartConfig
 	| BarChartConfig
@@ -135,3 +147,4 @@ export type ChartConfig =
 	| TableChartConfig
 	| FunnelChartConfig
 	| MapChartConfig
+	| BubbleChartConfig