diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 549bfcb..14a3367 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative project-group-picker" ref="pickerRef">
+  <div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
     <input
       v-model="searchText"
       type="text"
@@ -7,40 +7,82 @@
       :disabled="props.disabled"
       placeholder="Search project groups..."
       @focus="onFocus"
+      @click="onInputClick"
+      @input="onInput"
       @keydown="onKeydown"
     />
-    <ul
+    <div
       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"
+      class="pg-dropdown position-absolute w-100 mt-1"
       @mousedown.prevent
     >
-      <li
-        v-if="projectGroups.length === 0 && !loading"
-        class="list-group-item text-muted"
+      <div class="pg-header">
+        <span v-if="projectGroups.length > 0" class="pg-count">
+          <template v-if="totalCount !== undefined">
+            Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
+            <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
+          </template>
+          <template v-else-if="!hasMore">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
+          <template v-else>
+            Showing first {{ projectGroups.length }} results
+            <span v-if="!loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
+          </template>
+        </span>
+        <span v-if="loading" class="spinner-border spinner-border-sm ms-auto" role="status" aria-hidden="true"></span>
+      </div>
+      <div
+        class="pg-list-wrap"
+        :class="{ 'pg-has-more': hasMore && !loading }"
+        ref="listRef"
+        @scroll="onScroll"
       >
-        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>
+        <ul class="list-group list-group-flush">
+          <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>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
+<script lang="ts">
+const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group'
+
+function loadCachedName(id: string): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP)
+    if (!raw) return undefined
+    const stored = JSON.parse(raw) as { id: string; name: string }
+    return stored.id === id ? stored.name : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function persistCachedName(id: string, name: string) {
+  if (typeof window === 'undefined') return
+  try {
+    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, JSON.stringify({ id, name }))
+  } catch { /* silently fail */ }
+}
+</script>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
@@ -55,14 +97,16 @@ const isOpen = ref(false)
 const projectGroups = ref<{ id: string; name: string }[]>([])
 const selectedGroupName = ref('')
 const loading = ref(false)
+const totalCount = ref<number | undefined>(undefined)
 const pickerRef = ref<HTMLElement | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
 
 let pageNo = 1
-let hasMore = true
+const hasMore = ref(true)
 let pendingReset = false
 const pageSize = 10
+let hasUnfilteredResults = false
 
 const loadGroups = async (reset = false) => {
   if (loading.value) {
@@ -72,11 +116,12 @@ const loadGroups = async (reset = false) => {
 
   if (reset) {
     pageNo = 1
-    hasMore = true
+    hasMore.value = true
     projectGroups.value = []
     activeIndex.value = -1
+    totalCount.value = undefined
   }
-  if (!hasMore) return
+  if (!hasMore.value) return
 
   loading.value = true
   try {
@@ -85,12 +130,18 @@ const loadGroups = async (reset = false) => {
     if (query === selectedGroupName.value) {
       query = ''
     }
+    if (reset) {
+      hasUnfilteredResults = query === ''
+    }
 
-    const newGroups = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
+    const { items: newGroups, total } = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
+    if (total !== undefined) totalCount.value = total
     projectGroups.value.push(...newGroups)
+    const selected = newGroups.find(g => g.id === model.value)
+    if (selected) persistCachedName(selected.id, selected.name)
 
     if (newGroups.length < pageSize) {
-      hasMore = false
+      hasMore.value = false
     } else {
       pageNo++
     }
@@ -108,14 +159,23 @@ const loadGroups = async (reset = false) => {
 }
 
 let timeoutId: ReturnType<typeof setTimeout>
-watch(searchText, (newVal, oldVal) => {
-  if (!isOpen.value) return
 
+const onInputClick = () => {
+  if (!isOpen.value) {
+    isOpen.value = true
+    if (!hasUnfilteredResults || projectGroups.value.length === 0) {
+      loadGroups(true)
+    }
+  }
+}
+
+const onInput = () => {
+  isOpen.value = true
   clearTimeout(timeoutId)
   timeoutId = setTimeout(() => {
     loadGroups(true)
   }, 300)
-})
+}
 
 watch(model, (newId) => {
   const pg = projectGroups.value.find(p => p.id === newId)
@@ -127,7 +187,7 @@ watch(model, (newId) => {
 
 const onScroll = (e: Event) => {
   const target = e.target as HTMLElement
-  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight * 0.8) {
     loadGroups()
   }
 }
@@ -139,12 +199,15 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
+    persistCachedName(pg.id, pg.name)
   }
 }
 
 const onFocus = (e: Event) => {
   isOpen.value = true
-  loadGroups(true)
+  if (!hasUnfilteredResults || projectGroups.value.length === 0) {
+    loadGroups(true)
+  }
   const target = e.target as HTMLInputElement
   if (target) {
     target.select()
@@ -198,59 +261,119 @@ const onKeydown = (e: KeyboardEvent) => {
     }
   } 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 = ''
-    }
+    closeDropdown()
   }
 }
 
-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 = ''
-      }
-    }
+const applyCachedName = () => {
+  const cached = loadCachedName(model.value as string) ?? ''
+  searchText.value = cached
+  selectedGroupName.value = cached
+}
+
+const closeDropdown = () => {
+  isOpen.value = false
+  const pg = projectGroups.value.find(p => p.id === model.value)
+  const name = pg?.name ?? selectedGroupName.value
+  searchText.value = name
+  if (pg) selectedGroupName.value = name
+}
+
+const onFocusOut = (e: FocusEvent) => {
+  if (!pickerRef.value?.contains(e.relatedTarget as Node)) {
+    if (isOpen.value) closeDropdown()
   }
 }
 
 onMounted(async () => {
-  document.addEventListener('mousedown', handleClickOutside)
+  // Show cached name immediately before the API call completes
+  if (model.value && loadCachedName(model.value as string)) {
+    applyCachedName()
+  }
+
   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
+    } else if (model.value && loadCachedName(model.value as string)) {
+      // Group is beyond page 1 — use the cached name for display
+      applyCachedName()
+    } else if (model.value) {
+      // model is set but name is unknown — paginate until the group is found
+      while (hasMore.value) {
+        await loadGroups()
+        const found = projectGroups.value.find(pg => pg.id === model.value)
+        if (found) {
+          searchText.value = found.name
+          selectedGroupName.value = found.name
+          break
+        }
+      }
+    } else if (!model.value) {
+      const first = projectGroups.value[0]!
+      model.value = first.id
+      searchText.value = first.name
+      selectedGroupName.value = first.name
     }
   }
 })
 
 onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
