diff --git a/app/assets/images/tristan/face.png b/app/assets/images/tristan/face.png
new file mode 100644
index 00000000..8e1285b2
Binary files /dev/null and b/app/assets/images/tristan/face.png differ
diff --git a/app/assets/images/tristan/portrait.png b/app/assets/images/tristan/portrait.png
new file mode 100644
index 00000000..fc24d7d9
Binary files /dev/null and b/app/assets/images/tristan/portrait.png differ
diff --git a/app/views/content/show.html.erb b/app/views/content/show.html.erb
index 3e8a51e4..2dda0d28 100644
--- a/app/views/content/show.html.erb
+++ b/app/views/content/show.html.erb
@@ -19,6 +19,7 @@
         <%= render partial: 'content/tailwind_components/content_fields_display', locals: { content: @serialized_content } %>
       </div>
     </div>
+
     <!-- Activity feed -->
     <div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
       <div class="pl-6 lg:w-80 px-6 pt-6">
diff --git a/app/views/content/tailwind_components/_content_fields_display.html.erb b/app/views/content/tailwind_components/_content_fields_display.html.erb
index 1b1832ed..2e695eff 100644
--- a/app/views/content/tailwind_components/_content_fields_display.html.erb
+++ b/app/views/content/tailwind_components/_content_fields_display.html.erb
@@ -15,23 +15,27 @@
 
         <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
           <% category[:fields].each do |field| %>
-            <% next if field[:value].empty? %>
             <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 pt-4">
               <div class="pl-8">
                 <label for="<%= field[:name] %>" class="block text-sm font-medium text-gray-700">
                   <%= field[:label] %>
                 </label>
-                <div class="text-red-700 text-xs">(type: <%= field[:type] %>)</div>
               </div>
               <div class="mt-1 sm:mt-0 sm:col-span-2">
-                <%= field[:value] %>
-
-                <!-- field actions -->
-                <ul class="text-sm mt-2 space-x-8 text-notebook-blue hidden">
-                  <li class="inline-block"><%= link_to 'Edit', '#' %></li>
-                  <li class="inline-block"><%= link_to 'Revise', '#' %></li>
-                  <li class="inline-block"><%= link_to 'Change field type', '#' %></li>
-                </ul>
+                <%=
+                  case field[:type]
+                  when 'name'
+                    render partial: 'content/tailwind_components/fields/name', locals: { field: field }
+                  when 'text_area', 'textarea'
+                    render partial: 'content/tailwind_components/fields/text', locals: { field: field }
+                  when 'link'
+                    render partial: 'content/tailwind_components/fields/link', locals: { field: field }
+                  when 'universe'
+                    render partial: 'content/tailwind_components/fields/universe', locals: { field: field }
+                  when 'tags'
+                    render partial: 'content/tailwind_components/fields/tags', locals: { field: field }
+                  end
+                %>
               </div>
             </div>
           <% end %>
diff --git a/app/views/content/tailwind_components/_content_header.html.erb b/app/views/content/tailwind_components/_content_header.html.erb
index 8f905847..a8de3a9c 100644
--- a/app/views/content/tailwind_components/_content_header.html.erb
+++ b/app/views/content/tailwind_components/_content_header.html.erb
@@ -1,6 +1,6 @@
 <div class="flex items-center">
   <h1 class="flex-1 text-lg font-medium">
-    <span class="<%= Universe.text_color %>">
+    <span class="<%= content.class_text_color %>">
       <%= content.name %>
     </span>
     <small class="ml-2 text-gray-500">
@@ -10,6 +10,14 @@
       </span>
     </small>
   </h1>
+  <div class="mr-2">
+    <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-notebook-blue border border-notebook-blue rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+      <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+      </svg>
+      Edit mode
+    </button>
+  </div>
   <div data-controller="dropdown" class="relative">
     <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
       <!-- Heroicon name: solid/sort-descending -->
@@ -25,11 +33,12 @@
     <!-- Dropdown menu, show/hide based on menu state. -->
     <div data-dropdown-target="menu" class="origin-top-right z-10 absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu-button" tabindex="-1">
       <div class="py-1" role="none">
-        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-        <a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-0">Name</a>
-        <a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-1">Date modified</a>
-        <a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-2">Date created</a>
-      </div>
+      <% content.data[:categories].each do |category| %>
+        <%= link_to '#', class: "text-gray-700 block px-4 py-2 text-sm bg-white hover:bg-gray-100", id: category[:id], data: { action: "dropdown#toggle" } do %>
+          <i class="material-icons float-left <%= content.class_text_color %> mr-2"><%= category[:icon] %></i>
+          <%= category[:label] %>
+        <% end %>
+      <% end %>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/content/tailwind_components/_content_image_header.html.erb b/app/views/content/tailwind_components/_content_image_header.html.erb
index 70f32dbf..417e96c2 100644
--- a/app/views/content/tailwind_components/_content_image_header.html.erb
+++ b/app/views/content/tailwind_components/_content_image_header.html.erb
@@ -1,3 +1,3 @@
-<div class="flex bg-white border-gray-200 border-b">
-  image banner
+<div class="flex <%= content.class_color %> border-gray-200 border-b">
+  <span class="h-2"></span>
 </div>
