diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb
index b82497e2..5e8ed4a6 100644
--- a/app/controllers/main_controller.rb
+++ b/app/controllers/main_controller.rb
@@ -42,7 +42,8 @@ class MainController < ApplicationController
     @starred_pages = content_list.select { |page| page['favorite'] == 1 }
     @other_pages   = content_list.select { |page| page['favorite'] == 0 }
 
-
+    @page_type_counts = Hash.new(0)
+    content_list.each { |page| @page_type_counts[page['page_type']] += 1 }
   end
 
   def infostack
diff --git a/app/views/main/table_of_contents.html.erb b/app/views/main/table_of_contents.html.erb
index b06a0995..21ab5da5 100644
--- a/app/views/main/table_of_contents.html.erb
+++ b/app/views/main/table_of_contents.html.erb
@@ -20,9 +20,8 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6">
         <nav class="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
           <div class="hidden md:flex md:space-x-10">
-            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Worldbuilding</a>
-
-            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Documents</a>
+            <a href="#" class="font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border px-4">Worldbuilding</a>
+            <a href="#" class="font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border px-4">Documents</a>
           </div>
         </nav>
       </div>
@@ -31,51 +30,65 @@
   </div>
 </div>
 
-<div class="bg-white border-t border-b border-gray-200">
-  <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
-    <div class="lg:grid lg:grid-cols-3 lg:gap-8">
-      <div>
-        <h2 class="text-3xl font-extrabold text-gray-900">Starred pages</h2>
-        <p class="mt-4 text-lg text-gray-500">
-          Star any page to keep it at the top of page lists.
-        </p>
-      </div>
-      <div class="mt-12 lg:mt-0 lg:col-span-2">
-        <dl class="space-y-12">
-          <%= @starred_pages.inspect %>
-          <div>
-            <dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
-            <dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
-          </div>
-
-          <div>
-            <dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
-            <dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
-          </div>
-
-          <div>
-            <dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
-            <dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
-          </div>
-
-          <div>
-            <dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
-            <dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
-          </div>
-        </dl>
+<% if @starred_pages.any? %>
+  <div class="bg-white border-t border-b border-gray-200">
+    <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
+      <div class="lg:grid lg:grid-cols-3 lg:gap-8">
+        <div>
+          <h2 class="text-3xl font-extrabold text-gray-900">Starred pages</h2>
+          <p class="mt-4 text-lg text-gray-500">
+            Star any page to keep it at the top of page lists.
+          </p>
+        </div>
+        <div class="mt-12 lg:mt-0 lg:col-span-2">
+          <dl>
+            <% @starred_pages.each do |page| %>
+              <%= link_to polymorphic_path(page['page_type'].downcase, id: page['id']), class: 'block px-4 py-3 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border' do %>
+                <dt class="text-lg leading-6 font-medium <%= content_class_from_name(page['page_type']).text_color %>">
+                  <i class="material-icons float-left mr-2"><%= content_class_from_name(page['page_type']).icon %></i>
+                  <%= page['name'] %>
+                </dt>
+                <!--
+                <dd class="mt-2 text-base text-gray-500">
+                  Description
+                </dd>
+                -->
+              <% end %>
+            <% end %>
+          </dl>
+        </div>
       </div>
     </div>
   </div>
-</div>
+<% end %>
 
 <div class="">
   <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
     <div class="lg:grid lg:grid-cols-3 lg:gap-8">
-      <div>
-        <h2 class="text-3xl font-extrabold text-gray-900">Other pages</h2>
-        <p class="mt-4 text-lg text-gray-500">
-          Everything else!
+      <div class="lg:pr-32">
+        <h2 class="text-3xl font-extrabold text-gray-900">All pages</h2>
+        <p class="mt-8 text-lg text-gray-500">
+          Filter by page type...
         </p>
+
+        <ul role="list" class="border border-gray-200 rounded-md divide-y divide-gray-200 mt-2 bg-white">
+          <% @page_type_counts.each do |page_type, count| %>
+            <%= link_to '#' do %>
+              <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm rounded-full hover:bg-notebook-blue hover:text-white group">
+                <div class="w-0 flex-1 flex items-center">
+                  <i class="material-icons float-left <%= content_class_from_name(page_type).text_color %> bg-white p-1 h-8 w-8 rounded-full"><%= content_class_from_name(page_type).icon %></i>
+                  <span class="ml-2 flex-1 w-0 truncate"><%= page_type.pluralize %></span>
+                </div>
+                <div class="ml-4 flex-shrink-0">
+                  <span class="bg-gray-100 rounded px-1 text-xs group-hover:bg-notebook-blue">
+                    <%= count %>
+                  </span>
+                </div>
+              </li>
+            <% end %>
+          <% end %>
+        </ul>
+
       </div>
       <div class="mt-12 lg:mt-0 lg:col-span-2">
         <dl>
@@ -98,22 +111,24 @@
   </div>
 </div>
 
-
-
-
 <div class="bg-white">
-  <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
-    <div class="text-center">
-      <% if @universe_scope %>
-        <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
-          <%= link_to @universe_scope.name, @universe_scope %>
-        </h2>
-      <% end %>
-      <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
-        Table of Contents
+  <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:py-32 lg:px-8 lg:flex lg:items-center">
+    <div class="lg:w-0 lg:flex-1">
+      <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Follow this universe</h2>
+      <p class="mt-3 max-w-3xl text-lg text-gray-500">
+        Stay connected and be notified as this world grows!
       </p>
-      <p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
-        All your pages and stuff (maybe make this a universe page, sharable?)
+    </div>
+    <div class="mt-8 lg:mt-0 lg:ml-8">
+      <form class="sm:flex">
+        <label for="email-address" class="sr-only">Email address</label>
+        <input id="email-address" name="email-address" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs rounded-md" placeholder="Enter your email">
+        <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
+          <button type="submit" class="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-notebook-blue hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Notify me</button>
+        </div>
+      </form>
+      <p class="mt-3 text-sm text-gray-500">
+        Your email address won't be shared with <%= @universe_scope.user.display_name %>.
       </p>
     </div>
   </div>