+  clearTimeout(timeoutId)
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "assets/scss/theme.scss";
+
 .cursor-pointer {
   cursor: pointer;
 }
+.pg-dropdown {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  z-index: 1000;
+}
+.pg-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  border-bottom: 1px solid $gray-200;
+  background: $gray-100;
+  min-height: 30px;
+}
+.pg-count {
+  font-size: 0.74rem;
+  color: $gray-700;
+  flex: 1;
+}
+.pg-scroll-hint {
+  color: $primary;
+}
+.pg-list-wrap {
+  position: relative;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.pg-list-wrap.pg-has-more::after {
+  content: '';
+  display: block;
+  position: sticky;
+  bottom: 0;
+  height: 44px;
+  margin-top: -44px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95));
+  pointer-events: none;
+}
 .list-group-item.highlighted {
-  background-color: rgba(13, 110, 253, 0.25);
+  background-color: rgba(13, 110, 253, 0.15);
   color: inherit;
 }
 </style>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index f4cc716..2aa7056 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -44,8 +44,35 @@
 </template>
 
 <script lang="ts">
-let lastProjectGroupId: string;
-let lastWorkspaceId: number;
+const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
+const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
+
+function getLastProjectGroupId(): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+    if (!raw) return null;
+    const stored = JSON.parse(raw) as { id: string; name: string };
+    return stored.id ?? null;
+  } catch {
+    return null;
+  }
+}
+function getLastWorkspaceId(): number | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const v = sessionStorage.getItem(STORAGE_KEY_WORKSPACE);
+    return v ? Number(v) : null;
+  } catch {
+    return null;
+  }
+}
+function setLastWorkspaceId(id: number) {
+  if (typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
+  } catch { /* silently fail */ }
+}
 </script>
 
 <script setup lang="ts">
@@ -57,7 +84,7 @@ const route = useRoute();
 const workspaces = (await workspacesClient.getMyWorkspaces()).sort(compareWorkspaceCreatedAtDesc);
 const workspacesByProjectGroup = Map.groupBy(workspaces, w => w.tdeiProjectGroupId);
 
-const currentProjectGroup = ref(null);
+const currentProjectGroup = ref(getLastProjectGroupId());
 const currentWorkspace = ref({});
 const currentWorkspaces = computed(() => workspacesByProjectGroup.get(currentProjectGroup.value));
 
