diff --git a/samples/charts/data-chart/user-annotation-layer/index.html b/samples/charts/data-chart/user-annotation-layer/index.html
index ba5326888..28a232de6 100644
--- a/samples/charts/data-chart/user-annotation-layer/index.html
+++ b/samples/charts/data-chart/user-annotation-layer/index.html
@@ -17,48 +17,50 @@
     <div id="root">    
         <div class="container sample">
     
-            <div class="aboveContentSplit">
-                <div class="aboveContentLeftContainer">
-                    <igc-toolbar name="toolbar" id="toolbar" orientation="Horizontal">
-                    </igc-toolbar>
-                </div>
+             <div class="display: flex; flex-direction: row">
+                <igc-toolbar name="toolbar" id="toolbar" orientation="Horizontal">
+                </igc-toolbar>
             </div>
     
             <div class="container fill">
+
                 <igc-data-chart is-horizontal-zoom-enabled="true" is-vertical-zoom-enabled="true"
                     computed-plot-area-margin-mode="Series" name="chart" id="chart" is-user-annotations-enabled="true">
-                    <igc-category-x-axis name="xAxis" id="xAxis" label="year">
-                    </igc-category-x-axis>
-                    <igc-numeric-y-axis name="yAxis" id="yAxis" title="TWh">
-                    </igc-numeric-y-axis>
-                    <igc-line-series name="lineSeries1" id="lineSeries1" title="Electricity" value-member-path="america">
-                    </igc-line-series>
-                    <igc-line-series name="lineSeries2" id="lineSeries2" title="Electricity" value-member-path="europe">
-                    </igc-line-series>
-                    <igc-line-series name="lineSeries3" id="lineSeries3" title="Electricity" value-member-path="china">
-                    </igc-line-series>
+                    <igc-category-x-axis name="xAxis" id="xAxis" label="year"></igc-category-x-axis>
+                    <igc-numeric-y-axis name="yAxis" id="yAxis" title="TWh"></igc-numeric-y-axis>
+
+                    <igc-line-series name="lineSeries1" id="lineSeries1" title="Electricity" value-member-path="america"></igc-line-series>
+                    <igc-line-series name="lineSeries2" id="lineSeries2" title="Electricity" value-member-path="europe"></igc-line-series>
+                    <igc-line-series name="lineSeries3" id="lineSeries3" title="Electricity" value-member-path="china"></igc-line-series>
                 </igc-data-chart>
     
-                <div class="annotationPopup">
-                    <div>
-                        <label>Label:</label>
-                        <igc-input id="annotationInput" display-type="text"></igc-input>
-                    </div>
-    
-                    <div>
-                        <label>Details:</label>
-                        <igc-textarea id="annotationTextArea"></igc-textarea>
-                    </div>
-    
-                    <div>
-                        <label>Badge Color:</label>
-                        <igc-color-editor id="annotationBadgeColorEditor"></igc-color-editor>
-    
-                        <label>Main Color:</label>
-                        <igc-color-editor id="annotationMainColorEditor"></igc-color-editor>
-                    </div>
+                <div class="container vertical options" id="annotationPopup"     
+                style="position: fixed; display: none;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 13rem;
+                    height: 21rem;
+                    background-color: white;
+                    border: 1px black solid;
+                    border-radius: 0.25rem;
+                    padding-left: 0.5rem;
+                    padding-right: 0.5rem;
+                    box-shadow: 0.05rem 0.05rem 0.5rem 0.05rem gray;">
+                    
+                    <label>Label:</label>
+                    <igc-input id="annotationInput" value="Enter Label" display-type="text" style="width: calc(100% - 0.4rem);" ></igc-input>
+             
+                    <label>Details:</label>
+                    <igc-textarea id="annotationDetails" value="Enter Details" style="width: calc(100% - 0.25rem); height: 4rem; resize: none;"></igc-textarea>
+              
+                    <label>Badge Color:</label>
+                    <igc-color-editor id="annotationBadgeColorEditor" value="black"></igc-color-editor>
     
-                    <div>
+                    <label>Main Color:</label>
+                    <igc-color-editor id="annotationMainColorEditor" value="black"></igc-color-editor>
+            
+                    <div class="container horizontal" style="height: auto; justify-content: center; align-items: center; padding: 1rem; gap: 1rem;">
                         <button id="doneButton">Done</button>
                         <button id="cancelButton">Cancel</button>
                     </div>
diff --git a/samples/charts/data-chart/user-annotation-layer/src/index.css b/samples/charts/data-chart/user-annotation-layer/src/index.css
index c32768340..98682b854 100644
--- a/samples/charts/data-chart/user-annotation-layer/src/index.css
+++ b/samples/charts/data-chart/user-annotation-layer/src/index.css
@@ -1,36 +1,2 @@
 /* shared styles are loaded from: */
 /* https://static.infragistics.com/xplatform/css/samples */
