diff --git a/src/frontend/templates/characters/edit_character.html.tera b/src/frontend/templates/characters/edit_character.html.tera
index 0a18bed..58125e6 100644
--- a/src/frontend/templates/characters/edit_character.html.tera
+++ b/src/frontend/templates/characters/edit_character.html.tera
@@ -7,6 +7,39 @@
          font-family: Liberation Sans, Arial;
      }
 
+     #basicsBox {
+         display: flex;
+         flex-flow: row wrap;
+     }
+
+     .basics-row {
+         display: block;
+     }
+
+     .basics-entry {
+         display: flex;
+         border: 1px solid gray;
+         margin-left: -1px;
+         margin-top: -1px;
+     }
+
+     .basics-entry label {
+         display: inline;
+         width: 5em;
+         text-align: right;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .basics-entry input {
+         display: inline;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
      #attributes {
          padding: 4px;
          border-collapse: collapse;
@@ -144,33 +177,42 @@
     <div>
         <div id="basicInfo">
             <h1>
-                <label for="characterName">Name:</label>
+                <label for="characterName">Name</label>
                 <input type="text" id="characterName" name="characterName" value="{{name}}" />
             </h1>
+
+            <h2>Basics</h2>
             <div>System: {{data_type}}</div>
 
-            <div>
-                <label for="gender">Gender:</label>
-                <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
-            </div>
+            <div id="basicsBox">
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="gender">Gender:</label>
+                        <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
+                    </div>
 
-            <div>
-                <label for="age">Age:</label>
-                <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
-            </div>
+                    <div class="basics-entry">
+                        <label for="age">Age:</label>
+                        <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
+                    </div>
+                </div>
 
-            <div>
-                <label for="concept">Concept:</label>
-                <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
-            </div>
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="concept">Concept:</label>
+                        <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
+                    </div>
 
-            <div>
-                <label for="chronicle">Chronicle:</label>
-                <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
+                    <div class="basics-entry">
+                        <label for="chronicle">Chronicle:</label>
+                        <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
+                    </div>
+                </div>
             </div>
         </div>
 
         <div id="attributes">
+            <h2>Attributes</h2>
             <div class="attributes-section" id="mentalAttributes">
                 {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
                 {{ macros::attribute(name="Wits", value=sheet.wits) }}
@@ -191,6 +233,7 @@
         </div>
 
         <div id="skills">
+            <h2>Skills</h2>
             <div class="skills-section" id="mentalSkills">
                 {% for skill_name, skill in sheet.mentalSkills %}
                     {{ macros::skill(name=skill_name, value=skill.dots) }}