diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72cb8145..d28d0f6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -82,15 +82,16 @@ and this project adheres to
     empty racks, `discard_empty_racks` and `other_racks` drawing parameters.
 - ui:
   - Many improvements in datacenter details page (#39), such as:
-    - The table of rooms is moved upper in the page
+    - The table of rooms is moved upper in the page.
     - The datacenter search input is replaced by a filter input in the top right
       corner to filter rooms by name.
     - The table of rooms does not use all page width anymore.
     - The _"Access to the room"_ button is be renamed _"View room"_.
     - The table header for view room button has been removed.
     - Add button to sort rooms by name in alphabetical order, either in
-      ascending or descending order
+      ascending or descending order.
     - Adopt the same font as in datacenter room details view.
+  - More ergonomic combobox to select datacenter and infrastructure (#38).
 - docs:
   - Update supported Linux distributions in quickstart guide (add fedora 39
     and drop fedora 37).
diff --git a/racksdb/web/ui/src/views/DatacentersView.vue b/racksdb/web/ui/src/views/DatacentersView.vue
index d1158bbb..6d66531e 100644
--- a/racksdb/web/ui/src/views/DatacentersView.vue
+++ b/racksdb/web/ui/src/views/DatacentersView.vue
@@ -8,15 +8,14 @@ SPDX-License-Identifier: GPL-3.0-or-later -->
 import { useHttp } from '@/plugins/http'
 import { useRacksDBAPI } from '@/composables/RacksDBAPI'
 import { ref, onMounted } from 'vue'
-import SearchBar from '@/components/SearchBar.vue'
 import type { Ref } from 'vue'
 import type { Datacenter } from '@/composables/RacksDBAPI'
 import BreadCrumbs from '@/components/BreadCrumbs.vue'
+import ComboBox from '@/components/ComboBox.vue'
 
 const http = useHttp()
 const racksDBAPI = useRacksDBAPI(http)
 const datacenters: Ref<Array<Datacenter>> = ref([])
-
 async function getDatacenters() {
   datacenters.value = await racksDBAPI.datacenters()
 }
@@ -29,12 +28,7 @@ onMounted(() => {
 <template>
   <BreadCrumbs />
 
-  <SearchBar
-    v-if="datacenters.length"
-    viewTitle="Datacenter View"
-    searchedItem="datacenter"
-    :items="datacenters"
-  />
+  <ComboBox itemType="datacenter" :items="datacenters" />
 
   <!-- map code will be here -->
 </template>
diff --git a/racksdb/web/ui/src/views/InfrastructuresView.vue b/racksdb/web/ui/src/views/InfrastructuresView.vue
index efe35a47..0182894d 100644
--- a/racksdb/web/ui/src/views/InfrastructuresView.vue
+++ b/racksdb/web/ui/src/views/InfrastructuresView.vue
@@ -8,10 +8,10 @@ SPDX-License-Identifier: GPL-3.0-or-later -->
 import { useHttp } from '@/plugins/http'
 import { useRacksDBAPI } from '@/composables/RacksDBAPI'
 import { ref, onMounted } from 'vue'
-import SearchBar from '@/components/SearchBar.vue'
 import type { Ref } from 'vue'
 import type { Infrastructure } from '@/composables/RacksDBAPI'
 import BreadCrumbs from '@/components/BreadCrumbs.vue'
+import ComboBox from '@/components/ComboBox.vue'
 
 const http = useHttp()
 const racksDBAPI = useRacksDBAPI(http)
@@ -29,10 +29,5 @@ onMounted(() => {
 <template>
   <BreadCrumbs />
 
-  <SearchBar
-    v-if="infrastructures.length"
-    viewTitle="Infrastructure View"
-    searchedItem="infrastructure"
-    :items="infrastructures"
-  />
+  <ComboBox itemType="infrastructure" :items="infrastructures" />
 </template>