diff --git a/configs/ecospheres/config.yaml b/configs/ecospheres/config.yaml
index ebc7796d3..22b8fa295 100644
--- a/configs/ecospheres/config.yaml
+++ b/configs/ecospheres/config.yaml
@@ -26,10 +26,10 @@ website:
   logo_operator:
   homepage_title: 'Ecosphères'
   homepage_subtitle: 'Explorez les données ouvertes et restreintes de la **Transition écologique**, de la **Cohésion des territoires**, de la **Transition énergétique** et de la **Mer**'
-  search_bar: 
+  search_bar:
     display: true
     placeholder: 'Rechercher un jeu de données'
-  secondary_search: 
+  secondary_search:
     display: false
     name:
     link:
diff --git a/configs/meteo-france/config.yaml b/configs/meteo-france/config.yaml
index cea6eb18e..d65de020e 100644
--- a/configs/meteo-france/config.yaml
+++ b/configs/meteo-france/config.yaml
@@ -23,10 +23,10 @@ website:
   logo_operator: 'https://static.data.gouv.fr/avatars/81/6374003e904fad9ddac7436315fd15-100.png'
   homepage_title: 'La météo et le climat en Open Data'
   homepage_subtitle: 'meteo.data.gouv.fr centralise et structure les données publiques relatives à la météo et au climat.<br />Vous y trouverez des données brutes téléchargeables et utilisable de manière libre et gratuite.'
-  search_bar: 
+  search_bar:
     display: true
     placeholder: 'Rechercher un jeu de données'
-  secondary_search:     
+  secondary_search:
     display: true
     name: 'Recherche guidée'
     link: '/form'
@@ -74,7 +74,7 @@ website:
   # display settings
   pagination_sizes:
     organizations_list: 9
-    topics_list: 100  
+    topics_list: 100
   home_banner_colors:
     - '#F7EED4'
     - '#ECEEE6'
diff --git a/src/assets/main.css b/src/assets/main.css
index 47d6bf015..b5c38ff54 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -39,13 +39,26 @@
   align-items: center;
 }
 
