diff --git a/src/frontend/templates/characters/view_character.html.tera b/src/frontend/templates/characters/view_character.html.tera
index 3d64c55..03de3db 100644
--- a/src/frontend/templates/characters/view_character.html.tera
+++ b/src/frontend/templates/characters/view_character.html.tera
@@ -33,8 +33,9 @@
          margin: 0;
      }
 
-     .basics-entry input {
-         display: inline;
+     .basics-entry span {
+         width: 15em;
+         overflow: hidden;
          padding: 8px;
          border: none;
          background-color: lightgray;
@@ -164,65 +165,101 @@
      }
     </style>
 
-    <h1>Core Sheet</h1>
     <div>
-        <h1>Character {{name}}</h1>
-        <h3>User: {{username}}</h3>
-        <p>System: {{data_type}}</h3>
+        <div id="basics">
+            <h1>
+                <span id="characterName" name="characterName">{{name}}</span>
+            </h1>
+
+            <div class="links">
+                <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a> |
+                <a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
+            </div>
+
+            <h2>Basics</h2>
+            <div>System: {{data_type}}</div>
+
+            <div class="flex-container">
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="gender">Gender:</label>
+                        <span id="gender" name="gender">{{sheet.gender}}</span>
+                    </div>
+
+                    <div class="basics-entry">
+                        <label for="age">Age:</label>
+                        <span id="age" name="age">{{sheet.age}}</span>
+                    </div>
+                </div>
+
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="concept">Concept:</label>
+                        <span id="concept" name="concept">{{sheet.concept}}</span>
+                    </div>
+
+                    <div class="basics-entry">
+                        <label for="chronicle">Chronicle:</label>
+                        <span id="chronicle" name="chronicle">{{sheet.chronicle}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div id="attributes">
+            <h2>Attributes</h2>
+            <div class="flex-container">
+                <div class="attributes-section" id="mentalAttributes">
+                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
+                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
+                    {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
+                </div>
+
+                <div class="attributes-section" id="physicalAttributes">
+                    {{ macros::attribute(name="Strength", value=sheet.strength) }}
+                    {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
+                    {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
+                </div>
+
+                <div class="attributes-section" id="socicalAttributes">
+                    {{ macros::attribute(name="Presence", value=sheet.presence) }}
+                    {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
+                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                </div>
+            </div>
+        </div>
+
+        <div id="skills">
+            <h2>Skills</h2>
+            <div class="flex-container">
+                <div class="skills-section" id="mentalSkills">
+                    {% for skill_name, skill in sheet.mentalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="physicalSkills">
+                    {% for skill_name, skill in sheet.physicalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="socialSkills">
+                    {% for skill_name, skill in sheet.socialSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
+        <div id="merits">
+            <h2>Merits</h2>
+            <div id="merit-list">
+                {% for merit in sheet.merits %}
+                    {{ macros::merit(name=merit.name, value=merit.dots) }}
+                {% endfor %}
+            </div>
+        </div>
     </div>
-
-    <div>
-        <h1>Core Sheet</h1>
-        <div>
-            <h1>Name: <input type="text" value="{{name}}" /></h1>
-            <p>System: {{data_type}}</p>
-            <div id="attributes">
-                <div class="flex-container">
-                    <div class="attributes-section" id="mentalAttributes">
-                        {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
-                        {{ macros::attribute(name="Wits", value=sheet.wits) }}
-                        {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
-                    </div>
-
-                    <div class="attributes-section" id="physicalAttributes">
-                        {{ macros::attribute(name="Strength", value=sheet.strength) }}
-                        {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
-                        {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
-                    </div>
-
-                    <div class="attributes-section" id="socicalAttributes">
-                        {{ macros::attribute(name="Presence", value=sheet.presence) }}
-                        {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
-                        {{ macros::attribute(name="Composure", value=sheet.composure) }}
-                    </div>
-                </div>
-            </div>
-
-            <div id="skills">
-                <h2>Skills</h2>
-                <div class="flex-container">
-                    <div class="skills-section" id="mentalSkills">
-                        {% for skill_name, skill in sheet.mentalSkills %}
-                            {{ macros::skill(name=skill_name, value=skill.dots) }}
-                        {% endfor %}
-                    </div>
-
-                    <div class="skills-section" id="physicalSkills">
-                        {% for skill_name, skill in sheet.physicalSkills %}
-                            {{ macros::skill(name=skill_name, value=skill.dots) }}
-                        {% endfor %}
-                    </div>
-
-                    <div class="skills-section" id="socialSkills">
-                        {% for skill_name, skill in sheet.socialSkills %}
-                            {{ macros::skill(name=skill_name, value=skill.dots) }}
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div>
-            <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
-        </div>
 {% endblock content %}
diff --git a/src/frontend/templates/characters/view_character_macros.html.tera b/src/frontend/templates/characters/view_character_macros.html.tera
index 5101aee..1b1e8a3 100644
--- a/src/frontend/templates/characters/view_character_macros.html.tera
+++ b/src/frontend/templates/characters/view_character_macros.html.tera
@@ -11,3 +11,10 @@
         <span class="value" id="{{name}}">{{value}}</span>
     </div>
 {% endmacro skill %}
+
+{% macro merit(name, value) %}
+<div class="merit">
+    <span class="merit-name">{{name}}</span>
+    <span class="merit-dots">{{value}}</span> <span>Dots</span>
+</div>
+{% endmacro merit %}