diff --git a/aep-schedule-website/src/frontend/components/options/courses_selector.rs b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
index f89f9567c1c932eb04851d4f7a71cdb3b3ae3e13..caa9c5831cce03b02bae4e02bd378b0c7a29df0f 100644
--- a/aep-schedule-website/src/frontend/components/options/courses_selector.rs
+++ b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
@@ -103,7 +103,7 @@ where
                         ReactiveCourseType::TheoOnly { theo_open, theo_groups } => {
                             let groups = theo_groups;
                             view!{
-                                <div class="flex gap-2 flex-col pb-2">
+                                <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
                                     <h3>"Théorie"</h3>
                                     <GroupsSettings groups open=theo_open course_sigle group_type=GroupType::TheoGroup submit/>
                                 </div>
@@ -112,7 +112,7 @@ where
                         ReactiveCourseType::LabOnly { lab_open, lab_groups } => {
                             let groups = lab_groups;
                             view!{
-                                <div class="flex gap-2 flex-col pb-2">
+                                <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
                                     <h3>"Laboratoire"</h3>
                                     <GroupsSettings groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
                                 </div>
@@ -122,12 +122,12 @@ where
                             let theo_groups = theo_groups;
                             let lab_groups = lab_groups;
                             view!{
-                                <div class="flex gap-2 flex-col pb-2">
+                                <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
                                     <h3>"Théorie"</h3>
                                     <GroupsSettings groups=theo_groups open=theo_open course_sigle=course_sigle.clone() group_type=GroupType::TheoGroup submit/>
                                 </div>
                                 <div class="vertical-bar"></div>
-                                <div class="flex gap-2 flex-col pb-2">
+                                <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
                                     <h3>"Laboratoire"</h3>
                                     <GroupsSettings groups=lab_groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
                                 </div>
@@ -136,7 +136,7 @@ where
                         ReactiveCourseType::Linked { both_open, theo_groups, lab_groups } => {
                             let groups = theo_groups.merge(lab_groups);
                             view!{
-                                <div class="flex gap-2 flex-col pb-2">
+                                <div class="flex gap-2 flex-col pb-2 max-h-[26rem] overflow-y-auto">
                                     <h3>"Théorie et laboratoire lié"</h3>
                                     <GroupsSettings groups open=both_open course_sigle=course_sigle group_type=GroupType::LabGroup submit/>
                                 </div>
diff --git a/aep-schedule-website/src/frontend/components/options/optimizations.rs b/aep-schedule-website/src/frontend/components/options/optimizations.rs
index ffffefa8fec163acbfe74fda7b1a85750ba91517..7bb0d8f7d35e83538f318cfecbfeee1ef8e4a692 100644
--- a/aep-schedule-website/src/frontend/components/options/optimizations.rs
+++ b/aep-schedule-website/src/frontend/components/options/optimizations.rs
@@ -30,7 +30,7 @@ where
             <div class="flex flex-col items-center">
                 <House weight=weight_house size="10vh"/>
                 <p class="font-sans font-medium tracking-tight">"Plus de congés"</p>
-                <input type="range" min="0" max="4" class="w-24 accent-amber-500" prop:value=state.day_off  on:input=move |ev| {
+                <input type="range" min="0" max="4" class="lg:w-24 w-16 accent-amber-500" prop:value=state.day_off  on:input=move |ev| {
                     state.day_off.set(event_target_value(&ev).parse::<u8>().unwrap());
                     submit();
                 }/>
@@ -41,7 +41,7 @@ where
                     <Sun weight=weight_morning size="10vh"/>
                 </div>
                 <p class="font-sans font-medium tracking-tight">"Cours plus tôt ou plus tard"</p>
-                <input type="range" min="-4" max="4" class="w-48 accent-amber-500" prop:value=state.morning  on:input=move |ev| {
+                <input type="range" min="-4" max="4" class="lg:w-48 w-32 accent-amber-500" prop:value=state.morning  on:input=move |ev| {
                     state.morning.set(event_target_value(&ev).parse::<i8>().unwrap());
                     submit();
                 }/>
@@ -49,7 +49,7 @@ where
             <div class="flex flex-col items-center">
                 <CalendarCheck weight=weight_finish size="10vh"/>
                 <p class="font-sans font-medium tracking-tight">"Finir plus tôt"</p>
-                <input type="range" min="0" max="4" class="w-24 accent-amber-500" prop:value=state.finish_early  on:input=move |ev| {
+                <input type="range" min="0" max="4" class="lg:w-24 w-16 accent-amber-500" prop:value=state.finish_early  on:input=move |ev| {
                     state.finish_early.set(event_target_value(&ev).parse::<u8>().unwrap());
                     submit();
                 }/>