diff --git a/crates/hearthspace-settings/src/ui.rs b/crates/hearthspace-settings/src/ui.rs
index d61fd4c..a029dc9 100644
--- a/crates/hearthspace-settings/src/ui.rs
+++ b/crates/hearthspace-settings/src/ui.rs
@@ -73,7 +73,7 @@ pub(crate) fn app_logic(state: &mut SettingsApp) -> impl WidgetView<SettingsApp>
 fn sidebar_view(state: &SettingsApp) -> impl WidgetView<SettingsApp> + use<> {
     let selected_category = state.selected_category;
 
-    components::sidebar_panel(
+    components::sidebar_panel(components::scroll_area(
         flex_col((
             components::page_title("Settings"),
             components::muted_text("Hearthspace"),
@@ -101,13 +101,13 @@ fn sidebar_view(state: &SettingsApp) -> impl WidgetView<SettingsApp> + use<> {
         ))
         .cross_axis_alignment(CrossAxisAlignment::Stretch)
         .gap(8.0.px()),
-    )
+    ))
 }
 
 fn category_view(state: &SettingsApp) -> impl WidgetView<SettingsApp> + use<> {
     let category = state.selected_category;
 
-    sized_box(
+    components::scroll_area(sized_box(
         flex_col((
             components::page_title(category.label()),
             components::muted_text(category.description()),
@@ -116,7 +116,7 @@ fn category_view(state: &SettingsApp) -> impl WidgetView<SettingsApp> + use<> {
         ))
         .cross_axis_alignment(CrossAxisAlignment::Stretch)
         .gap(16.0.px()),
-    )
+    ))
 }
 
 fn selected_category_view(state: &SettingsApp) -> Box<AnyWidgetView<SettingsApp>> {
diff --git a/crates/ui-components/src/lib.rs b/crates/ui-components/src/lib.rs
index 330f4a2..91bc8f6 100644
--- a/crates/ui-components/src/lib.rs
+++ b/crates/ui-components/src/lib.rs
@@ -12,7 +12,7 @@ use xilem::{
         widgets::{Button, Checkbox, Label, RadioButton, TextArea, TextInput},
     },
     style::Style,
-    view::{CrossAxisAlignment, button, flex_col, label, sized_box},
+    view::{CrossAxisAlignment, button, flex_col, label, portal, sized_box},
 };
 
 pub const APP_BACKGROUND: Color = Color::from_rgb8(0xf6, 0xf7, 0xf9);
@@ -160,6 +160,12 @@ pub fn sidebar_panel<State: 'static, V: WidgetView<State>>(
         .padding(10.0.px())
 }
 
+pub fn scroll_area<State: 'static, V: WidgetView<State>>(
+    content: V,
+) -> impl WidgetView<State> + use<State, V> {
+    portal(content).constrain_horizontal(true).must_fill(true)
+}
+
 pub fn settings_section<State: 'static, V: WidgetView<State>, T: Into<ArcStr>>(
     title: T,
     content: V,