diff --git a/crates/border-wars/assets/button_menu_icon.png b/crates/border-wars/assets/button_menu_icon.png
new file mode 100644
index 0000000..9679078
Binary files /dev/null and b/crates/border-wars/assets/button_menu_icon.png differ
diff --git a/crates/border-wars/assets/button_settings_icon.png b/crates/border-wars/assets/button_settings_icon.png
new file mode 100644
index 0000000..51e67b9
Binary files /dev/null and b/crates/border-wars/assets/button_settings_icon.png differ
diff --git a/crates/border-wars/src/lib.rs b/crates/border-wars/src/lib.rs
index ad44050..79c8ece 100644
--- a/crates/border-wars/src/lib.rs
+++ b/crates/border-wars/src/lib.rs
@@ -5,7 +5,7 @@ use bevy::prelude::*;
 pub mod scenes;
 
 /// The current scene of the game.
-#[derive(Debug, Clone, Copy, Default, Eq, PartialEq, Hash, States)]
+#[derive(Debug, Clone, Copy, Default, Eq, PartialEq, Hash, States, Component)]
 pub enum CurrentScene {
     /// When we are in the main menu.
     #[default]
@@ -16,10 +16,13 @@ pub enum CurrentScene {
 
     /// When we play this wonderful game.
     Game,
+
+    /// When we are in the settings menu.
+    Setting,
 }
 
+/// Calculates the ui_scale.0 depending on the size of the main node
 pub fn change_scaling(mut ui_scale: ResMut<UiScale>, window: Query<&Window>) {
-    // Calculates the ui_scale depending on the size of the main node
     let window = window.single();
     let (a, b) = (
         window.resolution.width() / 1280.,
diff --git a/crates/border-wars/src/main.rs b/crates/border-wars/src/main.rs
index ef67c5e..69d6a9a 100644
--- a/crates/border-wars/src/main.rs
+++ b/crates/border-wars/src/main.rs
@@ -1,10 +1,14 @@
 //! The main entry point of the game.
 
-use bevy::prelude::*;
+use bevy::{prelude::*, text::TextSettings};
 use border_wars::scenes::ScenesPlugin;
 
 fn main() {
     App::new()
+        .insert_resource(TextSettings {
+            allow_dynamic_font_size: true,
+            ..default()
+        })
         .add_plugins(DefaultPlugins)
         .add_plugins(ScenesPlugin)
         .run();
diff --git a/crates/border-wars/src/scenes/menu.rs b/crates/border-wars/src/scenes/menu.rs
index c8b2dd6..da3516f 100644
--- a/crates/border-wars/src/scenes/menu.rs
+++ b/crates/border-wars/src/scenes/menu.rs
@@ -11,11 +11,19 @@ impl Plugin for MenuPlugin {
     fn build(&self, app: &mut App) {
         app.add_systems(Startup, menu_ui.run_if(in_state(CurrentScene::Menu)));
         app.add_systems(Update, change_scaling);
+        app.add_systems(Update, handle_button);
     }
 }
 
+/// TODO
+#[derive(Component, Clone)]
+struct HoveredTexture {
+    texture: Handle<Image>,
+    hovered_texture: Handle<Image>,
+}
+
 /// Display the UI of the menu to host a game or join one.
-fn menu_ui(mut commands: Commands) {
+fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
 
     commands
@@ -28,115 +36,106 @@ fn menu_ui(mut commands: Commands) {
                 ..default()
             },
             z_index: ZIndex::Local(0),
+            background_color: Color::GREEN.into(),
             ..default()
         })
-        .with_children(|main_node| {
-            main_node.spawn(NodeBundle {
-                style: Style {
-                    margin: UiRect {
-                        left: (Val::Auto),
-                        right: (Val::Auto),
-                        top: (Val::Px(25.)),
-                        bottom: (Val::Px(25.)),
-                    },
-                    width: Val::Px(650.),
-                    height: Val::Px(300.),
-                    ..default()
-                },
-                background_color: BackgroundColor(Color::RED),
-                ..default()
-            });
+        .with_children(|node| main_node(node));
 
-            main_node
-                .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
-                        margin: UiRect {
-                            left: (Val::Auto),
-                            right: (Val::Auto),
-                            top: (Val::Auto),
-                            bottom: (Val::Px(25.)),
-                        },
-                        width: Val::Px(552.5),
-                        height: Val::Percent(70.),
-                        ..default()
-                    },
-                    ..default()
-                })
-                .with_children(|container| {
-                    container
-                        .spawn(NodeBundle {
-                            style: default_style(),
-                            ..default()
-                        })
-                        .with_children(|host| {
-                            host.spawn(NodeBundle {
-                                style: default_style(),
-                                background_color: BackgroundColor(Color::YELLOW),
-                                ..default()
-                            });
-                            host.spawn(NodeBundle {
-                                style: default_style(),
-                                background_color: BackgroundColor(Color::YELLOW),
-                                ..default()
-                            });
-                        });
-
-                    container
-                        .spawn(NodeBundle {
-                            style: default_style(),
-                            ..default()
-                        })
-                        .with_children(|join| {
-                            join.spawn(NodeBundle {
-                                style: default_style(),
-                                background_color: BackgroundColor(Color::YELLOW),
-                                ..default()
-                            });
-                            join.spawn(NodeBundle {
-                                style: default_style(),
-                                background_color: BackgroundColor(Color::YELLOW),
-                                ..default()
-                            });
-                        });
-                });
-        });
-
-    commands.spawn(NodeBundle {
-        style: Style {
-            width: Val::Px(75.),
-            aspect_ratio: Some(1.),
-            margin: UiRect {
-                left: Val::Px(25.),
-                right: Val::Auto,
-                top: Val::Px(25.),
-                bottom: Val::Auto,
-            },
-            ..default()
+    create_side_button(
+        UiRect {
+            left: Val::Px(25.),
+            right: Val::Auto,
+            top: Val::Px(25.),
+            bottom: Val::Auto,
         },
-        z_index: ZIndex::Local(1),
-        background_color: BackgroundColor(Color::BLUE),
-        ..default()
-    });
-
-    commands.spawn(NodeBundle {
-        style: Style {
-            width: Val::Px(75.),
-            aspect_ratio: Some(1.),
-            margin: UiRect {
-                left: Val::Auto,
-                right: Val::Px(25.),
-                top: Val::Px(25.),
-                bottom: Val::Auto,
-            },
-            ..default()
+        CurrentScene::Lobby,
+        &mut commands,
+        HoveredTexture {
+            texture: asset_server.load("button_settings_icon.png"),
+            hovered_texture: asset_server.load("button_menu_icon.png"),
         },
-        z_index: ZIndex::Local(1),
-        background_color: BackgroundColor(Color::BLUE),
-        ..default()
-    });
+    );
+
+    create_side_button(
+        UiRect {
+            left: Val::Auto,
+            right: Val::Px(25.),
+            top: Val::Px(25.),
+            bottom: Val::Auto,
+        },
+        CurrentScene::Lobby,
+        &mut commands,
+        HoveredTexture {
+            texture: asset_server.load("button_menu_icon.png"),
+            hovered_texture: asset_server.load("button_settings_icon.png"),
+        },
+    );
 }
 
+/// TODO
+fn create_side_button(
+    margin: UiRect,
+    target_scene: CurrentScene,
+    commands: &mut Commands,
+    textures: HoveredTexture,
+) {
+    commands
+        .spawn(ButtonBundle {
+            style: Style {
+                width: Val::Px(75.),
+                aspect_ratio: Some(1.),
+                margin,
+                ..default()
+            },
+            z_index: ZIndex::Local(1),
+            background_color: Color::NONE.into(),
+            ..default()
+        })
+        .insert((target_scene, textures.clone()))
+        .with_children(|button| {
+            button.spawn(ImageBundle {
+                style: Style {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    ..default()
+                },
+                image: textures.texture.into(),
+                ..default()
+            });
+        });
+}
+
+fn handle_button(
+    interaction_query: Query<
+        (&Interaction, &CurrentScene, &mut Children, &HoveredTexture),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut image_query: Query<&mut UiImage>,
+    mut next_scene: ResMut<NextState<CurrentScene>>,
+) {
+    for (interaction, target_scene, children, textures) in interaction_query.iter() {
+        match *interaction {
+            Interaction::Pressed => {
+                next_scene.set(*target_scene);
+            }
+            Interaction::Hovered => {
+                hover_system(children, &mut image_query, textures.texture.clone())
+            }
+            Interaction::None => hover_system(children, &mut image_query, textures.hovered_texture.clone()),
+        }
+    }
+}
+
+fn hover_system(
+    children: &Children,
+    image_query: &mut Query<&mut UiImage>,
+    texture: Handle<Image>,
+) {
+    let mut image = image_query.get_mut(children[0]).unwrap();
+    image.texture = texture
+}
+
+/// TODO
 fn default_style() -> Style {
     Style {
         flex_direction: FlexDirection::Column,
@@ -146,3 +145,78 @@ fn default_style() -> Style {
         ..default()
     }
 }
+
+/// TODO
+fn main_node(main_node: &mut ChildBuilder<'_, '_, '_>) {
+    main_node.spawn(NodeBundle {
+        style: Style {
+            margin: UiRect {
+                left: (Val::Auto),
+                right: (Val::Auto),
+                top: (Val::Px(25.)),
+                bottom: (Val::Px(25.)),
+            },
+            width: Val::Px(650.),
+            height: Val::Px(300.),
+            ..default()
+        },
+        background_color: BackgroundColor(Color::RED),
+        ..default()
+    });
+
+    main_node
+        .spawn(NodeBundle {
+            style: Style {
+                flex_direction: FlexDirection::Column,
+                margin: UiRect {
+                    left: (Val::Auto),
+                    right: (Val::Auto),
+                    top: (Val::Auto),
+                    bottom: (Val::Px(25.)),
+                },
+                width: Val::Px(552.5),
+                height: Val::Percent(70.),
+                ..default()
+            },
+            ..default()
+        })
+        .with_children(|container| {
+            container
+                .spawn(NodeBundle {
+                    style: default_style(),
+                    background_color: Color::YELLOW_GREEN.into(),
+                    ..default()
+                })
+                .with_children(|host| {
+                    host.spawn(NodeBundle {
+                        style: default_style(),
+                        background_color: BackgroundColor(Color::YELLOW),
+                        ..default()
+                    });
+                    host.spawn(NodeBundle {
+                        style: default_style(),
+                        background_color: BackgroundColor(Color::YELLOW),
+                        ..default()
+                    });
+                });
+
+            container
+                .spawn(NodeBundle {
+                    style: default_style(),
+                    background_color: Color::YELLOW_GREEN.into(),
+                    ..default()
+                })
+                .with_children(|join| {
+                    join.spawn(NodeBundle {
+                        style: default_style(),
+                        background_color: BackgroundColor(Color::YELLOW),
+                        ..default()
+                    });
+                    join.spawn(NodeBundle {
+                        style: default_style(),
+                        background_color: BackgroundColor(Color::YELLOW),
+                        ..default()
+                    });
+                });
+        });
+}