diff --git a/bookwyrm/models/status.py b/bookwyrm/models/status.py
index 8ab3f0eb9..eb79e43d2 100644
--- a/bookwyrm/models/status.py
+++ b/bookwyrm/models/status.py
@@ -91,6 +91,11 @@ class Status(OrderedCollectionPageMixin, BookWyrmModel):
             to write this so it's just a property '''
         return cls.objects.filter(reply_parent=status).select_subclasses()
 
+    @property
+    def status_type(self):
+        ''' expose the type of status for the ui using activity type '''
+        return self.activity_serializer.__name__
+
     def to_replies(self, **kwargs):
         ''' helper function for loading AP serialized replies to a status '''
         return self.to_ordered_collection(
diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index 98b560d95..65c5f6f26 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -38,3 +38,18 @@ input.toggle-control {
 input.toggle-control:checked ~ .toggle-content {
     display: block;
 }
+
+/* --- STARS --- */
+.rate-stars button.icon {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: inline;
+}
+.rate-stars:hover .icon:before {
+    content: '\e9d9';
+}
+.rate-stars form:hover ~ form .icon:before{
+    content: '\e9d7';
+}
diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index 96731ffe2..1cd96cbe3 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -2,39 +2,34 @@
 {% load fr_display %}
 {% block content %}
 
-{% include 'snippets/covers_shelf.html' with shelves=shelves user=request.user %}
+<section class="section" id="feed">
+    <div class="container">
+        {% for activity in activities %}
+        <div class="card">
+            {% include 'snippets/status.html' with status=activity %}
+        </div>
+        {% endfor %}
 
+        <div class="content-container pagination row">
+            {% if prev %}
+            <p>
+                <a href="{{ prev }}">
+                    <span class="icon icon-arrow-left"></span>
+                    Previous
+                </a>
+            </p>
+            {% endif %}
 
-<div id="feed">
-    <div class="content-container tabs">
-    {% include 'snippets/tabs.html' with tabs=feed_tabs active_tab=active_tab %}
+            {% if next %}
+            <p class="next">
+                <a href="{{ next }}">
+                    Next
+                    <span class="icon icon-arrow-right"></span>
+                </a>
+            </p>
+            {% endif %}
+        </div>
     </div>
-
-    {% for activity in activities %}
-    <div class="content-container">
-        {% include 'snippets/status.html' with status=activity %}
-    </div>
-    {% endfor %}
-
-    <div class="content-container pagination row">
-        {% if prev %}
-        <p>
-            <a href="{{ prev }}">
-                <span class="icon icon-arrow-left"></span>
-                Previous
-            </a>
-        </p>
-        {% endif %}
-
-        {% if next %}
-        <p class="next">
-            <a href="{{ next }}">
-                Next
-                <span class="icon icon-arrow-right"></span>
-            </a>
-        </p>
-        {% endif %}
-    </div>
-</div>
+</section>
 
 {% endblock %}
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 47deca6c5..9b3a068a5 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -101,7 +101,7 @@
 </nav>
 
 
-<div id="main">
+<div>
     {% block content %}
     {% endblock %}
 </div>
diff --git a/bookwyrm/templates/snippets/avatar.html b/bookwyrm/templates/snippets/avatar.html
index 22cc3fc78..d696e77db 100644
--- a/bookwyrm/templates/snippets/avatar.html
+++ b/bookwyrm/templates/snippets/avatar.html
@@ -1,2 +1,2 @@
-<img class="user-pic{% if large %} large{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
+<img class="image {% if large %}is-96x96{% else %}is-32x32{% endif %}" src="{% if user.avatar %}/images/{{ user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
 
diff --git a/bookwyrm/templates/snippets/covers_shelf.html b/bookwyrm/templates/snippets/covers_shelf.html
index 0907ed0f6..c0b1d6509 100644
--- a/bookwyrm/templates/snippets/covers_shelf.html
+++ b/bookwyrm/templates/snippets/covers_shelf.html
@@ -26,8 +26,8 @@
 
 {% for shelf in shelves %}
     {% for book in shelf.books %}
-<div class="compose-popout">
-    <input name="book-popout" type="radio" id="book-{{ book.id }}-radio">
+<div class="compose-popout toggle-content hidden">
+    <input class="toggle-control" name="book-popout" type="radio" id="book-{{ book.id }}-radio">
     <div class="compose compose-suggestion" id="compose-book-{{ book.id }}">
         <label class="close icon icon-close" for="book-{{ book.id }}-radio-close" onclick="hide_element(this)">
             <span class="hidden-text">Close</span>
diff --git a/bookwyrm/templates/snippets/interaction.html b/bookwyrm/templates/snippets/interaction.html
index 24ec4840f..ca546ccfe 100644
--- a/bookwyrm/templates/snippets/interaction.html
+++ b/bookwyrm/templates/snippets/interaction.html
@@ -1,5 +1,5 @@
 {% load fr_display %}
-<div class="interaction">
+<div class="nav level">
     {% if request.user.is_authenticated %}
     <form name="reply" action="/reply" method="post" onsubmit="return reply(event)">
         {% csrf_token %}
diff --git a/bookwyrm/templates/snippets/rate_action.html b/bookwyrm/templates/snippets/rate_action.html
index 50c44e832..eb0b87d82 100644
--- a/bookwyrm/templates/snippets/rate_action.html
+++ b/bookwyrm/templates/snippets/rate_action.html
@@ -1,6 +1,6 @@
 {% load fr_display %}
 <span class="hidden-text">Leave a rating</span>
-<div class="stars rate-stars">
+<div class="field is-grouped stars rate-stars">
     {% for i in '12345'|make_list %}
     <form name="rate" action="/rate/" method="POST" onsubmit="return rate_stars(event)">
         {% csrf_token %}
diff --git a/bookwyrm/templates/snippets/rate_form.html b/bookwyrm/templates/snippets/rate_form.html
index eb83e8f80..a3ab3499f 100644
--- a/bookwyrm/templates/snippets/rate_form.html
+++ b/bookwyrm/templates/snippets/rate_form.html
@@ -1,6 +1,6 @@
 {% load fr_display %}
 <span class="hidden-text">Rating</span>
-<div class="stars rate-stars">
+<div class="field is-grouped stars rate-stars">
     <input type="radio" name="rating" value="" checked>
     {% for i in '12345'|make_list %}
         <input id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index 0762576f3..783a039c5 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -1,31 +1,32 @@
 {% load fr_display %}
 {% if request.user.is_authenticated %}
 
-<div class="pulldown-button">
-<form name="shelve" action="/shelve/" method="post">
-    {% csrf_token %}
-    <input type="hidden" name="book" value="{{ book.id }}">
-    <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}">
-    <button type="submit" style="">{% shelve_button_text book %}</button>
-</form>
-{% if not hide_pulldown %}
-<div class="pulldown-container">
-    <button class="pulldown-toggle">
+<div class="dropdown is-hoverable">
+    <form name="shelve" action="/shelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ book.id }}">
+        <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}">
+        <button class="button" type="submit" style="">{% shelve_button_text book %}</button>
+    </form>
+    <div class="button dropdown-trigger" >
         <span class="icon icon-arrow-down"><span class="hidden-text">More shelves</span></span>
