diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 463365f4..338318a9 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -130,7 +130,7 @@ import {
 	ComboboxOptions,
 	ComboboxOption,
 } from '@headlessui/vue'
-import { Popover, Button } from 'frappe-ui'
+import { Popover } from 'frappe-ui'
 import { ChevronDown, X } from 'lucide-vue-next'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
diff --git a/frontend/src/components/Modals/LiveClassModal.vue b/frontend/src/components/Modals/LiveClassModal.vue
index 2941eea4..7d16acb7 100644
--- a/frontend/src/components/Modals/LiveClassModal.vue
+++ b/frontend/src/components/Modals/LiveClassModal.vue
@@ -39,13 +39,19 @@
 								:required="true"
 							/>
 						</Tooltip>
-						<FormControl
-							v-model="liveClass.timezone"
-							type="select"
-							:options="getTimezoneOptions()"
-							:label="__('Timezone')"
-							:required="true"
-						/>
+
+						<div class="space-y-1.5">
+							<label class="block text-ink-gray-5 text-xs" for="batchTimezone">
+								{{ __('Timezone') }}
+								<span class="text-ink-red-3">*</span>
+							</label>
+							<Autocomplete
+								@update:modelValue="(opt) => (liveClass.timezone = opt.value)"
+								:modelValue="liveClass.timezone"
+								:options="getTimezoneOptions()"
+								:required="true"
+							/>
+						</div>
 					</div>
 					<div>
 						<FormControl
@@ -83,18 +89,14 @@
 </template>
 <script setup>
 import {
-	Input,
-	DatePicker,
-	Select,
-	Textarea,
 	Dialog,
 	createResource,
 	Tooltip,
 	FormControl,
+	Autocomplete,
 } from 'frappe-ui'
 import { reactive, inject } from 'vue'
 import { getTimezones, createToast } from '@/utils/'
-import { Info } from 'lucide-vue-next'
 
 const liveClasses = defineModel('reloadLiveClasses')
 const show = defineModel()
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index 26ae36a0..7d2f9724 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -271,7 +271,7 @@ const isStudent = computed(() => {
 	)
 })
 
-const tabIndex = useRouteQuery('tab', 0)
+const tabIndex = useRouteQuery('tab', 0, { transform: Number })
 const tabs = computed(() => {
 	let batchTabs = []
 	batchTabs.push({