-
-.aboveContentSplit {
-    display: flex;
-    flex-direction: row;
-}
-.aboveContentLeftContainer {
-    margin-left: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.aboveContentRightContainer {
-    margin-right: 1.25rem;
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
-
-.annotationPopup {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 20%;
-    height: 350px;
-    background-color: white;
-    border: 1px black solid;
-    display: none;
-    border-radius: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
diff --git a/samples/charts/data-chart/user-annotation-layer/src/index.ts b/samples/charts/data-chart/user-annotation-layer/src/index.ts
index 76166bd29..70ed85d56 100644
--- a/samples/charts/data-chart/user-annotation-layer/src/index.ts
+++ b/samples/charts/data-chart/user-annotation-layer/src/index.ts
@@ -31,10 +31,10 @@ export class Sample {
     private xAxis: IgcCategoryXAxisComponent
     private yAxis: IgcNumericYAxisComponent
     private annotationInput: IgcInputComponent;    
-    private annotationTextArea: IgcTextareaComponent;
+    private annotationDetails: IgcTextareaComponent;
     private annotationBadgeColorEditor: IgcColorEditorComponent;
     private annotationMainColorEditor: IgcColorEditorComponent;
-    private currentAnnotationInfo: IgcUserAnnotationInformation;
+    private annotationInfo: IgcUserAnnotationInformation;
 
     private _bind: () => void;
 
@@ -47,7 +47,7 @@ export class Sample {
         var lineSeries2 = document.getElementById('lineSeries2') as IgcLineSeriesComponent;
         var lineSeries3 = document.getElementById('lineSeries3') as IgcLineSeriesComponent;  
         this.annotationInput = document.getElementById('annotationInput') as IgcInputComponent;
-        this.annotationTextArea = document.getElementById('annotationTextArea') as IgcTextareaComponent;
+        this.annotationDetails = document.getElementById('annotationDetails') as IgcTextareaComponent;
         this.annotationMainColorEditor = document.getElementById('annotationMainColorEditor') as IgcColorEditorComponent;
         this.annotationBadgeColorEditor = document.getElementById('annotationBadgeColorEditor') as IgcColorEditorComponent;
 
@@ -58,7 +58,7 @@ export class Sample {
         this.chart.userAnnotationToolTipContentUpdating = this.onUserAnnotationToolTipContentUpdating.bind(this);
 
         doneButton.onclick = this.onDoneBtnClick.bind(this);
-        cancelButton.onclick = this.onCancelBtnClick.bind(this);        
+        cancelButton.onclick = this.onCancelBtnClick.bind(this);
 
         this._bind = () => {
             toolbar.target = this.chart;
@@ -77,8 +77,8 @@ export class Sample {
         this._bind();
     }
 
-    public onUserAnnotationInformationRequested(s: IgcSeriesViewerComponent, e: IgcUserAnnotationInformationEventArgs){        
-        this.currentAnnotationInfo = e.annotationInfo;
+    public onUserAnnotationInformationRequested(s: IgcSeriesViewerComponent, e: IgcUserAnnotationInformationEventArgs) {
+        this.annotationInfo = e.annotationInfo;
         this.toggleDialogState(true);
     }
 
@@ -88,6 +88,7 @@ export class Sample {
         if (e.content.children.length == 0) {
             var element = document.createElement("div");
             element.textContent = tooltipText;
+            element.style = "color: white";
             e.content.appendChild(element);
         }
         else {
@@ -98,27 +99,32 @@ export class Sample {
 
     public onDoneBtnClick() {
 
-        this.currentAnnotationInfo.label = this.annotationInput.value;
-        this.currentAnnotationInfo.annotationData = this.annotationTextArea.value;
-        this.currentAnnotationInfo.mainColor = this.annotationMainColorEditor.value;
-        this.currentAnnotationInfo.badgeColor = this.annotationBadgeColorEditor.value;
+        this.annotationInfo.label = this.annotationInput.value;
+        this.annotationInfo.annotationData = this.annotationDetails.value;
+        this.annotationInfo.mainColor = this.annotationMainColorEditor.value;
+        this.annotationInfo.badgeColor = this.annotationBadgeColorEditor.value;
 
-        this.chart.finishAnnotationFlow(this.currentAnnotationInfo);
+        this.chart.finishAnnotationFlow(this.annotationInfo);
         this.toggleDialogState(false);
     }
 
-    public onCancelBtnClick(){        
-        this.chart.cancelAnnotationFlow(this.currentAnnotationInfo.annotationId);
+    public onCancelBtnClick() {
+
+        if (this.annotationInfo !== undefined && this.annotationInfo.annotationId !== undefined)
+        { 
+            this.chart.cancelAnnotationFlow(this.annotationInfo.annotationId);
+        }
+
         this.toggleDialogState(false);
     }
 
     public toggleDialogState(open: boolean) : void{
-        var popup = document.getElementsByClassName('annotationPopup')[0] as HTMLDivElement;
+        var popup = document.getElementById('annotationPopup') as HTMLDivElement;
         
-        if(open){
-            popup.style.display = "block";
+        if (open) {
+            popup.style.display = "flex";
         }
-        else{
+        else {
             popup.style.display = "none";
         }
     }