-    </button>
-    <ul class="pulldown">
-        <form name="shelve" action="/shelve/" method="post">
-            {% csrf_token %}
-            <input type="hidden" name="book" value="{{ book.id }}">
-            {% for shelf in request.user.shelf_set.all %}
-            <li>
-            <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
-            </li>
-            {% endfor %}
-        </form>
-    </ul>
-</div>
-{% endif %}
+    </div>
+
+    {% if not hide_pulldown %}
+    <div class="dropdown-menu">
+        <ul class="dropdown-content">
+            <form name="shelve" action="/shelve/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="book" value="{{ book.id }}">
+                {% for shelf in request.user.shelf_set.all %}
+                <li>
+                <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
+                </li>
+                {% endfor %}
+            </form>
+        </ul>
+    </div>
+    {% endif %}
 </div>
 
 {% endif %}
diff --git a/bookwyrm/templates/snippets/status.html b/bookwyrm/templates/snippets/status.html
index 2566bac58..3f7c7c59f 100644
--- a/bookwyrm/templates/snippets/status.html
+++ b/bookwyrm/templates/snippets/status.html
@@ -1,8 +1,7 @@
 {% load fr_display %}
 
-<div class="post {{ status.status_type | lower }} depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}">
-
-    <h2>
+<div class="post{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
+    <h2 class="level">
     {% if status.boosted_status %}
         {% include 'snippets/status_header.html' with status=status.boosted_status %}
         <small class="subhead">{% include 'snippets/status_header.html' with status=status %}</small>
