diff --git a/main.css b/main.css
index 0f7af51..8946ac0 100644
--- a/main.css
+++ b/main.css
@@ -8,12 +8,16 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 10px 5px;
+  margin: 10px;
+}
+
+.header.full {
+  margin: 15px 50px 5px;
 }
 
 .game-container {
   max-width: 500px;
-  min-height: 100vh;
+  min-height: calc(100vh - 80px);
   margin: 0 auto;
   position: relative;
   display: flex;
@@ -21,6 +25,10 @@ body {
   justify-content: space-between;
 }
 
+.game-container.full {
+  height: 100vh;
+}
+
 canvas {
   width: 100%;
 }
diff --git a/src/game.rs b/src/game.rs
index 965882a..e3e3fa9 100644
--- a/src/game.rs
+++ b/src/game.rs
@@ -5,10 +5,12 @@ use gloo_timers::callback::Interval;
 use rand::seq::SliceRandom;
 use rand::Rng;
 use web_sys::wasm_bindgen::JsValue;
-use web_sys::{CanvasRenderingContext2d, Event, HtmlCanvasElement, HtmlImageElement, PointerEvent};
+use web_sys::{
+    window, CanvasRenderingContext2d, Event, HtmlCanvasElement, HtmlImageElement, PointerEvent,
+};
 use yew::{
-    function_component, html, use_effect_with, use_mut_ref, use_node_ref, use_state, Callback,
-    Html, Properties, TargetCast,
+    classes, function_component, html, use_effect_with, use_memo, use_mut_ref, use_node_ref,
+    use_state, Callback, Html, Properties, TargetCast,
 };
 
 use crate::settings::Settings;
@@ -407,6 +409,15 @@ pub fn game(props: &Props) -> Html {
     let mw = use_state(|| props.mw);
     let mh = use_state(|| props.mh);
 
+    let is_full = use_memo(*is_moving, |_| {
+        window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .fullscreen_element()
+            .is_some()
+    });
+
     let v_onchange = {
         let v = v.clone();
         Callback::from(move |new_v| {
@@ -554,8 +565,8 @@ pub fn game(props: &Props) -> Html {
     }
 
     html! {
-        <div class="game-container">
-            <div class="header">
+        <div class={classes!("game-container", is_full.then_some("full"))}>
+            <div class={classes!("header", is_full.then_some("full"))}>
                 <div>
                     <img id="ballImage" src="static/ball.png" onload={img_onload} />
                     <span id="nBall">{ *n_balls_to_show }</span>
diff --git a/src/main.rs b/src/main.rs
index b589021..a582e19 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -16,7 +16,7 @@ fn app() -> Html {
             .as_f64()
             .unwrap()
             .min(500.0);
-        let hsize = window().unwrap().inner_height().unwrap().as_f64().unwrap() - 60.0;
+        let hsize = window().unwrap().inner_height().unwrap().as_f64().unwrap() - 55.0;
 
         (mw as f64 * hsize / wsize).floor() as usize
     });
diff --git a/src/settings.rs b/src/settings.rs
index 3254509..b0c8560 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -17,6 +17,7 @@ pub fn settings(props: &Props) -> Html {
     let mh = use_state(|| props.mh);
     let v = use_state(|| props.v);
     let show_setting = use_state(|| false);
+
     let v_oninput = {
         let v = v.clone();
         props.v_onchange.reform(move |event: InputEvent| {