diff --git a/VApp/src/components/SessionSelector.vue b/VApp/src/components/SessionSelector.vue
new file mode 100644
index 00000000..fcdcf87a
--- /dev/null
+++ b/VApp/src/components/SessionSelector.vue
@@ -0,0 +1,56 @@
+<template>
+    <v-row class="ml-15 mr-15 mt-5 mb-10 align-center">
+      <v-col cols="12" md="4" class="d-flex align-center gap-2">
+         <v-select
+            v-model="internalValue"
+            :items="sessions"
+            item-title="title"
+            item-value="id"
+            label="Choisir une session"
+            variant="outlined"
+            hide-details
+            rounded="xl"
+            class="flex-grow-1"
+         ></v-select>
+         <v-btn icon="mdi-plus" color="green" variant="tonal" @click="$emit('create')" title="Nouvelle Session"></v-btn>
+         <v-btn icon="mdi-delete" color="red" variant="tonal" @click="$emit('delete')" :disabled="!internalValue" title="Supprimer Session"></v-btn>
+      </v-col>
+      <v-col class="text-right">
+        <v-btn rounded="xl" color="primary" @click="$emit('save')" :loading="saving" :disabled="!internalValue">
+          <v-icon start>mdi-content-save</v-icon> Sauvegarder
+        </v-btn>
+      </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null
+    },
+    sessions: {
+        type: Array,
+        default: () => []
+    },
+    saving: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'create', 'delete', 'save']);
+
+const internalValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+});
+</script>
+
+<style scoped>
+    .gap-2 {
+        gap: 8px;
+    }
+</style>