diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index a48077d..aab7111 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -1,29 +1,256 @@
 <template>
-  <select
-    v-model="model"
-    class="project-group-picker form-select"
-    aria-label="Project Group Selection"
-  >
-    <option
-      v-for="pg in projectGroups"
-      :key="pg.id"
-      :value="pg.id"
+  <div class="position-relative project-group-picker" ref="pickerRef">
+    <input
+      v-model="searchText"
+      type="text"
+      class="form-select"
+      :disabled="props.disabled"
+      placeholder="Search project groups..."
+      @focus="onFocus"
+      @keydown="onKeydown"
+    />
+    <ul
+      v-if="isOpen"
+      ref="listRef"
+      class="list-group position-absolute w-100 mt-1 shadow bg-white"
+      style="z-index: 1000; max-height: 250px; overflow-y: auto;"
+      @scroll="onScroll"
+      @mousedown.prevent
     >
-      {{ pg.name }}
-    </option>
-  </select>
+      <li
+        v-if="projectGroups.length === 0 && !loading"
+        class="list-group-item text-muted"
+      >
+        No project groups found.
+      </li>
+      <li
+        v-for="(pg, index) in projectGroups"
+        :key="pg.id"
+        :id="'pg-item-' + index"
+        class="list-group-item list-group-item-action cursor-pointer"
+        :class="{ highlighted: activeIndex === index, 'fw-bold': model === pg.id }"
+        @click="selectGroup(pg.id)"
+        @mouseenter="activeIndex = index"
+      >
+        {{ pg.name }}
+      </li>
+      <li v-if="loading" class="list-group-item text-center">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
 
+const props = withDefaults(defineProps<{ disabled?: boolean }>(), {
+  disabled: false,
+})
+
 const model = defineModel({ required: true })
