diff --git a/app/src/pages/desktop/wallpaper/widgets.rs b/app/src/pages/desktop/wallpaper/widgets.rs
index 19c667e..a867a1a 100644
--- a/app/src/pages/desktop/wallpaper/widgets.rs
+++ b/app/src/pages/desktop/wallpaper/widgets.rs
@@ -3,7 +3,7 @@
 
 use super::Message;
 use apply::Apply;
-use cosmic::iced_core::{self, gradient::Linear, Background, BorderRadius, Color, Degrees, Length};
+use cosmic::iced_core::{self, gradient::Linear, Background, BorderRadius, Color, Degrees};
 use cosmic::iced_runtime::core::image::Handle as ImageHandle;
 use cosmic::{
     iced,
@@ -13,11 +13,16 @@ use cosmic::{
 use cosmic_settings_desktop::wallpaper;
 use slotmap::DefaultKey;
 
+const COLOR_WIDTH: u16 = 70;
+const WALLPAPER_WIDTH: f32 = 158.0;
+
+const COLUMN_SPACING: u16 = 12;
+const ROW_SPACING: u16 = 16;
+
 /// A button for selecting a color or gradient.
 pub fn color_button(color: wallpaper::Color) -> Element<'static, Message> {
-    iced::widget::button(color_image(color.clone(), 70, 70, 8.0))
-        .width(Length::Fixed(71.0))
-        .height(Length::Fixed(71.0))
+    iced::widget::button(color_image(color.clone(), COLOR_WIDTH, COLOR_WIDTH, 8.0))
+        .padding(0)
         .style(cosmic::theme::Button::Transparent)
         .on_press(Message::ColorSelect(color))
         .into()
@@ -58,55 +63,83 @@ pub fn color_image(
                 border_color: Color::TRANSPARENT,
             }
         }))
+        .padding(0)
         .into()
 }
 
 /// Color selection list
 pub fn color_select_options() -> Element<'static, Message> {
-    let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / 8);
-    let mut colors = wallpaper::DEFAULT_COLORS.iter();
+    cosmic::iced::widget::responsive(|size| {
+        let items_per_row = ((size.width / (COLOR_WIDTH + ROW_SPACING) as f32).floor() as usize)
+            .max(1)
+            .min(8);
 
-    while let Some(color) = colors.next() {
-        let mut color_row = Vec::with_capacity(8);
+        let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / items_per_row);
+        let mut colors = wallpaper::DEFAULT_COLORS.iter();
 
-        color_row.push(color_button(color.clone()));
+        while let Some(color) = colors.next() {
+            let mut color_row = Vec::with_capacity(items_per_row);
 
-        for color in colors.by_ref().take(7) {
             color_row.push(color_button(color.clone()));
+
+            for color in colors.by_ref().take(items_per_row - 1) {
+                color_row.push(color_button(color.clone()));
+            }
+
+            color_column.push(row(color_row).spacing(ROW_SPACING).into());
         }
 
-        color_column.push(row(color_row).spacing(16).into());
-    }
-
-    column(color_column).spacing(12).padding(0).into()
+        column(color_column)
+            .spacing(COLUMN_SPACING)
+            .padding(0)
+            .apply(cosmic::iced::widget::container)
+            .align_x(iced_core::alignment::Horizontal::Center)
+            .width(size.width)
+            .into()
+    })
+    .into()
 }
 
 /// Background selection list
 pub fn wallpaper_select_options(page: &super::Page) -> Element<Message> {
-    let mut image_column = Vec::with_capacity(page.selection.selection_handles.len() / 4);
-    let mut image_handles = page.selection.selection_handles.iter();
+    cosmic::iced::widget::responsive(|size| {
+        let items_per_row = ((size.width / (WALLPAPER_WIDTH + ROW_SPACING as f32)).floor()
+            as usize)
+            .max(1)
+            .min(4);
 
-    while let Some((id, handle)) = image_handles.next() {
-        let mut image_row = Vec::with_capacity(4);
+        let mut image_column =
+            Vec::with_capacity(page.selection.selection_handles.len() / items_per_row);
+        let mut image_handles = page.selection.selection_handles.iter();
 
-        image_row.push(wallpaper_button(handle, id));
+        while let Some((id, handle)) = image_handles.next() {
+            let mut image_row = Vec::with_capacity(items_per_row);
 
-        for (id, handle) in image_handles.by_ref().take(3) {
             image_row.push(wallpaper_button(handle, id));
+
+            for (id, handle) in image_handles.by_ref().take(items_per_row - 1) {
+                image_row.push(wallpaper_button(handle, id));
+            }
+
+            image_column.push(row(image_row).spacing(ROW_SPACING).into());
         }
 
-        image_column.push(row(image_row).spacing(16).into());
-    }
-
-    column(image_column).spacing(12).padding(0).into()
+        column(image_column)
+            .spacing(COLUMN_SPACING)
+            .padding(0)
+            .apply(cosmic::iced::widget::container)
+            .align_x(iced_core::alignment::Horizontal::Center)
+            .width(size.width)
+            .into()
+    })
+    .into()
 }
 
 fn wallpaper_button(handle: &ImageHandle, id: DefaultKey) -> Element<Message> {
     let image = iced::widget::image(handle.clone()).apply(iced::Element::from);
 
     iced::widget::button(image)
-        .width(Length::Fixed(158.0))
-        .height(Length::Fixed(105.0))
+        .padding(0)
         .style(cosmic::theme::Button::Transparent)
         .on_press(Message::Select(id))
         .into()