-.theme_without_breadcrumb {
+.without_breadcrumb {
   margin: 128px 0 0;
 }
 
-.theme_with_breadcrumb {
+.with_breadcrumb {
   margin: 60px 0 0;
-  .home-selection-breadcrumb {
-    text-align: left;
+}
+
+.breadcrumb {
+  margin-top: 40px;
+  text-align: left;
+}
+
+.actionTile {
+  background: #000092;
+  .fr-tile__link {
+    color: white;
   }
 }
+
+.dsfr_alert {
+  margin: 20px 0;
+}
\ No newline at end of file
diff --git a/src/components/HomeThemes.vue b/src/components/HomeThemes.vue
index bc004108f..53dff27c6 100644
--- a/src/components/HomeThemes.vue
+++ b/src/components/HomeThemes.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="selectedTheme === null" className="theme_without_breadcrumb">
+  <div className="without_breadcrumb" v-if="selectedTheme === null">
     <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
       <li v-for="theme in themeList" class="fr-col-12 fr-col-lg-4">
         <Tile
@@ -11,20 +11,22 @@
       </li>
     </ul>
   </div>
-  <div v-else className="theme_with_breadcrumb">
-    <DsfrBreadcrumb class="home-selection-breadcrumb" :links="breadcrumbList" />
-    <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
-      <li
-        v-for="subtheme in selectedTheme.subthemes"
-        class="fr-col-12 fr-col-lg-4"
-      >
-        <Tile
-          :style="getCustomBoxShadow(selectedTheme.color)"
-          :link="goToTopicList(subtheme)"
-          :title="subtheme.name"
-        />
-      </li>
-    </ul>
+  <div v-else>
+    <DsfrBreadcrumb class="breadcrumb" :links="breadcrumbList" />
+    <div class="with_breadcrumb">
+      <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
+        <li
+          v-for="subtheme in selectedTheme.subthemes"
+          class="fr-col-12 fr-col-lg-4"
+        >
+          <Tile
+            :style="getCustomBoxShadow(selectedTheme.color)"
+            :link="goToTopicList(subtheme)"
+            :title="subtheme.name"
+          />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -64,7 +66,7 @@ export default {
       return `box-shadow: rgb(221, 221, 221) 0px 0px 0px 1px inset, #${color} 0px -4px 0px 0px inset`
     },
     goToTopicList(subtheme: Subtheme): string {
-      return 'link to topic list' // TO DO redirect to search result once the page is created
+      return `/bouquets/?theme=${this.selectedTheme.name}&subtheme=${subtheme.name}`
     },
     getThemeDescription(theme: Theme): string {
       const nbSubthemes = theme.subthemes.length
diff --git a/src/components/TopicList.vue b/src/components/TopicList.vue
new file mode 100644
index 000000000..c9abb3865
--- /dev/null
+++ b/src/components/TopicList.vue
@@ -0,0 +1,123 @@
+<template>
+  <div v-if="bouquets.length > 0">
+    <p>{{ numberOfResultMsg }}</p>
+    <div class="fr-grid-row fr-mb-1w">
+      <DsfrButton
+        class="fr-mb-1w"
+        label="Ajouter un bouquet"
+        icon="ri-add-circle-line"
+        @click="goToCreate"
+      />
+    </div>
+  </div>
+  <div
+    v-if="bouquets.length === 0"
+    class="fr-alert fr-alert--info"
+    data-fr-js-alert-actionee="true"
+  >
+    <h3 class="fr-alert__title">Il n'y a pas encore de bouquet sur ce thème</h3>
+    <p>
+      N'hésitez pas à contribuer en
+      <a href="/admin/bouquets/add" target="_blank">en créant un</a>
+    </p>
+  </div>
+  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+    <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
+      <li v-for="bouquet in bouquets" class="fr-col-12 fr-col-lg-6">
+        <Tile
+          :link="`/bouquets/${bouquet.slug}`"
+          :title="bouquet.name"
+          :description="bouquet.description"
+          :is-markdown="true"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { onMounted } from 'vue'
+import { useLoading } from 'vue-loading-overlay'
+
+import type { Topic } from '../model'
+import { NoOptionSelected } from '../model'
+import { useTopicStore } from '../store/TopicStore'
+import Tile from './Tile.vue'
+
+export default {
+  name: 'TopicList',
+  components: {
+    Tile: Tile
+  },
+  setup() {
+    onMounted(() => {
+      const loader = useLoading().show()
+      useTopicStore()
+        .loadTopicsForUniverse()
+        .finally(() => {
+          loader.hide()
+        })
+    })
+  },
+  props: {
+    themeName: {
+      type: String,
+      default: NoOptionSelected
+    },
+    subthemeName: {
+      type: String,
+      default: NoOptionSelected
+    }
+  },
+  computed: {
+    bouquets(): Topic[] {
+      const allTopics = useTopicStore().$state.data
+      if (this.themeName === NoOptionSelected) {
+        return allTopics
+      }
+      const relevantTopics: Topic[] = []
+      if (this.subthemeName !== NoOptionSelected) {
+        for (const topic of allTopics) {
+          if (
+            this.isRelevant(topic, 'subtheme', this.subthemeName) &&
+            this.isRelevant(topic, 'theme', this.themeName)
+          ) {
+            relevantTopics.push(topic)
+          }
+        }
+      } else if (this.themeName !== NoOptionSelected) {
+        for (const topic of allTopics) {
+          if (this.isRelevant(topic, 'theme', this.themeName)) {
+            relevantTopics.push(topic)
+          }
+        }
+      }
+      return relevantTopics
+    },
+    numberOfResultMsg(): string {
+      if (this.bouquets.length === 1) {
+        return '1 bouquet disponible'
+      } else {
+        return this.bouquets.length + ' bouquets disponibles'
+      }
+    }
+  },
+  methods: {
+    isRelevant(topic: Topic, property: string, value): Boolean {
+      const topicInformations: { subtheme: string; theme: string }[] =
+        topic.extras['ecospheres:informations']
+      if (topicInformations) {
+        for (const information of topicInformations) {
+          if (information[property] === value) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    goToCreate() {
+      this.$router.push({ name: 'bouquet_add' })
+    }
+  }
+}
+</script>
diff --git a/src/components/TopicSearch.vue b/src/components/TopicSearch.vue
new file mode 100644
index 000000000..9cb570280
--- /dev/null
+++ b/src/components/TopicSearch.vue
@@ -0,0 +1,124 @@
+<template>
+  <div className="filterForm">
+    <div class="fr-select-group">
+      <label class="fr-label" for="select_theme"> Thématiques </label>
+      <select class="fr-select" id="select_theme" @change="switchTheme($event)">
+        <option
+          :value="this.NoOptionSelected"
+          :selected="themeName == this.NoOptionSelected"
+        >
+          Choisir une thématique
+        </option>
+        <option
+          v-for="option in themeOptions"
+          :value="option.value"
+          :selected="option.value === themeName"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+    </div>
+
+    <div class="fr-select-group">
+      <label class="fr-label" for="select_subtheme"> Chantiers </label>
+      <select
+        class="fr-select"
+        id="select_subtheme"
+        @change="switchSubtheme($event)"
+      >
+        <option
+          :value="this.NoOptionSelected"
+          :selected="subthemeName == this.NoOptionSelected"
+        >
+          Choisir un chantier
+        </option>
+        <option
+          v-for="option in subthemeOptions"
+          v-bind:value="option.value"
+          :selected="option.value === subthemeName"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import type { SelectOption } from '@/model'
+
+import config from '../config'
+import { NoOptionSelected } from '../model'
+import Tile from './Tile.vue'
+
+export default defineComponent({
+  name: 'TopicSearch',
+  components: {
+    Tile: Tile
+  },
+  created() {
+    this.NoOptionSelected = NoOptionSelected
+  },
+  props: {
+    themeName: {
+      type: String,
+      default: NoOptionSelected
+    },
+    subthemeName: {
+      type: String,
+      default: NoOptionSelected
+    }
+  },
+  computed: {
+    selectedTheme() {
+      for (const theme of this.themeList) {
+        if (theme.name === this.themeName) {
+          return theme
+        }
+      }
+      return null
+    },
+    themeList() {
+      return config.themes
+    },
+    themeOptions(): SelectOption[] {
+      const options: SelectOption[] = []
+      for (const theme of this.themeList) {
+        options.push({
+          value: theme.name,
+          text: theme.name
+        })
+      }
+      return options
+    },
+    subthemeOptions(): SelectOption[] {
+      const options: SelectOption[] = []
+      if (this.selectedTheme) {
+        for (const subtheme of this.selectedTheme.subthemes) {
+          options.push({
+            value: subtheme.name,
+            text: subtheme.name
+          })
+        }
+      }
+      return options
+    }
+  },
+  methods: {
+    switchTheme(event) {
+      this.$router.push({
+        path: '/bouquets',
+        query: { theme: event.target.value, subtheme: NoOptionSelected }
+      })
+    },
+    switchSubtheme(event) {
+      this.$router.push({
+        path: '/bouquets',
+        query: { theme: this.themeName, subtheme: event.target.value }
+      })
+    }
+  }
+})
+</script>
diff --git a/src/model.ts b/src/model.ts
index 4a37fddf8..7bb02c667 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -8,4 +8,42 @@ interface Subtheme {
   name: string
 }
 
-export type { Theme, Subtheme }
+interface SelectOption {
+  value: string
+  text: string
+  disabled?: boolean
+}
+
+interface BreadcrumbItem {
+  text: string
+  to?: string
+}
+
+interface Topic {
+  created_at: string
+  datasets: Dataset[]
+  description: string
+  extras: {
+    'ecospheres:datasets_properties': {}
+    'ecospheres:informations': { subtheme: string; theme: string }[]
+  }
+  featured: boolean
+  id: string
+  name: string
+  organisation: any
+  owner: any
+  page: string
+  private: boolean
+  reuses: []
+  slug: string
+  tags: string[]
+  uri: string
+}
+
+interface Dataset {
+  // TODO --  add list of properties for Dataset
+}
+
+export const NoOptionSelected = 'no_option_selected'
+
+export type { Theme, Subtheme, SelectOption, BreadcrumbItem, Topic }
diff --git a/src/services/routerUtils.js b/src/services/routerUtils.js
index 41741b9cc..7433d6cc6 100644
--- a/src/services/routerUtils.js
+++ b/src/services/routerUtils.js
@@ -42,7 +42,11 @@ export default class RouterFetch {
         items.push({
           path: item.linkPage,
           name: item.id,
-          component: BouquetsListView
+          component: BouquetsListView,
+          props: (route) => ({
+            initThemeName: route.query.theme,
+            initSubthemeName: route.query.subtheme
+          })
         })
         items.push({
           path: `${item.linkPage}/:bid`,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4bbc2bf3f..78abc9449 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -83,7 +83,6 @@ const goToPage = (page) => {
   <div class="fr-container width-inherit">
     <HomeThemes
       v-if="config.themes"
-      class-name="home-tile-list"
       :selected-theme-name="$route.query.theme"
     />
     <HomeButtons v-if="buttons" :buttons="buttons" />
diff --git a/src/views/bouquets/BouquetsListView.vue b/src/views/bouquets/BouquetsListView.vue
index d74442d71..be301b309 100644
--- a/src/views/bouquets/BouquetsListView.vue
+++ b/src/views/bouquets/BouquetsListView.vue
@@ -1,45 +1,86 @@
-<script setup>
-import { computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-
-import Tile from '@/components/Tile.vue'
-import { useLoader } from '@/composables/loader'
-import { useTopicStore } from '@/store/TopicStore'
-
-const router = useRouter()
-
-const store = useTopicStore()
-const bouquets = computed(() => store.data)
-const loadTopics = useLoader(store.loadTopicsForUniverse)
-
-const goToCreate = () => {
-  router.push({ name: 'bouquet_add' })
-}
-
-onMounted(() => {
-  loadTopics()
-})
-</script>
-
 <template>
   <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
-    <div class="fr-grid-row fr-mb-1w">
-      <DsfrButton
-        class="fr-mb-1w"
-        label="Ajouter un bouquet"
-        icon="ri-add-circle-line"
-        @click="goToCreate"
-      />
+    <DsfrBreadcrumb class="breadcrumb" :links="breadcrumbList" />
+    <div :class="classDependingOnBreadcrumb">
+      <div className="fr-grid-row topicListView">
+        <nav
+          className="fr-sidemenu fr-col-4"
+          aria-labelledby="fr-sidemenu-title"
+        >
+          <div className="fr-sidemenu__inner">
+            <div className="fr-sidemenu__title" id="fr-sidemenu-title">
+              Filtres
+            </div>
+            <TopicSearch
+              v-model:themeName="themeName"
+              v-model:subthemeName="subthemeName"
+            />
+          </div>
+        </nav>
+        <div className="fr-col-8">
+          <TopicList :themeName="themeName" :subthemeName="subthemeName" />
+        </div>
+      </div>
     </div>
-    <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
-      <li v-for="bouquet in bouquets" class="fr-col-12 fr-col-lg-4">
-        <Tile
-          :link="`/bouquets/${bouquet.slug}`"
-          :title="bouquet.name"
-          :description="bouquet.description"
-          :is-markdown="true"
-        />
-      </li>
-    </ul>
   </div>
 </template>
+
+<script lang="ts">
+import TopicList from '../../components/TopicList.vue'
+import TopicSearch from '../../components/TopicSearch.vue'
+import type { BreadcrumbItem } from '../../model'
+import { NoOptionSelected } from '../../model'
+
+export default {
+  name: 'BouquetsListView',
+  components: {
+    TopicSearch: TopicSearch,
+    TopicList: TopicList
+  },
+  props: {
+    initThemeName: {
+      type: String,
+      default: NoOptionSelected
+    },
+    initSubthemeName: {
+      type: String,
+      default: NoOptionSelected
+    }
+  },
+  data() {
+    return {
+      themeName: this.initThemeName,
+      subthemeName: this.initSubthemeName
+    }
+  },
+  watch: {
+    '$route.query.subtheme'(newVal) {
+      this.subthemeName = newVal
+    },
+    '$route.query.theme'(newVal) {
+      this.themeName = newVal
+    }
+  },
+  computed: {
+    breadcrumbList() {
+      const links: BreadcrumbItem[] = []
+      if (this.themeName !== NoOptionSelected) {
+        links.push({ text: 'Accueil', to: '/' })
+        links.push({
+          text: this.themeName,
+          to: `/bouquets?theme=${this.themeName}`
+        })
+        if (this.subthemeName !== NoOptionSelected) {
+          links.push({ text: this.subthemeName })
+        }
+      }
+      return links
+    },
+    classDependingOnBreadcrumb() {
+      return this.breadcrumbList.length > 0
+        ? 'with_breadcrumb'
+        : 'without_breadcrumb'
+    }
+  }
+}
+</script>