diff --git a/bun.lockb b/bun.lockb
index 586211d..d0ca915 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/RadioInput.vue b/components/RadioInput.vue
new file mode 100644
index 0000000..e6e9429
--- /dev/null
+++ b/components/RadioInput.vue
@@ -0,0 +1,30 @@
+<template>
+    <RadioGroupRoot :disabled="disabled" v-model="model" class="flex flex-col gap-2 p-2">
+        <Label v-for="option in options" class="flex items-center gap-2">
+            <RadioGroupItem :disabled="(option as RadioOption).disabled ?? false"
+                :value="(option as RadioOption).value ?? option"
+                class="border border-light-60 dark:border-dark-35 bg-light-20 dark:bg-dark-25 w-5 h-5 outline-none cursor-default hover:border-light-70 dark:hover:border-dark-40 
+                focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
+                <RadioGroupIndicator>
+                    <Icon icon="radix-icons:check" class="relative w-5 h-5 -top-px -left-px" />
+                </RadioGroupIndicator>
+            </RadioGroupItem>
+            {{ (option as RadioOption).label ?? option }}
+        </Label>
+    </RadioGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+export interface RadioOption { 
+    label: string
+    value: string
+    disabled?: boolean
+}
+
+const { disabled = false, options } = defineProps<{
+    disabled?: boolean
+    options: string[] | RadioOption[]
+}>();
+const model = defineModel<string>();
+</script>
\ No newline at end of file
diff --git a/components/Select.vue b/components/Select.vue
new file mode 100644
index 0000000..457f895
--- /dev/null
+++ b/components/Select.vue
@@ -0,0 +1,39 @@
+<template>
+    <Label>{{ label }}
+        <SelectRoot :v-model="model">
+            <SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
+                bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
+                data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+                hover:border-light-50 dark:hover:border-dark-50">
+                <SelectValue :placeholder="placeholder" />
+                <Icon icon="radix-icons:caret-down" class="h-4 w-4" />
+            </SelectTrigger>
+
+            <SelectPortal :disabled="disabled">
+                <SelectContent :position="position"
+                    class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-40">
+                    <SelectScrollUpButton>
+                        <Icon icon="radix-icons:chevron-up" />
+                    </SelectScrollUpButton>
+                    <SelectViewport class="p-1">
+                        <slot></slot>
+                    </SelectViewport>
+                    <SelectScrollDownButton>
+                        <Icon icon="radix-icons:chevron-down" />
+                    </SelectScrollDownButton>
+                </SelectContent>
+            </SelectPortal>
+        </SelectRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
+	placeholder?: string
+    disabled?: boolean
+    position?: 'item-aligned' | 'popper'
+    label?: string
+}>();
+const model = defineModel();
+</script>
\ No newline at end of file
diff --git a/components/SelectGroup.vue b/components/SelectGroup.vue
new file mode 100644
index 0000000..2f7d77a
--- /dev/null
+++ b/components/SelectGroup.vue
@@ -0,0 +1,14 @@
+<template>
+    <SelectGroup :disabled="disabled" class="">
+        <SelectLabel class="">{{ label }}</SelectLabel>
+        <slot></slot>
+    </SelectGroup>
+</template>
+
+<script setup lang="ts">
+import { SelectGroup } from 'radix-vue';
+const { label, disabled = false } = defineProps<{
+	label: string
+    disabled?: boolean
+}>();
+</script>
\ No newline at end of file
diff --git a/components/SelectItem.vue b/components/SelectItem.vue
new file mode 100644
index 0000000..a2d3c37
--- /dev/null
+++ b/components/SelectItem.vue
@@ -0,0 +1,18 @@
+<template>
+    <SelectItem :value="value" :disabled="disabled" class="">
+        <SelectItemText class="">{{ label }}</SelectItemText>
+        <SelectItemIndicator class="">
+            <Icon icon="radix-icons:check" />
+        </SelectItemIndicator>
+    </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { SelectItem } from 'radix-vue';
+const { disabled = false, value } = defineProps<{
+    disabled?: boolean
+    value: NonNullable<any>
+    label: string
+}>();
+</script>
\ No newline at end of file
diff --git a/components/SelectSeparator.vue b/components/SelectSeparator.vue
new file mode 100644
index 0000000..7a5230a
--- /dev/null
+++ b/components/SelectSeparator.vue
@@ -0,0 +1,7 @@
+<template>
+    <SelectSeparator class="" />
+</template>
+
+<script setup lang="ts">
+import { SelectSeparator } from 'radix-vue';
+</script>
\ No newline at end of file
diff --git a/components/SliderInput.vue b/components/SliderInput.vue
index 70394ea..eb89645 100644
--- a/components/SliderInput.vue
+++ b/components/SliderInput.vue
@@ -1,20 +1,25 @@
 <template>
     <Label class="flex justify-center items-center my-2">{{ label }}
