diff --git a/CREDITS.md b/CREDITS.md
index cefd08df93ad4..b646a0662dbf7 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -16,3 +16,7 @@
 
 * Generic RPG Pack (CC0 license) by [Bakudas](https://twitter.com/bakudas) and [Gabe Fern](https://twitter.com/_Gabrielfer)
 * Environment maps (`.hdr` files) from [HDRIHaven](https://hdrihaven.com) (CC0 license)
+* Alien from [Kenney's Space Kit](https://www.kenney.nl/assets/space-kit) (CC0 1.0 Universal)
+* Cake from [Kenney's Food Kit](https://www.kenney.nl/assets/food-kit) (CC0 1.0 Universal)
+* Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit) (CC0 1.0 Universal)
+* Game icons from [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons) (CC0 1.0 Universal)
diff --git a/Cargo.toml b/Cargo.toml
index dd9e585c39fbf..c451e83f06f57 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -359,6 +359,10 @@ path = "examples/game/alien_cake_addict.rs"
 name = "breakout"
 path = "examples/game/breakout.rs"
 
+[[example]]
+name = "game_menu"
+path = "examples/game/game_menu.rs"
+
 # Input
 [[example]]
 name = "char_input_events"
diff --git a/assets/models/AlienCake/README.md b/assets/models/AlienCake/README.md
deleted file mode 100644
index 2cf86d3d8bd0d..0000000000000
--- a/assets/models/AlienCake/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Assets are from [Kenney](https://www.kenney.nl)
-
-- alien from [Space Kit](https://www.kenney.nl/assets/space-kit)
-- cake from [Food Kit](https://www.kenney.nl/assets/food-kit)
-- ground tile from [Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit)
diff --git a/assets/textures/Game Icons/exitRight.png b/assets/textures/Game Icons/exitRight.png
new file mode 100644
index 0000000000000..de78ab6f0f025
Binary files /dev/null and b/assets/textures/Game Icons/exitRight.png differ
diff --git a/assets/textures/Game Icons/right.png b/assets/textures/Game Icons/right.png
new file mode 100644
index 0000000000000..3f2480f9a5465
Binary files /dev/null and b/assets/textures/Game Icons/right.png differ
diff --git a/assets/textures/Game Icons/wrench.png b/assets/textures/Game Icons/wrench.png
new file mode 100644
index 0000000000000..440e7edc41af9
Binary files /dev/null and b/assets/textures/Game Icons/wrench.png differ
diff --git a/examples/README.md b/examples/README.md
index 81190f58866e4..02a10eabb4062 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -182,6 +182,7 @@ Example | File | Description
 --- | --- | ---
 `alien_cake_addict` | [`game/alien_cake_addict.rs`](./game/alien_cake_addict.rs) | Eat the cakes. Eat them all. An example 3D game
 `breakout` | [`game/breakout.rs`](./game/breakout.rs) | An implementation of the classic game "Breakout"
+`game_menu` | [`game/game_menu.rs`](./game/game_menu.rs) | A simple game menu
 
 ## Input
 
diff --git a/examples/game/game_menu.rs b/examples/game/game_menu.rs
new file mode 100644
index 0000000000000..8bc0a155b31f5
--- /dev/null
+++ b/examples/game/game_menu.rs
@@ -0,0 +1,820 @@
+use bevy::prelude::*;
+
+// This example will display a simple menu using Bevy UI where you can start a new game,
+// change some settings or quit. There is no actual game, it will just display the current
+// settings for 5 seconds before going back to the menu.
+
+const TEXT_COLOR: Color = Color::rgb(0.9, 0.9, 0.9);
+
+// Enum that will be used as a global state for the game
+#[derive(Clone, Eq, PartialEq, Debug, Hash)]
+enum GameState {
+    Splash,
+    Menu,
+    Game,
+}
+
+// One of the two settings that can be set through the menu. It will be a resource in the app
+#[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
+enum DisplayQuality {
+    Low,
+    Medium,
+    High,
+}
+
+// One of the two settings that can be set through the menu. It will be a resource in the app
+#[derive(Debug, Component, PartialEq, Eq, Clone, Copy)]
+struct Volume(u32);
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Insert as resource the initial value for the settings resources
+        .insert_resource(DisplayQuality::Medium)
+        .insert_resource(Volume(7))
+        .add_startup_system(setup)
+        // Declare the game state, and set its startup value
+        .add_state(GameState::Splash)
+        // Adds the plugins for each state
+        .add_plugin(splash::SplashPlugin)
+        .add_plugin(menu::MenuPlugin)
+        .add_plugin(game::GamePlugin)
+        .run();
+}
+
+// As there isn't an actual game, setup is just adding a `UiCameraBundle`
+fn setup(mut commands: Commands) {
+    commands.spawn_bundle(UiCameraBundle::default());
+}
+
+mod splash {
+    use bevy::prelude::*;
+
+    use super::{despawn_screen, GameState};
+
+    // This plugin will display a splash screen with Bevy logo for 1 second before switching to the menu
+    pub struct SplashPlugin;
+
+    impl Plugin for SplashPlugin {
+        fn build(&self, app: &mut bevy::prelude::App) {
+            // As this plugin is managing the splash screen, it will focus on the state `GameState::Splash`
+            app
+                // When entering the state, spawn everything needed for this screen
+                .add_system_set(SystemSet::on_enter(GameState::Splash).with_system(splash_setup))
+                // While in this state, run the `countdown` system
+                .add_system_set(SystemSet::on_update(GameState::Splash).with_system(countdown))
+                // When exiting the state, despawn everything that was spawned for this screen
+                .add_system_set(
+                    SystemSet::on_exit(GameState::Splash)
+                        .with_system(despawn_screen::<OnSplashScreen>),
+                );
+        }
+    }
+
+    // Tag component used to tag entities added on the splash screen
+    #[derive(Component)]
+    struct OnSplashScreen;
+
+    // Newtype to use a `Timer` for this screen as a resource
+    struct SplashTimer(Timer);
+
+    fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        let icon = asset_server.load("branding/icon.png");
+        // Display the logo
+        commands
+            .spawn_bundle(ImageBundle {
+                style: Style {
+                    // This will center the logo
+                    margin: Rect::all(Val::Auto),
+                    // This will set the logo to be 200px wide, and auto adjust its height
+                    size: Size::new(Val::Px(200.0), Val::Auto),
+                    ..Default::default()
+                },
+                image: UiImage(icon),
+                ..Default::default()
+            })
+            .insert(OnSplashScreen);
+        // Insert the timer as a resource
+        commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, false)));
+    }
+
+    // Tick the timer, and change state when finished
+    fn countdown(
+        mut game_state: ResMut<State<GameState>>,
+        time: Res<Time>,
+        mut timer: ResMut<SplashTimer>,
+    ) {
+        if timer.0.tick(time.delta()).finished() {
+            game_state.set(GameState::Menu).unwrap();
+        }
+    }
+}
+
+mod game {
+    use bevy::prelude::*;
+
+    use super::{despawn_screen, DisplayQuality, GameState, Volume, TEXT_COLOR};
+
+    // This plugin will contain the game. In this case, it's just be a screen that will
+    // display the current settings for 5 seconds before returning to the menu
+    pub struct GamePlugin;
+
+    impl Plugin for GamePlugin {
+        fn build(&self, app: &mut App) {
+            app.add_system_set(SystemSet::on_enter(GameState::Game).with_system(game_setup))
+                .add_system_set(SystemSet::on_update(GameState::Game).with_system(game))
+                .add_system_set(
+                    SystemSet::on_exit(GameState::Game).with_system(despawn_screen::<OnGameScreen>),
+                );
+        }
+    }
+
+    // Tag component used to tag entities added on the game screen
+    #[derive(Component)]
+    struct OnGameScreen;
+
+    struct GameTimer(Timer);
+
+    fn game_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        display_quality: Res<DisplayQuality>,
+        volume: Res<Volume>,
+    ) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+        commands
+            // First create a `NodeBundle` for centering what we want to display
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    // This will center the current node
+                    margin: Rect::all(Val::Auto),
+                    // This will display its children in a column, from top to bottom. Unlike
+                    // in Flexbox, Bevy origin is on bottom left, so the vertical axis is reversed
+                    flex_direction: FlexDirection::ColumnReverse,
+                    // `align_items` will align children on the cross axis. Here the main axis is
+                    // vertical (column), so the cross axis is horizontal. This will center the
+                    // children
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                color: Color::BLACK.into(),
+                ..Default::default()
+            })
+            .insert(OnGameScreen)
+            .with_children(|parent| {
+                // Display two lines of text, the second one with the current settings
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        "Will be back to the menu shortly...",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 80.0,
+                            color: TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text {
+                        sections: vec![
+                            TextSection {
+                                value: format!("quality: {:?}", *display_quality),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: Color::BLUE,
+                                },
+                            },
+                            TextSection {
+                                value: " - ".to_string(),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: TEXT_COLOR,
+                                },
+                            },
+                            TextSection {
+                                value: format!("volume: {:?}", *volume),
+                                style: TextStyle {
+                                    font: font.clone(),
+                                    font_size: 60.0,
+                                    color: Color::GREEN,
+                                },
+                            },
+                        ],
+                        ..Default::default()
+                    },
+                    ..Default::default()
+                });
+            });
+        // Spawn a 5 seconds timer to trigger going back to the menu
+        commands.insert_resource(GameTimer(Timer::from_seconds(5.0, false)));
+    }
+
+    // Tick the timer, and change state when finished
+    fn game(
+        time: Res<Time>,
+        mut game_state: ResMut<State<GameState>>,
+        mut timer: ResMut<GameTimer>,
+    ) {
+        if timer.0.tick(time.delta()).finished() {
+            game_state.set(GameState::Menu).unwrap();
+        }
+    }
+}
+
+mod menu {
+    use bevy::{app::AppExit, prelude::*};
+
+    use super::{despawn_screen, DisplayQuality, GameState, Volume, TEXT_COLOR};
+
+    // This plugin manages the menu, with 5 different screens:
+    // - a main menu with "New Game", "Settings", "Quit"
+    // - a settings menu with two submenus and a back button
+    // - two settings screen with a setting that can be set and a back button
+    pub struct MenuPlugin;
+
+    impl Plugin for MenuPlugin {
+        fn build(&self, app: &mut bevy::prelude::App) {
+            app
+                // At start, the menu is not enabled. This will be changed in `menu_setup` when
+                // entering the `GameState::Menu` state.
+                // Current screen in the menu is handled by an independent state from `GameState`
+                .add_state(MenuState::Disabled)
+                .add_system_set(SystemSet::on_enter(GameState::Menu).with_system(menu_setup))
+                // Systems to handle the main menu screen
+                .add_system_set(SystemSet::on_enter(MenuState::Main).with_system(main_menu_setup))
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::Main)
+                        .with_system(despawn_screen::<OnMainMenuScreen>),
+                )
+                // Systems to handle the settings menu screen
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::Settings).with_system(settings_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::Settings)
+                        .with_system(despawn_screen::<OnSettingsMenuScreen>),
+                )
+                // Systems to handle the display settings screen
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::SettingsDisplay)
+                        .with_system(display_settings_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_update(MenuState::SettingsDisplay)
+                        .with_system(setting_button::<DisplayQuality>),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::SettingsDisplay)
+                        .with_system(despawn_screen::<OnDisplaySettingsMenuScreen>),
+                )
+                // Systems to handle the sound settings screen
+                .add_system_set(
+                    SystemSet::on_enter(MenuState::SettingsSound)
+                        .with_system(sound_settings_menu_setup),
+                )
+                .add_system_set(
+                    SystemSet::on_update(MenuState::SettingsSound)
+                        .with_system(setting_button::<Volume>),
+                )
+                .add_system_set(
+                    SystemSet::on_exit(MenuState::SettingsSound)
+                        .with_system(despawn_screen::<OnSoundSettingsMenuScreen>),
+                )
+                // Common systems to all screens that handles buttons behaviour
+                .add_system_set(
+                    SystemSet::on_update(GameState::Menu)
+                        .with_system(menu_action)
+                        .with_system(button_system),
+                );
+        }
+    }
+
+    // State used for the current menu screen
+    #[derive(Clone, Eq, PartialEq, Debug, Hash)]
+    enum MenuState {
+        Main,
+        Settings,
+        SettingsDisplay,
+        SettingsSound,
+        Disabled,
+    }
+
+    // Tag component used to tag entities added on the main menu screen
+    #[derive(Component)]
+    struct OnMainMenuScreen;
+
+    // Tag component used to tag entities added on the settings menu screen
+    #[derive(Component)]
+    struct OnSettingsMenuScreen;
+
+    // Tag component used to tag entities added on the display settings menu screen
+    #[derive(Component)]
+    struct OnDisplaySettingsMenuScreen;
+
+    // Tag component used to tag entities added on the sound settings menu screen
+    #[derive(Component)]
+    struct OnSoundSettingsMenuScreen;
+
+    const NORMAL_BUTTON: Color = Color::rgb(0.15, 0.15, 0.15);
+    const HOVERED_BUTTON: Color = Color::rgb(0.25, 0.25, 0.25);
+    const HOVERED_PRESSED_BUTTON: Color = Color::rgb(0.25, 0.65, 0.25);
+    const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
+
+    // Tag component used to mark wich setting is currently selected
+    #[derive(Component)]
+    struct SelectedOption;
+
+    // All actions that can be triggered from a button click
+    #[derive(Component)]
+    enum MenuButtonAction {
+        Play,
+        Settings,
+        SettingsDisplay,
+        SettingsSound,
+        BackToMainMenu,
+        BackToSettings,
+        Quit,
+    }
+
+    // This system handles changing all buttons color based on mouse interaction
+    fn button_system(
+        mut interaction_query: Query<
+            (&Interaction, &mut UiColor, Option<&SelectedOption>),
+            (Changed<Interaction>, With<Button>),
+        >,
+    ) {
+        for (interaction, mut color, selected) in interaction_query.iter_mut() {
+            *color = match (*interaction, selected) {
+                (Interaction::Clicked, _) => PRESSED_BUTTON.into(),
+                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
+                (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
+                (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
+                (Interaction::None, None) => NORMAL_BUTTON.into(),
+            }
+        }
+    }
+
+    // This system updates the settings when a new value for a setting is selected, and marks
+    // the button as the one currently selected
+    fn setting_button<T: Component + PartialEq + Copy>(
+        interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
+        mut selected_query: Query<(Entity, &mut UiColor), With<SelectedOption>>,
+        mut commands: Commands,
+        mut setting: ResMut<T>,
+    ) {
+        for (interaction, button_setting, entity) in interaction_query.iter() {
+            if *interaction == Interaction::Clicked && *setting != *button_setting {
+                let (previous_button, mut previous_color) = selected_query.single_mut();
+                *previous_color = NORMAL_BUTTON.into();
+                commands.entity(previous_button).remove::<SelectedOption>();
+                commands.entity(entity).insert(SelectedOption);
+                *setting = *button_setting;
+            }
+        }
+    }
+
+    fn menu_setup(mut menu_state: ResMut<State<MenuState>>) {
+        let _ = menu_state.set(MenuState::Main);
+    }
+
+    fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+        // Common style for all buttons on the screen
+        let button_style = Style {
+            size: Size::new(Val::Px(250.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_icon_style = Style {
+            size: Size::new(Val::Px(30.0), Val::Auto),
+            // This takes the icons out of the flexbox flow, to be positionned exactly
+            position_type: PositionType::Absolute,
+            // The icon will be close to the left border of the button
+            position: Rect {
+                left: Val::Px(10.0),
+                right: Val::Auto,
+                top: Val::Auto,
+                bottom: Val::Auto,
+            },
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: font.clone(),
+            font_size: 40.0,
+            color: TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                color: Color::CRIMSON.into(),
+                ..Default::default()
+            })
+            .insert(OnMainMenuScreen)
+            .with_children(|parent| {
+                // Display the game name
+                parent.spawn_bundle(TextBundle {
+                    style: Style {
+                        margin: Rect::all(Val::Px(50.0)),
+                        ..Default::default()
+                    },
+                    text: Text::with_section(
+                        "Bevy Game Menu UI",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 80.0,
+                            color: TEXT_COLOR,
+                        },
+                        Default::default(),
+                    ),
+                    ..Default::default()
+                });
+
+                // Display three buttons for each action available from the main menu:
+                // - new game
+                // - settings
+                // - quit
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Play)
+                    .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/right.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style.clone(),
+                            image: UiImage(icon),
+                            ..Default::default()
+                        });
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "New Game",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Settings)
+                    .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/wrench.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style.clone(),
+                            image: UiImage(icon),
+                            ..Default::default()
+                        });
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Settings",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::Quit)
+                    .with_children(|parent| {
+                        let icon = asset_server.load("textures/Game Icons/exitRight.png");
+                        parent.spawn_bundle(ImageBundle {
+                            style: button_icon_style,
+                            image: UiImage(icon),
+                            ..Default::default()
+                        });
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Quit", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 40.0,
+            color: TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                color: Color::CRIMSON.into(),
+                ..Default::default()
+            })
+            .insert(OnSettingsMenuScreen)
+            .with_children(|parent| {
+                // Display two buttons for the submenus
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::SettingsDisplay)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Display",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style.clone(),
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::SettingsSound)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Sound",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                    });
+                // Display the back button to return to the main menu screen
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToMainMenu)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn display_settings_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        display_quality: Res<DisplayQuality>,
+    ) {
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 40.0,
+            color: TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                color: Color::CRIMSON.into(),
+                ..Default::default()
+            })
+            .insert(OnDisplaySettingsMenuScreen)
+            .with_children(|parent| {
+                // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will
+                // use the default value, `FlexDirection::Row`, from left to right.
+                parent
+                    .spawn_bundle(NodeBundle {
+                        style: Style {
+                            align_items: AlignItems::Center,
+                            ..Default::default()
+                        },
+                        color: Color::CRIMSON.into(),
+                        ..Default::default()
+                    })
+                    .with_children(|parent| {
+                        // Display a label for the current setting
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Display Quality",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                        // Display a button for each possible value
+                        for quality_setting in [
+                            DisplayQuality::Low,
+                            DisplayQuality::Medium,
+                            DisplayQuality::High,
+                        ] {
+                            let mut entity = parent.spawn_bundle(ButtonBundle {
+                                style: Style {
+                                    size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                                    ..button_style.clone()
+                                },
+                                color: NORMAL_BUTTON.into(),
+                                ..Default::default()
+                            });
+                            entity.insert(quality_setting).with_children(|parent| {
+                                parent.spawn_bundle(TextBundle {
+                                    text: Text::with_section(
+                                        format!("{:?}", quality_setting),
+                                        button_text_style.clone(),
+                                        Default::default(),
+                                    ),
+                                    ..Default::default()
+                                });
+                            });
+                            if *display_quality == quality_setting {
+                                entity.insert(SelectedOption);
+                            }
+                        }
+                    });
+                // Display the back button to return to the settings screen
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToSettings)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn sound_settings_menu_setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        volume: Res<Volume>,
+    ) {
+        let button_style = Style {
+            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            margin: Rect::all(Val::Px(20.0)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..Default::default()
+        };
+        let button_text_style = TextStyle {
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 40.0,
+            color: TEXT_COLOR,
+        };
+
+        commands
+            .spawn_bundle(NodeBundle {
+                style: Style {
+                    margin: Rect::all(Val::Auto),
+                    flex_direction: FlexDirection::ColumnReverse,
+                    align_items: AlignItems::Center,
+                    ..Default::default()
+                },
+                color: Color::CRIMSON.into(),
+                ..Default::default()
+            })
+            .insert(OnSoundSettingsMenuScreen)
+            .with_children(|parent| {
+                parent
+                    .spawn_bundle(NodeBundle {
+                        style: Style {
+                            align_items: AlignItems::Center,
+                            ..Default::default()
+                        },
+                        color: Color::CRIMSON.into(),
+                        ..Default::default()
+                    })
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section(
+                                "Volume",
+                                button_text_style.clone(),
+                                Default::default(),
+                            ),
+                            ..Default::default()
+                        });
+                        for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
+                            let mut entity = parent.spawn_bundle(ButtonBundle {
+                                style: Style {
+                                    size: Size::new(Val::Px(30.0), Val::Px(65.0)),
+                                    ..button_style.clone()
+                                },
+                                color: NORMAL_BUTTON.into(),
+                                ..Default::default()
+                            });
+                            entity.insert(Volume(volume_setting));
+                            if *volume == Volume(volume_setting) {
+                                entity.insert(SelectedOption);
+                            }
+                        }
+                    });
+                parent
+                    .spawn_bundle(ButtonBundle {
+                        style: button_style,
+                        color: NORMAL_BUTTON.into(),
+                        ..Default::default()
+                    })
+                    .insert(MenuButtonAction::BackToSettings)
+                    .with_children(|parent| {
+                        parent.spawn_bundle(TextBundle {
+                            text: Text::with_section("Back", button_text_style, Default::default()),
+                            ..Default::default()
+                        });
+                    });
+            });
+    }
+
+    fn menu_action(
+        interaction_query: Query<
+            (&Interaction, &MenuButtonAction),
+            (Changed<Interaction>, With<Button>),
+        >,
+        mut app_exit_events: EventWriter<AppExit>,
+        mut menu_state: ResMut<State<MenuState>>,
+        mut game_state: ResMut<State<GameState>>,
+    ) {
+        for (interaction, menu_button_action) in interaction_query.iter() {
+            if *interaction == Interaction::Clicked {
+                match menu_button_action {
+                    MenuButtonAction::Quit => app_exit_events.send(AppExit),
+                    MenuButtonAction::Play => {
+                        game_state.set(GameState::Game).unwrap();
+                        menu_state.set(MenuState::Disabled).unwrap()
+                    }
+                    MenuButtonAction::Settings => menu_state.set(MenuState::Settings).unwrap(),
+                    MenuButtonAction::SettingsDisplay => {
+                        menu_state.set(MenuState::SettingsDisplay).unwrap()
+                    }
+                    MenuButtonAction::SettingsSound => {
+                        menu_state.set(MenuState::SettingsSound).unwrap()
+                    }
+                    MenuButtonAction::BackToMainMenu => menu_state.set(MenuState::Main).unwrap(),
+                    MenuButtonAction::BackToSettings => {
+                        menu_state.set(MenuState::Settings).unwrap()
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Generic system that takes a component as a parameter, and will despawn all entities with that component
+fn despawn_screen<T: Component>(to_despawn: Query<Entity, With<T>>, mut commands: Commands) {
+    for entity in to_despawn.iter() {
+        commands.entity(entity).despawn_recursive();
+    }
+}