diff --git a/resources/views/account/activity.blade.php b/resources/views/account/activity.blade.php
index 1c8bf9970..0243a6d1d 100644
--- a/resources/views/account/activity.blade.php
+++ b/resources/views/account/activity.blade.php
@@ -1,145 +1,14 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container notification-page" style="min-height: 60vh;">
-  <div class="col-12 col-md-8 offset-md-2">
-    <div class="card mt-3">
-      <div class="card-body p-0">
-        <ul class="nav nav-pills d-flex text-center">
-          <li class="nav-item flex-fill">
-            <a class="nav-link font-weight-bold text-uppercase active" href="{{route('notifications')}}">Notifications</a>
-          </li>
-          <li class="nav-item flex-fill">
-            <a class="nav-link font-weight-bold text-uppercase" href="{{route('follow-requests')}}">Follow Requests</a>
-          </li> 
-        </ul>
-      </div>
-    </div>
-    <div class="">
-      <div class="dropdown text-right mt-2">
-        <a class="btn btn-link btn-sm dropdown-toggle font-weight-bold text-dark" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Filter
-        </a>
-
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                <a href="?a=comment" class="dropdown-item font-weight-bold" title="Commented on your post">
-                  Comments only
-                </a>
-                <a href="?a=follow" class="dropdown-item font-weight-bold" title="Followed you">
-                  New Followers only
-                </a>
-                <a href="?a=mention" class="dropdown-item font-weight-bold" title="Mentioned you">
-                  Mentions only
-                </a>
-                <a href="{{route('notifications')}}" class="dropdown-item font-weight-bold text-dark">
-                  View All
-                </a>
-        </div>
-      </div>
-    </div>
-    <ul class="list-group">
-
-    @if($notifications->count() > 0)
-      @foreach($notifications as $notification)
-      <li class="list-group-item notification border-0">
-        @switch($notification->action)
-
-        @case('like')
-          <span class="notification-icon pr-3">
-            <img src="{{optional($notification->actor, function($actor) {
-              return $actor->avatarUrl(); }) }}" width="32px" class="rounded-circle">
-          </span>
-          <span class="notification-text">
-            {!! $notification->rendered !!}
-            <span class="text-muted notification-timestamp pl-1">{{$notification->created_at->diffForHumans(null, true, true, true)}}</span>
-          </span>
-          <span class="float-right notification-action">
-            @if($notification->item_id && $notification->item_type == 'App\Status')
-              <a href="{{$notification->status->url()}}"><img src="{{$notification->status->thumb()}}" width="32px" height="32px"></a>
-            @endif
-          </span>
-        @break
-
-        @case('follow')
-          <span class="notification-icon pr-3">
-            <img src="{{$notification->actor->avatarUrl()}}" width="32px" class="rounded-circle">
-          </span>
-          <span class="notification-text">
-            {!! $notification->rendered !!}
-            <span class="text-muted notification-timestamp pl-1">{{$notification->created_at->diffForHumans(null, true, true, true)}}</span>
-          </span>
-          @if($notification->actor->followedBy(Auth::user()->profile) == false)
-          <span class="float-right notification-action">
-           <form class="follow-form" method="post" action="/i/follow" style="display: inline;" data-id="{{$notification->actor->id}}" data-action="follow">
-              @csrf
-              <input type="hidden" name="item" value="{{$notification->actor->id}}">
-              <button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
-            </form>
-          </span>
-          @endif
-        @break
-
-        @case('comment')
-          <span class="notification-icon pr-3">
-            <img src="{{$notification->actor->avatarUrl()}}" width="32px" class="rounded-circle">
-          </span>
-          <span class="notification-text">
-            {!! $notification->rendered !!}
-            <span class="text-muted notification-timestamp pl-1">{{$notification->created_at->diffForHumans(null, true, true, true)}}</span>
-          </span>
-          <span class="float-right notification-action">
-            @if($notification->item_id && $notification->item_type == 'App\Status')
-              @if($notification->status->parent()) 
-              <a href="{{$notification->status->parent()->url()}}">
-                <div class="notification-image" style="background-image: url('{{$notification->status->parent()->thumb()}}')"></div>
-              </a>
-              @endif
-            @endif
-          </span>
-        @break
-
-        @case('mention')
-          <span class="notification-icon pr-3">
-            <img src="{{$notification->status->profile->avatarUrl()}}" width="32px" class="rounded-circle">
-          </span>
-          <span class="notification-text">
-            {!! $notification->rendered !!}
-            <span class="text-muted notification-timestamp pl-1">{{$notification->created_at->diffForHumans(null, true, true, true)}}</span>
-          </span>
-          <span class="float-right notification-action">
-            @if($notification->item_id && $notification->item_type === 'App\Status')
-              @if(is_null($notification->status->in_reply_to_id))
-              <a href="{{$notification->status->url()}}">
-                <div class="notification-image" style="background-image: url('{{$notification->status->thumb()}}')"></div>
-              </a>
-              @else
-              <a href="{{$notification->status->parent()->url()}}">
-                <div class="notification-image" style="background-image: url('{{$notification->status->parent()->thumb()}}')"></div>
-              </a>
-              @endif
-            @endif
-          </span>
-        @break
-
-        @endswitch
-      </li>
-      @endforeach
-    </ul>
-
-      <div class="d-flex justify-content-center my-4">
-        {{$notifications->links()}}
-      </div>
-    @else
-      <div class="mt-4">
-        <div class="alert alert-info font-weight-bold">No unread notifications found.</div>
-      </div>
-    @endif
-  </div>
+<div>
+  <activity-component></activity-component>
 </div>
 @endsection
 
 @push('scripts')
 <script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
+<script type="text/javascript" src="{{ mix('js/activity.js') }}"></script>
 <script type="text/javascript">
   new Vue({
     el: '#content'