-        <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model ? [model] : undefined" :v-model="[model]" @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
-            <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
-                <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
+        <SliderRoot class="mx-4 relative flex items-center select-none touch-none w-[160px] h-5"
+            :default-value="model ? [model] : undefined" :v-model="[model]" :disabled="disabled"
+            @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
+            <SliderTrack class="bg-light-30 dark:bg-dark-30 relative h-1 w-full data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10">
+                <SliderRange class="absolute bg-light-40 dark:bg-dark-40 h-full data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30" />
             </SliderTrack>
-            <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+            <SliderThumb
+                class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60 border border-light-50 dark:border-dark-50 
+                hover:border-light-60 dark:hover:border-dark-60 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20" />
         </SliderRoot>
     </Label>
 </template>
 
 <script setup lang="ts">
-const { min = 0, max = 100, step = 1, label } = defineProps<{
+const { min = 0, max = 100, step = 1, label, disabled = false } = defineProps<{
     min?: number
     max?: number
     step?: number
     label?: string
+    disabled?: boolean
 }>();
 const model = defineModel<number>()
 </script>
\ No newline at end of file
diff --git a/components/SliderRangeInput.vue b/components/SliderRangeInput.vue
deleted file mode 100644
index 4ed3ba7..0000000
--- a/components/SliderRangeInput.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <Label class="flex justify-center items-center my-2">{{ label }}
-      <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model" :v-model="model":min="min" :max="max" :step="step">
-          <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
-              <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
-          </SliderTrack>
-          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
-          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
-      </SliderRoot>
-  </Label>
-</template>
-
-<script setup lang="ts">
-const { min = 0, max = 100, step = 1, label } = defineProps<{
-  min?: number
-  max?: number
-  step?: number
-  label?: string
-}>();
-const model = defineModel<number[]>()
-</script>
\ No newline at end of file
diff --git a/components/Switch.vue b/components/Switch.vue
index c80b991..246cd02 100644
--- a/components/Switch.vue
+++ b/components/Switch.vue
@@ -1,11 +1,16 @@
 <template>
     <div>
         <Label class="flex justify-center items-center my-2">{{ label }}
-            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
-                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
+            <SwitchRoot v-model:checked="model" :disabled="disabled"
+                class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+            data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+            data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
+                <SwitchThumb
+                    class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
+                    data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
             </SwitchRoot>
         </Label>
-  </div>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/TextInput.vue b/components/TextInput.vue
index 1bbe4c1..9f2874d 100644
--- a/components/TextInput.vue
+++ b/components/TextInput.vue
@@ -1,6 +1,10 @@
 <template>
     <Label class="px-4">{{ label }}
-        <input :placeholder="placeholder" :disabled="disabled" class="ms-3 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :type="type" v-model="model">
+        <input :placeholder="placeholder" :disabled="disabled"
+            class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
+        bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+        border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
+            :type="type" v-model="model" :data-disabled="disabled || undefined">
     </Label>
 </template>
 
diff --git a/components/todo/RadioInput.vue b/components/todo/RadioInput.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/todo/SelectInput.vue b/components/todo/SelectInput.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 34c8dfc..415ea2b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,7 +6,7 @@ export default defineNuxtConfig({
     'nuxt-security',
     '@nuxtjs/tailwindcss',
     '@vueuse/nuxt',
-    'radix-vue/nuxt',
+    'radix-vue/nuxt'
   ],
   tailwindcss: {
     viewer: false,
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
       theme: {
         extend: {
           boxShadow: {
-            raw: '0 0 0 3px var(--tw-shadow-color)'
+            raw: '0 0 0 2px var(--tw-shadow-color)'
           },
         },
         colors: {
diff --git a/package.json b/package.json
index 57d832d..002d981 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@iconify/vue": "^4.1.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
     "@vueuse/nuxt": "^11.1.0",
diff --git a/pages/index.vue b/pages/index.vue
index 3300bd5..eb7b9d9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,17 +3,22 @@ const open = ref(false), username = ref(""), price = ref(750);
 </script>
 
 <template>
+
     <Head>
         <Title>Accueil</Title>
     </Head>
     <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
         <div class="w-1/2 flex flex-1 flex-col justify-center items-center">
             <Switch label="Test" />
-            <SliderInput class="flex-col"  :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25" v-model="price" />
+            <SliderInput :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
+                v-model="price" />
             <TextInput label="Saisir un pseudonyme" v-model="username" />
             <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
-            <Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open" class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button></Tooltip>
-            <Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté" :duration="5000" />
+            <Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
+                    class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button>
+            </Tooltip>
+            <Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté"
+                :duration="5000" />
         </div>
     </div>
 </template>
\ No newline at end of file