@@ -68,8 +95,7 @@ for (const w of workspaces) {
 }
 
 onMounted(() => {
-  watch(currentWorkspace, (val) => { lastWorkspaceId = val.id });
-  watch(currentProjectGroup, (val) => { lastProjectGroupId = val });
+  watch(currentWorkspace, (val) => { if (val?.id) setLastWorkspaceId(val.id) });
   watch(currentWorkspaces, onCurrentWorkspacesChange);
 
   autoSelectPreferredView();
@@ -88,6 +114,7 @@ function autoSelectPreferredView() {
     }
   }
 
+  const lastWorkspaceId = getLastWorkspaceId();
   if (lastWorkspaceId) {
     const workspace = workspaces.find(w => w.id === lastWorkspaceId);
 
@@ -98,9 +125,7 @@ function autoSelectPreferredView() {
     }
   }
 
-  if (lastProjectGroupId) {
-    currentProjectGroup.value = lastProjectGroupId;
-  }
+  // currentProjectGroup is already initialized from sessionStorage synchronously
 }
 
 async function onCurrentWorkspacesChange(val) {
@@ -140,20 +165,19 @@ async function selectWorkspace(workspace) {
   }
 
   .project-group-picker {
-    width: auto;
-    border-color: transparent;
-    border-left-color: $border-color;
-    margin-right: auto;
+    width: 100%;
+    border-color: $border-color;
+    margin-right: 1rem;
 
-    &:hover {
-      border-color: $border-color;
-    }
+    @include media-breakpoint-up(md) {
+      width: auto;
+      min-width: 300px;
+      border-color: transparent;
+      border-left-color: $border-color;
+      margin-right: auto;
 
-    @include media-breakpoint-down(md) {
-      & {
-        width: 100%;
+      &:hover {
         border-color: $border-color;
-        margin-right: 1rem;
       }
     }
   }
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index acf0428..1db82ef 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -38,6 +38,9 @@
                 required
               />
             </label>
+            <div v-if="datasetError" class="alert alert-danger py-2" role="alert">
+              {{ datasetError }}
+            </div>
           </div><!-- .card-body -->
 
           <div class="card-footer">
@@ -140,21 +143,25 @@ 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);
+const datasetError = ref<string | null>(null);
 
 watch(tdeiRecordId, (val) => getDatasetInfo(val));
 
 const complete = computed(() =>
   workspaceTitle.value.trim().length > 0
-    && projectGroupId.value !== null
-    && tdeiRecordId !== null
+  && projectGroupId.value !== null
+  && tdeiRecordId.value !== null
+  && datasetError.value === null,
 );
 
 async function getDatasetInfo(id: string | null) {
+  datasetError.value = null
+
   if (id === null) {
     for (const prop in record) {
       record[prop] = '';
@@ -180,9 +187,14 @@ async function getDatasetInfo(id: string | null) {
 
   await nextTick();
 
-  workspaceTitle.value = record.metadata?.dataset_detail?.name ?? '';
-  projectGroupId.value = record.project_group.tdei_project_group_id;
-  tdeiRecordId.value = record.tdei_dataset_id;
+  if (!record.project_group?.tdei_project_group_id || !record.tdei_dataset_id) {
+    datasetError.value = 'The selected dataset returned incomplete data. Please try a different dataset or contact support.'
+    return
+  }
+
+  workspaceTitle.value = record.metadata?.dataset_detail?.name ?? ''
+  projectGroupId.value = record.project_group.tdei_project_group_id
+  tdeiRecordId.value = record.tdei_dataset_id
 
   initMap();
 }
diff --git a/services/tdei.ts b/services/tdei.ts
index 5f66305..f625b5b 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -123,6 +123,8 @@ export class TdeiAuthStore {
     this.refreshExpiresAt = new Date(0);
 
     localStorage.removeItem(this._storageKey);
+    sessionStorage.removeItem('tdei-selected-project-group');
+    sessionStorage.removeItem('tdei-selected-workspace');
   }
 }
 
@@ -457,8 +459,8 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return new TdeiClient(this._baseUrl, this.#auth, signal ?? this._abortSignal);
   }
 
-  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}`;
+  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total?: number }> {
+    let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}&sort_by=${sortBy}`;
     if (searchText) {
       url += `&searchText=${encodeURIComponent(searchText)}`;
     }
@@ -466,11 +468,14 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     const response = await this._get(url);
 
     try {
+      const totalHeader = response.headers.get('X-Total-Count');
+      const totalParsed = totalHeader !== null ? parseInt(totalHeader, 10) : NaN;
+      const total = Number.isNaN(totalParsed) ? undefined : totalParsed;
       const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
-      return items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name }));
+      return { items: items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name })), total };
     } catch (e) {
       console.warn('getMyProjectGroups: failed to parse API response', e);
-      return [];
+      return { items: [] };
     }
   }