diff --git a/apps/web/src/assets/scss/card.scss b/apps/web/src/assets/scss/card.scss
index ef011791e..8b4883836 100644
--- a/apps/web/src/assets/scss/card.scss
+++ b/apps/web/src/assets/scss/card.scss
@@ -148,4 +148,37 @@
       }
     }
   }
+
+  &.theme-card {
+    height: 100%; 
+
+    &:active,
+    &:hover {
+      box-shadow: 1px 2px 8px 2px rgb(0 0 0 / 10%);
+    }
+
+    .fr-card__body {
+      height: 75%;
+
+      .fr-card__title {
+        height: 80px;
+
+        @include media-query.respond-from(xs) {
+          height: auto;
+        }
+      } 
+    }
+
+    .fr-card__header {
+      height: 35%;
+
+      .fr-card__img {
+        height: 100%;
+
+        img {
+          height: 100%
+        } 
+      } 
+    }  
+  }
 }
diff --git a/apps/web/src/components.d.ts b/apps/web/src/components.d.ts
index 90278aaf7..bd7dfe6ce 100644
--- a/apps/web/src/components.d.ts
+++ b/apps/web/src/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
     DsfrCheckboxSet: typeof import('@gouvminint/vue-dsfr')['DsfrCheckboxSet']
     DsfrHighlight: typeof import('@gouvminint/vue-dsfr')['DsfrHighlight']
+    DsfrRadioButtonSet: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButtonSet']
     DsfrSelect: typeof import('@gouvminint/vue-dsfr')['DsfrSelect']
     DsfrSideMenu: typeof import('@gouvminint/vue-dsfr')['DsfrSideMenu']
     DsfrTabContent: typeof import('@gouvminint/vue-dsfr')['DsfrTabContent']
@@ -43,6 +44,7 @@ declare module 'vue' {
     ProgramObjective: typeof import('./components/program/detail/ProgramObjective.vue')['default']
     ProgramProjects: typeof import('./components/program/detail/ProgramProjects.vue')['default']
     ProgramTile: typeof import('./components/program/detail/ProgramTile.vue')['default']
+    ProjectButton: typeof import('./components/project/ProjectButton.vue')['default']
     ProjectCard: typeof import('./components/project/list/ProjectCard.vue')['default']
     ProjectDescription: typeof import('./components/project/details/ProjectDescription.vue')['default']
     ProjectDetail: typeof import('./components/project/details/ProjectDetail.vue')['default']
@@ -94,11 +96,11 @@ declare module 'vue' {
     TeeQuestionnaireResult: typeof import('./components/questionnaire/TeeQuestionnaireResult.vue')['default']
     TeeSpinner: typeof import('./components/element/TeeSpinner.vue')['default']
     TeeTabs: typeof import('./components/element/TeeTabs.vue')['default']
-    ThemeCard: typeof import('./components/theme/ThemeCard.vue')['default']
+    ThemeCard: typeof import('./components/theme/select/ThemeCard.vue')['default']
     ThemeFilter: typeof import('./components/theme/ThemeFilter.vue')['default']
     ThemeFiltersAndCard: typeof import('./components/questionnaire/result/list/ThemeFiltersAndCard.vue')['default']
     ThemeHeaderCard: typeof import('./components/theme/ThemeHeaderCard.vue')['default']
-    ThemeSelect: typeof import('./components/theme/ThemeSelect.vue')['default']
+    ThemeSelect: typeof import('./components/theme/select/ThemeSelect.vue')['default']
     TrackButton: typeof import('./components/track/form/TrackButton.vue')['default']
     TrackButtonInput: typeof import('./components/track/form/TrackButtonInput.vue')['default']
     TrackCallout: typeof import('./components/track/detail/TrackCallout.vue')['default']
diff --git a/apps/web/src/components/project/ProjectButton.vue b/apps/web/src/components/project/ProjectButton.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/web/src/components/theme/ThemeCard.vue b/apps/web/src/components/theme/select/ThemeCard.vue
similarity index 57%
rename from apps/web/src/components/theme/ThemeCard.vue
rename to apps/web/src/components/theme/select/ThemeCard.vue
index 04d139c4d..eb1ae5bde 100644
--- a/apps/web/src/components/theme/ThemeCard.vue
+++ b/apps/web/src/components/theme/select/ThemeCard.vue
@@ -1,11 +1,12 @@
 <template>
   <div
+    tabindex="0"
     class="fr-card fr-mx-md-0 fr-mx-2v theme-card"
     :class="`fr-bg-xs--${option.color}--light`"
   >
     <div class="fr-card__body fr-py-1v">
       <div class="fr-card__content fr-p-2v">
-        <div class="fr-card__title theme-card-title">
+        <div class="fr-card__title">
           <div
             class="fr-p-0 fr-hidden fr-unhidden-sm fr-my-2v theme-divider"
             :class="`fr-bg--${option.color}`"
@@ -17,22 +18,20 @@
             {{ option.title }}
           </div>
         </div>
-        <div class="fr-card__desc">
-          <ul class="fr-tags-group">
-            <TeeProjectButton
-              v-for="project in option.highlightProjects"
-              :key="project.id"
-              class="highlighted-project fr-mx-1v fr-my-1v inline-flex"
-              :color="option.color"
-              size="sm"
-              :project="project"
-            />
-            <span
-              v-if="option.moreThanThree"
-              class="fr-m-auto fr-ml-0"
-              >...</span
-            >
-          </ul>
+        <div class="fr-card__desc fr-m-1v">
+          <TeeProjectButton
+            v-for="project in option.highlightProjects"
+            :key="project.id"
+            class="highlighted-project fr-mx-1v fr-my-1v inline-flex"
+            :color="option.color"
+            size="sm"
+            :project="project"
+          />
+          <span
+            v-if="option.moreThanThree"
+            class="fr-m-auto fr-ml-0"
+            >...</span
+          >
         </div>
       </div>
     </div>
@@ -40,10 +39,9 @@
       class="fr-hidden fr-unhidden-sm fr-card__header"
       :class="`fr-bg--${option.color}--light`"
     >
-      <div class="fr-card__img fr-card__img--contain">
+      <div class="fr-card__img fr-card__img--contain fr-m-auto">
         <img
           class="fr-responsive-img"
-          height="200px"
           :src="option.imgSrc"
           :alt="option.altImg"
         />
@@ -66,22 +64,6 @@ defineProps<Props>()
   width: 15%;
 }
 
-.theme-card {
-  height: 100%;
-}
-
-.theme-card:hover {
-  box-shadow: 1px 2px 8px 2px rgb(0 0 0 / 10%);
-}
-
-.theme-card-title {
-  height: 80px;
-
-  @media (width >= 0) and (width <= 575px) {
-    height: auto;
-  }
-}
-
 .highlighted-project {
   max-width: 90%;
 }
diff --git a/apps/web/src/components/theme/ThemeSelect.vue b/apps/web/src/components/theme/select/ThemeSelect.vue
similarity index 98%
rename from apps/web/src/components/theme/ThemeSelect.vue
rename to apps/web/src/components/theme/select/ThemeSelect.vue
index e50705b27..34b617810 100644
--- a/apps/web/src/components/theme/ThemeSelect.vue
+++ b/apps/web/src/components/theme/select/ThemeSelect.vue
@@ -5,6 +5,7 @@
       :key="opt.value"
       class="fr-col-4 fr-col-sm-6 fr-col-md-4 fr-col-xs-12 fr-p-1v"
       @click="selectOption(opt.value)"
+      @keydown.enter="selectOption(opt.value)"
     >
       <ThemeCard :option="opt" />
     </div>