diff --git a/lib/pleroma/web/static_fe/static_fe_view.ex b/lib/pleroma/web/static_fe/static_fe_view.ex
index df5ff5628..c85689c8b 100644
--- a/lib/pleroma/web/static_fe/static_fe_view.ex
+++ b/lib/pleroma/web/static_fe/static_fe_view.ex
@@ -22,6 +22,35 @@ def fetch_media_type(%{"mediaType" => mediaType}) do
     Utils.fetch_media_type(@media_types, mediaType)
   end
 
+  def time_ago(date) do
+    {:ok, date, _} = DateTime.from_iso8601(date)
+    {:ok, now} = DateTime.now("Etc/UTC")
+
+    years = now.year - date.year
+    months = now.month - date.month
+    days = now.day - date.day
+    hours = now.hour - date.hour
+    minutes = now.minute - date.minute
+    seconds = now.second - date.second
+    cond do
+      years > 1 -> to_string(years) <> " years ago"
+      years > 0 -> "1 year ago"
+      months > 1 -> to_string(months) <> " months ago"
+      months > 0 -> "1 month ago"
+      days > 13 -> to_string(trunc(days / 7)) <> " weeks ago"
+      days > 6 -> "1 week ago"
+      days > 1 -> to_string(days) <> " days ago"
+      days > 0 -> "1 day ago"
+      hours > 1 -> to_string(hours) <> " hours ago"
+      hours > 0 -> "1 hour ago"
+      minutes > 1 -> to_string(minutes) <> " minutes ago"
+      minutes > 0 -> "1 minute ago"
+      seconds > 1 -> to_string(seconds) <> " seconds ago"
+      seconds > 0 -> "1 second ago"
+      true -> "now"
+    end
+  end
+  
   def format_date(date) do
     {:ok, date, _} = DateTime.from_iso8601(date)
     Strftime.strftime!(date, "%Y/%m/%d %l:%M:%S %p UTC")
@@ -32,7 +61,7 @@ def instance_name, do: Pleroma.Config.get([:instance, :name], "Akkoma")
   def open_content? do
     Pleroma.Config.get(
       [:frontend_configurations, :collapse_message_with_subjects],
-      true
+      false
     )
   end
 end
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
index df0244795..7393b7ee2 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
@@ -1,41 +1,66 @@
-<div class="activity h-entry" <%= if @selected do %> id="selected" <% end %>>
-  <p class="pull-right">
-    <a class="activity-link u-url u-uid" href="<%= @link %>">
-      <time class="dt-published" datetime="<%= @published %>">
-        <%= format_date(@published) %>
-      </time>
+<div class="status-container" <%= if @selected do %> id="selected" <% end %>>
+  <div class="left-side">
+    <a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
+      <div class="avatar">
+        <img
+          class="u-photo" width="48" height="48"
+          src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
+          title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
+        />
+      </div>
     </a>
-  </p>
-  <%= render("_user_card.html", %{user: @user}) %>
-  <div class="activity-content">
-    <%= if @title != "" do %>
-      <details <%= if open_content?() do %>open<% end %>>
-        <summary class="p-name"><%= raw @title %></summary>
-        <div class="e-content"><%= raw @content %></div>
-      </details>
-    <% else %>
-      <div class="e-content"><%= raw @content %></div>
-    <% end %>
-    <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
-      <%= if @sensitive do %>
-        <details class="nsfw">
-          <summary><%= Gettext.gettext("sensitive media") %></summary>
-          <div>
-            <%= render("_attachment.html", %{name: name, url: url["href"],
-                                             mediaType: fetch_media_type(url)}) %>
-          </div>
-        </details>
-      <% else %>
-        <%= render("_attachment.html", %{name: name, url: url["href"],
-                                         mediaType: fetch_media_type(url)}) %>
-      <% end %>
-    <% end %>
   </div>
-  <%= if @selected do %>
-    <dl class="counts">
-      <dt><%= Gettext.gettext("replies") %></dt><dd><%= @counts.replies %></dd>
-      <dt><%= Gettext.gettext("announces") %></dt><dd><%= @counts.announces %></dd>
-      <dt><%= Gettext.gettext("likes") %></dt><dd><%= @counts.likes %></dd>
-    </dl>
-  <% end %>
+  <div class="right-side">
+    <div class="status-heading">
+      <div class="heading-left">
+        <h4 class="username">
+		  <%= raw Formatter.emojify(@user.name, @user.emoji) %>
+        </h4>
+        <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
+          <%= @user.nickname %>
+        </a>
+      </div>
+      <div class="heading-right">
+        <a class="timeago" href="<%= @link %>">
+          <time
+            class="dt-published" datetime="<%= @published %>"
+            title="<%= format_date(@published) %>"
+          >
+            <%= time_ago(@published) %>
+          </time>
+        </a>
+      </div>
+    </div>
+    <div class="status-content">
+      <%= if @title != "" do %>
+      <span class="status-summary"><%= raw @title %></span>
+      <details <%= if open_content?() do %>open<% end %>>
+        <summary>Show content</summary>
+        <div class="status-body"><%= raw @content %></div>
+      </details>
+      <% else %>
+      <div class="status-body"><%= raw @content %></div>
+      <% end %>
+      <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
+      <%= if @sensitive do %>
+      <details class="nsfw">
+        <summary><%= Gettext.gettext("sensitive media") %></summary>
+        <div>
+          <%= render("_attachment.html", %{name: name, url: url["href"],
+			                              mediaType: fetch_media_type(url)}) %>
+        </div>
+      </details>
+      <% else %>
+      <%= render("_attachment.html", %{name: name, url: url["href"],
+                                      mediaType: fetch_media_type(url)}) %>
+      <% end %>
+      <% end %>
+    </div>
+    <!-- <div class="emoji-reactions"></div> -->
+    <div class="status-actions">
+      <div><%= @counts.replies %></div>
+      <div><%= @counts.announces %></div>
+      <div><%= @counts.likes %></div>
+    </div>
+  </div>
 </div>
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex
deleted file mode 100644
index 977b894d3..000000000
--- a/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="p-author h-card">
-  <a class="u-url" rel="author noopener" href="<%= (@user.uri || @user.ap_id) %>">
-    <div class="avatar">
-      <img class="u-photo" src="<%= User.avatar_url(@user) |> MediaProxy.url %>" width="48" height="48" alt="">
-    </div>
-    <span class="display-name">
-      <bdi class="p-name"><%= raw Formatter.emojify(@user.name, @user.emoji) %></bdi>
-      <span class="nickname"><%= @user.nickname %></span>
-    </span>
-  </a>
-</div>
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex
index 2acd84828..e682f7f10 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex
@@ -1,11 +1,8 @@
-<header>
-  <h1><%= link instance_name(), to: "/" %></h1>
-</header>
-
-<main>
-  <div class="conversation">
-    <%= for activity <- @activities do %>
-      <%= render("_notice.html", activity) %>
-    <% end %>
+<div class="panel conversation">
+  <div class="panel-heading">
+    Conversation
   </div>
-</main>
+  <%= for activity <- @activities do %>
+  <%= render("_notice.html", activity) %>
+  <% end %>
+</div>