diff --git a/src/locales/en.json b/src/locales/en.json
index c9315ea0..51968cb2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,6 +38,7 @@
   "Failed": "Failed",
   "Failed to update some jobs": "Failed to update some jobs",
   "Failed to schedule service, hence other jobs are not updated": "Failed to schedule service, hence other jobs are not updated",
+  "Fetching time zones": "Fetching time zones",
   "Go to Launchpad": "Go to Launchpad",
   "Go to OMS": "Go to OMS",
   "History": "History",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 16d875af..56a23b66 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -76,6 +76,7 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-tint: #f5f6f9;
 }
 
+
 @media (prefers-color-scheme: dark) {
   /*
    * Dark Colors
@@ -312,6 +313,23 @@ hr {
   border-bottom: var(--border-medium);
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (min-width: 991px) {
   .find {
     grid: "search  main" min-content
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index 0e8918a1..c98c8da1 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.vue
@@ -14,9 +14,15 @@
   </ion-header>
 
   <ion-content class="ion-padding">
-    <!-- Empty state -->
-    <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <p>{{ $t("No time zone found")}}</p>
+     <!-- Empty state -->
+    <div class="empty-state" v-if="isLoading">
+      <ion-item lines="none">
+        <ion-spinner color="secondary" name="crescent" slot="start" />
+        {{ $t("Fetching time zones") }}
+      </ion-item>
+    </div>
+    <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
+      <p>{{ $t("No time zone found") }}</p>
     </div>
 
     <!-- Timezones -->
@@ -30,7 +36,7 @@
         </ion-radio-group>
       </ion-list>
     </div>
-    
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button :disabled="!timeZoneId" @click="saveAlert">
         <ion-icon :icon="save" />
@@ -54,6 +60,7 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController,
@@ -81,6 +88,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -89,7 +97,8 @@ export default defineComponent({
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      isLoading: false
     }
   },
   methods: {
@@ -129,6 +138,7 @@ export default defineComponent({
       });
     },
     async getAvailableTimeZones() {
+      this.isLoading = true;
       UserService.getAvailableTimeZones().then((resp: any) => {
         if(resp.status === 200 && !hasError(resp)) {
           // We are filtering valid the timeZones coming with response here
@@ -137,6 +147,7 @@ export default defineComponent({
           });
           this.findTimeZone();
         }
+        this.isLoading = false;
       })
     },
     selectSearchBarText(event: any) {