diff --git a/frontend/src/components/Charts/BaseChart.vue b/frontend/src/components/Charts/BaseChart.vue
index 758250bac..148417d30 100644
--- a/frontend/src/components/Charts/BaseChart.vue
+++ b/frontend/src/components/Charts/BaseChart.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { areDeeplyEqual } from '@/utils'
 import * as echarts from 'echarts'
-import { onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ChartTitle from './ChartTitle.vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Controls/Attachment.vue b/frontend/src/components/Controls/Attachment.vue
index 0e003c1a7..43af505e8 100644
--- a/frontend/src/components/Controls/Attachment.vue
+++ b/frontend/src/components/Controls/Attachment.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col text-base">
+	<div class="flex flex-col overflow-hidden text-base">
 		<span class="mb-2 block text-sm leading-4 text-gray-700">
 			{{ label || 'Attach File' }}
 		</span>
@@ -14,14 +14,14 @@
 		/>
 
 		<!-- Upload Button -->
-		<Button v-if="!file?.name" class="form-input h-7" @click="upload" :loading="uploading">
+		<Button v-if="!file?.name" @click="upload" :loading="uploading">
 			<FeatherIcon name="upload" class="mr-1 inline-block h-3 w-3" />
 			{{ placeholder || 'Upload a file' }}
 		</Button>
 
 		<!-- Clear Button -->
-		<Button v-else class="form-input h-7" iconRight="x" @click="clear">
-			{{ file.file_name }}
+		<Button v-else iconRight="x" @click="clear">
+			<span class="truncate">{{ file.file_name }}</span>
 		</Button>
 	</div>
 </template>
diff --git a/frontend/src/query/PublicChart.vue b/frontend/src/query/PublicChart.vue
index da84e7b87..290db4769 100644
--- a/frontend/src/query/PublicChart.vue
+++ b/frontend/src/query/PublicChart.vue
@@ -14,15 +14,5 @@ const chart = usePublicChart(props.public_key)
 		:data="chart.data"
 		:options="chart.doc.options"
 		:key="JSON.stringify(chart.doc.options)"
-	>
-		<template #placeholder>
-			<InvalidWidget
-				class="absolute"
-				title="Insufficient options"
-				message="Please check the options for this chart"
-				icon="settings"
-				icon-class="text-gray-500"
-			/>
-		</template>
-	</component>
+	/>
 </template>
diff --git a/frontend/src/query/usePublicChart.js b/frontend/src/query/usePublicChart.js
index d184bfa7b..cc0922f4e 100644
--- a/frontend/src/query/usePublicChart.js
+++ b/frontend/src/query/usePublicChart.js
@@ -1,5 +1,6 @@
 import { safeJSONParse } from '@/utils'
 import { getFormattedResult } from '@/utils/query/results'
+import { convertResultToObjects } from '@/widgets/useChartData'
 import { createResource } from 'frappe-ui'
 import { reactive } from 'vue'
 
@@ -22,7 +23,8 @@ export default function usePublicChart(publicKey) {
 	async function load() {
 		state.loading = true
 		state.doc = await resource.fetch()
-		state.data = getFormattedResult(state.doc.data)
+		const results = getFormattedResult(state.doc.data)
+		state.data = convertResultToObjects(results)
 		state.loading = false
 	}
 	load()
diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index f8664dade..b342761fc 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -15,7 +15,7 @@ const emptyExpressionColumn = {
 }
 
 const assistedQuery = inject('assistedQuery')
-const emit = defineEmits(['save', 'discard', 'remove'])
+const emit = defineEmits(['save', 'remove'])
 const props = defineProps({ column: Object })
 
 const propsColumn = props.column || emptyExpressionColumn
@@ -83,12 +83,9 @@ function onSave() {
 			</div>
 		</div>
 
-		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<Button variant="outline" @click="emit('discard')"> Discard </Button>
-			<div class="flex flex-col gap-2 lg:flex-row">
-				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
-				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
-			</div>
+		<div class="flex flex-col justify-end gap-2 lg:flex-row">
+			<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
+			<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index c4adfdfe1..92cc24a4e 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -147,20 +147,21 @@ function onColumnSort(e) {
 		</DraggableList>
 	</div>
 
-	<Dialog
-		:modelValue="showExpressionEditor"
-		:options="{
-			title: 'Column Expression',
-			size: '3xl',
-		}"
-	>
-		<template #body-content>
-			<ColumnExpressionEditor
-				:column="columns[activeColumnIdx]"
-				@remove="onRemoveColumn"
-				@save="onSaveColumn"
-				@discard="activeColumnIdx = null"
-			/>
+	<Dialog :modelValue="showExpressionEditor" :options="{ size: '3xl' }">
+		<template #body>
+			<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+				<div class="flex items-center justify-between pb-4">
+					<h3 class="text-2xl font-semibold leading-6 text-gray-900">
+						Column Expression
+					</h3>
+					<Button variant="ghost" @click="activeColumnIdx = null" icon="x"> </Button>
+				</div>
+				<ColumnExpressionEditor
+					:column="columns[activeColumnIdx]"
+					@remove="onRemoveColumn"
+					@save="onSaveColumn"
+				/>
+			</div>
 		</template>
 	</Dialog>
 </template>