diff --git a/index.html b/index.html
index aacb556..e410d2c 100644
--- a/index.html
+++ b/index.html
@@ -12,16 +12,19 @@
              --dark-bg: #111111;
              --dark-text: #eeeeee;
              --dark-box-border: #333333;
+             --dark-hl-box-border: #cccccc;
 
              /* Light Color Scheme */
              --light-bg: #eeeeee;
              --light-text: #111111;
              --light-box-border: #cccccc;
+             --light-hl-box-border: #333333;
 
              /* Defaults */
              --bg: var(--light-bg);
              --text: var(--light-text);
              --box-border: var(--light-box-border);
+             --hl-box-border: var(--light-hl-box-border);
          }
 
          #color-scheme {
@@ -32,6 +35,7 @@
              --bg: var(--dark-bg);
              --text: var(--dark-text);
              --box-border: var(--dark-box-border);
+             --hl-box-border: var(--dark-hl-box-border);
          }
 
          #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -55,12 +59,14 @@
                  --bg: var(--dark-bg);
                  --text: var(--dark-text);
                  --box-border: var(--dark-box-border);
+                 --hl-box-border: var(--dark-hl-box-border);
              }
 
              #color-scheme:checked ~ .color-scheme-wrapper {
                  --bg: var(--light-bg);
                  --text: var(--light-text);
                  --box-border: var(--light-box-border);
+                 --hl-box-border: var(--light-hl-box-border);
              }
 
              #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -147,6 +153,33 @@
              padding: 1em;
          }
 
+         .box h2 {
+             display: initial;
+             position: relative;
+             top: -1.8em;
+             padding: 0 .5em;
+             color: var(--hl-box-border);
+             background-color: var(--bg);
+             font-size: 100%;
+             font-weight: normal;
+         }
+
+         .box h2::after {
+             display: block;
+             content: "";
+             margin-bottom: -1.5em;
+         }
+
+         input {
+             border: 1px solid var(--hl-box-border);
+             background-color: var(--bg);
+             color: var(--text);
+         }
+
+         input[type=number] {
+             width: 4em;
+         }
+
          /* No character loaded box (AKA the welcome screen) */
 
          #cont-no-loaded {
@@ -170,6 +203,15 @@
             <div id="cont-no-loaded" class="box">
                 No character is loaded.
             </div>
+            <div id="cont-character-sheet">
+                <div class="box">
+                    <h2>Character data</h2>
+                    <strong>Campaign</strong> <input type="text" id="inp-campaign-name">
+                    <strong>Name</strong> <input type="text" id="inp-character-name">
+                    <strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1">
+                    <strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0">
+                </div>
+            </div>
         </div>
         <script>
          const checkLocalStorage = () => {