diff --git a/assets/fonts/Miracode.ttf b/assets/fonts/Miracode.ttf
new file mode 100644
index 0000000..c366203
Binary files /dev/null and b/assets/fonts/Miracode.ttf differ
diff --git a/src/main.rs b/src/main.rs
index 58e63d5..e1101c8 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -7,7 +7,7 @@ use goal::{check_goal, GoalBundle};
 use ground_detection::GroundDetectionPlugin;
 use level_structure::{WallBundle, WallPlugin};
 use logging::log_positions;
-use menu::spawn_box;
+use menu::{spawn_box, MenuPlugin};
 use player::PlayerPlugin;
 use state::GameState;
 
@@ -43,6 +43,7 @@ fn main() {
             scaled_shape_subdivision: 10,
             force_update_from_transform_changes: false,
         })
+        .add_plugins(MenuPlugin)
         .add_plugins(PlayerPlugin)
         .add_plugins(WallPlugin)
         .add_plugins(GroundDetectionPlugin)
@@ -50,7 +51,7 @@ fn main() {
         .register_ldtk_entity::<GoalBundle>("Goal")
         .register_ldtk_int_cell::<WallBundle>(1)
         .add_systems(Startup, setup)
-        .add_systems(Update, spawn_box.run_if(in_state(GameState::MainMenu)))
+        // .add_systems(Update, spawn_box.run_if(in_state(GameState::MainMenu)))
         .add_plugins(CameraPlugin)
         .add_plugins(ShockingAnimationPlugin)
         .add_systems(Update, (translate_grid_coords_entities, check_goal))
@@ -58,10 +59,7 @@ fn main() {
         .run();
 }
 
-fn setup(
-    mut commands: Commands,
-    asset_server: Res<AssetServer>,
-) {
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(LdtkWorldBundle {
         ldtk_handle: asset_server.load("shocked-miguel.ldtk"),
         ..Default::default()
diff --git a/src/menu.rs b/src/menu.rs
index 45ad637..0e29f48 100644
--- a/src/menu.rs
+++ b/src/menu.rs
@@ -1,9 +1,12 @@
+use bevy::color::palettes::css::RED;
 use bevy::prelude::*;
 use bevy::{
     color::Color,
     ecs::system::Commands,
     ui::{node_bundles::NodeBundle, JustifyContent, Style, UiRect, Val},
 };
+
+use crate::state::GameState;
 pub(crate) fn spawn_box(mut commands: Commands) {
     let container = NodeBundle {
         style: Style {
@@ -30,6 +33,50 @@ pub(crate) fn spawn_box(mut commands: Commands) {
 
     commands.entity(parent).push_children(&[child]);
 }
+fn spawn_button(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let button_bundle = ButtonBundle {
+        style: Style {
+            width: Val::Px(150.0),
+            height: Val::Px(65.0),
+            border: UiRect::all(Val::Px(5.0)),
+            // horizontally center child text
+            justify_content: JustifyContent::Center,
+            // vertically center child text
+            align_items: AlignItems::Center,
+            ..default()
+        },
+        border_color: BorderColor(Color::BLACK),
+        border_radius: BorderRadius::MAX,
+        background_color: NORMAL_BUTTON.into(),
+        ..default()
+    };
+    let text = TextBundle::from_section(
+        "Button",
+        TextStyle {
+            font: asset_server.load("fonts/Miracode.ttf"),
+            font_size: 40.0,
+            color: Color::srgb(0.9, 0.9, 0.9),
+        },
+    );
+    commands
+        .spawn(NodeBundle {
+            style:
+            Style {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                ..default()
+            },
+            ..default()
+        })
+        .with_children(|parent| {
+            parent.spawn(button_bundle).with_children(|parent| {
+                parent.spawn(text);
+            });
+        });
+}
+
 pub(crate) fn spawn_text(mut commands: Commands) {
     let text = "Hello world!";
 
@@ -52,3 +99,56 @@ pub(crate) fn spawn_text(mut commands: Commands) {
         }),
     );
 }
+const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
+const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
+const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
+
+fn button_system(
+    mut interaction_query: Query<
+        (
+            &Interaction,
+            &mut BackgroundColor,
+            &mut BorderColor,
+            &Children,
+        ),
+        (Changed<Interaction>, With<Button>),
+    >,
+    button_query: Query<(Entity, &Node)>,
+    mut text_query: Query<&mut Text>,
+    mut next_state: ResMut<NextState<GameState>>,
+    mut commands: Commands,
+) {
+    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
+        let mut text = text_query.get_mut(children[0]).unwrap();
+        match *interaction {
+            Interaction::Pressed => {
+                text.sections[0].value = "Starting".to_string();
+                *color = PRESSED_BUTTON.into();
+                border_color.0 = RED.into();
+                next_state.set(GameState::InGame);
+                for (entity_id, _button) in button_query.iter() {
+                commands.entity(entity_id).despawn();
+                }
+            }
+            Interaction::Hovered => {
+                text.sections[0].value = "Hover".to_string();
+                *color = HOVERED_BUTTON.into();
+                border_color.0 = Color::WHITE;
+            }
+            Interaction::None => {
+                text.sections[0].value = "Button".to_string();
+                *color = NORMAL_BUTTON.into();
+                border_color.0 = Color::BLACK;
+            }
+        }
+    }
+}
+
+pub struct MenuPlugin;
+
+impl Plugin for MenuPlugin {
+    fn build(&self, app: &mut App) {
+        app.add_systems(Update, button_system)
+            .add_systems(Startup, spawn_button);
+    }
+}