diff --git a/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
index 5fed5cc795..9e6e1028ab 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue
@@ -6,9 +6,32 @@
 				<h4>Chart Settings</h4>
 			</header>
 			<div class="content">
-				<div v-if="annotations !== undefined">
+				<div v-if="chartAnnotations !== undefined" class="annotation-items">
 					<h5>Annotations</h5>
-					<p>Not yet implemented</p>
+					<div v-for="annotation in chartAnnotations" :key="annotation.id" class="annotation-item">
+						{{ annotation.description }}
+						<span class="btn-wrapper">
+							<Button icon="pi pi-trash" rounded text @click="$emit('delete-annotation', annotation.id)" />
+						</span>
+					</div>
+					<div>
+						<Button
+							v-if="!showAnnotationInput"
+							class="p-button-sm p-button-text"
+							icon="pi pi-plus"
+							label="Add annotation"
+							@click="showAnnotationInput = true"
+						/>
+						<tera-input-text
+							v-if="showAnnotationInput"
+							v-model="generateAnnotationQuery"
+							:icon="'pi pi-sparkles'"
+							:placeholder="'What do you want to annotate?'"
+							:disabled="!!isGeneratingAnnotation"
+							@keyup.enter="createAnnotationDebounced"
+							@keyup.esc="cancelGenerateAnnotation"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -16,16 +39,55 @@
 </template>
 
 <script setup lang="ts">
+import _ from 'lodash';
+import { ref, computed } from 'vue';
 import Button from 'primevue/button';
 import { ChartSetting } from '@/types/common';
 import { ChartAnnotation } from '@/types/Types';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
-defineProps<{
+const props = defineProps<{
 	activeSettings: ChartSetting | null;
 	annotations?: ChartAnnotation[];
+	/**
+	 * We receives generateAnnotation as a functor from the parent to access the parent scope directly. This allows us to utilize dependencies defined in the parent component without passing them all as props, which can be cumbersome.
+	 * Additionally, it enables us to handle post-generation actions (like resetting loading state or clearing input) after function completion.
+	 * @param setting ChartSetting
+	 * @param query llm query to generate annotation
+	 */
+	generateAnnotation?: (setting: ChartSetting, query: string) => Promise<ChartAnnotation>;
 }>();
 
-defineEmits(['close', 'update:settings']);
+const emit = defineEmits(['close', 'update:settings', 'delete-annotation', 'create-annotation']);
+
+const chartAnnotations = computed(() => {
+	if (props.annotations === undefined) {
+		return undefined;
+	}
+	return props.annotations.filter((annotation) => annotation.chartId === props.activeSettings?.id);
+});
+const isGeneratingAnnotation = ref(false);
+const generateAnnotationQuery = ref<string>('');
+const showAnnotationInput = ref<Boolean>(false);
+
+const createAnnotation = async () => {
+	if (props.generateAnnotation === undefined || props.activeSettings === null) {
+		return;
+	}
+	isGeneratingAnnotation.value = true;
+	const newAnnotation = await props.generateAnnotation(props.activeSettings, generateAnnotationQuery.value);
+	isGeneratingAnnotation.value = false;
+	showAnnotationInput.value = false;
+	generateAnnotationQuery.value = '';
+	emit('create-annotation', newAnnotation);
+};
+// Note: For some reason, @keyup.enter event on <tera-input-text> is fired twice. Let's introduce a debounced function to make sure the function is called only once.
+const createAnnotationDebounced = _.debounce(createAnnotation, 100);
+
+const cancelGenerateAnnotation = () => {
+	generateAnnotationQuery.value = '';
+	showAnnotationInput.value = false;
+};
 </script>
 
 <style scoped>
@@ -71,5 +133,27 @@ defineEmits(['close', 'update:settings']);
 	.content {
 		padding: var(--gap-4);
 	}
+
+	.annotation-items {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-2);
+
+		.annotation-item {
+			position: relative;
+			padding: var(--gap-2);
+			padding-right: var(--gap-9);
+			background: var(--surface-50);
+		}
+		.btn-wrapper {
+			position: absolute;
+			top: 0;
+			right: var(--gap-2);
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			height: 100%;
+		}
+	}
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
index 9552f27796..308a4af433 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
@@ -40,7 +40,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:model-value', 'blur', 'focus']);
 const inputField = ref<HTMLInputElement | null>(null);
-const getDisabled = props.disabled ?? false;
+const getDisabled = computed(() => props.disabled ?? false);
 const isFocused = ref(false);
 
 const focusInput = () => {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 62eefe59fc..e2f88cdb70 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -271,8 +271,13 @@
 			>
 				<template #overlay>
 					<tera-chart-settings-panel
-						:annotations="[]"
+						:annotations="
+							activeChartSettings?.type === ChartSettingType.VARIABLE_COMPARISON ? chartAnnotations : undefined
+						"
 						:active-settings="activeChartSettings"
+						:generate-annotation="generateAnnotation"
+						@create-annotation="addChartAnnotation"
+						@delete-annotation="removeChartAnnotation"
 						@close="activeChartSettings = null"
 					/>
 				</template>
@@ -352,6 +357,7 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import * as vega from 'vega';
+import { v4 as uuidv4 } from 'uuid';
 import { csvParse, autoType, mean, variance } from 'd3';
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 import Button from 'primevue/button';
@@ -376,7 +382,8 @@ import {
 	CsvAsset,
 	DatasetColumn,
 	ModelConfiguration,
-	AssetType
+	AssetType,
+	ChartAnnotation
 } from '@/types/Types';
 import { CiemssPresetTypes, DrilldownTabs, ChartSetting, ChartSettingType } from '@/types/common';
 import { getTimespan, drilldownChartSize, nodeMetadata } from '@/components/workflow/util';
@@ -569,6 +576,35 @@ const selectedErrorVariables = computed(() =>
 		.map((setting) => setting.selectedVariables[0])
 );
 
+const chartAnnotations = ref<ChartAnnotation[]>([]);
+const generateAnnotation = async (setting: ChartSetting, query: string) => {
+	// Generate fake annotation. The annotation generation logic for the specific chart setting should go here
+	// Different chart settings type may have different annotation generation logic
+	await new Promise((resolve) => {
+		setTimeout(resolve, 1000);
+	});
+	const annotation: ChartAnnotation = {
+		id: uuidv4(),
+		description: query,
+		nodeId: props.node.id,
+		outputId: '',
+		chartId: setting.id,
+		layerSpec: {},
+		llmGenerated: false,
+		metadata: {}
+	};
+	return annotation;
+};
+const addChartAnnotation = (annotation: ChartAnnotation) => {
+	chartAnnotations.value.push(annotation);
+};
+const removeChartAnnotation = (annotationId: string) => {
+	const index = chartAnnotations.value.findIndex((annotation) => annotation.id === annotationId);
+	if (index !== -1) {
+		chartAnnotations.value.splice(index, 1);
+	}
+};
+
 const pyciemssMap = ref<Record<string, string>>({});
 const preparedChartInputs = computed(() => {
 	const state = props.node.state;