diff --git a/src/partials/thecockpit.html b/src/partials/thecockpit.html
index db08421..ce555e8 100644
--- a/src/partials/thecockpit.html
+++ b/src/partials/thecockpit.html
@@ -6,8 +6,15 @@
       In Myrtle Beach South Carolina, Richard and Isaac counted 100 Chrysler Pacificas in the span of a week.
     </djot>
   </x-section-head>
-  <div id="cockpit-canvas" style="height: 80vh;  margin: 8px; background-color: #232323;"></div>
+  <div onclick="showKeyboard" id="cockpit-canvas" style="height: 80vh;  margin: 8px; background-color: #232323;"></div>
 </x-tab.content>
+<script>
+  function showKeyboard() {
+    if ('virtualKeyboard' in navigator) {
+      navigator.virtualKeyboard.show();
+    }
+  }
+</script>
 <script type="module">
   const firaCodeFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Regular.woff2', import.meta.url)})`, {style: "normal", weight: "normal"});
   const firaCodeBoldFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Bold.woff2', import.meta.url)})`, {style: "normal", weight: "bold"});
diff --git a/thecockpit/src/app.rs b/thecockpit/src/app.rs
index 5aa6ca1..9a4ca53 100644
--- a/thecockpit/src/app.rs
+++ b/thecockpit/src/app.rs
@@ -109,25 +109,13 @@ impl App {
 
     pub fn draw_passcode(&mut self, frame: &mut Frame) {
         frame.render_widget(Block::new().bg(PASSWORD_BACKGROUND), frame.area());
-        let middle_vertical = Layout::new(
-            Direction::Vertical,
-            [
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-            ],
-        )
-        .split(frame.area())[1];
+        let middle_vertical = Layout::new(Direction::Vertical, [Constraint::Length(8)])
+            .flex(Flex::Center)
+            .split(frame.area())[0];
 
-        let middle = Layout::new(
-            Direction::Horizontal,
-            [
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-            ],
-        )
-        .split(middle_vertical)[1];
+        let middle = Layout::new(Direction::Horizontal, [Constraint::Length(28)])
+            .flex(Flex::Center)
+            .split(middle_vertical)[0];
 
         let layout = Layout::new(
             Direction::Vertical,