diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.html b/samples/maps/geo-map/display-azure-imagery/src/app.component.html
index 8d502430..75dc9f3f 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.component.html
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.html
@@ -1,5 +1,5 @@
 <div class="container sample center" 
-     style="display:flex; flex-direction:column; align-items:center; gap:2px;">
+     style="flex-direction:column; align-items:center; gap:2px;">
 
   <!-- Button + Select on the same line -->
   <div class="controls-row" style="display:flex; gap:8px; align-items:center;">
@@ -18,7 +18,7 @@
   </div>
 
   <!-- Azure Key Dialog with Form -->
-  <igx-dialog #dialog [modal]="true" [width]="'400px'" [height]="'auto'">
+  <igx-dialog #dialog class="custom-dialog">
     <form #keyForm="ngForm" (ngSubmit)="onSubmit(keyForm)">
       <div class="dialog-header">
         <h3>Azure Key</h3>
@@ -49,7 +49,7 @@ <h3>Azure Key</h3>
        style="position:absolute; z-index:1; width:100%; height:500px; object-fit:cover;" />
 
   <!-- Always render map underneath -->
-  <igx-geographic-map #map [height]="'500px'" [width]="'100%'" style="position:relative; z-index:0;">
+  <igx-geographic-map #map [height]="'500px'" [width]="'100%'" style="position:relative; z-index:0;" [hidden]="isMapHidden">
     <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
   </igx-geographic-map>
 </div>
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
index e251c7fa..f1d94723 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
@@ -1,89 +1,31 @@
-/* Overall container centers everything like WC */
-.container.sample.center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  margin-top: 10px;
-  font-family: 'Titillium Web', sans-serif;
+:host {
+    display: inline;
+    padding: 0px;
 }
 
-/* Controls row: button + select + preview thumbnail */
-.controls-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 0rem;
-
-  button[igxButton] {
-    min-width: 240px;
-  }
-
-  igx-select {
-    width: 240px;
-  }
-
-  .preview-current img {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #ccc;
-    object-fit: cover;
-    border-radius: 4px;
-  }
+.keyInForm {
+    igx-input-group + igx-input-group {
+        margin-top: 24px;
+    }
 }
 
-/* Map container centers map/placeholder like WC */
-.map-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-
-  .placeholder {
-    width: 100%;
-    max-width: 800px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    object-fit: cover;
-  }
+.dialog-container{
+    display: flex;
 
-  igx-geographic-map {
-    width: 100%;
-    max-width: 100%;
-    height: 500px;
-  }
+    igx-icon {
+        margin-right: 8px;
+    }
 }
 
-/* Dialog header and content spacing */
-.dialog-header {
-  padding-bottom: 0.5rem;
-  text-align: left;
+.hidden {
+  display: none;
 }
 
-.dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  input[type='text'] {
-    padding: 0.4rem;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    font-size: 14px;
-  }
+.show {
+  display: inline;
 }
 
-/* Dialog actions: buttons on right side */
-.dialog-actions {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-
-  button {
-    min-width: 80px;
-    padding: 0.4rem 1rem;
-    border-radius: 4px;
-  }
-}
+::ng-deep igx-dialog.custom-dialog {
+  width: 400px;
+  height: auto;
+}
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
index 03918d0f..038299c8 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
@@ -36,6 +36,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   public styleOptions: string[] = [];
   public selectedStyle!: string;
   public previewImageSrc: string = '';
+  public isMapHidden = true;
 
   public styleConfig: Record<string, { placeholder: string; background?: AzureMapsImageryStyle; zoom: () => void }> = {
     Satellite: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png", zoom: () => this.zoomUS() },
@@ -105,13 +106,17 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.azureBackground.apiKey = key;
   }
 
+  showMap() {
+    this.isMapHidden = false;
+  } 
+
   public onSubmit(form: NgForm) {
     const key = this.apiKeyInputValue;
     if (!key) return;
 
     this.setApiKey(key);
     if (this.selectedStyle) this.updateAzureMap(this.selectedStyle);
-
+    this.showMap();
     // Close the dialog first, then reset form after a tick
     setTimeout(() => {
       this.dialog.close();