-const projectGroups = (await tdeiUserClient.getMyProjectGroups())
-  .sort((a, b) => a.name.localeCompare(b.name))
+const searchText = ref('')
+const isOpen = ref(false)
+const projectGroups = ref<{ id: string; name: string }[]>([])
+const selectedGroupName = ref('')
+const loading = ref(false)
+const pickerRef = ref<HTMLElement | null>(null)
+const listRef = ref<HTMLElement | null>(null)
+const activeIndex = ref(-1)
+
+let pageNo = 1
+let hasMore = true
+let pendingReset = false
+const pageSize = 10
+
+const loadGroups = async (reset = false) => {
+  if (loading.value) {
+    pendingReset = pendingReset || reset
+    return
+  }
+
+  if (reset) {
+    pageNo = 1
+    hasMore = true
+    projectGroups.value = []
+    activeIndex.value = -1
+  }
+  if (!hasMore) return
+
+  loading.value = true
+  try {
+    let query = searchText.value
+    // If the text is exactly the selected group's name, fetch all options instead of filtering
+    if (query === selectedGroupName.value) {
+      query = ''
+    }
+
+    const newGroups = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
+    projectGroups.value.push(...newGroups)
 
-if (projectGroups.length > 0) {
-  if (!model.value || !projectGroups.some(pg => pg.id === model.value)) {
-    model.value = projectGroups[0].id
+    if (newGroups.length < pageSize) {
+      hasMore = false
+    } else {
+      pageNo++
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+
+    if (pendingReset) {
+      const resetNext = pendingReset
+      pendingReset = false
+      await loadGroups(resetNext)
+    }
   }
 }
+
+let timeoutId: ReturnType<typeof setTimeout>
+watch(searchText, (newVal, oldVal) => {
+  if (!isOpen.value) return
+  
+  clearTimeout(timeoutId)
+  timeoutId = setTimeout(() => {
+    loadGroups(true)
+  }, 300)
+})
+
+watch(model, (newId) => {
+  const pg = projectGroups.value.find(p => p.id === newId)
+  if (pg && !isOpen.value) {
+    searchText.value = pg.name
+    selectedGroupName.value = pg.name
+  }
+})
+
+const onScroll = (e: Event) => {
+  const target = e.target as HTMLElement
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
+    loadGroups()
+  }
+}
+
+const selectGroup = (id: string) => {
+  model.value = id
+  isOpen.value = false
+  const pg = projectGroups.value.find(p => p.id === id)
+  if (pg) {
+    searchText.value = pg.name
+    selectedGroupName.value = pg.name
+  }
+}
+
+const onFocus = (e: Event) => {
+  isOpen.value = true
+  loadGroups(true)
+  const target = e.target as HTMLInputElement
+  if (target) {
+    target.select()
+  }
+}
+
+const scrollToActive = () => {
+  nextTick(() => {
+    if (!listRef.value || activeIndex.value < 0) return
+    const activeEl = listRef.value.querySelector(`#pg-item-${activeIndex.value}`) as HTMLElement
+    if (activeEl) {
+      const list = listRef.value
+      const top = activeEl.offsetTop
+      const bottom = top + activeEl.offsetHeight
+      
+      if (top < list.scrollTop) {
+        list.scrollTop = top
+      } else if (bottom > list.scrollTop + list.clientHeight) {
+        list.scrollTop = bottom - list.clientHeight
+      }
+    }
+  })
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!isOpen.value) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      onFocus(e)
+      e.preventDefault()
+    }
+    return
+  }
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    if (activeIndex.value < projectGroups.value.length - 1) {
+      activeIndex.value++
+      scrollToActive()
+    }
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    if (activeIndex.value > 0) {
+      activeIndex.value--
+      scrollToActive()
+    }
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (activeIndex.value >= 0 && activeIndex.value < projectGroups.value.length) {
+      const pg = projectGroups.value[activeIndex.value]
+      if (pg) selectGroup(pg.id)
+    }
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    isOpen.value = false
+    const pg = projectGroups.value.find(p => p.id === model.value)
+    if (pg) {
+      searchText.value = pg.name
+      selectedGroupName.value = pg.name
+    } else {
+      searchText.value = ''
+    }
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
+    if (isOpen.value) {
+      isOpen.value = false
+      const pg = projectGroups.value.find(p => p.id === model.value)
+      if (pg) {
+        searchText.value = pg.name
+        selectedGroupName.value = pg.name
+      } else {
+        searchText.value = ''
+      }
+    }
+  }
+}
+
+onMounted(async () => {
+  document.addEventListener('mousedown', handleClickOutside)
+  await loadGroups(true)
+  
+  if (projectGroups.value.length > 0) {
+    if (!model.value) {
+      model.value = projectGroups.value[0]?.id
+    }
+    const selected = projectGroups.value.find(pg => pg.id === model.value)
+    if (selected) {
+      searchText.value = selected.name
+      selectedGroupName.value = selected.name
+    }
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
 </script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+.list-group-item.highlighted {
+  background-color: rgba(13, 110, 253, 0.25);
+  color: inherit;
+}
+</style>
diff --git a/package.json b/package.json
index 596255b..6ddc8d1 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "maplibre-gl": "^5.10.0",
     "nuxt": "^4.0.0",
     "papaparse": "^5.5.1",
+    "qrcode": "^1.5.4",
     "vue": "^3.4.19",
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.5",
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index aabbf4f..11d2ce3 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -147,6 +147,7 @@
 </template>
 
 <script setup lang="ts">
+declare const L: any;
 import { LoadingContext } from '~/services/loading'
 import { TdeiImporter, TdeiImporterContext } from '~/services/import/tdei'
 import { osmClient, tdeiClient, workspacesClient } from '~/services/index'
@@ -156,11 +157,11 @@ const importer = new TdeiImporter(workspacesClient, tdeiClient, osmClient, conte
 
 const loading = reactive(new LoadingContext())
 const route = useRoute()
-const tdeiRecordId = ref(null)
-const record = reactive({})
-const map = ref({})
+const tdeiRecordId = ref<string | null>(null)
+const record = reactive<Record<string, any>>({})
+const map = ref<any>({})
 const workspaceTitle = ref('')
-const projectGroupId = ref(null)
+const projectGroupId = ref<string | null>(null)
 
 watch(tdeiRecordId, val => getDatasetInfo(val))
 
@@ -170,7 +171,7 @@ const complete = computed(() =>
   && tdeiRecordId.value !== null,
 )
 
-async function getDatasetInfo(id: string) {
+async function getDatasetInfo(id: string | null) {
   if (id === null) {
     for (const prop in record) {
       record[prop] = ''
@@ -183,9 +184,15 @@ async function getDatasetInfo(id: string) {
   await loading.wrap(tdeiClient, async (client) => {
     const info = await client.getDatasetInfo(id)
 
-    for (const prop in info) {
-      record[prop] = info[prop]
+    if (!info) return
+
+    // Clear stale keys from any previously loaded dataset before merging,
+    // so switching datasets never leaves orphaned fields in record.
+    for (const key of Object.keys(record)) {
+      delete record[key]
     }
+
+    Object.assign(record, info)
   })
 
   await nextTick()
@@ -202,6 +209,10 @@ onMounted(async () => {
 })
 
 function initMap() {
+  if (map.value && map.value.remove) {
+    map.value.remove()
+  }
+
   // TODO: use Mapbox
   map.value = L.map('dataset_map')
 
@@ -210,19 +221,23 @@ function initMap() {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map.value)
 
-  const area = L.geoJSON(record.metadata.dataset_detail.dataset_area).addTo(map.value)
-  const bounds = area.getBounds()
+  if (record.metadata?.dataset_detail?.dataset_area) {
+    const area = L.geoJSON(record.metadata.dataset_detail.dataset_area).addTo(map.value)
+    const bounds = area.getBounds()
 
-  map.value.fitBounds(bounds)
+    if (bounds.isValid()) {
+      map.value.fitBounds(bounds)
+    }
+  }
 }
 
 async function create() {
   const workspaceId = await importer.import({
     title: workspaceTitle.value,
     type: record.data_type,
-    tdeiRecordId: tdeiRecordId.value,
-    tdeiProjectGroupId: projectGroupId.value,
-    tdeiServiceId: record.service.tdei_service_id,
+    tdeiRecordId: tdeiRecordId.value as string,
+    tdeiProjectGroupId: projectGroupId.value as string,
+    tdeiServiceId: record.service?.tdei_service_id || '',
     tdeiMetadata: JSON.stringify(record),
   })
 
diff --git a/services/tdei.ts b/services/tdei.ts
index 6f0535d..5f66305 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -2,7 +2,15 @@ import { BlobReader, BlobWriter, ZipReader } from '@zip.js/zip.js';
 
 import { BaseHttpClient, BaseHttpClientError } from '~/services/http';
 import type { ICancelableClient } from '~/services/loading';
-import type { TdeiFeedback } from '~/types/tdei.ts';
+import type {
+  TdeiFeedback,
+  TdeiProjectGroupApiResponse,
+  TdeiServiceApiResponse,
+  TdeiDatasetApiResponse,
+  TdeiProjectGroup,
+  TdeiService,
+  TdeiDatasetSummary,
+} from '~/types/tdei.ts';
 
 const MIN_TOKEN_REFRESH_MS = 10 * 1000;
 
@@ -14,7 +22,7 @@ function expiresAsDate(seconds: number) {
   return new Date(Date.now() + seconds * 1000);
 }
 
-function getJwtBody(accessToken: string) {
+function getJwtBody(accessToken: string): any {
   const bodyStart = accessToken.indexOf('.');
   const bodyEnd = accessToken.indexOf('.', bodyStart + 1);
 
@@ -128,7 +136,9 @@ export class TdeiClientError extends Error {
 }
 
 export class TdeiConversionError extends Error {
-  constructor(job) {
+  job: any;
+
+  constructor(job: any) {
     super(`TDEI conversion failed: ${job.message}`);
     this.job = job;
   }
@@ -187,7 +197,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
 
     try {
       await this.refreshToken();
-    } catch(e: unknown) {
+    } catch (e: unknown) {
       console.warn('Exception when refreshing TDEI access token', e);
       return false;
     }
@@ -210,26 +220,26 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     this.#refreshTimer = undefined;
   }
 
-  async getDatasetInfo(tdeiRecordId: string) {
+  async getDatasetInfo(tdeiRecordId: string): Promise<TdeiDatasetApiResponse | undefined> {
     const response = await this._get(`datasets?status=All&tdei_dataset_id=${tdeiRecordId}`);
 
-    return (await response.json())[0];
+    return (await response.json() as TdeiDatasetApiResponse[])[0];
   }
 
-  async getDatasetsByProjectGroupAndName(projectGroupId: string, name: string) {
+  async getDatasetsByProjectGroupAndName(projectGroupId: string, name: string): Promise<TdeiDatasetSummary[]> {
     const response = await this._get(`datasets?tdei_project_group_id=${projectGroupId}&name=${encodeURIComponent(name)}`);
 
-    return (await response.json())
+    return (await response.json() as TdeiDatasetApiResponse[])
       .map(d => ({ id: d.tdei_dataset_id, name: d.metadata.dataset_detail.name, version: d.metadata.dataset_detail.version }));
   }
 
-  async downloadOswDataset(tdeiRecordId: string, format: string = 'osw'): Blob {
+  async downloadOswDataset(tdeiRecordId: string, format: string = 'osw'): Promise<Blob> {
     const response = await this._sendTest(`osw/${tdeiRecordId}?format=${format}`, 'GET');
 
     return (await response.blob());
   }
 
-  async downloadPathwaysDataset(tdeiDatasetId: string): Blob {
+  async downloadPathwaysDataset(tdeiDatasetId: string): Promise<Blob> {
     const response = await this._sendTest(`gtfs-pathways/${tdeiDatasetId}`, 'GET');
 
     return (await response.blob());
@@ -241,11 +251,11 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     const entries = await zipReader.getEntries();
     const blobWriter = new BlobWriter();
 
-    const isDataset = filename => !filename.startsWith('changeset')
+    const isDataset = (filename: string) => !filename.startsWith('changeset')
       && (filename.endsWith('.zip') || filename.endsWith('.xml'));
 
     const out = {
-      dataset: await entries.find(e => isDataset(e.filename)).getData(blobWriter),
+      dataset: await entries.find(e => isDataset(e.filename))?.getData?.(blobWriter),
       metadata: entries.find(e => e.filename.endsWith('.json'))
     };
 
@@ -258,8 +268,8 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     tdeiRecordId: string,
     projectGroupId: string,
     serviceId: string,
-    dataset,
-    metadata
+    dataset: Blob,
+    metadata: any
   ) {
     const body = new FormData();
     body.append('dataset', new File([dataset], 'dataset.zip', { type: 'application/x-zip-compressed' }));
@@ -282,8 +292,8 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     tdeiRecordId: string,
     projectGroupId: string,
     serviceId: string,
-    dataset,
-    metadata
+    dataset: Blob,
+    metadata: any
   ) {
     const body = new FormData();
     body.append('dataset', new File([dataset], 'dataset.zip', { type: 'application/x-zip-compressed' }));
@@ -307,7 +317,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     sourceFormat: string,
     targetFormat: string,
     projectGroupId: string
-  ): Blob {
+  ): Promise<Blob> {
     const body = new FormData();
     body.append('source_format', sourceFormat);
     body.append('target_format', targetFormat);
@@ -381,9 +391,9 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     const jwt = getJwtBody(body.access_token);
 
     this.#auth.username = username;
-    this.#auth.subject = jwt.sub;
-    this.#auth.displayName = jwt.name;
-    this.#auth.email = jwt.email;
+    this.#auth.subject = typeof jwt.sub === 'string' ? jwt.sub : '';
+    this.#auth.displayName = typeof jwt.name === 'string' ? jwt.name : '';
+    this.#auth.email = typeof jwt.email === 'string' ? jwt.email : '';
     this.#auth.accessToken = body.access_token;
     this.#auth.refreshToken = body.refresh_token;
     this.#auth.expiresAt = expiresAsDate(body.expires_in);
@@ -411,7 +421,7 @@ export class TdeiClient extends BaseHttpClient implements ICancelableClient {
     }
   }
 
-  async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
     try {
       if (this.#auth.needsRefresh) {
         await this.refreshToken();
@@ -447,17 +457,27 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return new TdeiClient(this._baseUrl, this.#auth, signal ?? this._abortSignal);
   }
 
-  async getMyProjectGroups() {
-    const response = await this._get(`project-group-roles/${this.#auth.subject}`);
+  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10): Promise<TdeiProjectGroup[]> {
+    let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}`;
+    if (searchText) {
+      url += `&searchText=${encodeURIComponent(searchText)}`;
+    }
+
+    const response = await this._get(url);
 
-    return (await response.json())
-      .map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name }));
+    try {
+      const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
+      return items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name }));
+    } catch (e) {
+      console.warn('getMyProjectGroups: failed to parse API response', e);
+      return [];
+    }
   }
 
-  async getMyServices(projectGroupId: string, type: string = 'all') {
+  async getMyServices(projectGroupId: string, type: string = 'all'): Promise<TdeiService[]> {
     const response = await this._get(`service?tdei_project_group_id=${projectGroupId}&service_type=${type}`);
 
-    return (await response.json())
+    return (await response.json() as TdeiServiceApiResponse[])
       .map(s => ({ id: s.tdei_service_id, name: s.service_name }));
   }
 
@@ -467,7 +487,7 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     }
   }
 
-  async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
     try {
       await this.#tdeiClient.tryRefreshAuth();
       this.#setAuthHeader();
diff --git a/types/tdei.ts b/types/tdei.ts
index 3a01edd..10e27dc 100644
--- a/types/tdei.ts
+++ b/types/tdei.ts
@@ -1,3 +1,34 @@
+/** Shape returned by the TDEI project-group-roles API */
+export interface TdeiProjectGroupApiResponse {
+  tdei_project_group_id: string;
+  project_group_name: string;
+}
+
+/** Shape returned by the TDEI service API */
+export interface TdeiServiceApiResponse {
+  tdei_service_id: string;
+  service_name: string;
+}
+
+/** Shape returned by the TDEI datasets API */
+export interface TdeiDatasetApiResponse {
+  tdei_dataset_id: string;
+  data_type: string;
+  status: string;
+  project_group: TdeiProjectGroupItem;
+  service?: {
+    tdei_service_id: string;
+    service_name?: string;
+  };
+  metadata: {
+    dataset_detail: {
+      name: string;
+      version?: string;
+      dataset_area?: object;
+    };
+  };
+}
+
 export interface TdeiProjectGroupItem {
   tdei_project_group_id: string;
   name: string;
@@ -8,6 +39,25 @@ export interface TdeiDatasetItem {
   name: string;
 }
 
+/** Normalized project group used throughout the UI */
+export interface TdeiProjectGroup {
+  id: string;
+  name: string;
+}
+
+/** Normalized service used throughout the UI */
+export interface TdeiService {
+  id: string;
+  name: string;
+}
+
+/** Normalized dataset used throughout the UI */
+export interface TdeiDatasetSummary {
+  id: string;
+  name: string;
+  version?: string;
+}
+
 export interface TdeiFeedback {
   id: number;
   status: string;