diff --git a/bookwyrm/templates/snippets/status_content.html b/bookwyrm/templates/snippets/status_content.html
index 542d76902..2d9dfa5ab 100644
--- a/bookwyrm/templates/snippets/status_content.html
+++ b/bookwyrm/templates/snippets/status_content.html
@@ -23,16 +23,16 @@
     </div>
 {% endif %}
 
-<div class="row">
+<div class="media">
     {% if not hide_book and status.book %}
-    <div class="cover-container">
+    <div class="media-left">
         {% include 'snippets/book_cover.html' with book=status.book %}
         {% include 'snippets/rate_action.html' with book=status.book user=request.user %}
         {% include 'snippets/shelve_button.html' with book=status.book %}
     </div>
     {% endif %}
 
-    <div>
+    <div class="media-content">
         {% if status.status_type == 'Review' %}
         <h3>
             {% if status.name %}{{ status.name }}<br>{% endif %}
diff --git a/bookwyrm/templates/snippets/status_header.html b/bookwyrm/templates/snippets/status_header.html
index 3a95e2955..5043be435 100644
--- a/bookwyrm/templates/snippets/status_header.html
+++ b/bookwyrm/templates/snippets/status_header.html
@@ -1,25 +1,31 @@
 {% load humanize %}
 {% load fr_display %}
-{% include 'snippets/avatar.html' with user=status.user %}
-{% include 'snippets/username.html' with user=status.user %}
+<div class="level-left">
+    <div>
+        {% include 'snippets/avatar.html' with user=status.user %}
 
-{% if status.status_type == 'Update' %}
-    {{ status.content | safe }}
-{% elif status.status_type == 'Review' and not status.name and not status.content%}
-    rated <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Review' %}
-    reviewed <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Comment' %}
-    commented on <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Quotation' %}
-    quoted <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-{% elif status.status_type == 'Boost' %}
-    boosted
-{% elif status.reply_parent %}
-    {% with parent_status=status|parent %}
-    replied to {% include 'snippets/username.html' with user=parent_status.user possessive=True %} <a href="{{parent_status.remote_id }}">{{ parent_status.status_type | lower }}</a>
-    {% endwith %}
-{% endif %}
-<span class="time-ago">
-    <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
-</span>
+        {% include 'snippets/username.html' with user=status.user %}
+        {% if status.status_type == 'Update' %}
+            {{ status.content | safe }}
+        {% elif status.status_type == 'Review' and not status.name and not status.content%}
+            rated <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Review' %}
+            reviewed <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Comment' %}
+            commented on <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Quotation' %}
+            quoted <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
+        {% elif status.status_type == 'Boost' %}
+            boosted
+        {% elif status.reply_parent %}
+            {% with parent_status=status|parent %}
+            replied to {% include 'snippets/username.html' with user=parent_status.user possessive=True %} <a href="{{parent_status.remote_id }}">{{ parent_status.status_type | lower }}</a>
+            {% endwith %}
+        {% endif %}
+    </div>
+</div>
+<div class="level-right">
+    <div>
+        <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
+    </div>
+</div>