\ No newline at end of file
diff --git a/app/views/content/tailwind_components/fields/_link.html.erb b/app/views/content/tailwind_components/fields/_link.html.erb
new file mode 100644
index 00000000..ff93d6ae
--- /dev/null
+++ b/app/views/content/tailwind_components/fields/_link.html.erb
@@ -0,0 +1,35 @@
+<% field[:value].each do |link_code| %>
+  <%
+    klass, id = link_code.split('-')
+  %>
+
+  <%#
+    In most cases, a user will be seeing their own content most of the time.
+    This allows us to primarily rely on @current_user_content but fall back
+    on js-load-page-name to fetch & load in post-page-load if the content isn't ours.
+  %>
+  <%
+    content = if user_signed_in?
+      @current_user_content.fetch(klass, []).detect do |page|
+        page.page_type === klass && page.id === id.to_i
+      end
+    else
+      nil
+    end
+  %>
+
+  <span
+    data-klass="<%= klass %>"
+    data-id="<%= id %>"
+    class="<%= 'js-load-page-name' if content.nil? %> inline-flex items-center px-2.5 py-0.5 rounded-md font-medium bg-gray-100 hover:bg-gray-50 text-gray-800"
+  >
+    <%= link_to send("#{klass.downcase}_path", id) do %>
+      <span class="<%= content_class_from_name(klass).text_color %>">
+        <i class="material-icons float-left mr-2">
+          <%= content_class_from_name(klass).icon %>
+        </i>
+      </span>
+      <%= content.try(:name) || "<em>Loading #{klass}</em>".html_safe %>
+    <% end %>
+  </span>
+<% end %>
\ No newline at end of file
diff --git a/app/views/content/tailwind_components/fields/_name.html.erb b/app/views/content/tailwind_components/fields/_name.html.erb
new file mode 100644
index 00000000..c11caeed
--- /dev/null
+++ b/app/views/content/tailwind_components/fields/_name.html.erb
@@ -0,0 +1,3 @@
+<h1>
+  <%= field[:value] %>
+</h1>
diff --git a/app/views/content/tailwind_components/fields/_tags.html.erb b/app/views/content/tailwind_components/fields/_tags.html.erb
new file mode 100644
index 00000000..f8744651
--- /dev/null
+++ b/app/views/content/tailwind_components/fields/_tags.html.erb
@@ -0,0 +1,11 @@
+<% field[:value].each do |tag| %>
+  <span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm bg-notebook-blue text-white">
+    <%= tag %>
+    <button type="button" class="flex-shrink-0 ml-2 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-100 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white">
+      <span class="sr-only">Remove tag: <%= tag %></span>
+      <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+        <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+      </svg>
+    </button>
+  </span>
+<% end %>
diff --git a/app/views/content/tailwind_components/fields/_text.html.erb b/app/views/content/tailwind_components/fields/_text.html.erb
new file mode 100644
index 00000000..c7f22883
--- /dev/null
+++ b/app/views/content/tailwind_components/fields/_text.html.erb
@@ -0,0 +1 @@
+<%= field[:value] %>
\ No newline at end of file
diff --git a/app/views/content/tailwind_components/fields/_universe.html.erb b/app/views/content/tailwind_components/fields/_universe.html.erb
new file mode 100644
index 00000000..a517ea03
--- /dev/null
+++ b/app/views/content/tailwind_components/fields/_universe.html.erb
@@ -0,0 +1,26 @@
+<%  klass, id = "Universe", field[:value] %>
+
+<%
+  content = if user_signed_in?
+    @current_user_content.fetch(klass, []).detect do |page|
+      page.page_type === klass && page.id === id.to_i
+    end
+  else
+    nil
+  end
+%>
+
+<span
+  data-klass="<%= klass %>"
+  data-id="<%= id %>"
+  class="<%= 'js-load-page-name' if content.nil? %> inline-flex items-center px-2.5 py-0.5 rounded-md font-medium bg-gray-100 hover:bg-gray-50 text-gray-800"
+>
+  <%= link_to send("#{klass.downcase}_path", id) do %>
+    <span class="<%= content_class_from_name(klass).text_color %>">
+      <i class="material-icons float-left mr-2">
+        <%= content_class_from_name(klass).icon %>
+      </i>
+    </span>
+    <%= content.try(:name) || "<em>Loading #{klass}</em>".html_safe %>
+  <% end %>
+</span>