diff --git a/Cargo.lock b/Cargo.lock
index 74c05fe7..7d7cff0e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2988,6 +2988,14 @@ version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ef927ca75afb808a4d64dd374f00a2adf8d0fcff8e7b184af886c3c87ec4a3f3"
 
+[[package]]
+name = "time_picker"
+version = "0.1.0"
+dependencies = [
+ "iced",
+ "iced_aw",
+]
+
 [[package]]
 name = "tiny-skia"
 version = "0.11.4"
diff --git a/Cargo.toml b/Cargo.toml
index 5d21a031..47cd17d7 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -45,7 +45,7 @@ default = [
     "grid",
     #"tab_bar",
     #"tabs",
-    #"time_picker",
+    "time_picker",
     "slide_bar",
     "wrap",
     "selection_list",
@@ -85,7 +85,7 @@ members = [
     "examples/grid",
     #"examples/tab_bar",
     #"examples/tabs",
-    #"examples/time_picker",
+    "examples/time_picker",
     "examples/sliderbar",
     "examples/wrap",
     "examples/selection_list",
diff --git a/examples/time_picker/src/main.rs b/examples/time_picker/src/main.rs
index 27e0e008..493f57fd 100644
--- a/examples/time_picker/src/main.rs
+++ b/examples/time_picker/src/main.rs
@@ -1,12 +1,17 @@
 use iced::{
-    alignment, font,
-    widget::{container, text, Button, Container, Row, Text},
-    Alignment, Application, Command, Element, Length, Settings, Theme,
+    widget::{Button, Container, Row, Text},
+    Alignment, Element, Length,
 };
 use iced_aw::{time_picker::Time, TimePicker};
 
 fn main() -> iced::Result {
-    TimePickerExample::run(Settings::default())
+    iced::program(
+        "TimePicker example",
+        TimePickerExample::update,
+        TimePickerExample::view,
+    )
+    .font(iced_aw::BOOTSTRAP_FONT_BYTES)
+    .run()
 }
 
 #[derive(Clone, Debug)]
@@ -15,113 +20,53 @@ enum Message {
     ChooseTime,
     SubmitTime(Time),
     CancelTime,
-    #[allow(dead_code)]
-    Loaded(Result<(), String>),
-    FontLoaded(Result<(), font::Error>),
 }
 
-#[derive(Debug)]
-enum TimePickerExample {
-    Loading,
-    Loaded(State),
-}
-
-#[derive(Debug)]
-struct State {
+#[derive(Debug, Default)]
+struct TimePickerExample {
     time: Time,
     show_picker: bool,
 }
 
-async fn load() -> Result<(), String> {
-    Ok(())
-}
-
-impl Application for TimePickerExample {
-    type Message = Message;
-    type Theme = Theme;
-    type Executor = iced::executor::Default;
-    type Flags = ();
-
-    fn new(_flags: ()) -> (TimePickerExample, Command<Message>) {
-        (
-            TimePickerExample::Loading,
-            Command::batch(vec![
-                font::load(iced_aw::BOOTSTRAP_FONT_BYTES).map(Message::FontLoaded),
-                Command::perform(load(), Message::Loaded),
-            ]),
-        )
-    }
-
-    fn title(&self) -> String {
-        String::from("TimePicker example")
-    }
-
-    fn update(&mut self, message: Self::Message) -> Command<Message> {
-        match self {
-            TimePickerExample::Loading => {
-                if let Message::Loaded(_) = message {
-                    *self = TimePickerExample::Loaded(State {
-                        time: Time::now_hm(true),
-                        show_picker: false,
-                    })
-                }
+impl TimePickerExample {
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::ChooseTime => {
+                self.show_picker = true;
+            }
+            Message::SubmitTime(time) => {
+                self.time = time;
+                self.show_picker = false;
+            }
+            Message::CancelTime => {
+                self.show_picker = false;
             }
-            TimePickerExample::Loaded(state) => match message {
-                Message::ChooseTime => {
-                    state.show_picker = true;
-                }
-                Message::SubmitTime(time) => {
-                    state.time = time;
-                    state.show_picker = false;
-                }
-                Message::CancelTime => {
-                    state.show_picker = false;
-                }
-                _ => {}
-            },
         }
-
-        Command::none()
     }
 
-    fn view(&self) -> Element<'_, Self::Message> {
-        match self {
-            TimePickerExample::Loading => container(
-                text("Loading...")
-                    .horizontal_alignment(alignment::Horizontal::Center)
-                    .size(50),
-            )
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_y()
-            .center_x()
-            .into(),
-            TimePickerExample::Loaded(state) => {
-                let but = Button::new(Text::new("Set Time")).on_press(Message::ChooseTime);
+    fn view(&self) -> Element<'_, Message> {
+        let but = Button::new(Text::new("Set Time")).on_press(Message::ChooseTime);
 
-                let timepicker = TimePicker::new(
-                    state.show_picker,
-                    state.time,
-                    but,
-                    Message::CancelTime,
-                    Message::SubmitTime,
-                )
-                //.show_seconds()
-                .use_24h();
+        let timepicker = TimePicker::new(
+            self.show_picker,
+            self.time,
+            but,
+            Message::CancelTime,
+            Message::SubmitTime,
+        )
+        .use_24h();
 
-                let row = Row::new()
-                    .align_items(Alignment::Center)
-                    .spacing(10)
-                    .push(timepicker)
-                    .push(Text::new(format!("Time: {}", state.time)));
+        let row = Row::new()
+            .align_items(Alignment::Center)
+            .spacing(10)
+            .push(timepicker)
+            .push(Text::new(format!("Time: {}", self.time)));
 
-                Container::new(row)
-                    .center_x()
-                    .center_y()
-                    .width(Length::Fill)
-                    .height(Length::Fill)
-                    .into()
-            }
-        }
+        Container::new(row)
+            .center_x(Length::Fill)
+            .center_y(Length::Fill)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .into()
     }
 }
diff --git a/src/core/time.rs b/src/core/time.rs
index 32e79ae3..0bcaa298 100644
--- a/src/core/time.rs
+++ b/src/core/time.rs
@@ -31,6 +31,16 @@ pub enum Time {
     },
 }
 
+impl Default for Time {
+    fn default() -> Self {
+        Self::Hm {
+            hour: 1,
+            minute: 0,
+            period: Period::Am,
+        }
+    }
+}
+
 impl Time {
     /// Creates a new time (hours, minutes) from the current timestamp.
     #[must_use]
diff --git a/src/style.rs b/src/style.rs
index 0e4c2d89..a11da852 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -25,8 +25,6 @@ pub use tab_bar::TabBarStyles;
 
 #[cfg(feature = "time_picker")]
 pub mod time_picker;
-#[cfg(feature = "time_picker")]
-pub use time_picker::TimePickerStyle;
 
 #[cfg(feature = "number_input")]
 pub mod number_input;
diff --git a/src/style/time_picker.rs b/src/style/time_picker.rs
index 454e5014..44937b74 100644
--- a/src/style/time_picker.rs
+++ b/src/style/time_picker.rs
@@ -2,13 +2,12 @@
 //!
 //! *This API requires the following crate features to be activated: `time_picker`*
 #![allow(clippy::doc_markdown)]
-use std::rc::Rc;
-
+use super::{Status, StyleFn};
 use iced::{Background, Color, Theme};
 
-/// The appearance of a [`TimePicker`](crate::widgets::TimePicker).
+/// The style of a [`TimePicker`](crate::widgets::TimePicker).
 #[derive(Clone, Copy, Debug)]
-pub struct Appearance {
+pub struct Style {
     /// The background of the [`TimePicker`](crate::widgets::TimePicker).
     pub background: Background,
 
@@ -45,103 +44,64 @@ pub struct Appearance {
     pub clock_hand_width: f32,
 }
 
-/// The appearance of a [`TimePicker`](crate::widgets::TimePicker).
-pub trait StyleSheet {
-    /// The style type of this stylesheet
-    type Style: Default + Clone;
-    /// The normal appearance of a [`TimePicker`](crate::widgets::TimePicker).
-    fn active(&self, style: &Self::Style) -> Appearance;
-
-    /// The appearance when something is selected of the
-    /// [`TimePicker`](crate::widgets::TimePicker)
-    fn selected(&self, style: &Self::Style) -> Appearance;
+/// The Catalog of a [`TimePicker`](crate::widgets::TimePicker).
+pub trait Catalog {
+    ///Style for the trait to use.
+    type Class<'a>;
 
-    /// The appearance when something is hovered of the
-    /// [`TimePicker`](crate::widgets::TimePicker).
-    fn hovered(&self, style: &Self::Style) -> Appearance;
+    /// The default class produced by the [`Catalog`].
+    fn default<'a>() -> Self::Class<'a>;
 
-    /// The appearance when something is focused of the
-    /// [`TimePicker`](crate::widgets::TimePicker).
-    fn focused(&self, style: &Self::Style) -> Appearance;
+    /// The [`Style`] of a class with the given status.
+    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
 }
 
-/// The style appearance of the [`TimePicker`](crate::widgets::TimePicker)
-#[derive(Clone, Default)]
-#[allow(missing_docs, clippy::missing_docs_in_private_items)]
-pub enum TimePickerStyle {
-    #[default]
-    Default,
-    Custom(Rc<dyn StyleSheet<Style = Theme>>),
-}
+impl Catalog for Theme {
+    type Class<'a> = StyleFn<'a, Self, Style>;
 
-impl TimePickerStyle {
-    /// Creates a custom [`TimePickerStyle`] style variant.
-    pub fn custom(style_sheet: impl StyleSheet<Style = Theme> + 'static) -> Self {
-        Self::Custom(Rc::new(style_sheet))
+    fn default<'a>() -> Self::Class<'a> {
+        Box::new(primary)
     }
-}
 
-impl StyleSheet for Theme {
-    type Style = TimePickerStyle;
-
-    fn active(&self, style: &Self::Style) -> Appearance {
-        if let TimePickerStyle::Custom(custom) = style {
-            return custom.active(self);
-        }
-
-        let palette = self.extended_palette();
-        let foreground = self.palette();
-
-        Appearance {
-            background: palette.background.base.color.into(),
-            border_radius: 15.0,
-            border_width: 1.0,
-            border_color: foreground.text,
-            text_color: foreground.text,
-            clock_number_color: foreground.text,
-            clock_number_background: palette.background.base.color,
-            clock_dots_color: [0.87, 0.87, 0.87].into(),
-            clock_hand_color: [0.87, 0.87, 0.87].into(),
-            clock_hand_width: 3.0,
-        }
-    }
-
-    fn selected(&self, style: &Self::Style) -> Appearance {
-        if let TimePickerStyle::Custom(custom) = style {
-            return custom.selected(self);
-        }
-
-        let palette = self.extended_palette();
-
-        Appearance {
-            clock_number_color: palette.primary.strong.text,
-            clock_number_background: palette.primary.strong.color,
-            ..self.active(style)
-        }
+    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
+        class(self, status)
     }
+}
 
-    fn hovered(&self, style: &Self::Style) -> Appearance {
-        if let TimePickerStyle::Custom(custom) = style {
-            return custom.hovered(self);
-        }
-
-        let palette = self.extended_palette();
-
-        Appearance {
+/// The primary theme of a [`TimePicker`](crate::widgets::TimePicker).
+#[must_use]
+pub fn primary(theme: &Theme, status: Status) -> Style {
+    let palette = theme.extended_palette();
+    let foreground = theme.palette();
+
+    let base = Style {
+        background: palette.background.base.color.into(),
+        border_radius: 15.0,
+        border_width: 1.0,
+        border_color: foreground.text,
+        text_color: foreground.text,
+        clock_number_color: foreground.text,
+        clock_number_background: palette.background.base.color,
+        clock_dots_color: [0.87, 0.87, 0.87].into(),
+        clock_hand_color: [0.87, 0.87, 0.87].into(),
+        clock_hand_width: 3.0,
+    };
+
+    match status {
+        Status::Focused => Style {
+            border_color: Color::from_rgb(0.5, 0.5, 0.5),
+            ..base
+        },
+        Status::Hovered => Style {
             clock_number_color: palette.primary.weak.text,
             clock_number_background: palette.primary.weak.color,
-            ..self.active(style)
-        }
-    }
-
-    fn focused(&self, style: &Self::Style) -> Appearance {
-        if let TimePickerStyle::Custom(custom) = style {
-            return custom.focused(self);
-        }
-
-        Appearance {
-            border_color: Color::from_rgb(0.5, 0.5, 0.5),
-            ..self.active(style)
-        }
+            ..base
+        },
+        Status::Selected => Style {
+            clock_number_color: palette.primary.strong.text,
+            clock_number_background: palette.primary.strong.color,
+            ..base
+        },
+        _ => base,
     }
 }
diff --git a/src/widgets/date_picker.rs b/src/widgets/date_picker.rs
index d69c3fdb..06759c88 100644
--- a/src/widgets/date_picker.rs
+++ b/src/widgets/date_picker.rs
@@ -134,7 +134,6 @@ where
         <Theme as crate::style::date_picker::Catalog>::Class<'a>: From<StyleFn<'a, Theme, Style>>,
     {
         self.class = (Box::new(style) as StyleFn<'a, Theme, Style>).into();
-        //self.button_style = style.into();
         self
     }
 
diff --git a/src/widgets/helpers.rs b/src/widgets/helpers.rs
index cd956140..d7384faa 100644
--- a/src/widgets/helpers.rs
+++ b/src/widgets/helpers.rs
@@ -236,9 +236,9 @@ pub fn time_picker<'a, Message, Theme, U, F>(
 where
     Message: 'a + Clone,
     Theme: 'a
-        + crate::style::time_picker::StyleSheet
-        + iced::widget::button::StyleSheet
-        + iced::widget::text::StyleSheet,
+        + crate::style::time_picker::Catalog
+        + iced::widget::button::Catalog
+        + iced::widget::text::Catalog,
     U: Into<Element<'a, Message, Theme, iced::Renderer>>,
     F: 'static + Fn(crate::core::time::Time) -> Message,
 {
diff --git a/src/widgets/overlay/time_picker.rs b/src/widgets/overlay/time_picker.rs
index e02c9282..fd9c76af 100644
--- a/src/widgets/overlay/time_picker.rs
+++ b/src/widgets/overlay/time_picker.rs
@@ -13,7 +13,11 @@ use crate::{
         {Bootstrap, BOOTSTRAP_FONT},
     },
     core::{clock, overlay::Position, time::Period},
-    style::style_state::StyleState,
+    style::{
+        style_state::StyleState,
+        time_picker::{Catalog, Style},
+        Status,
+    },
     time_picker::{self, Time},
 };
 
@@ -34,7 +38,7 @@ use iced::{
     touch,
     widget::{
         button,
-        canvas::{self, LineCap, Path, Stroke, Style, Text as CanvasText},
+        canvas::{self, LineCap, Path, Stroke, Text as CanvasText},
         container, text, Button, Column, Container, Row,
     },
     Alignment,
@@ -54,8 +58,6 @@ use iced::{
 };
 use std::collections::HashMap;
 
-pub use crate::style::time_picker::{Appearance, StyleSheet};
-
 /// The padding around the elements.
 const PADDING: f32 = 10.0;
 /// The spacing between the elements.
@@ -69,10 +71,11 @@ const PERIOD_SIZE_PERCENTAGE: f32 = 0.2;
 
 /// The overlay of the [`TimePicker`](crate::widgets::TimePicker).
 #[allow(missing_debug_implementations)]
-pub struct TimePickerOverlay<'a, Message, Theme>
+pub struct TimePickerOverlay<'a, 'b, Message, Theme>
 where
     Message: Clone,
-    Theme: StyleSheet + button::StyleSheet,
+    Theme: Catalog + button::Catalog,
+    'b: 'a,
 {
     /// The state of the [`TimePickerOverlay`].
     state: &'a mut State,
@@ -85,15 +88,16 @@ where
     /// The position of the [`TimePickerOverlay`].
     position: Point,
     /// The style of the [`TimePickerOverlay`].
-    style: <Theme as StyleSheet>::Style,
+    class: &'a <Theme as Catalog>::Class<'b>,
     /// The reference to the tree holding the state of this overlay.
     tree: &'a mut Tree,
 }
 
-impl<'a, Message, Theme> TimePickerOverlay<'a, Message, Theme>
+impl<'a, 'b, Message, Theme> TimePickerOverlay<'a, 'b, Message, Theme>
 where
     Message: 'static + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet + text::StyleSheet + container::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog + text::Catalog + container::Catalog,
+    'b: 'a,
 {
     /// Creates a new [`TimePickerOverlay`] on the given position.
     pub fn new(
@@ -101,7 +105,7 @@ where
         on_cancel: Message,
         on_submit: &'a dyn Fn(Time) -> Message,
         position: Point,
-        style: <Theme as StyleSheet>::Style,
+        class: &'a <Theme as Catalog>::Class<'b>,
         tree: &'a mut Tree,
     ) -> Self {
         let time_picker::State { overlay_state } = state;
@@ -126,7 +130,7 @@ where
             .on_press(on_cancel), // Sending a fake message
             on_submit,
             position,
-            style,
+            class,
             tree,
         }
     }
@@ -517,10 +521,12 @@ where
     }
 }
 
-impl<'a, Message, Theme> Overlay<Message, Theme, Renderer> for TimePickerOverlay<'a, Message, Theme>
+impl<'a, 'b, Message, Theme> Overlay<Message, Theme, Renderer>
+    for TimePickerOverlay<'a, 'b, Message, Theme>
 where
     Message: 'static + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet + text::StyleSheet + container::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog + text::Catalog + container::Catalog,
+    'b: 'a,
 {
     fn layout(&mut self, renderer: &Renderer, bounds: Size) -> Node {
         let limits = Limits::new(Size::ZERO, bounds)
@@ -848,14 +854,23 @@ where
         let bounds = layout.bounds();
         let mut children = layout.children();
 
-        let mut style_sheet: HashMap<StyleState, Appearance> = HashMap::new();
-        let _ = style_sheet.insert(StyleState::Active, StyleSheet::active(theme, &self.style));
+        let mut style_sheet: HashMap<StyleState, Style> = HashMap::new();
+        let _ = style_sheet.insert(
+            StyleState::Active,
+            Catalog::style(theme, self.class, Status::Active),
+        );
         let _ = style_sheet.insert(
             StyleState::Selected,
-            StyleSheet::selected(theme, &self.style),
+            Catalog::style(theme, self.class, Status::Selected),
+        );
+        let _ = style_sheet.insert(
+            StyleState::Hovered,
+            Catalog::style(theme, self.class, Status::Hovered),
+        );
+        let _ = style_sheet.insert(
+            StyleState::Focused,
+            Catalog::style(theme, self.class, Status::Focused),
         );
-        let _ = style_sheet.insert(StyleState::Hovered, StyleSheet::hovered(theme, &self.style));
-        let _ = style_sheet.insert(StyleState::Focused, StyleSheet::focused(theme, &self.style));
 
         let mut style_state = StyleState::Active;
         if self.state.focus == Focus::Overlay {
@@ -965,13 +980,13 @@ where
 
 /// Defines the layout of the digital clock of the time picker.
 fn digital_clock<Message, Theme>(
-    time_picker: &mut TimePickerOverlay<'_, Message, Theme>,
+    time_picker: &mut TimePickerOverlay<'_, '_, Message, Theme>,
     renderer: &Renderer,
     limits: Limits,
 ) -> Node
 where
     Message: 'static + Clone,
-    Theme: StyleSheet + button::StyleSheet + text::StyleSheet + container::StyleSheet,
+    Theme: Catalog + button::Catalog + text::Catalog + container::Catalog,
 {
     let arrow_size = renderer.default_size().0;
     let font_size = 1.2 * renderer.default_size().0;
@@ -1081,8 +1096,8 @@ where
     let container = Container::new(digital_clock_row)
         .width(Length::Fill)
         .height(Length::Shrink)
-        .center_x()
-        .center_y();
+        .center_x(Length::Fill)
+        .center_y(Length::Shrink);
 
     let element: Element<Message, Theme, Renderer> = Element::new(container);
     let container_tree = if let Some(child_tree) = time_picker.tree.children.get_mut(2) {
@@ -1103,13 +1118,13 @@ where
 #[allow(clippy::too_many_lines)]
 fn draw_clock<Message, Theme>(
     renderer: &mut Renderer,
-    time_picker: &TimePickerOverlay<'_, Message, Theme>,
+    time_picker: &TimePickerOverlay<'_, '_, Message, Theme>,
     layout: Layout<'_>,
     cursor: Cursor,
-    style: &HashMap<StyleState, Appearance>,
+    style: &HashMap<StyleState, Style>,
 ) where
     Message: 'static + Clone,
-    Theme: StyleSheet + button::StyleSheet + text::StyleSheet,
+    Theme: Catalog + button::Catalog + text::Catalog,
 {
     let mut clock_style_state = StyleState::Active;
     if cursor.is_over(layout.bounds()) {
@@ -1178,7 +1193,7 @@ fn draw_clock<Message, Theme>(
             let second_points = crate::core::clock::circle_points(second_radius, center, 60);
 
             let hand_stroke = Stroke {
-                style: Style::Solid(
+                style: canvas::Style::Solid(
                     style
                         .get(&clock_style_state)
                         .expect("Style Sheet not found.")
@@ -1399,7 +1414,7 @@ fn draw_clock<Message, Theme>(
 
     let translation = Vector::new(layout.bounds().x, layout.bounds().y);
     renderer.with_translation(translation, |renderer| {
-        renderer.draw(vec![geometry]);
+        renderer.draw_geometry(geometry);
     });
 }
 
@@ -1407,13 +1422,13 @@ fn draw_clock<Message, Theme>(
 #[allow(clippy::too_many_lines)]
 fn draw_digital_clock<Message, Theme>(
     renderer: &mut Renderer,
-    time_picker: &TimePickerOverlay<'_, Message, Theme>,
+    time_picker: &TimePickerOverlay<'_, '_, Message, Theme>,
     layout: Layout<'_>,
     cursor: Cursor,
-    style: &HashMap<StyleState, Appearance>,
+    style: &HashMap<StyleState, Style>,
 ) where
     Message: 'static + Clone,
-    Theme: StyleSheet + button::StyleSheet + text::StyleSheet,
+    Theme: Catalog + button::Catalog + text::Catalog,
 {
     //println!("layout: {:#?}", layout);
     let mut children = layout
@@ -1481,7 +1496,7 @@ fn draw_digital_clock<Message, Theme>(
         // Caret up
         renderer.fill_text(
             Text {
-                content: char::from(Bootstrap::CaretUpFill).encode_utf8(&mut buffer),
+                content: (*char::from(Bootstrap::CaretUpFill).encode_utf8(&mut buffer)).to_string(),
                 bounds: Size::new(up_bounds.width, up_bounds.height),
                 size: Pixels(renderer.default_size().0 + if up_arrow_hovered { 1.0 } else { 0.0 }),
                 font: crate::core::icons::BOOTSTRAP_FONT,
@@ -1501,7 +1516,7 @@ fn draw_digital_clock<Message, Theme>(
         // Text
         renderer.fill_text(
             Text {
-                content: &text,
+                content: text,
                 bounds: Size::new(center_bounds.width, center_bounds.height),
                 size: renderer.default_size(),
                 font: renderer.default_font(),
@@ -1521,7 +1536,8 @@ fn draw_digital_clock<Message, Theme>(
         // Down caret
         renderer.fill_text(
             Text {
-                content: char::from(Bootstrap::CaretDownFill).encode_utf8(&mut buffer),
+                content: (*char::from(Bootstrap::CaretDownFill).encode_utf8(&mut buffer))
+                    .to_string(),
                 bounds: Size::new(down_bounds.width, down_bounds.height),
                 size: Pixels(
                     renderer.default_size().0 + if down_arrow_hovered { 1.0 } else { 0.0 },
@@ -1571,7 +1587,7 @@ fn draw_digital_clock<Message, Theme>(
 
     renderer.fill_text(
         Text {
-            content: ":",
+            content: ":".to_owned(),
             bounds: Size::new(
                 hour_minute_separator.bounds().width,
                 hour_minute_separator.bounds().height,
@@ -1609,7 +1625,7 @@ fn draw_digital_clock<Message, Theme>(
             .expect("Graphics: Layout should have a minute/second separator layout");
         renderer.fill_text(
             Text {
-                content: ":",
+                content: ":".to_owned(),
                 bounds: Size::new(
                     minute_second_separator.bounds().width,
                     minute_second_separator.bounds().height,
@@ -1649,9 +1665,9 @@ fn draw_digital_clock<Message, Theme>(
         renderer.fill_text(
             Text {
                 content: if time_picker.state.time.hour12().0 {
-                    "PM"
+                    "PM".to_owned()
                 } else {
-                    "AM"
+                    "AM".to_owned()
                 },
                 bounds: Size::new(period.bounds().width, period.bounds().height),
                 size: renderer.default_size(),
@@ -1722,7 +1738,7 @@ impl Default for State {
 pub struct TimePickerOverlayButtons<'a, Message, Theme>
 where
     Message: Clone,
-    Theme: StyleSheet + button::StyleSheet,
+    Theme: Catalog + button::Catalog,
 {
     /// The cancel button of the [`TimePickerOverlay`].
     cancel_button: Element<'a, Message, Theme, Renderer>,
@@ -1733,7 +1749,7 @@ where
 impl<'a, Message, Theme> Default for TimePickerOverlayButtons<'a, Message, Theme>
 where
     Message: 'a + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet + text::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog + text::Catalog,
 {
     fn default() -> Self {
         Self {
@@ -1760,7 +1776,7 @@ impl<'a, Message, Theme> Widget<Message, Theme, Renderer>
     for TimePickerOverlayButtons<'a, Message, Theme>
 where
     Message: Clone,
-    Theme: StyleSheet + button::StyleSheet,
+    Theme: Catalog + button::Catalog,
 {
     fn children(&self) -> Vec<Tree> {
         vec![
@@ -1799,7 +1815,7 @@ impl<'a, Message, Theme> From<TimePickerOverlayButtons<'a, Message, Theme>>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog,
 {
     fn from(overlay: TimePickerOverlayButtons<'a, Message, Theme>) -> Self {
         Self::new(overlay)
diff --git a/src/widgets/time_picker.rs b/src/widgets/time_picker.rs
index c274637e..287a2901 100644
--- a/src/widgets/time_picker.rs
+++ b/src/widgets/time_picker.rs
@@ -27,7 +27,10 @@ use iced::{
 
 pub use crate::{
     core::time::{Period, Time},
-    style::time_picker::{Appearance, StyleSheet},
+    style::{
+        time_picker::{Catalog, Style},
+        Status, StyleFn,
+    },
 };
 
 //TODO: Remove ignore when Null is updated. Temp fix for Test runs
@@ -58,7 +61,7 @@ pub use crate::{
 pub struct TimePicker<'a, Message, Theme>
 where
     Message: Clone,
-    Theme: StyleSheet + button::StyleSheet,
+    Theme: Catalog + button::Catalog,
 {
     /// Show the picker.
     show_picker: bool,
@@ -71,7 +74,7 @@ where
     /// The function that produces a message when the submit button of the [`TimePickerOverlay`] is pressed.
     on_submit: Box<dyn Fn(Time) -> Message>,
     /// The style of the [`TimePickerOverlay`].
-    style: <Theme as StyleSheet>::Style,
+    class: <Theme as Catalog>::Class<'a>,
     /// The buttons of the overlay.
     overlay_state: Element<'a, Message, Theme, Renderer>,
     /// Toggle the use of the 24h clock of the [`TimePickerOverlay`].
@@ -83,7 +86,7 @@ where
 impl<'a, Message, Theme> TimePicker<'a, Message, Theme>
 where
     Message: 'a + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet + text::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog + text::Catalog,
 {
     /// Creates a new [`TimePicker`] wrapping around the given underlay.
     ///
@@ -112,7 +115,7 @@ where
             underlay: underlay.into(),
             on_cancel,
             on_submit: Box::new(on_submit),
-            style: <Theme as StyleSheet>::Style::default(),
+            class: <Theme as Catalog>::default(),
             overlay_state: TimePickerOverlayButtons::default().into(),
             use_24h: false,
             show_seconds: false,
@@ -128,8 +131,11 @@ where
 
     /// Sets the style of the [`TimePicker`].
     #[must_use]
-    pub fn style(mut self, style: <Theme as StyleSheet>::Style) -> Self {
-        self.style = style;
+    pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
+    where
+        <Theme as Catalog>::Class<'a>: From<StyleFn<'a, Theme, Style>>,
+    {
+        self.class = (Box::new(style) as StyleFn<'a, Theme, Style>).into();
         self
     }
 
@@ -139,6 +145,13 @@ where
         self.use_24h = true;
         self
     }
+
+    /// Sets the class of the input of the [`DatePicker`].
+    #[must_use]
+    pub fn class(mut self, class: impl Into<<Theme as Catalog>::Class<'a>>) -> Self {
+        self.class = class.into();
+        self
+    }
 }
 
 /// The state of the [`TimePicker`] / [`TimePickerOverlay`].
@@ -175,7 +188,7 @@ impl State {
 impl<'a, Message, Theme> Widget<Message, Theme, Renderer> for TimePicker<'a, Message, Theme>
 where
     Message: 'static + Clone,
-    Theme: StyleSheet + button::StyleSheet + text::StyleSheet + container::StyleSheet,
+    Theme: Catalog + button::Catalog + text::Catalog + container::Catalog,
 {
     fn tag(&self) -> Tag {
         Tag::of::<State>()
@@ -291,7 +304,7 @@ where
                 self.on_cancel.clone(),
                 &self.on_submit,
                 position,
-                self.style.clone(),
+                &self.class,
                 &mut state.children[1],
             )
             .overlay(),
@@ -303,7 +316,7 @@ impl<'a, Message, Theme> From<TimePicker<'a, Message, Theme>>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'static + Clone,
-    Theme: 'a + StyleSheet + button::StyleSheet + text::StyleSheet + container::StyleSheet,
+    Theme: 'a + Catalog + button::Catalog + text::Catalog + container::Catalog,
 {
     fn from(time_picker: TimePicker<'a, Message, Theme>) -> Self {
         Element::new(time_picker)