diff --git a/src/app/mod.rs b/src/app/mod.rs
index 05d56e6..8388a92 100644
--- a/src/app/mod.rs
+++ b/src/app/mod.rs
@@ -333,23 +333,35 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
     ].width(iced::Length::Fill).padding(10);
 
     if state.current_screen == Screen::Settings {
-        let content = column![
-            text("Settings").size(32).color(color_text),
-            vertical_space(20.0),
-            text("Future settings and controls will be added here.").size(16).color(color_subtext),
-            vertical_space(40.0),
-            button(
-                text("Back")
-                    .size(16)
-                    .align_x(iced::alignment::Horizontal::Center)
-            )
-            .on_press(AppMessage::NavigateBack)
-            .style(b_style(color_surface, color_blue, color_text, 8.0))
-            .padding(14)
-            .width(iced::Length::Fixed(150.0))
-        ]
-        .align_x(iced::alignment::Horizontal::Center)
-        .spacing(10);
+        let settings_box = container(
+            column![
+                text("Settings").size(24).color(color_blue),
+                vertical_space(20.0),
+                text("Device Settings (Optional Node Target IDs)").size(14).color(color_subtext),
+                row![
+                    text_input("Input Target", &state.input_device).on_input(AppMessage::InputDeviceChanged).style(t_style.clone()).padding(8),
+                    horizontal_space(),
+                    text_input("Output Target", &state.output_device).on_input(AppMessage::OutputDeviceChanged).style(t_style.clone()).padding(8),
+                ].spacing(10),
+                vertical_space(30.0),
+                button(
+                    text("Back")
+                        .size(16)
+                        .align_x(iced::alignment::Horizontal::Center)
+                )
+                .on_press(AppMessage::NavigateBack)
+                .style(b_style(color_surface, color_blue, color_text, 8.0))
+                .padding(14)
+                .width(iced::Length::Fixed(150.0))
+            ]
+            .align_x(iced::alignment::Horizontal::Center)
+            .spacing(10)
+        )
+        .style(c_style(color_mantle, color_surface, 12.0))
+        .padding(30)
+        .width(420);
+
+        let content = column![settings_box].align_x(iced::alignment::Horizontal::Center);
 
         return container(content)
             .width(iced::Length::Fill)
@@ -424,14 +436,7 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
                 text("— OR —").size(12).color(color_surface).align_x(iced::alignment::Horizontal::Center),
                 vertical_space(16.0),
                 join_group,
-                vertical_space(16.0),
-                text("Device Settings (Optional Node Target IDs)").size(14).color(color_subtext),
-                row![
-                    text_input("Input Target", &state.input_device).on_input(AppMessage::InputDeviceChanged).style(t_style.clone()).padding(8),
-                    horizontal_space(),
-                    text_input("Output Target", &state.output_device).on_input(AppMessage::OutputDeviceChanged).style(t_style.clone()).padding(8),
-                ].spacing(10),
-                vertical_space(20.0),
+                vertical_space(10.0),
                 status
             ]
             .spacing(10)