diff --git a/app/Http/Controllers/Admin/AdminGroupsController.php b/app/Http/Controllers/Admin/AdminGroupsController.php
new file mode 100644
index 000000000..45a4fd266
--- /dev/null
+++ b/app/Http/Controllers/Admin/AdminGroupsController.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Models\Group;
+use App\Models\GroupCategory;
+use App\Models\GroupInteraction;
+use App\Models\GroupMember;
+use App\Models\GroupPost;
+use App\Models\GroupReport;
+use Cache;
+use Illuminate\Http\Request;
+
+trait AdminGroupsController
+{
+    public function groupsHome(Request $request)
+    {
+        $stats = $this->groupAdminStats();
+
+        return view('admin.groups.home', compact('stats'));
+    }
+
+    protected function groupAdminStats()
+    {
+        return Cache::remember('admin:groups:stats', 3, function () {
+            $res = [
+                'total' => Group::count(),
+                'local' => Group::whereLocal(true)->count(),
+            ];
+
+            $res['remote'] = $res['total'] - $res['local'];
+            $res['categories'] = GroupCategory::count();
+            $res['posts'] = GroupPost::count();
+            $res['members'] = GroupMember::count();
+            $res['interactions'] = GroupInteraction::count();
+            $res['reports'] = GroupReport::count();
+
+            $res['local_30d'] = Cache::remember('admin:groups:stats:local_30d', 43200, function () {
+                return Group::whereLocal(true)->where('created_at', '>', now()->subMonth())->count();
+            });
+
+            $res['remote_30d'] = Cache::remember('admin:groups:stats:remote_30d', 43200, function () {
+                return Group::whereLocal(false)->where('created_at', '>', now()->subMonth())->count();
+            });
+
+            return $res;
+        });
+    }
+}
diff --git a/app/Http/Controllers/GroupController.php b/app/Http/Controllers/GroupController.php
new file mode 100644
index 000000000..881d31f01
--- /dev/null
+++ b/app/Http/Controllers/GroupController.php
@@ -0,0 +1,671 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Instance;
+use App\Models\Group;
+use App\Models\GroupBlock;
+use App\Models\GroupCategory;
+use App\Models\GroupInvitation;
+use App\Models\GroupLike;
+use App\Models\GroupLimit;
+use App\Models\GroupMember;
+use App\Models\GroupPost;
+use App\Models\GroupReport;
+use App\Profile;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Services\HashidService;
+use App\Services\StatusService;
+use App\Status;
+use App\User;
+use Illuminate\Http\Request;
+use Storage;
+
+class GroupController extends GroupFederationController
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+        abort_unless(config('groups.enabled'), 404);
+    }
+
+    public function index(Request $request)
+    {
+        abort_if(! $request->user(), 404);
+
+        return view('layouts.spa');
+    }
+
+    public function home(Request $request)
+    {
+        abort_if(! $request->user(), 404);
+
+        return view('layouts.spa');
+    }
+
+    public function show(Request $request, $id, $path = false)
+    {
+        $group = Group::find($id);
+
+        if (! $group || $group->status) {
+            return response()->view('groups.unavailable')->setStatusCode(404);
+        }
+
+        if ($request->wantsJson()) {
+            return $this->showGroupObject($group);
+        }
+
+        return view('layouts.spa', compact('id', 'path'));
+    }
+
+    public function showStatus(Request $request, $gid, $sid)
+    {
+        $group = Group::find($gid);
+        $pid = optional($request->user())->profile_id ?? false;
+
+        if (! $group || $group->status) {
+            return response()->view('groups.unavailable')->setStatusCode(404);
+        }
+
+        if ($group->is_private) {
+            abort_if(! $request->user(), 404);
+            abort_if(! $group->isMember($pid), 404);
+        }
+
+        $gp = GroupPost::whereGroupId($gid)
+            ->findOrFail($sid);
+
+        return view('layouts.spa', compact('group', 'gp'));
+    }
+
+    public function getGroup(Request $request, $id)
+    {
+        $group = Group::whereNull('status')->findOrFail($id);
+        $pid = optional($request->user())->profile_id ?? false;
+
+        $group = $this->toJson($group, $pid);
+
+        return response()->json($group, 200, [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
+    }
+
+    public function showStatusLikes(Request $request, $id, $sid)
+    {
+        $group = Group::findOrFail($id);
+        $user = $request->user();
+        $pid = $user->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        $status = GroupPost::whereGroupId($id)->findOrFail($sid);
+        $likes = GroupLike::whereStatusId($sid)
+            ->cursorPaginate(10)
+            ->map(function ($l) use ($group) {
+                $account = AccountService::get($l->profile_id);
+                $account['url'] = "/groups/{$group->id}/user/{$account['id']}";
+
+                return $account;
+            })
+            ->filter(function ($l) {
+                return $l && isset($l['id']);
+            })
+            ->values();
+
+        return $likes;
+    }
+
+    public function groupSettings(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        abort_if(! in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        return view('groups.settings', compact('group'));
+    }
+
+    public function joinGroup(Request $request, $id)
+    {
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if($group->isMember($pid), 404);
+
+        if (! $request->user()->is_admin) {
+            abort_if(GroupService::getRejoinTimeout($group->id, $pid), 422, 'Cannot re-join this group for 24 hours after leaving or cancelling a request to join');
+        }
+
+        $member = new GroupMember;
+        $member->group_id = $group->id;
+        $member->profile_id = $pid;
+        $member->role = 'member';
+        $member->local_group = true;
+        $member->local_profile = true;
+        $member->join_request = $group->is_private;
+        $member->save();
+
+        GroupService::delSelf($group->id, $pid);
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:joined',
+            null,
+            GroupMember::class,
+            $member->id
+        );
+
+        $group = $this->toJson($group, $pid);
+
+        return $group;
+    }
+
+    public function updateGroup(Request $request, $id)
+    {
+        $this->validate($request, [
+            'description' => 'nullable|max:500',
+            'membership' => 'required|in:all,local,private',
+            'avatar' => 'nullable',
+            'header' => 'nullable',
+            'discoverable' => 'required',
+            'activitypub' => 'required',
+            'is_nsfw' => 'required',
+            'category' => 'required|string|in:'.implode(',', GroupService::categories()),
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $group = Group::whereProfileId($pid)->findOrFail($id);
+        $member = GroupMember::whereGroupId($group->id)->whereProfileId($pid)->firstOrFail();
+
+        abort_if($member->role != 'founder', 403, 'Invalid group permission');
+
+        $metadata = $group->metadata;
+        $len = $group->is_private ? 12 : 4;
+
+        if ($request->hasFile('avatar')) {
+            $avatar = $request->file('avatar');
+
+            if ($avatar) {
+                if (isset($metadata['avatar']) &&
+                    isset($metadata['avatar']['path']) &&
+                    Storage::exists($metadata['avatar']['path'])
+                ) {
+                    Storage::delete($metadata['avatar']['path']);
+                }
+
+                $fileName = 'avatar_'.strtolower(str_random($len)).'.'.$avatar->extension();
+                $path = $avatar->storePubliclyAs('public/g/'.$group->id.'/meta', $fileName);
+                $url = url(Storage::url($path));
+                $metadata['avatar'] = [
+                    'path' => $path,
+                    'url' => $url,
+                    'updated_at' => now(),
+                ];
+            }
+        }
+
+        if ($request->hasFile('header')) {
+            $header = $request->file('header');
+
+            if ($header) {
+                if (isset($metadata['header']) &&
+                    isset($metadata['header']['path']) &&
+                    Storage::exists($metadata['header']['path'])
+                ) {
+                    Storage::delete($metadata['header']['path']);
+                }
+
+                $fileName = 'header_'.strtolower(str_random($len)).'.'.$header->extension();
+                $path = $header->storePubliclyAs('public/g/'.$group->id.'/meta', $fileName);
+                $url = url(Storage::url($path));
+                $metadata['header'] = [
+                    'path' => $path,
+                    'url' => $url,
+                    'updated_at' => now(),
+                ];
+            }
+        }
+
+        $cat = GroupService::categoryById($group->category_id);
+        if ($request->category !== $cat['name']) {
+            $group->category_id = GroupCategory::whereName($request->category)->first()->id;
+        }
+
+        $changes = null;
+        $group->description = e($request->input('description', null));
+        $group->is_private = $request->input('membership') == 'private';
+        $group->local_only = $request->input('membership') == 'local';
+        $group->activitypub = $request->input('activitypub') == 'true';
+        $group->discoverable = $request->input('discoverable') == 'true';
+        $group->is_nsfw = $request->input('is_nsfw') == 'true';
+        $group->metadata = $metadata;
+        if ($group->isDirty()) {
+            $changes = $group->getDirty();
+        }
+        $group->save();
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:settings:updated',
+            $changes
+        );
+
+        GroupService::del($group->id);
+
+        $res = $this->toJson($group, $pid);
+
+        return $res;
+    }
+
+    protected function toJson($group, $pid = false)
+    {
+        return GroupService::get($group->id, $pid);
+    }
+
+    public function groupLeave(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($id);
+
+        abort_if($pid == $group->profile_id, 422, 'Cannot leave a group you created');
+
+        abort_if(! $group->isMember($pid), 403, 'Not a member of group.');
+
+        GroupMember::whereGroupId($group->id)->whereProfileId($pid)->delete();
+        GroupService::del($group->id);
+        GroupService::delSelf($group->id, $pid);
+        GroupService::setRejoinTimeout($group->id, $pid);
+
+        return [200];
+    }
+
+    public function cancelJoinRequest(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($id);
+
+        abort_if($pid == $group->profile_id, 422, 'Cannot leave a group you created');
+        abort_if($group->isMember($pid), 422, 'Cannot cancel approved join request, please leave group instead.');
+
+        GroupMember::whereGroupId($group->id)->whereProfileId($pid)->delete();
+        GroupService::del($group->id);
+        GroupService::delSelf($group->id, $pid);
+        GroupService::setRejoinTimeout($group->id, $pid);
+
+        return [200];
+    }
+
+    public function metaBlockSearch(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        abort_if(! in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $type = $request->input('type');
+        $item = $request->input('item');
+
+        switch ($type) {
+            case 'instance':
+                $res = Instance::whereDomain($item)->first();
+                if ($res) {
+                    abort_if(GroupBlock::whereGroupId($group->id)->whereInstanceId($res->id)->exists(), 400);
+                }
+                break;
+
+            case 'user':
+                $res = Profile::whereUsername($item)->first();
+                if ($res) {
+                    abort_if(GroupBlock::whereGroupId($group->id)->whereProfileId($res->id)->exists(), 400);
+                }
+                if ($res->user_id != null) {
+                    abort_if(User::whereIsAdmin(true)->whereId($res->user_id)->exists(), 400);
+                }
+                break;
+        }
+
+        return response()->json((bool) $res, ($res ? 200 : 404));
+    }
+
+    public function reportCreate(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+
+        $id = $request->input('id');
+        $type = $request->input('type');
+        $types = [
+            // original 3
+            'spam',
+            'sensitive',
+            'abusive',
+
+            // new
+            'underage',
+            'violence',
+            'copyright',
+            'impersonation',
+            'scam',
+            'terrorism',
+        ];
+
+        $gp = GroupPost::whereGroupId($group->id)->find($id);
+        abort_if(! $gp, 422, 'Cannot report an invalid or deleted post');
+        abort_if(! in_array($type, $types), 422, 'Invalid report type');
+        abort_if($gp->profile_id === $pid, 422, 'Cannot report your own post');
+        abort_if(
+            GroupReport::whereGroupId($group->id)
+                ->whereProfileId($pid)
+                ->whereItemType(GroupPost::class)
+                ->whereItemId($id)
+                ->exists(),
+            422,
+            'You already reported this'
+        );
+
+        $report = new GroupReport();
+        $report->group_id = $group->id;
+        $report->profile_id = $pid;
+        $report->type = $type;
+        $report->item_type = GroupPost::class;
+        $report->item_id = $id;
+        $report->open = true;
+        $report->save();
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:report:create',
+            [
+                'type' => $type,
+                'report_id' => $report->id,
+                'status_id' => $gp->status_id,
+                'profile_id' => $gp->profile_id,
+                'username' => optional(AccountService::get($gp->profile_id))['acct'],
+                'gpid' => $gp->id,
+                'url' => $gp->url(),
+            ],
+            GroupReport::class,
+            $report->id
+        );
+
+        return response([200]);
+    }
+
+    public function reportAction(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        abort_if(! in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $this->validate($request, [
+            'action' => 'required|in:cw,delete,ignore',
+            'id' => 'required|string',
+        ]);
+
+        $action = $request->input('action');
+        $id = $request->input('id');
+
+        $report = GroupReport::whereGroupId($group->id)
+            ->findOrFail($id);
+        $status = Status::findOrFail($report->item_id);
+        $gp = GroupPost::whereGroupId($group->id)
+            ->whereStatusId($status->id)
+            ->firstOrFail();
+
+        switch ($action) {
+            case 'cw':
+                $status->is_nsfw = true;
+                $status->save();
+                StatusService::del($status->id);
+
+                GroupReport::whereGroupId($group->id)
+                    ->whereItemType($report->item_type)
+                    ->whereItemId($report->item_id)
+                    ->update(['open' => false]);
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:moderation:action',
+                    [
+                        'type' => 'cw',
+                        'report_id' => $report->id,
+                        'status_id' => $status->id,
+                        'profile_id' => $status->profile_id,
+                        'status_url' => $gp->url(),
+                    ],
+                    GroupReport::class,
+                    $report->id
+                );
+
+                return response()->json([200]);
+                break;
+
+            case 'ignore':
+                GroupReport::whereGroupId($group->id)
+                    ->whereItemType($report->item_type)
+                    ->whereItemId($report->item_id)
+                    ->update(['open' => false]);
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:moderation:action',
+                    [
+                        'type' => 'ignore',
+                        'report_id' => $report->id,
+                        'status_id' => $status->id,
+                        'profile_id' => $status->profile_id,
+                        'status_url' => $gp->url(),
+                    ],
+                    GroupReport::class,
+                    $report->id
+                );
+
+                return response()->json([200]);
+                break;
+        }
+    }
+
+    public function getMemberInteractionLimits(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        abort_if(! in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $profile_id = $request->input('profile_id');
+        abort_if(! $group->isMember($profile_id), 404);
+        $limits = GroupService::getInteractionLimits($group->id, $profile_id);
+
+        return response()->json($limits);
+    }
+
+    public function updateMemberInteractionLimits(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(! $group->isMember($pid), 404);
+        abort_if(! in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $this->validate($request, [
+            'profile_id' => 'required|exists:profiles,id',
+            'can_post' => 'required',
+            'can_comment' => 'required',
+            'can_like' => 'required',
+        ]);
+
+        $member = $request->input('profile_id');
+        $can_post = $request->input('can_post');
+        $can_comment = $request->input('can_comment');
+        $can_like = $request->input('can_like');
+        $account = AccountService::get($member);
+
+        abort_if(! $account, 422, 'Invalid profile');
+        abort_if(! $group->isMember($member), 422, 'Invalid profile');
+
+        $limit = GroupLimit::firstOrCreate([
+            'profile_id' => $member,
+            'group_id' => $group->id,
+        ]);
+
+        if ($limit->wasRecentlyCreated) {
+            abort_if(GroupLimit::whereGroupId($group->id)->count() >= 25, 422, 'limit_reached');
+        }
+
+        $previousLimits = $limit->limits;
+
+        $limit->limits = [
+            'can_post' => $can_post,
+            'can_comment' => $can_comment,
+            'can_like' => $can_like,
+        ];
+        $limit->save();
+
+        GroupService::clearInteractionLimits($group->id, $member);
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:member-limits:updated',
+            [
+                'profile_id' => $account['id'],
+                'username' => $account['username'],
+                'previousLimits' => $previousLimits,
+                'newLimits' => $limit->limits,
+            ],
+            GroupLimit::class,
+            $limit->id
+        );
+
+        return $request->all();
+    }
+
+    public function showProfile(Request $request, $id, $pid)
+    {
+        $group = Group::find($id);
+
+        if (! $group || $group->status) {
+            return response()->view('groups.unavailable')->setStatusCode(404);
+        }
+
+        return view('layouts.spa');
+    }
+
+    public function showProfileByUsername(Request $request, $id, $pid)
+    {
+        abort_if(! $request->user(), 404);
+        if (! $request->user()) {
+            return redirect("/{$pid}");
+        }
+
+        $group = Group::find($id);
+        $cid = $request->user()->profile_id;
+
+        if (! $group || $group->status) {
+            return response()->view('groups.unavailable')->setStatusCode(404);
+        }
+
+        if (! $group->isMember($cid)) {
+            return redirect("/{$pid}");
+        }
+
+        $profile = Profile::whereUsername($pid)->first();
+
+        if (! $group->isMember($profile->id)) {
+            return redirect("/{$pid}");
+        }
+
+        if ($profile) {
+            $url = url("/groups/{$id}/user/{$profile->id}");
+
+            return redirect($url);
+        }
+
+        abort(404, 'Invalid username');
+    }
+
+    public function groupInviteLanding(Request $request, $id)
+    {
+        abort(404, 'Not yet implemented');
+        $group = Group::findOrFail($id);
+
+        return view('groups.invite', compact('group'));
+    }
+
+    public function groupShortLinkRedirect(Request $request, $hid)
+    {
+        $gid = HashidService::decode($hid);
+        $group = Group::findOrFail($gid);
+
+        return redirect($group->url());
+    }
+
+    public function groupInviteClaim(Request $request, $id)
+    {
+        $group = GroupService::get($id);
+        abort_if(! $group || empty($group), 404);
+
+        return view('groups.invite-claim', compact('group'));
+    }
+
+    public function groupMemberInviteCheck(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($id);
+        abort_if($group->isMember($pid), 422, 'Already a member');
+
+        $exists = GroupInvitation::whereGroupId($id)->whereToProfileId($pid)->exists();
+
+        return response()->json([
+            'gid' => $id,
+            'can_join' => (bool) $exists,
+        ]);
+    }
+
+    public function groupMemberInviteAccept(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($id);
+        abort_if($group->isMember($pid), 422, 'Already a member');
+
+        abort_if(! GroupInvitation::whereGroupId($id)->whereToProfileId($pid)->exists(), 422);
+
+        $gm = new GroupMember;
+        $gm->group_id = $id;
+        $gm->profile_id = $pid;
+        $gm->role = 'member';
+        $gm->local_group = $group->local;
+        $gm->local_profile = true;
+        $gm->join_request = false;
+        $gm->save();
+
+        GroupInvitation::whereGroupId($id)->whereToProfileId($pid)->delete();
+        GroupService::del($id);
+        GroupService::delSelf($id, $pid);
+
+        return ['next_url' => $group->url()];
+    }
+
+    public function groupMemberInviteDecline(Request $request, $id)
+    {
+        abort_if(! $request->user(), 404);
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($id);
+        abort_if($group->isMember($pid), 422, 'Already a member');
+
+        return ['next_url' => '/'];
+    }
+}
diff --git a/app/Http/Controllers/GroupFederationController.php b/app/Http/Controllers/GroupFederationController.php
new file mode 100644
index 000000000..7f45f74a4
--- /dev/null
+++ b/app/Http/Controllers/GroupFederationController.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Cache;
+use App\Models\Group;
+use App\Models\GroupPost;
+use App\Status;
+use App\Models\InstanceActor;
+use App\Services\MediaService;
+
+class GroupFederationController extends Controller
+{
+	public function getGroupObject(Request $request, $id)
+	{
+		$group = Group::whereLocal(true)->whereActivitypub(true)->findOrFail($id);
+		$res = $this->showGroupObject($group);
+		return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+	}
+
+	public function showGroupObject($group)
+	{
+		return Cache::remember('ap:groups:object:' . $group->id, 3600, function() use($group) {
+			return [
+				'@context' => 'https://www.w3.org/ns/activitystreams',
+				'id' => $group->url(),
+				'inbox' => $group->permalink('/inbox'),
+				'name' => $group->name,
+				'outbox' => $group->permalink('/outbox'),
+				'summary' => $group->description,
+				'type' => 'Group',
+				'attributedTo' => [
+					'type' => 'Person',
+					'id' => $group->admin->permalink()
+				],
+				// 'endpoints' => [
+				// 	'sharedInbox' => config('app.url') . '/f/inbox'
+				// ],
+				'preferredUsername' => 'gid_' . $group->id,
+				'publicKey' => [
+					'id' => $group->permalink('#main-key'),
+					'owner' => $group->permalink(),
+					'publicKeyPem' => InstanceActor::first()->public_key,
+				],
+				'url' => $group->permalink()
+			];
+
+			if($group->metadata && isset($group->metadata['avatar'])) {
+				$res['icon'] = [
+					'type' => 'Image',
+					'url' => $group->metadata['avatar']['url']
+				];
+			}
+
+			if($group->metadata && isset($group->metadata['header'])) {
+				$res['image'] = [
+					'type' => 'Image',
+					'url' => $group->metadata['header']['url']
+				];
+			}
+			ksort($res);
+			return $res;
+		});
+	}
+
+	public function getStatusObject(Request $request, $gid, $sid)
+	{
+		$group = Group::whereLocal(true)->whereActivitypub(true)->findOrFail($gid);
+		$gp = GroupPost::whereGroupId($gid)->findOrFail($sid);
+		$status = Status::findOrFail($gp->status_id);
+		// permission check
+
+		$res = [
+			'@context' => 'https://www.w3.org/ns/activitystreams',
+			'id' => $gp->url(),
+
+			'type' => 'Note',
+
+			'summary'   => null,
+			'content'   => $status->rendered ?? $status->caption,
+			'inReplyTo' => null,
+
+			'published'    => $status->created_at->toAtomString(),
+			'url'          => $gp->url(),
+			'attributedTo' => $status->profile->permalink(),
+			'to'           => [
+				'https://www.w3.org/ns/activitystreams#Public',
+				$group->permalink('/followers'),
+			],
+			'cc' => [],
+			'sensitive'        => (bool) $status->is_nsfw,
+			'attachment'       => MediaService::activitypub($status->id),
+			'target' => [
+				'type' => 'Collection',
+				'id' => $group->permalink('/wall'),
+				'attributedTo' => $group->permalink()
+			]
+		];
+		// ksort($res);
+		return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+	}
+}
diff --git a/app/Http/Controllers/GroupPostController.php b/app/Http/Controllers/GroupPostController.php
new file mode 100644
index 000000000..909037a00
--- /dev/null
+++ b/app/Http/Controllers/GroupPostController.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class GroupPostController extends Controller
+{
+    //
+}
diff --git a/app/Http/Controllers/Groups/CreateGroupsController.php b/app/Http/Controllers/Groups/CreateGroupsController.php
new file mode 100644
index 000000000..819c90c58
--- /dev/null
+++ b/app/Http/Controllers/Groups/CreateGroupsController.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\GroupService;
+use App\Models\Group;
+use App\Models\GroupMember;
+
+class CreateGroupsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function checkCreatePermission(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $pid = $request->user()->profile_id;
+        $config = GroupService::config();
+        if($request->user()->is_admin) {
+            $allowed = true;
+        } else {
+            $max = $config['limits']['user']['create']['max'];
+            $allowed = Group::whereProfileId($pid)->count() <= $max;
+        }
+
+        return ['permission' => (bool) $allowed];
+    }
+
+    public function storeGroup(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+
+        $this->validate($request, [
+            'name' => 'required',
+            'description' => 'nullable|max:500',
+            'membership' => 'required|in:public,private,local'
+        ]);
+
+        $pid = $request->user()->profile_id;
+
+        $config = GroupService::config();
+        abort_if($config['limits']['user']['create']['new'] == false && $request->user()->is_admin == false, 422, 'Invalid operation');
+        $max = $config['limits']['user']['create']['max'];
+        // abort_if(Group::whereProfileId($pid)->count() <= $max, 422, 'Group limit reached');
+
+        $group = new Group;
+        $group->profile_id = $pid;
+        $group->name = $request->input('name');
+        $group->description = $request->input('description', null);
+        $group->is_private = $request->input('membership') == 'private';
+        $group->local_only = $request->input('membership') == 'local';
+        $group->metadata = $request->input('configuration');
+        $group->save();
+
+        GroupService::log($group->id, $pid, 'group:created');
+
+        $member = new GroupMember;
+        $member->group_id = $group->id;
+        $member->profile_id = $pid;
+        $member->role = 'founder';
+        $member->local_group = true;
+        $member->local_profile = true;
+        $member->save();
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:joined',
+            null,
+            GroupMember::class,
+            $member->id
+        );
+
+        return [
+            'id' => $group->id,
+            'url' => $group->url()
+        ];
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsAdminController.php b/app/Http/Controllers/Groups/GroupsAdminController.php
new file mode 100644
index 000000000..4bdf0f504
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsAdminController.php
@@ -0,0 +1,353 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\GroupService;
+use App\Instance;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupBlock;
+use App\Models\GroupCategory;
+use App\Models\GroupInteraction;
+use App\Models\GroupPost;
+use App\Models\GroupMember;
+use App\Models\GroupReport;
+use App\Services\Groups\GroupAccountService;
+use App\Services\Groups\GroupPostService;
+
+class GroupsAdminController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function getAdminTabs(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+        abort_if($pid !== $group->profile_id, 404);
+
+        $reqs = GroupMember::whereGroupId($group->id)->whereJoinRequest(true)->count();
+        $mods = GroupReport::whereGroupId($group->id)->whereOpen(true)->count();
+        $tabs = [
+            'moderation_count' => $mods > 99 ? '99+' : $mods,
+            'request_count' => $reqs > 99 ? '99+' : $reqs
+        ];
+
+        return response()->json($tabs);
+    }
+
+    public function getInteractionLogs(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $logs = GroupInteraction::whereGroupId($id)
+            ->latest()
+            ->paginate(10)
+            ->map(function($log) use($group) {
+                return [
+                    'id' => $log->id,
+                    'profile' => GroupAccountService::get($group->id, $log->profile_id),
+                    'type' => $log->type,
+                    'metadata' => $log->metadata,
+                    'created_at' => $log->created_at->format('c')
+                ];
+            });
+
+        return response()->json($logs, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function getBlocks(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $blocks = [
+            'instances' => GroupBlock::whereGroupId($group->id)->whereNotNull('instance_id')->whereModerated(false)->latest()->take(3)->pluck('name'),
+            'users' => GroupBlock::whereGroupId($group->id)->whereNotNull('profile_id')->whereIsUser(true)->latest()->take(3)->pluck('name'),
+            'moderated' => GroupBlock::whereGroupId($group->id)->whereNotNull('instance_id')->whereModerated(true)->latest()->take(3)->pluck('name')
+        ];
+
+        return response()->json($blocks, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function exportBlocks(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $blocks = [
+            'instances' => GroupBlock::whereGroupId($group->id)->whereNotNull('instance_id')->whereModerated(false)->latest()->pluck('name'),
+            'users' => GroupBlock::whereGroupId($group->id)->whereNotNull('profile_id')->whereIsUser(true)->latest()->pluck('name'),
+            'moderated' => GroupBlock::whereGroupId($group->id)->whereNotNull('instance_id')->whereModerated(true)->latest()->pluck('name')
+        ];
+
+        $blocks['_created_at'] = now()->format('c');
+        $blocks['_version'] = '1.0.0';
+        ksort($blocks);
+
+        return response()->streamDownload(function() use($blocks) {
+            echo json_encode($blocks, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+        });
+    }
+
+    public function addBlock(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $this->validate($request, [
+            'item' => 'required',
+            'type' => 'required|in:instance,user,moderate'
+        ]);
+
+        $item = $request->input('item');
+        $type = $request->input('type');
+
+        switch($type) {
+            case 'instance':
+                $instance = Instance::whereDomain($item)->first();
+                abort_if(!$instance, 422, 'This domain either isn\'nt known or is invalid');
+                $gb = new GroupBlock;
+                $gb->group_id = $group->id;
+                $gb->admin_id = $pid;
+                $gb->instance_id = $instance->id;
+                $gb->name = $instance->domain;
+                $gb->is_user = false;
+                $gb->moderated = false;
+                $gb->save();
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:block:instance',
+                    [
+                        'domain' => $instance->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                return [200];
+            break;
+
+            case 'user':
+                $profile = Profile::whereUsername($item)->first();
+                abort_if(!$profile, 422, 'This user either isn\'nt known or is invalid');
+                $gb = new GroupBlock;
+                $gb->group_id = $group->id;
+                $gb->admin_id = $pid;
+                $gb->profile_id = $profile->id;
+                $gb->name = $profile->username;
+                $gb->is_user = true;
+                $gb->moderated = false;
+                $gb->save();
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:block:user',
+                    [
+                        'username' => $profile->username,
+                        'domain' => $profile->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                return [200];
+            break;
+
+            case 'moderate':
+                $instance = Instance::whereDomain($item)->first();
+                abort_if(!$instance, 422, 'This domain either isn\'nt known or is invalid');
+                $gb = new GroupBlock;
+                $gb->group_id = $group->id;
+                $gb->admin_id = $pid;
+                $gb->instance_id = $instance->id;
+                $gb->name = $instance->domain;
+                $gb->is_user = false;
+                $gb->moderated = true;
+                $gb->save();
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:moderate:instance',
+                    [
+                        'domain' => $instance->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                return [200];
+            break;
+
+            default:
+                return response()->json([], 422, []);
+            break;
+        }
+    }
+
+    public function undoBlock(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $this->validate($request, [
+            'item' => 'required',
+            'type' => 'required|in:instance,user,moderate'
+        ]);
+
+        $item = $request->input('item');
+        $type = $request->input('type');
+
+        switch($type) {
+            case 'instance':
+                $instance = Instance::whereDomain($item)->first();
+                abort_if(!$instance, 422, 'This domain either isn\'nt known or is invalid');
+
+                $gb = GroupBlock::whereGroupId($group->id)
+                    ->whereInstanceId($instance->id)
+                    ->whereModerated(false)
+                    ->first();
+
+                abort_if(!$gb, 422, 'Invalid group block');
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:unblock:instance',
+                    [
+                        'domain' => $instance->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                $gb->delete();
+
+                return [200];
+            break;
+
+            case 'user':
+                $profile = Profile::whereUsername($item)->first();
+                abort_if(!$profile, 422, 'This user either isn\'nt known or is invalid');
+
+                $gb = GroupBlock::whereGroupId($group->id)
+                    ->whereProfileId($profile->id)
+                    ->whereIsUser(true)
+                    ->first();
+
+                abort_if(!$gb, 422, 'Invalid group block');
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:unblock:user',
+                    [
+                        'username' => $profile->username,
+                        'domain' => $profile->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                $gb->delete();
+
+                return [200];
+            break;
+
+            case 'moderate':
+                $instance = Instance::whereDomain($item)->first();
+                abort_if(!$instance, 422, 'This domain either isn\'nt known or is invalid');
+
+                $gb = GroupBlock::whereGroupId($group->id)
+                    ->whereInstanceId($instance->id)
+                    ->whereModerated(true)
+                    ->first();
+
+                abort_if(!$gb, 422, 'Invalid group block');
+
+                GroupService::log(
+                    $group->id,
+                    $pid,
+                    'group:admin:moderate:instance',
+                    [
+                        'domain' => $instance->domain
+                    ],
+                    GroupBlock::class,
+                    $gb->id
+                );
+
+                $gb->delete();
+
+                return [200];
+            break;
+
+            default:
+                return response()->json([], 422, []);
+            break;
+        }
+    }
+
+    public function getReportList(Request $request, $id)
+    {
+        abort_if(!$request->user(), 404);
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $scope = $request->input('scope', 'open');
+
+        $list = GroupReport::selectRaw('id, profile_id, item_type, item_id, type, created_at, count(*) as total')
+            ->whereGroupId($group->id)
+            ->groupBy('item_id')
+            ->when($scope == 'open', function($query, $scope) {
+                return $query->whereOpen(true);
+            })
+            ->latest()
+            ->simplePaginate(10)
+            ->map(function($report) use($group) {
+                $res = [
+                    'id' => (string) $report->id,
+                    'profile' => GroupAccountService::get($group->id, $report->profile_id),
+                    'type' => $report->type,
+                    'created_at' => $report->created_at->format('c'),
+                    'total_count' => $report->total
+                ];
+
+                if($report->item_type === GroupPost::class) {
+                    $res['status'] = GroupPostService::get($group->id, $report->item_id);
+                }
+
+                return $res;
+            });
+        return response()->json($list, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+}
diff --git a/app/Http/Controllers/Groups/GroupsApiController.php b/app/Http/Controllers/Groups/GroupsApiController.php
new file mode 100644
index 000000000..13bbca640
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsApiController.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\GroupService;
+use App\Models\Group;
+use App\Models\GroupCategory;
+use App\Models\GroupMember;
+use App\Services\Groups\GroupAccountService;
+
+class GroupsApiController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    protected function toJson($group, $pid = false)
+    {
+        return GroupService::get($group->id, $pid);
+    }
+
+    public function getConfig(Request $request)
+    {
+        return GroupService::config();
+    }
+
+    public function getGroupAccount(Request $request, $gid, $pid)
+    {
+        $res = GroupAccountService::get($gid, $pid);
+
+        return response()->json($res);
+    }
+
+    public function getGroupCategories(Request $request)
+    {
+        $res = GroupService::categories();
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function getGroupsByCategory(Request $request)
+    {
+        $name = $request->input('name');
+        $category = GroupCategory::whereName($name)->firstOrFail();
+        $groups = Group::whereCategoryId($category->id)
+            ->simplePaginate(6)
+            ->map(function($group) {
+                return GroupService::get($group->id);
+            })
+            ->filter(function($group) {
+                return $group;
+            })
+            ->values();
+        return $groups;
+    }
+
+    public function getRecommendedGroups(Request $request)
+    {
+        return [];
+    }
+
+    public function getSelfGroups(Request $request)
+    {
+        $selfOnly = $request->input('self') == true;
+        $memberOnly = $request->input('member') == true;
+        $pid = $request->user()->profile_id;
+        $res = GroupMember::whereProfileId($request->user()->profile_id)
+            ->when($selfOnly, function($q, $selfOnly) {
+                return $q->whereRole('founder');
+            })
+            ->when($memberOnly, function($q, $memberOnly) {
+                return $q->whereRole('member');
+            })
+            ->simplePaginate(4)
+            ->map(function($member) use($pid) {
+                $group = $member->group;
+                return $this->toJson($group, $pid);
+        });
+
+        return response()->json($res);
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsCommentController.php b/app/Http/Controllers/Groups/GroupsCommentController.php
new file mode 100644
index 000000000..435ed0d78
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsCommentController.php
@@ -0,0 +1,361 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Services\Groups\GroupCommentService;
+use App\Services\Groups\GroupMediaService;
+use App\Services\Groups\GroupPostService;
+use App\Services\Groups\GroupsLikeService;
+use App\Models\Group;
+use App\Models\GroupLike;
+use App\Models\GroupMedia;
+use App\Models\GroupPost;
+use App\Models\GroupComment;
+use Purify;
+use App\Util\Lexer\Autolink;
+use App\Jobs\GroupsPipeline\ImageResizePipeline;
+use App\Jobs\GroupsPipeline\ImageS3UploadPipeline;
+use App\Jobs\GroupsPipeline\NewPostPipeline;
+use App\Jobs\GroupsPipeline\NewCommentPipeline;
+use App\Jobs\GroupsPipeline\DeleteCommentPipeline;
+
+class GroupsCommentController extends Controller
+{
+    public function getComments(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'sid' => 'required',
+            'cid' => 'sometimes',
+            'limit' => 'nullable|integer|min:3|max:10'
+        ]);
+
+        $pid = optional($request->user())->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+        $cid = $request->has('cid') && $request->input('cid') == 1;
+        $limit = $request->input('limit', 3);
+        $maxId = $request->input('max_id', 0);
+
+        $group = Group::findOrFail($gid);
+
+        abort_if($group->is_private && !$group->isMember($pid), 403, 'Not a member of group.');
+
+        $status = $cid ? GroupComment::findOrFail($sid) : GroupPost::findOrFail($sid);
+
+        abort_if($status->group_id != $group->id, 400, 'Invalid group');
+
+        $replies = GroupComment::whereGroupId($group->id)
+            ->whereStatusId($status->id)
+            ->orderByDesc('id')
+            ->when($maxId, function($query, $maxId) {
+                return $query->where('id', '<', $maxId);
+            })
+            ->take($limit)
+            ->get()
+            ->map(function($gp) use($pid) {
+                $status = GroupCommentService::get($gp['group_id'], $gp['id']);
+                $status['reply_count'] = $gp['reply_count'];
+                $status['url'] = $gp->url();
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['id']);
+                $status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$gp['profile_id']}");
+                return $status;
+            });
+
+        return $replies->toArray();
+    }
+
+    public function storeComment(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required|exists:groups,id',
+            'sid' => 'required|exists:group_posts,id',
+            'cid' => 'sometimes',
+            'content' => 'required|string|min:1|max:1500'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+        $cid = $request->input('cid');
+        $limit = $request->input('limit', 3);
+        $caption = e($request->input('content'));
+
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+        abort_if(!GroupService::canComment($gid, $pid), 422, 'You cannot interact with this content at this time');
+
+
+        $parent = $cid == 1 ?
+            GroupComment::findOrFail($sid) :
+            GroupPost::whereGroupId($gid)->findOrFail($sid);
+        // $autolink = Purify::clean(Autolink::create()->autolink($caption));
+        // $autolink = str_replace('/discover/tags/', '/groups/' . $gid . '/topics/', $autolink);
+
+        $status = new GroupComment;
+        $status->group_id = $group->id;
+        $status->profile_id = $pid;
+        $status->status_id = $parent->id;
+        $status->caption = Purify::clean($caption);
+        $status->visibility = 'public';
+        $status->is_nsfw = false;
+        $status->local = true;
+        $status->save();
+
+        NewCommentPipeline::dispatch($parent, $status)->onQueue('groups');
+        // todo: perform in job
+        $parent->reply_count = $parent->reply_count ? $parent->reply_count + $parent->reply_count : 1;
+        $parent->save();
+        GroupPostService::del($parent->group_id, $parent->id);
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:comment:created',
+            [
+                'type' => 'group:post:comment',
+                'status_id' => $status->id
+            ],
+            GroupPost::class,
+            $status->id
+        );
+
+        //GroupCommentPipeline::dispatch($parent, $status, $gp);
+        //NewStatusPipeline::dispatch($status, $gp);
+        //GroupPostService::del($group->id, GroupService::sidToGid($group->id, $parent->id));
+
+        // todo: perform in job
+        $s = GroupCommentService::get($status->group_id, $status->id);
+
+        $s['pf_type'] = 'text';
+        $s['visibility'] = 'public';
+        $s['url'] = $status->url();
+
+        return $s;
+    }
+
+    public function storeCommentPhoto(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required|exists:groups,id',
+            'sid' => 'required|exists:group_posts,id',
+            'photo' => 'required|image'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+        $limit = $request->input('limit', 3);
+        $caption = $request->input('content');
+
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+        abort_if(!GroupService::canComment($gid, $pid), 422, 'You cannot interact with this content at this time');
+        $parent = GroupPost::whereGroupId($gid)->findOrFail($sid);
+
+        $status = new GroupComment;
+        $status->status_id = $parent->id;
+        $status->group_id = $group->id;
+        $status->profile_id = $pid;
+        $status->caption = Purify::clean($caption);
+        $status->visibility = 'draft';
+        $status->is_nsfw = false;
+        $status->save();
+
+        $photo = $request->file('photo');
+        $storagePath = GroupMediaService::path($group->id, $pid, $status->id);
+        $storagePath = 'public/g/' . $group->id . '/p/' . $parent->id;
+        $path = $photo->storePublicly($storagePath);
+
+        $media = new GroupMedia();
+        $media->group_id = $group->id;
+        $media->status_id = $status->id;
+        $media->profile_id = $request->user()->profile_id;
+        $media->media_path = $path;
+        $media->size = $photo->getSize();
+        $media->mime = $photo->getMimeType();
+        $media->save();
+
+        ImageResizePipeline::dispatchSync($media);
+        ImageS3UploadPipeline::dispatchSync($media);
+
+        // $gp = new GroupPost;
+        // $gp->group_id = $group->id;
+        // $gp->profile_id = $pid;
+        // $gp->type = 'reply:photo';
+        // $gp->status_id = $status->id;
+        // $gp->in_reply_to_id = $parent->id;
+        // $gp->save();
+
+        // GroupService::log(
+        //  $group->id,
+        //  $pid,
+        //  'group:comment:created',
+        //  [
+        //      'type' => $gp->type,
+        //      'status_id' => $status->id
+        //  ],
+        //  GroupPost::class,
+        //  $gp->id
+        // );
+
+        // todo: perform in job
+        // $parent->reply_count = Status::whereInReplyToId($parent->id)->count();
+        // $parent->save();
+        // StatusService::del($parent->id);
+        // GroupPostService::del($group->id, GroupService::sidToGid($group->id, $parent->id));
+
+        // delay response while background job optimizes media
+        // sleep(5);
+
+        // todo: perform in job
+        $s = GroupCommentService::get($status->group_id, $status->id);
+
+        // $s['pf_type'] = 'text';
+        // $s['visibility'] = 'public';
+        // $s['url'] = $gp->url();
+
+        return $s;
+    }
+
+    public function deleteComment(Request $request)
+    {
+        abort_if(!$request->user(), 403);
+
+        $this->validate($request, [
+          'id'  => 'required|integer|min:1',
+          'gid' => 'required|integer|min:1'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $gp = GroupComment::whereGroupId($group->id)->findOrFail($request->input('id'));
+        abort_if($gp->profile_id != $pid && $group->profile_id != $pid, 403);
+
+        $parent = GroupPost::find($gp->status_id);
+        abort_if(!$parent, 422, 'Invalid parent');
+
+        DeleteCommentPipeline::dispatch($parent, $gp)->onQueue('groups');
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:status:deleted',
+            [
+                'type' => $gp->type,
+                'status_id' => $gp->id,
+            ],
+            GroupComment::class,
+            $gp->id
+        );
+        $gp->delete();
+
+        if($request->wantsJson()) {
+            return response()->json(['Status successfully deleted.']);
+        } else {
+            return redirect('/groups/feed');
+        }
+    }
+
+    public function likePost(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'sid' => 'required'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+
+        $group = GroupService::get($gid);
+        abort_if(!$group || $gid != $group['id'], 422, 'Invalid group');
+        abort_if(!GroupService::canLike($gid, $pid), 422, 'You cannot interact with this content at this time');
+        abort_if(!GroupService::isMember($gid, $pid), 403, 'Not a member of group');
+        $gp = GroupCommentService::get($gid, $sid);
+        abort_if(!$gp, 422, 'Invalid status');
+        $count = $gp['favourites_count'] ?? 0;
+
+        $like = GroupLike::firstOrCreate([
+            'group_id' => $gid,
+            'profile_id' => $pid,
+            'comment_id' => $sid,
+        ]);
+
+        if($like->wasRecentlyCreated) {
+            // update parent post like count
+            $parent = GroupComment::find($sid);
+            abort_if(!$parent || $parent->group_id != $gid, 422, 'Invalid status');
+            $parent->likes_count = $parent->likes_count + 1;
+            $parent->save();
+            GroupsLikeService::add($pid, $sid);
+            // invalidate cache
+            GroupCommentService::del($gid, $sid);
+            $count++;
+            GroupService::log(
+                $gid,
+                $pid,
+                'group:like',
+                null,
+                GroupLike::class,
+                $like->id
+            );
+        }
+
+        $response = ['code' => 200, 'msg' => 'Like saved', 'count' => $count];
+
+        return $response;
+    }
+
+    public function unlikePost(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'sid' => 'required'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+
+        $group = GroupService::get($gid);
+        abort_if(!$group || $gid != $group['id'], 422, 'Invalid group');
+        abort_if(!GroupService::canLike($gid, $pid), 422, 'You cannot interact with this content at this time');
+        abort_if(!GroupService::isMember($gid, $pid), 403, 'Not a member of group');
+        $gp = GroupCommentService::get($gid, $sid);
+        abort_if(!$gp, 422, 'Invalid status');
+        $count = $gp['favourites_count'] ?? 0;
+
+        $like = GroupLike::where([
+            'group_id' => $gid,
+            'profile_id' => $pid,
+            'comment_id' => $sid,
+        ])->first();
+
+        if($like) {
+            $like->delete();
+            $parent = GroupComment::find($sid);
+            abort_if(!$parent || $parent->group_id != $gid, 422, 'Invalid status');
+            $parent->likes_count = $parent->likes_count - 1;
+            $parent->save();
+            GroupsLikeService::remove($pid, $sid);
+            // invalidate cache
+            GroupCommentService::del($gid, $sid);
+            $count--;
+        }
+
+        $response = ['code' => 200, 'msg' => 'Unliked post', 'count' => $count];
+
+        return $response;
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsDiscoverController.php b/app/Http/Controllers/Groups/GroupsDiscoverController.php
new file mode 100644
index 000000000..2194807de
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsDiscoverController.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Follower;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupMember;
+use App\Models\GroupInvitation;
+
+class GroupsDiscoverController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function getDiscoverPopular(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $groups = Group::orderByDesc('member_count')
+            ->take(12)
+            ->pluck('id')
+            ->map(function($id) {
+                return GroupService::get($id);
+            })
+            ->filter(function($id) {
+                return $id;
+            })
+            ->take(6)
+            ->values();
+        return $groups;
+    }
+
+    public function getDiscoverNew(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $groups = Group::latest()
+            ->take(12)
+            ->pluck('id')
+            ->map(function($id) {
+                return GroupService::get($id);
+            })
+            ->filter(function($id) {
+                return $id;
+            })
+            ->take(6)
+            ->values();
+        return $groups;
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsFeedController.php b/app/Http/Controllers/Groups/GroupsFeedController.php
new file mode 100644
index 000000000..bb04e2487
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsFeedController.php
@@ -0,0 +1,188 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Services\UserFilterService;
+use App\Services\Groups\GroupFeedService;
+use App\Services\Groups\GroupPostService;
+use App\Services\RelationshipService;
+use App\Services\Groups\GroupsLikeService;
+use App\Follower;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupPost;
+use App\Models\GroupInvitation;
+
+class GroupsFeedController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function getSelfFeed(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $pid = $request->user()->profile_id;
+        $limit = $request->input('limit', 5);
+        $page = $request->input('page');
+        $initial = $request->has('initial');
+
+        if($initial) {
+            $res = Cache::remember('groups:self:feed:' . $pid, 900, function() use($pid) {
+                return $this->getSelfFeedV0($pid, 5, null);
+            });
+        } else {
+            abort_if($page && $page > 5, 422);
+            $res = $this->getSelfFeedV0($pid, $limit, $page);
+        }
+
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    protected function getSelfFeedV0($pid, $limit, $page)
+    {
+        return GroupPost::join('group_members', 'group_posts.group_id', 'group_members.group_id')
+            ->select('group_posts.*', 'group_members.group_id', 'group_members.profile_id')
+            ->where('group_members.profile_id', $pid)
+            ->whereIn('group_posts.type', ['text', 'photo', 'video'])
+            ->orderByDesc('group_posts.id')
+            ->limit($limit)
+            // ->pluck('group_posts.status_id')
+            ->simplePaginate($limit)
+            ->map(function($gp) use($pid) {
+                $status = GroupPostService::get($gp['group_id'], $gp['id']);
+
+                if(!$status) {
+                    return false;
+                }
+
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['id']);
+                $status['favourites_count'] = GroupsLikeService::count($gp['id']);
+                $status['pf_type'] = $gp['type'];
+                $status['visibility'] = 'public';
+                $status['url'] = url("/groups/{$gp['group_id']}/p/{$gp['id']}");
+                $status['group'] = GroupService::get($gp['group_id']);
+                $status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$status['account']['id']}");
+
+                return $status;
+        });
+    }
+
+    public function getGroupProfileFeed(Request $request, $id, $pid)
+    {
+        abort_if(!$request->user(), 404);
+        $cid = $request->user()->profile_id;
+
+        $group = Group::findOrFail($id);
+        abort_if(!$group->isMember($pid), 404);
+
+        $feed = GroupPost::whereGroupId($id)
+            ->whereProfileId($pid)
+            ->latest()
+            ->paginate(3)
+            ->map(function($gp) use($pid) {
+                $status = GroupPostService::get($gp['group_id'], $gp['id']);
+                if(!$status) {
+                    return false;
+                }
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['id']);
+                $status['favourites_count'] = GroupsLikeService::count($gp['id']);
+                $status['pf_type'] = $gp['type'];
+                $status['visibility'] = 'public';
+                $status['url'] = $gp->url();
+
+                // if($gp['type'] == 'poll') {
+                //     $status['poll'] = PollService::get($status['id']);
+                // }
+
+                $status['account']['url'] = "/groups/{$gp['group_id']}/user/{$status['account']['id']}";
+
+                return $status;
+            })
+            ->filter(function($status) {
+                return $status;
+            });
+
+        return $feed;
+    }
+
+    public function getGroupFeed(Request $request, $id)
+    {
+        $group = Group::findOrFail($id);
+        $user = $request->user();
+        $pid = optional($user)->profile_id ?? false;
+        abort_if(!$group->isMember($pid), 404);
+        $max = $request->input('max_id');
+        $limit = $request->limit ?? 3;
+        $filtered = $user ? UserFilterService::filters($user->profile_id) : [];
+
+        // $posts = GroupPost::whereGroupId($group->id)
+        //  ->when($maxId, function($q, $maxId) {
+        //      return $q->where('status_id', '<', $maxId);
+        //  })
+        //  ->whereNull('in_reply_to_id')
+        //  ->orderByDesc('status_id')
+        //  ->simplePaginate($limit)
+        //  ->map(function($gp) use($pid) {
+        //      $status = StatusService::get($gp['status_id'], false);
+        //      if(!$status) {
+        //          return false;
+        //      }
+        //      $status['favourited'] = (bool) LikeService::liked($pid, $gp['status_id']);
+        //      $status['favourites_count'] = LikeService::count($gp['status_id']);
+        //      $status['pf_type'] = $gp['type'];
+        //      $status['visibility'] = 'public';
+        //      $status['url'] = $gp->url();
+
+        //      if($gp['type'] == 'poll') {
+        //          $status['poll'] = PollService::get($status['id']);
+        //      }
+
+        //      $status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$status['account']['id']}");
+
+        //      return $status;
+        //  })->filter(function($status) {
+        //      return $status;
+        //  });
+        // return $posts;
+
+        Cache::remember('api:v1:timelines:public:cache_check', 10368000, function() use($id) {
+            if(GroupFeedService::count($id) == 0) {
+                GroupFeedService::warmCache($id, true, 400);
+            }
+        });
+
+        if ($max) {
+            $feed = GroupFeedService::getRankedMaxId($id, $max, $limit);
+        } else {
+            $feed = GroupFeedService::get($id, 0, $limit);
+        }
+
+        $res = collect($feed)
+        ->map(function($k) use($user, $id) {
+            $status = GroupPostService::get($id, $k);
+            if($status && $user) {
+                $pid = $user->profile_id;
+                $sid = $status['account']['id'];
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $status['id']);
+                $status['favourites_count'] = GroupsLikeService::count($status['id']);
+                $status['relationship'] = $pid == $sid ? [] : RelationshipService::get($pid, $sid);
+            }
+            return $status;
+        })
+        ->filter(function($s) use($filtered) {
+            return $s && in_array($s['account']['id'], $filtered) == false;
+        })
+        ->values()
+        ->toArray();
+
+        return $res;
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsMemberController.php b/app/Http/Controllers/Groups/GroupsMemberController.php
new file mode 100644
index 000000000..3bfe086a2
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsMemberController.php
@@ -0,0 +1,214 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\GroupService;
+use App\Models\Group;
+use App\Models\GroupCategory;
+use App\Models\GroupHashtag;
+use App\Models\GroupPostHashtag;
+use App\Models\GroupMember;
+use App\Services\AccountService;
+use App\Services\FollowerService;
+use App\Services\Groups\GroupAccountService;
+use App\Services\Groups\GroupHashtagService;
+use App\Jobs\GroupsPipeline\MemberJoinApprovedPipeline;
+use App\Jobs\GroupsPipeline\MemberJoinRejectedPipeline;
+
+class GroupsMemberController extends Controller
+{
+    public function getGroupMembers(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'limit' => 'nullable|integer|min:3|max:10'
+        ]);
+
+        abort_if(!$request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $members = GroupMember::whereGroupId($gid)
+            ->whereJoinRequest(false)
+            ->simplePaginate(10)
+            ->map(function($member) use($pid) {
+                $account = AccountService::get($member['profile_id']);
+                $account['role'] = $member['role'];
+                $account['joined'] = $member['created_at'];
+                $account['following'] = $pid != $member['profile_id'] ?
+                    FollowerService::follows($pid, $member['profile_id']) :
+                    null;
+                $account['url'] = url("/groups/{$member->group_id}/user/{$member['profile_id']}");
+                return $account;
+            });
+
+        return response()->json($members->toArray(), 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function getGroupMemberJoinRequests(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $id = $request->input('gid');
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        return GroupMember::whereGroupId($group->id)
+            ->whereJoinRequest(true)
+            ->whereNull('rejected_at')
+            ->paginate(10)
+            ->map(function($member) {
+                return AccountService::get($member->profile_id);
+            });
+    }
+
+    public function handleGroupMemberJoinRequest(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $id = $request->input('gid');
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+        $mid = $request->input('pid');
+        abort_if($group->isMember($mid), 404);
+
+        $this->validate($request, [
+            'gid' => 'required',
+            'pid' => 'required',
+            'action' => 'required|in:approve,reject'
+        ]);
+
+        $action = $request->input('action');
+
+        $member = GroupMember::whereGroupId($group->id)
+            ->whereProfileId($mid)
+            ->firstOrFail();
+
+        if($action == 'approve') {
+            MemberJoinApprovedPipeline::dispatch($member)->onQueue('groups');
+        } else if ($action == 'reject') {
+            MemberJoinRejectedPipeline::dispatch($member)->onQueue('groups');
+        }
+
+        return $request->all();
+    }
+
+    public function getGroupMember(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'pid' => 'required'
+        ]);
+
+        abort_if(!$request->user(), 404);
+        $gid = $request->input('gid');
+        $group = Group::findOrFail($gid);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $member_id = $request->input('pid');
+        $member = GroupMember::whereGroupId($gid)
+            ->whereProfileId($member_id)
+            ->firstOrFail();
+
+        $account = GroupAccountService::get($group->id, $member['profile_id']);
+        $account['role'] = $member['role'];
+        $account['joined'] = $member['created_at'];
+        $account['following'] = $pid != $member['profile_id'] ?
+            FollowerService::follows($pid, $member['profile_id']) :
+            null;
+        $account['url'] = url("/groups/{$gid}/user/{$member_id}");
+
+        return response()->json($account, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function getGroupMemberCommonIntersections(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $cid = $request->user()->profile_id;
+
+        // $this->validate($request, [
+        //  'gid' => 'required',
+        //  'pid' => 'required'
+        // ]);
+
+        $gid = $request->input('gid');
+        $pid = $request->input('pid');
+
+        if($pid === $cid) {
+            return [];
+        }
+
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($cid), 404);
+        abort_if(!$group->isMember($pid), 404);
+
+        $self = GroupPostHashtag::selectRaw('group_post_hashtags.*, count(*) as countr')
+            ->whereProfileId($cid)
+            ->groupBy('hashtag_id')
+            ->orderByDesc('countr')
+            ->take(20)
+            ->pluck('hashtag_id');
+        $user = GroupPostHashtag::selectRaw('group_post_hashtags.*, count(*) as countr')
+            ->whereProfileId($pid)
+            ->groupBy('hashtag_id')
+            ->orderByDesc('countr')
+            ->take(20)
+            ->pluck('hashtag_id');
+
+        $topics = $self->intersect($user)
+            ->values()
+            ->shuffle()
+            ->take(3)
+            ->map(function($id) use($group) {
+                $tag = GroupHashtagService::get($id);
+                $tag['url'] = url("/groups/{$group->id}/topics/{$tag['slug']}?src=upt");
+                return $tag;
+            });
+
+        // $friends = DB::table('followers as u')
+        //  ->join('followers as s', 'u.following_id', '=', 's.following_id')
+        //  ->where('s.profile_id', $cid)
+        //  ->where('u.profile_id', $pid)
+        //  ->inRandomOrder()
+        //  ->take(10)
+        //  ->pluck('s.following_id')
+        //  ->map(function($id) use($gid) {
+        //      $res = AccountService::get($id);
+        //      $res['url'] = url("/groups/{$gid}/user/{$id}");
+        //      return $res;
+        //  });
+        $mutualGroups = GroupService::mutualGroups($cid, $pid, [$gid]);
+
+        $mutualFriends = collect(FollowerService::mutualIds($cid, $pid))
+            ->map(function($id) use($gid) {
+                $res = AccountService::get($id);
+                if(GroupService::isMember($gid, $id)) {
+                    $res['url'] = url("/groups/{$gid}/user/{$id}");
+                } else if(!$res['local']) {
+                    $res['url'] = url("/i/web/profile/_/{$id}");
+                }
+                return $res;
+            });
+        $mutualFriendsCount = FollowerService::mutualCount($cid, $pid);
+
+        $res = [
+            'groups_count' => $mutualGroups['count'],
+            'groups' => $mutualGroups['groups'],
+            'topics' => $topics,
+            'friends_count' => $mutualFriendsCount,
+            'friends' => $mutualFriends,
+        ];
+
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsMetaController.php b/app/Http/Controllers/Groups/GroupsMetaController.php
new file mode 100644
index 000000000..bc1e58b33
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsMetaController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\GroupService;
+use App\Models\Group;
+
+class GroupsMetaController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function deleteGroup(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $id = $request->input('gid');
+        $group = Group::findOrFail($id);
+        $pid = $request->user()->profile_id;
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(!in_array($group->selfRole($pid), ['founder', 'admin']), 404);
+
+        $group->status = "delete";
+        $group->save();
+        GroupService::del($group->id);
+        return [200];
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsNotificationsController.php b/app/Http/Controllers/Groups/GroupsNotificationsController.php
new file mode 100644
index 000000000..dafc6c821
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsNotificationsController.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\StatusService;
+use App\Services\GroupService;
+use App\Models\Group;
+use App\Notification;
+
+class GroupsNotificationsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function selfGlobalNotifications(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $pid = $request->user()->profile_id;
+
+        $res = Notification::whereProfileId($pid)
+            ->where('action', 'like', 'group%')
+            ->latest()
+            ->paginate(10)
+            ->map(function($n) {
+                $res = [
+                    'id' => $n->id,
+                    'type' => $n->action,
+                    'account' => AccountService::get($n->actor_id),
+                    'object' => [
+                        'id' => $n->item_id,
+                        'type' => last(explode('\\', $n->item_type)),
+                    ],
+                    'created_at' => $n->created_at->format('c')
+                ];
+
+                if($res['object']['type'] == 'Status' || in_array($n->action, ['group:comment'])) {
+                    $res['status'] = StatusService::get($n->item_id, false);
+                    $res['group'] = GroupService::get($res['status']['gid']);
+                }
+
+                if($res['object']['type'] == 'Group') {
+                    $res['group'] = GroupService::get($n->item_id);
+                }
+
+                return $res;
+            });
+
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsPostController.php b/app/Http/Controllers/Groups/GroupsPostController.php
new file mode 100644
index 000000000..11b4799fe
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsPostController.php
@@ -0,0 +1,420 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Bus;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Services\Groups\GroupFeedService;
+use App\Services\Groups\GroupPostService;
+use App\Services\Groups\GroupMediaService;
+use App\Services\Groups\GroupsLikeService;
+use App\Follower;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupHashtag;
+use App\Models\GroupPost;
+use App\Models\GroupLike;
+use App\Models\GroupMember;
+use App\Models\GroupInvitation;
+use App\Models\GroupMedia;
+use App\Jobs\GroupsPipeline\ImageResizePipeline;
+use App\Jobs\GroupsPipeline\ImageS3UploadPipeline;
+use App\Jobs\GroupsPipeline\NewPostPipeline;
+
+class GroupsPostController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function storePost(Request $request)
+    {
+        $this->validate($request, [
+            'group_id' => 'required|exists:groups,id',
+            'caption' => 'sometimes|string|max:'.config_cache('pixelfed.max_caption_length', 500),
+            'pollOptions' => 'sometimes|array|min:1|max:4'
+        ]);
+
+        $group = Group::findOrFail($request->input('group_id'));
+        $pid = $request->user()->profile_id;
+        $caption = $request->input('caption');
+        $type = $request->input('type', 'text');
+
+        abort_if(!GroupService::canPost($group->id, $pid), 422, 'You cannot create new posts at this time');
+
+        if($type == 'text') {
+            abort_if(strlen(e($caption)) == 0, 403);
+        }
+
+        $gp = new GroupPost;
+        $gp->group_id = $group->id;
+        $gp->profile_id = $pid;
+        $gp->caption = e($caption);
+        $gp->type = $type;
+        $gp->visibility = 'draft';
+        $gp->save();
+
+        $status = $gp;
+
+        NewPostPipeline::dispatchSync($gp);
+
+        // NewStatusPipeline::dispatch($status, $gp);
+
+        if($type == 'poll') {
+            // Polls not supported yet
+            // $poll = new Poll;
+            // $poll->status_id = $status->id;
+            // $poll->profile_id = $status->profile_id;
+            // $poll->poll_options = $request->input('pollOptions');
+            // $poll->expires_at = now()->addMinutes($request->input('expiry'));
+            // $poll->cached_tallies = collect($poll->poll_options)->map(function($o) {
+            //     return 0;
+            // })->toArray();
+            // $poll->save();
+            // sleep(5);
+        }
+        if($type == 'photo') {
+            $photo = $request->file('photo');
+            $storagePath = GroupMediaService::path($group->id, $pid, $status->id);
+            // $storagePath = 'public/g/' . $group->id . '/p/' . $status->id;
+            $path = $photo->storePublicly($storagePath);
+            // $hash = \hash_file('sha256', $photo);
+
+            $media = new GroupMedia();
+            $media->group_id = $group->id;
+            $media->status_id = $status->id;
+            $media->profile_id = $request->user()->profile_id;
+            $media->media_path = $path;
+            $media->size = $photo->getSize();
+            $media->mime = $photo->getMimeType();
+            $media->save();
+
+            // Bus::chain([
+            //     new ImageResizePipeline($media),
+            //     new ImageS3UploadPipeline($media),
+            // ])->dispatch($media);
+
+            ImageResizePipeline::dispatchSync($media);
+            ImageS3UploadPipeline::dispatchSync($media);
+            // ImageOptimize::dispatch($media);
+            // delay response while background job optimizes media
+            // sleep(5);
+        }
+        if($type == 'video') {
+            $video = $request->file('video');
+            $storagePath = 'public/g/' . $group->id . '/p/' . $status->id;
+            $path = $video->storePublicly($storagePath);
+            $hash = \hash_file('sha256', $video);
+
+            $media = new Media();
+            $media->status_id = $status->id;
+            $media->profile_id = $request->user()->profile_id;
+            $media->user_id = $request->user()->id;
+            $media->media_path = $path;
+            $media->original_sha256 = $hash;
+            $media->size = $video->getSize();
+            $media->mime = $video->getMimeType();
+            $media->save();
+
+            VideoThumbnail::dispatch($media);
+            sleep(15);
+        }
+
+        GroupService::log(
+            $group->id,
+            $pid,
+            'group:status:created',
+            [
+                'type' => $gp->type,
+                'status_id' => $status->id
+            ],
+            GroupPost::class,
+            $gp->id
+        );
+
+        $s = GroupPostService::get($status->group_id, $status->id);
+        GroupFeedService::add($group->id, $gp->id);
+        Cache::forget('groups:self:feed:' . $pid);
+
+        $s['pf_type'] = $type;
+        $s['visibility'] = 'public';
+        $s['url'] = $gp->url();
+
+        if($type == 'poll') {
+            $s['poll'] = PollService::get($status->id);
+        }
+
+        $group->last_active_at = now();
+        $group->save();
+
+        return $s;
+    }
+
+    public function deletePost(Request $request)
+    {
+        abort_if(!$request->user(), 403);
+
+        $this->validate($request, [
+          'id'  => 'required|integer|min:1',
+          'gid' => 'required|integer|min:1'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $gp = GroupPost::whereGroupId($status->group_id)->findOrFail($request->input('id'));
+        abort_if($gp->profile_id != $pid && $group->profile_id != $pid, 403);
+        $cached = GroupPostService::get($status->group_id, $status->id);
+
+        if($cached) {
+            $cached = collect($cached)->filter(function($r, $k) {
+                return in_array($k, [
+                    'id',
+                    'sensitive',
+                    'pf_type',
+                    'media_attachments',
+                    'content_text',
+                    'created_at'
+                ]);
+            });
+        }
+
+        GroupService::log(
+            $status->group_id,
+            $request->user()->profile_id,
+            'group:status:deleted',
+            [
+                'type' => $gp->type,
+                'status_id' => $status->id,
+                'original' => $cached
+            ],
+            GroupPost::class,
+            $gp->id
+        );
+
+        $user = $request->user();
+
+        // if($status->profile_id != $user->profile->id &&
+        //  $user->is_admin == true &&
+        //  $status->uri == null
+        // ) {
+        //  $media = $status->media;
+
+        //  $ai = new AccountInterstitial;
+        //  $ai->user_id = $status->profile->user_id;
+        //  $ai->type = 'post.removed';
+        //  $ai->view = 'account.moderation.post.removed';
+        //  $ai->item_type = 'App\Status';
+        //  $ai->item_id = $status->id;
+        //  $ai->has_media = (bool) $media->count();
+        //  $ai->blurhash = $media->count() ? $media->first()->blurhash : null;
+        //  $ai->meta = json_encode([
+        //      'caption' => $status->caption,
+        //      'created_at' => $status->created_at,
+        //      'type' => $status->type,
+        //      'url' => $status->url(),
+        //      'is_nsfw' => $status->is_nsfw,
+        //      'scope' => $status->scope,
+        //      'reblog' => $status->reblog_of_id,
+        //      'likes_count' => $status->likes_count,
+        //      'reblogs_count' => $status->reblogs_count,
+        //  ]);
+        //  $ai->save();
+
+        //  $u = $status->profile->user;
+        //  $u->has_interstitial = true;
+        //  $u->save();
+        // }
+
+        if($status->in_reply_to_id) {
+            $parent = GroupPost::find($status->in_reply_to_id);
+            if($parent) {
+                $parent->reply_count = GroupPost::whereInReplyToId($parent->id)->count();
+                $parent->save();
+                GroupPostService::del($group->id, GroupService::sidToGid($group->id, $parent->id));
+            }
+        }
+
+        GroupPostService::del($group->id, $gp->id);
+        GroupFeedService::del($group->id, $gp->id);
+        if ($status->profile_id == $user->profile->id || $user->is_admin == true) {
+            // Cache::forget('profile:status_count:'.$status->profile_id);
+            StatusDelete::dispatch($status);
+        }
+
+        if($request->wantsJson()) {
+            return response()->json(['Status successfully deleted.']);
+        } else {
+            return redirect($user->url());
+        }
+    }
+
+    public function likePost(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'sid' => 'required'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+
+        $group = GroupService::get($gid);
+        abort_if(!$group, 422, 'Invalid group');
+        abort_if(!GroupService::canLike($gid, $pid), 422, 'You cannot interact with this content at this time');
+        abort_if(!GroupService::isMember($gid, $pid), 403, 'Not a member of group');
+        $gp = GroupPostService::get($gid, $sid);
+        abort_if(!$gp, 422, 'Invalid status');
+        $count = $gp['favourites_count'] ?? 0;
+
+        $like = GroupLike::firstOrCreate([
+            'group_id' => $gid,
+            'profile_id' => $pid,
+            'status_id' => $sid,
+        ]);
+
+        if($like->wasRecentlyCreated) {
+            // update parent post like count
+            $parent = GroupPost::whereGroupId($gid)->find($sid);
+            abort_if(!$parent, 422, 'Invalid status');
+            $parent->likes_count = $parent->likes_count + 1;
+            $parent->save();
+            GroupsLikeService::add($pid, $sid);
+            // invalidate cache
+            GroupPostService::del($gid, $sid);
+            $count++;
+            GroupService::log(
+                $gid,
+                $pid,
+                'group:like',
+                null,
+                GroupLike::class,
+                $like->id
+            );
+        }
+        // if (GroupLike::whereGroupId($gid)->whereStatusId($sid)->whereProfileId($pid)->exists()) {
+        //     $like = GroupLike::whereProfileId($pid)->whereStatusId($sid)->firstOrFail();
+        //     // UnlikePipeline::dispatch($like);
+        //     $count = $gp->likes_count - 1;
+        //     $action = 'group:unlike';
+        // } else {
+        //     $count = $gp->likes_count;
+        //     $like = GroupLike::firstOrCreate([
+        //         'group_id' => $gid,
+        //         'profile_id' => $pid,
+        //         'status_id' => $sid
+        //     ]);
+        //     if($like->wasRecentlyCreated == true) {
+        //         $count++;
+        //         $gp->likes_count = $count;
+        //         $like->save();
+        //         $gp->save();
+        //         // LikePipeline::dispatch($like);
+        //         $action = 'group:like';
+        //     }
+        // }
+
+
+        // Cache::forget('status:'.$status->id.':likedby:userid:'.$request->user()->id);
+        // StatusService::del($status->id);
+
+        $response = ['code' => 200, 'msg' => 'Like saved', 'count' => $count];
+
+        return $response;
+    }
+
+    public function unlikePost(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'sid' => 'required'
+        ]);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+
+        $group = GroupService::get($gid);
+        abort_if(!$group, 422, 'Invalid group');
+        abort_if(!GroupService::canLike($gid, $pid), 422, 'You cannot interact with this content at this time');
+        abort_if(!GroupService::isMember($gid, $pid), 403, 'Not a member of group');
+        $gp = GroupPostService::get($gid, $sid);
+        abort_if(!$gp, 422, 'Invalid status');
+        $count = $gp['favourites_count'] ?? 0;
+
+        $like = GroupLike::where([
+            'group_id' => $gid,
+            'profile_id' => $pid,
+            'status_id' => $sid,
+        ])->first();
+
+        if($like) {
+            $like->delete();
+            $parent = GroupPost::whereGroupId($gid)->find($sid);
+            abort_if(!$parent, 422, 'Invalid status');
+            $parent->likes_count = $parent->likes_count - 1;
+            $parent->save();
+            GroupsLikeService::remove($pid, $sid);
+            // invalidate cache
+            GroupPostService::del($gid, $sid);
+            $count--;
+        }
+
+        $response = ['code' => 200, 'msg' => 'Unliked post', 'count' => $count];
+
+        return $response;
+    }
+
+    public function getGroupMedia(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'type' => 'required|in:photo,video'
+        ]);
+
+        abort_if(!$request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $type = $request->input('type');
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $media = GroupPost::whereGroupId($gid)
+            ->whereType($type)
+            ->latest()
+            ->simplePaginate(20)
+            ->map(function($gp) use($pid) {
+                $status = GroupPostService::get($gp['group_id'], $gp['id']);
+                if(!$status) {
+                    return false;
+                }
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['id']);
+                $status['favourites_count'] = GroupsLikeService::count($gp['id']);
+                $status['pf_type'] = $gp['type'];
+                $status['visibility'] = 'public';
+                $status['url'] = $gp->url();
+
+                // if($gp['type'] == 'poll') {
+                //     $status['poll'] = PollService::get($status['id']);
+                // }
+
+                return $status;
+            })->filter(function($status) {
+                return $status;
+            });
+
+        return response()->json($media->toArray(), 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsSearchController.php b/app/Http/Controllers/Groups/GroupsSearchController.php
new file mode 100644
index 000000000..560436f46
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsSearchController.php
@@ -0,0 +1,221 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Follower;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupMember;
+use App\Models\GroupInvitation;
+use App\Util\ActivityPub\Helpers;
+use App\Services\Groups\GroupActivityPubService;
+
+class GroupsSearchController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function inviteFriendsToGroup(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $this->validate($request, [
+            'uids' => 'required',
+            'g' => 'required',
+        ]);
+        $uid = $request->input('uids');
+        $gid = $request->input('g');
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 404);
+        abort_if(
+            GroupInvitation::whereGroupId($group->id)
+                ->whereFromProfileId($pid)
+                ->count() >= 20,
+            422,
+            'Invite limit reached'
+        );
+
+        $profiles = collect($uid)
+            ->map(function($u) {
+                return Profile::find($u);
+            })
+            ->filter(function($u) use($pid) {
+                return $u &&
+                    $u->id != $pid &&
+                    isset($u->id) &&
+                    Follower::whereFollowingId($pid)
+                        ->whereProfileId($u->id)
+                        ->exists();
+            })
+            ->filter(function($u) use($group, $pid) {
+                return GroupInvitation::whereGroupId($group->id)
+                    ->whereFromProfileId($pid)
+                    ->whereToProfileId($u->id)
+                    ->exists() == false;
+            })
+            ->each(function($u) use($gid, $pid) {
+                $gi = new GroupInvitation;
+                $gi->group_id = $gid;
+                $gi->from_profile_id = $pid;
+                $gi->to_profile_id = $u->id;
+                $gi->to_local = true;
+                $gi->from_local = $u->domain == null;
+                $gi->save();
+                // GroupMemberInvite::dispatch($gi);
+            });
+        return [200];
+    }
+
+    public function searchFriendsToInvite(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $this->validate($request, [
+            'q' => 'required|min:2|max:40',
+            'g' => 'required',
+            'v' => 'required|in:0.2'
+        ]);
+        $q = $request->input('q');
+        $gid = $request->input('g');
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 404);
+
+        $res = Profile::where('username', 'like', "%{$q}%")
+            ->whereNull('profiles.domain')
+            ->join('followers', 'profiles.id', '=', 'followers.profile_id')
+            ->where('followers.following_id', $pid)
+            ->take(10)
+            ->get()
+            ->filter(function($p) use($group) {
+                return $group->isMember($p->profile_id) == false;
+            })
+            ->filter(function($p) use($group, $pid) {
+                return GroupInvitation::whereGroupId($group->id)
+                    ->whereFromProfileId($pid)
+                    ->whereToProfileId($p->profile_id)
+                    ->exists() == false;
+            })
+            ->map(function($gm) use ($gid) {
+                $a = AccountService::get($gm->profile_id);
+                return [
+                    'id' => (string) $gm->profile_id,
+                    'username' => $a['acct'],
+                    'url' => url("/groups/{$gid}/user/{$a['id']}?rf=group_search")
+                ];
+            })
+            ->values();
+
+        return $res;
+    }
+
+    public function searchGlobalResults(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $this->validate($request, [
+            'q' => 'required|min:2|max:140',
+            'v' => 'required|in:0.2'
+        ]);
+        $q = $request->input('q');
+
+        if(str_starts_with($q, 'https://')) {
+            $res = Helpers::getSignedFetch($q);
+            if($res && $res = json_decode($res, true)) {
+
+            }
+            if($res && isset($res['type']) && in_array($res['type'], ['Group', 'Note', 'Page'])) {
+                if($res['type'] === 'Group') {
+                    return GroupActivityPubService::fetchGroup($q, true);
+                }
+                $resp = GroupActivityPubService::fetchGroupPost($q, true);
+                $resp['name'] = 'Group Post';
+                $resp['url'] = '/groups/' . $resp['group_id'] . '/p/' . $resp['id'];
+                return [$resp];
+            }
+        }
+        return Group::whereNull('status')
+            ->where('name', 'like', '%' . $q . '%')
+            ->orderBy('id')
+            ->take(10)
+            ->pluck('id')
+            ->map(function($group) {
+                return GroupService::get($group);
+            });
+    }
+
+    public function searchLocalAutocomplete(Request $request)
+    {
+        abort_if(!$request->user(), 404);
+        $this->validate($request, [
+            'q' => 'required|min:2|max:40',
+            'g' => 'required',
+            'v' => 'required|in:0.2'
+        ]);
+        $q = $request->input('q');
+        $gid = $request->input('g');
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 404);
+
+        $res = GroupMember::whereGroupId($gid)
+            ->join('profiles', 'group_members.profile_id', '=', 'profiles.id')
+            ->where('profiles.username', 'like', "%{$q}%")
+            ->take(10)
+            ->get()
+            ->map(function($gm) use ($gid) {
+                $a = AccountService::get($gm->profile_id);
+                return [
+                    'username' => $a['username'],
+                    'url' => url("/groups/{$gid}/user/{$a['id']}?rf=group_search")
+                ];
+            });
+        return $res;
+    }
+
+    public function searchAddRecent(Request $request)
+    {
+        $this->validate($request, [
+            'q' => 'required|min:2|max:40',
+            'g' => 'required',
+        ]);
+        $q = $request->input('q');
+        $gid = $request->input('g');
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 404);
+
+        $key = 'groups:search:recent:'.$gid.':pid:'.$pid;
+        $ttl = now()->addDays(14);
+        $res = Cache::get($key);
+        if(!$res) {
+            $val = json_encode([$q]);
+        } else {
+            $ex = collect(json_decode($res))
+                ->prepend($q)
+                ->unique('value')
+                ->slice(0, 3)
+                ->values()
+                ->all();
+            $val = json_encode($ex);
+        }
+        Cache::put($key, $val, $ttl);
+        return 200;
+    }
+
+    public function searchGetRecent(Request $request)
+    {
+        $gid = $request->input('g');
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        abort_if(!$group->isMember($pid), 404);
+        $key = 'groups:search:recent:'.$gid.':pid:'.$pid;
+        return Cache::get($key);
+    }
+}
diff --git a/app/Http/Controllers/Groups/GroupsTopicController.php b/app/Http/Controllers/Groups/GroupsTopicController.php
new file mode 100644
index 000000000..c3d8ecda7
--- /dev/null
+++ b/app/Http/Controllers/Groups/GroupsTopicController.php
@@ -0,0 +1,133 @@
+<?php
+
+namespace App\Http\Controllers\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Services\AccountService;
+use App\Services\GroupService;
+use App\Services\Groups\GroupPostService;
+use App\Services\Groups\GroupsLikeService;
+use App\Follower;
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupHashtag;
+use App\Models\GroupInvitation;
+use App\Models\GroupMember;
+use App\Models\GroupPostHashtag;
+use App\Models\GroupPost;
+
+class GroupsTopicController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function groupTopics(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+        ]);
+
+        abort_if(!$request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $posts = GroupPostHashtag::join('group_hashtags', 'group_hashtags.id', '=', 'group_post_hashtags.hashtag_id')
+            ->selectRaw('group_hashtags.*, group_post_hashtags.*, count(group_post_hashtags.hashtag_id) as ht_count')
+            ->where('group_post_hashtags.group_id', $gid)
+            ->orderByDesc('ht_count')
+            ->limit(10)
+            ->pluck('group_post_hashtags.hashtag_id', 'ht_count')
+            ->map(function($id, $key) use ($gid) {
+                $tag = GroupHashtag::find($id);
+                return [
+                    'hid' => $id,
+                    'name' => $tag->name,
+                    'url' => url("/groups/{$gid}/topics/{$tag->slug}"),
+                    'count' => $key
+                ];
+            })->values();
+
+        return response()->json($posts, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function groupTopicTag(Request $request)
+    {
+        $this->validate($request, [
+            'gid' => 'required',
+            'name' => 'required'
+        ]);
+
+        abort_if(!$request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $gid = $request->input('gid');
+        $limit = $request->input('limit', 3);
+        $group = Group::findOrFail($gid);
+
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+
+        $name = $request->input('name');
+        $hashtag = GroupHashtag::whereName($name)->first();
+
+        if(!$hashtag) {
+            return [];
+        }
+
+        // $posts = GroupPost::whereGroupId($gid)
+        //  ->select('status_hashtags.*', 'group_posts.*')
+        //  ->where('status_hashtags.hashtag_id', $hashtag->id)
+        //  ->join('status_hashtags', 'group_posts.status_id', '=', 'status_hashtags.status_id')
+        //  ->orderByDesc('group_posts.status_id')
+        //  ->simplePaginate($limit)
+        //  ->map(function($gp) use($pid) {
+        //      $status = StatusService::get($gp['status_id'], false);
+        //      if(!$status) {
+        //          return false;
+        //      }
+        //      $status['favourited'] = (bool) LikeService::liked($pid, $gp['status_id']);
+        //      $status['favourites_count'] = LikeService::count($gp['status_id']);
+        //      $status['pf_type'] = $gp['type'];
+        //      $status['visibility'] = 'public';
+        //      $status['url'] = $gp->url();
+        //      return $status;
+        //  });
+
+        $posts = GroupPostHashtag::whereGroupId($gid)
+            ->whereHashtagId($hashtag->id)
+            ->orderByDesc('id')
+            ->simplePaginate($limit)
+            ->map(function($gp) use($pid) {
+                $status = GroupPostService::get($gp['group_id'], $gp['status_id']);
+                if(!$status) {
+                    return false;
+                }
+                $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['status_id']);
+                $status['favourites_count'] = GroupsLikeService::count($gp['status_id']);
+                $status['pf_type'] = $status['pf_type'];
+                $status['visibility'] = 'public';
+                return $status;
+            });
+
+        return response()->json($posts, 200, [], JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
+    }
+
+    public function showTopicFeed(Request $request, $gid, $tag)
+    {
+        abort_if(!$request->user(), 404);
+
+        $pid = $request->user()->profile_id;
+        $group = Group::findOrFail($gid);
+        $gid = $group->id;
+        abort_if(!$group->isMember($pid), 403, 'Not a member of group.');
+        return view('groups.topic-feed', compact('gid', 'tag'));
+    }
+}
diff --git a/app/Jobs/GroupPipeline/GroupCommentPipeline.php b/app/Jobs/GroupPipeline/GroupCommentPipeline.php
new file mode 100644
index 000000000..cdae65d10
--- /dev/null
+++ b/app/Jobs/GroupPipeline/GroupCommentPipeline.php
@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use App\Notification;
+use App\Status;
+use App\Models\GroupPost;
+use Cache;
+use DB;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Redis;
+use App\Services\MediaStorageService;
+use App\Services\NotificationService;
+use App\Services\StatusService;
+
+class GroupCommentPipeline implements ShouldQueue
+{
+	use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+	protected $status;
+	protected $comment;
+	protected $groupPost;
+
+	public function __construct(Status $status, Status $comment, $groupPost = null)
+	{
+		$this->status = $status;
+		$this->comment = $comment;
+		$this->groupPost = $groupPost;
+	}
+
+	public function handle()
+	{
+		if($this->status->group_id == null || $this->comment->group_id == null) {
+			return;
+		}
+
+		$this->updateParentReplyCount();
+		$this->generateNotification();
+
+		if($this->groupPost) {
+			$this->updateChildReplyCount();
+		}
+	}
+
+	protected function updateParentReplyCount()
+	{
+		$parent = $this->status;
+		$parent->reply_count = Status::whereInReplyToId($parent->id)->count();
+		$parent->save();
+		StatusService::del($parent->id);
+	}
+
+	protected function updateChildReplyCount()
+	{
+		$gp = $this->groupPost;
+		if($gp->reply_child_id) {
+			$parent = GroupPost::whereStatusId($gp->reply_child_id)->first();
+			if($parent) {
+				$parent->reply_count++;
+				$parent->save();
+			}
+		}
+	}
+
+	protected function generateNotification()
+	{
+		$status = $this->status;
+		$comment = $this->comment;
+
+		$target = $status->profile;
+        $actor = $comment->profile;
+
+        if ($actor->id == $target->id || $status->comments_disabled == true) {
+            return;
+        }
+
+		$notification = DB::transaction(function() use($target, $actor, $comment) {
+			$actorName = $actor->username;
+			$actorUrl = $actor->url();
+			$text = "{$actorName}  commented on your group post.";
+			$html = "<a href='{$actorUrl}' class='profile-link'>{$actorName}</a> commented on your group post.";
+            $notification = new Notification();
+            $notification->profile_id = $target->id;
+            $notification->actor_id = $actor->id;
+            $notification->action = 'group:comment';
+            $notification->item_id = $comment->id;
+            $notification->item_type = "App\Status";
+            $notification->save();
+            return $notification;
+        });
+
+        NotificationService::setNotification($notification);
+        NotificationService::set($notification->profile_id, $notification->id);
+	}
+}
diff --git a/app/Jobs/GroupPipeline/GroupMediaPipeline.php b/app/Jobs/GroupPipeline/GroupMediaPipeline.php
new file mode 100644
index 000000000..1155e5465
--- /dev/null
+++ b/app/Jobs/GroupPipeline/GroupMediaPipeline.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use App\Media;
+use Cache;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Redis;
+use App\Services\MediaStorageService;
+
+class GroupMediaPipeline implements ShouldQueue
+{
+	use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+	protected $media;
+
+	public function __construct(Media $media)
+	{
+		$this->media = $media;
+	}
+
+	public function handle()
+	{
+		MediaStorageService::store($this->media);
+	}
+
+	protected function localToCloud($media)
+	{
+		$path = storage_path('app/'.$media->media_path);
+		$thumb = storage_path('app/'.$media->thumbnail_path);
+
+		$p = explode('/', $media->media_path);
+		$name = array_pop($p);
+		$pt = explode('/', $media->thumbnail_path);
+		$thumbname = array_pop($pt);
+		$storagePath = implode('/', $p);
+
+		$disk = Storage::disk(config('filesystems.cloud'));
+		$file = $disk->putFileAs($storagePath, new File($path), $name, 'public');
+		$url = $disk->url($file);
+		$thumbFile = $disk->putFileAs($storagePath, new File($thumb), $thumbname, 'public');
+		$thumbUrl = $disk->url($thumbFile);
+		$media->thumbnail_url = $thumbUrl;
+		$media->cdn_url = $url;
+		$media->optimized_url = $url;
+		$media->replicated_at = now();
+		$media->save();
+		if($media->status_id) {
+			Cache::forget('status:transformer:media:attachments:' . $media->status_id);
+		}
+	}
+
+}
diff --git a/app/Jobs/GroupPipeline/GroupMemberInvite.php b/app/Jobs/GroupPipeline/GroupMemberInvite.php
new file mode 100644
index 000000000..d2c2bf8ef
--- /dev/null
+++ b/app/Jobs/GroupPipeline/GroupMemberInvite.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\GroupInvitation;
+use App\Notification;
+use App\Profile;
+
+class GroupMemberInvite implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $invite;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupInvitation $invite)
+    {
+        $this->invite = $invite;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $invite = $this->invite;
+        $actor = Profile::find($invite->from_profile_id);
+        $target = Profile::find($invite->to_profile_id);
+
+        if(!$actor || !$target) {
+        	return;
+        }
+
+      	$notification = new Notification;
+      	$notification->profile_id = $target->id;
+      	$notification->actor_id = $actor->id;
+      	$notification->action = 'group:invite';
+      	$notification->item_id = $invite->group_id;
+      	$notification->item_type = 'App\Models\Group';
+      	$notification->save();
+    }
+}
diff --git a/app/Jobs/GroupPipeline/JoinApproved.php b/app/Jobs/GroupPipeline/JoinApproved.php
new file mode 100644
index 000000000..f41c8f698
--- /dev/null
+++ b/app/Jobs/GroupPipeline/JoinApproved.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\GroupMember;
+use App\Notification;
+use App\Services\GroupService;
+
+class JoinApproved implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $member;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMember $member)
+    {
+        $this->member = $member;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $member = $this->member;
+        $member->approved_at = now();
+        $member->join_request = false;
+        $member->role = 'member';
+        $member->save();
+
+        $n = new Notification;
+        $n->profile_id = $member->profile_id;
+        $n->actor_id = $member->profile_id;
+        $n->item_id = $member->group_id;
+        $n->item_type = 'App\Models\Group';
+        $n->save();
+
+        GroupService::del($member->group_id);
+        GroupService::delSelf($member->group_id, $member->profile_id);
+    }
+}
diff --git a/app/Jobs/GroupPipeline/JoinRejected.php b/app/Jobs/GroupPipeline/JoinRejected.php
new file mode 100644
index 000000000..71e1e30c8
--- /dev/null
+++ b/app/Jobs/GroupPipeline/JoinRejected.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\GroupMember;
+use App\Notification;
+use App\Services\GroupService;
+
+class JoinRejected implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $member;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMember $member)
+    {
+        $this->member = $member;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $member = $this->member;
+        $member->rejected_at = now();
+        $member->save();
+
+        $n = new Notification;
+        $n->profile_id = $member->profile_id;
+        $n->actor_id = $member->profile_id;
+        $n->item_id = $member->group_id;
+        $n->item_type = 'App\Models\Group';
+        $n->action = 'group.join.rejected';
+        $n->save();
+    }
+}
diff --git a/app/Jobs/GroupPipeline/LikePipeline.php b/app/Jobs/GroupPipeline/LikePipeline.php
new file mode 100644
index 000000000..bd3e668f7
--- /dev/null
+++ b/app/Jobs/GroupPipeline/LikePipeline.php
@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use Cache, Log;
+use Illuminate\Support\Facades\Redis;
+use App\{Like, Notification};
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Util\ActivityPub\Helpers;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+use App\Transformer\ActivityPub\Verb\Like as LikeTransformer;
+use App\Services\StatusService;
+
+class LikePipeline implements ShouldQueue
+{
+	use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+	protected $like;
+
+	/**
+	 * Delete the job if its models no longer exist.
+	 *
+	 * @var bool
+	 */
+	public $deleteWhenMissingModels = true;
+
+	public $timeout = 5;
+	public $tries = 1;
+
+	/**
+	 * Create a new job instance.
+	 *
+	 * @return void
+	 */
+	public function __construct(Like $like)
+	{
+		$this->like = $like;
+	}
+
+	/**
+	 * Execute the job.
+	 *
+	 * @return void
+	 */
+	public function handle()
+	{
+		$like = $this->like;
+
+		$status = $this->like->status;
+		$actor = $this->like->actor;
+
+		if (!$status) {
+			// Ignore notifications to deleted statuses
+			return;
+		}
+
+		StatusService::refresh($status->id);
+
+		if($status->url && $actor->domain == null) {
+			return $this->remoteLikeDeliver();
+		}
+
+		$exists = Notification::whereProfileId($status->profile_id)
+				  ->whereActorId($actor->id)
+				  ->whereAction('group:like')
+				  ->whereItemId($status->id)
+				  ->whereItemType('App\Status')
+				  ->count();
+
+		if ($actor->id === $status->profile_id || $exists !== 0) {
+			return true;
+		}
+
+		try {
+			$notification = new Notification();
+			$notification->profile_id = $status->profile_id;
+			$notification->actor_id = $actor->id;
+			$notification->action = 'group:like';
+			$notification->item_id = $status->id;
+			$notification->item_type = "App\Status";
+			$notification->save();
+
+		} catch (Exception $e) {
+		}
+	}
+
+	public function remoteLikeDeliver()
+	{
+		$like = $this->like;
+		$status = $this->like->status;
+		$actor = $this->like->actor;
+
+		$fractal = new Fractal\Manager();
+		$fractal->setSerializer(new ArraySerializer());
+		$resource = new Fractal\Resource\Item($like, new LikeTransformer());
+		$activity = $fractal->createData($resource)->toArray();
+
+		$url = $status->profile->sharedInbox ?? $status->profile->inbox_url;
+
+		Helpers::sendSignedObject($actor, $url, $activity);
+	}
+}
diff --git a/app/Jobs/GroupPipeline/NewStatusPipeline.php b/app/Jobs/GroupPipeline/NewStatusPipeline.php
new file mode 100644
index 000000000..4d8eeca5c
--- /dev/null
+++ b/app/Jobs/GroupPipeline/NewStatusPipeline.php
@@ -0,0 +1,130 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use App\Notification;
+use App\Hashtag;
+use App\Mention;
+use App\Profile;
+use App\Status;
+use App\StatusHashtag;
+use App\Models\GroupPostHashtag;
+use App\Models\GroupPost;
+use Cache;
+use DB;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Redis;
+use App\Services\MediaStorageService;
+use App\Services\NotificationService;
+use App\Services\StatusService;
+use App\Util\Lexer\Autolink;
+use App\Util\Lexer\Extractor;
+
+class NewStatusPipeline implements ShouldQueue
+{
+	use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+	protected $status;
+	protected $gp;
+	protected $tags;
+	protected $mentions;
+
+	public function __construct(Status $status, GroupPost $gp)
+	{
+		$this->status = $status;
+		$this->gp = $gp;
+	}
+
+	public function handle()
+	{
+		$status = $this->status;
+
+		$autolink = Autolink::create()
+			->setAutolinkActiveUsersOnly(true)
+			->setBaseHashPath("/groups/{$status->group_id}/topics/")
+			->setBaseUserPath("/groups/{$status->group_id}/username/")
+			->autolink($status->caption);
+
+        $entities = Extractor::create()->extract($status->caption);
+
+		$autolink = str_replace('/discover/tags/', '/groups/' . $status->group_id . '/topics/', $autolink);
+
+		$status->rendered = nl2br($autolink);
+		$status->entities = null;
+		$status->save();
+
+		$this->tags = array_unique($entities['hashtags']);
+		$this->mentions = array_unique($entities['mentions']);
+
+		if(count($this->tags)) {
+			$this->storeHashtags();
+		}
+
+		if(count($this->mentions)) {
+			$this->storeMentions($this->mentions);
+		}
+	}
+
+	protected function storeHashtags()
+	{
+		$tags = $this->tags;
+		$status = $this->status;
+		$gp = $this->gp;
+
+		foreach ($tags as $tag) {
+			if(mb_strlen($tag) > 124) {
+				continue;
+			}
+
+			DB::transaction(function () use ($status, $tag, $gp) {
+				$slug = str_slug($tag, '-', false);
+				$hashtag = Hashtag::firstOrCreate(
+					['name' => $tag, 'slug' => $slug]
+				);
+				GroupPostHashtag::firstOrCreate(
+					[
+						'group_id' => $status->group_id,
+						'group_post_id' => $gp->id,
+						'status_id' => $status->id,
+						'hashtag_id' => $hashtag->id,
+						'profile_id' => $status->profile_id,
+					]
+				);
+
+			});
+		}
+
+		if(count($this->mentions)) {
+			$this->storeMentions();
+		}
+		StatusService::del($status->id);
+	}
+
+	protected function storeMentions()
+	{
+		$mentions = $this->mentions;
+		$status = $this->status;
+
+		foreach ($mentions as $mention) {
+			$mentioned = Profile::whereUsername($mention)->first();
+
+			if (empty($mentioned) || !isset($mentioned->id)) {
+				continue;
+			}
+
+			DB::transaction(function () use ($status, $mentioned) {
+				$m = new Mention();
+				$m->status_id = $status->id;
+				$m->profile_id = $mentioned->id;
+				$m->save();
+
+				MentionPipeline::dispatch($status, $m);
+			});
+		}
+		StatusService::del($status->id);
+	}
+}
diff --git a/app/Jobs/GroupPipeline/UnlikePipeline.php b/app/Jobs/GroupPipeline/UnlikePipeline.php
new file mode 100644
index 000000000..b322d6853
--- /dev/null
+++ b/app/Jobs/GroupPipeline/UnlikePipeline.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace App\Jobs\GroupPipeline;
+
+use Cache, Log;
+use Illuminate\Support\Facades\Redis;
+use App\{Like, Notification};
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Util\ActivityPub\Helpers;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+use App\Transformer\ActivityPub\Verb\UndoLike as LikeTransformer;
+use App\Services\StatusService;
+
+class UnlikePipeline implements ShouldQueue
+{
+	use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+	protected $like;
+
+	/**
+	 * Delete the job if its models no longer exist.
+	 *
+	 * @var bool
+	 */
+	public $deleteWhenMissingModels = true;
+
+	public $timeout = 5;
+	public $tries = 1;
+
+	/**
+	 * Create a new job instance.
+	 *
+	 * @return void
+	 */
+	public function __construct(Like $like)
+	{
+		$this->like = $like;
+	}
+
+	/**
+	 * Execute the job.
+	 *
+	 * @return void
+	 */
+	public function handle()
+	{
+		$like = $this->like;
+
+		$status = $this->like->status;
+		$actor = $this->like->actor;
+
+		if (!$status) {
+			// Ignore notifications to deleted statuses
+			return;
+		}
+
+		$count = $status->likes_count > 1 ? $status->likes_count : $status->likes()->count();
+		$status->likes_count = $count - 1;
+		$status->save();
+
+		StatusService::del($status->id);
+
+		if($actor->id !== $status->profile_id && $status->url && $actor->domain == null) {
+			$this->remoteLikeDeliver();
+		}
+
+		$exists = Notification::whereProfileId($status->profile_id)
+				  ->whereActorId($actor->id)
+				  ->whereAction('group:like')
+				  ->whereItemId($status->id)
+				  ->whereItemType('App\Status')
+				  ->first();
+
+		if($exists) {
+			$exists->delete();
+		}
+
+		$like = Like::whereProfileId($actor->id)->whereStatusId($status->id)->first();
+
+		if(!$like) {
+			return;
+		}
+
+		$like->forceDelete();
+
+		return;
+	}
+
+	public function remoteLikeDeliver()
+	{
+		$like = $this->like;
+		$status = $this->like->status;
+		$actor = $this->like->actor;
+
+		$fractal = new Fractal\Manager();
+		$fractal->setSerializer(new ArraySerializer());
+		$resource = new Fractal\Resource\Item($like, new LikeTransformer());
+		$activity = $fractal->createData($resource)->toArray();
+
+		$url = $status->profile->sharedInbox ?? $status->profile->inbox_url;
+
+		Helpers::sendSignedObject($actor, $url, $activity);
+	}
+}
diff --git a/app/Jobs/GroupsPipeline/DeleteCommentPipeline.php b/app/Jobs/GroupsPipeline/DeleteCommentPipeline.php
new file mode 100644
index 000000000..e1d94c5de
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/DeleteCommentPipeline.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\Group;
+use App\Models\GroupComment;
+use App\Models\GroupPost;
+use App\Models\GroupHashtag;
+use App\Models\GroupPostHashtag;
+use App\Util\Lexer\Autolink;
+use App\Util\Lexer\Extractor;
+use DB;
+
+class DeleteCommentPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $parent;
+    protected $status;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct($parent, $status)
+    {
+        $this->parent = $parent;
+        $this->status = $status;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $parent = $this->parent;
+        $parent->reply_count = GroupComment::whereStatusId($parent->id)->count();
+        $parent->save();
+
+        return;
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/ImageResizePipeline.php b/app/Jobs/GroupsPipeline/ImageResizePipeline.php
new file mode 100644
index 000000000..fa649efea
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/ImageResizePipeline.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Models\GroupMedia;
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Log;
+use Storage;
+use Image as Intervention;
+
+class ImageResizePipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $media;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+    
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMedia $media)
+    {
+        $this->media = $media;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $media = $this->media;
+
+        if(!$media) {
+            return;
+        }
+
+        if (!Storage::exists($media->media_path) || $media->skip_optimize) {
+            return;
+        }
+
+        $path = $media->media_path;
+        $file = storage_path('app/' . $path);
+        $quality = config_cache('pixelfed.image_quality');
+
+        $orientations = [
+            'square' => [
+                'width'  => 1080,
+                'height' => 1080,
+            ],
+            'landscape' => [
+                'width'  => 1920,
+                'height' => 1080,
+            ],
+            'portrait' => [
+                'width'  => 1080,
+                'height' => 1350,
+            ],
+        ];
+
+        try {
+            $img = Intervention::make($file);
+            $img->orientate();
+            $width = $img->width();
+            $height = $img->height();
+            $aspect = $width / $height;
+            $orientation = $aspect === 1 ? 'square' : ($aspect > 1 ? 'landscape' : 'portrait');
+            $ratio = $orientations[$orientation];
+            $img->resize($ratio['width'], $ratio['height']);
+            $img->save($file, $quality);
+        } catch (Exception $e) {
+            Log::error($e);
+        }
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/ImageS3DeletePipeline.php b/app/Jobs/GroupsPipeline/ImageS3DeletePipeline.php
new file mode 100644
index 000000000..d59c6d086
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/ImageS3DeletePipeline.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Models\GroupMedia;
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Storage;
+use Illuminate\Http\File;
+use Exception;
+use GuzzleHttp\Exception\ClientException;
+use Aws\S3\Exception\S3Exception;
+use GuzzleHttp\Exception\ConnectException;
+use League\Flysystem\UnableToWriteFile;
+
+class ImageS3DeletePipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $media;
+    static $attempts = 1;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMedia $media)
+    {
+        $this->media = $media;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $media = $this->media;
+
+        if(!$media || (bool) config_cache('pixelfed.cloud_storage') === false) {
+            return;
+        }
+
+        $fs = Storage::disk(config('filesystems.cloud'));
+
+        if(!$fs) {
+            return;
+        }
+
+        if($fs->exists($media->media_path)) {
+            $fs->delete($media->media_path);
+        }
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/ImageS3UploadPipeline.php b/app/Jobs/GroupsPipeline/ImageS3UploadPipeline.php
new file mode 100644
index 000000000..169c11073
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/ImageS3UploadPipeline.php
@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Models\GroupMedia;
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Storage;
+use Illuminate\Http\File;
+use Exception;
+use GuzzleHttp\Exception\ClientException;
+use Aws\S3\Exception\S3Exception;
+use GuzzleHttp\Exception\ConnectException;
+use League\Flysystem\UnableToWriteFile;
+
+class ImageS3UploadPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $media;
+    static $attempts = 1;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMedia $media)
+    {
+        $this->media = $media;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $media = $this->media;
+
+        if(!$media || (bool) config_cache('pixelfed.cloud_storage') === false) {
+            return;
+        }
+
+        $path = storage_path('app/' . $media->media_path);
+
+        $p = explode('/', $media->media_path);
+        $name = array_pop($p);
+        $storagePath = implode('/', $p);
+
+        $url =  (bool) config_cache('pixelfed.cloud_storage') && (bool) config('media.storage.remote.resilient_mode') ?
+            self::handleResilientStore($storagePath, $path, $name) :
+            self::handleStore($storagePath, $path, $name);
+
+        if($url && strlen($url) && str_starts_with($url, 'https://')) {
+            $media->cdn_url = $url;
+            $media->processed_at = now();
+            $media->version = 11;
+            $media->save();
+            Storage::disk('local')->delete($media->media_path);
+        }
+    }
+
+    protected function handleStore($storagePath, $path, $name)
+    {
+        return retry(3, function() use($storagePath, $path, $name) {
+            $baseDisk = (bool) config_cache('pixelfed.cloud_storage') ? config('filesystems.cloud') : 'local';
+            $disk = Storage::disk($baseDisk);
+            $file = $disk->putFileAs($storagePath, new File($path), $name, 'public');
+            return $disk->url($file);
+        }, random_int(100, 500));
+    }
+
+    protected function handleResilientStore($storagePath, $path, $name)
+    {
+        $attempts = 0;
+        return retry(4, function() use($storagePath, $path, $name, $attempts) {
+            self::$attempts++;
+            usleep(100000);
+            $baseDisk = self::$attempts > 1 ? $this->getAltDriver() : config('filesystems.cloud');
+            try {
+                $disk = Storage::disk($baseDisk);
+                $file = $disk->putFileAs($storagePath, new File($path), $name, 'public');
+            } catch (S3Exception | ClientException | ConnectException | UnableToWriteFile | Exception $e) {}
+            return $disk->url($file);
+        }, function (int $attempt, Exception $exception) {
+            return $attempt * 200;
+        });
+    }
+
+    protected function getAltDriver()
+    {
+        return config('filesystems.cloud');
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/MemberJoinApprovedPipeline.php b/app/Jobs/GroupsPipeline/MemberJoinApprovedPipeline.php
new file mode 100644
index 000000000..a3ec21982
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/MemberJoinApprovedPipeline.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\GroupMember;
+use App\Notification;
+use App\Services\GroupService;
+
+class MemberJoinApprovedPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $member;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMember $member)
+    {
+        $this->member = $member;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $member = $this->member;
+        $member->approved_at = now();
+        $member->join_request = false;
+        $member->role = 'member';
+        $member->save();
+
+        GroupService::del($member->group_id);
+        GroupService::delSelf($member->group_id, $member->profile_id);
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/MemberJoinRejectedPipeline.php b/app/Jobs/GroupsPipeline/MemberJoinRejectedPipeline.php
new file mode 100644
index 000000000..5e8226de0
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/MemberJoinRejectedPipeline.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\GroupMember;
+use App\Notification;
+use App\Services\GroupService;
+
+class MemberJoinRejectedPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $member;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupMember $member)
+    {
+        $this->member = $member;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $member = $this->member;
+        $member->rejected_at = now();
+        $member->save();
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/NewCommentPipeline.php b/app/Jobs/GroupsPipeline/NewCommentPipeline.php
new file mode 100644
index 000000000..fb618a14d
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/NewCommentPipeline.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\Group;
+use App\Models\GroupComment;
+use App\Models\GroupPost;
+use App\Models\GroupHashtag;
+use App\Models\GroupPostHashtag;
+use App\Util\Lexer\Autolink;
+use App\Util\Lexer\Extractor;
+use DB;
+
+class NewCommentPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $status;
+    protected $parent;
+    protected $entities;
+    protected $autolink;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct($parent, GroupComment $status)
+    {
+        $this->parent = $parent;
+        $this->status = $status;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $profile = $this->status->profile;
+        $status = $this->status;
+
+        $parent = $this->parent;
+        $parent->reply_count = GroupComment::whereStatusId($parent->id)->count();
+        $parent->save();
+
+        if ($profile->no_autolink == false) {
+            $this->parseEntities();
+        }
+    }
+
+    public function parseEntities()
+    {
+        $this->extractEntities();
+    }
+
+    public function extractEntities()
+    {
+        $this->entities = Extractor::create()->extract($this->status->caption);
+        $this->autolinkStatus();
+    }
+
+    public function autolinkStatus()
+    {
+        $this->autolink = Autolink::create()->autolink($this->status->caption);
+        $this->storeHashtags();
+    }
+
+    public function storeHashtags()
+    {
+        $tags = array_unique($this->entities['hashtags']);
+        $status = $this->status;
+
+        foreach ($tags as $tag) {
+            if (mb_strlen($tag) > 124) {
+                continue;
+            }
+            DB::transaction(function () use ($status, $tag) {
+                $hashtag = GroupHashtag::firstOrCreate([
+                    'name' => $tag,
+                ]);
+
+                GroupPostHashtag::firstOrCreate(
+                    [
+                        'status_id' => $status->id,
+                        'group_id' => $status->group_id,
+                        'hashtag_id' => $hashtag->id,
+                        'profile_id' => $status->profile_id,
+                        'status_visibility' => $status->visibility,
+                    ]
+                );
+            });
+        }
+        $this->storeMentions();
+    }
+
+    public function storeMentions()
+    {
+        // todo
+    }
+}
diff --git a/app/Jobs/GroupsPipeline/NewPostPipeline.php b/app/Jobs/GroupsPipeline/NewPostPipeline.php
new file mode 100644
index 000000000..1302a0233
--- /dev/null
+++ b/app/Jobs/GroupsPipeline/NewPostPipeline.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace App\Jobs\GroupsPipeline;
+
+use App\Util\Media\Image;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use App\Models\Group;
+use App\Models\GroupPost;
+use App\Models\GroupHashtag;
+use App\Models\GroupPostHashtag;
+use App\Util\Lexer\Autolink;
+use App\Util\Lexer\Extractor;
+use DB;
+
+class NewPostPipeline implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $status;
+    protected $entities;
+    protected $autolink;
+
+    /**
+     * Delete the job if its models no longer exist.
+     *
+     * @var bool
+     */
+    public $deleteWhenMissingModels = true;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(GroupPost $status)
+    {
+        $this->status = $status;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $profile = $this->status->profile;
+        $status = $this->status;
+
+        if ($profile->no_autolink == false) {
+            $this->parseEntities();
+        }
+    }
+
+    public function parseEntities()
+    {
+        $this->extractEntities();
+    }
+
+    public function extractEntities()
+    {
+        $this->entities = Extractor::create()->extract($this->status->caption);
+        $this->autolinkStatus();
+    }
+
+    public function autolinkStatus()
+    {
+        $this->autolink = Autolink::create()->autolink($this->status->caption);
+        $this->storeHashtags();
+    }
+
+    public function storeHashtags()
+    {
+        $tags = array_unique($this->entities['hashtags']);
+        $status = $this->status;
+
+        foreach ($tags as $tag) {
+            if (mb_strlen($tag) > 124) {
+                continue;
+            }
+            DB::transaction(function () use ($status, $tag) {
+                $hashtag = GroupHashtag::firstOrCreate([
+                    'name' => $tag,
+                ]);
+
+                GroupPostHashtag::firstOrCreate(
+                    [
+                        'status_id' => $status->id,
+                        'group_id' => $status->group_id,
+                        'hashtag_id' => $hashtag->id,
+                        'profile_id' => $status->profile_id,
+                        'status_visibility' => $status->visibility,
+                    ]
+                );
+            });
+        }
+        $this->storeMentions();
+    }
+
+    public function storeMentions()
+    {
+        // todo
+    }
+}
diff --git a/app/Models/Group.php b/app/Models/Group.php
new file mode 100644
index 000000000..508ed98c0
--- /dev/null
+++ b/app/Models/Group.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use App\HasSnowflakePrimary;
+use App\Profile;
+use App\Services\GroupService;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Group extends Model
+{
+    use HasSnowflakePrimary, HasFactory, SoftDeletes;
+
+	/**
+	 * Indicates if the IDs are auto-incrementing.
+	 *
+	 * @var bool
+	 */
+	public $incrementing = false;
+
+	protected $casts = [
+		'metadata' => 'json'
+	];
+
+	public function url()
+	{
+		return url("/groups/{$this->id}");
+	}
+
+	public function permalink($suffix = null)
+	{
+		if(!$this->local) {
+			return $this->remote_url;
+		}
+		return $this->url() . $suffix;
+	}
+
+	public function members()
+	{
+		return $this->hasMany(GroupMember::class);
+	}
+
+	public function admin()
+	{
+		return $this->belongsTo(Profile::class, 'profile_id');
+	}
+
+	public function isMember($id = false)
+	{
+		$id = $id ?? request()->user()->profile_id;
+		// return $this->members()->whereProfileId($id)->whereJoinRequest(false)->exists();
+		return GroupService::isMember($this->id, $id);
+	}
+
+	public function getMembershipType()
+	{
+		return $this->is_private ? 'private' : ($this->is_local ? 'local' : 'all');
+	}
+
+	public function selfRole($id = false)
+	{
+		$id = $id ?? request()->user()->profile_id;
+		return optional($this->members()->whereProfileId($id)->first())->role ?? null;
+	}
+}
diff --git a/app/Models/GroupActivityGraph.php b/app/Models/GroupActivityGraph.php
new file mode 100644
index 000000000..55981d20a
--- /dev/null
+++ b/app/Models/GroupActivityGraph.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupActivityGraph extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupBlock.php b/app/Models/GroupBlock.php
new file mode 100644
index 000000000..8dac6dda0
--- /dev/null
+++ b/app/Models/GroupBlock.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupBlock extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupCategory.php b/app/Models/GroupCategory.php
new file mode 100644
index 000000000..940b24038
--- /dev/null
+++ b/app/Models/GroupCategory.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupCategory extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupComment.php b/app/Models/GroupComment.php
new file mode 100644
index 000000000..702cb9fe8
--- /dev/null
+++ b/app/Models/GroupComment.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use App\Profile;
+
+class GroupComment extends Model
+{
+    use HasFactory;
+
+    public $guarded = [];
+
+    public function profile()
+    {
+        return $this->belongsTo(Profile::class);
+    }
+
+    public function url()
+    {
+        return '/group/' . $this->group_id . '/c/' . $this->id;
+    }
+}
diff --git a/app/Models/GroupEvent.php b/app/Models/GroupEvent.php
new file mode 100644
index 000000000..ddcd074cc
--- /dev/null
+++ b/app/Models/GroupEvent.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupEvent extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupHashtag.php b/app/Models/GroupHashtag.php
new file mode 100644
index 000000000..cc4611627
--- /dev/null
+++ b/app/Models/GroupHashtag.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupHashtag extends Model
+{
+    use HasFactory;
+
+    public $fillable = ['name'];
+}
diff --git a/app/Models/GroupInteraction.php b/app/Models/GroupInteraction.php
new file mode 100644
index 000000000..38607b24e
--- /dev/null
+++ b/app/Models/GroupInteraction.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupInteraction extends Model
+{
+    use HasFactory;
+
+    protected $casts = [
+    	'metadata' => 'array'
+    ];
+}
diff --git a/app/Models/GroupInvitation.php b/app/Models/GroupInvitation.php
new file mode 100644
index 000000000..adcd38ea4
--- /dev/null
+++ b/app/Models/GroupInvitation.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupInvitation extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupLike.php b/app/Models/GroupLike.php
new file mode 100644
index 000000000..3aff7c739
--- /dev/null
+++ b/app/Models/GroupLike.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupLike extends Model
+{
+    use HasFactory;
+
+    public $fillable = ['group_id', 'status_id', 'profile_id', 'comment_id'];
+}
diff --git a/app/Models/GroupLimit.php b/app/Models/GroupLimit.php
new file mode 100644
index 000000000..3a9b54098
--- /dev/null
+++ b/app/Models/GroupLimit.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupLimit extends Model
+{
+	use HasFactory;
+
+	protected $casts = [
+		'limits' => 'json',
+		'metadata' => 'json'
+	];
+
+	protected $fillable = [
+		'profile_id',
+		'group_id'
+	];
+}
diff --git a/app/Models/GroupMedia.php b/app/Models/GroupMedia.php
new file mode 100644
index 000000000..12f424151
--- /dev/null
+++ b/app/Models/GroupMedia.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Storage;
+
+class GroupMedia extends Model
+{
+    use HasFactory;
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'metadata' => 'json',
+            'processed_at' => 'datetime',
+            'thumbnail_generated' => 'datetime'
+        ];
+    }
+
+    public function url()
+    {
+        if($this->cdn_url) {
+            return $this->cdn_url;
+        }
+        return Storage::url($this->media_path);
+    }
+
+    public function thumbnailUrl()
+    {
+        return $this->thumbnail_url;
+    }
+}
diff --git a/app/Models/GroupMember.php b/app/Models/GroupMember.php
new file mode 100644
index 000000000..4f15e0d3e
--- /dev/null
+++ b/app/Models/GroupMember.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupMember extends Model
+{
+    use HasFactory;
+
+    public function group()
+    {
+    	return $this->belongsTo(Group::class);
+    }
+}
diff --git a/app/Models/GroupPost.php b/app/Models/GroupPost.php
new file mode 100644
index 000000000..59693ec6b
--- /dev/null
+++ b/app/Models/GroupPost.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use App\HasSnowflakePrimary;
+use App\Services\HashidService;
+use App\Profile;
+use App\Status;
+
+class GroupPost extends Model
+{
+    use HasSnowflakePrimary, HasFactory;
+
+	/**
+	 * Indicates if the IDs are auto-incrementing.
+	 *
+	 * @var bool
+	 */
+	public $incrementing = false;
+
+    protected $fillable = [
+        'remote_url',
+        'group_id',
+        'profile_id',
+        'type',
+        'caption',
+        'visibility',
+        'is_nsfw'
+    ];
+
+	public function mediaPath()
+	{
+		return 'public/g/_v1/' . $this->group_id . '/' . $this->id;
+	}
+
+	public function group()
+	{
+		return $this->belongsTo(Group::class);
+	}
+
+	public function status()
+	{
+		return $this->belongsTo(Status::class);
+	}
+
+    public function profile()
+    {
+        return $this->belongsTo(Profile::class);
+    }
+
+	public function url()
+	{
+        return '/groups/' . $this->group_id . '/p/' . $this->id;
+	}
+}
diff --git a/app/Models/GroupPostHashtag.php b/app/Models/GroupPostHashtag.php
new file mode 100644
index 000000000..46165dd7c
--- /dev/null
+++ b/app/Models/GroupPostHashtag.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupPostHashtag extends Model
+{
+    use HasFactory;
+
+    public $fillable = [
+    	'group_id',
+    	'group_post_id',
+    	'status_id',
+    	'hashtag_id',
+    	'profile_id',
+    	'nsfw'
+    ];
+
+    public $timestamps = false;
+}
diff --git a/app/Models/GroupReport.php b/app/Models/GroupReport.php
new file mode 100644
index 000000000..f816eb030
--- /dev/null
+++ b/app/Models/GroupReport.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupReport extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupRole.php b/app/Models/GroupRole.php
new file mode 100644
index 000000000..799c41ce7
--- /dev/null
+++ b/app/Models/GroupRole.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupRole extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/GroupStore.php b/app/Models/GroupStore.php
new file mode 100644
index 000000000..f87889ba2
--- /dev/null
+++ b/app/Models/GroupStore.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class GroupStore extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Rules/ValidUrl.php b/app/Rules/ValidUrl.php
new file mode 100644
index 000000000..21c36d564
--- /dev/null
+++ b/app/Rules/ValidUrl.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class ValidUrl implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (!str_starts_with(strtolower($value), 'https://')) {
+            $fail('The :attribute must start with https://.');
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/Services/GroupFeedService.php b/app/Services/GroupFeedService.php
new file mode 100644
index 000000000..bf28b470e
--- /dev/null
+++ b/app/Services/GroupFeedService.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\GroupPost;
+use Illuminate\Support\Facades\Redis;
+
+class GroupFeedService
+{
+    const CACHE_KEY = 'pf:services:groups:feed:';
+
+    const FEED_LIMIT = 400;
+
+    public static function get($gid, $start = 0, $stop = 10)
+    {
+        if ($stop > 100) {
+            $stop = 100;
+        }
+
+        return Redis::zrevrange(self::CACHE_KEY.$gid, $start, $stop);
+    }
+
+    public static function getRankedMaxId($gid, $start = null, $limit = 10)
+    {
+        if (! $start) {
+            return [];
+        }
+
+        return array_keys(Redis::zrevrangebyscore(self::CACHE_KEY.$gid, $start, '-inf', [
+            'withscores' => true,
+            'limit' => [1, $limit],
+        ]));
+    }
+
+    public static function getRankedMinId($gid, $end = null, $limit = 10)
+    {
+        if (! $end) {
+            return [];
+        }
+
+        return array_keys(Redis::zrevrangebyscore(self::CACHE_KEY.$gid, '+inf', $end, [
+            'withscores' => true,
+            'limit' => [0, $limit],
+        ]));
+    }
+
+    public static function add($gid, $val)
+    {
+        if (self::count($gid) > self::FEED_LIMIT) {
+            if (config('database.redis.client') === 'phpredis') {
+                Redis::zpopmin(self::CACHE_KEY.$gid);
+            }
+        }
+
+        return Redis::zadd(self::CACHE_KEY.$gid, $val, $val);
+    }
+
+    public static function rem($gid, $val)
+    {
+        return Redis::zrem(self::CACHE_KEY.$gid, $val);
+    }
+
+    public static function del($gid, $val)
+    {
+        return self::rem($gid, $val);
+    }
+
+    public static function count($gid)
+    {
+        return Redis::zcard(self::CACHE_KEY.$gid);
+    }
+
+    public static function warmCache($gid, $force = false, $limit = 100)
+    {
+        if (self::count($gid) == 0 || $force == true) {
+            Redis::del(self::CACHE_KEY.$gid);
+            $ids = GroupPost::whereGroupId($gid)
+                ->orderByDesc('id')
+                ->limit($limit)
+                ->pluck('id');
+            foreach ($ids as $id) {
+                self::add($gid, $id);
+            }
+
+            return 1;
+        }
+    }
+}
diff --git a/app/Services/GroupPostService.php b/app/Services/GroupPostService.php
new file mode 100644
index 000000000..7295bda40
--- /dev/null
+++ b/app/Services/GroupPostService.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\GroupPost;
+use App\Transformer\Api\GroupPostTransformer;
+use Cache;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+
+class GroupPostService
+{
+    const CACHE_KEY = 'pf:services:groups:post:';
+
+    public static function key($gid, $pid)
+    {
+        return self::CACHE_KEY.$gid.':'.$pid;
+    }
+
+    public static function get($gid, $pid)
+    {
+        return Cache::remember(self::key($gid, $pid), 604800, function () use ($gid, $pid) {
+            $gp = GroupPost::whereGroupId($gid)->find($pid);
+
+            if (! $gp) {
+                return null;
+            }
+
+            $fractal = new Fractal\Manager();
+            $fractal->setSerializer(new ArraySerializer());
+            $resource = new Fractal\Resource\Item($gp, new GroupPostTransformer());
+            $res = $fractal->createData($resource)->toArray();
+
+            $res['pf_type'] = $gp['type'];
+            $res['url'] = $gp->url();
+
+            // if($gp['type'] == 'poll') {
+            // 	$status['poll'] = PollService::get($status['id']);
+            // }
+            //$status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$status['account']['id']}");
+            return $res;
+        });
+    }
+
+    public static function del($gid, $pid)
+    {
+        return Cache::forget(self::key($gid, $pid));
+    }
+}
diff --git a/app/Services/GroupService.php b/app/Services/GroupService.php
new file mode 100644
index 000000000..ac1a1a1c6
--- /dev/null
+++ b/app/Services/GroupService.php
@@ -0,0 +1,366 @@
+<?php
+
+namespace App\Services;
+
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupCategory;
+use App\Models\GroupMember;
+use App\Models\GroupPost;
+use App\Models\GroupInteraction;
+use App\Models\GroupLimit;
+use App\Util\ActivityPub\Helpers;
+use Cache;
+use Purify;
+use App\Http\Resources\Groups\GroupResource;
+
+class GroupService
+{
+	const CACHE_KEY = 'pf:services:groups:';
+
+	protected static function key($name)
+	{
+		return self::CACHE_KEY . $name;
+	}
+
+	public static function get($id, $pid = false)
+	{
+		$res = Cache::remember(
+			self::key($id),
+			1209600,
+			function() use($id, $pid) {
+				$group = (new Group)->withoutRelations()->whereNull('status')->find($id);
+
+				if(!$group) {
+					return null;
+				}
+
+				$admin = $group->profile_id ? AccountService::get($group->profile_id) : null;
+
+				return [
+					'id' => (string) $group->id,
+					'name' => $group->name,
+					'description' => $group->description,
+					'short_description' => str_limit(strip_tags($group->description), 120),
+					'category' => self::categoryById($group->category_id),
+					'local' => (bool) $group->local,
+					'url' => $group->url(),
+					'shorturl' => url('/g/'.HashidService::encode($group->id)),
+					'membership' => $group->getMembershipType(),
+					'member_count' => $group->members()->whereJoinRequest(false)->count(),
+					'verified' => false,
+					'self' => null,
+					'admin' => $admin,
+					'config' => [
+						'recommended' => (bool) $group->recommended,
+						'discoverable' => (bool) $group->discoverable,
+						'activitypub' => (bool) $group->activitypub,
+						'is_nsfw' => (bool) $group->is_nsfw,
+						'dms' => (bool) $group->dms
+					],
+					'metadata' => $group->metadata,
+					'created_at' => $group->created_at->toAtomString(),
+				];
+			}
+		);
+
+		if($pid) {
+			$res['self'] = self::getSelf($id, $pid);
+		}
+
+		return $res;
+	}
+
+	public static function del($id)
+	{
+		Cache::forget('ap:groups:object:' . $id);
+		return Cache::forget(self::key($id));
+	}
+
+	public static function getSelf($gid, $pid)
+	{
+		return Cache::remember(
+			self::key('self:gid-' . $gid . ':pid-' . $pid),
+			3600,
+			function() use($gid, $pid) {
+				$group = Group::find($gid);
+
+				if(!$gid || !$pid) {
+					return [
+						'is_member' => false,
+						'role' => null,
+						'is_requested' => null
+					];
+				}
+
+				return [
+					'is_member' => $group->isMember($pid),
+					'role' => $group->selfRole($pid),
+					'is_requested' => optional($group->members()->whereProfileId($pid)->first())->join_request ?? false
+				];
+			}
+		);
+	}
+
+	public static function delSelf($gid, $pid)
+	{
+		Cache::forget(self::key("is_member:{$gid}:{$pid}"));
+		return Cache::forget(self::key('self:gid-' . $gid . ':pid-' . $pid));
+	}
+
+	public static function sidToGid($gid, $pid)
+	{
+		return Cache::remember(self::key('s2gid:' . $gid . ':' . $pid), 3600, function() use($gid, $pid) {
+			return optional(GroupPost::whereGroupId($gid)->whereStatusId($pid)->first())->id;
+		});
+	}
+
+	public static function membershipsByPid($pid)
+	{
+		return Cache::remember(self::key("mbpid:{$pid}"), 3600, function() use($pid) {
+			return GroupMember::whereProfileId($pid)->pluck('group_id');
+		});
+	}
+
+	public static function config()
+	{
+		return [
+			'enabled' => config('exp.gps') ?? false,
+			'limits' => [
+				'group' => [
+					'max' => 999,
+					'federation' => false,
+				],
+
+				'user' => [
+					'create' => [
+						'new' => true,
+						'max' => 10
+					],
+					'join' => [
+						'max' => 10
+					],
+					'invite' => [
+						'max' => 20
+					]
+				]
+			],
+			'guest' => [
+				'public' => false
+			]
+		];
+	}
+
+	public static function fetchRemote($url)
+	{
+		// todo: refactor this demo
+		$res = Helpers::fetchFromUrl($url);
+
+		if(!$res || !isset($res['type']) || $res['type'] != 'Group') {
+			return false;
+		}
+
+		$group = Group::whereRemoteUrl($url)->first();
+
+		if($group) {
+			return $group;
+		}
+
+		$group = new Group;
+		$group->remote_url = $res['url'];
+		$group->name = $res['name'];
+		$group->inbox_url = $res['inbox'];
+		$group->metadata = [
+			'header' => [
+				'url' => $res['icon']['image']['url']
+			]
+		];
+		$group->description = Purify::clean($res['summary']);
+		$group->local = false;
+		$group->save();
+
+		return $group->url();
+	}
+
+	public static function log(
+		string $groupId,
+		string $profileId,
+		string $type = null,
+		array $meta = null,
+		string $itemType = null,
+		string $itemId = null
+	)
+	{
+		// todo: truncate (some) metadata after XX days in cron/queue
+		$log = new GroupInteraction;
+		$log->group_id = $groupId;
+		$log->profile_id = $profileId;
+		$log->type = $type;
+		$log->item_type = $itemType;
+		$log->item_id = $itemId;
+		$log->metadata = $meta;
+		$log->save();
+	}
+
+	public static function getRejoinTimeout($gid, $pid)
+	{
+		$key = self::key('rejoin-timeout:gid-' . $gid . ':pid-' . $pid);
+		return Cache::has($key);
+	}
+
+	public static function setRejoinTimeout($gid, $pid)
+	{
+		// todo: allow group admins to manually remove timeout
+		$key = self::key('rejoin-timeout:gid-' . $gid . ':pid-' . $pid);
+		return Cache::put($key, 1, 86400);
+	}
+
+	public static function getMemberInboxes($id)
+	{
+		// todo: cache this, maybe add join/leave methods to this service to handle cache invalidation
+		$group = (new Group)->withoutRelations()->findOrFail($id);
+		if(!$group->local) {
+			return [];
+		}
+		$members = GroupMember::whereGroupId($id)->whereLocalProfile(false)->pluck('profile_id');
+		return Profile::find($members)->map(function($u) {
+			return $u->sharedInbox ?? $u->inbox_url;
+		})->toArray();
+	}
+
+	public static function getInteractionLimits($gid, $pid)
+	{
+		return Cache::remember(self::key(":il:{$gid}:{$pid}"), 3600, function() use($gid, $pid) {
+			$limit = GroupLimit::whereGroupId($gid)->whereProfileId($pid)->first();
+			if(!$limit) {
+				return [
+					'limits' => [
+						'can_post' => true,
+						'can_comment' => true,
+						'can_like' => true
+					],
+					'updated_at' => null
+				];
+			}
+
+			return [
+				'limits' => $limit->limits,
+				'updated_at' => $limit->updated_at->format('c')
+			];
+		});
+	}
+
+	public static function clearInteractionLimits($gid, $pid)
+	{
+		return Cache::forget(self::key(":il:{$gid}:{$pid}"));
+	}
+
+	public static function canPost($gid, $pid)
+	{
+		$limits = self::getInteractionLimits($gid, $pid);
+		if($limits) {
+			return (bool) $limits['limits']['can_post'];
+		} else {
+			return true;
+		}
+	}
+
+	public static function canComment($gid, $pid)
+	{
+		$limits = self::getInteractionLimits($gid, $pid);
+		if($limits) {
+			return (bool) $limits['limits']['can_comment'];
+		} else {
+			return true;
+		}
+	}
+
+	public static function canLike($gid, $pid)
+	{
+		$limits = self::getInteractionLimits($gid, $pid);
+		if($limits) {
+			return (bool) $limits['limits']['can_like'];
+		} else {
+			return true;
+		}
+	}
+
+	public static function categories($onlyActive = true)
+	{
+		return Cache::remember(self::key(':categories'), 2678400, function() use($onlyActive) {
+			return GroupCategory::when($onlyActive, function($q, $onlyActive) {
+					return $q->whereActive(true);
+				})
+				->orderBy('order')
+				->pluck('name')
+				->toArray();
+		});
+	}
+
+	public static function categoryById($id)
+	{
+		return Cache::remember(self::key(':categorybyid:'.$id), 2678400, function() use($id) {
+			$category = GroupCategory::find($id);
+			if($category) {
+				return [
+					'name' => $category->name,
+					'url' => url("/groups/explore/category/{$category->slug}")
+				];
+			}
+			return false;
+		});
+	}
+
+	public static function isMember($gid = false, $pid = false)
+	{
+		if(!$gid || !$pid) {
+			return false;
+		}
+
+		$key = self::key("is_member:{$gid}:{$pid}");
+		return Cache::remember($key, 3600, function() use($gid, $pid) {
+			return GroupMember::whereGroupId($gid)
+				->whereProfileId($pid)
+				->whereJoinRequest(false)
+				->exists();
+		});
+	}
+
+	public static function mutualGroups($cid = false, $pid = false, $exclude = [])
+	{
+		if(!$cid || !$pid) {
+			return [
+				'count' => 0,
+				'groups' => []
+			];
+		}
+
+		$self = self::membershipsByPid($cid);
+		$user = self::membershipsByPid($pid);
+
+		if(!$self->count() || !$user->count()) {
+			return [
+				'count' => 0,
+				'groups' => []
+			];
+		}
+
+		$intersect = $self->intersect($user);
+		$count = $intersect->count();
+		$groups = $intersect
+			->values()
+			->filter(function($id) use($exclude) {
+				return !in_array($id, $exclude);
+			})
+			->shuffle()
+			->take(1)
+			->map(function($id) {
+				return self::get($id);
+			});
+
+		return [
+			'count' => $count,
+			'groups' => $groups
+		];
+	}
+}
diff --git a/app/Services/Groups/GroupAccountService.php b/app/Services/Groups/GroupAccountService.php
new file mode 100644
index 000000000..2d86e4f43
--- /dev/null
+++ b/app/Services/Groups/GroupAccountService.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Models\Group;
+use App\Models\GroupPost;
+use App\Models\GroupMember;
+use Cache;
+use Purify;
+use App\Services\AccountService;
+use App\Services\GroupService;
+
+class GroupAccountService
+{
+    const CACHE_KEY = 'pf:services:groups:accounts-v0:';
+
+    public static function get($gid, $pid)
+    {
+        $group = GroupService::get($gid);
+        if(!$group) {
+            return;
+        }
+
+        $account = AccountService::get($pid, true);
+        if(!$account) {
+            return;
+        }
+
+        $key = self::CACHE_KEY . $gid . ':' . $pid;
+        $account['group'] = Cache::remember($key, 3600, function() use($gid, $pid) {
+            $membership = GroupMember::whereGroupId($gid)->whereProfileId($pid)->first();
+            if(!$membership) {
+                return [];
+            }
+
+            return [
+                'joined' => $membership->created_at->format('c'),
+                'role' => $membership->role,
+                'local_group' => (bool) $membership->local_group,
+                'local_profile' => (bool) $membership->local_profile,
+            ];
+        });
+        return $account;
+    }
+
+    public static function del($gid, $pid)
+    {
+        $key = self::CACHE_KEY . $gid . ':' . $pid;
+        return Cache::forget($key);
+    }
+}
diff --git a/app/Services/Groups/GroupActivityPubService.php b/app/Services/Groups/GroupActivityPubService.php
new file mode 100644
index 000000000..4c48b22c4
--- /dev/null
+++ b/app/Services/Groups/GroupActivityPubService.php
@@ -0,0 +1,311 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Models\Group;
+use App\Models\GroupPost;
+use App\Models\GroupComment;
+use Cache;
+use Purify;
+use Illuminate\Support\Facades\Redis;
+use League\Fractal;
+use App\Util\ActivityPub\Helpers;
+use League\Fractal\Serializer\ArraySerializer;
+use League\Fractal\Pagination\IlluminatePaginatorAdapter;
+use App\Transformer\Api\GroupPostTransformer;
+use App\Services\ActivityPubFetchService;
+use Illuminate\Support\Facades\Validator;
+use App\Rules\ValidUrl;
+
+class GroupActivityPubService
+{
+    const CACHE_KEY = 'pf:services:groups:ap:';
+
+    public static function fetchGroup($url, $saveOnFetch = true)
+    {
+        $group = Group::where('remote_url', $url)->first();
+        if($group) {
+            return $group;
+        }
+
+        $res = ActivityPubFetchService::get($url);
+        if(!$res) {
+            return $res;
+        }
+        $json = json_decode($res, true);
+        $group = self::validateGroup($json);
+        if(!$group) {
+            return false;
+        }
+        if($saveOnFetch) {
+            return self::storeGroup($group);
+        }
+        return $group;
+    }
+
+    public static function fetchGroupPost($url, $saveOnFetch = true)
+    {
+        $group = GroupPost::where('remote_url', $url)->first();
+
+        if($group) {
+            return $group;
+        }
+
+        $res = ActivityPubFetchService::get($url);
+        if(!$res) {
+            return 'invalid res';
+        }
+        $json = json_decode($res, true);
+        if(!$json) {
+            return 'invalid json';
+        }
+        if(isset($json['inReplyTo'])) {
+            $comment = self::validateGroupComment($json);
+            return self::storeGroupComment($comment);
+        }
+
+        $group = self::validateGroupPost($json);
+        if($saveOnFetch) {
+            return self::storeGroupPost($group);
+        }
+        return $group;
+    }
+
+    public static function validateGroup($obj)
+    {
+        $validator = Validator::make($obj, [
+            '@context' => 'required',
+            'id' => ['required', 'url', new ValidUrl],
+            'type' => 'required|in:Group',
+            'preferredUsername' => 'required',
+            'name' => 'required',
+            'url' => ['sometimes', 'url', new ValidUrl],
+            'inbox' => ['required', 'url', new ValidUrl],
+            'outbox' => ['required', 'url', new ValidUrl],
+            'followers' => ['required', 'url', new ValidUrl],
+            'attributedTo' => 'required',
+            'summary' => 'sometimes',
+            'publicKey' => 'required',
+            'publicKey.id' => 'required',
+            'publicKey.owner' => ['required', 'url', 'same:id', new ValidUrl],
+            'publicKey.publicKeyPem' => 'required',
+        ]);
+
+        if($validator->fails()) {
+            return false;
+        }
+
+        return $validator->validated();
+    }
+
+    public static function validateGroupPost($obj)
+    {
+        $validator = Validator::make($obj, [
+            '@context' => 'required',
+            'id' => ['required', 'url', new ValidUrl],
+            'type' => 'required|in:Page,Note',
+            'to' => 'required|array',
+            'to.*' => ['required', 'url', new ValidUrl],
+            'cc' => 'sometimes|array',
+            'cc.*' => ['sometimes', 'url', new ValidUrl],
+            'url' => ['sometimes', 'url', new ValidUrl],
+            'attributedTo' => 'required',
+            'name' => 'sometimes',
+            'target' => 'sometimes',
+            'audience' => 'sometimes',
+            'inReplyTo' => 'sometimes',
+            'content' => 'sometimes',
+            'mediaType' => 'sometimes',
+            'sensitive' => 'sometimes',
+            'attachment' => 'sometimes',
+            'published' => 'required',
+        ]);
+
+        if($validator->fails()) {
+            return false;
+        }
+
+        return $validator->validated();
+    }
+
+    public static function validateGroupComment($obj)
+    {
+        $validator = Validator::make($obj, [
+            '@context' => 'required',
+            'id' => ['required', 'url', new ValidUrl],
+            'type' => 'required|in:Note',
+            'to' => 'required|array',
+            'to.*' => ['required', 'url', new ValidUrl],
+            'cc' => 'sometimes|array',
+            'cc.*' => ['sometimes', 'url', new ValidUrl],
+            'url' => ['sometimes', 'url', new ValidUrl],
+            'attributedTo' => 'required',
+            'name' => 'sometimes',
+            'target' => 'sometimes',
+            'audience' => 'sometimes',
+            'inReplyTo' => 'sometimes',
+            'content' => 'sometimes',
+            'mediaType' => 'sometimes',
+            'sensitive' => 'sometimes',
+            'published' => 'required',
+        ]);
+
+        if($validator->fails()) {
+            return $validator->errors();
+            return false;
+        }
+
+        return $validator->validated();
+    }
+
+    public static function getGroupFromPostActivity($groupPost)
+    {
+        if(isset($groupPost['audience']) && is_string($groupPost['audience'])) {
+            return $groupPost['audience'];
+        }
+
+        if(
+            isset(
+                $groupPost['target'],
+                $groupPost['target']['type'],
+                $groupPost['target']['attributedTo']
+            ) && $groupPost['target']['type'] == 'Collection'
+        ) {
+            return $groupPost['target']['attributedTo'];
+        }
+
+        return false;
+    }
+
+    public static function getActorFromPostActivity($groupPost)
+    {
+        if(!isset($groupPost['attributedTo'])) {
+            return false;
+        }
+
+        $field = $groupPost['attributedTo'];
+
+        if(is_string($field)) {
+            return $field;
+        }
+
+        if(is_array($field) && count($field) === 1) {
+            if(
+                isset(
+                    $field[0]['id'],
+                    $field[0]['type']
+                ) &&
+                $field[0]['type'] === 'Person' &&
+                is_string($field[0]['id'])
+            ) {
+                return $field[0]['id'];
+            }
+        }
+
+        return false;
+    }
+
+    public static function getCaptionFromPostActivity($groupPost)
+    {
+        if(!isset($groupPost['name']) && isset($groupPost['content'])) {
+            return Purify::clean(strip_tags($groupPost['content']));
+        }
+
+        if(isset($groupPost['name'], $groupPost['content'])) {
+            return Purify::clean(strip_tags($groupPost['name'])) . Purify::clean(strip_tags($groupPost['content']));
+        }
+    }
+
+    public static function getSensitiveFromPostActivity($groupPost)
+    {
+        if(!isset($groupPost['sensitive'])) {
+            return true;
+        }
+
+        if(isset($groupPost['sensitive']) && !is_bool($groupPost['sensitive'])) {
+            return true;
+        }
+
+        return boolval($groupPost['sensitive']);
+    }
+
+    public static function storeGroup($activity)
+    {
+        $group = new Group;
+        $group->profile_id = null;
+        $group->category_id = 1;
+        $group->name = $activity['name'] ?? 'Untitled Group';
+        $group->description = isset($activity['summary']) ? Purify::clean($activity['summary']) : null;
+        $group->is_private = false;
+        $group->local_only = false;
+        $group->metadata = [];
+        $group->local = false;
+        $group->remote_url = $activity['id'];
+        $group->inbox_url = $activity['inbox'];
+        $group->activitypub = true;
+        $group->save();
+
+        return $group;
+    }
+
+    public static function storeGroupPost($groupPost)
+    {
+        $groupUrl = self::getGroupFromPostActivity($groupPost);
+        if(!$groupUrl) {
+            return;
+        }
+        $group = self::fetchGroup($groupUrl, true);
+        if(!$group) {
+            return;
+        }
+        $actorUrl = self::getActorFromPostActivity($groupPost);
+        $actor = Helpers::profileFetch($actorUrl);
+        $caption = self::getCaptionFromPostActivity($groupPost);
+        $sensitive = self::getSensitiveFromPostActivity($groupPost);
+        $model = GroupPost::firstOrCreate(
+            [
+                'remote_url' => $groupPost['id'],
+            ], [
+                'group_id' => $group->id,
+                'profile_id' => $actor->id,
+                'type' => 'text',
+                'caption' => $caption,
+                'visibility' => 'public',
+                'is_nsfw' => $sensitive,
+            ]
+        );
+        return $model;
+    }
+
+    public static function storeGroupComment($groupPost)
+    {
+        $groupUrl = self::getGroupFromPostActivity($groupPost);
+        if(!$groupUrl) {
+            return;
+        }
+        $group = self::fetchGroup($groupUrl, true);
+        if(!$group) {
+            return;
+        }
+        $actorUrl = self::getActorFromPostActivity($groupPost);
+        $actor = Helpers::profileFetch($actorUrl);
+        $caption = self::getCaptionFromPostActivity($groupPost);
+        $sensitive = self::getSensitiveFromPostActivity($groupPost);
+        $parentPost = self::fetchGroupPost($groupPost['inReplyTo']);
+        $model = GroupComment::firstOrCreate(
+            [
+                'remote_url' => $groupPost['id'],
+            ], [
+                'group_id' => $group->id,
+                'profile_id' => $actor->id,
+                'status_id' => $parentPost->id,
+                'type' => 'text',
+                'caption' => $caption,
+                'visibility' => 'public',
+                'is_nsfw' => $sensitive,
+                'local' => $actor->private_key != null
+            ]
+        );
+        return $model;
+    }
+}
diff --git a/app/Services/Groups/GroupCommentService.php b/app/Services/Groups/GroupCommentService.php
new file mode 100644
index 000000000..52eeee533
--- /dev/null
+++ b/app/Services/Groups/GroupCommentService.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Models\GroupComment;
+use Cache;
+use Illuminate\Support\Facades\Redis;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+use League\Fractal\Pagination\IlluminatePaginatorAdapter;
+use App\Transformer\Api\GroupPostTransformer;
+
+class GroupCommentService
+{
+    const CACHE_KEY = 'pf:services:groups:comment:';
+
+    public static function key($gid, $pid)
+    {
+        return self::CACHE_KEY . $gid . ':' . $pid;
+    }
+
+    public static function get($gid, $pid)
+    {
+        return Cache::remember(self::key($gid, $pid), 604800, function() use($gid, $pid) {
+            $gp = GroupComment::whereGroupId($gid)->find($pid);
+
+            if(!$gp) {
+                return null;
+            }
+
+            $fractal = new Fractal\Manager();
+            $fractal->setSerializer(new ArraySerializer());
+            $resource = new Fractal\Resource\Item($gp, new GroupPostTransformer());
+            $res = $fractal->createData($resource)->toArray();
+
+            $res['pf_type'] = 'group:post:comment';
+            $res['url'] = $gp->url();
+            // if($gp['type'] == 'poll') {
+            //  $status['poll'] = PollService::get($status['id']);
+            // }
+            //$status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$status['account']['id']}");
+            return $res;
+        });
+    }
+
+    public static function del($gid, $pid)
+    {
+        return Cache::forget(self::key($gid, $pid));
+    }
+}
diff --git a/app/Services/Groups/GroupFeedService.php b/app/Services/Groups/GroupFeedService.php
new file mode 100644
index 000000000..a2a87be1d
--- /dev/null
+++ b/app/Services/Groups/GroupFeedService.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Profile;
+use App\Models\Group;
+use App\Models\GroupCategory;
+use App\Models\GroupMember;
+use App\Models\GroupPost;
+use App\Models\GroupInteraction;
+use App\Models\GroupLimit;
+use App\Util\ActivityPub\Helpers;
+use Cache;
+use Purify;
+use Illuminate\Support\Facades\Redis;
+
+class GroupFeedService
+{
+    const CACHE_KEY = 'pf:services:groups:feed:';
+    const FEED_LIMIT = 400;
+
+    public static function get($gid, $start = 0, $stop = 10)
+    {
+        if($stop > 100) {
+            $stop = 100;
+        }
+
+        return Redis::zrevrange(self::CACHE_KEY . $gid, $start, $stop);
+    }
+
+    public static function getRankedMaxId($gid, $start = null, $limit = 10)
+    {
+        if(!$start) {
+            return [];
+        }
+
+        return array_keys(Redis::zrevrangebyscore(self::CACHE_KEY . $gid, $start, '-inf', [
+            'withscores' => true,
+            'limit' => [1, $limit]
+        ]));
+    }
+
+    public static function getRankedMinId($gid, $end = null, $limit = 10)
+    {
+        if(!$end) {
+            return [];
+        }
+
+        return array_keys(Redis::zrevrangebyscore(self::CACHE_KEY . $gid, '+inf', $end, [
+            'withscores' => true,
+            'limit' => [0, $limit]
+        ]));
+    }
+
+    public static function add($gid, $val)
+    {
+        if(self::count($gid) > self::FEED_LIMIT) {
+            if(config('database.redis.client') === 'phpredis') {
+                Redis::zpopmin(self::CACHE_KEY . $gid);
+            }
+        }
+
+        return Redis::zadd(self::CACHE_KEY . $gid, $val, $val);
+    }
+
+    public static function rem($gid, $val)
+    {
+        return Redis::zrem(self::CACHE_KEY . $gid, $val);
+    }
+
+    public static function del($gid, $val)
+    {
+        return self::rem($gid, $val);
+    }
+
+    public static function count($gid)
+    {
+        return Redis::zcard(self::CACHE_KEY . $gid);
+    }
+
+    public static function warmCache($gid, $force = false, $limit = 100)
+    {
+        if(self::count($gid) == 0 || $force == true) {
+            Redis::del(self::CACHE_KEY . $gid);
+            $ids = GroupPost::whereGroupId($gid)
+                ->orderByDesc('id')
+                ->limit($limit)
+                ->pluck('id');
+            foreach($ids as $id) {
+                self::add($gid, $id);
+            }
+            return 1;
+        }
+    }
+}
diff --git a/app/Services/Groups/GroupHashtagService.php b/app/Services/Groups/GroupHashtagService.php
new file mode 100644
index 000000000..6553850f0
--- /dev/null
+++ b/app/Services/Groups/GroupHashtagService.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Services\Groups;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Redis;
+use Illuminate\Support\Str;
+use App\Models\GroupHashtag;
+use App\Models\GroupPostHashtag;
+
+class GroupHashtagService
+{
+    const CACHE_KEY = 'pf:services:groups-v1:hashtags:';
+
+    public static function get($id)
+    {
+        return Cache::remember(self::CACHE_KEY . $id, 3600, function() use($id) {
+            $tag = GroupHashtag::find($id);
+            if(!$tag) {
+                return [];
+            }
+            return [
+                'name' => $tag->name,
+                'slug' => Str::slug($tag->name),
+            ];
+        });
+    }
+}
diff --git a/app/Services/Groups/GroupMediaService.php b/app/Services/Groups/GroupMediaService.php
new file mode 100644
index 000000000..0200e3a56
--- /dev/null
+++ b/app/Services/Groups/GroupMediaService.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace App\Services\Groups;
+
+use Cache;
+use Illuminate\Support\Str;
+use Illuminate\Support\Facades\Redis;
+use Illuminate\Support\Facades\Storage;
+use App\Models\GroupMedia;
+use App\Profile;
+use App\Status;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+use League\Fractal\Pagination\IlluminatePaginatorAdapter;
+use App\Services\HashidService;
+
+class GroupMediaService
+{
+    const CACHE_KEY = 'groups:media:';
+
+    public static function path($gid, $pid, $sid = false)
+    {
+        if(!$gid || !$pid) {
+            return;
+        }
+        $groupHashid = HashidService::encode($gid);
+        $monthHash = HashidService::encode(date('Y').date('n'));
+        $pid = HashidService::encode($pid);
+        $sid = $sid ? HashidService::encode($sid) : false;
+        $path = $sid ?
+            "public/g1/{$groupHashid}/{$pid}/{$monthHash}/{$sid}" :
+            "public/g1/{$groupHashid}/{$pid}/{$monthHash}";
+        return $path;
+    }
+
+    public static function get($statusId)
+    {
+        return Cache::remember(self::CACHE_KEY.$statusId, 21600, function() use($statusId) {
+            $media = GroupMedia::whereStatusId($statusId)->orderBy('order')->get();
+            if(!$media) {
+                return [];
+            }
+            $medias = $media->map(function($media) {
+                return [
+                    'id'            => (string) $media->id,
+                    'type'          => 'Document',
+                    'url'           => $media->url(),
+                    'preview_url'   => $media->url(),
+                    'remote_url'    => $media->url,
+                    'description'   => $media->cw_summary,
+                    'blurhash'      => $media->blurhash ?? 'U4Rfzst8?bt7ogayj[j[~pfQ9Goe%Mj[WBay'
+                ];
+            });
+            return $medias->toArray();
+        });
+    }
+
+    public static function getMastodon($id)
+    {
+        $media = self::get($id);
+        if(!$media) {
+            return [];
+        }
+        $medias = collect($media)
+        ->map(function($media) {
+            $mime = $media['mime'] ? explode('/', $media['mime']) : false;
+            unset(
+                $media['optimized_url'],
+                $media['license'],
+                $media['is_nsfw'],
+                $media['orientation'],
+                $media['filter_name'],
+                $media['filter_class'],
+                $media['mime'],
+                $media['hls_manifest']
+            );
+
+            $media['type'] = $mime ? strtolower($mime[0]) : 'unknown';
+            return $media;
+        })
+        ->filter(function($m) {
+            return $m && isset($m['url']);
+        })
+        ->values();
+
+        return $medias->toArray();
+    }
+
+    public static function del($statusId)
+    {
+        return Cache::forget(self::CACHE_KEY . $statusId);
+    }
+
+    public static function activitypub($statusId)
+    {
+        $status = self::get($statusId);
+        if(!$status) {
+            return [];
+        }
+
+        return collect($status)->map(function($s) {
+            $license = isset($s['license']) && $s['license']['title'] ? $s['license']['title'] : null;
+            return [
+                'type'      => 'Document',
+                'mediaType' => $s['mime'],
+                'url'       => $s['url'],
+                'name'      => $s['description'],
+                'summary'   => $s['description'],
+                'blurhash'  => $s['blurhash'],
+                'license'   => $license
+            ];
+        });
+    }
+}
diff --git a/app/Services/Groups/GroupPostService.php b/app/Services/Groups/GroupPostService.php
new file mode 100644
index 000000000..a043be134
--- /dev/null
+++ b/app/Services/Groups/GroupPostService.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Models\GroupPost;
+use Cache;
+use Illuminate\Support\Facades\Redis;
+use League\Fractal;
+use League\Fractal\Serializer\ArraySerializer;
+use League\Fractal\Pagination\IlluminatePaginatorAdapter;
+use App\Transformer\Api\GroupPostTransformer;
+
+class GroupPostService
+{
+    const CACHE_KEY = 'pf:services:groups:post:';
+
+    public static function key($gid, $pid)
+    {
+        return self::CACHE_KEY . $gid . ':' . $pid;
+    }
+
+    public static function get($gid, $pid)
+    {
+        return Cache::remember(self::key($gid, $pid), 604800, function() use($gid, $pid) {
+            $gp = GroupPost::whereGroupId($gid)->find($pid);
+
+            if(!$gp) {
+                return null;
+            }
+
+            $fractal = new Fractal\Manager();
+            $fractal->setSerializer(new ArraySerializer());
+            $resource = new Fractal\Resource\Item($gp, new GroupPostTransformer());
+            $res = $fractal->createData($resource)->toArray();
+
+            $res['pf_type'] = $gp['type'];
+            $res['url'] = $gp->url();
+            // if($gp['type'] == 'poll') {
+            //  $status['poll'] = PollService::get($status['id']);
+            // }
+            //$status['account']['url'] = url("/groups/{$gp['group_id']}/user/{$status['account']['id']}");
+            return $res;
+        });
+    }
+
+    public static function del($gid, $pid)
+    {
+        return Cache::forget(self::key($gid, $pid));
+    }
+
+    public function getStatus(Request $request)
+    {
+        $gid = $request->input('gid');
+        $sid = $request->input('sid');
+        $pid = optional($request->user())->profile_id ?? false;
+
+        $group = Group::findOrFail($gid);
+
+        if($group->is_private) {
+            abort_if(!$group->isMember($pid), 404);
+        }
+
+        $gp = GroupPost::whereGroupId($group->id)->whereId($sid)->firstOrFail();
+
+        $status = GroupPostService::get($gp['group_id'], $gp['id']);
+        if(!$status) {
+            return false;
+        }
+        $status['reply_count'] = $gp['reply_count'];
+        $status['favourited'] = (bool) GroupsLikeService::liked($pid, $gp['id']);
+        $status['favourites_count'] = GroupsLikeService::count($gp['id']);
+        $status['pf_type'] = $gp['type'];
+        $status['visibility'] = 'public';
+        $status['url'] = $gp->url();
+        $status['account']['url'] = url("/groups/{$gp->group_id}/user/{$gp->profile_id}");
+
+        // if($gp['type'] == 'poll') {
+        //     $status['poll'] = PollService::get($status['id']);
+        // }
+
+        return $status;
+    }
+}
diff --git a/app/Services/Groups/GroupsLikeService.php b/app/Services/Groups/GroupsLikeService.php
new file mode 100644
index 000000000..e2daa1e71
--- /dev/null
+++ b/app/Services/Groups/GroupsLikeService.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Services\Groups;
+
+use App\Util\ActivityPub\Helpers;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Redis;
+use App\Models\GroupLike;
+
+class GroupsLikeService
+{
+    const CACHE_KEY = 'pf:services:group-likes:ids:';
+    const CACHE_SET_KEY = 'pf:services:group-likes:set:';
+    const CACHE_POST_KEY = 'pf:services:group-likes:count:';
+
+    public static function add($profileId, $statusId)
+    {
+        $key = self::CACHE_KEY . $profileId . ':' . $statusId;
+        Cache::increment(self::CACHE_POST_KEY . $statusId);
+        //Cache::forget('pf:services:likes:liked_by:'.$statusId);
+        self::setAdd($profileId, $statusId);
+        return Cache::put($key, true, 86400);
+    }
+
+    public static function setAdd($profileId, $statusId)
+    {
+        if(self::setCount($profileId) > 400) {
+            Redis::zpopmin(self::CACHE_SET_KEY . $profileId);
+        }
+
+        return Redis::zadd(self::CACHE_SET_KEY . $profileId, $statusId, $statusId);
+    }
+
+    public static function setCount($id)
+    {
+        return Redis::zcard(self::CACHE_SET_KEY . $id);
+    }
+
+    public static function setRem($profileId, $val)
+    {
+        return Redis::zrem(self::CACHE_SET_KEY . $profileId, $val);
+    }
+
+    public static function get($profileId, $start = 0, $stop = 10)
+    {
+        if($stop > 100) {
+            $stop = 100;
+        }
+
+        return Redis::zrevrange(self::CACHE_SET_KEY . $profileId, $start, $stop);
+    }
+
+    public static function remove($profileId, $statusId)
+    {
+        $key = self::CACHE_KEY . $profileId . ':' . $statusId;
+        Cache::decrement(self::CACHE_POST_KEY . $statusId);
+        //Cache::forget('pf:services:likes:liked_by:'.$statusId);
+        self::setRem($profileId, $statusId);
+        return Cache::put($key, false, 86400);
+    }
+
+    public static function liked($profileId, $statusId)
+    {
+        $key = self::CACHE_KEY . $profileId . ':' . $statusId;
+        return Cache::remember($key, 900, function() use($profileId, $statusId) {
+            return GroupLike::whereProfileId($profileId)->whereStatusId($statusId)->exists();
+        });
+    }
+
+    public static function likedBy($status)
+    {
+        $empty = [
+            'username' => null,
+            'others' => false
+        ];
+
+        return $empty;
+    }
+
+    public static function count($id)
+    {
+        return Cache::get(self::CACHE_POST_KEY . $id, 0);
+    }
+
+}
diff --git a/app/Transformer/Api/GroupPostTransformer.php b/app/Transformer/Api/GroupPostTransformer.php
new file mode 100644
index 000000000..0999b3fa4
--- /dev/null
+++ b/app/Transformer/Api/GroupPostTransformer.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Transformer\Api;
+
+use App\Status;
+use League\Fractal;
+use Cache;
+use App\Services\AccountService;
+use App\Services\HashidService;
+use App\Services\LikeService;
+use App\Services\Groups\GroupMediaService;
+use App\Services\MediaTagService;
+use App\Services\StatusService;
+use App\Services\StatusHashtagService;
+use App\Services\StatusLabelService;
+use App\Services\StatusMentionService;
+use App\Services\PollService;
+use App\Models\CustomEmoji;
+use App\Util\Lexer\Autolink;
+use Purify;
+
+class GroupPostTransformer extends Fractal\TransformerAbstract
+{
+    public function transform($status)
+    {
+        return [
+            'id'                        => (string) $status->id,
+            'gid'                       => $status->group_id ? (string) $status->group_id : null,
+            'url'                       => '/groups/' . $status->group_id . '/p/' . $status->id,
+            'content'                   => $status->caption,
+            'content_text'              => $status->caption,
+            'created_at'                => str_replace('+00:00', 'Z', $status->created_at->format(DATE_RFC3339_EXTENDED)),
+            'reblogs_count'             => $status->reblogs_count ?? 0,
+            'favourites_count'          => $status->likes_count ?? 0,
+            'reblogged'                 => null,
+            'favourited'                => null,
+            'muted'                     => null,
+            'sensitive'                 => (bool) $status->is_nsfw,
+            'spoiler_text'              => $status->cw_summary ?? '',
+            'visibility'                => $status->visibility,
+            'application'               => [
+                'name'      => 'web',
+                'website'   => null
+             ],
+            'language'                  => null,
+            'pf_type'                   => $status->type,
+            'reply_count'               => (int) $status->reply_count ?? 0,
+            'comments_disabled'         => (bool) $status->comments_disabled,
+            'thread'                    => false,
+            'media_attachments'         => GroupMediaService::get($status->id),
+            'replies'                   => [],
+            'parent'                    => [],
+            'place'                     => null,
+            'local'                     => (bool) !$status->remote_url,
+            'account'                   => AccountService::get($status->profile_id, true),
+            'poll'                      => [],
+        ];
+    }
+}
diff --git a/app/Util/ActivityPub/Helpers.php b/app/Util/ActivityPub/Helpers.php
index 2002a8967..9e03beef1 100644
--- a/app/Util/ActivityPub/Helpers.php
+++ b/app/Util/ActivityPub/Helpers.php
@@ -858,6 +858,11 @@ class Helpers
         return self::profileFirstOrNew($url);
     }
 
+    public static function getSignedFetch($url)
+    {
+        return ActivityPubFetchService::get($url);
+    }
+
     public static function sendSignedObject($profile, $url, $body)
     {
         if (app()->environment() !== 'production') {
diff --git a/config/groups.php b/config/groups.php
new file mode 100644
index 000000000..24513e502
--- /dev/null
+++ b/config/groups.php
@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'enabled' => env('GROUPS_ENABLED', false),
+    'federation' => env('GROUPS_FEDERATION', true),
+
+    'acl' => [
+        'create_group' => [
+            'admins' => env('GROUPS_ACL_CREATE_ADMINS', true),
+            'users' => env('GROUPS_ACL_CREATE_USERS', true),
+        ]
+    ]
+];
diff --git a/database/migrations/2021_08_04_100435_create_group_roles_table.php b/database/migrations/2021_08_04_100435_create_group_roles_table.php
new file mode 100644
index 000000000..c2b0d0ff4
--- /dev/null
+++ b/database/migrations/2021_08_04_100435_create_group_roles_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupRolesTable extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::create('group_roles', function (Blueprint $table) {
+			$table->id();
+			$table->bigInteger('group_id')->unsigned()->index();
+			$table->string('name');
+			$table->string('slug')->nullable();
+			$table->text('abilities')->nullable();
+			$table->unique(['group_id', 'slug']);
+			$table->timestamps();
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::dropIfExists('group_roles');
+	}
+}
diff --git a/database/migrations/2021_08_16_100034_create_group_interactions_table.php b/database/migrations/2021_08_16_100034_create_group_interactions_table.php
new file mode 100644
index 000000000..adc32d1d1
--- /dev/null
+++ b/database/migrations/2021_08_16_100034_create_group_interactions_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupInteractionsTable extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::create('group_interactions', function (Blueprint $table) {
+			$table->bigIncrements('id');
+			$table->bigInteger('group_id')->unsigned()->index();
+			$table->bigInteger('profile_id')->unsigned()->index();
+			$table->string('type')->nullable()->index();
+			$table->string('item_type')->nullable()->index();
+			$table->string('item_id')->nullable()->index();
+			$table->json('metadata')->nullable();
+			$table->timestamps();
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::dropIfExists('group_interactions');
+	}
+}
diff --git a/database/migrations/2021_08_17_073839_create_group_reports_table.php b/database/migrations/2021_08_17_073839_create_group_reports_table.php
new file mode 100644
index 000000000..93ed00d63
--- /dev/null
+++ b/database/migrations/2021_08_17_073839_create_group_reports_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupReportsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_reports', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('group_id')->unsigned()->index();
+			$table->bigInteger('profile_id')->unsigned()->index();
+			$table->string('type')->nullable()->index();
+			$table->string('item_type')->nullable()->index();
+			$table->string('item_id')->nullable()->index();
+			$table->json('metadata')->nullable();
+			$table->boolean('open')->default(true)->index();
+			$table->unique(['group_id', 'profile_id', 'item_type', 'item_id']);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_reports');
+    }
+}
diff --git a/database/migrations/2021_09_26_112423_create_group_blocks_table.php b/database/migrations/2021_09_26_112423_create_group_blocks_table.php
new file mode 100644
index 000000000..320fcf985
--- /dev/null
+++ b/database/migrations/2021_09_26_112423_create_group_blocks_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupBlocksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_blocks', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->bigInteger('group_id')->unsigned()->index();
+			$table->bigInteger('admin_id')->unsigned()->nullable();
+			$table->bigInteger('profile_id')->nullable()->unsigned()->index();
+			$table->bigInteger('instance_id')->nullable()->unsigned()->index();
+			$table->string('name')->nullable()->index();
+			$table->string('reason')->nullable();
+			$table->boolean('is_user')->index();
+			$table->boolean('moderated')->default(false)->index();
+			$table->unique(['group_id', 'profile_id', 'instance_id']);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_blocks');
+    }
+}
diff --git a/database/migrations/2021_09_29_023230_create_group_limits_table.php b/database/migrations/2021_09_29_023230_create_group_limits_table.php
new file mode 100644
index 000000000..67ca7bec8
--- /dev/null
+++ b/database/migrations/2021_09_29_023230_create_group_limits_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupLimitsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_limits', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('group_id')->unsigned()->index();
+			$table->bigInteger('profile_id')->unsigned()->index();
+			$table->json('limits')->nullable();
+			$table->json('metadata')->nullable();
+			$table->unique(['group_id', 'profile_id']);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_limits');
+    }
+}
diff --git a/database/migrations/2021_10_01_083917_create_group_categories_table.php b/database/migrations/2021_10_01_083917_create_group_categories_table.php
new file mode 100644
index 000000000..481ddf5ef
--- /dev/null
+++ b/database/migrations/2021_10_01_083917_create_group_categories_table.php
@@ -0,0 +1,102 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use App\Models\GroupCategory;
+
+class CreateGroupCategoriesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::dropIfExists('group_categories');
+
+        Schema::create('group_categories', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->unique()->index();
+            $table->string('slug')->unique()->index();
+            $table->boolean('active')->default(true)->index();
+            $table->tinyInteger('order')->unsigned()->nullable();
+            $table->json('metadata')->nullable();
+            $table->timestamps();
+        });
+
+        $default = [
+        	'General',
+			'Photography',
+			'Fediverse',
+			'CompSci & Programming',
+			'Causes & Movements',
+			'Humor',
+			'Science & Tech',
+			'Travel',
+			'Buy & Sell',
+			'Business',
+			'Style',
+			'Animals',
+			'Sports & Fitness',
+			'Education',
+			'Arts',
+			'Entertainment',
+			'Faith & Spirituality',
+			'Relationships & Identity',
+			'Parenting',
+			'Hobbies & Interests',
+			'Food & Drink',
+			'Vehicles & Commutes',
+			'Civics & Community',
+		];
+
+		for ($i=1; $i <= 23; $i++) {
+			$cat = new GroupCategory;
+			$cat->name = $default[$i - 1];
+			$cat->slug = str_slug($cat->name);
+			$cat->active = true;
+			$cat->order = $i;
+			$cat->save();
+		}
+
+		Schema::table('groups', function (Blueprint $table) {
+			$table->unsignedInteger('category_id')->default(1)->index()->after('id');
+			$table->unsignedInteger('member_count')->nullable();
+			$table->boolean('recommended')->default(false)->index();
+			$table->boolean('discoverable')->default(false)->index();
+			$table->boolean('activitypub')->default(false);
+			$table->boolean('is_nsfw')->default(false);
+			$table->boolean('dms')->default(false);
+			$table->boolean('autospam')->default(false);
+			$table->boolean('verified')->default(false);
+			$table->timestamp('last_active_at')->nullable();
+			$table->softDeletes();
+		});
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_categories');
+
+		Schema::table('groups', function (Blueprint $table) {
+			$table->dropColumn('category_id');
+			$table->dropColumn('member_count');
+			$table->dropColumn('recommended');
+			$table->dropColumn('activitypub');
+			$table->dropColumn('is_nsfw');
+			$table->dropColumn('discoverable');
+			$table->dropColumn('dms');
+			$table->dropColumn('autospam');
+			$table->dropColumn('verified');
+			$table->dropColumn('last_active_at');
+			$table->dropColumn('deleted_at');
+		});
+    }
+}
diff --git a/database/migrations/2021_10_09_004230_create_group_hashtags_table.php b/database/migrations/2021_10_09_004230_create_group_hashtags_table.php
new file mode 100644
index 000000000..1d05dabb9
--- /dev/null
+++ b/database/migrations/2021_10_09_004230_create_group_hashtags_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupHashtagsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_hashtags', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('name')->unique()->index();
+            $table->string('formatted')->nullable();
+            $table->boolean('recommended')->default(false);
+            $table->boolean('sensitive')->default(false);
+            $table->boolean('banned')->default(false);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_hashtags');
+    }
+}
diff --git a/database/migrations/2021_10_09_004436_create_group_post_hashtags_table.php b/database/migrations/2021_10_09_004436_create_group_post_hashtags_table.php
new file mode 100644
index 000000000..08014e399
--- /dev/null
+++ b/database/migrations/2021_10_09_004436_create_group_post_hashtags_table.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupPostHashtagsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_post_hashtags', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->bigInteger('hashtag_id')->unsigned()->index();
+            $table->bigInteger('group_id')->unsigned()->index();
+            $table->bigInteger('profile_id')->unsigned();
+            $table->bigInteger('status_id')->unsigned()->nullable();
+            $table->string('status_visibility')->nullable();
+            $table->boolean('nsfw')->default(false);
+            $table->unique(['hashtag_id', 'group_id', 'profile_id', 'status_id'], 'group_post_hashtags_gda_unique');
+            $table->foreign('group_id')->references('id')->on('groups')->onDelete('cascade');
+            $table->foreign('profile_id')->references('id')->on('profiles')->onDelete('cascade');
+            $table->foreign('hashtag_id')->references('id')->on('group_hashtags')->onDelete('cascade');
+            $table->foreign('status_id')->references('id')->on('group_posts')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_post_hashtags');
+    }
+}
diff --git a/database/migrations/2021_10_13_002033_create_group_stores_table.php b/database/migrations/2021_10_13_002033_create_group_stores_table.php
new file mode 100644
index 000000000..efdf0a966
--- /dev/null
+++ b/database/migrations/2021_10_13_002033_create_group_stores_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupStoresTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_stores', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->bigInteger('group_id')->unsigned()->nullable()->index();
+            $table->string('store_key')->index();
+            $table->json('store_value')->nullable();
+            $table->json('metadata')->nullable();
+            $table->unique(['group_id', 'store_key']);
+            $table->foreign('group_id')->references('id')->on('groups')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_stores');
+    }
+}
diff --git a/database/migrations/2021_10_13_002041_create_group_events_table.php b/database/migrations/2021_10_13_002041_create_group_events_table.php
new file mode 100644
index 000000000..166c35cf0
--- /dev/null
+++ b/database/migrations/2021_10_13_002041_create_group_events_table.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupEventsTable extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::create('group_events', function (Blueprint $table) {
+			$table->bigIncrements('id');
+			$table->bigInteger('group_id')->unsigned()->nullable()->index();
+			$table->bigInteger('profile_id')->unsigned()->nullable()->index();
+			$table->string('name')->nullable();
+			$table->string('type')->index();
+			$table->json('tags')->nullable();
+			$table->json('location')->nullable();
+			$table->text('description')->nullable();
+			$table->json('metadata')->nullable();
+			$table->boolean('open')->default(false)->index();
+			$table->boolean('comments_open')->default(false);
+			$table->boolean('show_guest_list')->default(false);
+			$table->timestamp('start_at')->nullable();
+			$table->timestamp('end_at')->nullable();
+			$table->timestamps();
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::dropIfExists('group_events');
+	}
+}
diff --git a/database/migrations/2021_10_13_002124_create_group_activity_graphs_table.php b/database/migrations/2021_10_13_002124_create_group_activity_graphs_table.php
new file mode 100644
index 000000000..13fef7240
--- /dev/null
+++ b/database/migrations/2021_10_13_002124_create_group_activity_graphs_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateGroupActivityGraphsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('group_activity_graphs', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->bigInteger('instance_id')->nullable()->index();
+            $table->bigInteger('actor_id')->nullable()->index();
+            $table->string('verb')->nullable()->index();
+            $table->string('id_url')->nullable()->unique()->index();
+            $table->json('payload')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('group_activity_graphs');
+    }
+}
diff --git a/database/migrations/2024_05_20_062706_update_group_posts_table.php b/database/migrations/2024_05_20_062706_update_group_posts_table.php
new file mode 100644
index 000000000..99f272be9
--- /dev/null
+++ b/database/migrations/2024_05_20_062706_update_group_posts_table.php
@@ -0,0 +1,48 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('group_posts', function (Blueprint $table) {
+            $table->dropColumn('status_id');
+            $table->dropColumn('reply_child_id');
+            $table->dropColumn('in_reply_to_id');
+            $table->dropColumn('reblog_of_id');
+            $table->text('caption')->nullable();
+            $table->string('visibility')->nullable();
+            $table->boolean('is_nsfw')->default(false);
+            $table->unsignedInteger('likes_count')->default(0);
+            $table->text('cw_summary')->nullable();
+            $table->json('media_ids')->nullable();
+            $table->boolean('comments_disabled')->default(false);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('group_posts', function (Blueprint $table) {
+            $table->bigInteger('status_id')->unsigned()->unique()->nullable();
+            $table->bigInteger('reply_child_id')->unsigned()->nullable();
+            $table->bigInteger('in_reply_to_id')->unsigned()->nullable();
+            $table->bigInteger('reblog_of_id')->unsigned()->nullable();
+            $table->dropColumn('caption');
+            $table->dropColumn('is_nsfw');
+            $table->dropColumn('visibility');
+            $table->dropColumn('likes_count');
+            $table->dropColumn('cw_summary');
+            $table->dropColumn('media_ids');
+            $table->dropColumn('comments_disabled');
+        });
+    }
+};
diff --git a/database/migrations/2024_05_20_063638_create_group_comments_table.php b/database/migrations/2024_05_20_063638_create_group_comments_table.php
new file mode 100644
index 000000000..ad49f58c8
--- /dev/null
+++ b/database/migrations/2024_05_20_063638_create_group_comments_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('group_comments', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->unsignedBigInteger('group_id')->index();
+            $table->unsignedBigInteger('profile_id')->nullable();
+            $table->unsignedBigInteger('status_id')->nullable()->index();
+            $table->unsignedBigInteger('in_reply_to_id')->nullable()->index();
+            $table->string('remote_url')->nullable()->unique()->index();
+            $table->text('caption')->nullable();
+            $table->boolean('is_nsfw')->default(false);
+            $table->string('visibility')->nullable();
+            $table->unsignedInteger('likes_count')->default(0);
+            $table->unsignedInteger('replies_count')->default(0);
+            $table->text('cw_summary')->nullable();
+            $table->json('media_ids')->nullable();
+            $table->string('status')->nullable();
+            $table->string('type')->default('text')->nullable();
+            $table->boolean('local')->default(false);
+            $table->json('metadata')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('group_comments');
+    }
+};
diff --git a/database/migrations/2024_05_20_073054_create_group_likes_table.php b/database/migrations/2024_05_20_073054_create_group_likes_table.php
new file mode 100644
index 000000000..162ef7458
--- /dev/null
+++ b/database/migrations/2024_05_20_073054_create_group_likes_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('group_likes', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->unsignedBigInteger('group_id');
+            $table->unsignedBigInteger('profile_id')->index();
+            $table->unsignedBigInteger('status_id')->nullable();
+            $table->unsignedBigInteger('comment_id')->nullable();
+            $table->boolean('local')->default(true);
+            $table->unique(['group_id', 'profile_id', 'status_id', 'comment_id'], 'group_likes_gpsc_unique');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('group_likes');
+    }
+};
diff --git a/database/migrations/2024_05_20_083159_create_group_media_table.php b/database/migrations/2024_05_20_083159_create_group_media_table.php
new file mode 100644
index 000000000..732856097
--- /dev/null
+++ b/database/migrations/2024_05_20_083159_create_group_media_table.php
@@ -0,0 +1,50 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('group_media', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->unsignedBigInteger('group_id');
+            $table->unsignedBigInteger('profile_id');
+            $table->unsignedBigInteger('status_id')->nullable()->index();
+            $table->string('media_path')->unique();
+            $table->text('thumbnail_url')->nullable();
+            $table->text('cdn_url')->nullable();
+            $table->text('url')->nullable();
+            $table->string('mime')->nullable();
+            $table->unsignedInteger('size')->nullable();
+            $table->text('cw_summary')->nullable();
+            $table->string('license')->nullable();
+            $table->string('blurhash')->nullable();
+            $table->tinyInteger('order')->unsigned()->default(1);
+            $table->unsignedInteger('width')->nullable();
+            $table->unsignedInteger('height')->nullable();
+            $table->boolean('local_user')->default(true);
+            $table->boolean('is_cached')->default(false);
+            $table->boolean('is_comment')->default(false)->index();
+            $table->json('metadata')->nullable();
+            $table->string('version')->default(1);
+            $table->boolean('skip_optimize')->default(false);
+            $table->timestamp('processed_at')->nullable();
+            $table->timestamp('thumbnail_generated')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('group_media');
+    }
+};
diff --git a/public/js/changelog.bundle.d5810c2672b6abc7.js b/public/js/changelog.bundle.72c44e46a0cc74f9.js
similarity index 67%
rename from public/js/changelog.bundle.d5810c2672b6abc7.js
rename to public/js/changelog.bundle.72c44e46a0cc74f9.js
index b0a083d76..143294298 100644
Binary files a/public/js/changelog.bundle.d5810c2672b6abc7.js and b/public/js/changelog.bundle.72c44e46a0cc74f9.js differ
diff --git a/public/js/compose.chunk.28539d85e4c112c4.js b/public/js/compose.chunk.28539d85e4c112c4.js
new file mode 100644
index 000000000..bd647b57f
Binary files /dev/null and b/public/js/compose.chunk.28539d85e4c112c4.js differ
diff --git a/public/js/compose.chunk.47ba00abaa827b26.js b/public/js/compose.chunk.47ba00abaa827b26.js
deleted file mode 100644
index 0ef32d80d..000000000
Binary files a/public/js/compose.chunk.47ba00abaa827b26.js and /dev/null differ
diff --git a/public/js/daci.chunk.e49239579f174211.js b/public/js/daci.chunk.8a381f0a227e6ed5.js
similarity index 75%
rename from public/js/daci.chunk.e49239579f174211.js
rename to public/js/daci.chunk.8a381f0a227e6ed5.js
index da02a4351..b85761a86 100644
Binary files a/public/js/daci.chunk.e49239579f174211.js and b/public/js/daci.chunk.8a381f0a227e6ed5.js differ
diff --git a/public/js/discover.chunk.1404d3172761023b.js b/public/js/discover.chunk.fbb3e76aabb32be2.js
similarity index 51%
rename from public/js/discover.chunk.1404d3172761023b.js
rename to public/js/discover.chunk.fbb3e76aabb32be2.js
index 03313d4ee..b6ad4beed 100644
Binary files a/public/js/discover.chunk.1404d3172761023b.js and b/public/js/discover.chunk.fbb3e76aabb32be2.js differ
diff --git a/public/js/discover~findfriends.chunk.d0e638a697f821b4.js b/public/js/discover~findfriends.chunk.37adc9959baa51ea.js
similarity index 75%
rename from public/js/discover~findfriends.chunk.d0e638a697f821b4.js
rename to public/js/discover~findfriends.chunk.37adc9959baa51ea.js
index f56741b41..819c38903 100644
Binary files a/public/js/discover~findfriends.chunk.d0e638a697f821b4.js and b/public/js/discover~findfriends.chunk.37adc9959baa51ea.js differ
diff --git a/public/js/discover~hashtag.bundle.1b11b46e0b28aa3f.js b/public/js/discover~hashtag.bundle.909ff7b3dab67bde.js
similarity index 53%
rename from public/js/discover~hashtag.bundle.1b11b46e0b28aa3f.js
rename to public/js/discover~hashtag.bundle.909ff7b3dab67bde.js
index f0cca728f..f23188dd6 100644
Binary files a/public/js/discover~hashtag.bundle.1b11b46e0b28aa3f.js and b/public/js/discover~hashtag.bundle.909ff7b3dab67bde.js differ
diff --git a/public/js/discover~memories.chunk.315bb6896f3afec2.js b/public/js/discover~memories.chunk.0c1a79e4c57c4ed8.js
similarity index 76%
rename from public/js/discover~memories.chunk.315bb6896f3afec2.js
rename to public/js/discover~memories.chunk.0c1a79e4c57c4ed8.js
index f12e1a7c3..f59dcff88 100644
Binary files a/public/js/discover~memories.chunk.315bb6896f3afec2.js and b/public/js/discover~memories.chunk.0c1a79e4c57c4ed8.js differ
diff --git a/public/js/discover~myhashtags.chunk.25db2bcadb2836b5.js b/public/js/discover~myhashtags.chunk.4db4fe0961b3c34f.js
similarity index 81%
rename from public/js/discover~myhashtags.chunk.25db2bcadb2836b5.js
rename to public/js/discover~myhashtags.chunk.4db4fe0961b3c34f.js
index 3a9ee3b25..102f377f1 100644
Binary files a/public/js/discover~myhashtags.chunk.25db2bcadb2836b5.js and b/public/js/discover~myhashtags.chunk.4db4fe0961b3c34f.js differ
diff --git a/public/js/discover~serverfeed.chunk.4eb5e50270522771.js b/public/js/discover~serverfeed.chunk.b6ace26463e28a19.js
similarity index 75%
rename from public/js/discover~serverfeed.chunk.4eb5e50270522771.js
rename to public/js/discover~serverfeed.chunk.b6ace26463e28a19.js
index b7e83e7b1..52cb430dc 100644
Binary files a/public/js/discover~serverfeed.chunk.4eb5e50270522771.js and b/public/js/discover~serverfeed.chunk.b6ace26463e28a19.js differ
diff --git a/public/js/discover~settings.chunk.3f3acf6b2d7f41a2.js b/public/js/discover~settings.chunk.31f5865465e89899.js
similarity index 76%
rename from public/js/discover~settings.chunk.3f3acf6b2d7f41a2.js
rename to public/js/discover~settings.chunk.31f5865465e89899.js
index 43d732777..abb1a57e0 100644
Binary files a/public/js/discover~settings.chunk.3f3acf6b2d7f41a2.js and b/public/js/discover~settings.chunk.31f5865465e89899.js differ
diff --git a/public/js/dms.chunk.a42edfd973f6c593.js b/public/js/dms.chunk.8e8464594fef81e5.js
similarity index 65%
rename from public/js/dms.chunk.a42edfd973f6c593.js
rename to public/js/dms.chunk.8e8464594fef81e5.js
index d3e03da34..e2886f06f 100644
Binary files a/public/js/dms.chunk.a42edfd973f6c593.js and b/public/js/dms.chunk.8e8464594fef81e5.js differ
diff --git a/public/js/dms~message.chunk.6cd795c99fc1a568.js b/public/js/dms~message.chunk.c831de515447ca8a.js
similarity index 70%
rename from public/js/dms~message.chunk.6cd795c99fc1a568.js
rename to public/js/dms~message.chunk.c831de515447ca8a.js
index 5e5a4a356..beb2eb2e2 100644
Binary files a/public/js/dms~message.chunk.6cd795c99fc1a568.js and b/public/js/dms~message.chunk.c831de515447ca8a.js differ
diff --git a/public/js/group-status.js b/public/js/group-status.js
new file mode 100644
index 000000000..3f0e8cb2c
Binary files /dev/null and b/public/js/group-status.js differ
diff --git a/public/js/group-topic-feed.js b/public/js/group-topic-feed.js
new file mode 100644
index 000000000..c4ed457fc
Binary files /dev/null and b/public/js/group-topic-feed.js differ
diff --git a/public/js/group.create.9836b689acf0fc1b.js b/public/js/group.create.9836b689acf0fc1b.js
new file mode 100644
index 000000000..6ee5f1c16
Binary files /dev/null and b/public/js/group.create.9836b689acf0fc1b.js differ
diff --git a/public/js/groups-page-about.150f2f899988e65c.js b/public/js/groups-page-about.150f2f899988e65c.js
new file mode 100644
index 000000000..8941d3183
Binary files /dev/null and b/public/js/groups-page-about.150f2f899988e65c.js differ
diff --git a/public/js/groups-page-media.a57186ce36fd8972.js b/public/js/groups-page-media.a57186ce36fd8972.js
new file mode 100644
index 000000000..eab30646b
Binary files /dev/null and b/public/js/groups-page-media.a57186ce36fd8972.js differ
diff --git a/public/js/groups-page-members.20f9217256d06bf3.js b/public/js/groups-page-members.20f9217256d06bf3.js
new file mode 100644
index 000000000..e6be9561b
Binary files /dev/null and b/public/js/groups-page-members.20f9217256d06bf3.js differ
diff --git a/public/js/groups-page-topics.c856bf15dc42b2fb.js b/public/js/groups-page-topics.c856bf15dc42b2fb.js
new file mode 100644
index 000000000..fd2375947
Binary files /dev/null and b/public/js/groups-page-topics.c856bf15dc42b2fb.js differ
diff --git a/public/js/groups-page.6c5fbadccf05f783.js b/public/js/groups-page.6c5fbadccf05f783.js
new file mode 100644
index 000000000..678d0ad5c
Binary files /dev/null and b/public/js/groups-page.6c5fbadccf05f783.js differ
diff --git a/public/js/groups-post.c9083f5a20000208.js b/public/js/groups-post.c9083f5a20000208.js
new file mode 100644
index 000000000..6db341dc2
Binary files /dev/null and b/public/js/groups-post.c9083f5a20000208.js differ
diff --git a/public/js/groups-profile.9049d02d06606680.js b/public/js/groups-profile.9049d02d06606680.js
new file mode 100644
index 000000000..d8e8563e7
Binary files /dev/null and b/public/js/groups-profile.9049d02d06606680.js differ
diff --git a/public/js/groups.js b/public/js/groups.js
new file mode 100644
index 000000000..c2a9a04b9
Binary files /dev/null and b/public/js/groups.js differ
diff --git a/public/js/home.chunk.8bbc3c5c38dde66d.js b/public/js/home.chunk.db29292541125db4.js
similarity index 76%
rename from public/js/home.chunk.8bbc3c5c38dde66d.js
rename to public/js/home.chunk.db29292541125db4.js
index 7aa8ec580..226236da5 100644
Binary files a/public/js/home.chunk.8bbc3c5c38dde66d.js and b/public/js/home.chunk.db29292541125db4.js differ
diff --git a/public/js/home.chunk.8bbc3c5c38dde66d.js.LICENSE.txt b/public/js/home.chunk.db29292541125db4.js.LICENSE.txt
similarity index 100%
rename from public/js/home.chunk.8bbc3c5c38dde66d.js.LICENSE.txt
rename to public/js/home.chunk.db29292541125db4.js.LICENSE.txt
diff --git a/public/js/i18n.bundle.28bba3e12cdadf51.js b/public/js/i18n.bundle.11814756f6bbd153.js
similarity index 61%
rename from public/js/i18n.bundle.28bba3e12cdadf51.js
rename to public/js/i18n.bundle.11814756f6bbd153.js
index f3028771e..db7ce30e9 100644
Binary files a/public/js/i18n.bundle.28bba3e12cdadf51.js and b/public/js/i18n.bundle.11814756f6bbd153.js differ
diff --git a/public/js/landing.js b/public/js/landing.js
index 9c93b6e26..55cb59cc8 100644
Binary files a/public/js/landing.js and b/public/js/landing.js differ
diff --git a/public/js/manifest.js b/public/js/manifest.js
index ae4d1ff8f..2cdec0468 100644
Binary files a/public/js/manifest.js and b/public/js/manifest.js differ
diff --git a/public/js/notifications.chunk.1086603ea08d1017.js b/public/js/notifications.chunk.19a0d29f7823c313.js
similarity index 59%
rename from public/js/notifications.chunk.1086603ea08d1017.js
rename to public/js/notifications.chunk.19a0d29f7823c313.js
index b5d4bfd12..1ed7ac814 100644
Binary files a/public/js/notifications.chunk.1086603ea08d1017.js and b/public/js/notifications.chunk.19a0d29f7823c313.js differ
diff --git a/public/js/post.chunk.803d8c9f68415936.js b/public/js/post.chunk.857e52af9dd166ea.js
similarity index 78%
rename from public/js/post.chunk.803d8c9f68415936.js
rename to public/js/post.chunk.857e52af9dd166ea.js
index d024217ac..7d5b651f8 100644
Binary files a/public/js/post.chunk.803d8c9f68415936.js and b/public/js/post.chunk.857e52af9dd166ea.js differ
diff --git a/public/js/post.chunk.803d8c9f68415936.js.LICENSE.txt b/public/js/post.chunk.857e52af9dd166ea.js.LICENSE.txt
similarity index 100%
rename from public/js/post.chunk.803d8c9f68415936.js.LICENSE.txt
rename to public/js/post.chunk.857e52af9dd166ea.js.LICENSE.txt
diff --git a/public/js/profile.chunk.33a4b9cb10dbbb6c.js b/public/js/profile.chunk.f18d6551c434b139.js
similarity index 95%
rename from public/js/profile.chunk.33a4b9cb10dbbb6c.js
rename to public/js/profile.chunk.f18d6551c434b139.js
index 2869c5cbf..6f37de655 100644
Binary files a/public/js/profile.chunk.33a4b9cb10dbbb6c.js and b/public/js/profile.chunk.f18d6551c434b139.js differ
diff --git a/public/js/profile.js b/public/js/profile.js
index 9f8a3081a..55d85fc51 100644
Binary files a/public/js/profile.js and b/public/js/profile.js differ
diff --git a/public/js/search.js b/public/js/search.js
index b61629ca2..5e33f2250 100644
Binary files a/public/js/search.js and b/public/js/search.js differ
diff --git a/public/js/spa.js b/public/js/spa.js
index 74e6e094f..6cd9c7a09 100644
Binary files a/public/js/spa.js and b/public/js/spa.js differ
diff --git a/public/js/status.js b/public/js/status.js
index fd443ef45..6650c4fb5 100644
Binary files a/public/js/status.js and b/public/js/status.js differ
diff --git a/public/js/stories.js b/public/js/stories.js
index da19538eb..977a3ab3c 100644
Binary files a/public/js/stories.js and b/public/js/stories.js differ
diff --git a/public/js/story-compose.js b/public/js/story-compose.js
index 9cdd4e713..2a0d18cb7 100644
Binary files a/public/js/story-compose.js and b/public/js/story-compose.js differ
diff --git a/public/js/timeline.js b/public/js/timeline.js
index 327acaee6..8a4417069 100644
Binary files a/public/js/timeline.js and b/public/js/timeline.js differ
diff --git a/public/js/vendor.js b/public/js/vendor.js
index c1ddf78b4..529b96796 100644
Binary files a/public/js/vendor.js and b/public/js/vendor.js differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index a5fa1da5f..a1e079997 100644
Binary files a/public/mix-manifest.json and b/public/mix-manifest.json differ
diff --git a/resources/assets/components/GroupCreate.vue b/resources/assets/components/GroupCreate.vue
new file mode 100644
index 000000000..26c48948b
--- /dev/null
+++ b/resources/assets/components/GroupCreate.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="group-notifications-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <create-group />
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import LoaderComponent from '@/groups/sections/Loader.vue';
+    import CreateGroup from '@/groups/CreateGroup.vue';
+
+    export default {
+        components: {
+            "sidebar": SidebarComponent,
+            "loader": LoaderComponent,
+            "create-group": CreateGroup
+        },
+
+        data() {
+            return {
+                loaded: false,
+                loadTimeout: undefined,
+            }
+        },
+
+        created() {
+            this.loadTimeout = setTimeout(() => {
+                this.loaded = true;
+            }, 1000);
+        },
+
+        beforeUnmount() {
+            clearTimeout(this.loadTimeout);
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group-notifications-component {
+        font-family: var(--font-family-sans-serif);
+
+        .jumbotron {
+            background-color: #fff;
+            border-radius: 0px;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupDiscover.vue b/resources/assets/components/GroupDiscover.vue
new file mode 100644
index 000000000..bfdc537d3
--- /dev/null
+++ b/resources/assets/components/GroupDiscover.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="group-discover-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <loader v-if="!loaded" :loaded="loaded" />
+
+                <template v-else>
+                    <div class="container-fluid">
+                        <div class="py-5">
+                            <h1>Discover</h1>
+                        </div>
+
+                        <div class="popular row">
+                            <group-card
+                                v-for="(popular, idx) in popularGroups"
+                                :key="idx"
+                                :group="popular"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import LoaderComponent from '@/groups/sections/Loader.vue';
+    import GroupCard from '@/groups/partials/GroupCard.vue';
+
+    export default {
+        components: {
+            "sidebar": SidebarComponent,
+            "loader": LoaderComponent,
+            "group-card": GroupCard
+        },
+
+        data() {
+            return {
+                loaded: false,
+                loadTimeout: undefined,
+                popularGroups: [],
+                newGroups: [],
+            }
+        },
+
+        methods: {
+            fetchPopular() {
+                axios.get('/api/v0/groups/discover/popular')
+                .then(res => this.popularGroups = res.data)
+                .finally(() => this.fetchNewGroups())
+            },
+
+            fetchNewGroups() {
+                axios.get('/api/v0/groups/discover/new')
+                .then(res => this.newGroups = res.data)
+                .finally(() => this.loaded = true)
+            },
+        },
+
+        created() {
+            this.fetchPopular()
+        },
+
+        beforeUnmount() {
+            clearTimeout(this.loadTimeout);
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group-discover-component {
+        font-family: var(--font-family-sans-serif);
+
+        .jumbotron {
+            background-color: #fff;
+            border-radius: 0px;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupFeed.vue b/resources/assets/components/GroupFeed.vue
new file mode 100644
index 000000000..8d752f271
--- /dev/null
+++ b/resources/assets/components/GroupFeed.vue
@@ -0,0 +1,315 @@
+<template>
+    <div class="groups-home-component w-100 h-100">
+        <div v-if="initialLoad" class="row border-bottom m-0 p-0">
+            <sidebar />
+
+                    <self-feed :profile="profile" v-on:switchtab="switchTab" />
+                    <!-- <self-discover v-if="tab == 'discover'" :profile="profile" />
+                    <self-notifications v-if="tab == 'notifications'" :profile="profile" />
+                    <self-invitations v-if="tab == 'invitations'" :profile="profile" />
+                    <self-remote-search v-if="tab == 'remotesearch'" :profile="profile" />
+                    <self-groups v-if="tab == 'mygroups'" :profile="profile" />
+                    <create-group v-if="tab == 'creategroup'" :profile="profile" />
+                    <div v-if="tab == 'gsearch'">
+                        <div class="col-12 px-5">
+                            <div class="my-4">
+                                <p class="h1 font-weight-bold mb-1">Group Search</p>
+                                <p class="lead text-muted mb-0">Search and explore groups.</p>
+                            </div>
+                            <div class="media align-items-center text-lighter">
+                                <i class="far fa-chevron-left fa-lg mr-3"></i>
+                                <div class="media-body">
+                                    <p class="lead mb-0">Use the search bar on the side menu</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+
+        </div>
+        <div v-else class="row justify-content-center mt-5">
+            <b-spinner />
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import SelfFeed from '@/groups/partials/SelfFeed.vue';
+    import SelfDiscover from '@/groups/partials/SelfDiscover.vue';
+    import SelfGroups from '@/groups/partials/SelfGroups.vue';
+    import SelfNotifications from '@/groups/partials/SelfNotifications.vue';
+    import SelfInvitations from '@/groups/partials/SelfInvitations.vue';
+    import SelfRemoteSearch from '@/groups/partials/SelfRemoteSearch.vue';
+    import CreateGroup from '@/groups/CreateGroup.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+    import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+    export default {
+        data() {
+            return {
+                initialLoad: false,
+                config: {},
+                groups: [],
+                profile: {},
+                tab: null,
+                searchQuery: undefined,
+            };
+        },
+
+        components: {
+            'autocomplete-input': Autocomplete,
+            'group-status': GroupStatus,
+            'self-discover': SelfDiscover,
+            'self-groups': SelfGroups,
+            'self-feed': SelfFeed,
+            'self-notifications': SelfNotifications,
+            'self-invitations': SelfInvitations,
+            'self-remote-search': SelfRemoteSearch,
+            "create-group": CreateGroup,
+            "sidebar": SidebarComponent
+        },
+
+        mounted() {
+            this.fetchConfig();
+        },
+
+        methods: {
+            init() {
+                document.querySelectorAll("footer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer-spacer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer").forEach(e => e.parentNode.removeChild(e));
+                // let u = new URLSearchParams(window.location.search);
+                // if(u.has('ct')) {
+                //     if(['mygroups', 'notifications', 'discover', 'remotesearch', 'creategroup', 'gsearch'].includes(u.get('ct'))) {
+                //         if(u.get('ct') == 'creategroup' && this.config.limits.user.create.new == false) {
+                //             this.tab = 'feed';
+                //             history.pushState(null, null, '/groups/feed');
+                //         } else {
+                //             this.tab = u.get('ct');
+                //         }
+                //     } else {
+                //         this.tab = 'feed';
+                //         history.pushState(null, null, '/groups/feed');
+                //     }
+                // } else {
+                //     this.tab = 'feed';
+                // }
+                this.initialLoad = true;
+            },
+
+            fetchConfig() {
+                axios.get('/api/v0/groups/config')
+                .then(res => {
+                    this.config = res.data;
+                    this.fetchProfile();
+                });
+            },
+
+            fetchProfile() {
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.init();
+                    window._sharedData.curUser = res.data;
+                    window.App.util.navatar();
+                })
+            },
+
+            fetchSelfGroups() {
+                axios.get('/api/v0/groups/self/list')
+                .then(res => {
+                    this.groups = res.data;
+                });
+            },
+
+            switchTab(tab) {
+                event.currentTarget.blur();
+                window.scrollTo(0,0);
+                this.tab = tab;
+
+                if(tab != 'feed') {
+                    history.pushState(null, null, '/groups/home?ct=' + tab);
+                } else {
+                    history.pushState(null, null, '/groups/home');
+                }
+            },
+
+            autocompleteSearch(input) {
+                if (!input || input.length < 2) {
+                    if(this.tab = 'searchresults') {
+                        this.tab = 'feed';
+                    }
+                    return [];
+                };
+
+                this.searchQuery = input;
+                // this.tab = 'searchresults';
+
+                if(input.startsWith('http')) {
+                    let url = new URL(input);
+                    if(url.hostname == location.hostname) {
+                        location.href = input;
+                        return [];
+                    }
+                    return [];
+                }
+
+                if(input.startsWith('#')) {
+                    this.$bvToast.toast(input, {
+                        title: 'Hashtag detected',
+                        variant: 'info',
+                        autoHideDelay: 5000
+                    });
+                    return [];
+                }
+
+                return axios.post('/api/v0/groups/search/global', {
+                    q: input,
+                    v: '0.2'
+                })
+                .then(res => {
+                    this.searchLoading = false;
+                    return res.data;
+                }).catch(err => {
+
+                    if(err.response.status === 422) {
+                        this.$bvToast.toast(err.response.data.error.message, {
+                            title: 'Cannot display search results',
+                            variant: 'danger',
+                            autoHideDelay: 5000
+                        });
+                    }
+
+                    return [];
+                })
+            },
+
+            getSearchResultValue(result) {
+                return result.name;
+            },
+
+            onSearchSubmit(result) {
+                if (result.length < 1) {
+                    return [];
+                }
+
+                location.href = result.url;
+            },
+
+            truncateName(val) {
+                if(val.length < 24) {
+                    return val;
+                }
+
+                return val.substr(0, 23) + '...';
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .groups-home-component {
+        font-family: var(--font-family-sans-serif);
+
+        .group-nav-btn {
+            display: block;
+            width: 100%;
+            padding-left: 0;
+            padding-top: 0.3rem;
+            padding-bottom: 0.3rem;
+            margin-bottom: 0.3rem;
+            border-radius: 1.5rem;
+            text-align: left;
+            color: #6c757d;
+            background-color: transparent;
+            border-color: transparent;
+            justify-content: flex-start;
+
+            &.active {
+                background-color: #EFF6FF !important;
+                border:1px solid #DBEAFE !important;
+                color: #212529;
+
+                .group-nav-btn-icon {
+                    background-color: #2c78bf !important;
+                    color: #fff !important;
+                }
+            }
+
+            &-icon {
+                display: inline-flex;
+                width: 35px;
+                height: 35px;
+                padding: 12px;
+                background-color: #E5E7EB;
+                border-radius: 17px;
+                margin: auto 0.3rem;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &-name {
+                display: inline-block;
+                margin-left: 0.3rem;
+                font-weight: 700;
+            }
+        }
+
+        .autocomplete-input {
+            height: 2.375rem;
+            background-color: #f8f9fa !important;
+            font-size: 0.9rem;
+            color: #495057;
+            border-radius: 50rem;
+            border-color: transparent;
+
+            &:focus,
+            &[aria-expanded=true] {
+                box-shadow: none;
+            }
+        }
+
+        .autocomplete-result {
+            background: none;
+            padding: 12px;
+
+            &:hover,
+            &:focus {
+                background-color: #EFF6FF !important;
+            }
+
+            .media {
+                img {
+                    object-fit: cover;
+                    border-radius: 4px;
+                    margin-right: 0.6rem;
+                }
+
+                .icon-placeholder {
+                    display: flex;
+                    width: 32px;
+                    height: 32px;
+                    background-color: #2c78bf;
+                    border-radius: 4px;
+                    justify-content: center;
+                    align-items: center;
+                    color: #fff;
+                    margin-right: 0.6rem;
+                }
+            }
+        }
+
+        .autocomplete-result-list {
+            padding-bottom: 0;
+        }
+
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity 200ms;
+        }
+
+        .fade-enter, .fade-leave-to {
+            opacity: 0;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupJoins.vue b/resources/assets/components/GroupJoins.vue
new file mode 100644
index 000000000..81295f56d
--- /dev/null
+++ b/resources/assets/components/GroupJoins.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="group-joins-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-0 mx-0">
+                <loader v-if="!loaded" :loaded="loaded" />
+
+                <template v-else>
+                    <div class="px-5 pt-4 pb-2">
+                        <h2 class="fw-bold">My Groups</h2>
+                        <self-groups :profile="profile" />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import LoaderComponent from '@/groups/sections/Loader.vue';
+    import SelfGroups from '@/groups/partials/SelfGroups.vue';
+
+    export default {
+        components: {
+            "sidebar": SidebarComponent,
+            "loader": LoaderComponent,
+            "self-groups": SelfGroups
+        },
+
+        data() {
+            return {
+                loaded: false,
+                loadTimeout: undefined,
+                config: {},
+                groups: [],
+                profile: {},
+            }
+        },
+
+        methods: {
+            init() {
+                document.querySelectorAll("footer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer-spacer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer").forEach(e => e.parentNode.removeChild(e));
+                this.loaded = true;
+            },
+
+            fetchConfig() {
+                axios.get('/api/v0/groups/config')
+                .then(res => {
+                    this.config = res.data;
+                    this.fetchProfile();
+                });
+            },
+
+            fetchProfile() {
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.init();
+                    window._sharedData.curUser = res.data;
+                    window.App.util.navatar();
+                })
+            },
+        },
+
+        created() {
+            this.fetchConfig();
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group-joins-component {
+        font-family: var(--font-family-sans-serif);
+    }
+</style>
diff --git a/resources/assets/components/GroupNotifications.vue b/resources/assets/components/GroupNotifications.vue
new file mode 100644
index 000000000..69b33f355
--- /dev/null
+++ b/resources/assets/components/GroupNotifications.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="group-notifications-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-0 mx-0">
+                <loader v-if="!loaded" :loaded="loaded" />
+
+                <template v-else>
+                    <div class="px-5 pt-4 pb-2">
+                        <h2 class="fw-bold">Group Notifications</h2>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import LoaderComponent from '@/groups/sections/Loader.vue';
+
+    export default {
+        components: {
+            "sidebar": SidebarComponent,
+            "loader": LoaderComponent
+        },
+
+        data() {
+            return {
+                loaded: false,
+                loadTimeout: undefined,
+            }
+        },
+
+        created() {
+            this.loadTimeout = setTimeout(() => {
+                this.loaded = true;
+            }, 1000);
+        },
+
+        beforeUnmount() {
+            clearTimeout(this.loadTimeout);
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group-notifications-component {
+        font-family: var(--font-family-sans-serif);
+
+        .jumbotron {
+            background-color: #fff;
+            border-radius: 0px;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupPage.vue b/resources/assets/components/GroupPage.vue
new file mode 100644
index 000000000..ea9edfdc8
--- /dev/null
+++ b/resources/assets/components/GroupPage.vue
@@ -0,0 +1,1190 @@
+<template>
+    <div class="group-feed-component">
+        <div v-if="!initalLoad">
+            <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+        </div>
+
+        <template v-else>
+            <div class="row border-bottom m-0 p-0">
+                <sidebar />
+
+                <div class="col-12 col-md-9 px-md-0">
+                    <div class="bg-white mb-3 border-bottom">
+                        <div class="">
+                            <group-banner :group="group" />
+
+                            <div class="col-12 group-feed-component-header px-3 px-md-5">
+                                <div class="media align-items-end">
+                                    <img
+                                        v-if="group.metadata && group.metadata.hasOwnProperty('avatar')"
+                                        :src="group.metadata.avatar.url"
+                                        width="169"
+                                        height="169"
+                                        class="bg-white mx-4 rounded-circle border shadow p-1"
+                                        style="object-fit: cover;"
+                                        :style="{ 'margin-top': group.metadata && group.metadata.hasOwnProperty('header') && group.metadata.header.url ? '-100px' : '0' }">
+
+                                    <div class="media-body">
+                                        <h3 class="d-flex align-items-start">
+                                            <span>{{ group.name.slice(0,118) }}</span>
+                                            <sup v-if="group.verified" class="fa-stack ml-n2" title="Verified Group" data-toggle="tooltip">
+                                                <i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+                                                <i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+                                            </sup>
+                                        </h3>
+                                        <p class="text-muted mb-0" style="font-weight: 300;">
+                                            <span>
+                                                <i class="fas fa-globe mr-1"></i>
+                                                {{ group.membership == 'all' ? 'Public Group' : 'Private Group'}}
+                                            </span>
+                                            <span class="mx-2">
+                                                ·
+                                            </span>
+                                            <span>{{ group.member_count == 1 ? group.member_count + ' Member' : group.member_count + ' Members' }}</span>
+                                            <span class="mx-2">
+                                                ·
+                                            </span>
+                                            <span v-if="group.local" class="rounded member-label">Local</span>
+                                            <span v-else class="rounded remote-label">Remote</span>
+                                            <span v-if="group.self && group.self.hasOwnProperty('role') && group.self.role">
+                                                <span class="mx-2">
+                                                    ·
+                                                </span>
+                                                <span class="rounded member-label">{{ group.self.role }}</span>
+                                            </span>
+                                        </p>
+                                    </div>
+                                </div>
+                                <div>
+                                    <button v-if="!isMember && !group.self.is_requested" class="btn btn-primary cta-btn font-weight-bold" @click="joinGroup" :disabled="requestingMembership">
+                                        <span v-if="!requestingMembership">
+                                            {{ group.membership == 'all' ? 'Join' : 'Request Membership' }}
+                                        </span>
+                                        <div
+                                            v-else
+                                            class="spinner-border spinner-border-sm"
+                                            role="status">
+                                            <span class="sr-only">Loading...</span>
+                                        </div>
+                                    </button>
+
+                                    <button
+                                        v-else-if="!isMember && group.self.is_requested"
+                                        class="btn btn-light border cta-btn font-weight-bold"
+                                        @click.prevent="cancelJoinRequest">
+                                        <i class="fas fa-user-clock mr-1"></i> Requested to Join
+                                    </button>
+
+                                    <button
+                                        v-else-if="!isAdmin && isMember && !group.self.is_requested"
+                                        type="button"
+                                        class="btn btn-light border cta-btn font-weight-bold"
+                                        @click.prevent="leaveGroup">
+                                        <i class="fas sign-out-alt mr-1"></i> Leave Group
+                                    </button>
+
+                                    <!-- <div v-if="isAdmin">
+                                        <a
+                                            class="btn btn-light border cta-btn font-weight-bold"
+                                            :href="group.url + '/settings'">
+                                            Settings
+                                        </a>
+                                    </div> -->
+                                </div>
+                            </div>
+                            <div class="col-12 border-top group-feed-component-menu px-5">
+                                <ul class="nav font-weight-bold group-feed-component-menu-nav">
+                                    <li class="nav-item">
+                                        <a :class="{active: tab == 'about'}" class="nav-link" href="#" @click.prevent="switchTab('about')">About</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a :class="{active: tab == 'feed'}" class="nav-link" href="#" @click.prevent="switchTab('feed')">Feed</a>
+                                    </li>
+                                    <li v-if="group.self.is_member" class="nav-item">
+                                        <a :class="{active: tab == 'topics'}" class="nav-link" href="#" @click.prevent="switchTab('topics')">Topics</a>
+                                    </li>
+                                    <li v-if="group.self.is_member" class="nav-item">
+                                        <a :class="{active: tab == 'members'}" class="nav-link" href="#" @click.prevent="switchTab('members')">
+                                            Members
+                                            <span v-if="group.self.is_member && isAdmin && atabs.request_count" class="badge badge-danger rounded-pill ml-2" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.request_count}}</span>
+                                        </a>
+                                    </li>
+                                    <!-- <li v-if="group.self.is_member" class="nav-item">
+                                        <a :class="{active: tab == 'events'}" class="nav-link" href="#" @click.prevent="switchTab('events')">Events</a>
+                                    </li> -->
+                                    <li v-if="group.self.is_member" class="nav-item">
+                                        <a :class="{active: tab == 'media'}" class="nav-link" href="#" @click.prevent="switchTab('media')">Media</a>
+                                    </li>
+                                    <!-- <li v-if="group.self.is_member" class="nav-item">
+                                        <a class="nav-link" href="#">Popular</a>
+                                    </li> -->
+                                    <!-- <li v-if="group.self.is_member" class="nav-item">
+                                        <a :class="{active: tab == 'polls'}" class="nav-link" href="#" @click.prevent="switchTab('polls')">Polls</a>
+                                    </li> -->
+
+                                    <!-- <li v-if="group.self.is_member && isAdmin" class="nav-item">
+                                        <a class="nav-link" href="#">Messages</a>
+                                    </li> -->
+
+                                    <!-- <li v-if="group.self.is_member && isAdmin" class="nav-item">
+                                        <a :class="{active: tab == 'insights'}" class="nav-link" href="#" @click.prevent="switchTab('insights')">Insights</a>
+                                    </li> -->
+                                    <!-- <li v-if="group.self.is_member && isAdmin && group.membership != 'all'" class="nav-item">
+                                        <a :class="{active: tab == 'requests'}" class="nav-link" href="#" @click.prevent="switchTab('requests')">
+                                            <span class="mr-2">
+                                                <i class="far fa-user-plus mr-1"></i>
+                                                Requests
+                                            </span>
+                                            <span v-if="atabs.request_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.request_count}}</span>
+                                            <span v-if="atabs.request_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">99+</span>
+                                        </a>
+                                    </li> -->
+                                    <li v-if="group.self.is_member && isAdmin" class="nav-item">
+                                        <a :class="{active: tab == 'moderation'}" class="nav-link d-flex align-items-top" href="#" @click.prevent="switchTab('moderation')">
+                                            <span class="mr-2">Moderation</span>
+                                            <span v-if="atabs.moderation_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.moderation_count}}</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div>
+                                    <button
+                                        v-if="group.self.is_member"
+                                        class="btn btn-light btn-sm border px-3 rounded-pill mr-2"
+                                        @click="showSearchModal">
+                                        <i class="far fa-search"></i>
+                                    </button>
+                                    <div class="dropdown d-inline">
+                                        <button class="btn btn-light btn-sm border px-3 rounded-pill dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                            <i class="far fa-cog"></i>
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-right">
+                                            <a class="dropdown-item" href="#" @click.prevent="copyLink">
+                                                Copy Group Link
+                                            </a>
+
+                                            <a class="dropdown-item" href="#" @click.prevent="showInviteModal">
+                                                Invite friends
+                                            </a>
+
+                                            <a v-if="!isAdmin" class="dropdown-item" href="#" @click.prevent="reportGroup">
+                                                Report Group
+                                            </a>
+
+                                            <a v-if="isAdmin" class="dropdown-item" :href="group.url + '/settings'">
+                                                Settings
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="container-xl group-feed-component-body">
+                        <keep-alive>
+                            <div v-if="tab == 'feed'" class="row mb-5">
+
+                                <div v-if="!permalinkMode" class="col-12 col-md-7 mt-3">
+                                    <div v-if="group.self.is_member">
+                                        <!-- <div class="card card-body border my-3 shadow-sm rounded-lg">
+                                            <div class="media align-items-center">
+                                                <img :src="profile.avatar" class="rounded-circle border mr-3" width="42px" height="42px">
+                                                <div class="media-body">
+                                                    <div class="reply-form form-group mb-0">
+                                                        <input class="form-control form-control-lg rounded-pill bg-light border-0" placeholder="Write something..." v-model="composeText">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <p v-if="composeText && composeText.length > 1" class="mb-0">
+                                                <button class="btn btn-primary font-weight-bold float-right mt-3" @click="newPost()">Post</button>
+                                            </p>
+                                        </div> -->
+
+                                        <group-compose
+                                            v-if="initalLoad"
+                                            :profile="profile"
+                                            :group-id="groupId"
+                                            v-on:new-status="pushNewStatus" />
+
+                                        <div v-if="feed.length == 0" class="mt-3">
+                                            <div class="card card-body shadow-none border d-flex align-items-center justify-content-center" style="height: 200px;">
+                                                <p class="font-weight-bold mb-0">No posts yet!</p>
+                                            </div>
+                                        </div>
+
+                                        <div v-else class="group-timeline">
+                                            <p class="font-weight-bold mb-1">Recent Posts</p>
+
+
+                                            <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+                                                <div class="card shadow-none border rounded-0">
+                                                    <div class="card-body pb-0">
+                                                        <div class="media">
+                                                            <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+                                                            <div class="media-body">
+                                                                <div class="pl-2 d-flex align-items-top">
+                                                                    <div>
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+                                                                                dansup
+                                                                            </a>
+                                                                        </p>
+
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+                                                                            <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+                                                                            <span class="text-muted small">
+                                                                                <i class="fas fa-globe"></i>
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+
+                                                                    <span class="text-right" style="flex-grow: 1;">
+                                                                        <button type="button" class="btn btn-link text-dark py-0">
+                                                                            <span class="fas fa-ellipsis-h text-lighter"></span>
+
+                                                                            <span class="sr-only">Post Menu</span>
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div>
+                                                            <div>
+                                                                <div class="">
+                                                                    <p class="pt-2 text-break" style="font-size: 15px;">
+                                                                        Made some improvements!
+                                                                    </p>
+
+                                                                    <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none">
+                                                                            <img src="https://opengraph.githubassets.com/f66d0f7bf17df4a45382b83c1ffde2f25e3d700f9d87ab8c9ec2029c3a1e16b6/pixelfed/pixelfed/pull/2865" class="img-fluid">
+                                                                        <div class="bg-light px-3 pt-2 pb-3">
+                                                                            <p class="text-muted mb-0 small">GITHUB.COM</p>
+                                                                            <p class="mb-0" style="font-size: 16px;font-weight:500;">Update LikeController, add UndoLikePipeline and federate Undo Like ac… by dansup · Pull Request #2865 · pixelfed/pixelfed</p>
+                                                                            <p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">…tivities</p>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div class="border-top my-0">
+                                                                        <div class="d-flex justify-content-between py-2 px-4">
+                                                                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+                                                                                <i class="far fa-heart mr-1"></i>
+                                                                                Like
+                                                                            </button>
+
+                                                                            <div>
+                                                                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+                                                                                Comment
+                                                                            </div>
+
+                                                                            <div>
+                                                                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+                                                                                Share
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div> -->
+
+                                            <!-- OGP -->
+                                            <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+                                                <div class="card shadow-none border rounded-0">
+                                                    <div class="card-body pb-0">
+                                                        <div class="media">
+                                                            <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+                                                            <div class="media-body">
+                                                                <div class="pl-2 d-flex align-items-top">
+                                                                    <div>
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+                                                                                dansup
+                                                                            </a>
+                                                                        </p>
+
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+                                                                            <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+                                                                            <span class="text-muted small">
+                                                                                <i class="fas fa-globe"></i>
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+
+                                                                    <span class="text-right" style="flex-grow: 1;">
+                                                                        <button type="button" class="btn btn-link text-dark py-0">
+                                                                            <span class="fas fa-ellipsis-h text-lighter"></span>
+
+                                                                            <span class="sr-only">Post Menu</span>
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div>
+                                                            <div>
+                                                                <div class="">
+                                                                    <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none">
+                                                                            <img src="https://www.ctvnews.ca/polopoly_fs/1.5533318.1628281952!/httpImage/image.jpg_gen/derivatives/landscape_620/image.jpg" class="img-fluid">
+                                                                        <div class="bg-light px-3 pt-2 pb-3">
+                                                                            <p class="text-muted mb-0 small">CTVNEWS.CA</p>
+                                                                            <p class="mb-0" style="font-size: 16px;font-weight:500;">No charges against Alberta man who fatally shot home intruder: RCMP</p>
+                                                                            <p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">No charges will be laid against an Alberta man who shot and killed an intruder after being beaten with a baseball bat, RCMP announced Friday.</p>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div class="border-top my-0">
+                                                                        <div class="d-flex justify-content-between py-2 px-4">
+                                                                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+                                                                                <i class="far fa-heart mr-1"></i>
+                                                                                Like
+                                                                            </button>
+
+                                                                            <div>
+                                                                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+                                                                                Comment
+                                                                            </div>
+
+                                                                            <div>
+                                                                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+                                                                                Share
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div> -->
+
+                                            <!-- SOUNDCLOUD -->
+                                            <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+                                                <div class="card shadow-none border rounded-0">
+                                                    <div class="card-body pb-0">
+                                                        <div class="media">
+                                                            <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+                                                            <div class="media-body">
+                                                                <div class="pl-2 d-flex align-items-top">
+                                                                    <div>
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+                                                                                dansup
+                                                                            </a>
+                                                                        </p>
+
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+                                                                            <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+                                                                            <span class="text-muted small">
+                                                                                <i class="fas fa-globe"></i>
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+
+                                                                    <span class="text-right" style="flex-grow: 1;">
+                                                                        <button type="button" class="btn btn-link text-dark py-0">
+                                                                            <span class="fas fa-ellipsis-h text-lighter"></span>
+
+                                                                            <span class="sr-only">Post Menu</span>
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div>
+                                                            <div>
+                                                                <div class="">
+                                                                    <p class="pt-2 text-break" style="font-size: 15px;">
+                                                                        What does everyone think??
+                                                                    </p>
+
+                                                                    <div class="my-3 row p-0 m-0">
+                                                                        <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/the-bugle" title="The Bugle" target="_blank" style="color: #cccccc; text-decoration: none;">The Bugle</a> · <a href="https://soundcloud.com/the-bugle/bugle-179-playas-gon-play" title="Bugle 179 - Playas gon play" target="_blank" style="color: #cccccc; text-decoration: none;">Bugle 179 - Playas gon play</a></div>
+                                                                    </div>
+
+                                                                    <div class="border-top my-0">
+                                                                        <div class="d-flex justify-content-between py-2 px-4">
+                                                                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+                                                                                <i class="far fa-heart mr-1"></i>
+                                                                                Like
+                                                                            </button>
+
+                                                                            <div>
+                                                                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+                                                                                Comment
+                                                                            </div>
+
+                                                                            <div>
+                                                                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+                                                                                Share
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div> -->
+
+                                            <!-- YOUTUBE -->
+                                            <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+                                                <div class="card shadow-none border rounded-0">
+                                                    <div class="card-body pb-0">
+                                                        <div class="media">
+                                                            <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+                                                            <div class="media-body">
+                                                                <div class="pl-2 d-flex align-items-top">
+                                                                    <div>
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+                                                                                dansup
+                                                                            </a>
+                                                                        </p>
+
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+                                                                            <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+                                                                            <span class="text-muted small">
+                                                                                <i class="fas fa-globe"></i>
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+
+                                                                    <span class="text-right" style="flex-grow: 1;">
+                                                                        <button type="button" class="btn btn-link text-dark py-0">
+                                                                            <span class="fas fa-ellipsis-h text-lighter"></span>
+
+                                                                            <span class="sr-only">Post Menu</span>
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div>
+                                                            <div>
+                                                                <div class="">
+                                                                    <p class="pt-2 text-break" style="font-size: 15px;">
+                                                                        What does everyone think??
+                                                                    </p>
+
+                                                                    <div class="my-3 row p-0 m-0">
+                                                                        <iframe width="100%" height="315" src="https://www.youtube.com/embed/lH78Tb0r_f8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                                                                    </div>
+
+                                                                    <div class="border-top my-0">
+                                                                        <div class="d-flex justify-content-between py-2 px-4">
+                                                                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+                                                                                <i class="far fa-heart mr-1"></i>
+                                                                                Like
+                                                                            </button>
+
+                                                                            <div>
+                                                                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+                                                                                Comment
+                                                                            </div>
+
+                                                                            <div>
+                                                                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+                                                                                Share
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div> -->
+
+                                            <!-- PHOTOS -->
+                                            <!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+                                                <div class="card shadow-none border rounded-0">
+                                                    <div class="card-body pb-0">
+                                                        <div class="media">
+                                                            <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+                                                            <div class="media-body">
+                                                                <div class="pl-2 d-flex align-items-top">
+                                                                    <div>
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+                                                                                dansup
+                                                                            </a>
+                                                                        </p>
+
+                                                                        <p class="mb-0">
+                                                                            <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+                                                                            <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+                                                                            <span class="text-muted small">
+                                                                                <i class="fas fa-globe"></i>
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+
+                                                                    <span class="text-right" style="flex-grow: 1;">
+                                                                        <button type="button" class="btn btn-link text-dark py-0">
+                                                                            <span class="fas fa-ellipsis-h text-lighter"></span>
+
+                                                                            <span class="sr-only">Post Menu</span>
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div>
+                                                            <div>
+                                                                <div class="">
+                                                                    <p class="pt-2 text-break" style="font-size: 15px;">
+                                                                        What does everyone think??
+                                                                    </p>
+
+                                                                    <div class="mb-1 row px-3">
+                                                                        <div class="col px-0">
+                                                                            <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+                                                                        </div>
+                                                                        <div class="col px-0">
+                                                                            <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div class="mb-3 row px-3">
+                                                                        <div class="col px-0">
+                                                                            <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+                                                                        </div>
+                                                                        <div class="col px-0">
+                                                                            <img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div class="border-top my-0">
+                                                                        <div class="d-flex justify-content-between py-2 px-4">
+                                                                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+                                                                                <i class="far fa-heart mr-1"></i>
+                                                                                Like
+                                                                            </button>
+
+                                                                            <div>
+                                                                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+                                                                                Comment
+                                                                            </div>
+
+                                                                            <div>
+                                                                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+                                                                                Share
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div> -->
+
+                                            <group-status
+                                                v-for="(status, index) in feed"
+                                                :key="'gs:' + status.id + index"
+                                                :prestatus="status"
+                                                :profile="profile"
+                                                :group-id="groupId"
+                                                v-on:comment-focus="commentFocus(index)"
+                                                v-on:status-delete="statusDelete(index)"
+                                                v-on:likes-modal="showLikesModal(index)" />
+
+                                            <b-modal
+                                                ref="likeBox"
+                                                size="sm"
+                                                centered
+                                                hide-footer
+                                                title="Likes"
+                                                body-class="list-group-flush p-0">
+                                                <div class="list-group py-1" style="max-height:300px;overflow-y:auto;">
+                                                    <div
+                                                        class="list-group-item border-top-0 border-left-0 border-right-0 py-2"
+                                                        :class="{ 'border-bottom-0': index + 1 == likes.length }"
+                                                        v-for="(user, index) in likes" :key="'modal_likes_'+index">
+                                                        <div class="media align-items-center">
+                                                            <a :href="user.url">
+                                                                <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
+                                                            </a>
+                                                            <div class="media-body">
+                                                                <p class="mb-0" style="font-size: 14px">
+                                                                    <a :href="user.url" class="font-weight-bold text-dark">
+                                                                        {{user.username}}
+                                                                    </a>
+                                                                </p>
+                                                                <p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
+                                                                    <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
+                                                                </p>
+                                                                <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
+                                                                    {{user.display_name}}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <infinite-loading @infinite="infiniteLikesHandler" :distance="800" spinner="spiral">
+                                                        <div slot="no-more"></div>
+                                                        <div slot="no-results"></div>
+                                                    </infinite-loading>
+                                                </div>
+                                            </b-modal>
+
+                                            <div v-if="feed.length > 2" :distance="800">
+                                                <infinite-loading @infinite="infiniteFeed">
+                                                    <div slot="no-more"></div>
+                                                    <div slot="no-results"></div>
+                                                </infinite-loading>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div v-else>
+                                        <div class="card card-body mt-3 shadow-none border d-flex align-items-center justify-content-center" style="height: 100px;">
+                                            <p class="lead mb-0">Join to participate in this group.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div v-else class="col-12 col-md-7 mt-3">
+                                    <group-status
+                                        :prestatus="status"
+                                        :profile="profile"
+                                        :group-id="groupId"
+                                        :permalink-mode="true" />
+                                </div>
+
+                                <div class="col-12 col-md-5">
+                                    <group-info-card :group="group" />
+                                </div>
+                            </div>
+
+                            <group-about v-else-if="tab == 'about'" :group="group" />
+
+                            <group-media v-else-if="tab == 'media'" :group="group" />
+
+                            <group-members
+                                v-else-if="tab == 'members'"
+                                :group="group"
+                                :request-count="atabs.request_count"
+                                :is-admin="isAdmin"
+                                :profile="profile"
+                                v-on:decrementrc="decrementJoinRequestCount"
+                                v-on:incrementMemberCount="incrementMemberCount"/>
+
+                            <group-topics v-else-if="tab == 'topics'" :group="group" />
+
+                            <group-insights v-else-if="tab == 'insights'" :group="group" />
+
+                            <group-moderation
+                                v-else-if="tab == 'moderation'"
+                                :group="group"
+                                v-on:decrement="decrementModCounter" />
+
+                            <div v-else>
+                                <p class="lead text-center font-weight-bold mt-5 text-muted">No content found</p>
+                            </div>
+
+                        </keep-alive>
+                        <search-modal ref="searchModal" :group="group" :profile="profile" />
+                        <invite-modal ref="inviteModal" :group="group" :profile="profile" />
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import StatusCard from '~/partials/StatusCard.vue';
+    import GroupMembers from '@/groups/partials/GroupMembers.vue';
+    import GroupCompose from '@/groups/partials/GroupCompose.vue';
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import GroupAbout from '@/groups/partials/GroupAbout.vue';
+    import GroupMedia from '@/groups/partials/GroupMedia.vue';
+    import GroupModeration from '@/groups/partials/GroupModeration.vue';
+    import GroupTopics from '@/groups/partials/GroupTopics.vue';
+    import GroupInfoCard from '@/groups/partials/GroupInfoCard.vue';
+    import LeaveGroup from '@/groups/partials/LeaveGroup.vue';
+    import GroupInsights from '@/groups/partials/GroupInsights.vue';
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    import InviteModal from '@/groups/partials/GroupInviteModal.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            },
+
+            permalinkMode: {
+                type: Boolean,
+                default: false
+            },
+
+            permalinkId: {
+                type: String,
+            }
+        },
+
+        components: {
+            'status-card': StatusCard,
+            'group-about': GroupAbout,
+            'group-status': GroupStatus,
+            'group-members': GroupMembers,
+            'group-compose': GroupCompose,
+            'group-topics': GroupTopics,
+            'group-info-card': GroupInfoCard,
+            'group-media': GroupMedia,
+            'group-moderation': GroupModeration,
+            'leave-group': LeaveGroup,
+            'group-insights': GroupInsights,
+            'search-modal': SearchModal,
+            'invite-modal': InviteModal,
+            'sidebar': SidebarComponent,
+            'group-banner': GroupBanner
+        },
+
+        data() {
+            return {
+                initalLoad: false,
+                profile: undefined,
+                group: {},
+                isMember: false,
+                isAdmin: false,
+                tab: 'feed',
+                requestingMembership: false,
+                composeText: null,
+                feed: [],
+                ids: [],
+                maxId: null,
+                status: undefined,
+                likes: [],
+                likesPage: 1,
+                likesId: undefined,
+                atabs: {
+                    moderation_count: 0,
+                    request_count: 0
+                }
+            };
+        },
+
+        mounted() {
+            axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+            .then(res => {
+                this.profile = res.data;
+                this.fetchGroup();
+            })
+            .catch(err => {
+                window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+            });
+
+            if(this.permalinkMode) {
+                this.fetchPermalink();
+            } else {
+                this.fetchFeed();
+            }
+        },
+
+        methods: {
+            initObservers() {
+                // let video = document.querySelectorAll('video');
+                // let isPaused = false;
+                // let observer = new IntersectionObserver((entries, observer) => {
+                //  entries.forEach(entry => {
+                //      if (entry.intersectionRatio !=1  && !video.paused){
+                //          video.pause();
+                //          isPaused = true;
+                //      }
+                //      else if (isPaused) {
+                //          video.play();
+                //          isPaused = false
+                //      }
+                //  });
+                // }, {threshold: 1});
+                // observer.observe(video);
+            },
+
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.groupId)
+                .then(res => {
+                    this.group = res.data;
+                    this.isMember = res.data.self.is_member;
+                    this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+                    if(this.isAdmin) {
+                        this.fetchAdminTabs();
+                    }
+
+                    if(this.path) {
+                        if(this.isMember && ['about', 'topics', 'members', 'events', 'media', 'polls'].includes(this.path)) {
+                            setTimeout(() => {
+                                this.tab = this.path;
+                                this.initalLoad = true;
+                            }, 500);
+                        } else if (this.isAdmin && ['insights', 'moderation'].includes(this.path)) {
+                            setTimeout(() => {
+                                this.tab = this.path;
+                                this.initalLoad = true;
+                            }, 500);
+                        } else {
+                            history.pushState(null, null, this.group.url);
+                            this.initalLoad = true;
+                        }
+                    } else {
+                        this.initalLoad = true;
+                    }
+                })
+                .catch(err => {
+                    // window.location.href = '/groups/unavailable';
+                });
+            },
+
+            fetchAdminTabs() {
+                axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+                .then(res => {
+                    this.atabs = res.data;
+                })
+            },
+
+            fetchFeed() {
+                axios.get('/api/v0/groups/' + this.groupId + '/feed')
+                .then(res => {
+                    let self = this;
+                    if(res.data && res.data.length) {
+                        this.feed = res.data;
+                        this.maxId = this.feed[this.feed.length - 1].id;
+                        res.data.forEach(d => {
+                            if(self.ids.indexOf(d.id) == -1) {
+                                self.ids.push(d.id);
+                            }
+                        });
+                    }
+                    this.initObservers();
+                })
+            },
+
+            fetchPermalink() {
+                axios.get('/api/v0/groups/status', {
+                    params: {
+                        gid: this.groupId,
+                        sid: this.permalinkId
+                    }
+                }).then(res => {
+                    this.status = res.data;
+                    if(this.status.in_reply_to_id) {
+                        this.status.showCommentDrawer = true;
+                    }
+                }).catch(err => {
+                    this.permalinkMode = false;
+                    this.fetchFeed();
+                });
+            },
+
+            timestampFormat(date, showTime = false) {
+                let ts = new Date(date);
+                return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
+            },
+
+            switchTab(tab) {
+                window.scrollTo(0,0);
+                if(tab == 'feed' && this.permalinkMode) {
+                    this.permalinkMode = false;
+                    this.fetchFeed();
+                }
+                let url = tab == 'feed' ? this.group.url : this.group.url + '/' + tab;
+                history.pushState(tab, null, url);
+                this.tab = tab;
+            },
+
+            joinGroup() {
+                this.requestingMembership = true;
+
+                axios.post('/api/v0/groups/'+this.groupId+'/join')
+                .then(res => {
+                    this.requestingMembership = false;
+                    this.group = res.data;
+                    this.fetchGroup();
+                    this.fetchFeed();
+                }).catch(err => {
+                    let body = err.response;
+
+                    if(body.status == 422) {
+                        this.tab = 'feed';
+                        history.pushState('', null, this.group.url);
+                        this.requestingMembership = false;
+                        swal('Oops!', body.data.error, 'error');
+                    }
+                });
+            },
+
+            cancelJoinRequest() {
+                if(!window.confirm('Are you sure you want to cancel your request to join this group?')) {
+                    return;
+                }
+
+                axios.post('/api/v0/groups/'+this.groupId+'/cjr')
+                .then(res => {
+                    this.requestingMembership = false;
+                }).catch(err => {
+                    let body = err.response;
+
+                    if(body.status == 422) {
+                        swal('Oops!', body.data.error, 'error');
+                    }
+                });
+            },
+
+            leaveGroup() {
+                if(!window.confirm('Are you sure you want to leave this group? Any content you shared will remain accessible. You won\'t be able to rejoin for 24 hours.')) {
+                    return;
+                }
+
+                axios.post('/api/v0/groups/'+this.groupId+'/leave')
+                .then(res => {
+                    this.tab = 'feed';
+                    history.pushState('', null, this.group.url);
+                    this.feed = [];
+                    this.isMember = false;
+                    this.isAdmin = false;
+                    this.group.self.role = null;
+                    this.group.self.is_member = false;
+                });
+            },
+
+            pushNewStatus(status) {
+                this.feed.unshift(status);
+            },
+
+            commentFocus(index) {
+                let status = this.feed[index];
+                status.showCommentDrawer = true;
+            },
+
+            statusDelete(index) {
+                this.feed.splice(index, 1);
+            },
+
+            infiniteFeed($state) {
+                if(this.feed.length < 3) {
+                    $state.complete();
+                    return;
+                }
+                let apiUrl = '/api/v0/groups/' + this.groupId + '/feed';
+                axios.get(apiUrl, {
+                    params: {
+                        limit: 6,
+                        max_id: this.maxId
+                    },
+                }).then(res => {
+                    if (res.data.length) {
+                        // let self = this;
+                        // data.forEach(d => {
+                        //  if(self.ids.indexOf(d.id) == -1) {
+                        //      if(self.maxId >= d.id) {
+                        //          self.maxId = d.id;
+                        //      }
+                        //      self.ids.push(d.id);
+                        //      self.feed.push(d);
+                        //  }
+                        // });
+                        let posts = res.data.filter(p => this.ids.indexOf(p.id) == -1);
+                        this.maxId = posts[posts.length - 1].id;
+                        this.feed.push(...posts);
+                        this.ids.push(...posts.map(p => p.id));
+                        setTimeout(() => {
+                            this.initObservers();
+                        }, 1000);
+                        $state.loaded();
+                    } else {
+                        $state.complete();
+                    }
+                });
+            },
+
+            decrementModCounter(amount) {
+                let count = this.atabs.moderation_count;
+                if(count == 0) {
+                    return;
+                }
+                this.atabs.moderation_count = (count - amount);
+            },
+
+            setModCounter(amount) {
+                this.atabs.moderation_count = amount;
+            },
+
+            decrementJoinRequestCount(amount = 1) {
+                let count = this.atabs.request_count;
+                this.atabs.request_count = (count - amount)
+            },
+
+            incrementMemberCount() {
+                let count = this.group.member_count;
+                this.group.member_count = (count + 1);
+            },
+
+            copyLink() {
+                window.App.util.clipboard(this.group.url);
+                this.$bvToast.toast(`Succesfully copied group url to clipboard`, {
+                    title: 'Success',
+                    variant: 'success',
+                    autoHideDelay: 5000
+                });
+            },
+
+            reportGroup() {
+                swal('Report Group', 'Are you sure you want to report this group?')
+                .then(res => {
+                    if(res) {
+                        location.href = `/i/report?id=${this.group.id}&type=group`;
+                    }
+                });
+            },
+
+            showSearchModal() {
+                event.currentTarget.blur();
+                this.$refs.searchModal.open();
+            },
+
+            showInviteModal() {
+                event.currentTarget.blur();
+                this.$refs.inviteModal.open();
+            },
+
+            showLikesModal(index) {
+                this.likesId = this.feed[index].id;
+                axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId)
+                .then(res => {
+                    this.likes = res.data;
+                    this.likesPage++;
+                    this.$refs.likeBox.show();
+                });
+            },
+
+            infiniteLikesHandler($state) {
+                if(this.likes.length < 3) {
+                    $state.complete();
+                    return;
+                }
+                axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId, {
+                    params: {
+                        page: this.likesPage,
+                    },
+                }).then(res => {
+                    if (res.data.length > 0) {
+                        this.likes.push(...res.data);
+                        this.likesPage++;
+                        if(res.data.length != 10) {
+                            $state.complete();
+                        } else {
+                            $state.loaded();
+                        }
+                    } else {
+                        $state.complete();
+                    }
+                });
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            padding: 1rem 0;
+            background-color: #fff;
+
+            .cta-btn {
+                width: 190px;
+            }
+        }
+
+        &-menu {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0;
+
+            &-nav {
+                .nav-item {
+                    .nav-link {
+                        padding-top: 1rem;
+                        padding-bottom: 1rem;
+                        color: #6c757d;
+
+                        &.active {
+                            color: #2c78bf;
+                            border-bottom: 2px solid #2c78bf;
+                        }
+                    }
+                }
+
+                &:not(last-child) {
+                    .nav-item {
+                        margin-right: 14px;
+                    }
+                }
+            }
+        }
+
+        &-body {
+            min-height: 40vh;
+        }
+
+        .member-label {
+            padding: 2px 5px;
+            font-size: 12px;
+            color: rgba(75, 119, 190, 1);
+            background:rgba(137, 196, 244, 0.2);
+            border:1px solid rgba(137, 196, 244, 0.3);
+            font-weight:400;
+            text-transform: capitalize;
+        }
+
+        .dropdown-item {
+            font-weight: 600;
+        }
+
+        .remote-label {
+            padding: 2px 5px;
+            font-size: 12px;
+            color: #B45309;
+            background: #FEF3C7;
+            border: 1px solid #FCD34D;
+            font-weight: 400;
+            text-transform: capitalize;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupPost.vue b/resources/assets/components/GroupPost.vue
new file mode 100644
index 000000000..8eb5dc9d4
--- /dev/null
+++ b/resources/assets/components/GroupPost.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="group-status-permalink-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <group-feed :group-id="gid" :permalinkMode="true" :permalinkId="sid" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import GroupFeed from '@/groups/GroupFeed.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+
+    export default {
+        props: {
+            gid: {
+                type: String
+            },
+
+            sid: {
+                type: String
+            }
+        },
+
+        components: {
+            "group-feed": GroupFeed,
+            "sidebar": SidebarComponent
+        }
+    }
+</script>
diff --git a/resources/assets/components/GroupProfile.vue b/resources/assets/components/GroupProfile.vue
new file mode 100644
index 000000000..8affdee26
--- /dev/null
+++ b/resources/assets/components/GroupProfile.vue
@@ -0,0 +1,443 @@
+<template>
+    <div class="group-profile-component w-100 h-100">
+        <div v-if="!loaded" class="w-100 h-100">
+            <div class="d-flex justify-content-center align-items-center mt-5">
+                <div class="spinner-border" role="status">
+                  <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <template v-else>
+            <div class="bg-white mb-3 border-bottom">
+                <div class="container-xl header">
+                    <div class="header-jumbotron"></div>
+
+                    <div class="header-profile-card">
+                        <img :src="profile.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+                        <p class="name">
+                            {{ profile.display_name }}
+                        </p>
+                        <p class="username text-muted">
+                            <span v-if="profile.local">&commat;{{ profile.username }}</span>
+                            <span v-else>{{ profile.acct }}</span>
+
+                            <span v-if="profile.is_admin" class="text-danger ml-1" title="Site administrator" data-toggle="tooltip" data-placement="bottom"><i class="far fa-users-crown"></i></span>
+                        </p>
+                    </div>
+                    <!-- <hr> -->
+                    <div class="header-navbar">
+                        <div></div>
+
+                        <div>
+                            <a
+                                v-if="currentProfile.id === profile.id"
+                                class="btn btn-light font-weight-bold mr-2"
+                                href="/settings/home">
+                                <i class="fas fa-edit mr-1"></i> Edit Profile
+                            </a>
+
+                            <a
+                                v-if="relationship.following"
+                                class="btn btn-primary font-weight-bold mr-2"
+                                :href="profile.url">
+                                <i class="far fa-comment-alt-dots mr-1"></i> Message
+                            </a>
+
+                            <a
+                                v-if="relationship.following"
+                                class="btn btn-light font-weight-bold mr-2"
+                                :href="profile.url">
+                                <i class="fas fa-user-check mr-1"></i> {{ relationship.followed_by ? 'Friends' : 'Following' }}
+                            </a>
+
+                            <a
+                                v-if="!relationship.following"
+                                class="btn btn-light font-weight-bold mr-2"
+                                :href="profile.url">
+                                <i class="fas fa-user mr-1"></i> View Main Profile
+                            </a>
+
+                            <div class="dropdown">
+                                <button class="btn btn-light font-weight-bold dropdown-toggle" type="button" id="amenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <i class="fas fa-ellipsis-h"></i>
+                                </button>
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="amenu">
+                                    <a v-if="currentProfile.id != profile.id" class="dropdown-item font-weight-bold" :href="`/i/report?type=user&id=${profile.id}`">Report</a>
+                                    <a v-if="currentProfile.id == profile.id" class="dropdown-item font-weight-bold" href="#">Leave Group</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="w-100 h-100 group-profile-feed">
+                <div class="container-xl">
+                    <div class="row">
+                        <div class="col-12 col-md-5">
+                            <div class="card card-body shadow-sm infolet">
+                                <h5 class="font-weight-bold mb-3">Intro</h5>
+                                <div v-if="!profile.local" class="media mb-3 align-items-center">
+                                    <div class="media-icon">
+                                        <i class="far fa-globe" title="User is from a remote server" data-toggle="tooltip" data-placement="bottom"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        Remote member from <strong>{{ profile.acct.split('@')[1] }}</strong>
+                                    </div>
+                                </div>
+                                <!-- <div v-if="profile.note.length" class="media mb-3 align-items-center">
+                                    <i class="far fa-book-user fa-lg text-lighter mr-3" title="User bio" data-toggle="tooltip" data-placement="bottom"></i>
+                                    <div class="media-body">
+                                        <span v-html="profile.note"></span>
+                                    </div>
+                                </div> -->
+                                <div class="media align-items-center">
+                                    <div class="media-icon">
+                                        <i class="fas fa-users" title="User joined group on this date" data-toggle="tooltip" data-placement="bottom"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        {{ roleTitle }} of <strong>{{ group.name }}</strong> since {{ formatJoinedDate(profile.group?.joined) }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div v-if="canIntersect" class="card card-body shadow-sm infolet">
+                                <h5 class="font-weight-bold mb-3">Things in Common</h5>
+
+                                <div v-if="commonIntersects.friends.length" class="media mb-3 align-items-center" v-once>
+                                    <div class="media-icon">
+                                        <i class="far fa-user-friends"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        {{ commonIntersects.friends_count }} mutual friend<span v-if="commonIntersects.friends.length > 1">s</span> including
+                                        <span v-for="(friend, index) in commonIntersects.friends"><a :href="friend.url" class="text-dark font-weight-bold">{{ friend.acct }}</a><span v-if="commonIntersects.friends.length > index + 1">, </span><span v-else> </span></span>
+                                        <!-- <a href="#" class="text-dark font-weight-bold">dansup</a>, <a href="#" class="text-dark font-weight-bold">admin</a> and 1 other -->
+                                    </div>
+                                </div>
+
+                                <!-- <div class="media mb-3 align-items-center">
+                                    <div class="media-icon">
+                                        <i class="fas fa-home"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        Lives in <strong>Canada</strong>
+                                    </div>
+                                </div> -->
+
+                                <div v-if="commonIntersects.groups.length" class="media mb-3 align-items-center">
+                                    <div class="media-icon">
+                                        <i class="fas fa-users"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        Also member of <a :href="commonIntersects.groups[0].url" class="text-dark font-weight-bold">{{ commonIntersects.groups[0].name }}</a> and {{ commonIntersects.groups_count }} other groups
+                                    </div>
+                                </div>
+
+                                <div v-if="commonIntersects.topics.length" class="media mb-0 align-items-center">
+                                    <div class="media-icon">
+                                        <i class="far fa-thumbs-up fa-lg text-lighter"></i>
+                                    </div>
+                                    <div class="media-body">
+                                        Also interested in topics containing
+                                        <span v-for="(topic, index) in commonIntersects.topics">
+                                            <span v-if="commonIntersects.topics.length - 1 == index"> and </span><a :href="topic.url" class="font-weight-bold text-dark">#{{ topic.name }}</a><span v-if="commonIntersects.topics.length > index + 2">, </span>
+                                        </span> hashtags
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-7">
+                            <div class="card card-body shadow-sm">
+                                <h5 class="font-weight-bold mb-0">Group Posts</h5>
+                            </div>
+
+                            <div v-if="feedEmpty" class="pt-5 text-center">
+                                <h5>No New Posts</h5>
+                                <p>{{ profile.username }} hasn't posted anything yet in <strong>{{ group.name }}</strong>.</p>
+
+                                <a :href="group.url" class="font-weight-bold">Go Back</a>
+                            </div>
+
+                            <div v-if="feedLoaded" class="mt-2">
+                                <group-status
+                                    v-for="(status, index) in feed"
+                                    :key="'gps:' + status.id"
+                                    :permalinkMode="true"
+                                    :showGroupChevron="true"
+                                    :group="group"
+                                    :prestatus="status"
+                                    :profile="profile"
+                                    :group-id="group.id" />
+
+                                <div v-if="feed.length >= 1" :distance="800">
+                                    <infinite-loading @infinite="infiniteFeed">
+                                        <div slot="no-more"></div>
+                                        <div slot="no-results"></div>
+                                    </infinite-loading>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+
+    export default {
+        props: {
+            gid: {
+                type: String
+            },
+
+            pid: {
+                type: String
+            }
+        },
+
+        components: {
+            'group-status': GroupStatus
+        },
+
+        data() {
+            return {
+                loaded: false,
+                currentProfile: {},
+                roleTitle: 'Member',
+                group: {},
+                profile: {},
+                relationship: {
+                    following: false,
+                },
+                feed: [],
+                ids: [],
+                feedLoaded: false,
+                feedEmpty: false,
+                page: 1,
+                canIntersect: false,
+                commonIntersects: []
+            }
+        },
+
+        beforeMount() {
+            $('body').css('background-color', '#f0f2f5');
+        },
+
+        mounted() {
+            this.fetchGroup();
+            this.$nextTick(() => {
+                $('[data-toggle="tooltip"]').tooltip();
+            });
+        },
+
+        methods: {
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.gid)
+                .then(res => {
+                    this.group = res.data;
+                })
+                .finally(() => {
+                    this.fetchSelfProfile();
+                })
+            },
+
+            fetchSelfProfile() {
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.currentProfile = res.data;
+                })
+                .catch(err => {
+                    this.$router.push('/groups/' + this.gid)
+                })
+                .finally(() => {
+                    this.fetchProfile();
+                })
+
+                this.$nextTick(() => {
+                    $('[data-toggle="tooltip"]').tooltip();
+                });
+            },
+
+            fetchProfile() {
+                axios.get('/api/v0/groups/accounts/' + this.gid + '/' + this.pid)
+                .then(res => {
+                    this.profile = res.data;
+                    if(res.data.group.role == 'founder') {
+                        this.roleTitle = 'Admin';
+                    }
+                })
+
+                if(window._sharedData.user.id == this.pid) {
+                    this.fetchInitialFeed();
+                    return;
+                }
+
+                axios.get('/api/v1/accounts/relationships?id[]=' + this.pid)
+                .then(res => {
+                    this.relationship = res.data[0];
+                })
+                .finally(() => {
+                    this.fetchInitialFeed();
+                })
+            },
+            fetchInitialFeed() {
+                if(window._sharedData.user && window._sharedData.user.id != this.pid) {
+                    this.fetchCommonIntersections();
+                }
+                axios.get(`/api/v0/groups/${this.gid}/user/${this.pid}/feed`)
+                .then(res => {
+                    this.feed = res.data.filter(s => {
+                        return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
+                    });
+                    this.feedLoaded = true;
+                    this.feedEmpty = this.feed.length == 0;
+                    this.page++;
+                    this.loaded = true;
+                })
+                .catch(err => {
+                    this.$router.push('/groups/' + this.gid);
+                    console.log(err)
+                });
+            },
+
+            infiniteFeed($state) {
+                if(this.feed.length == 0) {
+                    $state.complete();
+                    return;
+                }
+
+                axios.get(`/api/v0/groups/${this.group.id}/user/${this.profile.id}/feed`, {
+                    params: {
+                        page: this.page
+                    },
+                }).then(res => {
+                    if (res.data.length) {
+                        let data = res.data.filter(s => {
+                            return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
+                        });
+                        let self = this;
+                        data.forEach(d => {
+                            if(self.ids.indexOf(d.id) == -1) {
+                                self.ids.push(d.id);
+                                self.feed.push(d);
+                            }
+                        });
+                        $state.loaded();
+                        this.page++;
+                    } else {
+                        $state.complete();
+                    }
+                });
+            },
+
+            fetchCommonIntersections() {
+                axios.get('/api/v0/groups/member/intersect/common', {
+                    params: {
+                        gid: this.gid,
+                        pid: this.pid
+                    }
+                }).then(res => {
+                    this.commonIntersects = res.data;
+                    this.canIntersect = res.data.groups.length || res.data.topics.length;
+                });
+
+            },
+
+            formatJoinedDate(ts) {
+                let date = new Date(ts);
+                let options = { year: 'numeric', month: 'long' };
+                let formatter = new Intl.DateTimeFormat('en-US', options);
+                return formatter.format(date);
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-profile-component {
+        background-color: #f0f2f5;
+
+        .header {
+            &-jumbotron {
+                background-color: #F3F4F6;
+                height: 320px;
+                border-bottom-left-radius: 20px;
+                border-bottom-right-radius: 20px;
+            }
+
+            &-profile-card {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                .avatar {
+                    width: 170px;
+                    height: 170px;
+                    border-radius: 50%;
+                    margin-top: -150px;
+                    margin-bottom: 20px;
+                }
+
+                .name {
+                    font-size: 30px;
+                    line-height: 30px;
+                    font-weight: 700;
+                    text-align: center;
+                    margin-bottom: 6px;
+                }
+
+                .username {
+                    font-size: 16px;
+                    font-weight: 500;
+                    text-align: center;
+                }
+            }
+
+            &-navbar {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 60px;
+                border-top: 1px solid #F3F4F6;
+
+                .dropdown {
+                    display: inline-block;
+
+                    &-toggle:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .group-profile-feed {
+            min-height: 500px;
+        }
+
+        .infolet {
+            margin-bottom: 1rem;
+
+            .media {
+                &-icon {
+                    display: flex;
+                    justify-content: center;
+                    width: 30px;
+                    margin-right: 10px;
+
+                    i {
+                        font-size: 1.1rem;
+                        color: #D1D5DB !important;
+                    }
+                }
+            }
+        }
+
+        .btn-light {
+            border-color: #F3F4F6;
+        }
+    }
+</style>
diff --git a/resources/assets/components/GroupSearch.vue b/resources/assets/components/GroupSearch.vue
new file mode 100644
index 000000000..e23a75112
--- /dev/null
+++ b/resources/assets/components/GroupSearch.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="groups-home-component w-100 h-100">
+        <div v-if="initialLoad" class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-10">
+                <self-notifications :profile="profile" />
+            </div>
+        </div>
+        <div v-else class="row justify-content-center mt-5">
+            <b-spinner />
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import SelfFeed from '@/groups/partials/SelfFeed.vue';
+    import SelfDiscover from '@/groups/partials/SelfDiscover.vue';
+    import SelfGroups from '@/groups/partials/SelfGroups.vue';
+    import SelfNotifications from '@/groups/partials/SelfNotifications.vue';
+    import SelfInvitations from '@/groups/partials/SelfInvitations.vue';
+    import SelfRemoteSearch from '@/groups/partials/SelfRemoteSearch.vue';
+    import CreateGroup from '@/groups/CreateGroup.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+    import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+    export default {
+        data() {
+            return {
+                initialLoad: false,
+                config: {},
+                groups: [],
+                profile: {},
+                tab: null,
+                searchQuery: undefined,
+            };
+        },
+
+        components: {
+            'autocomplete-input': Autocomplete,
+            'group-status': GroupStatus,
+            'self-discover': SelfDiscover,
+            'self-groups': SelfGroups,
+            'self-feed': SelfFeed,
+            'self-notifications': SelfNotifications,
+            'self-invitations': SelfInvitations,
+            'self-remote-search': SelfRemoteSearch,
+            "create-group": CreateGroup,
+            "sidebar": SidebarComponent
+        },
+
+        mounted() {
+            this.fetchConfig();
+        },
+
+        methods: {
+            init() {
+                document.querySelectorAll("footer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer-spacer").forEach(e => e.parentNode.removeChild(e));
+                document.querySelectorAll(".mobile-footer").forEach(e => e.parentNode.removeChild(e));
+                this.initialLoad = true;
+            },
+
+            fetchConfig() {
+                axios.get('/api/v0/groups/config')
+                .then(res => {
+                    this.config = res.data;
+                    this.fetchProfile();
+                });
+            },
+
+            fetchProfile() {
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.init();
+                    window._sharedData.curUser = res.data;
+                    window.App.util.navatar();
+                })
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+    .groups-home-component {
+        font-family: var(--font-family-sans-serif);
+    }
+</style>
diff --git a/resources/assets/components/Groups.vue b/resources/assets/components/Groups.vue
new file mode 100644
index 000000000..af0dc2e61
--- /dev/null
+++ b/resources/assets/components/Groups.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="group-component">
+        <div v-if="tab === 'home'">
+            <groups-home />
+        </div>
+
+        <div v-if="tab === 'createGroup'">
+            <!-- <div class="col-12 group-component-hero">
+                <h3 class="font-weight-bold">Create Group</h3>
+                <button class="btn btn-outline-primary px-3 rounded-pill font-weight-bold" @click="switchTab('home')">Back to Groups</button>
+            </div> -->
+
+            <create-group />
+        </div>
+
+        <div v-if="tab === 'show'">
+            <group-feed :group-id="groupId" :path="path" />
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import GroupsHome from '@/groups/GroupsHome.vue';
+    import GroupFeed from '@/groups/GroupFeed.vue';
+    import CreateGroup from '@/groups/CreateGroup.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            }
+        },
+
+        data() {
+            return {
+                tab: 'home'
+            }
+        },
+
+        components: {
+            "groups-home": GroupsHome,
+            "create-group": CreateGroup,
+            "group-feed": GroupFeed,
+        },
+
+        mounted() {
+            if(this.groupId) {
+                this.tab = 'show';
+            }
+        },
+
+        methods: {
+            switchTab(newTab) {
+                this.tab = newTab;
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-component {
+        &-hero {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            border: 1px solid #dee2e6;
+            border-top: 0;
+            background-color: #fff;
+
+            h3 {
+                margin-bottom: 0;
+            }
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/CreateGroup.vue b/resources/assets/components/groups/CreateGroup.vue
new file mode 100644
index 000000000..7459275f4
--- /dev/null
+++ b/resources/assets/components/groups/CreateGroup.vue
@@ -0,0 +1,359 @@
+<template>
+	<div class="create-group-component col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
+        <div v-if="!hide" class="row h-100 bg-lighter">
+			<div class="col-12 col-md-8 border-left">
+
+                <div class="bg-dark p-5 mx-n3">
+                    <p class="h1 font-weight-bold text-light mb-2">Create Group</p>
+                    <p class="text-lighter mb-0">Create a new federated Group that is compatible with other Pixelfed and Lemmy servers</p>
+                </div>
+				<div class="px-2 mb-5">
+					<div class="mt-4">
+                        <text-input
+                            label="Group Name"
+                            :value="name"
+                            :hasLimit="true"
+                            :maxLimit="limit.name.max"
+                            placeholder="Add your group name"
+                            helpText="Alphanumeric characters only, you can change this later."
+                            :largeInput="true"
+                            @update="handleUpdate('name', $event)"
+                        />
+
+                        <hr>
+
+                        <select-input
+                            label="Group Type"
+                            :value="membership"
+                            :categories="membershipCategories"
+                            placeholder="Select a type"
+                            helpText="Select the membership type, you can change this later."
+                            @update="handleUpdate('membership', $event)"
+                        />
+
+                        <hr>
+
+                        <select-input
+                            label="Group Category"
+                            :value="category"
+                            :categories="categories"
+                            placeholder="Select a category"
+                            helpText="Choose the most relevant category to improve discovery and visibility"
+                            @update="handleUpdate('category', $event)"
+                        />
+
+						<hr>
+
+                        <text-area-input
+                            label="Group Description"
+                            :value="description"
+                            :hasLimit="true"
+                            :maxLimit="limit.description.max"
+                            placeholder="Describe your groups purpose in a few words"
+                            helpText="Describe your groups purpose in a few words, you can change this later."
+                            @update="handleUpdate('description', $event)"
+                        />
+
+                        <hr>
+
+                        <checkbox-input
+                            label="Adult Content"
+                            inputText="Allow Adult Content"
+                            :value="configuration.adult"
+                            helpText="Groups that allow adult content should enable this or risk suspension or deletion by instance admins. Illegal content is prohibited. You can change this later."
+                        />
+
+                        <hr>
+
+                        <checkbox-input
+                            label=""
+                            inputText="I agree to the the Community Guidelines and Terms of Use and will administrate this group according to the rules set by this server. I understand that failure to abide by these terms may lead to the suspension of this group, and my account."
+                            :value="hasConfirmed"
+                            :strongText="false"
+                            @update="handleUpdate('hasConfirmed', $event)"
+                        />
+
+						<!-- <div class="form-group row">
+							<div class="col-sm-10 offset-sm-2">
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" id="gridCheck1" v-model="hasConfirmed">
+									<label class="form-check-label" for="gridCheck1">
+										I agree to the <a href="#">Community Guidelines</a> and <a href="#">Terms of Use</a>
+									</label>
+								</div>
+							</div>
+						</div> -->
+
+                        <button
+                            class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
+                            @click="createGroup"
+                            :disabled="!hasConfirmed">
+                            Create Group
+                        </button>
+					</div>
+				</div>
+			</div>
+			<div class="col-12 col-md-4 bg-white">
+				<!-- <div>
+					<button
+						v-if="page <= 4"
+						class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
+						@click="nextPage"
+						:disabled="!membership">
+						Next
+					</button>
+
+					<button
+						v-if="page == 5"
+						class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
+						@click="createGroup"
+						:disabled="!hasConfirmed">
+						Create Group
+					</button>
+
+					<button
+						v-if="page >= 2"
+						class="btn btn-light btn-block font-weight-bold rounded-pill border mt-4"
+						@click="prevPage">
+						Back
+					</button>
+
+					<div v-if="maxPage > 2" class="mt-4">
+						<p v-if="name && name.length">
+							<span class="text-lighter">Name:</span>
+							<span class="font-weight-bold">{{ name }}</span>
+						</p>
+
+						<p v-if="description && description.length">
+							<span class="text-lighter">Description:</span>
+							<span>{{ description }}</span>
+						</p>
+
+						<p v-if="membership && membership.length">
+							<span class="text-lighter">Membership:</span>
+							<span class="text-capitalize">{{ membership }}</span>
+						</p>
+
+						<p v-if="category && category.length">
+							<span class="text-lighter">Category:</span>
+							<span class="text-capitalize">{{ category }}</span>
+						</p>
+					</div>
+				</div> -->
+			</div>
+		</div>
+     </div>
+</template>
+
+<script type="text/javascript">
+    import TextInput from '@/groups/partials/CreateForm/TextInput.vue';
+    import SelectInput from '@/groups/partials/CreateForm/SelectInput.vue';
+    import TextAreaInput from '@/groups/partials/CreateForm/TextAreaInput.vue';
+    import CheckboxInput from '@/groups/partials/CreateForm/CheckboxInput.vue';
+
+	export default {
+        components: {
+            "text-input": TextInput,
+            "select-input": SelectInput,
+            "text-area-input": TextAreaInput,
+            "checkbox-input": CheckboxInput,
+        },
+
+		data() {
+			return {
+				hide: true,
+				name: null,
+				page: 1,
+				maxPage: 1,
+				description: null,
+				membership: "placeholder",
+				submitting: false,
+				categories: [],
+				category: "",
+				limit: {
+					name: {
+						max: 60
+					},
+					description: {
+						max: 500
+					}
+				},
+				configuration: {
+					types: {
+						text: true,
+						photos: true,
+						videos: true,
+						// events: false,
+						polls: true
+					},
+					federation: true,
+					adult: false,
+					discoverable: false,
+					autospam: false,
+					dms: false,
+					slowjoin: {
+						enabled: false,
+						age: 90,
+						limit: {
+							post: 1,
+							comment: 20,
+							threads: 2,
+							likes: 5,
+							hashtags: 5,
+							mentions: 1,
+							autolinks: 1
+						}
+					}
+				},
+				hasConfirmed: false,
+				permissionChecked: false,
+                membershipCategories: [
+                    { key: 'Public', value: 'public' },
+                    { key: 'Private', value: 'private' },
+                    { key: 'Local', value: 'local' },
+                ],
+			}
+		},
+
+		mounted() {
+			this.permissionCheck();
+			this.fetchCategories();
+		},
+
+		methods: {
+			permissionCheck() {
+				axios.post('/api/v0/groups/permission/create')
+				.then(res => {
+					if(res.data.permission == false) {
+						swal('Limit reached', 'You cannot create any more groups', 'error');
+						this.hide = true;
+					} else {
+						this.hide = false;
+					}
+					this.permissionChecked = true;
+				});
+			},
+
+			submit($event) {
+				$event.preventDefault();
+				this.submitting = true;
+
+				axios.post('/api/v0/groups/create', {
+					name: this.name,
+					description: this.description,
+					membership: this.membership
+				}).then(res => {
+					console.log(res.data);
+					window.location.href = res.data.url;
+				}).catch(err => {
+					console.log(err.response);
+
+				})
+			},
+
+			fetchCategories() {
+				axios.get('/api/v0/groups/categories/list')
+				.then(res => {
+					this.categories = res.data.map(c => {
+                        return {
+                            key: c,
+                            value: c
+                        }
+                    });
+				})
+			},
+
+			createGroup() {
+				axios.post('/api/v0/groups/create', {
+					name: this.name,
+					description: this.description,
+					membership: this.membership,
+					configuration: this.configuration
+				})
+				.then(res => {
+					console.log(res.data);
+					location.href = res.data.url;
+				})
+			},
+
+            handleUpdate(key, val) {
+                this[key] = val;
+            }
+		}
+	}
+</script>
+
+<style lang="scss">
+	.create-group-component {
+		.submit-button {
+			width: 130px;
+		}
+
+		.multistep {
+			margin-top: 30px;
+			margin-bottom: 30px;
+			overflow: hidden;
+			counter-reset: step;
+			text-align: center;
+			padding-left: 0;
+		}
+
+		.multistep li {
+			list-style-type: none;
+			text-transform: uppercase;
+			font-size: 9px;
+			font-weight: 700;
+			width: 20%;
+			float: left;
+			position: relative;
+			color: #B8C2CC;
+		}
+
+		.multistep li.active {
+			color: #000;
+		}
+
+		.multistep li:before {
+			content: counter(step);
+			counter-increment: step;
+			width: 24px;
+			height: 24px;
+			line-height: 26px;
+			display: block;
+			font-size: 12px;
+			color: #B8C2CC;
+			background: #F3F4F6;
+			border-radius: 25px;
+			margin: 0 auto 10px auto;
+			transition: background 400ms;
+		}
+
+		.multistep li:after {
+			content: '';
+			width: 100%;
+			height: 2px;
+			background: #dee2e6;
+			position: absolute;
+			left: -50%;
+			top: 11px;
+			z-index: -1;
+			transition: background 400ms;
+		}
+
+		.multistep li:first-child:after {
+			content: none;
+		}
+
+		.multistep li.active:before,
+		.multistep li.active:after {
+			background: #2c78bf;
+			color: white;
+			transition: background 400ms;
+		}
+
+		.col-form-label {
+			font-weight: 600;
+			text-align: right;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/GroupFeed.vue b/resources/assets/components/groups/GroupFeed.vue
new file mode 100644
index 000000000..9a357d4ee
--- /dev/null
+++ b/resources/assets/components/groups/GroupFeed.vue
@@ -0,0 +1,989 @@
+<template>
+	<div class="group-feed-component">
+		<div v-if="!initalLoad">
+			<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+		</div>
+
+		<div v-else>
+			<div class="mb-3 border-bottom">
+				<div class="container-xl">
+                    <group-banner
+                        :group="group"
+                    />
+                    <group-header-details
+                        :group="group"
+                        :isAdmin="isAdmin"
+                        :isMember="isMember"
+                        @refresh="handleRefresh"
+                    />
+                    <group-nav-tabs
+                        :group="group"
+                        :isAdmin="isAdmin"
+                        :isMember="isMember"
+                        :atabs="atabs"
+                    />
+				</div>
+			</div>
+
+			<div class="container-xl group-feed-component-body">
+				<div class="row mb-5">
+					<div class="col-12 col-md-7 mt-3">
+						<div v-if="group.self.is_member">
+							<group-compose
+								v-if="initalLoad"
+								:profile="profile"
+								:group-id="groupId"
+								v-on:new-status="pushNewStatus" />
+
+							<div v-if="feed.length == 0" class="mt-3">
+								<div class="card card-body shadow-none border d-flex align-items-center justify-content-center" style="height: 200px;">
+									<p class="font-weight-bold mb-0">No posts yet!</p>
+								</div>
+							</div>
+
+							<div v-else class="group-timeline">
+								<p class="font-weight-bold mb-1">Recent Posts</p>
+
+
+								<!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+								    <div class="card shadow-none border rounded-0">
+								        <div class="card-body pb-0">
+								            <div class="media">
+								                <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+								                <div class="media-body">
+								                    <div class="pl-2 d-flex align-items-top">
+								                        <div>
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+								                                    dansup
+								                                </a>
+								                            </p>
+
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+								                                <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+								                                <span class="text-muted small">
+								                                    <i class="fas fa-globe"></i>
+								                                </span>
+								                            </p>
+								                        </div>
+
+								                        <span class="text-right" style="flex-grow: 1;">
+								                            <button type="button" class="btn btn-link text-dark py-0">
+								                                <span class="fas fa-ellipsis-h text-lighter"></span>
+
+								                                <span class="sr-only">Post Menu</span>
+								                            </button>
+								                        </span>
+								                    </div>
+								                </div>
+								            </div>
+
+								            <div>
+								                <div>
+								                    <div class="">
+								                    	<p class="pt-2 text-break" style="font-size: 15px;">
+								                            Made some improvements!
+								                        </p>
+
+								                        <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none">
+								                        		<img src="https://opengraph.githubassets.com/f66d0f7bf17df4a45382b83c1ffde2f25e3d700f9d87ab8c9ec2029c3a1e16b6/pixelfed/pixelfed/pull/2865" class="img-fluid">
+								                        	<div class="bg-light px-3 pt-2 pb-3">
+								                        		<p class="text-muted mb-0 small">GITHUB.COM</p>
+								                        		<p class="mb-0" style="font-size: 16px;font-weight:500;">Update LikeController, add UndoLikePipeline and federate Undo Like ac… by dansup · Pull Request #2865 · pixelfed/pixelfed</p>
+								                        		<p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">…tivities</p>
+								                        	</div>
+								                        </div>
+
+									                    <div class="border-top my-0">
+									                        <div class="d-flex justify-content-between py-2 px-4">
+									                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+									                                <i class="far fa-heart mr-1"></i>
+									                                Like
+									                            </button>
+
+									                            <div>
+									                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+									                                Comment
+									                            </div>
+
+									                            <div>
+									                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+									                                Share
+									                            </div>
+									                        </div>
+									                    </div>
+									                </div>
+									            </div>
+								        	</div>
+									    </div>
+									</div>
+								</div> -->
+
+								<!-- OGP -->
+								<!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+								    <div class="card shadow-none border rounded-0">
+								        <div class="card-body pb-0">
+								            <div class="media">
+								                <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+								                <div class="media-body">
+								                    <div class="pl-2 d-flex align-items-top">
+								                        <div>
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+								                                    dansup
+								                                </a>
+								                            </p>
+
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+								                                <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+								                                <span class="text-muted small">
+								                                    <i class="fas fa-globe"></i>
+								                                </span>
+								                            </p>
+								                        </div>
+
+								                        <span class="text-right" style="flex-grow: 1;">
+								                            <button type="button" class="btn btn-link text-dark py-0">
+								                                <span class="fas fa-ellipsis-h text-lighter"></span>
+
+								                                <span class="sr-only">Post Menu</span>
+								                            </button>
+								                        </span>
+								                    </div>
+								                </div>
+								            </div>
+
+								            <div>
+								                <div>
+								                    <div class="">
+								                        <div class="my-3 row px-0 mx-0 card card-body my-0 py-0 border shadow-none">
+								                        		<img src="https://www.ctvnews.ca/polopoly_fs/1.5533318.1628281952!/httpImage/image.jpg_gen/derivatives/landscape_620/image.jpg" class="img-fluid">
+								                        	<div class="bg-light px-3 pt-2 pb-3">
+								                        		<p class="text-muted mb-0 small">CTVNEWS.CA</p>
+								                        		<p class="mb-0" style="font-size: 16px;font-weight:500;">No charges against Alberta man who fatally shot home intruder: RCMP</p>
+								                        		<p class="mb-0 text-muted" style="font-size:14px;line-height:15px;">No charges will be laid against an Alberta man who shot and killed an intruder after being beaten with a baseball bat, RCMP announced Friday.</p>
+								                        	</div>
+								                        </div>
+
+									                    <div class="border-top my-0">
+									                        <div class="d-flex justify-content-between py-2 px-4">
+									                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+									                                <i class="far fa-heart mr-1"></i>
+									                                Like
+									                            </button>
+
+									                            <div>
+									                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+									                                Comment
+									                            </div>
+
+									                            <div>
+									                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+									                                Share
+									                            </div>
+									                        </div>
+									                    </div>
+									                </div>
+									            </div>
+								        	</div>
+									    </div>
+									</div>
+								</div> -->
+
+								<!-- SOUNDCLOUD -->
+								<!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+								    <div class="card shadow-none border rounded-0">
+								        <div class="card-body pb-0">
+								            <div class="media">
+								                <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+								                <div class="media-body">
+								                    <div class="pl-2 d-flex align-items-top">
+								                        <div>
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+								                                    dansup
+								                                </a>
+								                            </p>
+
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+								                                <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+								                                <span class="text-muted small">
+								                                    <i class="fas fa-globe"></i>
+								                                </span>
+								                            </p>
+								                        </div>
+
+								                        <span class="text-right" style="flex-grow: 1;">
+								                            <button type="button" class="btn btn-link text-dark py-0">
+								                                <span class="fas fa-ellipsis-h text-lighter"></span>
+
+								                                <span class="sr-only">Post Menu</span>
+								                            </button>
+								                        </span>
+								                    </div>
+								                </div>
+								            </div>
+
+								            <div>
+								                <div>
+								                    <div class="">
+								                        <p class="pt-2 text-break" style="font-size: 15px;">
+								                            What does everyone think??
+								                        </p>
+
+								                        <div class="my-3 row p-0 m-0">
+								                        	<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/the-bugle" title="The Bugle" target="_blank" style="color: #cccccc; text-decoration: none;">The Bugle</a> · <a href="https://soundcloud.com/the-bugle/bugle-179-playas-gon-play" title="Bugle 179 - Playas gon play" target="_blank" style="color: #cccccc; text-decoration: none;">Bugle 179 - Playas gon play</a></div>
+								                        </div>
+
+									                    <div class="border-top my-0">
+									                        <div class="d-flex justify-content-between py-2 px-4">
+									                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+									                                <i class="far fa-heart mr-1"></i>
+									                                Like
+									                            </button>
+
+									                            <div>
+									                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+									                                Comment
+									                            </div>
+
+									                            <div>
+									                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+									                                Share
+									                            </div>
+									                        </div>
+									                    </div>
+									                </div>
+									            </div>
+								        	</div>
+									    </div>
+									</div>
+								</div> -->
+
+								<!-- YOUTUBE -->
+								<!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+								    <div class="card shadow-none border rounded-0">
+								        <div class="card-body pb-0">
+								            <div class="media">
+								                <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+								                <div class="media-body">
+								                    <div class="pl-2 d-flex align-items-top">
+								                        <div>
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+								                                    dansup
+								                                </a>
+								                            </p>
+
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+								                                <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+								                                <span class="text-muted small">
+								                                    <i class="fas fa-globe"></i>
+								                                </span>
+								                            </p>
+								                        </div>
+
+								                        <span class="text-right" style="flex-grow: 1;">
+								                            <button type="button" class="btn btn-link text-dark py-0">
+								                                <span class="fas fa-ellipsis-h text-lighter"></span>
+
+								                                <span class="sr-only">Post Menu</span>
+								                            </button>
+								                        </span>
+								                    </div>
+								                </div>
+								            </div>
+
+								            <div>
+								                <div>
+								                    <div class="">
+								                        <p class="pt-2 text-break" style="font-size: 15px;">
+								                            What does everyone think??
+								                        </p>
+
+								                        <div class="my-3 row p-0 m-0">
+								                        	<iframe width="100%" height="315" src="https://www.youtube.com/embed/lH78Tb0r_f8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+								                        </div>
+
+									                    <div class="border-top my-0">
+									                        <div class="d-flex justify-content-between py-2 px-4">
+									                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+									                                <i class="far fa-heart mr-1"></i>
+									                                Like
+									                            </button>
+
+									                            <div>
+									                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+									                                Comment
+									                            </div>
+
+									                            <div>
+									                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+									                                Share
+									                            </div>
+									                        </div>
+									                    </div>
+									                </div>
+									            </div>
+								        	</div>
+									    </div>
+									</div>
+								</div> -->
+
+								<!-- PHOTOS -->
+								<!-- <div class="status-card-component shadow-sm mb-3 rounded-lg">
+								    <div class="card shadow-none border rounded-0">
+								        <div class="card-body pb-0">
+								            <div class="media">
+								                <img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar" class="rounded-circle box-shadow mr-2">
+
+								                <div class="media-body">
+								                    <div class="pl-2 d-flex align-items-top">
+								                        <div>
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/dansup" class="username font-weight-bold text-dark text-decoration-none text-break">
+								                                    dansup
+								                                </a>
+								                            </p>
+
+								                            <p class="mb-0">
+								                                <a href="https://pixelfed.test/groups/328821658771132416/329186991407239168" class="font-weight-light text-muted small">13h</a>
+
+								                                <span class="text-lighter" style="padding-left: 2px; padding-right: 2px;">·</span>
+
+								                                <span class="text-muted small">
+								                                    <i class="fas fa-globe"></i>
+								                                </span>
+								                            </p>
+								                        </div>
+
+								                        <span class="text-right" style="flex-grow: 1;">
+								                            <button type="button" class="btn btn-link text-dark py-0">
+								                                <span class="fas fa-ellipsis-h text-lighter"></span>
+
+								                                <span class="sr-only">Post Menu</span>
+								                            </button>
+								                        </span>
+								                    </div>
+								                </div>
+								            </div>
+
+								            <div>
+								                <div>
+								                    <div class="">
+								                        <p class="pt-2 text-break" style="font-size: 15px;">
+								                            What does everyone think??
+								                        </p>
+
+								                        <div class="mb-1 row px-3">
+								                        	<div class="col px-0">
+								                        		<img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+								                        	</div>
+								                        	<div class="col px-0">
+								                        		<img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+								                        	</div>
+								                        </div>
+
+								                        <div class="mb-3 row px-3">
+								                        	<div class="col px-0">
+								                        		<img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+								                        	</div>
+								                        	<div class="col px-0">
+								                        		<img src="https://pixelfed.test/img/sample-post.jpeg" class="img-fluid border rounded-lg">
+								                        	</div>
+								                        </div>
+
+									                    <div class="border-top my-0">
+									                        <div class="d-flex justify-content-between py-2 px-4">
+									                            <button class="btn btn-link py-0 text-decoration-none text-muted">
+									                                <i class="far fa-heart mr-1"></i>
+									                                Like
+									                            </button>
+
+									                            <div>
+									                                <i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+									                                Comment
+									                            </div>
+
+									                            <div>
+									                                <i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+									                                Share
+									                            </div>
+									                        </div>
+									                    </div>
+									                </div>
+									            </div>
+								        	</div>
+									    </div>
+									</div>
+								</div> -->
+
+								<group-status
+									v-for="(status, index) in feed"
+									:key="'gs:' + status.id + index"
+									:prestatus="status"
+									:profile="profile"
+									:group-id="groupId"
+									v-on:comment-focus="commentFocus(index)"
+									v-on:status-delete="statusDelete(index)"
+									v-on:likes-modal="showLikesModal(index)" />
+
+								<b-modal
+									ref="likeBox"
+									size="sm"
+									centered
+									hide-footer
+									title="Likes"
+									body-class="list-group-flush p-0">
+									<div class="list-group py-1" style="max-height:300px;overflow-y:auto;">
+										<div
+											class="list-group-item border-top-0 border-left-0 border-right-0 py-2"
+											:class="{ 'border-bottom-0': index + 1 == likes.length }"
+											v-for="(user, index) in likes" :key="'modal_likes_'+index">
+											<div class="media align-items-center">
+												<a :href="user.url">
+													<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
+												</a>
+												<div class="media-body">
+													<p class="mb-0" style="font-size: 14px">
+														<a :href="user.url" class="font-weight-bold text-dark">
+															{{user.username}}
+														</a>
+													</p>
+													<p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
+														<span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
+													</p>
+													<p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
+														{{user.display_name}}
+													</p>
+												</div>
+											</div>
+										</div>
+										<infinite-loading @infinite="infiniteLikesHandler" :distance="800" spinner="spiral">
+											<div slot="no-more"></div>
+											<div slot="no-results"></div>
+										</infinite-loading>
+									</div>
+								</b-modal>
+
+								<div v-if="feed.length > 2" :distance="800">
+									<infinite-loading @infinite="infiniteFeed">
+										<div slot="no-more"></div>
+										<div slot="no-results"></div>
+									</infinite-loading>
+								</div>
+							</div>
+						</div>
+
+						<div v-else>
+							<div class="card card-body mt-3 shadow-none border d-flex align-items-center justify-content-center" style="height: 100px;">
+								<p class="lead mb-0">Join to participate in this group.</p>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-12 col-md-5">
+						<group-info-card :group="group" />
+					</div>
+                </div>
+				<search-modal ref="searchModal" :group="group" :profile="profile" />
+				<invite-modal ref="inviteModal" :group="group" :profile="profile" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import StatusCard from '~/partials/StatusCard.vue';
+	import GroupCompose from './partials/GroupCompose.vue';
+	import GroupStatus from './partials/GroupStatus.vue';
+	import GroupInfoCard from './partials/GroupInfoCard.vue';
+	import LeaveGroup from './partials/LeaveGroup.vue';
+	import SearchModal from './partials/GroupSearchModal.vue';
+	import InviteModal from './partials/GroupInviteModal.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+    import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue';
+    import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue';
+
+	export default {
+		props: {
+			groupId: {
+				type: String
+			},
+
+			path: {
+				type: String
+			},
+
+			permalinkMode: {
+				type: Boolean,
+				default: false
+			},
+
+			permalinkId: {
+				type: String,
+			}
+		},
+
+		components: {
+			'status-card': StatusCard,
+			'group-status': GroupStatus,
+			'group-compose': GroupCompose,
+			'group-info-card': GroupInfoCard,
+			'leave-group': LeaveGroup,
+			'search-modal': SearchModal,
+			'invite-modal': InviteModal,
+            'group-banner': GroupBanner,
+            'group-header-details': GroupHeaderDetails,
+            'group-nav-tabs': GroupNavTabs,
+		},
+
+		data() {
+			return {
+				initalLoad: false,
+				profile: undefined,
+				group: {},
+				isMember: false,
+				isAdmin: false,
+				tab: 'feed',
+				requestingMembership: false,
+				composeText: null,
+				feed: [],
+				ids: [],
+				maxId: null,
+				status: undefined,
+				likes: [],
+				likesPage: 1,
+				likesId: undefined,
+                renderIdx: 1,
+				atabs: {
+					moderation_count: 0,
+					request_count: 0
+				}
+			};
+		},
+
+		created() {
+			this.fetchSelf();
+		},
+
+		methods: {
+            fetchSelf() {
+                axios.get('/api/v1/accounts/verify_credentials?_pe=1')
+                .then(res => {
+                    this.profile = res.data;
+                })
+                .catch(err => {
+                    window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+                })
+                .finally(() => {
+                    this.fetchGroup();
+                });
+            },
+
+			initObservers() {
+				// let video = document.querySelectorAll('video');
+				// let isPaused = false;
+				// let observer = new IntersectionObserver((entries, observer) => {
+				// 	entries.forEach(entry => {
+				// 		if (entry.intersectionRatio !=1  && !video.paused){
+				// 			video.pause();
+				// 			isPaused = true;
+				// 		}
+				// 		else if (isPaused) {
+				// 			video.play();
+				// 			isPaused = false
+				// 		}
+				// 	});
+				// }, {threshold: 1});
+				// observer.observe(video);
+			},
+
+			fetchGroup() {
+				axios.get('/api/v0/groups/' + this.groupId)
+				.then(res => {
+					this.group = res.data;
+					this.isMember = res.data.self.is_member;
+					this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+					if(this.isAdmin) {
+						this.fetchAdminTabs();
+					}
+
+					if(this.path) {
+						if(this.isMember && ['about', 'topics', 'members', 'events', 'media', 'polls'].includes(this.path)) {
+							setTimeout(() => {
+								this.tab = this.path;
+								this.initalLoad = true;
+							}, 500);
+						} else if (this.isAdmin && ['insights', 'moderation'].includes(this.path)) {
+							setTimeout(() => {
+								this.tab = this.path;
+								this.initalLoad = true;
+							}, 500);
+						} else {
+							history.pushState(null, null, this.group.url);
+							this.initalLoad = true;
+						}
+					} else {
+						this.initalLoad = true;
+					}
+				})
+				.catch(err => {
+					window.location.href = '/groups/unavailable';
+				})
+                .finally(() => {
+                    this.fetchFeed();
+                });
+			},
+
+			fetchAdminTabs() {
+				axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+				.then(res => {
+					this.atabs = res.data;
+				})
+			},
+
+			fetchFeed() {
+				axios.get('/api/v0/groups/' + this.groupId + '/feed')
+				.then(res => {
+					let self = this;
+                    if(res.data && res.data.length) {
+    					this.feed = res.data;
+
+    					this.maxId = this.feed[this.feed.length - 1].id;
+    					res.data.forEach(d => {
+    						if(self.ids.indexOf(d.id) == -1) {
+    							self.ids.push(d.id);
+    						}
+    					});
+                    }
+					this.initObservers();
+				})
+			},
+
+			fetchPermalink() {
+				axios.get('/api/v0/groups/status', {
+					params: {
+						gid: this.groupId,
+						sid: this.permalinkId
+					}
+				}).then(res => {
+					this.status = res.data;
+					if(this.status.in_reply_to_id) {
+						this.status.showCommentDrawer = true;
+					}
+				}).catch(err => {
+					this.permalinkMode = false;
+					this.fetchFeed();
+				});
+			},
+
+            handleRefresh() {
+                this.initialLoad = false;
+                this.init();
+                this.renderIdx++;
+            },
+
+			timestampFormat(date, showTime = false) {
+				let ts = new Date(date);
+				return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
+			},
+
+			switchTab(tab) {
+				window.scrollTo(0,0);
+				if(tab == 'feed' && this.permalinkMode) {
+					this.permalinkMode = false;
+					this.fetchFeed();
+				}
+				let url = tab == 'feed' ? this.group.url : this.group.url + '/' + tab;
+				history.pushState(tab, null, url);
+				this.tab = tab;
+			},
+
+			joinGroup() {
+				this.requestingMembership = true;
+
+				axios.post('/api/v0/groups/'+this.groupId+'/join')
+				.then(res => {
+					this.requestingMembership = false;
+					this.group = res.data;
+					this.fetchGroup();
+					this.fetchFeed();
+				}).catch(err => {
+					let body = err.response;
+
+					if(body.status == 422) {
+						this.tab = 'feed';
+						history.pushState('', null, this.group.url);
+						this.requestingMembership = false;
+						swal('Oops!', body.data.error, 'error');
+					}
+				});
+			},
+
+			cancelJoinRequest() {
+				if(!window.confirm('Are you sure you want to cancel your request to join this group?')) {
+					return;
+				}
+
+				axios.post('/api/v0/groups/'+this.groupId+'/cjr')
+				.then(res => {
+					this.requestingMembership = false;
+				}).catch(err => {
+					let body = err.response;
+
+					if(body.status == 422) {
+						swal('Oops!', body.data.error, 'error');
+					}
+				});
+			},
+
+			leaveGroup() {
+				if(!window.confirm('Are you sure you want to leave this group? Any content you shared will remain accessible. You won\'t be able to rejoin for 24 hours.')) {
+					return;
+				}
+
+				axios.post('/api/v0/groups/'+this.groupId+'/leave')
+				.then(res => {
+					this.tab = 'feed';
+					history.pushState('', null, this.group.url);
+					this.feed = [];
+					this.isMember = false;
+					this.isAdmin = false;
+					this.group.self.role = null;
+					this.group.self.is_member = false;
+				});
+			},
+
+			pushNewStatus(status) {
+				this.feed.unshift(status);
+			},
+
+			commentFocus(index) {
+				let status = this.feed[index];
+				status.showCommentDrawer = true;
+			},
+
+			statusDelete(index) {
+				this.feed.splice(index, 1);
+			},
+
+			infiniteFeed($state) {
+				if(this.feed.length < 3) {
+					$state.complete();
+					return;
+				}
+				let apiUrl = '/api/v0/groups/' + this.groupId + '/feed';
+				axios.get(apiUrl, {
+					params: {
+						limit: 6,
+						max_id: this.maxId
+					},
+				}).then(res => {
+					if (res.data.length) {
+						// let self = this;
+						// data.forEach(d => {
+						// 	if(self.ids.indexOf(d.id) == -1) {
+						// 		if(self.maxId >= d.id) {
+						// 			self.maxId = d.id;
+						// 		}
+						// 		self.ids.push(d.id);
+						// 		self.feed.push(d);
+						// 	}
+						// });
+						let posts = res.data.filter(p => this.ids.indexOf(p.id) == -1);
+						this.maxId = posts[posts.length - 1].id;
+						this.feed.push(...posts);
+						this.ids.push(...posts.map(p => p.id));
+						setTimeout(() => {
+							this.initObservers();
+						}, 1000);
+						$state.loaded();
+					} else {
+						$state.complete();
+					}
+				});
+			},
+
+			decrementModCounter(amount) {
+				let count = this.atabs.moderation_count;
+				if(count == 0) {
+					return;
+				}
+				this.atabs.moderation_count = (count - amount);
+			},
+
+			setModCounter(amount) {
+				this.atabs.moderation_count = amount;
+			},
+
+			decrementJoinRequestCount(amount = 1) {
+				let count = this.atabs.request_count;
+				this.atabs.request_count = (count - amount)
+			},
+
+			incrementMemberCount() {
+				let count = this.group.member_count;
+				this.group.member_count = (count + 1);
+			},
+
+			copyLink() {
+				window.App.util.clipboard(this.group.url);
+				this.$bvToast.toast(`Succesfully copied group url to clipboard`, {
+					title: 'Success',
+					variant: 'success',
+					autoHideDelay: 5000
+				});
+			},
+
+			reportGroup() {
+				swal('Report Group', 'Are you sure you want to report this group?')
+				.then(res => {
+					if(res) {
+						location.href = `/i/report?id=${this.group.id}&type=group`;
+					}
+				});
+			},
+
+			showSearchModal() {
+				event.currentTarget.blur();
+				this.$refs.searchModal.open();
+			},
+
+			showInviteModal() {
+				event.currentTarget.blur();
+				this.$refs.inviteModal.open();
+			},
+
+			showLikesModal(index) {
+				this.likesId = this.feed[index].id;
+				axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId)
+				.then(res => {
+					this.likes = res.data;
+					this.likesPage++;
+					this.$refs.likeBox.show();
+				});
+			},
+
+			infiniteLikesHandler($state) {
+				if(this.likes.length < 3) {
+					$state.complete();
+					return;
+				}
+				axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.likesId, {
+					params: {
+						page: this.likesPage,
+					},
+				}).then(res => {
+					if (res.data.length > 0) {
+						this.likes.push(...res.data);
+						this.likesPage++;
+						if(res.data.length != 10) {
+							$state.complete();
+						} else {
+							$state.loaded();
+						}
+					} else {
+						$state.complete();
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-feed-component {
+		&-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-end;
+			padding: 1rem 0;
+			background-color: transparent;
+
+			.cta-btn {
+				width: 190px;
+			}
+		}
+
+		.header-jumbotron {
+			background-color: #F3F4F6;
+			height: 320px;
+			border-bottom-left-radius: 20px;
+			border-bottom-right-radius: 20px;
+		}
+
+		&-menu {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0;
+
+			&-nav {
+				.nav-item {
+					.nav-link {
+						padding-top: 1rem;
+						padding-bottom: 1rem;
+						color: #6c757d;
+
+						&.active {
+							color: #2c78bf;
+							border-bottom: 2px solid #2c78bf;
+						}
+					}
+				}
+
+				&:not(last-child) {
+					.nav-item {
+						margin-right: 14px;
+					}
+				}
+			}
+		}
+
+		&-body {
+			min-height: 40vh;
+		}
+
+		.member-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: rgba(75, 119, 190, 1);
+			background:rgba(137, 196, 244, 0.2);
+			border:1px solid rgba(137, 196, 244, 0.3);
+			font-weight:400;
+			text-transform: capitalize;
+		}
+
+		.dropdown-item {
+			font-weight: 600;
+		}
+
+		.remote-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: #B45309;
+			background: #FEF3C7;
+			border: 1px solid #FCD34D;
+			font-weight: 400;
+			text-transform: capitalize;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/GroupInvite.vue b/resources/assets/components/groups/GroupInvite.vue
new file mode 100644
index 000000000..ec11185a5
--- /dev/null
+++ b/resources/assets/components/groups/GroupInvite.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="group-invite-component">
+		<div class="container">
+			<div class="row justify-content-center mt-5">
+				<div class="col-12 col-md-7">
+					<div class="card shadow-none border" style="min-height: 300px;">
+						<div class="card-body d-flex justify-content-center align-items-center">
+
+						<transition-group name="fade">
+							<div v-if="tab === 'initial'" key="initial">
+								<p class="text-center mb-1"><b-spinner variant="lighter" /></p>
+								<p class="text-center small text-muted mb-0">{{ loadingStatus }}</p>
+							</div>
+
+							<div v-else-if="tab === 'loading'" key="loading">
+								<p class="text-center mb-1"><b-spinner variant="lighter" /></p>
+							</div>
+
+							<div v-else-if="tab === 'login'" key="login">
+								<p class="text-center mb-0">Please <a href="/login">login</a> to continue</p>
+							</div>
+
+							<div v-else-if="tab === 'form'" key="form">
+								<div class="d-flex justify-content-center align-items-center flex-column">
+									<p class="text-center h4 font-weight-bold"><a href="#">@dansup</a> invited you to join</p>
+
+									<div class="card my-3 shadow-none border" style="width: 300px;">
+										<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: 100px;object-fit: cover;">
+										<div v-else class="card-img-top" style="width: 100px; height: 100px;padding: 5px;">
+											<div class="bg-primary d-flex align-items-center justify-content-center" style="width: 100%; height:100%;">
+												<i class="fal fa-users text-white fa-lg"></i>
+											</div>
+										</div>
+
+										<div class="card-body">
+											<p class="h5 font-weight-bold mb-1 text-dark">
+												{{ group.name || 'Untitled Group' }}
+											</p>
+
+											<transition name="fade">
+												<p v-if="showMore" class="text-muted small mb-1">
+													{{ group.description }}
+												</p>
+											</transition>
+
+											<p class="mb-1">
+												<span class="text-muted mr-2">
+													<i class="far fa-users fa-sm text-lighter mr-1"></i>
+													<span class="small font-weight-bold">{{ prettyCount(group.member_count) }} Members</span>
+												</span>
+
+												<span v-if="!group.local" class="remote-label ml-2">
+													<i class="fal fa-globe"></i> Remote
+												</span>
+											</p>
+
+											<transition name="fade">
+												<div v-if="showMore">
+													<p class="text-muted small mb-1">
+														<i class="far fa-tag fa-sm text-lighter mr-2"></i>
+														<span class="font-weight-bold">Category: {{ group.category.name }}</span>
+													</p>
+													<p class="text-muted small mb-1">
+														<i class="far fa-clock fa-sm text-lighter mr-2"></i>
+														<span class="font-weight-bold">Created {{ timeago(group.created_at) }} ago</span>
+													</p>
+												</div>
+											</transition>
+										</div>
+									</div>
+
+								</div>
+								<div class="d-flex justify-content-between">
+									<button class="btn btn-light border-lighter font-weight-bold btn-sm" @click="showMoreInfo">
+										{{ showMore ? 'Less' :'More' }} info
+									</button>
+									<div>
+										<button class="btn btn-light font-weight-bold btn-sm" @click="declineInvite">Decline</button>
+										<button class="btn btn-primary font-weight-bold btn-sm" @click="acceptInvite">Accept</button>
+									</div>
+								</div>
+								<!-- <p class="text-center h4 font-weight-bold">by <a href="#" class="font-weight-bold">@dansup</a></p> -->
+							</div>
+
+							<div v-else-if="tab === 'existingmember'" key="existingmember">
+								<p class="text-center mb-0">You already are a member of this group</p>
+								<p class="text-center mb-0">
+									<a :href="group.url" class="font-weight-bold">View Group</a>
+								</p>
+							</div>
+
+							<div v-else-if="tab === 'notinvited'" key="notinvited">
+								<p class="text-center mb-0">We cannot find an active invitation for your account.</p>
+							</div>
+
+							<div v-else-if="tab === 'error'" key="error">
+								<p class="text-center mb-0">An unknown error occured. Please try again later.</p>
+							</div>
+
+							<div v-else key="unknown">
+								<p class="text-center mb-0">An unknown error occured. Please try again later.</p>
+							</div>
+
+						</transition-group>
+						</div>
+					</div>
+					<!-- <h4>You've been invited to {{ group.name }}</h4> -->
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: [
+			'id'
+		],
+
+		data() {
+			return {
+				loadingStatus: 'Determining invite eligibility',
+				tab: 'initial',
+				profile: {},
+				group: {},
+				showMore: false
+			}
+		},
+
+		mounted() {
+			axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+			.then(res => {
+				this.profile = res.data;
+				this.fetchGroup();
+			}).catch(err => {
+				if(err.response.status === 403) {
+					this.tab = 'login';
+					return;
+				} else {
+					this.tab = 'error';
+					return
+				}
+			});
+		},
+
+		methods: {
+			fetchGroup() {
+				axios.get(`/api/v0/groups/${this.id}`)
+				.then(res => {
+					this.group = res.data;
+					this.loadingStatus = 'Checking group invitations';
+					this.checkForInvitation();
+				}).catch(err => {
+					this.tab = 'error';
+				});
+			},
+
+			checkForInvitation() {
+				axios.post(`/api/v0/groups/${this.group.id}/invite/check`)
+				.then(res => {
+					this.tab = res.data.can_join == true ? 'form' : 'notinvited';
+				}).catch(err => {
+					if(err.response.status === 422 && err.response.data.error === 'Already a member') {
+						this.tab = 'existingmember';
+					} else {
+						this.tab = 'error';
+					}
+				})
+			},
+
+			prettyCount(val) {
+				return App.util.format.count(val);
+			},
+
+			timeago(ts) {
+				return App.util.format.timeAgo(ts);
+			},
+
+			showMoreInfo() {
+				event.currentTarget.blur();
+				this.showMore = !this.showMore;
+			},
+
+			acceptInvite() {
+				event.currentTarget.blur();
+				this.tab = 'loading';
+				axios.post(`/api/v0/groups/${this.group.id}/invite/accept`)
+				.then(res => {
+					setTimeout(() => {
+						location.href = res.data.next_url;
+					}, 2000);
+				}).catch(err => {
+					this.tab = 'error';
+				});
+			},
+
+			declineInvite() {
+				event.currentTarget.blur();
+				this.tab = 'loading';
+				axios.post(`/api/v0/groups/${this.group.id}/invite/decline`)
+				.then(res => {
+					location.href = res.data.next_url;
+				}).catch(err => {
+					this.tab = 'error';
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-invite-component {
+		.btn-light {
+			border-color: #E5E7EB;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/GroupProfile.vue b/resources/assets/components/groups/GroupProfile.vue
new file mode 100644
index 000000000..67077b84e
--- /dev/null
+++ b/resources/assets/components/groups/GroupProfile.vue
@@ -0,0 +1,379 @@
+<template>
+	<div class="group-profile-component w-100 h-100">
+		<div class="bg-white mb-3 border-bottom">
+			<div class="container-xl header">
+				<div class="header-jumbotron"></div>
+
+				<div class="header-profile-card">
+					<img :src="profile.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+					<p class="name">
+						{{ profile.display_name }}
+					</p>
+					<p class="username text-muted">
+						<span v-if="profile.local">&commat;{{ profile.username }}</span>
+						<span v-else>{{ profile.acct }}</span>
+
+						<span v-if="profile.is_admin" class="text-danger ml-1" title="Site administrator" data-toggle="tooltip" data-placement="bottom"><i class="far fa-users-crown"></i></span>
+					</p>
+				</div>
+				<!-- <hr> -->
+				<div class="header-navbar">
+					<div></div>
+
+					<div>
+						<a
+							v-if="currentProfile.id === profile.id"
+							class="btn btn-light font-weight-bold mr-2"
+							href="/settings/home">
+							<i class="fas fa-edit mr-1"></i> Edit Profile
+						</a>
+
+						<a
+							v-if="profile.relationship.following"
+							class="btn btn-primary font-weight-bold mr-2"
+							:href="profile.url">
+							<i class="far fa-comment-alt-dots mr-1"></i> Message
+						</a>
+
+						<a
+							v-if="profile.relationship.following"
+							class="btn btn-light font-weight-bold mr-2"
+							:href="profile.url">
+							<i class="fas fa-user-check mr-1"></i> {{ profile.relationship.followed_by ? 'Friends' : 'Following' }}
+						</a>
+
+						<a
+							v-if="!profile.relationship.following"
+							class="btn btn-light font-weight-bold mr-2"
+							:href="profile.url">
+							<i class="fas fa-user mr-1"></i> View Main Profile
+						</a>
+
+						<div class="dropdown">
+							<button class="btn btn-light font-weight-bold dropdown-toggle" type="button" id="amenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								<i class="fas fa-ellipsis-h"></i>
+							</button>
+							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="amenu">
+								<a v-if="currentProfile.id != profile.id" class="dropdown-item font-weight-bold" :href="`/i/report?type=user&id=${profile.id}`">Report</a>
+								<a v-if="currentProfile.id == profile.id" class="dropdown-item font-weight-bold" href="#">Leave Group</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="w-100 h-100 group-profile-feed">
+			<div class="container-xl">
+				<div class="row">
+					<div class="col-12 col-md-5">
+						<div class="card card-body shadow-sm infolet">
+							<h5 class="font-weight-bold mb-3">Intro</h5>
+							<div v-if="!profile.local" class="media mb-3 align-items-center">
+								<div class="media-icon">
+									<i class="far fa-globe" title="User is from a remote server" data-toggle="tooltip" data-placement="bottom"></i>
+								</div>
+								<div class="media-body">
+									Remote member from <strong>{{ profile.acct.split('@')[1] }}</strong>
+								</div>
+							</div>
+							<!-- <div v-if="profile.note.length" class="media mb-3 align-items-center">
+								<i class="far fa-book-user fa-lg text-lighter mr-3" title="User bio" data-toggle="tooltip" data-placement="bottom"></i>
+								<div class="media-body">
+									<span v-html="profile.note"></span>
+								</div>
+							</div> -->
+							<div class="media align-items-center">
+								<div class="media-icon">
+									<i class="fas fa-users" title="User joined group on this date" data-toggle="tooltip" data-placement="bottom"></i>
+								</div>
+								<div class="media-body">
+									{{ roleTitle }} of <strong>{{ group.name }}</strong> since {{ profile.group.joined }}
+								</div>
+							</div>
+						</div>
+
+						<div v-if="canIntersect" class="card card-body shadow-sm infolet">
+							<h5 class="font-weight-bold mb-3">Things in Common</h5>
+
+							<div v-if="commonIntersects.friends.length" class="media mb-3 align-items-center" v-once>
+								<div class="media-icon">
+									<i class="far fa-user-friends"></i>
+								</div>
+								<div class="media-body">
+									{{ commonIntersects.friends_count }} mutual friend<span v-if="commonIntersects.friends.length > 1">s</span> including
+									<span v-for="(friend, index) in commonIntersects.friends"><a :href="friend.url" class="text-dark font-weight-bold">{{ friend.acct }}</a><span v-if="commonIntersects.friends.length > index + 1">, </span><span v-else> </span></span>
+									<!-- <a href="#" class="text-dark font-weight-bold">dansup</a>, <a href="#" class="text-dark font-weight-bold">admin</a> and 1 other -->
+								</div>
+							</div>
+
+							<div class="media mb-3 align-items-center">
+								<div class="media-icon">
+									<i class="fas fa-home"></i>
+								</div>
+								<div class="media-body">
+									Lives in <strong>Canada</strong>
+								</div>
+							</div>
+
+							<div v-if="commonIntersects.groups.length" class="media mb-3 align-items-center">
+								<div class="media-icon">
+									<i class="fas fa-users"></i>
+								</div>
+								<div class="media-body">
+									Also member of <a :href="commonIntersects.groups[0].url" class="text-dark font-weight-bold">{{ commonIntersects.groups[0].name }}</a> and {{ commonIntersects.groups_count }} other groups
+								</div>
+							</div>
+
+							<div v-if="commonIntersects.topics.length" class="media mb-0 align-items-center">
+								<div class="media-icon">
+									<i class="far fa-thumbs-up fa-lg text-lighter"></i>
+								</div>
+								<div class="media-body">
+									Also interested in topics containing
+									<span v-for="(topic, index) in commonIntersects.topics">
+										<span v-if="commonIntersects.topics.length - 1 == index"> and </span><a :href="topic.url" class="font-weight-bold text-dark">#{{ topic.name }}</a><span v-if="commonIntersects.topics.length > index + 2">, </span>
+									</span> hashtags
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-12 col-md-7">
+						<div class="card card-body shadow-sm">
+							<h5 class="font-weight-bold mb-0">Group Posts</h5>
+						</div>
+
+						<div v-if="feedEmpty" class="pt-5 text-center">
+							<h5>No New Posts</h5>
+							<p>{{ profile.username }} hasn't posted anything yet in <strong>{{ group.name }}</strong>.</p>
+
+							<a :href="group.url" class="font-weight-bold">Go Back</a>
+						</div>
+
+						<div v-if="feedLoaded" class="mt-2">
+							<group-status
+								v-for="(status, index) in feed"
+								:key="'gps:' + status.id"
+								:permalinkMode="true"
+								:showGroupChevron="true"
+								:group="group"
+								:prestatus="status"
+								:profile="profile"
+								:group-id="group.id" />
+
+							<div v-if="feed.length >= 1" :distance="800">
+								<infinite-loading @infinite="infiniteFeed">
+									<div slot="no-more"></div>
+									<div slot="no-results"></div>
+								</infinite-loading>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupStatus from '@/groups/partials/GroupStatus.vue';
+
+	export default {
+		props: {
+			pg: {
+				type: String
+			},
+
+			pp: {
+				type: String
+			}
+		},
+
+		components: {
+			'group-status': GroupStatus
+		},
+
+		data() {
+			return {
+				currentProfile: {},
+				roleTitle: 'Member',
+				group: {},
+				profile: {},
+				feed: [],
+				ids: [],
+				feedLoaded: false,
+				feedEmpty: false,
+				page: 1,
+				canIntersect: false,
+				commonIntersects: []
+			}
+		},
+
+		beforeMount() {
+			$('body').css('background-color', '#f0f2f5');
+			this.group = JSON.parse(this.pg);
+			this.profile = JSON.parse(this.pp);
+
+			if(this.profile.group.role == 'founder') {
+				this.roleTitle = 'Admin';
+			}
+		},
+
+		mounted() {
+			axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+			.then(res => {
+				this.currentProfile = res.data;
+				this.fetchInitialFeed();
+				if(res.data.id != this.profile.id) {
+					this.fetchCommonIntersections();
+				}
+			})
+			this.$nextTick(() => {
+				$('[data-toggle="tooltip"]').tooltip();
+			});
+		},
+
+		methods: {
+			fetchInitialFeed() {
+				axios.get(`/api/v0/groups/${this.group.id}/user/${this.profile.id}/feed`)
+				.then(res => {
+					this.feed = res.data.filter(s => {
+						return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
+					});
+					this.feedLoaded = true;
+					this.feedEmpty = this.feed.length == 0;
+					this.page++;
+				});
+			},
+
+			infiniteFeed($state) {
+				if(this.feed.length == 0) {
+					$state.complete();
+					return;
+				}
+
+				axios.get(`/api/v0/groups/${this.group.id}/user/${this.profile.id}/feed`, {
+					params: {
+						page: this.page
+					},
+				}).then(res => {
+					if (res.data.length) {
+						let data = res.data.filter(s => {
+							return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
+						});
+						let self = this;
+						data.forEach(d => {
+							if(self.ids.indexOf(d.id) == -1) {
+								self.ids.push(d.id);
+								self.feed.push(d);
+							}
+						});
+						$state.loaded();
+						this.page++;
+					} else {
+						$state.complete();
+					}
+				});
+			},
+
+			fetchCommonIntersections() {
+				axios.get('/api/v0/groups/member/intersect/common', {
+					params: {
+						gid: this.group.id,
+						pid: this.profile.id
+					}
+				}).then(res => {
+					this.commonIntersects = res.data;
+					this.canIntersect = res.data.groups.length || res.data.topics.length;
+				});
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-profile-component {
+		background-color: #f0f2f5;
+
+		.header {
+			&-jumbotron {
+				background-color: #F3F4F6;
+				height: 320px;
+				border-bottom-left-radius: 20px;
+				border-bottom-right-radius: 20px;
+			}
+
+			&-profile-card {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				.avatar {
+					width: 170px;
+					height: 170px;
+					border-radius: 50%;
+					margin-top: -150px;
+					margin-bottom: 20px;
+				}
+
+				.name {
+					font-size: 30px;
+					line-height: 30px;
+					font-weight: 700;
+					text-align: center;
+					margin-bottom: 6px;
+				}
+
+				.username {
+					font-size: 16px;
+					font-weight: 500;
+					text-align: center;
+				}
+			}
+
+			&-navbar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 60px;
+				border-top: 1px solid #F3F4F6;
+
+				.dropdown {
+					display: inline-block;
+
+					&-toggle:after {
+						display: none;
+					}
+				}
+			}
+		}
+
+		.group-profile-feed {
+			min-height: 500px;
+		}
+
+		.infolet {
+			margin-bottom: 1rem;
+
+			.media {
+				&-icon {
+					display: flex;
+					justify-content: center;
+					width: 30px;
+					margin-right: 10px;
+
+					i {
+						font-size: 1.1rem;
+						color: #D1D5DB !important;
+					}
+				}
+			}
+		}
+
+		.btn-light {
+			border-color: #F3F4F6;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/GroupSettings.vue b/resources/assets/components/groups/GroupSettings.vue
new file mode 100644
index 000000000..099d598f2
--- /dev/null
+++ b/resources/assets/components/groups/GroupSettings.vue
@@ -0,0 +1,1079 @@
+<template>
+	<div class="group-settings-component">
+		<div v-if="!initalLoad">
+			<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+		</div>
+
+		<div v-else>
+			<div class="bg-white mb-3 border-bottom">
+				<div class="container">
+					<div class="col-12 group-settings-component-header">
+						<div>
+							<h1 class="font-weight-bold mb-4">Group Settings</h1>
+							<p class="text-muted mb-0">
+								<span v-once>
+									<i class="fas fa-globe mr-1"></i>
+									{{ group.membership == 'all' ? 'Public Group' : 'Private Group'}}
+								</span>
+								<span class="mx-2">
+									·
+								</span>
+								<span>{{ group.member_count == 1 ? group.member_count + ' Member' : group.member_count + ' Members' }}</span>
+								<span class="mx-2">
+									·
+								</span>
+								<span class="text-lighter">ID:{{ group.id }}</span>
+							</p>
+						</div>
+						<div>
+							<a
+								v-if="isAdmin"
+								class="mr-2 btn btn-outline-secondary rounded-pill cta-btn font-weight-bold"
+								:href="group.url">
+								<i class="fas fa-chevron-left mr-1"></i> Back to Group
+							</a>
+							<button class="btn btn-primary font-weight-bold rounded-pill px-4" :disabled="savingChanges" @click="submit">
+								Save Changes
+							</button>
+						</div>
+					</div>
+					<div class="col-12">
+						<ul class="nav nav-tabs border-bottom-0 font-weight-bold small">
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'home'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('home')">
+									General
+								</a>
+							</li>
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'customize'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('customize')">
+									Customize
+								</a>
+							</li>
+							<!-- <li class="nav-item">
+								<a
+									:class="{ active: tab == 'mod'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('mod')">
+									Moderation
+								</a>
+							</li> -->
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'blocked'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('blocked')">
+									Domain/User Blocks
+								</a>
+							</li>
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'interactions'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('interactions')">
+									Interactions
+								</a>
+							</li>
+							<!-- <li class="nav-item">
+								<a class="nav-link" href="#">Interaction Log</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="#">Blocked Instances &amp; Users</a>
+							</li> -->
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'limits'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('limits')">
+									Limits
+								</a>
+							</li>
+							<!-- <li class="nav-item">
+								<a class="nav-link" href="#">Limits</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="#">Roles</a>
+							</li>
+							<li class="nav-item">
+								<a class="nav-link" href="#">Import &amp; Export</a>
+							</li> -->
+							<li class="nav-item">
+								<a
+									:class="{ active: tab == 'advanced'}"
+									class="nav-link"
+									href="#"
+									@click.prevent="toggleTab('advanced')">
+									Advanced
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<div class="container-xl pt-3">
+
+				<div v-if="tab == 'home'" class="row">
+					<div class="col-12 col-md-6 offset-md-3">
+						<div class="">
+							<div class="form-group">
+								<label class="font-weight-bold">Name</label>
+								<input class="form-control" :value="group.name" disabled>
+								<p class="form-text small text-muted">You cannot change a groups name at this time.</p>
+							</div>
+							<hr>
+
+							<div class="form-group">
+								<label class="font-weight-bold">Category</label>
+								<select class="custom-select" v-model="category">
+									<option value="" selected="" disabled="">Select a category</option>
+									<option v-for="c in categories" :value="c">{{ c }}</option>
+								</select>
+								<p class="form-text small text-muted">Choose the most relevant category to improve discovery and visibility</p>
+							</div>
+							<hr>
+
+							<div class="form-group">
+								<label class="font-weight-bold">Description</label>
+								<textarea class="form-control" rows="4" v-model="group.description" style="resize: none;">
+								</textarea>
+								<span class="form-text small text-muted font-weight-bold text-right">
+									{{group.description ? group.description.length : 0}}/500
+								</span>
+								<p class="form-text small text-muted">A plain text description of your group. Be as descriptive as possible to give potential members a better idea of what to expect.</p>
+							</div>
+							<!-- <hr>
+							<div class="form-group">
+								<label class="font-weight-bold">Avatar Photo</label>
+								<div v-if="group.metadata && group.metadata.hasOwnProperty('avatar')" class="d-flex justify-content-between align-items-center">
+									<img :src="group.metadata.avatar.url" width="100" height="100" class="rounded-circle border" style="object-fit: cover;">
+									<p class="mb-0 mt-2 text-lighter">
+										<a href="" class="text-muted font-weight-bold">
+											Preview
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-muted font-weight-bold">
+											Update
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-danger font-weight-bold">
+											Delete
+										</a>
+									</p>
+								</div>
+								<div v-else>
+									<div class="custom-file">
+										<input type="file" class="custom-file-input" ref="avatarInput">
+										<label class="custom-file-label" for="avatarInput">Choose file</label>
+									</div>
+									<p class="form-text small text-muted">Must be jpeg or png format, up to 2MB</p>
+								</div>
+							</div>
+							<hr>
+							<div class="form-group">
+								<label class="font-weight-bold">Header Photo</label>
+
+								<div v-if="group.metadata && group.metadata.hasOwnProperty('header')" class="d-flex justify-content-between align-items-center">
+									<img :src="group.metadata.header.url" width="200" height="100" class="rounded border" style="object-fit: cover;">
+									<p class="mb-0 mt-2 text-lighter">
+										<a href="" class="text-muted font-weight-bold">
+											Preview
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-muted font-weight-bold">
+											Update
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-danger font-weight-bold">
+											Delete
+										</a>
+									</p>
+								</div>
+								<div v-else>
+									<div class="custom-file">
+										<input type="file" class="custom-file-input" ref="headerInput">
+										<label class="custom-file-label" for="headerInput">Choose file</label>
+									</div>
+									<p class="form-text small text-muted">Must be jpeg or png format, up to 10MB</p>
+								</div>
+							</div> -->
+						</div>
+					</div>
+				</div>
+
+				<div v-if="tab == 'customize'" class="row">
+					<div class="col-12 col-md-6 offset-md-3">
+						<div class="">
+							<div class="form-group">
+								<label class="font-weight-bold">Avatar Photo</label>
+								<div v-if="group.metadata && group.metadata.hasOwnProperty('avatar')" class="d-flex justify-content-between align-items-center">
+									<img :src="group.metadata.avatar.url" width="100" height="100" class="rounded-circle border" style="object-fit: cover;">
+									<p class="mb-0 mt-2 text-lighter">
+										<a href="" class="text-muted font-weight-bold">
+											Preview
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-muted font-weight-bold">
+											Update
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-danger font-weight-bold">
+											Delete
+										</a>
+									</p>
+								</div>
+								<div v-else>
+									<div class="custom-file">
+										<input type="file" class="custom-file-input" ref="avatarInput">
+										<label class="custom-file-label" for="avatarInput">Choose file</label>
+									</div>
+									<p class="form-text small text-muted">Must be jpeg or png format, up to 2MB</p>
+								</div>
+							</div>
+							<hr>
+							<div class="form-group">
+								<label class="font-weight-bold">Header Photo</label>
+
+								<div v-if="group.metadata && group.metadata.hasOwnProperty('header')" class="d-flex justify-content-between align-items-center">
+									<img :src="group.metadata.header.url" width="200" height="100" class="rounded border" style="object-fit: cover;">
+									<p class="mb-0 mt-2 text-lighter">
+										<a href="" class="text-muted font-weight-bold">
+											Preview
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-muted font-weight-bold">
+											Update
+										</a>
+										<span class="mx-1">·</span>
+										<a href="" class="text-danger font-weight-bold">
+											Delete
+										</a>
+									</p>
+								</div>
+								<div v-else>
+									<div class="custom-file">
+										<input type="file" class="custom-file-input" ref="headerInput">
+										<label class="custom-file-label" for="headerInput">Choose file</label>
+									</div>
+									<p class="form-text small text-muted">Must be jpeg or png format, up to 10MB</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="tab == 'interactions'" class="row">
+					<div class="col-12 col-md-3">
+						<p class="lead">The <strong>Interaction Log</strong> displays all member activities relating to this group.</p>
+						<p class="lead">You may see logs from blocked, deleted and remote accounts.</p>
+					</div>
+					<div class="col-12 col-md-6">
+						<div class="list-group">
+							<div v-for="(log, index) in interactionLog" class="list-group-item">
+								<div class="media align-items-center">
+									<img :src="log.profile.avatar" width="32" height="32" class="rounded-circle border mr-3" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+									<div class="media-body">
+										<span class="font-weight-bold">{{log.profile.username}}</span>
+
+										<span v-if="log.type == 'group:comment:created'">
+											commented on a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:joined'">
+											joined the group
+										</span>
+
+										<span v-else-if="log.type == 'group:like'">
+											liked a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:settings:updated'">
+											updated the <a href="" class="font-weight-bold">group settings</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:status:created'">
+											created a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:status:deleted'">
+											deleted a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:unlike'">
+											unliked a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:admin:block:instance'">
+											blocked <span class="font-weight-bold text-primary">{{ log.metadata.domain }}</span>
+										</span>
+
+										<span v-else-if="log.type == 'group:admin:block:user'">
+											blocked <a class="font-weight-bold text-primary" :href="'/' + log.metadata.username">{{ log.metadata.username }}</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:report:create'">
+											created a <a :href="reportUrl(log.metadata.report_id)" class="font-weight-bold">report</a> about <a :href="'/' + log.metadata.username" class="font-weight-bold">{{ log.metadata.username}}</a>'s <a :href="log.metadata.url" class="font-weight-bold">post</a>
+										</span>
+
+										<span v-else-if="log.type == 'group:moderation:action'">
+											handled a <a :href="reportUrl(log.metadata.report_id)" class="font-weight-bold">mod report</a> regarding <a :href="log.metadata.status_url" class="font-weight-bold">this post</a>
+										</span>
+
+										<span v-else-if="log.type =='group:member-limits:updated'">
+											updated <a :href="memberInteractionUrl(log.metadata.profile_id)" class="font-weight-bold">interaction limits</a> for <a :href="'/' + log.metadata.username" class="font-weight-bold">{{ log.metadata.username }}</a>
+										</span>
+
+										<span v-else>{{log.type}}</span>
+
+										<div class="float-right text-muted small font-weight-bold">{{timeago(log.created_at)}}</div>
+									</div>
+								</div>
+							</div>
+							<div v-if="interactionLogShowMore" class="list-group-item">
+								<button class="btn btn-light font-weight-bold btn-block" @click="loadMoreInteractions">Load more</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-3">
+						<p class="font-weight-bold small">SEARCH</p>
+						<div class="form-group">
+							<input class="form-control rounded-pill" placeholder="Search username, type or url"/>
+						</div>
+						<hr>
+
+						<p class="font-weight-bold small">ACTIVITIES</p>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" checked id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Joined Group
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" checked id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Left Group
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" checked id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Posts
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" checked id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Comments
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" checked id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Likes
+							</label>
+						</div>
+
+						<hr>
+
+						<p class="font-weight-bold small">FILTERS</p>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" value="" id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Local members only
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" value="" id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Remote members only
+							</label>
+						</div>
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" value="" id="filter1">
+							<label class="form-check-label font-weight-bold" for="filter1">
+								Blocked members only
+							</label>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="tab == 'blocked'" class="row">
+					<div class="col-12 col-md-3">
+						<p class="h5">Blocked Instances &amp; Users</p>
+						<p>Fine-grained control over who can join and interact with your group</p>
+						<p>Blocking an instance will revoke membership from users on that instance and prevent other users on that instance from joining</p>
+						<p>Blocking a user will revoke membership and remove all interactions from that user</p>
+						<p>Moderating an instance will require all new membership requests from that instance to be approved by a group admin before the specific user can join</p>
+					</div>
+					<div class="col-12 col-md-6">
+						<div class="card mb-3">
+							<div class="card-header text-muted font-weight-bold small">Blocked Instances</div>
+							<div class="list-group list-group-flush">
+								<div v-for="instance in blockedInstances" class="list-group-item d-flex justify-content-between align-items-center">
+									<div>
+										{{instance}}
+									</div>
+									<button class="btn btn-light" @click.prevent="undoBlock('instance', instance)">
+										<i class="far fa-trash-alt text-lighter"></i>
+									</button>
+								</div>
+								<div v-if="blockedInstances.length == 3" class="list-group-item">
+									<p class="mb-0 small font-weight-bold text-lighter text-center">View All</p>
+								</div>
+							</div>
+						</div>
+
+						<div class="card mb-3">
+							<div class="card-header text-muted font-weight-bold small">Blocked Users</div>
+							<div class="list-group list-group-flush">
+								<div v-for="instance in blockedUsers" class="list-group-item d-flex justify-content-between align-items-center">
+									<div>
+										<img src="/storage/avatars/default.jpg" width="32" height="32" class="rounded-circle border mr-3">{{instance}}
+									</div>
+									<button class="btn btn-light" @click.prevent="undoBlock('user', instance)">
+										<i class="far fa-trash-alt text-lighter"></i>
+									</button>
+								</div>
+								<div v-if="blockedUsers.length == 3" class="list-group-item">
+									<p class="mb-0 small font-weight-bold text-lighter text-center">View All</p>
+								</div>
+							</div>
+						</div>
+
+						<div class="card mb-3">
+							<div class="card-header text-muted font-weight-bold small">Moderated Join Requests</div>
+							<div class="list-group list-group-flush">
+								<div v-for="instance in moderatedInstances" class="list-group-item d-flex justify-content-between align-items-center">
+									<div>
+										{{instance}}
+									</div>
+									<button class="btn btn-light" @click.prevent="undoBlock('moderate', instance)">
+										<i class="far fa-trash-alt text-lighter"></i>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-3">
+						<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('instance')">Block Instance</button>
+						<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('user')">Block User</button>
+						<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('moderate')">Moderate Join Requests</button>
+						<hr>
+						<button class="btn btn-light border btn-block font-weight-bold">Import</button>
+						<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="exportBlocks()">Export</button>
+					</div>
+				</div>
+
+				<div v-if="tab == 'advanced'" class="row">
+					<div class="col-12 col-md-6 offset-md-3">
+
+						<div class="mt-3">
+							<div class="form-group">
+								<label class="font-weight-bold">Membership</label>
+								<select class="form-control rounded-pill" v-model="group.membership">
+									<option value="all">Public</option>
+									<option value="private">Private</option>
+									<option value="local">Local</option>
+								</select>
+
+								<p class="help-text mt-1">
+									{{ membershipDescription[group.membership] }}
+								</p>
+							</div>
+							<!-- <hr>
+							<div class="form-group">
+								<label class="font-weight-bold">Post Types</label>
+								<div class="custom-control custom-checkbox mb-2">
+									<input type="checkbox" class="custom-control-input" id="textType" checked disabled>
+									<label class="custom-control-label" for="textType">Text</label>
+								</div>
+								<div class="custom-control custom-checkbox mb-2">
+									<input type="checkbox" class="custom-control-input" id="photoType" checked>
+									<label class="custom-control-label" for="photoType">Photos</label>
+								</div>
+								<div class="custom-control custom-checkbox mb-2">
+									<input type="checkbox" class="custom-control-input" id="videoType" checked>
+									<label class="custom-control-label" for="videoType">Videos</label>
+								</div>
+								<div class="custom-control custom-checkbox mb-2">
+									<input type="checkbox" class="custom-control-input" id="pollType" checked>
+									<label class="custom-control-label" for="pollType">Polls</label>
+								</div>
+								<div class="custom-control custom-checkbox">
+									<input type="checkbox" class="custom-control-input" id="eventType" disabled>
+									<label class="custom-control-label" for="eventType">Events</label>
+								</div>
+							</div> -->
+						</div>
+
+						<hr>
+
+						<div v-if="group.membership !== 'local'" class="form-group row">
+							<div class="col-sm-12">
+								<div class="mb-1">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" v-model="advanced.activitypub">
+										<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable ActivityPub</label>
+									</div>
+								</div>
+
+								<transition name="fade">
+									<div v-if="!advanced.activitypub" class="alert alert-info mt-2">
+										<div class="media align-items-center">
+											<i class="far fa-exclamation-circle fa-2x mr-3"></i>
+											<div class="media-body">
+												<p class="font-weight-bold mb-0">Federation Warning</p>
+												<p class="small mb-0" style="font-weight:600;">Groups that choose to disable federation later will lose remote content and members and cannot re-enable federation for 24 hours. You can change this later</p>
+											</div>
+										</div>
+									</div>
+								</transition>
+							</div>
+						</div>
+
+						<hr v-if="group.membership !== 'local'">
+
+						<div class="form-group row">
+							<div class="col-sm-12">
+								<div class="mb-1">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" v-model="advanced.is_nsfw">
+										<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Allow adult content (18+)</label>
+									</div>
+								</div>
+
+								<transition name="fade">
+									<div v-if="!advanced.is_nsfw" class="alert alert-info mt-2">
+										<div class="media align-items-center">
+											<i class="far fa-exclamation-circle fa-2x mr-3"></i>
+											<div class="media-body">
+												<p class="font-weight-bold mb-0">Adult Content Warning</p>
+												<p class="small mb-0" style="font-weight:600;">Groups that allow adult content should enable this or risk suspension or deletion by instance admins. Illegal content is prohibited. You can change this later</p>
+											</div>
+										</div>
+									</div>
+								</transition>
+							</div>
+						</div>
+
+						<hr>
+
+						<div class="form-group row">
+							<div class="col-sm-12">
+								<div class="mb-1">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" v-model="advanced.discoverable">
+										<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Make group discoverable</label>
+									</div>
+
+									<p class="help-text small text-muted">
+										<span>
+											Being discoverable means that your group appears in search results, on the discover page and can be used in group recommendations
+										</span>
+									</p>
+								</div>
+							</div>
+							<hr>
+						</div>
+
+
+						<div v-if="group.member_count >= 25" class="form-group row">
+							<div class="col-sm-12">
+								<div class="mb-1">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox">
+										<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable spam detection</label>
+									</div>
+
+									<p class="help-text small text-muted">
+										<span>
+											Detect and temporarily remove content classified as spam from new members until it can be reviewed by a group admin. <strong>We do not recommend enabling this unless you have or expect periodic spam as it may produce false-positives and reduce member experience &amp; retention.</strong>
+										</span>
+									</p>
+								</div>
+							</div>
+							<hr>
+						</div>
+
+
+						<div v-if="group.member_count >= 25"  class="form-group row">
+							<div class="col-sm-12">
+								<div class="mb-1">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox">
+										<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable admin direct messages</label>
+									</div>
+
+									<p class="help-text small text-muted">
+										<span>
+											Allow {{ group.membership == 'local' ? 'local users' : group.membership == 'private' ? 'members' : 'anyone'}} to <a href="#">direct message</a> group admins. The direct message inbox is separate from your own account.
+										</span>
+									</p>
+								</div>
+							</div>
+							<hr>
+						</div>
+
+
+						<h4 class="font-weight-bold pt-3">Danger Zone</h4>
+						<div class="mb-4 border rounded border-danger">
+							<ul class="list-group mb-0 pb-0">
+								<li class="list-group-item border-left-0 border-right-0 py-3 d-flex justify-content-between disabled">
+									<div>
+										<p class="font-weight-bold mb-1">Temporarily Disable Group</p>
+										<p class="mb-0 small">Not available</p>
+									</div>
+									<div>
+										<a class="btn btn-outline-danger font-weight-bold py-1" href="#">Disable</a>
+									</div>
+								</li>
+								<li class="list-group-item border-left-0 border-right-0 py-3 d-flex justify-content-between">
+									<div>
+										<p class="font-weight-bold mb-1">Delete Group</p>
+										<p class="mb-0 small">Once you delete your group, there is no going back.</p>
+									</div>
+									<div>
+										<button class="btn btn-outline-danger font-weight-bold py-1" @click="deleteGroup">Delete Group</button>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="tab == 'limits'" class="row">
+					<div class="col-12 col-md-6 offset-md-3">
+						<div class="mt-3">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			groupId: {
+				type: String
+			}
+		},
+
+		data() {
+			return {
+				initalLoad: false,
+				profile: undefined,
+				group: {},
+				isMember: false,
+				isAdmin: false,
+				changed: false,
+				savingChanges: false,
+				categories: [],
+				category: 'General',
+				tab: 'home',
+				tabs: [
+					'home',
+					'customize',
+					'interactions',
+					'blocked',
+					'advanced',
+					'limits',
+					'blocked:import'
+				],
+				interactionLog: [],
+				interactionLogPage: 1,
+				interactionLogInitialLoad: false,
+				interactionLogShowMore: true,
+				blockedInitialLoad: false,
+				blockedInstances: [
+					'facebook.com',
+					'instagram.com'
+				],
+				blockedUsers: [
+					'mark@facebook.com',
+					'user@example.org',
+					'troll'
+				],
+				moderatedInstances: [
+					'pawoo.net',
+					'pixelfed.com'
+				],
+				importBlocksData: {},
+				importBlocksUploaded: false,
+				membershipDescription: {
+					all: 'Anyone can join your group',
+					local: 'Only local users can join your group',
+					private: 'Only users you approve can join your group'
+				},
+				advanced: {}
+			};
+		},
+
+		beforeMount() {
+			axios.get('/api/v0/groups/categories/list')
+				.then(res => {
+					this.categories = res.data;
+				})
+		},
+
+		mounted() {
+			let u = new URLSearchParams(window.location.search);
+
+			if(u.has('tab') && this.tabs.includes(u.get('tab'))) {
+				this.tab = u.get('tab');
+				this.toggleTab(this.tab);
+			}
+
+			axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+			.then(res => {
+				this.profile = res.data;
+
+				axios.get('/api/v0/groups/' + this.groupId)
+				.then(res => {
+					this.group = res.data;
+					this.initalLoad = true;
+					this.isMember = res.data.self.is_member;
+					this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+					this.advanced = res.data.config;
+					this.category = res.data.category.name;
+				})
+			});
+		},
+
+		methods: {
+			timestampFormat(date, showTime = false) {
+				let ts = new Date(date);
+				return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
+			},
+
+			timeago(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+
+			sidToUrl(sid) {
+				return `/groups/${this.groupId}/p/${sid}`;
+			},
+
+			submit() {
+				this.savingChanges = true;
+
+				let formData = new FormData();
+				formData.append('category', this.category);
+				formData.append('membership', this.group.membership);
+				formData.append('discoverable', this.advanced.discoverable);
+				formData.append('activitypub', this.advanced.activitypub);
+				formData.append('is_nsfw', this.advanced.is_nsfw);
+
+				if(this.group.description) {
+					formData.append('description', this.group.description);
+				}
+
+				if(this.$refs.avatarInput) {
+					formData.append('avatar', this.$refs.avatarInput.files[0]);
+				}
+
+				if(this.$refs.headerInput) {
+					formData.append('header', this.$refs.headerInput.files[0]);
+				}
+
+				axios.post('/api/v0/groups/' + this.group.id + '/settings', formData)
+				.then(res => {
+					this.savingChanges = false;
+					this.group = res.data;
+					swal('Updated!', 'Successfully updated group settings.', 'success');
+				}).catch(err => {
+					this.savingChanges = false;
+					console.log(err.response);
+					swal('Oops!', 'An error occured while attempting to save changes. Please try again later.', 'error');
+				});
+			},
+
+			toggleTab(tab) {
+				if(event) {
+					event.currentTarget.blur();
+				}
+
+				switch(tab) {
+					case 'home':
+						this.tab = 'home';
+						history.pushState(null, null, `/groups/${this.groupId}/settings`);
+					break;
+
+					case 'customize':
+						this.tab = 'customize';
+						history.pushState(null, null, `/groups/${this.groupId}/settings?tab=customize`);
+					break;
+
+					case 'limits':
+						this.tab = 'limits';
+						history.pushState(null, null, `/groups/${this.groupId}/settings?tab=limits`);
+					break;
+
+					case 'interactions':
+						if(!this.interactionLogInitialLoad) {
+							this.loadInteractions();
+						}
+						this.tab = 'interactions';
+						history.pushState(null, null, `/groups/${this.groupId}/settings?tab=interactions`);
+					break;
+
+					case 'blocked':
+						if(!this.blockedInitialLoad) {
+							this.loadBlocks();
+						}
+						this.tab = 'blocked';
+						history.pushState(null, null, `/groups/${this.groupId}/settings?tab=blocked`);
+					break;
+
+					case 'advanced':
+						this.tab = 'advanced';
+						history.pushState(null, null, `/groups/${this.groupId}/settings?tab=advanced`);
+					break;
+
+					default:
+						this.tab = 'home';
+						history.pushState(null, null, `/groups/${this.groupId}/settings`);
+					break;
+				}
+			},
+
+			loadInteractions() {
+				axios.get('/api/v0/groups/' + this.groupId + '/admin/interactions')
+				.then(res => {
+					this.interactionLog = res.data;
+					this.interactionLogPage++;
+					this.interactionLogInitialLoad = true;
+				});
+			},
+
+			loadMoreInteractions() {
+				axios.get('/api/v0/groups/' + this.groupId + '/admin/interactions', {
+					params: {
+						page: this.interactionLogPage
+					}
+				}).then(res => {
+					if(res.data.length == 0) {
+						this.interactionLogShowMore = false;
+						return;
+					}
+					this.interactionLog.push(...res.data);
+					this.interactionLogPage++;
+				})
+			},
+
+			loadBlocks() {
+				axios.get(`/api/v0/groups/${this.groupId}/admin/blocks`)
+				.then(res => {
+					this.blockedInstances = res.data.instances;
+					this.blockedUsers = res.data.users;
+					this.moderatedInstances = res.data.moderated;
+					this.blockedInitialLoad = true;
+				})
+			},
+
+			blockAction(action) {
+				let type = action == 'user' ? 'user' : 'instance domain';
+
+				swal({
+					text: `Which ${type}?`,
+					content: {
+						element: 'input',
+						attributes: {
+      						placeholder: type == 'user' ? 'pixelfed' : 'pixelfed.org'
+      					}
+					},
+					button: {
+						text: "Next",
+						closeModal: false,
+					},
+				})
+				.then(name => {
+					if (!name) throw null;
+					if(action !== 'user' && name.startsWith('http')) {
+						swal('Oops!', 'Please enter the instance domain (eg: pixelfed.social)', 'error');
+						return null;
+					}
+					return name;
+				}).then(name => {
+					return axios.post('/api/v0/groups/' + this.groupId + '/admin/mbs', {
+						type: action == 'user' ? 'user' : 'instance',
+						item: name
+					}).then(res => {
+						if(res.data) {
+							return name;
+						} else {
+							swal.stopLoading();
+							swal.close();
+							return null;
+						}
+					}).catch(err => {
+						swal.stopLoading();
+						swal.close();
+						return null;
+					});
+				}).then(name => {
+					if(!name) {
+						this.$bvToast.toast(`Invalid ${action}, please try again`, {
+							title: 'Error',
+							variant: 'danger',
+							autoHideDelay: 5000
+						});
+						return;
+					}
+					swal({
+						title: "Are you sure?",
+						text: action === 'moderate' ? `Manually approve all membership requests from ${name}` : `Limiting ${name} will purge and reject all interactions with this group`,
+						icon: "warning",
+						buttons: true,
+						dangerMode: true,
+					})
+					.then((confirm) => {
+						if (confirm) {
+							axios.post('/api/v0/groups/' + this.groupId + '/admin/blocks/add', {
+								item: name,
+								type: action
+							}).then(res => {
+								switch(action) {
+									case 'instance':
+										this.blockedInstances.push(name);
+									break;
+
+									case 'user':
+										this.blockedUsers.push(name);
+									break;
+
+									case 'moderate':
+										this.moderatedInstances.push(name);
+									break;
+								}
+								// swal("Poof! Your imaginary file has been deleted!", {
+								// 	icon: "success",
+								// });
+							})
+						}
+					});
+				});
+			},
+
+			reportUrl(report) {
+				return `/groups/${this.groupId}/moderation?tab=view&id=${report}`;
+			},
+
+			memberInteractionUrl(pid) {
+				return `/groups/${this.groupId}/members?a=il&pid=${pid}`;
+			},
+
+			undoBlock(type, val) {
+				let action = type == 'moderate' ? `unblock ${val}?` : `allow anyone to join without approval from ${val}?`;
+				swal({
+					'title': 'Confirm',
+					'text': `Are you sure you want to ${action}`,
+					'buttons': {
+						cancel: {
+							text: "Cancel",
+							value: null,
+							visible: true,
+							className: "",
+							closeModal: true,
+						},
+						confirm: {
+							text: "Proceed",
+							value: true,
+							visible: true,
+							className: "",
+							closeModal: true
+						}
+					}
+				}).then(res => {
+					if(res) {
+						axios.post(`/api/v0/groups/${this.groupId}/admin/blocks/undo`, {
+							item: val,
+							type: type
+						}).then(res => {
+							switch(type) {
+								case 'instance':
+									this.blockedInstances = this.blockedInstances.filter(i => {
+										return i != val;
+									})
+								break;
+
+								case 'user':
+									this.blockedUsers = this.blockedUsers.filter(i => {
+										return i != val;
+									})
+								break;
+
+								case 'moderate':
+									this.moderatedInstances = this.moderatedInstances.filter(i => {
+										return i != val;
+									})
+								break;
+							}
+						})
+					}
+				});
+			},
+
+			exportBlocks() {
+				event.currentTarget.blur();
+				axios({
+					url: '/api/v0/groups/'+this.groupId+'/admin/blocks/export',
+					method: 'POST',
+					responseType: 'blob',
+				}).then((response) => {
+					const url = window.URL.createObjectURL(new Blob([response.data]));
+					const link = document.createElement('a');
+					link.href = url;
+					link.setAttribute('download', `pixelfed-group-blocks-${Date.now()}.json`);
+					document.body.appendChild(link);
+					link.click();
+				});
+			},
+
+			deleteGroup() {
+				axios.post('/api/v0/groups/delete', {
+					gid: this.groupId
+				})
+				.then(res => {
+					location.href = `/groups/${this.groupId}`;
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-settings-component {
+		&-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-end;
+			padding: 2rem 1rem 1rem 1rem;
+			background-color: #fff;
+
+			.cta-btn {
+				min-width: 140px;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/GroupTopicFeed.vue b/resources/assets/components/groups/GroupTopicFeed.vue
new file mode 100644
index 000000000..ee7f57433
--- /dev/null
+++ b/resources/assets/components/groups/GroupTopicFeed.vue
@@ -0,0 +1,170 @@
+<template>
+	<div class="group-topic-feed-component">
+		<div v-if="isLoaded" class="bg-white py-5 border-bottom">
+			<div class="container">
+				<div class="d-flex justify-content-between align-items-center">
+					<div>
+						<h3 class="font-weight-bold mb-1">#{{ name }}</h3>
+						<p class="mb-0 lead text-muted">
+							<span>
+								Posts in <a :href="group.url" class="text-muted font-weight-bold">{{ group.name }}</a>
+							</span>
+							<span>·</span>
+							<span><i class="fas fa-globe"></i></span>
+							<span>·</span>
+							<span>{{ group.membership != 'all' ? 'Private' : 'Public'}} Group</span>
+						</p>
+					</div>
+					<!-- <div>
+						<button class="btn btn-light border btn-lg text-muted">
+							<i class="fas fa-ellipsis-h"></i>
+						</button>
+					</div> -->
+				</div>
+			</div>
+		</div>
+		<div v-if="isLoaded" class="row justify-content-center mt-3">
+			<div v-if="feed.length" class="col-12 col-md-5">
+				<group-status
+					v-for="(status, index) in feed"
+					:key="'gs:' + status.id + index"
+					:prestatus="status"
+					:profile="profile"
+					:group="group"
+					:show-group-chevron="true"
+					:group-id="gid" />
+
+				<div v-if="feed.length > 2">
+					<infinite-loading @infinite="infiniteFeed">
+						<div slot="no-more"></div>
+						<div slot="no-results"></div>
+					</infinite-loading>
+				</div>
+			</div>
+			<div v-else class="col-12 col-md-5 d-flex justify-content-center">
+				<div class="mt-5">
+					<p class="text-lighter text-center">
+						<i class="fal fa-exclamation-circle fa-4x"></i>
+					</p>
+
+					<p class="font-weight-bold text-muted">Cannot load any posts containg the <span class="font-weight-normal">#{{ name }}</span> hashtag</p>
+
+					<p class="text-left">
+						This can happen for a few reasons:
+					</p>
+
+					<ul class="text-left">
+						<li>There is a typo in the url</li>
+						<li>No posts exist that contain this hashtag</li>
+						<li>This hashtag has been banned by group admins</li>
+						<li>The hashtag is new or used infrequently</li>
+						<li>A technical issue has occured</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupStatus from '@/groups/partials/GroupStatus.vue';
+
+	export default {
+		props: {
+			gid: {
+				type: String
+			},
+
+			name: {
+				type: String
+			}
+		},
+
+		components: {
+			GroupStatus
+		},
+
+		data() {
+			return {
+				isLoaded: false,
+				group: false,
+				profile: false,
+				feed: [],
+				page: 1,
+				ids: []
+			}
+		},
+
+		mounted() {
+			this.fetchProfile();
+		},
+
+		methods: {
+			fetchProfile() {
+				axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+				.then(res => {
+					this.profile = res.data;
+					this.fetchGroup();
+				});
+			},
+
+			fetchGroup() {
+				axios.get('/api/v0/groups/' + this.gid)
+				.then(res => {
+					this.group = res.data;
+					this.fetchFeed();
+				});
+			},
+
+			fetchFeed() {
+				axios.get('/api/v0/groups/topics/tag', {
+					params: {
+						gid: this.gid,
+						name: this.name
+					}
+				}).then(res => {
+					this.feed = res.data;
+					this.isLoaded = true;
+					let self = this;
+					res.data.forEach(d => {
+						if(self.ids.indexOf(d.id) == -1) {
+							self.ids.push(d.id);
+						}
+					});
+					this.page++;
+				})
+			},
+
+			infiniteFeed($state) {
+				if(this.feed.length < 2) {
+					$state.complete();
+					return;
+				}
+
+				axios.get('/api/v0/groups/topics/tag', {
+					params: {
+						gid: this.gid,
+						name: this.name,
+						limit: 1,
+						page: this.page
+					},
+				}).then(res => {
+					if (res.data.length) {
+						let data = res.data;
+						let self = this;
+						data.forEach(d => {
+							if(self.ids.indexOf(d.id) == -1) {
+								self.ids.push(d.id);
+								self.feed.push(d);
+							}
+						});
+						$state.loaded();
+						this.page++;
+					} else {
+						$state.complete();
+					}
+				});
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/GroupsHome.vue b/resources/assets/components/groups/GroupsHome.vue
new file mode 100644
index 000000000..3a3d6dde8
--- /dev/null
+++ b/resources/assets/components/groups/GroupsHome.vue
@@ -0,0 +1,473 @@
+<template>
+	<div class="groups-home-component w-100 h-100">
+		<div v-if="initialLoad" class="row border-bottom m-0 p-0">
+			<div class="col-2 shadow" style="height: 100vh;background:#fff;top:51px;overflow: hidden;z-index: 1;position: sticky;">
+				<div class="p-1">
+					<div class="d-flex justify-content-between align-items-center py-3">
+						<p class="h2 font-weight-bold mb-0">Groups</p>
+						<a class="btn btn-light px-2 rounded-circle" href="/settings/home">
+							<i class="fas fa-cog fa-lg"></i>
+						</a>
+					</div>
+
+					<div class="mb-3">
+						<autocomplete
+							:search="autocompleteSearch"
+							placeholder="Search groups by name"
+							aria-label="Search groups by name"
+							:get-result-value="getSearchResultValue"
+							:debounceTime="700"
+							@submit="onSearchSubmit"
+							ref="autocomplete"
+							>
+							<template #result="{ result, props }">
+								<li
+								v-bind="props"
+								class="autocomplete-result"
+								>
+
+									<div class="media align-items-center">
+										<img v-if="result.local && result.metadata && result.metadata.hasOwnProperty('header') && result.metadata.header.hasOwnProperty('url')" :src="result.metadata.header.url" width="32" height="32">
+										<div v-else class="icon-placeholder">
+											<i class="fal fa-user-friends"></i>
+										</div>
+										<div class="media-body text-truncate mr-3">
+											<p class="result-name mb-n1 font-weight-bold">
+												{{ truncateName(result.name) }}
+												<span v-if="result.verified" class="fa-stack ml-n2" title="Verified Group" data-toggle="tooltip">
+													<i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+													<i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+												</span>
+											</p>
+											<p class="mb-0 text-muted" style="font-size: 10px;">
+												<span v-if="!result.local" title="Remote Group">
+													<i class="far fa-globe"></i>
+												</span>
+												<span v-if="!result.local">·</span>
+												<span class="font-weight-bold">{{ result.member_count }} members</span>
+											</p>
+										</div>
+									</div>
+								</li>
+							</template>
+						</autocomplete>
+					</div>
+
+					<button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'feed' }"
+						@click="switchTab('feed')">
+						<div class="group-nav-btn-icon">
+							<i class="fas fa-list"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							Your Feed
+						</div>
+					</button>
+
+					<button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'discover' }"
+						@click="switchTab('discover')">
+						<div class="group-nav-btn-icon">
+							<i class="fas fa-compass"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							Discover
+						</div>
+					</button>
+
+					<button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'mygroups' }"
+						@click="switchTab('mygroups')">
+						<div class="group-nav-btn-icon">
+							<i class="fas fa-list"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							My Groups
+						</div>
+					</button>
+
+					<button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'notifications' }"
+						@click="switchTab('notifications')">
+						<div class="group-nav-btn-icon">
+							<i class="far fa-bell"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							Your Notifications
+						</div>
+					</button>
+
+					<!-- <button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'invitations' }"
+						@click="switchTab('invitations')">
+						<div class="group-nav-btn-icon">
+							<i class="fas fa-user-plus"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							Group Invitations
+						</div>
+					</button> -->
+
+					<button
+						class="btn btn-light group-nav-btn"
+						:class="{ active: tab == 'remotesearch' }"
+						@click="switchTab('remotesearch')">
+						<div class="group-nav-btn-icon">
+							<i class="fas fa-search-plus"></i>
+						</div>
+						<div class="group-nav-btn-name">
+							Find a remote group
+						</div>
+					</button>
+
+					<button
+						v-if="config && config.limits.user.create.new"
+						class="btn btn-primary btn-block rounded-pill font-weight-bold mt-3"
+						@click="switchTab('creategroup')"
+						:disabled="tab == 'creategroup'">
+						<i class="fas fa-plus mr-2"></i> Create New Group
+					</button>
+
+					<hr>
+					<div v-for="group in groups" class="ml-2">
+						<div class="card shadow-sm border text-decoration-none text-dark">
+							<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: auto;object-fit: cover;max-height: 160px;">
+							<div v-else class="bg-primary" style="width:100%;height:160px;"></div>
+							<div class="card-body">
+								<div class="lead font-weight-bold d-flex align-items-top" style="height: 60px;">
+									{{ group.name }}
+									<span v-if="group.verified" class="fa-stack ml-n2 mt-n2">
+										<i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+										<i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+									</span>
+								</div>
+								<div class="text-muted font-weight-light d-flex justify-content-between">
+									<span>{{group.member_count}} Members</span>
+									<span style="font-size: 12px;padding: 2px 5px;color: rgba(75, 119, 190, 1);background:rgba(137, 196, 244, 0.2);border:1px solid rgba(137, 196, 244, 0.3);font-weight:400;text-transform: capitalize;" class="rounded">{{ group.self.role }}</span>
+								</div>
+								<hr>
+								<p class="mb-0">
+									<a class="btn btn-light btn-block border rounded-lg font-weight-bold" :href="group.url">View Group</a>
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<keep-alive>
+				<transition name="fade">
+					<self-feed v-if="tab == 'feed'" :profile="profile" v-on:switchtab="switchTab" />
+					<self-discover v-if="tab == 'discover'" :profile="profile" />
+					<self-notifications v-if="tab == 'notifications'" :profile="profile" />
+					<self-invitations v-if="tab == 'invitations'" :profile="profile" />
+					<self-remote-search v-if="tab == 'remotesearch'" :profile="profile" />
+					<self-groups v-if="tab == 'mygroups'" :profile="profile" />
+					<create-group v-if="tab == 'creategroup'" :profile="profile" />
+					<div v-if="tab == 'gsearch'">
+						<div class="col-12 px-5">
+							<div class="my-4">
+		                        <p class="h1 font-weight-bold mb-1">Group Search</p>
+		                        <p class="lead text-muted mb-0">Search and explore groups.</p>
+		                    </div>
+		                    <div class="media align-items-center text-lighter">
+		                    	<i class="far fa-chevron-left fa-lg mr-3"></i>
+		                    	<div class="media-body">
+		                    		<p class="lead mb-0">Use the search bar on the side menu</p>
+		                    	</div>
+		                    </div>
+						</div>
+					</div>
+				</transition>
+			</keep-alive>
+		</div>
+		<div v-else class="row justify-content-center mt-5">
+			<b-spinner />
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupStatus from './partials/GroupStatus.vue';
+	import SelfFeed from './partials/SelfFeed.vue';
+	import SelfDiscover from './partials/SelfDiscover.vue';
+	import SelfGroups from './partials/SelfGroups.vue';
+	import SelfNotifications from './partials/SelfNotifications.vue';
+	import SelfInvitations from './partials/SelfInvitations.vue';
+	import SelfRemoteSearch from './partials/SelfRemoteSearch.vue';
+	import CreateGroup from './CreateGroup.vue';
+	import Autocomplete from '@trevoreyre/autocomplete-vue'
+	import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+	export default {
+		data() {
+			return {
+				initialLoad: false,
+				config: {},
+				groups: [],
+				profile: {},
+				tab: null,
+				searchQuery: undefined,
+			};
+		},
+
+		components: {
+			'autocomplete-input': Autocomplete,
+			'group-status': GroupStatus,
+			'self-discover': SelfDiscover,
+			'self-groups': SelfGroups,
+			'self-feed': SelfFeed,
+			'self-notifications': SelfNotifications,
+			'self-invitations': SelfInvitations,
+			'self-remote-search': SelfRemoteSearch,
+			"create-group": CreateGroup
+		},
+
+		mounted() {
+			this.fetchConfig();
+		},
+
+		methods: {
+			init() {
+				document.querySelectorAll("footer").forEach(e => e.parentNode.removeChild(e));
+				document.querySelectorAll(".mobile-footer-spacer").forEach(e => e.parentNode.removeChild(e));
+				document.querySelectorAll(".mobile-footer").forEach(e => e.parentNode.removeChild(e));
+				// let u = new URLSearchParams(window.location.search);
+				// if(u.has('ct')) {
+				// 	if(['mygroups', 'notifications', 'discover', 'remotesearch', 'creategroup', 'gsearch'].includes(u.get('ct'))) {
+				// 		if(u.get('ct') == 'creategroup' && this.config.limits.user.create.new == false) {
+				// 			this.tab = 'feed';
+				// 			history.pushState(null, null, '/groups/feed');
+				// 		} else {
+				// 			this.tab = u.get('ct');
+				// 		}
+				// 	} else {
+				// 		this.tab = 'feed';
+				// 		history.pushState(null, null, '/groups/feed');
+				// 	}
+				// } else {
+				// 	this.tab = 'feed';
+				// }
+				this.initialLoad = true;
+			},
+
+			fetchConfig() {
+				axios.get('/api/v0/groups/config')
+				.then(res => {
+					this.config = res.data;
+					this.fetchProfile();
+				});
+			},
+
+			fetchProfile() {
+				axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+				.then(res => {
+					this.profile = res.data;
+					this.init();
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
+				})
+			},
+
+			fetchSelfGroups() {
+				axios.get('/api/v0/groups/self/list')
+				.then(res => {
+					this.groups = res.data;
+				});
+			},
+
+			switchTab(tab) {
+				event.currentTarget.blur();
+				window.scrollTo(0,0);
+				this.tab = tab;
+
+				if(tab != 'feed') {
+					history.pushState(null, null, '/groups/home?ct=' + tab);
+				} else {
+					history.pushState(null, null, '/groups/home');
+				}
+			},
+
+			autocompleteSearch(input) {
+				if (!input || input.length < 2) {
+					if(this.tab = 'searchresults') {
+						this.tab = 'feed';
+					}
+					return [];
+				};
+
+				this.searchQuery = input;
+				// this.tab = 'searchresults';
+
+				if(input.startsWith('http')) {
+					let url = new URL(input);
+					if(url.hostname == location.hostname) {
+						location.href = input;
+						return [];
+					}
+					return [];
+				}
+
+				if(input.startsWith('#')) {
+					this.$bvToast.toast(input, {
+						title: 'Hashtag detected',
+						variant: 'info',
+						autoHideDelay: 5000
+					});
+					return [];
+				}
+
+				return axios.post('/api/v0/groups/search/global', {
+					q: input,
+					v: '0.2'
+				})
+				.then(res => {
+					this.searchLoading = false;
+					return res.data;
+				}).catch(err => {
+
+					if(err.response.status === 422) {
+						this.$bvToast.toast(err.response.data.error.message, {
+							title: 'Cannot display search results',
+							variant: 'danger',
+							autoHideDelay: 5000
+						});
+					}
+
+					return [];
+				})
+			},
+
+			getSearchResultValue(result) {
+				return result.name;
+			},
+
+			onSearchSubmit(result) {
+				if (result.length < 1) {
+					return [];
+				}
+
+				location.href = result.url;
+			},
+
+			truncateName(val) {
+				if(val.length < 24) {
+					return val;
+				}
+
+				return val.substr(0, 23) + '...';
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.groups-home-component {
+        font-family: var(--font-family-sans-serif);
+
+		.group-nav-btn {
+			display: block;
+			width: 100%;
+			padding-left: 0;
+			padding-top: 0.3rem;
+			padding-bottom: 0.3rem;
+			margin-bottom: 0.3rem;
+			border-radius: 1.5rem;
+			text-align: left;
+			color: #6c757d;
+			background-color: transparent;
+			border-color: transparent;
+			justify-content: flex-start;
+
+			&.active {
+				background-color: #EFF6FF !important;
+				border:1px solid #DBEAFE !important;
+				color: #212529;
+
+				.group-nav-btn-icon {
+					background-color: #2c78bf !important;
+					color: #fff !important;
+				}
+			}
+
+			&-icon {
+				display: inline-flex;
+				width: 35px;
+				height: 35px;
+				padding: 12px;
+				background-color: #E5E7EB;
+				border-radius: 17px;
+				margin: auto 0.3rem;
+				align-items: center;
+				justify-content: center;
+			}
+
+			&-name {
+				display: inline-block;
+				margin-left: 0.3rem;
+				font-weight: 700;
+			}
+		}
+
+		.autocomplete-input {
+			height: 2.375rem;
+			background-color: #f8f9fa !important;
+			font-size: 0.9rem;
+			color: #495057;
+			border-radius: 50rem;
+			border-color: transparent;
+
+			&:focus,
+			&[aria-expanded=true] {
+				box-shadow: none;
+			}
+		}
+
+		.autocomplete-result {
+			background: none;
+			padding: 12px;
+
+			&:hover,
+			&:focus {
+				background-color: #EFF6FF !important;
+			}
+
+			.media {
+				img {
+					object-fit: cover;
+					border-radius: 4px;
+					margin-right: 0.6rem;
+				}
+
+				.icon-placeholder {
+					display: flex;
+					width: 32px;
+					height: 32px;
+					background-color: #2c78bf;
+					border-radius: 4px;
+					justify-content: center;
+					align-items: center;
+					color: #fff;
+					margin-right: 0.6rem;
+				}
+			}
+		}
+
+		.autocomplete-result-list {
+			padding-bottom: 0;
+		}
+
+		.fade-enter-active, .fade-leave-active {
+			transition: opacity 200ms;
+		}
+
+		.fade-enter, .fade-leave-to {
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/Page/GroupAbout.vue b/resources/assets/components/groups/Page/GroupAbout.vue
new file mode 100644
index 000000000..8285a3db2
--- /dev/null
+++ b/resources/assets/components/groups/Page/GroupAbout.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="group-feed-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <div class="bg-white mb-3 border-bottom">
+                    <div>
+                        <group-banner :group="group" />
+                        <group-header-details
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            @refresh="handleRefresh"
+                        />
+                        <group-nav-tabs
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            :atabs="atabs"
+                        />
+                    </div>
+                </div>
+
+                <div v-if="!initialLoad">
+                    <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+                </div>
+
+                <template v-else>
+                    <div class="container-xl group-feed-component-body">
+                        <template v-if="initialLoad && group.self.is_member">
+                            <group-about :key="renderIdx" :group="group" :profile="profile" />
+                        </template>
+
+                        <member-only-warning v-else />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import StatusCard from '~/partials/StatusCard.vue';
+    import GroupMembers from '@/groups/partials/GroupMembers.vue';
+    import GroupCompose from '@/groups/partials/GroupCompose.vue';
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import GroupAbout from '@/groups/partials/GroupAbout.vue';
+    import GroupMedia from '@/groups/partials/GroupMedia.vue';
+    import GroupModeration from '@/groups/partials/GroupModeration.vue';
+    import GroupTopics from '@/groups/partials/GroupTopics.vue';
+    import GroupInfoCard from '@/groups/partials/GroupInfoCard.vue';
+    import LeaveGroup from '@/groups/partials/LeaveGroup.vue';
+    import GroupInsights from '@/groups/partials/GroupInsights.vue';
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    import InviteModal from '@/groups/partials/GroupInviteModal.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+    import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue';
+    import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue';
+    import MemberOnlyWarning from '@/groups/partials/Membership/MemberOnlyWarning.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            }
+        },
+
+        components: {
+            'status-card': StatusCard,
+            'group-about': GroupAbout,
+            'group-status': GroupStatus,
+            'group-members': GroupMembers,
+            'group-compose': GroupCompose,
+            'group-topics': GroupTopics,
+            'group-info-card': GroupInfoCard,
+            'group-media': GroupMedia,
+            'group-moderation': GroupModeration,
+            'leave-group': LeaveGroup,
+            'group-insights': GroupInsights,
+            'search-modal': SearchModal,
+            'invite-modal': InviteModal,
+            'sidebar': SidebarComponent,
+            'group-banner': GroupBanner,
+            'group-header-details': GroupHeaderDetails,
+            'group-nav-tabs': GroupNavTabs,
+            'member-only-warning': MemberOnlyWarning
+        },
+
+        data() {
+            return {
+                initialLoad: false,
+                profile: undefined,
+                group: {},
+                isMember: false,
+                isAdmin: false,
+                renderIdx: 1,
+                atabs: {
+                    moderation_count: 0,
+                    request_count: 0
+                }
+            };
+        },
+
+        created() {
+            this.init();
+        },
+
+        methods: {
+            init() {
+                this.initialLoad = false;
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.fetchGroup();
+                })
+                .catch(err => {
+                    window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+                });
+            },
+
+            handleRefresh() {
+                this.initialLoad = false;
+                this.init();
+                this.renderIdx++;
+            },
+
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.groupId)
+                .then(res => {
+                    this.group = res.data;
+                    this.isMember = res.data.self.is_member;
+                    this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+                    if(this.isAdmin) {
+                        this.fetchAdminTabs();
+                    }
+
+                    this.initialLoad = true;
+                })
+                .catch(err => {
+                    //window.location.href = '/groups/unavailable';
+                    alert('error');
+                });
+            },
+
+            fetchAdminTabs() {
+                axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+                .then(res => {
+                    this.atabs = res.data;
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-body {
+            min-height: 40vh;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/Page/GroupMedia.vue b/resources/assets/components/groups/Page/GroupMedia.vue
new file mode 100644
index 000000000..b2d098ac8
--- /dev/null
+++ b/resources/assets/components/groups/Page/GroupMedia.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="group-feed-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <div class="bg-white mb-3 border-bottom">
+                    <div>
+                        <group-banner :group="group" />
+                        <group-header-details
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            @refresh="handleRefresh"
+                        />
+                        <group-nav-tabs
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            :atabs="atabs"
+                        />
+                    </div>
+                </div>
+
+                <div v-if="!initialLoad">
+                    <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+                </div>
+
+                <template v-else>
+                    <div class="container-xl group-feed-component-body">
+                        <template v-if="initialLoad && group.self.is_member">
+                            <group-media :key="renderIdx" :group="group" :profile="profile" />
+                        </template>
+
+                        <member-only-warning v-else />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import StatusCard from '~/partials/StatusCard.vue';
+    import GroupMembers from '@/groups/partials/GroupMembers.vue';
+    import GroupCompose from '@/groups/partials/GroupCompose.vue';
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import GroupAbout from '@/groups/partials/GroupAbout.vue';
+    import GroupMedia from '@/groups/partials/GroupMedia.vue';
+    import GroupModeration from '@/groups/partials/GroupModeration.vue';
+    import GroupTopics from '@/groups/partials/GroupTopics.vue';
+    import GroupInfoCard from '@/groups/partials/GroupInfoCard.vue';
+    import LeaveGroup from '@/groups/partials/LeaveGroup.vue';
+    import GroupInsights from '@/groups/partials/GroupInsights.vue';
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    import InviteModal from '@/groups/partials/GroupInviteModal.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+    import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue';
+    import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue';
+    import MemberOnlyWarning from '@/groups/partials/Membership/MemberOnlyWarning.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            }
+        },
+
+        components: {
+            'status-card': StatusCard,
+            'group-about': GroupAbout,
+            'group-status': GroupStatus,
+            'group-members': GroupMembers,
+            'group-compose': GroupCompose,
+            'group-topics': GroupTopics,
+            'group-info-card': GroupInfoCard,
+            'group-media': GroupMedia,
+            'group-moderation': GroupModeration,
+            'leave-group': LeaveGroup,
+            'group-insights': GroupInsights,
+            'search-modal': SearchModal,
+            'invite-modal': InviteModal,
+            'sidebar': SidebarComponent,
+            'group-banner': GroupBanner,
+            'group-header-details': GroupHeaderDetails,
+            'group-nav-tabs': GroupNavTabs,
+            'member-only-warning': MemberOnlyWarning
+        },
+
+        data() {
+            return {
+                initialLoad: false,
+                profile: undefined,
+                group: {},
+                isMember: false,
+                isAdmin: false,
+                renderIdx: 1,
+                atabs: {
+                    moderation_count: 0,
+                    request_count: 0
+                }
+            };
+        },
+
+        created() {
+            this.init();
+        },
+
+        methods: {
+            init() {
+                this.initialLoad = false;
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.fetchGroup();
+                })
+                .catch(err => {
+                    window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+                });
+            },
+
+            handleRefresh() {
+                this.initialLoad = false;
+                this.init();
+                this.renderIdx++;
+            },
+
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.groupId)
+                .then(res => {
+                    this.group = res.data;
+                    this.isMember = res.data.self.is_member;
+                    this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+                    if(this.isAdmin) {
+                        this.fetchAdminTabs();
+                    }
+
+                    this.initialLoad = true;
+                })
+                .catch(err => {
+                    //window.location.href = '/groups/unavailable';
+                    alert('error');
+                });
+            },
+
+            fetchAdminTabs() {
+                axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+                .then(res => {
+                    this.atabs = res.data;
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-body {
+            min-height: 40vh;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/Page/GroupMembers.vue b/resources/assets/components/groups/Page/GroupMembers.vue
new file mode 100644
index 000000000..5b866fc17
--- /dev/null
+++ b/resources/assets/components/groups/Page/GroupMembers.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="group-feed-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <div class="bg-white mb-3 border-bottom">
+                    <div>
+                        <group-banner :group="group" />
+                        <group-header-details
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            @refresh="handleRefresh"
+                        />
+                        <group-nav-tabs
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            :atabs="atabs"
+                        />
+                    </div>
+                </div>
+
+                <div v-if="!initialLoad">
+                    <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+                </div>
+
+                <template v-else>
+                    <div class="container-xl group-feed-component-body">
+                        <template v-if="initialLoad && group.self.is_member">
+                            <group-members :key="renderIdx" :group="group" :profile="profile" />
+                        </template>
+
+                        <member-only-warning v-else />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import StatusCard from '~/partials/StatusCard.vue';
+    import GroupMembers from '@/groups/partials/GroupMembers.vue';
+    import GroupCompose from '@/groups/partials/GroupCompose.vue';
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import GroupAbout from '@/groups/partials/GroupAbout.vue';
+    import GroupMedia from '@/groups/partials/GroupMedia.vue';
+    import GroupModeration from '@/groups/partials/GroupModeration.vue';
+    import GroupTopics from '@/groups/partials/GroupTopics.vue';
+    import GroupInfoCard from '@/groups/partials/GroupInfoCard.vue';
+    import LeaveGroup from '@/groups/partials/LeaveGroup.vue';
+    import GroupInsights from '@/groups/partials/GroupInsights.vue';
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    import InviteModal from '@/groups/partials/GroupInviteModal.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+    import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue';
+    import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue';
+    import MemberOnlyWarning from '@/groups/partials/Membership/MemberOnlyWarning.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            }
+        },
+
+        components: {
+            'status-card': StatusCard,
+            'group-about': GroupAbout,
+            'group-status': GroupStatus,
+            'group-members': GroupMembers,
+            'group-compose': GroupCompose,
+            'group-topics': GroupTopics,
+            'group-info-card': GroupInfoCard,
+            'group-media': GroupMedia,
+            'group-moderation': GroupModeration,
+            'leave-group': LeaveGroup,
+            'group-insights': GroupInsights,
+            'search-modal': SearchModal,
+            'invite-modal': InviteModal,
+            'sidebar': SidebarComponent,
+            'group-banner': GroupBanner,
+            'group-header-details': GroupHeaderDetails,
+            'group-nav-tabs': GroupNavTabs,
+            'member-only-warning': MemberOnlyWarning
+        },
+
+        data() {
+            return {
+                initialLoad: false,
+                profile: undefined,
+                group: {},
+                isMember: false,
+                isAdmin: false,
+                renderIdx: 1,
+                atabs: {
+                    moderation_count: 0,
+                    request_count: 0
+                }
+            };
+        },
+
+        created() {
+            this.init();
+        },
+
+        methods: {
+            init() {
+                this.initialLoad = false;
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.fetchGroup();
+                })
+                .catch(err => {
+                    window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+                });
+            },
+
+            handleRefresh() {
+                this.initialLoad = false;
+                this.init();
+                this.renderIdx++;
+            },
+
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.groupId)
+                .then(res => {
+                    this.group = res.data;
+                    this.isMember = res.data.self.is_member;
+                    this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+                    if(this.isAdmin) {
+                        this.fetchAdminTabs();
+                    }
+
+                    this.initialLoad = true;
+                })
+                .catch(err => {
+                    //window.location.href = '/groups/unavailable';
+                    alert('error');
+                });
+            },
+
+            fetchAdminTabs() {
+                axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+                .then(res => {
+                    this.atabs = res.data;
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-body {
+            min-height: 40vh;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/Page/GroupTopics.vue b/resources/assets/components/groups/Page/GroupTopics.vue
new file mode 100644
index 000000000..60f0fa496
--- /dev/null
+++ b/resources/assets/components/groups/Page/GroupTopics.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="group-feed-component">
+        <div class="row border-bottom m-0 p-0">
+            <sidebar />
+
+            <div class="col-12 col-md-9 px-md-0">
+                <div class="bg-white mb-3 border-bottom">
+                    <div>
+                        <group-banner :group="group" />
+                        <group-header-details
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            @refresh="handleRefresh"
+                        />
+                        <group-nav-tabs
+                            :group="group"
+                            :isAdmin="isAdmin"
+                            :isMember="isMember"
+                            :atabs="atabs"
+                        />
+                    </div>
+                </div>
+
+                <div v-if="!initialLoad">
+                    <p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+                </div>
+
+                <template v-else>
+                    <div class="container-xl group-feed-component-body">
+                        <template v-if="initialLoad && group.self.is_member">
+                            <group-topics :key="renderIdx" :group="group" :profile="profile" />
+                        </template>
+
+                        <member-only-warning v-else />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+    import StatusCard from '~/partials/StatusCard.vue';
+    import GroupMembers from '@/groups/partials/GroupMembers.vue';
+    import GroupCompose from '@/groups/partials/GroupCompose.vue';
+    import GroupStatus from '@/groups/partials/GroupStatus.vue';
+    import GroupAbout from '@/groups/partials/GroupAbout.vue';
+    import GroupMedia from '@/groups/partials/GroupMedia.vue';
+    import GroupModeration from '@/groups/partials/GroupModeration.vue';
+    import GroupTopics from '@/groups/partials/GroupTopics.vue';
+    import GroupInfoCard from '@/groups/partials/GroupInfoCard.vue';
+    import LeaveGroup from '@/groups/partials/LeaveGroup.vue';
+    import GroupInsights from '@/groups/partials/GroupInsights.vue';
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    import InviteModal from '@/groups/partials/GroupInviteModal.vue';
+    import SidebarComponent from '@/groups/sections/Sidebar.vue';
+    import GroupBanner from '@/groups/partials/Page/GroupBanner.vue';
+    import GroupHeaderDetails from '@/groups/partials/Page/GroupHeaderDetails.vue';
+    import GroupNavTabs from '@/groups/partials/Page/GroupNavTabs.vue';
+    import MemberOnlyWarning from '@/groups/partials/Membership/MemberOnlyWarning.vue';
+
+    export default {
+        props: {
+            groupId: {
+                type: String
+            },
+
+            path: {
+                type: String
+            }
+        },
+
+        components: {
+            'status-card': StatusCard,
+            'group-about': GroupAbout,
+            'group-status': GroupStatus,
+            'group-members': GroupMembers,
+            'group-compose': GroupCompose,
+            'group-topics': GroupTopics,
+            'group-info-card': GroupInfoCard,
+            'group-media': GroupMedia,
+            'group-moderation': GroupModeration,
+            'leave-group': LeaveGroup,
+            'group-insights': GroupInsights,
+            'search-modal': SearchModal,
+            'invite-modal': InviteModal,
+            'sidebar': SidebarComponent,
+            'group-banner': GroupBanner,
+            'group-header-details': GroupHeaderDetails,
+            'group-nav-tabs': GroupNavTabs,
+            'member-only-warning': MemberOnlyWarning
+        },
+
+        data() {
+            return {
+                initialLoad: false,
+                profile: undefined,
+                group: {},
+                isMember: false,
+                isAdmin: false,
+                renderIdx: 1,
+                atabs: {
+                    moderation_count: 0,
+                    request_count: 0
+                }
+            };
+        },
+
+        created() {
+            this.init();
+        },
+
+        methods: {
+            init() {
+                this.initialLoad = false;
+                axios.get('/api/pixelfed/v1/accounts/verify_credentials')
+                .then(res => {
+                    this.profile = res.data;
+                    this.fetchGroup();
+                })
+                .catch(err => {
+                    window.location.href = '/login?_next=' + encodeURIComponent(window.location.href);
+                });
+            },
+
+            handleRefresh() {
+                this.initialLoad = false;
+                this.init();
+                this.renderIdx++;
+            },
+
+            fetchGroup() {
+                axios.get('/api/v0/groups/' + this.groupId)
+                .then(res => {
+                    this.group = res.data;
+                    this.isMember = res.data.self.is_member;
+                    this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
+
+                    if(this.isAdmin) {
+                        this.fetchAdminTabs();
+                    }
+
+                    this.initialLoad = true;
+                })
+                .catch(err => {
+                    //window.location.href = '/groups/unavailable';
+                    alert('error');
+                });
+            },
+
+            fetchAdminTabs() {
+                axios.get('/api/v0/groups/' + this.groupId + '/atabs')
+                .then(res => {
+                    this.atabs = res.data;
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-body {
+            min-height: 40vh;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/CommentDrawer.vue b/resources/assets/components/groups/partials/CommentDrawer.vue
new file mode 100644
index 000000000..cd6631df3
--- /dev/null
+++ b/resources/assets/components/groups/partials/CommentDrawer.vue
@@ -0,0 +1,841 @@
+<template>
+	<div class="comment-drawer-component">
+		<input type="file" ref="fileInput" class="d-none" accept="image/jpeg,image/png" @change="handleImageUpload">
+		<div v-if="hide"></div>
+		<div v-else-if="!isLoaded" class="border-top d-flex justify-content-center py-3">
+			<div class="text-center">
+				<div
+					class="spinner-border text-lighter"
+					role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+				<p class="text-muted">Loading Comments ...</p>
+			</div>
+		</div>
+		<div v-else class="border-top">
+			<!-- <div v-if="profile && canReply" class="my-3">
+				<div class="d-flex align-items-top reply-form">
+					<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38">
+					<div v-if="isUploading" class="w-100">
+						<p class="font-weight-light mb-1">Uploading image ...</p>
+						<div class="progress rounded-pill" style="height:4px">
+							<div class="progress-bar" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
+						</div>
+					</div>
+					<div v-else class="reply-form-input">
+						<input
+							class="form-control bg-light border-lighter rounded-pill"
+							placeholder="Write a comment...."
+							v-model="replyContent"
+							v-on:keyup.enter="storeComment">
+
+						<div class="reply-form-input-actions">
+							<button
+								class="btn btn-link text-muted px-1 mr-2"
+								@click="uploadImage">
+								<i class="far fa-image fa-lg"></i>
+							</button>
+							<button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
+								GIF
+							</button>
+						</div>
+					</div>
+				</div>
+			</div> -->
+			<div class="my-3">
+				<div
+					v-for="(status, index) in feed"
+					:key="'cdf' + index + status.id"
+					class="media media-status align-items-top">
+
+					<a
+						v-if="replyChildId == status.id"
+						href="#comment-1"
+						class="comment-border-link"
+						@click.prevent="replyToChild(status)">
+						<span class="sr-only">Jump to comment-{{ index }}</span>
+					</a>
+
+					<a :href="status.account.url">
+						<img class="rounded-circle media-avatar border" :src="status.account.avatar" width="32" height="32" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" />
+					</a>
+
+					<div class="media-body">
+						<div v-if="!status.media_attachments.length" class="media-body-comment">
+							<p class="media-body-comment-username">
+								<a :href="status.account.url">
+									{{status.account.acct}}
+								</a>
+							</p>
+							<read-more :status="status" />
+						</div>
+						<div v-else>
+							<p class="media-body-comment-username">
+								<a :href="status.account.url">
+									{{status.account.acct}}
+								</a>
+							</p>
+							<div class="bh-comment" @click="lightbox(status)">
+								<blur-hash-image
+									:width="blurhashWidth(status)"
+									:height="blurhashHeight(status)"
+									:punch="1"
+									class="img-fluid rounded-lg border shadow"
+									:hash="status.media_attachments[0].blurhash"
+									:src="getMediaSource(status)" />
+							</div>
+						</div>
+						<p class="media-body-reactions">
+							<a
+								v-if="profile"
+								href="#"
+								class="font-weight-bold"
+								:class="[ status.favourited ? 'text-primary' : 'text-muted' ]"
+								@click.prevent="likeComment(status, index, $event)">
+									{{ status.favourited ? 'Liked' : 'Like' }}
+								</a>
+							<span class="mx-1">·</span>
+							<a href="#" class="text-muted font-weight-bold" @click.prevent="replyToChild(status, index)">Reply</a>
+							<span v-if="profile" class="mx-1">·</span>
+							<a
+								class="font-weight-bold text-muted"
+								:href="status.url"
+								v-once>
+								{{ shortTimestamp(status.created_at) }}
+							</a>
+							<span v-if="profile && status.account.id === profile.id">
+								<span class="mx-1">·</span>
+								<a
+									class="font-weight-bold text-lighter"
+									href="#"
+									@click.prevent="deleteComment(index)">
+										Delete
+									</a>
+							</span>
+						</p>
+
+						<!-- <div v-if="replyChildId == status.id && status.reply_count" class="media media-status align-items-top mt-3">
+							<div class="comment-border-arrow"></div>
+							<a href="https://pixelfed.test/groups/328821658771132416/user/321493203255693312"><img src="https://pixelfed.test/storage/avatars/321493203255693312/5a6nqo.jpg?v=2" width="32" height="32" class="rounded-circle media-avatar border"></a>
+							<div class="media-body"><div class="media-body-comment"><p class="media-body-comment-username"><a href="https://pixelfed.test/groups/328821658771132416/user/321493203255693312">
+								dansup
+							</a></p> <div class="read-more-component" style="word-break: break-all;"><div>test</div></div></div> <p class="media-body-reactions"><a href="#" class="font-weight-bold text-muted">
+								Like
+							</a> <span class="mx-1">·</span> <a href="https://pixelfed.test/groups/328821658771132416/p/358529382599041029" class="font-weight-bold text-muted">
+							1h
+						</a> <span><span class="mx-1">·</span> <a href="#" class="font-weight-bold text-lighter">
+									Delete
+								</a></span></p>
+							</div>
+						</div> -->
+
+						<div v-if="replyChildIndex == index && status.hasOwnProperty('children') && status.children.hasOwnProperty('feed') && status.children.feed.length">
+							<comment-post
+								v-for="(s, index) in status.children.feed"
+								:status="s"
+								:profile="profile"
+								:commentBorderArrow="true"
+								:key="'scp_'+index+'_'+s.id"
+								/>
+						</div>
+
+						<a
+							v-if="replyChildIndex == index &&
+								status.hasOwnProperty('children') &&
+								status.children.hasOwnProperty('can_load_more') &&
+								status.children.can_load_more == true"
+							class="text-muted font-weight-bold mt-1 mb-0"
+							style="font-size: 13px;"
+							href="#"
+							:disabled="loadingChildComments"
+							@click.prevent="loadMoreChildComments(status, index)">
+							<div class="comment-border-arrow"></div>
+							<i class="far fa-long-arrow-right mr-1"></i>
+							{{ loadingChildComments ? 'Loading' : 'Load' }} more comments
+						</a>
+
+						<a
+							v-else-if="replyChildIndex !== index &&
+								status.hasOwnProperty('children') &&
+								status.children.hasOwnProperty('can_load_more') &&
+								status.children.can_load_more == true &&
+								status.reply_count > 0 &&
+								!loadingChildComments"
+							class="text-muted font-weight-bold mt-1 mb-0"
+							style="font-size: 13px;"
+							href="#"
+							:disabled="loadingChildComments"
+							@click.prevent="replyToChild(status, index)">
+							<i class="far fa-long-arrow-right mr-1"></i>
+							{{ loadingChildComments ? 'Loading' : 'Load' }} more comments
+						</a>
+
+						<div v-if="replyChildId == status.id" class="mt-3 mb-3 d-flex align-items-top reply-form child-reply-form">
+							<div class="comment-border-arrow"></div>
+							<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+							<div v-if="isUploading" class="w-100">
+								<p class="font-weight-light mb-1">Uploading image ...</p>
+								<div class="progress rounded-pill" style="height:10px">
+									<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
+								</div>
+							</div>
+							<div v-else class="reply-form-input">
+								<input
+									class="form-control bg-light border-lighter rounded-pill"
+									placeholder="Write a comment...."
+									v-model="childReplyContent"
+									:disabled="postingChildComment"
+									v-on:keyup.enter="storeChildComment(index)">
+
+								<!-- <div class="reply-form-input-actions">
+									<button
+										class="btn btn-link text-muted px-1 mr-2"
+										@click="uploadImage">
+										<i class="far fa-image fa-lg"></i>
+									</button>
+									<button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
+										GIF
+									</button>
+								</div> -->
+							</div>
+						</div>
+					</div>
+
+				</div>
+				<!-- <a v-if="permalinkMode && canLoadMore" class="text-muted mb-n1" style="font-size: 13px;font-weight: 600;" href="#">Load more comments ...</a> -->
+			</div>
+			<button
+				v-if="canLoadMore"
+				class="btn btn-link btn-sm text-muted mb-2"
+				@click="loadMoreComments"
+				:disabled="isLoadingMore">
+
+				<span v-if="!isLoadingMore">
+					Load more comments ...
+				</span>
+				<div
+					v-else
+					class="spinner-border spinner-border-sm text-muted"
+					role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</button>
+
+			<div v-if="profile && canReply" class="mt-3 mb-n3">
+				<div class="d-flex align-items-top reply-form cdrawer-reply-form">
+					<img class="rounded-circle mr-2 border" :src="avatar" width="38" height="38" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+					<div v-if="isUploading" class="w-100">
+						<p class="font-weight-light small text-muted mb-1">Uploading image ...</p>
+						<div class="progress rounded-pill" style="height:10px">
+							<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
+						</div>
+					</div>
+					<div v-else class="w-100">
+                        <div class="reply-form-input">
+                            <textarea
+                                class="form-control bg-light border-lighter"
+                                placeholder="Write a comment...."
+                                :rows="replyContent && replyContent.length > 40 ? 4 : 1"
+                                v-model="replyContent"></textarea>
+
+    						<div class="reply-form-input-actions">
+    							<button
+    								class="btn btn-link text-muted px-1 mr-2"
+    								@click="uploadImage">
+    								<i class="far fa-image fa-lg"></i>
+    							</button>
+    							<!-- <button class="btn btn-link text-muted px-1 small font-weight-bold border py-0 rounded-pill text-decoration-none">
+    								GIF
+    							</button> -->
+    						</div>
+                        </div>
+                        <div class="d-flex justify-content-between reply-form-menu">
+                            <div class="char-counter">
+                                <span>{{ replyContent?.length ?? 0 }}</span>
+                                <span>/</span>
+                                <span>500</span>
+                            </div>
+
+                        </div>
+					</div>
+                    <button
+                        class="btn btn-link btn-sm font-weight-bold align-self-center ml-3 mb-3"
+                        @click="storeComment">Post</button>
+				</div>
+			</div>
+		</div>
+
+		<b-modal ref="lightboxModal"
+			id="lightbox"
+			:hide-header="true"
+			:hide-footer="true"
+			centered
+			size="lg"
+			body-class="p-0"
+			content-class="bg-transparent border-0"
+			>
+			<div v-if="lightboxStatus" @click="hideLightbox">
+				<img :src="lightboxStatus.url" style="width: 100%;max-height: 90vh;object-fit: contain;">
+			</div>
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import ReadMore from './ReadMore.vue';
+	import CommentPost from './CommentPost.vue';
+
+	export default {
+		props: {
+			groupId: {
+				type: String
+			},
+
+			profile: {
+				type: Object
+			},
+
+			status: {
+				type: Object
+			},
+
+			show: {
+				type: Boolean,
+				default: false
+			},
+
+			permalinkMode: {
+				type: Boolean,
+				default: false
+			},
+
+			permalinkStatus: {
+				type: Object
+			},
+
+			canReply: {
+				type: Boolean,
+				default: true
+			}
+		},
+
+		components: {
+			"read-more": ReadMore,
+			"comment-post": CommentPost
+		},
+
+		data() {
+			return {
+				isLoaded: false,
+				hide: false,
+				feed: [],
+				canLoadMore: false,
+				isLoadingMore: false,
+				replyContent: null,
+				maxReplyId: null,
+				readMoreCursor: 200,
+				avatar: '/storage/avatars/default.png',
+				isUploading: false,
+				uploadProgress: 0,
+				lightboxStatus: null,
+				replyChildId: undefined,
+				replyChildIndex: undefined,
+				childReplyContent: null,
+				postingChildComment: false,
+				loadingChildComments: false,
+				replyChildMinId: undefined
+			}
+		},
+
+		mounted() {
+			if(this.permalinkMode && this.permalinkStatus) {
+				let status = this.permalinkStatus;
+				if(status.reply_count) {
+					status.children = {
+						feed: [],
+						can_load_more: true
+					}
+				}
+				this.feed.push(status);
+				this.isLoaded = true;
+				this.canLoadMore = false;
+			} else {
+				this.fetchComments();
+			}
+
+			if(this.profile && this.profile.hasOwnProperty('avatar')) {
+				this.avatar = this.profile.avatar;
+			}
+		},
+
+		methods: {
+			fetchComments() {
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: this.status.id,
+						limit: 3
+					}
+				}).then(res => {
+					let data = res.data.map(function(c) {
+						if(c.reply_count && c.reply_count > 0) {
+							c.children = {
+								feed: [],
+								can_load_more: true
+							}
+						}
+						return c;
+					})
+					this.feed = data;
+					this.isLoaded = true;
+					this.maxReplyId = res.data[(res.data.length - 1)].id;
+					if(this.feed.length == 3) {
+						this.canLoadMore = true;
+					} else {
+					}
+				}).catch(err => {
+					this.isLoaded = true;
+				})
+			},
+
+			loadMoreComments() {
+				this.isLoadingMore = true;
+
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: this.status.id,
+						limit: 3,
+						max_id: this.maxReplyId
+					}
+				}).then(res => {
+					if(res.data[res.data.length - 1].id == this.maxReplyId) {
+						this.isLoadingMore = false;
+						this.canLoadMore = false;
+						return;
+					}
+					this.feed.push(...res.data);
+                    setTimeout(() => {
+					   this.isLoadingMore = false;
+                    }, 500);
+					this.maxReplyId = res.data[res.data.length - 1].id;
+					if(res.data.length > 0) {
+						this.canLoadMore = true;
+					} else {
+						this.canLoadMore = false;
+					}
+				}).catch(err => {
+					this.isLoadingMore = false;
+					this.canLoadMore = false;
+				})
+			},
+
+			storeComment($event) {
+                $event.currentTarget?.blur();
+				axios.post('/api/v0/groups/comment', {
+					gid: this.groupId,
+					sid: this.status.id,
+					content: this.replyContent
+				})
+				.then(res => {
+					this.replyContent = null;
+					this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				})
+			},
+
+			shortTimestamp(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+
+			readMore() {
+				this.readMoreCursor = this.readMoreCursor + 200;
+			},
+
+			likeComment(status, index, $event) {
+				$event.target.blur();
+				let l = status.favourited ? false : true;
+				this.feed[index].favourited = l;
+				status.favourited = l;
+				axios.post(`/api/v0/groups/comment/${l ? 'like' : 'unlike'}`, {
+					sid: status.id,
+					gid: this.groupId
+				});
+			},
+
+			deleteComment(index) {
+				if(window.confirm('Are you sure you want to delete this post?') == false) {
+					return;
+				}
+
+				axios.post('/api/v0/groups/comment/delete', {
+					gid: this.groupId,
+					id: this.feed[index].id
+				}).then(res => {
+					this.feed.splice(index, 1);
+				}).catch(err => {
+					console.log(err.response);
+					swal('Error', 'Something went wrong. Please try again later.', 'error');
+				});
+			},
+
+			uploadImage() {
+				this.$refs.fileInput.click();
+			},
+
+			handleImageUpload() {
+				if(!this.$refs.fileInput.files.length) {
+					return;
+				}
+				this.isUploading = true;
+				let self = this;
+				let data = new FormData();
+				data.append('gid', this.groupId);
+				data.append('sid', this.status.id);
+				data.append('photo', this.$refs.fileInput.files[0]);
+
+				axios.post('/api/v0/groups/comment/photo', data, {
+					onUploadProgress: function(progressEvent) {
+						self.uploadProgress = Math.floor(progressEvent.loaded / progressEvent.total * 100);
+					}
+				})
+				.then(res => {
+					this.isUploading = false;
+					this.uploadProgress = 0;
+					this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				});
+			},
+
+			lightbox(status) {
+				this.lightboxStatus = status.media_attachments[0];
+				this.$refs.lightboxModal.show();
+			},
+
+			hideLightbox() {
+				this.lightboxStatus = null;
+				this.$refs.lightboxModal.hide();
+			},
+
+			blurhashWidth(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 30;
+				} else {
+					return 20;
+				}
+			},
+
+			blurhashHeight(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 20;
+				} else {
+					return 30;
+				}
+			},
+
+			getMediaSource(status) {
+				let media = status.media_attachments[0];
+
+				if(media.preview_url.endsWith('storage/no-preview.png')) {
+					return media.url;
+				}
+
+				return media.preview_url;
+			},
+
+			replyToChild(status, index) {
+
+				if(this.replyChildId == status.id) {
+					this.replyChildId = null;
+					this.replyChildIndex = null;
+					return;
+				} else {
+					this.childReplyContent = null;
+				}
+
+				this.replyChildId = status.id;
+				this.replyChildIndex = index;
+
+				if(!status.hasOwnProperty('replies_loaded') || !status.replies_loaded) {
+					this.$nextTick(() => {
+						this.fetchChildReplies(status, index);
+					});
+				} else {
+
+				}
+			},
+
+			fetchChildReplies(status, index) {
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: status.id,
+						cid: 1,
+						limit: 3
+					}
+				}).then(res => {
+					if(this.feed[index].hasOwnProperty('children')) {
+						this.feed[index].children.feed.push(res.data);
+						this.feed[index].children.can_load_more = res.data.length == 3;
+					} else {
+						this.feed[index].children = {
+							feed: res.data,
+							can_load_more: res.data.length == 3
+						}
+					}
+					this.replyChildMinId = res.data[res.data.length - 1].id;
+					this.$nextTick(() => {
+						this.feed[index].replies_loaded = true;
+					});
+				}).catch(err => {
+					this.feed[index].children.can_load_more = false;
+				})
+			},
+
+			storeChildComment(index) {
+				this.postingChildComment = true;
+
+				axios.post('/api/v0/groups/comment', {
+					gid: this.groupId,
+					sid: this.status.id,
+					cid: this.replyChildId,
+					content: this.childReplyContent
+				})
+				.then(res => {
+					this.childReplyContent = null;
+					this.postingChildComment = false;
+					this.feed[index].children.feed.push(res.data);
+					// this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						// this.isUploading = false;
+						// this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						// this.isUploading = false;
+						// this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				});
+			},
+
+			loadMoreChildComments(status, index) {
+				this.loadingChildComments = true;
+
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: status.id,
+						max_id: this.replyChildMinId,
+						cid: 1,
+						limit: 3
+					}
+				}).then(res => {
+					if(this.feed[index].hasOwnProperty('children')) {
+						this.feed[index].children.feed.push(...res.data);
+						this.feed[index].children.can_load_more = res.data.length == 3;
+					} else {
+						this.feed[index].children = {
+							feed: res.data,
+							can_load_more: res.data.length == 3
+						}
+					}
+					this.replyChildMinId = res.data[res.data.length - 1].id;
+					this.feed[index].replies_loaded = true;
+					this.loadingChildComments = false;
+				}).catch(err => {
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.comment-drawer-component {
+		.media {
+			position: relative;
+
+			.comment-border-link {
+				display: block;
+				position: absolute;
+				top: 40px;
+				left: 11px;
+				width: 10px;
+				height: calc(100% - 100px);
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				background-color: #E5E7EB;
+				background-clip: padding-box;
+
+				&:hover {
+					background-color: #BFDBFE;
+				}
+			}
+
+			.child-reply-form {
+				position: relative;
+			}
+
+			.comment-border-arrow {
+				display: block;
+				position: absolute;
+				top: -6px;
+				left: -33px;
+				width: 10px;
+				height: 29px;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				background-color: #E5E7EB;
+				background-clip: padding-box;
+				border-bottom: 2px solid transparent;
+
+				&:after {
+					content: '';
+					display: block;
+					position: absolute;
+					top: 25px;
+					left: 2px;
+					width: 15px;
+					height: 2px;
+					background-color: #E5E7EB;
+				}
+			}
+
+			&-status {
+				margin-bottom: 1.3rem;
+			}
+
+			&-avatar {
+				margin-right: 12px;
+			}
+
+			&-body {
+				&-comment {
+					width: fit-content;
+					padding: 0.4rem 0.7rem;
+					background-color: var(--comment-bg);
+					border-radius: 0.9rem;
+
+					&-username {
+						margin-bottom: 0.25rem !important;
+						font-size: 14px;
+						font-weight: 700 !important;
+						color: #000;
+
+						a {
+							color: #000;
+							text-decoration: none;
+						}
+					}
+
+					&-content {
+						margin-bottom: 0;
+						font-size: 16px;
+					}
+				}
+
+				&-reactions {
+					margin-top: 0.25rem !important;
+					margin-bottom: 0 !important;
+					color: #B8C2CC !important;
+					font-size: 12px;
+				}
+			}
+		}
+
+		.load-more-comments {
+			font-weight: 500;
+		}
+
+		.reply-form {
+			margin-bottom: 2rem;
+
+			&-input {
+				flex: 1;
+				position: relative;
+
+                textarea {
+                    border-radius: 10px;
+                }
+
+                .form-control {
+                    resize: none;
+                    padding-right: 100px;
+                }
+
+				&-actions {
+					position: absolute;
+					right: 10px;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+
+            .btn {
+                text-decoration: none;
+            }
+
+            &-menu {
+                margin-top: 5px;
+
+                .char-counter {
+                    color: var(--muted);
+                    font-size: 10px;
+                }
+            }
+
+		}
+
+		.bh-comment {
+			width: 100%;
+			height: auto;
+			max-width: 160px !important;
+			max-height: 260px !important;
+
+			span {
+				width: 100%;
+				height: auto;
+				max-width: 160px !important;
+				max-height: 260px !important;
+			}
+
+			img {
+				width: 100%;
+				height: auto;
+				max-width: 160px !important;
+				max-height: 260px !important;
+				object-fit: cover;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/CommentPost.vue b/resources/assets/components/groups/partials/CommentPost.vue
new file mode 100644
index 000000000..4b448f913
--- /dev/null
+++ b/resources/assets/components/groups/partials/CommentPost.vue
@@ -0,0 +1,405 @@
+<template>
+	<div class="comment-post-component">
+		<div class="media media-status align-items-top mt-3">
+			<div v-if="commentBorderArrow" class="comment-border-arrow"></div>
+			<!-- <a
+				v-if="replyChildId == status.id"
+				href="#comment-1"
+				class="comment-border-link"
+				@click.prevent="replyToChild(status)">
+				<span class="sr-only">Jump to comment-{{ index }}</span>
+			</a> -->
+
+			<a :href="status.account.url">
+				<img class="rounded-circle media-avatar border" :src="status.account.avatar" width="32" height="32" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+			</a>
+
+			<div class="media-body">
+				<div v-if="!status.media_attachments.length" class="media-body-comment">
+					<p class="media-body-comment-username">
+						<a :href="status.account.url">
+							{{status.account.acct}}
+						</a>
+					</p>
+					<read-more :status="status" />
+				</div>
+				<div v-else>
+					<p class="media-body-comment-username">
+						<a :href="status.account.url">
+							{{status.account.acct}}
+						</a>
+					</p>
+					<div class="bh-comment" @click="lightbox(status)">
+						<blur-hash-image
+							:width="blurhashWidth(status)"
+							:height="blurhashHeight(status)"
+							:punch="1"
+							class="img-fluid rounded-lg border shadow"
+							:hash="status.media_attachments[0].blurhash"
+							:src="getMediaSource(status)" />
+					</div>
+				</div>
+				<p class="media-body-reactions">
+					<a
+						v-if="profile"
+						href="#"
+						class="font-weight-bold"
+						:class="[ status.favourited ? 'text-primary' : 'text-muted' ]"
+						@click.prevent="likeComment(status, index, $event)">
+							{{ status.favourited ? 'Liked' : 'Like' }}
+						</a>
+					<!-- <span class="mx-1">·</span> -->
+					<!-- <a href="#" class="text-muted font-weight-bold" @click.prevent="replyToChild(status, index)">Reply</a> -->
+					<span v-if="profile" class="mx-1">·</span>
+					<a
+						class="font-weight-bold text-muted"
+						:href="status.url"
+						v-once>
+						{{ shortTimestamp(status.created_at) }}
+					</a>
+					<span v-if="profile && status.account.id === profile.id">
+						<span class="mx-1">·</span>
+						<a
+							class="font-weight-bold text-lighter"
+							href="#"
+							@click.prevent="deleteComment(index)">
+								Delete
+							</a>
+					</span>
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import ReadMore from './ReadMore.vue';
+
+	export default {
+		props: {
+			groupId: {
+				type: String
+			},
+
+			profile: {
+				type: Object
+			},
+
+			status: {
+				type: Object,
+			},
+
+			commentBorderArrow: {
+				type: Boolean,
+				default: false
+			}
+		},
+
+
+		components: {
+			"read-more": ReadMore
+		},
+
+		data() {
+			return {
+				isLoaded: false,
+				hide: false,
+				feed: [],
+				canLoadMore: false,
+				isLoadingMore: false,
+				replyContent: null,
+				maxReplyId: null,
+				readMoreCursor: 200,
+				avatar: '/storage/avatars/default.png',
+				isUploading: false,
+				uploadProgress: 0,
+				lightboxStatus: null,
+				replyChildId: undefined,
+				childReplyContent: null,
+				postingChildComment: false
+			}
+		},
+
+		mounted() {
+			console.log(this.status);
+			// if(this.permalinkMode && this.permalinkStatus) {
+			// 	this.feed.push(this.permalinkStatus);
+			// 	this.isLoaded = true;
+			// 	this.canLoadMore = false;
+			// } else {
+			// 	this.fetchComments();
+			// }
+
+			// if(this.profile && this.profile.hasOwnProperty('avatar')) {
+			// 	this.avatar = this.profile.avatar;
+			// }
+		},
+
+		methods: {
+			fetchComments() {
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: this.status.id,
+						limit: 3
+					}
+				}).then(res => {
+					this.feed = res.data;
+					this.isLoaded = true;
+					this.maxReplyId = res.data[(res.data.length - 1)].id;
+					if(this.feed.length == 3) {
+						this.canLoadMore = true;
+					}
+				}).catch(err => {
+					this.isLoaded = true;
+				})
+			},
+
+			loadMoreComments() {
+				this.isLoadingMore = true;
+
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: this.status.id,
+						limit: 3,
+						max_id: this.maxReplyId
+					}
+				}).then(res => {
+					if(res.data[res.data.length - 1].id == this.maxReplyId) {
+						this.isLoadingMore = false;
+						this.canLoadMore = false;
+						return;
+					}
+					this.feed.push(...res.data);
+					this.isLoadingMore = false;
+					this.maxReplyId = res.data[res.data.length - 1].id;
+					if(res.data.length > 0) {
+						this.canLoadMore = true;
+					} else {
+						this.canLoadMore = false;
+					}
+				}).catch(err => {
+					this.isLoadingMore = false;
+					this.canLoadMore = false;
+				})
+			},
+
+			storeComment() {
+				axios.post('/api/v0/groups/comment', {
+					gid: this.groupId,
+					sid: this.status.id,
+					content: this.replyContent
+				})
+				.then(res => {
+					this.replyContent = null;
+					this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				})
+			},
+
+			shortTimestamp(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+
+			readMore() {
+				this.readMoreCursor = this.readMoreCursor + 200;
+			},
+
+			likeComment(status, index, $event) {
+				$event.target.blur();
+				let l = status.favourited ? false : true;
+				this.feed[index].favourited = l;
+				status.favourited = l;
+				axios.post('/api/v0/groups/like', {
+					sid: status.id,
+					gid: this.groupId
+				});
+			},
+
+			deleteComment(index) {
+				if(window.confirm('Are you sure you want to delete this post?') == false) {
+					return;
+				}
+
+				axios.post('/api/v0/groups/status/delete', {
+					gid: this.groupId,
+					id: this.feed[index].id
+				}).then(res => {
+					this.feed.splice(index, 1);
+				}).catch(err => {
+					console.log(err.response);
+					swal('Error', 'Something went wrong. Please try again later.', 'error');
+				});
+			},
+
+			uploadImage() {
+				this.$refs.fileInput.click();
+			},
+
+			handleImageUpload() {
+				if(!this.$refs.fileInput.files.length) {
+					return;
+				}
+				this.isUploading = true;
+				let self = this;
+				let data = new FormData();
+				data.append('gid', this.groupId);
+				data.append('sid', this.status.id);
+				data.append('photo', this.$refs.fileInput.files[0]);
+
+				axios.post('/api/v0/groups/comment/photo', data, {
+					onUploadProgress: function(progressEvent) {
+						self.uploadProgress = Math.floor(progressEvent.loaded / progressEvent.total * 100);
+					}
+				})
+				.then(res => {
+					this.isUploading = false;
+					this.uploadProgress = 0;
+					this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				});
+			},
+
+			lightbox(status) {
+				this.lightboxStatus = status.media_attachments[0];
+				this.$refs.lightboxModal.show();
+			},
+
+			hideLightbox() {
+				this.lightboxStatus = null;
+				this.$refs.lightboxModal.hide();
+			},
+
+			blurhashWidth(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 30;
+				} else {
+					return 20;
+				}
+			},
+
+			blurhashHeight(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 20;
+				} else {
+					return 30;
+				}
+			},
+
+			getMediaSource(status) {
+				let media = status.media_attachments[0];
+
+				if(media.preview_url.endsWith('storage/no-preview.png')) {
+					return media.url;
+				}
+
+				return media.preview_url;
+			},
+
+			replyToChild(status, index) {
+				if(this.replyChildId == status.id) {
+					this.replyChildId = null;
+					return;
+				} else {
+					this.childReplyContent = null;
+				}
+
+				this.replyChildId = status.id;
+
+				if(!status.hasOwnProperty('replies_loaded') || !status.replies_loaded) {
+					this.fetchChildReplies(status, index);
+				} else {
+
+				}
+			},
+
+			fetchChildReplies(status, index) {
+				axios.get('/api/v0/groups/comments', {
+					params: {
+						gid: this.groupId,
+						sid: status.id,
+						cid: 1,
+						limit: 3
+					}
+				}).then(res => {
+					if(this.feed[index].hasOwnProperty('children')) {
+						this.feed[index].children.feed.push(...res.data);
+						this.feed[index].children.can_load_more = res.data.length == 3;
+					} else {
+						this.feed[index].children = {
+							feed: res.data,
+							can_load_more: res.data.length == 3
+						}
+					}
+					this.feed[index].replies_loaded = true;
+				}).catch(err => {
+				})
+			},
+
+			storeChildComment() {
+				this.postingChildComment = true;
+
+				axios.post('/api/v0/groups/comment', {
+					gid: this.groupId,
+					sid: this.status.id,
+					cid: this.replyChildId,
+					content: this.childReplyContent
+				})
+				.then(res => {
+					this.childReplyContent = null;
+					this.postingChildComment = false;
+					// this.feed.unshift(res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						// this.isUploading = false;
+						// this.uploadProgress = 0;
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						// this.isUploading = false;
+						// this.uploadProgress = 0;
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				});
+
+				console.log(this.replyChildId);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.comment-post-component {
+
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/ContextMenu.vue b/resources/assets/components/groups/partials/ContextMenu.vue
new file mode 100644
index 000000000..52fad0e74
--- /dev/null
+++ b/resources/assets/components/groups/partials/ContextMenu.vue
@@ -0,0 +1,692 @@
+<template>
+	<div class="context-menu-component modal-stack">
+		<b-modal ref="ctxModal"
+			id="ctx-modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<div class="list-group text-center">
+				<!-- <div v-if="status && status.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
+				<div v-if="status && status.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div> -->
+				<div v-if="status.visibility !== 'archived'" class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">View Post</div>
+				<!-- <div v-if="status.visibility !== 'archived'" class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToProfile()">View Profile</div> -->
+				<!-- <div v-if="status && status.local == true && !status.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div> -->
+				<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
+				<!-- <div v-if="status.visibility !== 'archived'" class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div> -->
+				<!-- <div v-if="status && profile && profile.is_admin == true && status.visibility !== 'archived'" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div> -->
+				<div v-if="status && status.account.id != profile.id" class="list-group-item rounded cursor-pointer text-danger" @click="ctxMenuReportPost()">Report</div>
+				<div v-if="status && (profile.is_admin || profile.id == status.account.id) && status.visibility !== 'archived'" class="list-group-item rounded cursor-pointer text-danger" @click="deletePost(status)">Delete</div>
+				<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxModModal"
+			id="ctx-mod-modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<div class="list-group text-center">
+				<p class="py-2 px-3 mb-0">
+					<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
+					<div class="small text-center text-muted">Select one of the following options</div>
+				</p>
+				<div class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'unlist')">Unlist from Timelines</div>
+				<div v-if="status.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'remcw')">Remove Content Warning</div>
+				<div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'addcw')">Add Content Warning</div>
+				<div class="list-group-item rounded cursor-pointer" @click="moderatePost(status, 'spammer')">
+					Mark as Spammer<br />
+					<span class="small">Unlist + CW existing and future posts</span>
+				</div>
+				<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxModOtherMenuShow()">Other</div> -->
+				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxModOtherModal"
+			id="ctx-mod-other-modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<div class="list-group text-center">
+				<p class="py-2 px-3 mb-0">
+					<div class="text-center font-weight-bold text-danger">Moderation Tools</div>
+					<div class="small text-center text-muted">Select one of the following options</div>
+				</p>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Unlist Posts</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="confirmModal()">Moderation Log</div>
+				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModOtherMenuClose()">Cancel</div>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxShareModal"
+			id="ctx-share-modal"
+			title="Share"
+			hide-footer
+			hide-header
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded text-center">
+			<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
+			<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
+		</b-modal>
+		<b-modal ref="ctxEmbedModal"
+			id="ctx-embed-modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="md"
+			body-class="p-2 rounded">
+			<div>
+				<div class="form-group">
+					<textarea class="form-control disabled text-monospace" rows="8" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
+				</div>
+				<div class="form-group pl-2 d-flex justify-content-center">
+					<div class="form-check mr-3">
+						<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowCaption" :disabled="ctxEmbedCompactMode == true">
+						<label class="form-check-label font-weight-light">
+							Show Caption
+						</label>
+					</div>
+					<div class="form-check mr-3">
+						<input class="form-check-input" type="checkbox" v-model="ctxEmbedShowLikes" :disabled="ctxEmbedCompactMode == true">
+						<label class="form-check-label font-weight-light">
+							Show Likes
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" v-model="ctxEmbedCompactMode">
+						<label class="form-check-label font-weight-light">
+							Compact Mode
+						</label>
+					</div>
+				</div>
+				<hr>
+				<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
+				<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxReport"
+			id="ctx-report"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<p class="py-2 px-3 mb-0">
+				<div class="text-center font-weight-bold text-danger">Report</div>
+				<div class="small text-center text-muted">Select one of the following options</div>
+			</p>
+			<div class="list-group text-center">
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
+				<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
+				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxReportOther"
+			id="ctx-report-other"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<p class="py-2 px-3 mb-0">
+				<div class="text-center font-weight-bold text-danger">Report</div>
+				<div class="small text-center text-muted">Select one of the following options</div>
+			</p>
+			<div class="list-group text-center">
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
+				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
+				<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
+				<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
+				<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
+				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
+			</div>
+		</b-modal>
+		<b-modal ref="ctxConfirm"
+			id="ctx-confirm"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			size="sm"
+			body-class="list-group-flush p-0 rounded">
+			<div class="d-flex align-items-center justify-content-center py-3">
+				<div>{{ this.confirmModalTitle }}</div>
+			</div>
+			<div class="d-flex border-top btn-group btn-group-block rounded-0" role="group">
+				<button type="button" class="btn btn-outline-lighter border-left-0 border-top-0 border-bottom-0 border-right py-2" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalCancel()">Cancel</button>
+				<button type="button" class="btn btn-outline-lighter border-0" style="color: rgb(0,122,255) !important;" @click.prevent="confirmModalConfirm()">Confirm</button>
+			</div>
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			status: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			},
+
+			type: {
+				type: String,
+				default: 'status',
+				validator: (val) => ['status', 'comment', 'profile'].includes(val)
+			},
+
+			groupId: {
+				type: String
+			}
+		},
+
+		data() {
+			return {
+				ctxMenuStatus: false,
+				ctxMenuRelationship: false,
+				ctxEmbedPayload: false,
+				copiedEmbed: false,
+				replySending: false,
+				ctxEmbedShowCaption: true,
+				ctxEmbedShowLikes: false,
+				ctxEmbedCompactMode: false,
+				confirmModalTitle: 'Are you sure?',
+				confirmModalIdentifer: null,
+				confirmModalType: false,
+			}
+		},
+
+		methods: {
+			open() {
+				this.ctxMenu();
+			},
+
+			ctxMenu() {
+				this.ctxMenuStatus = this.status;
+				this.ctxEmbedPayload = window.App.util.embed.post(this.status.url);
+				if(this.status.account.id == this.profile.id) {
+					this.ctxMenuRelationship = false;
+					this.$refs.ctxModal.show();
+				} else {
+					axios.get('/api/pixelfed/v1/accounts/relationships', {
+						params: {
+							'id[]': this.status.account.id
+						}
+					}).then(res => {
+						this.ctxMenuRelationship = res.data[0];
+						this.$refs.ctxModal.show();
+					});
+				}
+			},
+
+			closeCtxMenu() {
+				this.copiedEmbed = false;
+				this.ctxMenuStatus = false;
+				this.ctxMenuRelationship = false;
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxReportOther.hide();
+				this.closeModals();
+			},
+
+			ctxMenuCopyLink() {
+				let status = this.ctxMenuStatus;
+				navigator.clipboard.writeText(status.url);
+				this.closeModals();
+				return;
+			},
+
+			ctxMenuGoToPost() {
+				let status = this.ctxMenuStatus;
+				window.location.href = this.statusUrl(status);
+				this.closeCtxMenu();
+				return;
+			},
+
+			ctxMenuGoToProfile() {
+				let status = this.ctxMenuStatus;
+				window.location.href = this.profileUrl(status);
+				this.closeCtxMenu();
+				return;
+			},
+
+			ctxMenuFollow() {
+				let id = this.ctxMenuStatus.account.id;
+				axios.post('/i/follow', {
+					item: id
+				}).then(res => {
+					let username = this.ctxMenuStatus.account.acct;
+					this.closeCtxMenu();
+					setTimeout(function() {
+						swal('Follow successful!', 'You are now following ' + username, 'success');
+					}, 500);
+				});
+			},
+
+			ctxMenuUnfollow() {
+				let id = this.ctxMenuStatus.account.id;
+				axios.post('/i/follow', {
+					item: id
+				}).then(res => {
+					let username = this.ctxMenuStatus.account.acct;
+					if(this.scope == 'home') {
+						this.feed = this.feed.filter(s => {
+							return s.account.id != this.ctxMenuStatus.account.id;
+						});
+					}
+					this.closeCtxMenu();
+					setTimeout(function() {
+						swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
+					}, 500);
+				});
+			},
+
+			ctxMenuReportPost() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.show();
+				return;
+			},
+
+			ctxMenuEmbed() {
+				this.closeModals();
+				this.$refs.ctxEmbedModal.show();
+			},
+
+			ctxMenuShare() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxShareModal.show();
+			},
+
+			closeCtxShareMenu() {
+				this.$refs.ctxShareModal.hide();
+				this.$refs.ctxModal.show();
+			},
+
+			ctxCopyEmbed() {
+				navigator.clipboard.writeText(this.ctxEmbedPayload);
+				this.ctxEmbedShowCaption = true;
+				this.ctxEmbedShowLikes = false;
+				this.ctxEmbedCompactMode = false;
+				this.$refs.ctxEmbedModal.hide();
+			},
+
+			ctxModMenuShow() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxModModal.show();
+			},
+
+			ctxModOtherMenuShow() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxModModal.hide();
+				this.$refs.ctxModOtherModal.show();
+			},
+
+			ctxModMenu() {
+				this.$refs.ctxModal.hide();
+			},
+
+			ctxModMenuClose() {
+				this.closeModals();
+			},
+
+			ctxModOtherMenuClose() {
+				this.closeModals();
+				this.$refs.ctxModModal.show();
+			},
+
+			formatCount(count) {
+				return App.util.format.count(count);
+			},
+
+			openCtxReportOtherMenu() {
+				let s = this.ctxMenuStatus;
+				this.closeCtxMenu();
+				this.ctxMenuStatus = s;
+				this.$refs.ctxReportOther.show();
+			},
+
+			ctxReportMenuGoBack() {
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxModal.show();
+			},
+
+			ctxReportOtherMenuGoBack() {
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxReport.show();
+			},
+
+			sendReport(type) {
+				let id = this.ctxMenuStatus.id;
+
+				swal({
+					'title': 'Confirm Report',
+					'text': 'Are you sure you want to report this post?',
+					'icon': 'warning',
+					'buttons': true,
+					'dangerMode': true
+				}).then((res) => {
+					if(res) {
+						axios.post(`/api/v0/groups/${this.groupId}/report/create`, {
+							'type': type,
+							'id': id,
+						}).then(res => {
+							this.closeCtxMenu();
+							swal('Report Sent!', 'We have successfully received your report.', 'success');
+						}).catch(err => {
+							if(err.response.status == 422) {
+								swal('Oops!', err.response.data.error, 'error');
+							} else {
+								swal('Oops!', 'There was an issue reporting this post.', 'error');
+							}
+						})
+					} else {
+						this.closeCtxMenu();
+					}
+				});
+			},
+
+			closeModals() {
+				this.$refs.ctxModal.hide();
+				this.$refs.ctxModModal.hide();
+				this.$refs.ctxModOtherModal.hide();
+				this.$refs.ctxShareModal.hide();
+				this.$refs.ctxEmbedModal.hide();
+				this.$refs.ctxReport.hide();
+				this.$refs.ctxReportOther.hide();
+				this.$refs.ctxConfirm.hide();
+			},
+
+			openCtxStatusModal() {
+				this.closeModals();
+				this.$refs.ctxStatusModal.show();
+			},
+
+			openConfirmModal() {
+				this.closeModals();
+				this.$refs.ctxConfirm.show();
+			},
+
+			closeConfirmModal() {
+				this.closeModals();
+				this.confirmModalTitle = 'Are you sure?';
+				this.confirmModalType = false;
+				this.confirmModalIdentifer = null;
+			},
+
+			confirmModalConfirm() {
+				switch(this.confirmModalType) {
+					case 'post.delete':
+						axios.post('/i/delete', {
+							type: 'status',
+							item: this.confirmModalIdentifer
+						}).then(res => {
+							this.feed = this.feed.filter(s => {
+								return s.id != this.confirmModalIdentifer;
+							});
+							this.closeConfirmModal();
+						}).catch(err => {
+							this.closeConfirmModal();
+							swal('Error', 'Something went wrong. Please try again later.', 'error');
+						});
+					break;
+				}
+
+				this.closeConfirmModal();
+			},
+
+			confirmModalCancel() {
+				this.closeConfirmModal();
+			},
+
+			moderatePost(status, action, $event) {
+				let username = status.account.username;
+				let pid = status.id;
+				let msg = '';
+				let self = this;
+				switch(action) {
+					case 'addcw':
+						msg = 'Are you sure you want to add a content warning to this post?';
+						swal({
+							title: 'Confirm',
+							text: msg,
+							icon: 'warning',
+							buttons: true,
+							dangerMode: true
+						}).then(res =>  {
+							if(res) {
+								axios.post('/api/v2/moderator/action', {
+									action: action,
+									item_id: status.id,
+									item_type: 'status'
+								}).then(res => {
+									swal('Success', 'Successfully added content warning', 'success');
+									status.sensitive = true;
+									self.closeModals();
+									self.ctxModMenuClose();
+								}).catch(err => {
+									swal(
+										'Error',
+										'Something went wrong, please try again later.',
+										'error'
+										);
+									self.closeModals();
+									self.ctxModMenuClose();
+								});
+							}
+						});
+					break;
+
+					case 'remcw':
+						msg = 'Are you sure you want to remove the content warning on this post?';
+						swal({
+							title: 'Confirm',
+							text: msg,
+							icon: 'warning',
+							buttons: true,
+							dangerMode: true
+						}).then(res =>  {
+							if(res) {
+								axios.post('/api/v2/moderator/action', {
+									action: action,
+									item_id: status.id,
+									item_type: 'status'
+								}).then(res => {
+									swal('Success', 'Successfully added content warning', 'success');
+									status.sensitive = false;
+									self.closeModals();
+									self.ctxModMenuClose();
+								}).catch(err => {
+									swal(
+										'Error',
+										'Something went wrong, please try again later.',
+										'error'
+										);
+									self.closeModals();
+									self.ctxModMenuClose();
+								});
+							}
+						});
+					break;
+
+					case 'unlist':
+						msg = 'Are you sure you want to unlist this post?';
+						swal({
+							title: 'Confirm',
+							text: msg,
+							icon: 'warning',
+							buttons: true,
+							dangerMode: true
+						}).then(res =>  {
+							if(res) {
+								axios.post('/api/v2/moderator/action', {
+									action: action,
+									item_id: status.id,
+									item_type: 'status'
+								}).then(res => {
+									this.feed = this.feed.filter(f => {
+										return f.id != status.id;
+									});
+									swal('Success', 'Successfully unlisted post', 'success');
+									self.closeModals();
+									self.ctxModMenuClose();
+								}).catch(err => {
+									self.closeModals();
+									self.ctxModMenuClose();
+									swal(
+										'Error',
+										'Something went wrong, please try again later.',
+										'error'
+										);
+								});
+							}
+						});
+					break;
+
+					case 'spammer':
+						msg = 'Are you sure you want to mark this user as a spammer? All existing and future posts will be unlisted on timelines and a content warning will be applied.';
+						swal({
+							title: 'Confirm',
+							text: msg,
+							icon: 'warning',
+							buttons: true,
+							dangerMode: true
+						}).then(res =>  {
+							if(res) {
+								axios.post('/api/v2/moderator/action', {
+									action: action,
+									item_id: status.id,
+									item_type: 'status'
+								}).then(res => {
+									swal('Success', 'Successfully marked account as spammer', 'success');
+									self.closeModals();
+									self.ctxModMenuClose();
+								}).catch(err => {
+									self.closeModals();
+									self.ctxModMenuClose();
+									swal(
+										'Error',
+										'Something went wrong, please try again later.',
+										'error'
+										);
+								});
+							}
+						});
+					break;
+				}
+			},
+
+			shareStatus(status, $event) {
+				if($('body').hasClass('loggedIn') == false) {
+					return;
+				}
+
+				this.closeModals();
+
+				axios.post('/i/share', {
+					item: status.id
+				}).then(res => {
+					status.reblogs_count = res.data.count;
+					status.reblogged = !status.reblogged;
+					if(status.reblogged) {
+						swal('Success', 'You shared this post', 'success');
+					} else {
+						swal('Success', 'You unshared this post', 'success');
+					}
+				}).catch(err => {
+					swal('Error', 'Something went wrong, please try again later.', 'error');
+				});
+			},
+
+			statusUrl(status) {
+				if(status.local == true) {
+					return status.url;
+				}
+
+				return '/i/web/post/_/' + status.account.id + '/' + status.id;
+			},
+
+			profileUrl(status) {
+				if(status.local == true) {
+					return status.account.url;
+				}
+
+				return '/i/web/profile/_/' + status.account.id;
+			},
+
+			deletePost(status) {
+				if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
+					return;
+				}
+
+				if(window.confirm('Are you sure you want to delete this post?') == false) {
+					return;
+				}
+
+				axios.post('/i/delete', {
+					type: 'status',
+					item: status.id
+				}).then(res => {
+					this.$emit('status-delete', status.id);
+					this.closeModals();
+				}).catch(err => {
+					swal('Error', 'Something went wrong. Please try again later.', 'error');
+				});
+			},
+
+			owner(status) {
+				return this.profile.id === status.account.id;
+			},
+
+			admin() {
+				return this.profile.is_admin == true;
+			},
+
+			ownerOrAdmin(status) {
+				return this.owner(status) || this.admin();
+			},
+
+			archivePost(status) {
+				if(window.confirm('Are you sure you want to archive this post?') == false) {
+					return;
+				}
+
+				axios.post('/api/pixelfed/v2/status/' + status.id + '/archive')
+				.then(res => {
+					this.$emit('status-delete', status.id);
+					this.closeModals();
+				});
+			},
+
+			unarchivePost(status) {
+				if(window.confirm('Are you sure you want to unarchive this post?') == false) {
+					return;
+				}
+
+				axios.post('/api/pixelfed/v2/status/' + status.id + '/unarchive')
+				.then(res => {
+					this.closeModals();
+				});
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/CreateForm/CheckboxInput.vue b/resources/assets/components/groups/partials/CreateForm/CheckboxInput.vue
new file mode 100644
index 000000000..03fa8727a
--- /dev/null
+++ b/resources/assets/components/groups/partials/CreateForm/CheckboxInput.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="form-group row">
+        <div class="col-sm-3">
+            <label class="col-form-label text-left">{{ label }}</label>
+        </div>
+        <div class="col-sm-9">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" v-model="value">
+                <label
+                    class="form-check-label ml-1"
+                    :class="[ strongText ? 'font-weight-bold text-capitalize text-dark' : 'small text-muted' ]"
+                >
+                {{ inputText }}
+                </label>
+            </div>
+
+            <div
+                v-if="helpText"
+                class="help-text small text-muted d-flex flex-row justify-content-between gap-3">
+                <div v-if="helpText">{{ helpText }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            label: {
+                type: String
+            },
+            inputText: {
+                type: String
+            },
+            val: {
+                type: String
+            },
+            helpText: {
+                type: String
+            },
+            strongText: {
+                type: Boolean,
+                default: true
+            }
+        },
+
+        data() {
+            return {
+                value: this.val
+            }
+        },
+
+        watch: {
+            value: function(newVal, oldVal) {
+                this.$emit('update', newVal);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/partials/CreateForm/SelectInput.vue b/resources/assets/components/groups/partials/CreateForm/SelectInput.vue
new file mode 100644
index 000000000..304ce0c7d
--- /dev/null
+++ b/resources/assets/components/groups/partials/CreateForm/SelectInput.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="form-group row">
+        <div class="col-sm-3">
+            <label class="col-form-label text-left">{{ label }}</label>
+        </div>
+        <div class="col-sm-9">
+            <select class="custom-select" v-model="value">
+                <option value="" selected="" disabled="">{{ placeholder }}</option>
+                <option v-for="c in categories" :value="c.value">{{ c.key }}</option>
+            </select>
+
+            <div
+                v-if="helpText || hasLimit"
+                class="help-text small text-muted d-flex flex-row justify-content-between gap-3">
+                <div v-if="helpText">{{ helpText }}</div>
+                <div
+                    v-if="hasLimit"
+                    class="font-weight-bold text-dark">
+                    {{ value ? value.length : 0 }}/{{ maxLimit }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            label: {
+                type: String
+            },
+            placeholder: {
+                type: String
+            },
+            categories: {
+                type: Array
+            },
+            val: {
+                type: String
+            },
+            helpText: {
+                type: String
+            },
+            hasLimit: {
+                type: Boolean,
+                default: false
+            },
+            maxLimit: {
+                type: Number,
+                default: 40
+            },
+            largeInput: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        data() {
+            return {
+                value: this.val ? this.val : ""
+            }
+        },
+
+        watch: {
+            value: function(newVal, oldVal) {
+                this.$emit('update', newVal);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/partials/CreateForm/TextAreaInput.vue b/resources/assets/components/groups/partials/CreateForm/TextAreaInput.vue
new file mode 100644
index 000000000..e8977db3f
--- /dev/null
+++ b/resources/assets/components/groups/partials/CreateForm/TextAreaInput.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="form-group row">
+        <div class="col-sm-3">
+            <label class="col-form-label text-left">{{ label }}</label>
+        </div>
+        <div class="col-sm-9">
+            <textarea
+                v-if="hasLimit"
+                type="text"
+                class="form-control"
+                :class="{ 'form-control-lg': largeInput }"
+                style="resize:none;"
+                :placeholder="placeholder"
+                :maxlength="maxLimit"
+                :rows="rows"
+                v-model="value" />
+            <textarea
+                v-else
+                type="text"
+                class="form-control"
+                :class="{ 'form-control-lg': largeInput }"
+                style="resize:none;"
+                :placeholder="placeholder"
+                :rows="rows"
+                v-model="value" />
+
+            <div
+                v-if="helpText || hasLimit"
+                class="help-text small text-muted d-flex flex-row justify-content-between gap-3">
+                <div v-if="helpText">{{ helpText }}</div>
+                <div
+                    v-if="hasLimit"
+                    class="font-weight-bold text-dark">
+                    {{ value ? value.length : 0 }}/{{ maxLimit }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            label: {
+                type: String
+            },
+            placeholder: {
+                type: String
+            },
+            val: {
+                type: String
+            },
+            helpText: {
+                type: String
+            },
+            hasLimit: {
+                type: Boolean,
+                default: false
+            },
+            maxLimit: {
+                type: Number,
+                default: 40
+            },
+            largeInput: {
+                type: Boolean,
+                default: false
+            },
+            rows: {
+                type: Number,
+                default: 4
+            },
+        },
+
+        data() {
+            return {
+                value: this.val
+            }
+        },
+
+        watch: {
+            value: function(newVal, oldVal) {
+                this.$emit('update', newVal);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/partials/CreateForm/TextInput.vue b/resources/assets/components/groups/partials/CreateForm/TextInput.vue
new file mode 100644
index 000000000..82c0b3c86
--- /dev/null
+++ b/resources/assets/components/groups/partials/CreateForm/TextInput.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="form-group row">
+        <div class="col-sm-3">
+            <label class="col-form-label text-left">{{ label }}</label>
+        </div>
+        <div class="col-sm-9">
+            <input
+                v-if="hasLimit"
+                type="text"
+                class="form-control"
+                :class="{ 'form-control-lg': largeInput }"
+                :placeholder="placeholder"
+                :maxlength="maxLimit"
+                v-model="value">
+            <input
+                v-else
+                type="text"
+                class="form-control"
+                :class="{ 'form-control-lg': largeInput }"
+                :placeholder="placeholder"
+                v-model="value">
+
+            <div
+                v-if="helpText || hasLimit"
+                class="help-text small text-muted d-flex flex-row justify-content-between gap-3">
+                <div v-if="helpText">{{ helpText }}</div>
+                <div
+                    v-if="hasLimit"
+                    class="font-weight-bold text-dark">
+                    {{ value ? value.length : 0 }}/{{ maxLimit }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            label: {
+                type: String
+            },
+            placeholder: {
+                type: String
+            },
+            val: {
+                type: String
+            },
+            helpText: {
+                type: String
+            },
+            hasLimit: {
+                type: Boolean,
+                default: false
+            },
+            maxLimit: {
+                type: Number,
+                default: 40
+            },
+            largeInput: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        data() {
+            return {
+                value: this.val
+            }
+        },
+
+        watch: {
+            value: function(newVal, oldVal) {
+                this.$emit('update', newVal);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/partials/GroupAbout.vue b/resources/assets/components/groups/partials/GroupAbout.vue
new file mode 100644
index 000000000..7db87084e
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupAbout.vue
@@ -0,0 +1,134 @@
+<template>
+	<div class="group-about-component">
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-7">
+				<div class="card shadow-none border mt-3 rounded-lg">
+					<div class="card-header bg-white">
+						<h5 class="mb-0">About This Group</h5>
+					</div>
+					<div class="card-body">
+						<p v-if="group.description && group.description.length > 1" class="description" v-html="group.description"></p>
+						<p v-else class="description">This group does not have a description.</p>
+						<p class="mb-0 font-weight-light text-lighter">Created: {{ timestampFormat(group.created_at) }}</p>
+					</div>
+				</div>
+			</div>
+			<div class="col-12 col-md-5">
+				<div class="card card-body mt-3 shadow-none border rounded-lg">
+					<div v-if="group.membership == 'all'" class="fact">
+						<div class="fact-icon">
+							<i class="fal fa-globe fa-lg"></i>
+						</div>
+						<div class="fact-body">
+							<p class="fact-title">Public</p>
+							<p class="fact-subtitle">Anyone can see who's in the group and what they post.</p>
+						</div>
+					</div>
+
+					<div v-if="group.membership == 'private'" class="fact">
+						<div class="fact-icon">
+							<i class="fal fa-lock fa-lg"></i>
+						</div>
+						<div class="fact-body">
+							<p class="fact-title">Private</p>
+							<p class="fact-subtitle">Only members can see who's in the group and what they post.</p>
+						</div>
+					</div>
+
+					<div class="fact">
+						<div class="fact-icon">
+							<i class="fal fa-eye fa-lg"></i>
+						</div>
+						<div class="fact-body">
+							<p class="fact-title">Visible</p>
+							<p class="fact-subtitle">Anyone can find this group.</p>
+						</div>
+					</div>
+
+					<div class="fact">
+						<div class="fact-icon">
+							<i class="fal fa-map-marker-alt fa-lg"></i>
+						</div>
+						<div class="fact-body">
+							<p class="fact-title">Fediverse</p>
+							<p class="fact-subtitle">This group has not specified a location.</p>
+						</div>
+					</div>
+
+					<div class="fact mb-0">
+						<div class="fact-icon">
+							<i class="fal fa-users fa-lg"></i>
+						</div>
+						<div class="fact-body">
+							<p class="fact-title"">General</p>
+							<p class="fact-subtitle">This group has not specified a category.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		methods: {
+			timestampFormat(date, showTime = false) {
+				let ts = new Date(date);
+				return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.group-about-component {
+		margin-bottom: 50vh;
+
+		.title {
+			font-size: 16px;
+			font-weight: bold;
+		}
+
+		.description {
+			font-size: 15px;
+			font-weight:400;
+			color: #6c757d;
+			margin-bottom: 30px;
+			white-space: break-spaces;
+		}
+
+		.fact {
+			display: flex;
+			align-items: center;
+			margin-bottom: 1.5rem;
+
+			&-body {
+				flex: 1;
+			}
+
+			&-icon {
+				width: 50px;
+				text-align: center;
+			}
+
+			&-title {
+				font-size: 17px;
+				font-weight: 500;
+				margin-bottom: 0;
+			}
+
+			&-subtitle {
+				font-size: 14px;
+				margin-bottom: 0;
+				color: #6c757d;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupCard.vue b/resources/assets/components/groups/partials/GroupCard.vue
new file mode 100644
index 000000000..0a9dabfd6
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupCard.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="col-12 col-md-6 col-xl-4 group-card">
+        <div class="group-card-inner">
+            <img
+                v-if="group.metadata && group.metadata.hasOwnProperty('header')"
+                :src="group.metadata.header.url"
+                class="group-header-img" />
+
+            <div
+                v-else
+                class="group-header-img"
+                :class="{ compact: compact }">
+                <div
+                    class="bg-light d-flex align-items-center justify-content-center rounded"
+                    style="width: 100%; height:100%;">
+                </div>
+            </div>
+
+            <div class="group-card-inner-copy">
+                <p class="font-weight-bold mb-0 text-dark" style="font-size: 16px;">
+                    {{ truncate(group.name || 'Untitled Group', titleLength) }}
+                </p>
+
+                <p class="text-muted mb-1" style="font-size: 12px;">
+                    {{ truncate(group.short_description, descriptionLength) }}
+                </p>
+                <p v-if="showStats" class="mb-0 small text-lighter">
+                    <span>
+                        <i class="fal fa-users"></i>
+                        <span class="small font-weight-bold">{{ prettyCount(group.member_count) }}</span>
+                    </span>
+
+                    <span v-if="!group.local" class="remote-label ml-3">
+                        <i class="fal fa-globe"></i> Remote
+                    </span>
+                </p>
+            </div>
+
+            <div class="group-card-inner-foaf">
+            </div>
+
+            <div class="group-card-inner-cta">
+                <router-link :to="`/groups/${group.id}`" class="btn btn-light btn-block font-weight-bold">
+                    Join Group
+                </router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            group: {
+                type: Object
+            },
+
+            compact: {
+                type: Boolean,
+                default: false
+            },
+
+            showStats: {
+                type: Boolean,
+                default: true
+            },
+
+            truncateTitleLength: {
+                type: Number,
+                default: 19
+            },
+
+            truncateDescriptionLength: {
+                type: Number,
+                default: 22
+            }
+        },
+
+        data() {
+            return {
+                titleLength: 40,
+                descriptionLength: 60
+            }
+        },
+
+        mounted() {
+            if(this.compact) {
+                this.titleLength = 19;
+                this.descriptionLength = 22;
+            }
+
+            if(this.truncateTitleLength != 19) {
+                this.titleLength = this.truncateTitleLength;
+            }
+
+            if(this.truncateDescriptionLength != 22) {
+                this.descriptionLength = this.truncateDescriptionLength;
+            }
+        },
+
+        methods: {
+            prettyCount(val) {
+                return App.util.format.count(val);
+            },
+
+            truncate(str, limit = 140) {
+                if(str.length <= limit) {
+                    return str;
+                }
+
+                return str.substr(0, limit) + ' ...';
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .group-card {
+        margin-bottom: 15px;
+
+        &-inner {
+            display: flex;
+            flex-direction: column;
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            overflow: hidden;
+
+            &-copy {
+                background-color: var(--light);
+                padding: 1rem;
+            }
+
+            &-foaf {
+                background-color: var(--light);
+                height: 30px;
+            }
+
+            &-cta {
+                background-color: var(--light);
+                padding: 1rem;
+            }
+        }
+
+        .member-label {
+            padding: 2px 5px;
+            font-size: 9px;
+            color: rgba(75, 119, 190, 1);
+            background: rgba(137, 196, 244, 0.2);
+            border: 1px solid rgba(137, 196, 244, 0.3);
+            font-weight: 500;
+            text-transform: capitalize;
+            border-radius: 3px;
+        }
+
+        .remote-label {
+            padding: 2px 5px;
+            font-size: 9px;
+            color: #B45309;
+            background: #FEF3C7;
+            border: 1px solid #FCD34D;
+            font-weight: 500;
+            text-transform: capitalize;
+            border-radius: 3px;
+        }
+
+        .group-header-img {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+            padding: 0px;
+            overflow: hidden;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/GroupCompose.vue b/resources/assets/components/groups/partials/GroupCompose.vue
new file mode 100644
index 000000000..e40fda11a
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupCompose.vue
@@ -0,0 +1,345 @@
+<template>
+	<div class="group-compose-form">
+		<input ref="photoInput" id="photoInput" type="file" class="d-none file-input" accept="image/jpeg,image/png" @change="handlePhotoChange">
+		<input ref="videoInput" id="videoInput" type="file" class="d-none file-input" accept="video/mp4" @change="handleVideoChange">
+		<div class="card card-body border mb-3 shadow-sm rounded-lg">
+			<div class="media align-items-top">
+				<img v-if="profile" :src="profile.avatar" class="rounded-circle border mr-3" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
+				<div class="media-body">
+					<div class="d-block" style="min-height: 80px;">
+						<div v-if="isUploading" class="w-100">
+							<p class="font-weight-light mb-1">Uploading media ...</p>
+							<div class="progress rounded-pill" style="height:4px">
+								<div class="progress-bar" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100" :style="{ width: uploadProgress + '%'}"></div>
+							</div>
+						</div>
+						<div v-else class="form-group mb-3">
+							<textarea
+								class="form-control"
+								:class="{
+									'form-control-lg': !composeText || composeText.length < 40,
+									'rounded-pill': !composeText || composeText.length < 40,
+									'bg-light': !composeText || composeText.length < 40,
+									'border-0': !composeText || composeText.length < 40
+								}"
+								:rows="!composeText || composeText.length < 40 ? 1 : 5"
+								:placeholder="placeholder"
+								style="resize: none;"
+								v-model="composeText"
+								></textarea>
+
+							<div v-if="composeText" class="small text-muted mt-1" style="min-height: 20px;">
+								<span class="float-right font-weight-bold">
+									{{ composeText ? composeText.length : 0 }}/500
+								</span>
+							</div>
+						</div>
+					</div>
+					<div v-if="tab" class="tab">
+						<div v-if="tab === 'poll'">
+							<p class="font-weight-bold text-muted small">
+								Poll Options
+							</p>
+
+							<div v-if="pollOptions.length < 4" class="form-group mb-4">
+								<input type="text" class="form-control rounded-pill" placeholder="Add a poll option, press enter to save" v-model="pollOptionModel" @keyup.enter="savePollOption">
+							</div>
+
+							<div v-for="(option, index) in pollOptions" class="form-group mb-4 d-flex align-items-center" style="max-width:400px;position: relative;">
+								<span class="font-weight-bold mr-2" style="position: absolute;left: 10px;">{{ index + 1 }}.</span>
+								<input v-if="pollOptions[index].length < 50" type="text" class="form-control rounded-pill" placeholder="Add a poll option, press enter to save" v-model="pollOptions[index]" style="padding-left: 30px;padding-right: 90px;">
+								<textarea v-else class="form-control" v-model="pollOptions[index]" placeholder="Add a poll option, press enter to save" rows="3" style="padding-left: 30px;padding-right:90px;"></textarea>
+								<button class="btn btn-danger btn-sm rounded-pill font-weight-bold" style="position: absolute;right: 5px;" @click="deletePollOption(index)">
+									<i class="fas fa-trash"></i> Delete
+								</button>
+							</div>
+
+							<hr>
+
+							<div class="d-flex justify-content-between">
+								<div>
+									<p class="font-weight-bold text-muted small">
+										Poll Expiry
+									</p>
+
+									<div class="form-group">
+										<select class="form-control rounded-pill" style="width: 200px;" v-model="pollExpiry">
+											<option value="60">1 hour</option>
+											<option value="360">6 hours</option>
+											<option value="1440" selected>24 hours</option>
+											<option value="10080">7 days</option>
+										</select>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-if="!isUploading" class="">
+						<div>
+							<div v-if="photoName && photoName.length" class="bg-light rounded-pill mb-4 py-2">
+								<div class="media align-items-center">
+									<span style="width: 40px;height: 40px;border-radius:50px;opacity: 0.6;" class="d-flex align-items-center justify-content-center bg-primary mx-3">
+										<i class="fal fa-image fa-lg text-white"></i>
+									</span>
+									<div class="media-body">
+										<p class="mb-0 font-weight-bold text-muted">
+											{{ photoName }}
+										</p>
+									</div>
+									<button class="btn btn-link font-weight-bold text-decoration-none" @click.prevent="clearFileInputs">
+										Delete
+									</button>
+								</div>
+							</div>
+							<div v-if="videoName && videoName.length" class="bg-light rounded-pill mb-4 py-2">
+								<div class="media align-items-center">
+									<span style="width: 40px;height: 40px;border-radius:50px;opacity: 0.6;" class="d-flex align-items-center justify-content-center bg-primary mx-3">
+										<i class="fal fa-video fa-lg text-white"></i>
+									</span>
+									<div class="media-body">
+										<p class="mb-0 font-weight-bold text-muted">
+											{{ videoName }}
+										</p>
+									</div>
+									<button class="btn btn-link font-weight-bold text-decoration-none" @click.prevent="clearFileInputs">
+										Delete
+									</button>
+								</div>
+							</div>
+						</div>
+
+						<div>
+							<button
+								class="btn btn-light border font-weight-bold py-1 px-2 rounded-lg mr-3"
+								@click="switchTab('photo')"
+								:disabled="photoName || videoName">
+								<i class="fal fa-image mr-2"></i>
+								<span>Add Photo</span>
+							</button>
+							<!-- <button
+								class="btn btn-light border font-weight-bold py-1 px-2 rounded-lg mr-3"
+								@click="switchTab('video')"
+								:disabled="photoName || videoName">
+								<i class="fal fa-video mr-2"></i>
+								<span>Add Video</span>
+							</button>
+							<button
+								v-if="allowPolls"
+								:class="[ tab == 'poll' ? 'btn-primary' : 'btn-light' ]"
+								class="btn border font-weight-bold py-1 px-2 rounded-lg mr-3"
+								@click="switchTab('poll')"
+								:disabled="photoName || videoName">
+
+								<i class="fal fa-poll-h mr-2"></i>
+								<span>Add Poll</span>
+							</button> -->
+							<!-- <button v-if="allowEvent" class="btn btn-light border font-weight-bold py-1 px-2 rounded-lg">
+								<i class="fal fa-calendar-alt mr-1"></i>
+								<span>Create Event</span>
+							</button> -->
+						</div>
+					</div>
+				</div>
+			</div>
+			<p v-if="!isUploading && composeText && composeText.length > 1 || !isUploading && ['photo', 'video'].includes(tab)" class="mb-0">
+				<button class="btn btn-primary font-weight-bold float-right px-5 rounded-pill mt-3" @click="newPost()" :disabled="isPosting">
+					<span v-if="isPosting">
+						<div class="spinner-border text-white spinner-border-sm" role="status">
+							<span class="sr-only">Loading...</span>
+						</div>
+					</span>
+					<span v-else>Post</span>
+				</button>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			profile: {
+				type: Object
+			},
+
+			groupId: {
+				type: String
+			}
+		},
+
+		data() {
+			return {
+				config: window.App.config,
+				composeText: undefined,
+				tab: null,
+				placeholder: 'Write something...',
+				allowPhoto: true,
+				allowVideo: true,
+				allowPolls: true,
+				allowEvent: true,
+				pollOptionModel: null,
+				pollOptions: [],
+				pollExpiry: 1440,
+				uploadProgress: 0,
+				isUploading: false,
+				isPosting: false,
+				photoName: undefined,
+				videoName: undefined
+			}
+		},
+
+		methods: {
+			newPost() {
+				if(this.isPosting) {
+					return;
+				}
+
+				this.isPosting = true;
+				let self = this;
+				let type = 'text';
+				let data = new FormData();
+				data.append('group_id', this.groupId);
+				if(this.composeText && this.composeText.length) {
+					data.append('caption', this.composeText);
+				}
+
+				switch(this.tab) {
+					case 'poll':
+						if(!this.pollOptions || this.pollOptions.length < 2 || this.pollOptions.length > 4) {
+							swal('Oops!', 'A poll must have 2-4 choices.', 'error');
+							return;
+						}
+
+						if(!this.composeText || this.composeText.length < 5) {
+							swal('Oops!', 'A poll question must be at least 5 characters.', 'error');
+							return;
+						}
+
+						for (var i = 0; i < this.pollOptions.length; i++) {
+							data.append('pollOptions[]', this.pollOptions[i]);
+						}
+
+						data.append('expiry', this.pollExpiry);
+						type = 'poll';
+					break;
+
+					case 'photo':
+						data.append('photo', this.$refs.photoInput.files[0]);
+						type = 'photo';
+						this.isUploading = true;
+					break;
+
+					case 'video':
+						data.append('video', this.$refs.videoInput.files[0]);
+						type = 'video';
+						this.isUploading = true;
+					break;
+				}
+
+				data.append('type', type);
+
+				axios.post('/api/v0/groups/status/new', data, {
+					onUploadProgress: function(progressEvent) {
+						self.uploadProgress = Math.floor(progressEvent.loaded / progressEvent.total * 100);
+					}
+				})
+				.then(res => {
+					this.isPosting = false;
+					this.isUploading = false;
+					this.uploadProgress = 0;
+					this.composeText = null;
+					this.photo = null;
+					this.tab = null;
+					this.clearFileInputs(false);
+					this.$emit('new-status', res.data);
+				}).catch(err => {
+					if(err.response.status == 422) {
+						this.isPosting = false;
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						this.photo = null;
+						this.tab = null;
+						this.clearFileInputs(false);
+						swal('Oops!', err.response.data.error, 'error');
+					} else {
+						this.isPosting = false;
+						this.isUploading = false;
+						this.uploadProgress = 0;
+						this.photo = null;
+						this.tab = null;
+						this.clearFileInputs(false);
+						swal('Oops!', 'An error occured while processing your request, please try again later', 'error');
+					}
+				});
+			},
+
+			switchTab(newTab) {
+				if(newTab == this.tab) {
+					this.tab = null;
+					this.placeholder = 'Write something...';
+					return;
+				}
+
+				switch(newTab) {
+					case 'poll':
+						this.placeholder = 'Write poll question here...'
+					break;
+
+					case 'photo':
+						this.$refs.photoInput.click();
+					break;
+
+					case 'video':
+						this.$refs.videoInput.click();
+					break;
+
+					default:
+						this.placeholder = 'Write something...';
+				}
+
+				this.tab = newTab;
+			},
+
+			savePollOption() {
+				if(this.pollOptions.indexOf(this.pollOptionModel) != -1) {
+					this.pollOptionModel = null;
+					return;
+				}
+				this.pollOptions.push(this.pollOptionModel);
+				this.pollOptionModel = null;
+			},
+
+			deletePollOption(index) {
+				this.pollOptions.splice(index, 1);
+			},
+
+			handlePhotoChange() {
+				event.currentTarget.blur();
+				this.tab = 'photo';
+				this.photoName = event.target.files[0].name;
+			},
+
+			handleVideoChange() {
+				event.currentTarget.blur();
+				this.tab = 'video';
+				this.videoName = event.target.files[0].name;
+			},
+
+			clearFileInputs(blur = true) {
+				if(blur) {
+ 					event.currentTarget.blur();
+				}
+				this.tab = null;
+				this.$refs.photoInput.value = null;
+				this.photoName = null;
+				this.$refs.videoInput.value = null;
+				this.videoName = null;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-compose-form {
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupEvents.vue b/resources/assets/components/groups/partials/GroupEvents.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/assets/components/groups/partials/GroupInfoCard.vue b/resources/assets/components/groups/partials/GroupInfoCard.vue
new file mode 100644
index 000000000..455954b8f
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupInfoCard.vue
@@ -0,0 +1,135 @@
+<template>
+	<div class="group-info-card">
+		<div class="card card-body mt-3 shadow-none border rounded-lg">
+			<p class="title">About</p>
+
+			<p v-if="group.description && group.description.length > 1" class="description" v-html="group.description"></p>
+			<p v-else class="description">This group does not have a description.</p>
+
+		</div>
+		<div class="card card-body mt-3 shadow-none border rounded-lg">
+			<div v-if="group.membership == 'all'" class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-globe fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title">Public</p>
+					<p class="fact-subtitle">Anyone can see who's in the group and what they post.</p>
+				</div>
+			</div>
+
+			<div v-if="group.membership == 'private'" class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-lock fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title">Private</p>
+					<p class="fact-subtitle">Only members can see who's in the group and what they post.</p>
+				</div>
+			</div>
+
+			<div v-if="group.config.discoverable == true" class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-eye fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title">Visible</p>
+					<p class="fact-subtitle">Anyone can find this group.</p>
+				</div>
+			</div>
+
+			<div v-if="group.config.discoverable == false" class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-eye-slash fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title">Hidden</p>
+					<p class="fact-subtitle">Only members can find this group.</p>
+				</div>
+			</div>
+
+			<!-- <div class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-map-marker-alt fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title">Fediverse</p>
+					<p class="fact-subtitle">This group has not specified a location.</p>
+				</div>
+			</div> -->
+
+			<div class="fact">
+				<div class="fact-icon">
+					<i class="fal fa-users fa-lg"></i>
+				</div>
+				<div class="fact-body">
+					<p class="fact-title"">{{ group.category.name }}</p>
+					<p class="fact-subtitle">Category</p>
+				</div>
+			</div>
+
+			<p class="mb-0 font-weight-light text-lighter">Created: {{ timestampFormat(group.created_at) }}</p>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		methods: {
+			timestampFormat(date, showTime = false) {
+				let ts = new Date(date);
+				return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.group-info-card {
+		.title {
+			font-size: 16px;
+			font-weight: bold;
+		}
+
+		.description {
+			font-size: 15px;
+			font-weight:400;
+			color: #6c757d;
+			margin-bottom: 0;
+			white-space: break-spaces;
+		}
+
+		.fact {
+			display: flex;
+			align-items: center;
+			margin-bottom: 1.5rem;
+
+			&-body {
+				flex: 1;
+			}
+
+			&-icon {
+				width: 50px;
+				text-align: center;
+			}
+
+			&-title {
+				font-size: 17px;
+				font-weight: 500;
+				margin-bottom: 0;
+			}
+
+			&-subtitle {
+				font-size: 14px;
+				margin-bottom: 0;
+				color: #6c757d;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupInsights.vue b/resources/assets/components/groups/partials/GroupInsights.vue
new file mode 100644
index 000000000..9909508cb
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupInsights.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="group-insights-component">
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-3 mb-3">
+				<div class="bg-light p-3 border rounded d-flex justify-content-between align-items-center">
+					<p class="h3 font-weight-bold mb-0">124K</p>
+					<p class="font-weight-bold text-uppercase text-lighter mb-0">Posts</p>
+				</div>
+			</div>
+
+			<div class="col-12 col-md-3 mb-3">
+				<div class="bg-light p-3 border rounded d-flex justify-content-between align-items-center">
+					<p class="h3 font-weight-bold mb-0">9K</p>
+					<p class="font-weight-bold text-uppercase text-lighter mb-0">Users</p>
+				</div>
+			</div>
+
+			<div class="col-12 col-md-3 mb-3">
+				<div class="bg-light p-3 border rounded d-flex justify-content-between align-items-center">
+					<p class="h3 font-weight-bold mb-0">1.7M</p>
+					<p class="font-weight-bold text-uppercase text-lighter mb-0">Interactions</p>
+				</div>
+			</div>
+		</div>
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-3 mb-3">
+				<div class="bg-light p-3 border rounded d-flex justify-content-between align-items-center">
+					<p class="h3 font-weight-bold mb-0">50</p>
+					<p class="font-weight-bold text-uppercase text-lighter mb-0">Mod Reports</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+
+			};
+		},
+
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.group-insights-component {
+
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupInviteModal.vue b/resources/assets/components/groups/partials/GroupInviteModal.vue
new file mode 100644
index 000000000..75e5f9f68
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupInviteModal.vue
@@ -0,0 +1,190 @@
+<template>
+	<div class="group-invite-modal">
+		<b-modal
+			ref="modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			body-class="rounded group-invite-modal-wrapper">
+
+			<div class="text-center py-3 d-flex align-items-center flex-column">
+				<div class="bg-light rounded-circle d-flex justify-content-center align-items-center mb-3" style="width: 100px;height: 100px;">
+					<i class="far fa-user-plus fa-2x text-lighter"></i>
+				</div>
+				<p class="h4 font-weight-bold mb-0">Invite Friends</p>
+				<!-- <p class="mb-0">Search {{ group.name }} for posts, comments or members.</p> -->
+			</div>
+
+			<transition name="fade">
+				<div v-if="usernames.length < 5" class="d-flex justify-content-between mt-1">
+					<autocomplete
+						:search="autocompleteSearch"
+						placeholder="Search friends by username"
+						aria-label="Search this group"
+						:get-result-value="getSearchResultValue"
+						:debounceTime="700"
+						@submit="onSearchSubmit"
+						style="width: 100%;"
+						ref="autocomplete"
+						>
+							<template #result="{ result, props }">
+							<li
+							v-bind="props"
+							class="autocomplete-result"
+							>
+								<div class="text-truncate">
+									<p class="result-name mb-0 font-weight-bold">
+										{{ result.username }}
+									</p>
+								</div>
+							</li>
+						</template>
+					</autocomplete>
+
+					<button class="btn btn-light border rounded-circle text-lighter ml-3" style="width: 52px;height:50px;" @click="close">
+						<i class="fal fa-times fa-lg"></i>
+					</button>
+				</div>
+			</transition>
+
+			<transition name="fade">
+				<div v-if="usernames.length" class="pt-3">
+					<div v-for="(result, index) in usernames" class="py-1">
+						<div class="media align-items-center">
+							<img src="/storage/avatars/default.jpg" class="rounded-circle border mr-3" width="45" height="45">
+							<div class="media-body">
+								<p class="lead mb-0">{{ result.username }}</p>
+							</div>
+							<button class="btn btn-link text-lighter btn-sm" @click="removeUsername(index)"><i class="far fa-times-circle fa-lg"></i></button>
+						</div>
+					</div>
+				</div>
+			</transition>
+
+			<transition name="fade">
+				<button v-if="usernames && usernames.length" class="btn btn-primary btn-lg btn-block font-weight-bold rounded font-weight-bold mt-3" @click="submitInvites">Invite</button>
+			</transition>
+
+			<div class="text-center pt-3 small">
+				<p class="mb-0">You can invite up to 5 friends at a time, and 20 friends in total.</p>
+			</div>
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import Autocomplete from '@trevoreyre/autocomplete-vue'
+	import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+	export default {
+		props: {
+			group: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			}
+		},
+
+		components: {
+			'autocomplete-input': Autocomplete,
+		},
+
+		data() {
+			return {
+				query: '',
+				recent: [],
+				loaded: false,
+				usernames: [],
+				isSubmitting: false
+			}
+		},
+
+		methods: {
+			open() {
+				this.$refs.modal.show();
+			},
+
+			close() {
+				this.$refs.modal.hide();
+			},
+
+			autocompleteSearch(q) {
+				if (!q || q.length == 0) {
+					return [];
+				}
+
+				return axios.post(`/api/v0/groups/search/invite/friends`, {
+					q: q,
+					g: this.group.id,
+					v: '0.2'
+				}).then(res => {
+					let data = res.data.filter(r => {
+						return this.usernames.map(u => u.username).indexOf(r.username) == -1;
+					});
+					return data;
+				});
+				return [];
+			},
+
+			getSearchResultValue(result) {
+				return result.username;
+			},
+
+			onSearchSubmit(result) {
+				this.usernames.push(result);
+				this.$refs.autocomplete.value = '';
+				//
+			},
+
+			removeUsername(index) {
+				event.currentTarget.blur();
+				this.usernames.splice(index, 1);
+			},
+
+			submitInvites() {
+				this.isSubmitting = true;
+				event.currentTarget.blur();
+				axios.post('/api/v0/groups/search/invite/friends/send', {
+					g: this.group.id,
+					uids: this.usernames.map(u => u.id)
+				}).then(res => {
+					this.usernames = [];
+					this.isSubmitting = false;
+					this.close();
+					swal('Success', 'Successfully sent invite(s)', 'success');
+				}).catch(err => {
+					this.usernames = [];
+					this.isSubmitting = false;
+					if(err.response.status === 422) {
+						swal('Error', err.response.data.error, 'error');
+					} else {
+						swal('Oops!', 'An error occured, please try again later', 'error');
+					}
+					this.close();
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-invite-modal {
+
+		&-wrapper {
+			.media {
+				height: 60px;
+				padding: 10px;
+				border-radius: 10px;
+				user-select: none;
+				cursor: pointer;
+
+				&:hover {
+					background-color: #E5E7EB;
+				}
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupListCard.vue b/resources/assets/components/groups/partials/GroupListCard.vue
new file mode 100644
index 000000000..64300160e
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupListCard.vue
@@ -0,0 +1,156 @@
+<template>
+	<div class="group-list-card">
+		<div class="media">
+			<div class="media align-items-center">
+				<img
+					v-if="group.metadata && group.metadata.hasOwnProperty('header')"
+					:src="group.metadata.header.url"
+					class="mr-3 border rounded group-header-img"
+					:class="{ compact: compact }">
+
+				<div
+					v-else
+					class="mr-3 border rounded group-header-img"
+					:class="{ compact: compact }">
+					<div
+						class="bg-primary d-flex align-items-center justify-content-center rounded"
+						style="width: 100%; height:100%;">
+						<i class="fal fa-users text-white fa-lg"></i>
+					</div>
+				</div>
+
+				<div class="media-body">
+					<p class="font-weight-bold mb-0 text-dark" style="font-size: 16px;">
+						{{ truncate(group.name || 'Untitled Group', titleLength) }}
+					</p>
+
+					<p class="text-muted mb-1" style="font-size: 12px;">
+						{{ truncate(group.short_description, descriptionLength) }}
+					</p>
+
+					<p v-if="showStats" class="mb-0 small text-lighter">
+						<span>
+							<i class="far fa-users"></i>
+							<span class="small font-weight-bold">{{ prettyCount(group.member_count) }}</span>
+						</span>
+
+						<span v-if="!group.local" class="remote-label ml-3">
+							<i class="fal fa-globe"></i> Remote
+						</span>
+
+						<span v-if="group.hasOwnProperty('admin') && group.admin.hasOwnProperty('username')" class="ml-3">
+							<i class="fal fa-user-crown"></i>
+							<span class="small font-weight-bold">
+								&commat;{{ group.admin.username }}
+							</span>
+						</span>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			},
+
+			compact: {
+				type: Boolean,
+				default: false
+			},
+
+			showStats: {
+				type: Boolean,
+				default: false
+			},
+
+			truncateTitleLength: {
+				type: Number,
+				default: 19
+			},
+
+			truncateDescriptionLength: {
+				type: Number,
+				default: 22
+			}
+		},
+
+		data() {
+			return {
+				titleLength: 40,
+				descriptionLength: 60
+			}
+		},
+
+		mounted() {
+			if(this.compact) {
+				this.titleLength = 19;
+				this.descriptionLength = 22;
+			}
+
+			if(this.truncateTitleLength != 19) {
+				this.titleLength = this.truncateTitleLength;
+			}
+
+			if(this.truncateDescriptionLength != 22) {
+				this.descriptionLength = this.truncateDescriptionLength;
+			}
+		},
+
+		methods: {
+			prettyCount(val) {
+				return App.util.format.count(val);
+			},
+
+			truncate(str, limit = 140) {
+				if(str.length <= limit) {
+					return str;
+				}
+
+				return str.substr(0, limit) + ' ...';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.group-list-card {
+		.member-label {
+			padding: 2px 5px;
+			font-size: 9px;
+			color: rgba(75, 119, 190, 1);
+			background: rgba(137, 196, 244, 0.2);
+			border: 1px solid rgba(137, 196, 244, 0.3);
+			font-weight: 500;
+			text-transform: capitalize;
+			border-radius: 3px;
+		}
+
+		.remote-label {
+			padding: 2px 5px;
+			font-size: 9px;
+			color: #B45309;
+			background: #FEF3C7;
+			border: 1px solid #FCD34D;
+			font-weight: 500;
+			text-transform: capitalize;
+			border-radius: 3px;
+		}
+
+		.group-header-img {
+			width: 60px;
+			height: 60px;
+			object-fit: cover;
+			padding:0px;
+
+			&.compact {
+				width: 42.5px;
+				height: 42.5px;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupMedia.vue b/resources/assets/components/groups/partials/GroupMedia.vue
new file mode 100644
index 000000000..65a96001d
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupMedia.vue
@@ -0,0 +1,262 @@
+<template>
+	<div class="group-media-component">
+		<div class="row justify-content-center">
+			<div class="col-12">
+				<div class="card card-body border shadow-sm">
+					<div class="d-flex justify-content-between align-items-center mb-3">
+						<p class="h4 font-weight-bold mb-0">Media</p>
+						<!-- <div>
+							<a href="#" class="font-weight-bold mr-3"><i class="fas fa-plus fa-sm"></i> Create Album</a>
+							<a href="#" class="font-weight-bold">Add Photos/Video</a>
+						</div> -->
+					</div>
+
+					<div v-if="isLoaded">
+						<div class="mb-5">
+							<button
+								:class="[ tab == 'photo' ? 'text-primary font-weight-bold' : 'text-lighter' ]"
+								class="btn btn-light mr-2"
+								@click="switchTab('photo')">
+								Photos
+							</button>
+							<button
+								:class="[ tab == 'video' ? 'text-primary font-weight-bold' : 'text-lighter' ]"
+								class="btn btn-light mr-2"
+								@click="switchTab('video')">
+								Videos
+							</button>
+							<button
+								:class="[ tab == 'album' ? 'text-primary font-weight-bold' : 'text-lighter' ]"
+								class="btn btn-light mr-2"
+								@click="switchTab('album')">
+								Albums
+							</button>
+						</div>
+
+						<div v-if="tab == 'photo'" class="row px-3">
+							<div v-for="(status, index) in photos" class="m-1">
+								<a :href="status.url" class="bh-content">
+									<img :src="getMediaSource(status)" width="205" height="205" style="object-fit: cover;">
+								</a>
+							</div>
+
+							<div v-if="photos.length == 0" class="col-12 py-5 text-center">
+								<p class="lead font-weight-bold mb-0">No photos found</p>
+							</div>
+						</div>
+
+						<div v-if="tab == 'video'" class="row px-3">
+							<div v-for="(status, index) in videos" class="m-1">
+								<a :href="status.url" class="bh-content text-decoration-none">
+									<img v-if="!status.media_attachments[0].preview_url.endsWith('no-preview.png')" :src="getMediaSource(status)" width="205" height="205" style="object-fit: cover;">
+									<div v-else class="bg-light text-dark d-flex align-items-center justify-content-center border" style="width:205px;height:205px;">
+										<p class="font-weight-bold mb-0">No preview available</p>
+									</div>
+								</a>
+							</div>
+
+							<div v-if="videos.length == 0" class="col-12 py-5 text-center">
+								<p class="lead font-weight-bold mb-0">No videos found</p>
+							</div>
+						</div>
+
+						<div v-if="tab == 'album'" class="row px-3">
+							<div v-for="(status, index) in albums" class="m-1">
+								<a :href="status.url" class="bh-content">
+									<img :src="getMediaSource(status)" width="205" height="205" style="object-fit: cover;">
+								</a>
+							</div>
+
+							<div v-if="albums.length == 0" class="col-12 py-5 text-center">
+								<p class="lead font-weight-bold mb-0">No albums found</p>
+							</div>
+						</div>
+
+						<div v-if="hasNextPage[tab]" class="mt-3">
+							<button class="btn btn-light font-weight-bold btn-block border" @click="loadNextPage">Load more</button>
+						</div>
+					</div>
+					<div v-else class="d-flex align-items-center justify-content-center" style="height:500px">
+						<div class="spinner-border text-primary" role="status">
+							<span class="sr-only">Loading...</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+				isLoaded: false,
+				feed: [],
+				photos: [],
+				videos: [],
+				albums: [],
+				tab: 'photo',
+				tabs: [
+					'photo',
+					'video',
+					'album'
+				],
+				page: {
+					'photo': 1,
+					'video': 1,
+					'album': 1
+				},
+				hasNextPage: {
+					'photo': false,
+					'video': false,
+					'album': false
+				}
+			}
+		},
+
+		mounted() {
+			this.fetchMedia();
+		},
+
+		methods: {
+			fetchMedia() {
+				axios.get('/api/v0/groups/media/list', {
+					params: {
+						gid: this.group.id,
+						page: this.page[this.tab],
+						type: this.tab
+					}
+				}).then(res => {
+					if(res.data.length > 0) {
+						this.hasNextPage[this.tab] = true;
+					}
+
+					this.isLoaded = true;
+
+					res.data.forEach(status => {
+						if(status.pf_type == 'photo') {
+							this.photos.push(status);
+						}
+
+						if(status.pf_type == 'video') {
+							this.videos.push(status);
+						}
+
+						if(status.pf_type == 'photo:album') {
+							this.albums.push(status);
+						}
+					})
+					this.page[this.tab] = this.page[this.tab] + 1;
+				}).catch(err => {
+					this.hasNextPage[this.tab] = false;
+					console.log(err.response);
+				})
+			},
+
+			loadNextPage() {
+				axios.get('/api/v0/groups/media/list', {
+					params: {
+						gid: this.group.id,
+						page: this.page[this.tab],
+						type: this.tab,
+					}
+				}).then(res => {
+					if(res.data.length == 0) {
+						this.hasNextPage[this.tab] = false;
+						return;
+					}
+					res.data.forEach(status => {
+						if(status.pf_type == 'photo') {
+							this.photos.push(status);
+						}
+
+						if(status.pf_type == 'video') {
+							this.videos.push(status);
+						}
+
+						if(status.pf_type == 'photo:album') {
+							this.albums.push(status);
+						}
+					})
+					this.page[this.tab] = this.page[this.tab] + 1;
+				}).catch(err => {
+					this.hasNextPage[this.tab] = false;
+				})
+			},
+
+			formatDate(ts) {
+				return new Date(ts).toDateString();
+			},
+
+			switchTab(tab) {
+				this.tab = tab;
+				this.fetchMedia();
+			},
+
+			lightbox(status) {
+				this.lightboxStatus = status.media_attachments[0];
+				this.$refs.lightboxModal.show();
+			},
+
+			hideLightbox() {
+				this.lightboxStatus = null;
+				this.$refs.lightboxModal.hide();
+			},
+
+			blurhashWidth(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 30;
+				} else {
+					return 20;
+				}
+			},
+
+			blurhashHeight(status) {
+				if(!status.media_attachments[0].meta) {
+					return 25;
+				}
+				let aspect = status.media_attachments[0].meta.original.aspect;
+				if(aspect == 1) {
+					return 25;
+				} else if(aspect > 1) {
+					return 20;
+				} else {
+					return 30;
+				}
+			},
+
+			getMediaSource(status) {
+				let media = status.media_attachments[0];
+
+				if(media.preview_url && media.preview_url.endsWith('storage/no-preview.png')) {
+					return media.url;
+				}
+
+                if(media.preview_url && media.preview_url.length) {
+                    return media.url;
+                }
+
+				return media.url;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-members-component {
+
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupMembers.vue b/resources/assets/components/groups/partials/GroupMembers.vue
new file mode 100644
index 000000000..3913aa93d
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupMembers.vue
@@ -0,0 +1,684 @@
+<template>
+	<div class="group-members-component">
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-8 mb-5">
+				<div v-if="isAdmin && requestCount && !hideHeader" class="card card-body border shadow-sm bg-dark text-light mb-4 rounded-pill p-2 pl-3">
+					<div class="d-flex align-items-center justify-content-between">
+						<span class="lead mb-0 text-lighter">
+							<i class="fal fa-exclamation-triangle mr-2 text-warning"></i>
+							You have <strong class="text-white">{{ requestCount }}</strong> member applications to review
+						</span>
+						<span>
+							<button class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" @click="reviewApplicants()">Review</button>
+						</span>
+					</div>
+				</div>
+
+				<div class="card card-body border shadow-sm">
+					<div v-if="!hideHeader">
+						<p class="d-flex align-items-center mb-0">
+							<span class="lead font-weight-bold">Members</span>
+							<span class="mx-2">·</span>
+							<span class="text-muted">{{group.member_count}}</span>
+						</p>
+						<!-- <p class="text-muted mb-0">
+							New people who join this group will appear here. <a class="font-weight-bold text-dark" href="#">Learn More</a>
+						</p> -->
+						<div class="form-group mt-3" style="position: relative;">
+							<i class="fas fa-search fa-lg text-lighter" style="position: absolute;left:20px; top:50%;transform:translateY(-50%);"></i>
+							<input class="form-control form-control-lg bg-light border rounded-pill" style="padding-left: 50px;padding-right: 50px;" placeholder="Find a member" v-model="memberSearchModel">
+							<button class="btn btn-primary font-weight-bold rounded-pill px-3" style="position: absolute;right: 6px; top: 50%;transform: translateY(-50%);">Search</button>
+						</div>
+
+						<hr>
+					</div>
+
+					<div v-if="tab == 'list'">
+						<div class="group-members-component-paginated-list py-3">
+							<div class="media align-items-center">
+								<a :href="profile.url" class="text-dark text-decoration-none">
+									<img
+                                        :src="profile?.avatar"
+                                        width="56"
+                                        height="56"
+                                        class="rounded-circle border mr-2"
+                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                    />
+								</a>
+								<div class="media-body">
+									<p class="lead font-weight-bold mb-0">
+										{{profile.username}}
+										<span class="member-label rounded ml-1">Me</span>
+									</p>
+									<p class="text-muted mb-0">Founded group {{formatDate(group.created_at)}}</p>
+								</div>
+								<!-- <button class="btn btn-light border">
+									<i class="fas fa-ellipsis-h text-muted"></i>
+								</button> -->
+							</div>
+						</div>
+
+						<hr v-if="mutual.length > 0">
+
+						<div v-if="mutual.length > 0" class="group-members-component-paginated-list">
+							<p class="font-weight-bold mb-1">Mutual Friends</p>
+
+							<div v-for="(member, index) in mutual" class="media align-items-center py-3">
+								<a :href="member.url" class="text-dark text-decoration-none">
+                                    <img
+                                        :src="member?.avatar"
+                                        width="56"
+                                        height="56"
+                                        class="rounded-circle border mr-2"
+                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                    />
+								</a>
+
+								<div class="media-body">
+									<p class="lead font-weight-bold mb-0">
+										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
+										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
+										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
+									</p>
+									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
+								</div>
+								<a
+									class="btn btn-light lead font-weight-bolder px-3 border"
+									:href="'/account/direct/t/' + member.id">
+									<i class="far fa-comment-dots mr-1"></i> Message
+								</a>
+								<b-dropdown
+									v-if="isAdmin"
+									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
+									toggle-tag="a"
+									:lazy="true"
+									right
+									no-caret>
+									<template #button-content>
+										<i class="fas fa-ellipsis-h"></i>
+									</template>
+									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
+									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
+									<b-dropdown-item>View Activity</b-dropdown-item>
+									<b-dropdown-divider></b-dropdown-divider>
+									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
+									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
+								</b-dropdown>
+							</div>
+						</div>
+
+						<hr v-if="members.length > 0">
+
+						<div v-if="members.length > 0" class="group-members-component-paginated-list">
+							<p class="font-weight-bold mb-1">Other Members</p>
+
+							<div v-for="(member, index) in members" class="media align-items-center py-3">
+								<a :href="member.url" class="text-dark text-decoration-none">
+                                    <img
+                                        :src="member?.avatar"
+                                        width="56"
+                                        height="56"
+                                        class="rounded-circle border mr-2"
+                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                    />
+								</a>
+
+								<div class="media-body">
+									<p class="lead font-weight-bold mb-0">
+										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
+										<span v-if="member.is_admin" class="member-label rounded ml-1">Admin</span>
+										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
+									</p>
+									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
+								</div>
+								<button
+									:class="[ member.following ? 'btn-primary' : 'btn-light']"
+									class="btn lead font-weight-bolder px-4 border"
+									@click="follow(index)">
+									<span v-if="member.following">
+										Following
+									</span>
+									<span v-else>
+										<i class="fas fa-user-plus mr-2"></i> Follow
+									</span>
+								</button>
+								<b-dropdown
+									v-if="isAdmin"
+									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
+									toggle-tag="a"
+									:lazy="true"
+									right
+									no-caret>
+									<template #button-content>
+										<i class="fas fa-ellipsis-h"></i>
+									</template>
+									<b-dropdown-item :href="member.url" link-class="font-weight-bold">View Profile</b-dropdown-item>
+									<b-dropdown-item :href="'/account/direct/t/'+member.id" link-class="font-weight-bold">Send Message</b-dropdown-item>
+									<b-dropdown-item link-class="font-weight-bold">View Activity</b-dropdown-item>
+									<b-dropdown-divider></b-dropdown-divider>
+									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
+									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
+								</b-dropdown>
+							</div>
+						</div>
+
+						<p v-if="members.length > 0 && hasNextPage" class="mt-4">
+							<button class="btn btn-light btn-block border font-weight-bold" @click="loadNextPage">Load more</button>
+						</p>
+					</div>
+
+					<div v-if="tab == 'search'" class="d-flex justify-content-center align-items-center" style="min-height: 100px;">
+						<div class="text-center text-muted">
+							<div class="spinner-border" role="status">
+								<span class="sr-only">Loading...</span>
+							</div>
+							<p class="lead mb-0 mt-2">Loading results ...</p>
+						</div>
+					</div>
+
+					<div v-if="tab == 'results'">
+						<div v-if="results.length > 0" class="group-members-component-paginated-list">
+							<p class="font-weight-bold mb-1">Results</p>
+
+							<div v-for="(member, index) in results" class="media align-items-center py-3">
+								<a :href="member.url" class="text-dark text-decoration-none">
+                                    <img
+                                        :src="member?.avatar"
+                                        width="56"
+                                        height="56"
+                                        class="rounded-circle border mr-2"
+                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                    />
+								</a>
+
+								<div class="media-body">
+									<p class="lead font-weight-bold mb-0">
+										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
+										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
+										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
+									</p>
+									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
+								</div>
+								<a
+									class="btn btn-light lead font-weight-bolder px-3 border"
+									:href="'/account/direct/t/' + member.id">
+									<i class="far fa-comment-dots mr-1"></i> Message
+								</a>
+								<b-dropdown
+									v-if="isAdmin"
+									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
+									toggle-tag="a"
+									:lazy="true"
+									right
+									no-caret>
+									<template #button-content>
+										<i class="fas fa-ellipsis-h"></i>
+									</template>
+									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
+									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
+									<b-dropdown-item>View Activity</b-dropdown-item>
+									<b-dropdown-divider></b-dropdown-divider>
+									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
+									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
+								</b-dropdown>
+							</div>
+							<p class="text-center mt-5">
+								<a href="#" class="font-weight-bold" @click="backFromSearch">Go back</a>
+							</p>
+						</div>
+						<div v-else class="text-center text-muted mt-3">
+							<p class="lead">No results found.</p>
+							<p>
+								<a href="#" class="font-weight-bold" @click="backFromSearch">Go back</a>
+							</p>
+						</div>
+					</div>
+
+					<div v-if="tab == 'memberInteractionLimits'">
+						<div v-if="results.length > 0" class="group-members-component-paginated-list">
+							<p class="font-weight-bold mb-1">Interaction Limits</p>
+
+							<div v-for="(member, index) in results" class="media align-items-center py-3">
+								<a :href="member.url" class="text-dark text-decoration-none">
+                                    <img
+                                        :src="member?.avatar"
+                                        width="56"
+                                        height="56"
+                                        class="rounded-circle border mr-2"
+                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                    />
+								</a>
+
+								<div class="media-body">
+									<p class="lead font-weight-bold mb-0">
+										<a :href="member.url" class="text-dark text-decoration-none">{{member.username}}</a>
+										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
+									</p>
+									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
+								</div>
+								<a
+									class="btn btn-light lead font-weight-bolder px-3 border"
+									:href="'/account/direct/t/' + member.id">
+									<i class="far fa-comment-dots mr-1"></i> Message
+								</a>
+								<b-dropdown
+									v-if="isAdmin"
+									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
+									toggle-tag="a"
+									:lazy="true"
+									right
+									no-caret>
+									<template #button-content>
+										<i class="fas fa-ellipsis-h"></i>
+									</template>
+									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
+									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
+									<b-dropdown-item>View Activity</b-dropdown-item>
+									<b-dropdown-divider></b-dropdown-divider>
+									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
+									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
+								</b-dropdown>
+							</div>
+							<p class="text-center mt-5">
+								<a href="#" class="font-weight-bold" @click.prevent="backFromSearch">Go back</a>
+							</p>
+						</div>
+						<div v-else class="text-center text-muted mt-3">
+							<p class="lead">No results found.</p>
+							<p>
+								<a href="#" class="font-weight-bold" @click.prevent="backFromSearch">Go back</a>
+							</p>
+						</div>
+					</div>
+
+					<div v-if="tab == 'review'">
+						<div v-if="reviewsLoaded">
+
+							<div class="group-members-component-paginated-list">
+								<div class="d-flex justify-content-between align-items-center">
+									<div class="d-flex">
+										<button class="btn btn-link btn-sm mr-2" @click="backFromReview">
+											<i class="far fa-chevron-left fa-lg"></i>
+										</button>
+
+										<p class="font-weight-bold mb-0">Review Membership Applicants</p>
+									</div>
+								</div>
+								<hr>
+
+								<div v-for="(member, index) in applicants" class="media align-items-center py-3">
+									<a :href="member.url" class="text-dark text-decoration-none">
+                                        <img
+                                            :src="member?.avatar"
+                                            width="56"
+                                            height="56"
+                                            class="rounded-circle border mr-2"
+                                            onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                                        />
+									</a>
+
+									<div class="media-body">
+										<p class="lead font-weight-bold mb-0">
+											<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
+											<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
+										</p>
+										<p class="text-muted mb-0 small">
+											<span>
+												{{ member.followers_count }} Followers
+											</span>
+
+											<span class="mx-1">·</span>
+
+											<span>
+												Joined {{formatDate(member.created_at)}}
+											</span>
+										</p>
+									</div>
+
+									<button
+										type="button"
+										class="btn btn-light lead font-weight-bolder px-3 border"
+										@click="handleApplicant(index, 'ignore')">
+										<i class="far fa-times mr-1"></i> Ignore
+									</button>
+
+									<button
+										type="button"
+										class="btn btn-danger lead font-weight-bolder px-3 border"
+										@click="handleApplicant(index, 'reject')">
+										<i class="far fa-times mr-1"></i> Reject
+									</button>
+
+									<button
+										type="button"
+										class="btn btn-primary lead font-weight-bolder px-3 border"
+										@click="handleApplicant(index, 'approve')">
+										<i class="far fa-check mr-1"></i> Approve
+									</button>
+								</div>
+
+								<button
+									v-if="applicantsCanLoadMore"
+									class="btn btn-light font-weight-bold btn-block"
+									@click="loadMoreApplicants"
+									:disabled="loadingMoreApplicants">
+									Load More
+								</button>
+
+								<div v-if="!applicants || !applicants.length">
+									<p class="text-center lead mb-0">No content found</p>
+									<p class="text-center mb-0">
+										<a class="font-weight-bold" href="#" @click.prevent="backFromReview">Go back</a>
+									</p>
+								</div>
+							</div>
+
+						</div>
+
+						<div v-else class="d-flex align-items-center justify-content-center" style="min-height: 100px;">
+							<b-spinner variant="muted"  />
+						</div>
+					</div>
+
+					<div v-if="tab == 'loading'" class="d-flex align-items-center justify-content-center" style="min-height: 100px;">
+						<b-spinner variant="muted"  />
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<group-interaction-limits-modal
+			ref="interactionModal"
+			:group="group"
+			:profile="activeProfile"
+			/>
+
+	</div>
+</template>
+
+<script type="text/javascript">
+	import InteractionModal from './MemberLimitInteractionsModal.vue';
+
+	export default {
+		props: {
+			group: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			},
+
+			requestCount: {
+				type: Number
+			},
+
+			isAdmin: {
+				type: Boolean
+			}
+		},
+
+		components: {
+			'group-interaction-limits-modal': InteractionModal
+		},
+
+		data() {
+			return {
+				members: [],
+				mutual: [],
+				results: [],
+				page: 1,
+				hasNextPage: true,
+				tab: 'list',
+				memberSearchModel: null,
+				activeProfile: undefined,
+				hideHeader: false,
+				reviewsLoaded: false,
+				applicants: [],
+				applicantsPage: 1,
+				applicantsCanLoadMore: false,
+				loadingMoreApplicants: false
+			}
+		},
+
+		mounted() {
+			this.fetchMembers();
+			let u = new URLSearchParams(window.location.search);
+
+			if(this.group.self.role == 'founder') {
+				this.isAdmin = true;
+
+				if(u.has('a')) {
+					if(u.get('a') == 'il') {
+						this.tab = 'loading';
+						let pid = u.get('pid');
+						axios.get('/api/v0/groups/members/get', {
+							params: {
+								gid: this.group.id,
+								pid: pid
+							}
+						})
+						.then(res => {
+							this.results.push(res.data);
+							this.tab = 'memberInteractionLimits';
+							this.openInteractionLimitModal(res.data);
+						});
+					}
+
+					if(u.get('a') == 'review') {
+						this.reviewApplicants();
+					}
+				}
+			} else if (u.has('a')) {
+				history.pushState(null, null, `/groups/${this.group.id}/members`);
+			}
+
+		},
+
+		watch: {
+			memberSearchModel: function(val) {
+				this.handleSearch();
+			}
+		},
+
+		methods: {
+			fetchMembers() {
+				axios.get('/api/v0/groups/members/list', {
+					params: {
+						gid: this.group.id,
+						page: this.page
+					}
+				}).then(res => {
+					let data = res.data.filter(m => {
+						return m.id != this.profile.id;
+					});
+					this.members = data.filter(m => {
+						return !m.following
+					});
+					this.mutual = data.filter(m => {
+						return m.following
+					});
+					this.page++;
+					this.$nextTick(() => {
+						$('[data-toggle="tooltip"]').tooltip()
+					});
+				}).catch(err => {
+					console.log(res.response);
+				})
+			},
+
+			loadNextPage() {
+				axios.get('/api/v0/groups/members/list', {
+					params: {
+						gid: this.group.id,
+						page: this.page
+					}
+				}).then(res => {
+					if(res.data.length == 0) {
+						this.hasNextPage = false;
+						return;
+					}
+
+					let data = res.data.filter(m => {
+						return m.id != this.profile.id;
+					});
+					this.members.push(...data.filter(m => {
+						return !m.following
+					}));
+					this.mutual.push(...data.filter(m => {
+						return m.following
+					}));
+					this.page++;
+					this.$nextTick(() => {
+						$('[data-toggle="tooltip"]').tooltip()
+					});
+				}).catch(err => {
+					console.log(err.response);
+				})
+			},
+
+			follow(index) {
+				axios.post('/i/follow', {
+					item: this.members[index].id
+				}).then(res => {
+					this.members[index].following = !this.members[index].following;
+				}).catch(err => {
+					console.log(err.response);
+				})
+			},
+
+			formatDate(ts) {
+				return new Date(ts).toDateString();
+			},
+
+			handleSearch() {
+				if(!this.memberSearchModel || this.memberSearchModel == "" || this.memberSearchModel.length == 0) {
+					this.tab == 'list';
+					this.memberSearchModel = null;
+					return;
+				}
+
+				this.tab = 'search';
+				this.results = this.members.concat(this.mutual).filter(profile => {
+					return profile.username.includes(this.memberSearchModel);
+				});
+
+				// if(this.results.length) {
+					this.tab = 'results';
+				// }
+			},
+
+			backFromSearch() {
+				event.currentTarget.blur();
+				this.memberSearchModel = null;
+				this.tab = 'list';
+				history.pushState(null, null, `/groups/${this.group.id}/members`);
+			},
+
+			openInteractionLimitModal(member) {
+				this.activeProfile = member;
+				setTimeout(() => {
+					this.$refs.interactionModal.open();
+				}, 500);
+			},
+
+			reviewApplicants() {
+				this.hideHeader = true;
+				this.tab = 'review';
+				history.pushState(null, null, `/groups/${this.group.id}/members?a=review`);
+
+				axios.get('/api/v0/groups/members/requests', {
+					params: {
+						gid: this.group.id
+					}
+				})
+				.then(res => {
+					this.applicants = res.data;
+					this.reviewsLoaded = true;
+					this.applicantsPage = 2;
+					this.applicantsCanLoadMore = res.data.length == 10;
+				})
+			},
+
+			handleApplicant(index, action) {
+				event.currentTarget.blur();
+
+				if(action == 'ignore') {
+					this.applicants.splice(index, 1);
+					return;
+				}
+
+				this.tab = 'loading';
+
+				if(!window.confirm('Are you sure you want to perform this action?')) {
+					return;
+				}
+
+				axios.post('/api/v0/groups/members/request', {
+					gid: this.group.id,
+					pid: this.applicants[index].id,
+					action: action
+				})
+				.then(res => {
+					this.applicants.splice(index, 1);
+					this.tab = 'review';
+					this.$emit('decrementrc');
+					if(action == 'approve') {
+						this.$emit('incrementMemberCount');
+					}
+				})
+			},
+
+			backFromReview() {
+				event.currentTarget.blur();
+				this.memberSearchModel = null;
+				this.tab = 'list';
+				this.hideHeader = false;
+				history.pushState(null, null, `/groups/${this.group.id}/members`);
+			},
+
+			loadMoreApplicants() {
+				this.loadingMoreApplicants = true;
+
+				axios.get('/api/v0/groups/members/requests', {
+					params: {
+						gid: this.group.id,
+						page: this.applicantsPage
+					}
+				})
+				.then(res => {
+					this.applicants.push(...res.data);
+					this.applicantsCanLoadMore = res.data.length == 10;
+					this.applicantsPage++;
+					this.loadingMoreApplicants = false;
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-members-component {
+		min-height: 100vh;
+
+		.member-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: rgba(75, 119, 190, 1);
+			background: rgba(137, 196, 244, 0.2);
+			border: 1px solid rgba(137, 196, 244, 0.3);
+			font-weight: 400;
+			text-transform: capitalize;
+		}
+
+		.remote-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: #B45309;
+			background: #FEF3C7;
+			border: 1px solid #FCD34D;
+			font-weight: 400;
+			text-transform: capitalize;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupModeration.vue b/resources/assets/components/groups/partials/GroupModeration.vue
new file mode 100644
index 000000000..54d114391
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupModeration.vue
@@ -0,0 +1,231 @@
+<template>
+	<div class="group-moderation-component">
+		<div v-if="initalLoad">
+			<div v-if="tab === 'home'">
+				<div class="row justify-content-center">
+					<div class="col-12 col-md-6 pt-4">
+						<div class="d-flex justify-content-between align-items-center mb-3">
+							<p class="lead mb-0">Latest Mod Reports</p>
+							<button class="btn btn-light border font-weight-bold btn-sm rounded shadow-sm">
+								<i class="far fa-redo"></i>
+							</button>
+						</div>
+
+						<div v-if="reports.length" class="list-group">
+							<div v-for="(report, index) in reports" class="list-group-item">
+								<div class="media align-items-center">
+									<img :src="report.profile.avatar" width="40" height="40" class="rounded-circle mr-3">
+									<div class="media-body">
+										<p class="mb-0">
+											<a v-if="report.total_count == 1" class="font-weight-bold" :href="report.profile.url">{{ report.profile.username }}</a>
+											<span v-else>
+												<a class="font-weight-bold" :href="report.profile.url">{{ report.profile.username }}</a> and <a class="font-weight-bold" href="#">{{ report.total_count - 1}} others</a>
+											</span>
+											reported
+											<a href="#" class="font-weight-bold" :id="`report_post:${index}`">this post</a>
+											as {{ report.type }}
+										</p>
+										<p class="mb-0 small">
+											<span class="text-muted font-weight-bold">
+												{{ timeago(report.created_at) }}
+											</span>
+											<!-- <span>·</span>
+											<a class="text-muted font-weight-bold" href="#">
+												View Full Report
+											</a> -->
+											<span>·</span>
+											<a class="text-danger font-weight-bold" href="#" @click.prevent="actionMenu(index)">
+												Actions
+											</a>
+										</p>
+									</div>
+
+									<!-- <div class="text-muted">
+										<button class="btn btn-light btn-sm shadow-sm" @click.prevent="actionMenu(index)">
+											<i class="far fa-cog fa-lg text-lighter"></i>
+										</button>
+									</div> -->
+
+									<b-popover :target="`report_post:${index}`" triggers="hover" placement="bottom" custom-class="popover-wide">
+										<template #title>
+											<div class="d-flex justify-content-between">
+												<span>
+													&commat;{{ report.status.account.username }}
+												</span>
+												<span>
+													{{ timeago(report.status.created_at) }}
+												</span>
+											</div>
+										</template>
+
+										<div v-if="report.status.pf_type == 'group:post'">
+											<div v-if="report.status.media_attachments.length">
+												<img :src="report.status.media_attachments[0].url" width="100%" height="300" style="object-fit:cover;">
+											</div>
+											<div v-else>
+												<p v-html="report.status.content"></p>
+											</div>
+										</div>
+										<div v-else-if="report.status.pf_type == 'reply-text'">
+											<p v-html="report.status.content"></p>
+										</div>
+										<div v-else>
+											<p>Cannot generate preview.</p>
+										</div>
+
+										<p class="mb-1 mt-3">
+											<a class="btn btn-primary btn-block font-weight-bold" :href="report.status.url">View Post</a>
+										</p>
+									</b-popover>
+								</div>
+							</div>
+
+							<div v-if="canLoadMore" class="list-group-item">
+								<button class="btn btn-light font-weight-bold btn-block" @click.prevent="loadMoreReports()">Load more</button>
+							</div>
+						</div>
+						<div v-else class="card card-body shadow-none border rounded-pill">
+							<p class="lead font-weight-bold text-center mb-0">No moderation reports found!</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div v-else class="col-12 col-md-6 pt-4 d-flex align-items-center justify-content-center">
+			<div class="spinner-border" role="status">
+				<span class="sr-only">Loading...</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+				initalLoad: false,
+				reports: [],
+				page: 1,
+				canLoadMore: false,
+				tab: 'home'
+			}
+		},
+
+		mounted() {
+			this.getReports();
+		},
+
+		methods: {
+			getReports() {
+				axios.get(`/api/v0/groups/${this.group.id}/reports/list`)
+				.then(res => {
+					this.reports = res.data;
+					this.initalLoad = true;
+					this.page++;
+					this.canLoadMore = res.data.length == 10;
+				})
+			},
+
+			loadMoreReports() {
+				axios.get(`/api/v0/groups/${this.group.id}/reports/list`, {
+					params: {
+						page: this.page
+					}
+				})
+				.then(res => {
+					this.reports.push(...res.data);
+					this.page++;
+					this.canLoadMore = res.data.length == 10;
+				})
+			},
+
+			timeago(ts) {
+				return App.util.format.timeAgo(ts);
+			},
+
+			actionMenu(index) {
+				event.currentTarget.blur();
+
+				swal({
+					title: "Moderator Action",
+					dangerMode: true,
+					text: "Please select an action to take, press ESC to close",
+					buttons: {
+						ignore: {
+							text: "Ignore",
+							className: "btn-warning",
+							value: "ignore"
+						},
+						cw: {
+							text: "NSFW",
+							className: "btn-warning",
+							value: "cw",
+						},
+						delete: {
+							text: "Delete",
+							className: "btn-danger",
+							value: "delete",
+						},
+					},
+				})
+				.then((value) => {
+					switch (value) {
+
+						case "ignore":
+							axios.post(`/api/v0/groups/${this.group.id}/report/action`, {
+								action: 'ignore',
+								id: this.reports[index].id
+							}).then(res => {
+								let report = this.reports[index];
+								this.$emit('decrement', report.total_count);
+								this.reports.splice(index, 1);
+								this.$bvToast.toast(`Ignored and closed moderation report`, {
+									title: 'Moderation Action',
+									autoHideDelay: 5000,
+									appendToast: true
+								});
+							})
+						break;
+
+						case "cw":
+							axios.post(`/api/v0/groups/${this.group.id}/report/action`, {
+								action: 'cw',
+								id: this.reports[index].id
+							}).then(res => {
+								let report = this.reports[index];
+								this.$emit('decrement', report.total_count);
+								this.reports.splice(index, 1);
+								this.$bvToast.toast(`Succesfully applied content warning and closed moderation report`, {
+									title: 'Moderation Action',
+									autoHideDelay: 5000,
+									appendToast: true
+								});
+							})
+						break;
+
+						case "delete":
+							swal('Oops, this is embarassing!', 'We have not implemented this moderation action yet.', 'error');
+						break;
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-moderation-component {
+		min-height: 80vh;
+		margin-bottom: 100px;
+	}
+
+	.popover-wide {
+		min-width: 200px !important;
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupPolls.vue b/resources/assets/components/groups/partials/GroupPolls.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/assets/components/groups/partials/GroupPostModal.vue b/resources/assets/components/groups/partials/GroupPostModal.vue
new file mode 100644
index 000000000..094d98a26
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupPostModal.vue
@@ -0,0 +1,152 @@
+<template>
+	<div class="group-post-modal">
+		<b-modal
+			ref="modal"
+			size="xl"
+			hide-footer
+			hide-header
+			centered
+			body-class="gpm p-0">
+			<div class="d-flex">
+				<div class="gpm-media">
+					<img :src="status.media_attachments[0].preview_url">
+				</div>
+				<div class="p-3" style="width: 30%;">
+					<div class="media align-items-center mb-2">
+						<a :href="status.account.url">
+							<img class="rounded-circle media-avatar border mr-2" :src="status.account.avatar" width="32" height="32">
+						</a>
+						<div class="media-body">
+							<div class="media-body-comment">
+								<p class="media-body-comment-username mb-n1">
+									<a :href="status.account.url" class="text-dark text-decoration-none font-weight-bold">
+										{{status.account.acct}}
+									</a>
+								</p>
+								<p class="media-body-comment-timestamp mb-0">
+									<a class="font-weight-light text-muted small" :href="status.url">
+										{{shortTimestamp(status.created_at)}}
+									</a>
+									<span class="text-lighter" style="padding-left:2px;padding-right:2px;">·</span>
+									<span class="text-muted small"><i class="fas fa-globe"></i></span>
+								</p>
+							</div>
+						</div>
+						<div class="text-right" style="flex-grow:1;">
+							<button class="btn btn-link text-dark py-0" type="button">
+								<span class="fas fa-ellipsis-h text-lighter"></span>
+								<span class="sr-only">Post Menu</span>
+							</button>
+						</div>
+					</div>
+
+					<read-more :status="status" />
+
+					<div class="border-top border-bottom mt-3">
+						<div class="d-flex justify-content-between" style="padding: 8px 5px">
+							<button class="btn btn-link py-0 text-decoration-none btn-sm" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }">
+								<i class="far fa-heart mr-1"></i>
+								{{ status.favourited ? 'Liked' : 'Like' }}
+							</button>
+
+							<button class="btn btn-link py-0 text-decoration-none btn-sm text-muted">
+								<i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+								Comment
+							</button>
+
+							<button class="btn btn-link py-0 text-decoration-none btn-sm" disabled>
+								<i class="fas fa-external-link-alt cursor-pointer text-muted mr-1"></i>
+								Share
+							</button>
+						</div>
+					</div>
+
+					<!-- <comment-drawer
+						:profile="profile"
+						:status="status"
+						:group-id="groupId" /> -->
+				</div>
+			</div>
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import ReadMore from './ReadMore.vue';
+	import CommentDrawer from './CommentDrawer.vue';
+
+	export default {
+		props: {
+			groupId: {
+				type: String
+			},
+
+			status: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			}
+		},
+
+		components: {
+			"read-more": ReadMore,
+			"comment-drawer": CommentDrawer
+		},
+
+		data() {
+			return {
+				loaded: false
+			}
+		},
+
+		mounted() {
+			this.init();
+		},
+
+		methods: {
+			init() {
+				this.loaded = true;
+				this.$refs.modal.show();
+			},
+
+			shortTimestamp(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.gpm {
+		&-media {
+			display: flex;
+			width: 70%;
+
+			img {
+				width: 100%;
+				height: auto;
+				max-height: 70vh;
+				object-fit: contain;
+				background-color: #000;
+			}
+
+		}
+
+		.comment-drawer-component {
+			.my-3 {
+				max-height: 46vh;
+				overflow: auto;
+			}
+		}
+
+		.cdrawer-reply-form {
+			position: absolute;
+			bottom: 0;
+			margin-bottom: 1rem !important;
+			min-width: 310px;
+		}
+	}
+
+</style>
diff --git a/resources/assets/components/groups/partials/GroupSearchModal.vue b/resources/assets/components/groups/partials/GroupSearchModal.vue
new file mode 100644
index 000000000..8cc70039d
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupSearchModal.vue
@@ -0,0 +1,199 @@
+<template>
+	<div class="group-search-modal">
+		<b-modal
+			ref="modal"
+			hide-header
+			hide-footer
+			centered
+			rounded
+			body-class="rounded group-search-modal-wrapper">
+			<div class="d-flex justify-content-between">
+				<autocomplete
+					:search="autocompleteSearch"
+					placeholder="Search this group"
+					aria-label="Search this group"
+					:get-result-value="getSearchResultValue"
+					:debounceTime="700"
+					@submit="onSearchSubmit"
+					style="width: 100%;"
+					ref="autocomplete"
+					>
+						<template #result="{ result, props }">
+						<li
+						v-bind="props"
+						class="autocomplete-result"
+						>
+							<div class="text-truncate">
+								<p class="result-name mb-0 font-weight-bold">
+									{{ result.username }}
+								</p>
+							</div>
+						</li>
+					</template>
+				</autocomplete>
+
+				<button class="btn btn-light border rounded-circle text-lighter ml-3" style="width: 52px;height:50px;" @click="close">
+					<i class="fal fa-times fa-lg"></i>
+				</button>
+			</div>
+
+			<div v-if="recent && recent.length" class="pt-5">
+				<h5 class="mb-2">Recent Searches</h5>
+				<a v-for="(result, index) in recent" class="media align-items-center text-decoration-none text-dark" :href="result.action">
+					<div class="bg-light rounded-circle mr-3 border d-flex justify-content-center align-items-center" style="width: 40px;height:40px">
+						<i class="far fa-search"></i>
+					</div>
+					<div class="media-body">
+						<p class="mb-0">{{ result.value }}</p>
+					</div>
+				</a>
+			</div>
+
+			<div class="pt-5">
+				<h5 class="mb-2">Explore This Group</h5>
+				<div class="media align-items-center" @click="viewMyActivity">
+					<img
+                        :src="profile?.avatar"
+                        width="40"
+                        height="40"
+                        class="mr-3 border rounded-circle"
+                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                    />
+					<div class="media-body">
+						<p class="mb-0">{{ profile?.display_name || profile?.username }}</p>
+						<p class="mb-0 small text-muted">See your group activity.</p>
+					</div>
+				</div>
+				<div class="media align-items-center" @click="viewGroupSearch">
+					<div class="bg-light rounded-circle mr-3 border d-flex justify-content-center align-items-center" style="width: 40px;height:40px">
+						<i class="far fa-search"></i>
+					</div>
+					<div class="media-body">
+						<p class="mb-0">Search all groups</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- <div class="text-center py-3 small">
+				<p class="lead font-weight-normal mb-0">Looking for something?</p>
+				<p class="mb-0">Search {{ group.name }} for posts, comments or members.</p>
+			</div> -->
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import Autocomplete from '@trevoreyre/autocomplete-vue'
+	import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+	export default {
+		props: {
+			group: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			}
+		},
+
+		components: {
+			'autocomplete': Autocomplete,
+		},
+
+		data() {
+			return {
+				query: '',
+				recent: [],
+				loaded: false
+			}
+		},
+
+		methods: {
+			open() {
+				this.fetchRecent();
+				this.$refs.modal.show();
+			},
+
+			close() {
+				this.$refs.modal.hide();
+			},
+
+			fetchRecent() {
+				axios.get('/api/v0/groups/search/getrec', {
+					params: {
+						g: this.group.id
+					}
+				}).then(res => {
+					this.recent = res.data;
+				})
+			},
+
+			autocompleteSearch(q) {
+				if (!q || q.length < 2) {
+					return [];
+				}
+
+				return axios.post(`/api/v0/groups/search/lac`, {
+					q: q,
+					g: this.group.id,
+					v: '0.2'
+				}).then(res => {
+					return res.data;
+				});
+				return [];
+			},
+
+			getSearchResultValue(result) {
+				return result.username;
+			},
+
+			onSearchSubmit(result) {
+				if (result.length < 1) {
+					return [];
+				}
+
+				axios.post('/api/v0/groups/search/addrec', {
+					g: this.group.id,
+					q: {
+						value: result.username,
+						action: result.url
+					}
+				}).then(res => {
+					location.href = result.url;
+				});
+			},
+
+			viewMyActivity() {
+				location.href = `/groups/${this.group.id}/user/${this.profile.id}?rf=group_search`;
+			},
+
+			viewGroupSearch() {
+				location.href = `/groups/home?ct=gsearch&rf=group_search&rfid=${this.group.id}`;
+			},
+
+			addToRecentSearches() {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-search-modal {
+
+		&-wrapper {
+			.media {
+				height: 60px;
+				padding: 10px;
+				border-radius: 10px;
+				user-select: none;
+				cursor: pointer;
+
+				&:hover {
+					background-color: #E5E7EB;
+				}
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupStatus.vue b/resources/assets/components/groups/partials/GroupStatus.vue
new file mode 100644
index 000000000..439fd03b4
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupStatus.vue
@@ -0,0 +1,873 @@
+<template>
+	<div class="status-card-component" :class="{ 'status-card-sm': loaded && size === 'small' }">
+		 <div v-if="loaded" class="shadow-none mb-3">
+			<div v-if="status.pf_type !== 'poll'" :class="{ 'border-top-0': !hasTopBorder }" class="card shadow-sm" style="border-radius: 18px !important;">
+                <parent-unavailable
+                    v-if="parentUnavailable == true"
+                    :permalink-mode="permalinkMode"
+                    :permalink-status="childContext"
+                    :status="status"
+                    :profile="profile"
+                    :group-id="groupId"
+                />
+				<div v-else class="card-body pb-0">
+                    <group-post-header
+                        :group="group"
+                        :status="status"
+                        :profile="profile"
+                        :showGroupHeader="showGroupHeader"
+                        :showGroupChevron="showGroupChevron"
+                    />
+
+					<div>
+						<div>
+							<div class="pl-2">
+
+								<div v-if="status.sensitive && status.content.length" class="card card-body shadow-none border bg-light py-2 my-2 text-center user-select-none cursor-pointer" @click="status.sensitive = false">
+									<div class="media justify-content-center align-items-center">
+										<div class="mx-3">
+											<i class="far fa-exclamation-triangle fa-2x text-lighter"></i>
+										</div>
+										<div class="media-body">
+											<p class="font-weight-bold mb-0">Warning, may contain sensitive content. </p>
+											<p class="mb-0 text-lighter small text-center font-weight-bold">Click to view</p>
+										</div>
+									</div>
+								</div>
+
+                                <template v-else>
+								    <p v-html="renderedCaption" class="pt-2 text-break" style="font-size:15px;"></p>
+                                </template>
+
+								<photo-presenter
+									v-if="status.pf_type === 'photo'"
+									class="col px-0 border mb-4 rounded"
+									:status="status"
+									v-on:lightbox="showPostModal"
+									v-on:togglecw="status.sensitive = false"
+									@click="showPostModal"/>
+
+								<video-presenter
+									v-else-if="status.pf_type === 'video'"
+									class="col px-0 border mb-4 rounded"
+									:status="status"
+									v-on:togglecw="status.sensitive = false" />
+
+								<photo-album-presenter
+									v-else-if="status.pf_type === 'photo:album'"
+									class="col px-0 border mb-4 rounded"
+									:status="status" v-on:lightbox="lightbox"
+									v-on:togglecw="status.sensitive = false" />
+
+								<video-album-presenter
+									v-else-if="status.pf_type === 'video:album'"
+									class="col px-0 border mb-4 rounded"
+									:status="status"
+									v-on:togglecw="status.sensitive = false" />
+
+								<mixed-album-presenter
+									v-else-if="status.pf_type === 'photo:video:album'"
+									:status="status"
+									class="col px-0 border mb-4 rounded"
+									v-on:lightbox="lightbox"
+									v-on:togglecw="status.sensitive = false" />
+
+								<div v-if="status.favourites_count || status.reply_count" class="border-top my-0">
+									<div class="d-flex justify-content-between py-2" style="font-size: 14px;">
+										<button v-if="status.favourites_count" class="btn btn-light py-0 text-decoration-none text-dark" style="font-size: 12px; font-weight: 600;" @click="showLikesModal($event)">
+											{{ status.favourites_count }} {{ status.favourites_count == 1 ? 'Like' : 'Likes' }}
+										</button>
+
+										<button v-if="status.reply_count" class="btn btn-light py-0 text-decoration-none text-dark" style="font-size: 12px; font-weight: 600;" @click="commentFocus($event)">
+											{{ status.reply_count }} {{ status.reply_count == 1 ? 'Comment' : 'Comments' }}
+										</button>
+									</div>
+								</div>
+
+								<div v-if="profile" class="border-top my-0">
+									<div class="d-flex justify-content-between py-2 px-4">
+										<!-- <button class="btn btn-link py-0 text-decoration-none" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }"
+												@click="likeStatus(status, $event);">
+											<i class="far fa-heart mr-1">
+											</i>
+											{{ status.favourited ? 'Liked' : 'Like' }}
+										</button> -->
+										<div>
+											<button :id="'lr__'+status.id" class="btn btn-link py-0 text-decoration-none" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }" @click="likeStatus(status, $event);">
+												<i class="far fa-heart mr-1"></i>
+												{{ status.favourited ? 'Liked' : 'Like' }}
+											</button>
+										</div>
+
+										<button class="btn btn-link py-0 text-decoration-none text-muted" @click="commentFocus($event)">
+											<i class="far fa-comment cursor-pointer text-muted mr-1">
+											</i>
+											Comment
+										</button>
+
+										<button class="btn btn-link py-0 text-decoration-none" disabled>
+											<i class="fas fa-external-link-alt cursor-pointer text-muted mr-1">
+											</i>
+											Share
+										</button>
+									</div>
+								</div>
+
+								<comment-drawer
+									v-if="showCommentDrawer"
+									:permalink-mode="permalinkMode"
+									:permalink-status="childContext"
+									:status="status"
+									:profile="profile"
+									:group-id="groupId" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div v-else class="border">
+				<poll-card :status="status" :profile="profile" v-on:status-delete="statusDeleted" :showBorder="false" />
+
+				<div class="bg-white" style="padding: 0 1.25rem">
+					<div v-if="profile" class="border-top my-0">
+						<div class="d-flex justify-content-between py-2 px-4">
+							<!-- <button class="btn btn-link py-0 text-decoration-none" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }" @click="likeStatus(status, $event);"> -->
+							<div>
+								<button :id="'lr__'+status.id" class="btn btn-link py-0 text-decoration-none" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }" @click="likeStatus(status, $event);">
+									<i class="far fa-heart mr-1"></i>
+									{{ status.favourited ? 'Liked' : 'Like' }}
+								</button>
+
+								<b-popover :target="'lr__'+status.id" triggers="hover" placement="top">
+									<template #title>Popover Title</template>
+									I am popover <b>component</b> content!
+								</b-popover>
+							</div>
+
+							<button class="btn btn-link py-0 text-decoration-none text-muted" @click="commentFocus($event)">
+								<i class="far fa-comment cursor-pointer text-muted mr-1"></i>
+								Comment
+							</button>
+
+							<button class="btn btn-link py-0 text-decoration-none" disabled>
+								<i class="fas fa-external-link-alt cursor-pointer text-muted mr-1">
+								</i>
+								Share
+							</button>
+						</div>
+					</div>
+
+					<comment-drawer
+						v-if="showCommentDrawer"
+						:permalink-mode="permalinkMode"
+						:permalink-status="childContext"
+						:profile="profile"
+						:status="status"
+						:group-id="groupId" />
+				</div>
+			</div>
+
+			<!-- <div v-else class="card rounded-0 border-top-0 status-card card-md-rounded-0 shadow-none border">
+				<div v-if="status" class="card-header d-inline-flex align-items-center bg-white">
+					<div>
+						<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
+					</div>
+					<div class="pl-2">
+						<a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
+							Loading...
+						</a>
+						<span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
+							<i class="fas fa-certificate text-danger fa-stack-1x"></i>
+							<i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
+						</span>
+						<div class="d-flex align-items-center">
+							<a v-if="status.place" class="small text-decoration-none text-muted" :href="'/discover/places/'+status.place.id+'/'+status.place.slug" title="Location" data-toggle="tooltip"><i class="fas fa-map-marked-alt"></i> {{status.place.name}}, {{status.place.country}}</a>
+						</div>
+					</div>
+					<div class="text-right" style="flex-grow:1;">
+						<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
+							<span class="fas fa-ellipsis-h text-lighter"></span>
+							<span class="sr-only">Post Menu</span>
+						</button>
+					</div>
+				</div>
+
+				<div class="postPresenterContainer" style="background: #000;">
+
+					<div v-if="status.pf_type === 'photo'" class="w-100">
+						<photo-presenter
+							:status="status"
+							v-on:lightbox="lightbox"
+							v-on:togglecw="status.sensitive = false"/>
+					</div>
+
+					<div v-else-if="status.pf_type === 'video'" class="w-100">
+						<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
+					</div>
+
+					<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
+						<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
+					</div>
+
+					<div v-else-if="status.pf_type === 'video:album'" class="w-100">
+						<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
+					</div>
+
+					<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
+						<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
+					</div>
+
+					<div v-else class="w-100">
+						<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
+					</div>
+
+				</div>
+
+				<div v-if="config.features.label.covid.enabled && status.label && status.label.covid == true" class="card-body border-top border-bottom py-2 cursor-pointer pr-2" @click="labelRedirect()">
+					<p class="font-weight-bold d-flex justify-content-between align-items-center mb-0">
+						<span>
+							<i class="fas fa-info-circle mr-2"></i>
+							For information about COVID-19, {{config.features.label.covid.org}}
+						</span>
+						<span>
+							<i class="fas fa-chevron-right text-lighter"></i>
+						</span>
+					</p>
+				</div>
+
+				<div class="card-body">
+					<div v-if="reactionBar" class="reactions my-1 pb-2">
+						<h3 v-if="status.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
+						<h3 v-else class="far fa-heart pr-3 m-0 like-btn text-dark cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
+						<h3 v-if="!status.comments_disabled" class="far fa-comment text-dark pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
+						<span v-if="status.taggedPeople.length" class="float-right">
+							<span class="font-weight-light small" style="color:#718096">
+								<i class="far fa-user" data-toggle="tooltip" title="Tagged People"></i>
+								<span v-for="(tag, index) in status.taggedPeople" class="mr-n2">
+									<a :href="'/'+tag.username">
+										<img :src="tag.avatar" width="20px" height="20px" class="border rounded-circle" data-toggle="tooltip" :title="'@'+tag.username" alt="Avatar">
+									</a>
+								</span>
+							</span>
+						</span>
+					</div>
+
+					<div v-if="status.liked_by.username && status.liked_by.username !== profile.username" class="likes mb-1">
+						<span class="like-count">Liked by
+							<a class="font-weight-bold text-dark" :href="status.liked_by.url">{{status.liked_by.username}}</a>
+							<span v-if="status.liked_by.others == true">
+								and <span class="font-weight-bold" v-if="status.liked_by.total_count_pretty">{{status.liked_by.total_count_pretty}}</span> <span class="font-weight-bold">others</span>
+							</span>
+						</span>
+					</div>
+					<div v-if="status.pf_type != 'text'" class="caption">
+						<p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
+							<span class="username font-weight-bold">
+								<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
+							</span>
+							<span class="status-content" v-html="status.content"></span>
+						</p>
+					</div>
+					<div class="timestamp mt-2">
+						<p class="small mb-0">
+							<a v-if="status.visibility != 'archived'" :href="statusUrl(status)" class="text-muted text-uppercase">
+								<timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
+							</a>
+							<span v-else class="text-muted text-uppercase">
+								Posted <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
+							</span>
+
+							<span v-if="recommended">
+								<span class="px-1">&middot;</span>
+								<span class="text-muted">Based on popular and trending content</span>
+							</span>
+						</p>
+					</div>
+				</div>
+			</div> -->
+
+			<!-- <div v-else :class="{ 'border-top-0': !hasTopBorder }" class="card shadow-none border rounded-0">
+				<div class="card-body pb-0">
+					<div class="media">
+						<img class="rounded-circle box-shadow mr-2" :src="status.account.avatar" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
+						<div class="media-body">
+							<div class="pl-2 d-flex align-items-top">
+								<div>
+									<p class="mb-0">
+										<a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
+											Loading...
+										</a>
+									</p>
+									<p class="mb-0">
+										<a class="font-weight-light text-muted small"
+										   :href="statusUrl(status)">{{shortTimestamp(status.created_at)}}</a>
+										<span class="text-lighter" style="padding-left:2px;padding-right:2px;">·</span>
+										<span class="text-muted small"><i class="fas fa-globe"></i></span>
+									</p>
+								</div>
+								<span class="text-right" style="flex-grow:1;">
+									<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
+										<span class="fas fa-ellipsis-h text-lighter"></span>
+										<span class="sr-only">Post Menu</span>
+									</button>
+								</span>
+							</div>
+						</div>
+					</div>
+					<div>
+						<div>
+							<div class="pl-2">
+
+								<details v-if="status.sensitive">
+									<summary class="mb-2 font-weight-bold text-muted">Content Warning</summary>
+									<p v-html="status.content" class="pt-2 text-break status-content"></p>
+								</details>
+
+								<p v-else v-html="status.content" class="pt-2 text-break" style="font-size:15px;"></p>
+
+								<div class="mb-1 row px-3">
+									<photo-presenter
+										v-if="status.pf_type === 'photo'"
+										class="col px-0 border mb-4 rounded"
+										:status="status"
+										v-on:lightbox="lightbox"
+										v-on:togglecw="status.sensitive = false"/>
+
+									<video-presenter
+										v-else-if="status.pf_type === 'video'"
+										class="col px-0 border mb-4 rounded"
+										:status="status"
+										v-on:togglecw="status.sensitive = false" />
+
+									<photo-album-presenter
+										v-else-if="status.pf_type === 'photo:album'"
+										class="col px-0 border mb-4 rounded"
+										:status="status" v-on:lightbox="lightbox"
+										v-on:togglecw="status.sensitive = false" />
+
+									<video-album-presenter
+										v-else-if="status.pf_type === 'video:album'"
+										class="col px-0 border mb-4 rounded"
+										:status="status"
+										v-on:togglecw="status.sensitive = false" />
+
+									<mixed-album-presenter
+										v-else-if="status.pf_type === 'photo:video:album'"
+										:status="status"
+										class="col px-0 border mb-4 rounded"
+										v-on:lightbox="lightbox"
+										v-on:togglecw="status.sensitive = false" />
+								</div>
+
+								<div>
+									<div class="pl-2">
+
+										<div v-if="status.favourites_count || status.reply_count" class="border-top my-0">
+											<div class="d-flex justify-content-between py-2" style="font-size: 14px;font-weight: 400;">
+												<div v-if="status.favourites_count">
+													{{ status.favourites_count }} Likes
+												</div>
+
+												<button v-if="status.reply_count" class="btn btn-link py-0 text-decoration-none text-dark" @click="commentFocus($event)">
+													{{ status.reply_count }} Comments
+												</button>
+											</div>
+										</div>
+
+										<div class="border-top my-0">
+											<div class="d-flex justify-content-between py-2 px-4">
+												<button class="btn btn-link py-0 text-decoration-none" :class="{ 'font-weight-bold': status.favourited, 'text-primary': status.favourited, 'text-muted': !status.favourited }"
+														@click="likeStatus(status, $event);">
+													<i class="far fa-heart mr-1">
+													</i>
+													{{ status.favourited ? 'Liked' : 'Like' }}
+												</button>
+
+												<button class="btn btn-link py-0 text-decoration-none text-muted" @click="commentFocus($event)">
+													<i class="far fa-comment cursor-pointer text-muted mr-1">
+													</i>
+													Comment
+												</button>
+
+												<button class="btn btn-link py-0 text-decoration-none" disabled>
+													<i class="fas fa-external-link-alt cursor-pointer text-muted mr-1">
+													</i>
+													Share
+												</button>
+											</div>
+										</div>
+
+										<comment-drawer
+											v-if="showCommentDrawer"
+											:status="permalinkMode ? parentContext : status"
+											:profile="profile"
+											:permalink-mode="permalinkMode"
+											:permalink-status="childContext"
+											:group-id="groupId" />
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div> -->
+
+			<context-menu
+				v-if="profile"
+				ref="contextMenu"
+				:status="status"
+				:profile="profile"
+				:group-id="groupId"
+				v-on:status-delete="statusDeleted"
+			/>
+
+			<post-modal
+				v-if="showModal"
+				ref="modal"
+				:status="status"
+				:profile="profile"
+				:groupId="groupId"
+				/>
+
+		</div>
+
+		<div v-else class="card card-body shadow-none border mb-3" style="height: 200px;">
+			<div class="w-100 h-100 d-flex justify-content-center align-items-center">
+				<div class="spinner-border text-primary" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+
+		<!-- <b-modal
+			v-if="likes && likes.length"
+			ref="likeBox"
+			title="Liked by"
+			size="sm"
+			centered
+			hide-footer
+			title="Likes"
+			body-class="list-group-flush py-3 px-0">
+			<div class="list-group">
+				<div class="list-group-item border-0 py-1" v-for="(user, index) in likes" :key="'modal_likes_'+index+status.id">
+					<div class="media">
+						<a :href="user.url">
+							<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg';">
+						</a>
+						<div class="media-body">
+							<p class="mb-0" style="font-size: 14px">
+								<a :href="user.url" class="font-weight-bold text-dark">
+									{{user.username}}
+								</a>
+							</p>
+							<p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
+								<span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
+							</p>
+							<p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
+								{{user.display_name}}
+							</p>
+						</div>
+					</div>
+				</div>
+				<infinite-loading v-if="likes && likes.length" @infinite="infiniteLikesHandler" spinner="spiral">
+					<div slot="no-more"></div>
+					<div slot="no-results"></div>
+				</infinite-loading>
+			</div>
+		</b-modal> -->
+	</div>
+</template>
+
+<script type="text/javascript">
+	import CommentDrawer from './CommentDrawer.vue';
+	import ContextMenu from './ContextMenu.vue';
+	import PollCard from '~/partials/PollCard.vue';
+	import MixedAlbumPresenter from '@/presenter/MixedAlbumPresenter.vue';
+	import PhotoAlbumPresenter from '@/presenter/PhotoAlbumPresenter.vue';
+	import PhotoPresenter from '@/presenter/PhotoPresenter.vue';
+	import VideoAlbumPresenter from '@/presenter/VideoAlbumPresenter.vue';
+	import VideoPresenter from '@/presenter/VideoPresenter.vue';
+	import GroupPostModal from './GroupPostModal.vue';
+    import { autoLink } from 'twitter-text';
+    import ParentUnavailable from '@/groups/partials/Status/ParentUnavailable.vue';
+    import GroupPostHeader from '@/groups/partials/Status/GroupHeader.vue';
+
+	export default {
+		props: {
+			groupId: {
+				type: String
+			},
+
+			group: {
+				type: Object
+			},
+
+			profile: {
+				type: Object
+			},
+
+			prestatus: {
+				type: Object
+			},
+
+			recommended: {
+				type: Boolean,
+				default: false
+			},
+
+			reactionBar: {
+				type: Boolean,
+				default: true
+			},
+
+			hasTopBorder: {
+				type: Boolean,
+				default: true
+			},
+
+			size: {
+				type: String,
+				validator: (val) => ['regular', 'small'].includes(val),
+				default: 'regular'
+			},
+
+			permalinkMode: {
+				type: Boolean,
+				default: false
+			},
+
+			showGroupChevron: {
+				type: Boolean,
+				default: false
+			},
+
+			showGroupHeader: {
+				type: Boolean,
+				default: false
+			}
+		},
+
+		components: {
+			"comment-drawer": CommentDrawer,
+			"context-menu": ContextMenu,
+			"poll-card": PollCard,
+			"mixed-album-presenter": MixedAlbumPresenter,
+			"photo-album-presenter": PhotoAlbumPresenter,
+			"photo-presenter": PhotoPresenter,
+			"video-album-presenter": VideoAlbumPresenter,
+			"video-presenter": VideoPresenter,
+			"post-modal": GroupPostModal,
+            "parent-unavailable": ParentUnavailable,
+            "group-post-header": GroupPostHeader
+		},
+
+		data() {
+			return {
+				config: window.App.config,
+				status: {},
+				loaded: false,
+				replies: [],
+				replyId: null,
+				lightboxMedia: false,
+				showSuggestions: true,
+				showReadMore: true,
+				replyStatus: {},
+				replyText: '',
+				replyNsfw: false,
+				emoji: window.App.util.emoji,
+				commentDrawerKey: 0,
+				showCommentDrawer: false,
+				parentContext: undefined,
+				childContext: undefined,
+				parentUnavailable: undefined,
+				showModal: false,
+				likes: [],
+				likesPage: 1,
+				openLikesModal: false,
+			}
+		},
+
+        computed: {
+            renderedCaption: {
+                get() {
+                    if(this.prestatus) {
+                        const gid = this.prestatus.gid;
+                        if(this.prestatus.content == null) {
+                            return ""
+                        }
+                        return autoLink(
+                            this.prestatus.content,
+                            {
+                                hashtagUrlBase: App.config.site.url + `/groups/${gid}/topics/`,
+                                usernameUrlBase: App.config.site.url + `/groups/${gid}/username/`
+                            }
+                        )
+                    }
+
+                    return this.prestatus.content;
+                }
+            }
+        },
+
+		mounted() {
+			this.status = this.prestatus;
+			let self = this;
+			setTimeout(() => {
+				if(this.permalinkMode == true && this.prestatus.in_reply_to_id) {
+					self.childContext = self.status;
+					axios.get('/api/v0/groups/status', {
+						params: {
+							gid: self.groupId,
+							sid: self.status.in_reply_to_id
+						}
+					}).then(res => {
+						self.status = res.data;
+						self.parentUnavailable = false;
+						self.showCommentDrawer = true;
+						self.parentContext = res.data;
+						self.loaded = true;
+					}).catch(err => {
+						self.status = this.prestatus;
+						self.parentUnavailable = true;
+						self.showCommentDrawer = true;
+						self.parentContext = this.prestatus;
+						self.loaded = true;
+					});
+				} else {
+					self.parentUnavailable = false;
+					self.showCommentDrawer = false;
+					self.loaded = true;
+				}
+			}, 100);
+		},
+
+		methods: {
+			formatCount(count) {
+				return App.util.format.count(count);
+			},
+
+			statusUrl(status) {
+				if(status.local == true) {
+					return status.url;
+				}
+
+				return '/i/web/post/_/' + status.account.id + '/' + status.id;
+			},
+
+			profileUrl(status) {
+				if(status.local == true) {
+					return status.account.url;
+				}
+
+				return '/i/web/profile/_/' + status.account.id;
+			},
+
+			timestampFormat(timestamp) {
+				let ts = new Date(timestamp);
+				return ts.toDateString() + ' ' + ts.toLocaleTimeString();
+			},
+
+			shortTimestamp(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+
+			statusCardUsernameFormat(status) {
+				if(status.account.local == true) {
+					return status.account.username;
+				}
+
+				let fmt = window.App.config.username.remote.format;
+				let txt = window.App.config.username.remote.custom;
+				let usr = status.account.username;
+				let dom = document.createElement('a');
+				dom.href = status.account.url;
+				dom = dom.hostname;
+
+				switch(fmt) {
+					case '@':
+					return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
+					break;
+
+					case 'from':
+					return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
+					break;
+
+					case 'custom':
+					return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
+					break;
+
+					default:
+					return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
+					break;
+				}
+			},
+
+			lightbox(status) {
+				window.location.href = status.media_attachments[0].url;
+			},
+
+			labelRedirect(type) {
+				let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url);
+				window.location.href = url;
+			},
+
+			likeStatus(status, event) {
+				event.currentTarget.blur();
+				let count = status.favourites_count;
+                let state = status.favourited ? 'unlike' : 'like';
+				axios.post('/api/v0/groups/status/' + state, {
+					sid: status.id,
+					gid: this.groupId
+				}).then(res => {
+					status.favourited = state;
+					status.favourites_count = state? count + 1 : count - 1;
+					status.favourited = state;
+					if(status.favourited) {
+						setTimeout(function() {
+							event.target.classList.add('animate__animated', 'animate__bounce');
+						},100);
+					}
+				}).catch(err => {
+					if(err.response.status == 422) {
+						swal('Error', err.response.data.error, 'error');
+					} else {
+						swal('Error', 'Something went wrong, please try again later.', 'error');
+					}
+				});
+				window.navigator.vibrate(200);
+			},
+
+			commentFocus($event) {
+				$event.target.blur();
+				this.showCommentDrawer = !this.showCommentDrawer;
+			},
+
+			commentSubmit(status, $event) {
+				this.replySending = true;
+				let id = status.id;
+				let comment = this.replyText;
+				let limit = this.config.uploader.max_caption_length;
+				if(comment.length > limit) {
+					this.replySending = false;
+					swal('Comment Too Long', 'Please make sure your comment is '+limit+' characters or less.', 'error');
+					return;
+				}
+				axios.post('/i/comment', {
+					item: id,
+					comment: comment,
+					sensitive: this.replyNsfw
+				}).then(res => {
+					this.replyText = '';
+					this.replies.push(res.data.entity);
+					this.$refs.replyModal.hide();
+				});
+				this.replySending = false;
+			},
+
+			owner(status) {
+				return this.profile.id === status.account.id;
+			},
+
+			admin() {
+				return this.profile.is_admin == true;
+			},
+
+			ownerOrAdmin(status) {
+				return this.owner(status) || this.admin();
+			},
+
+			ctxMenu() {
+				this.$refs.contextMenu.open();
+			},
+
+			timeAgo(ts) {
+				return App.util.format.timeAgo(ts);
+			},
+
+			statusDeleted(status) {
+				this.$emit('status-delete');
+			},
+
+			showPostModal() {
+				this.showModal = true;
+				this.$refs.modal.init();
+			},
+
+			showLikesModal(event) {
+				if(event && event.hasOwnProperty('currentTarget')) {
+					event.currentTarget().blur();
+				}
+
+				this.$emit('likes-modal');
+				return;
+
+				if(this.likes.length) {
+					this.$refs.likeBox.show();
+					return;
+				}
+
+				axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.status.id)
+				.then(res => {
+					this.likes = res.data.data;
+					this.$refs.likeBox.show();
+				});
+			},
+
+			infiniteLikesHandler($state) {
+				axios.get('/api/v0/groups/'+this.groupId+'/likes/'+this.status.id, {
+					params: {
+						page: this.likesPage,
+					},
+				}).then(({ data }) => {
+					if (data.data.length > 0) {
+						this.likes.push(...data.data);
+						this.likesPage++;
+						$state.loaded();
+					} else {
+						$state.complete();
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.status-card-component {
+		.status-content {
+			font-size: 17px;
+		}
+
+		&.status-card-sm {
+			.status-content {
+				font-size: 14px;
+			}
+
+			.fa-lg {
+				font-size: unset;
+				line-height: unset;
+				vertical-align: unset;
+			}
+		}
+	}
+
+	.reaction-bar {
+		width: auto;
+		max-width: unset;
+		left: -50px !important;
+		border: 1px solid #F3F4F6 !important;
+
+		.popover-body {
+			padding: 2px;
+		}
+
+		.arrow {
+			display: none;
+		}
+
+		img {
+			width: 48px;
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/GroupTopics.vue b/resources/assets/components/groups/partials/GroupTopics.vue
new file mode 100644
index 000000000..ed4885b1e
--- /dev/null
+++ b/resources/assets/components/groups/partials/GroupTopics.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="group-topics-component">
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-8">
+				<div class="card card-body border shadow-sm">
+					<div class="d-flex justify-content-between align-items-center mb-3">
+						<p class="h4 font-weight-bold mb-0">Group Topics</p>
+						<select class="form-control bg-light rounded-lg border font-weight-bold py-2" style="width:95px;" disabled>
+							<option>All</option>
+							<option>Pinned</option>
+						</select>
+					</div>
+
+					<div v-if="feed.length">
+						<div v-for="(tag, index) in feed" class="">
+							<div class="media py-2">
+								<i class="fas fa-hashtag fa-lg text-lighter mr-3 mt-2"></i>
+								<div :class="{ 'border-bottom': index != feed.length - 1 }" class="media-body">
+									<a :href="tag.url" class="font-weight-bold mb-1 text-dark" style="font-size: 16px;">
+										{{ tag.name }}
+									</a>
+									<p style="font-size: 13px;" class="text-muted">{{ tag.count }} posts in this group</p>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div v-else class="py-5">
+						<p class="lead text-center font-weight-bold">No topics found</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+				feed: []
+			}
+		},
+
+		mounted() {
+			this.fetchTopics();
+		},
+
+		methods: {
+			fetchTopics() {
+				axios.get('/api/v0/groups/topics/list', {
+					params: {
+						gid: this.group.id
+					}
+				}).then(res => {
+					this.feed = res.data;
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-topics-component {
+		margin-bottom: 50vh;
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/LeaveGroup.vue b/resources/assets/components/groups/partials/LeaveGroup.vue
new file mode 100644
index 000000000..417c29347
--- /dev/null
+++ b/resources/assets/components/groups/partials/LeaveGroup.vue
@@ -0,0 +1,9 @@
+<template>
+	
+</template>
+
+<script type="text/javascript">
+	export default {
+		
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/MemberLimitInteractionsModal.vue b/resources/assets/components/groups/partials/MemberLimitInteractionsModal.vue
new file mode 100644
index 000000000..143b47575
--- /dev/null
+++ b/resources/assets/components/groups/partials/MemberLimitInteractionsModal.vue
@@ -0,0 +1,172 @@
+<template>
+	<div>
+		<b-modal
+			v-if="profile && profile.hasOwnProperty('avatar')"
+			ref="home"
+			hide-footer
+			centered
+			rounded
+			title="Limit Interactions"
+			body-class="rounded">
+
+			<div class="media mb-3">
+				<a :href="profile.url" class="text-dark text-decoration-none">
+					<img :src="profile.avatar" width="56" height="56" class="rounded-circle border mr-2" />
+				</a>
+
+				<div class="media-body">
+					<p class="lead font-weight-bold mb-0">
+						<a :href="profile.url" class="text-dark text-decoration-none">{{profile.username}}</a>
+						<span v-if="profile.role == 'founder'" class="member-label rounded ml-1">Admin</span>
+					</p>
+					<p class="text-muted mb-0">Member since {{formatDate(profile.joined)}}</p>
+				</div>
+			</div>
+
+			<div class="w-100 bg-light mb-1 font-weight-bold d-flex justify-content-center align-items-center border rounded" style="min-height:240px;">
+				<div v-if="limitsLoaded" class="py-3">
+					<p class="lead mb-0">Interaction Permissions</p>
+					<p class="small text-muted">Last updated: {{ updated ? formatDate(updated) : 'Never' }}</p>
+
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" v-model="limits.can_post" :disabled="savingChanges">
+						<label class="form-check-label">
+							Can create posts
+						</label>
+					</div>
+
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" v-model="limits.can_comment" :disabled="savingChanges">
+						<label class="form-check-label">
+							Can create comments
+						</label>
+					</div>
+
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" v-model="limits.can_like" :disabled="savingChanges">
+						<label class="form-check-label">
+							Can like posts and comments
+						</label>
+					</div>
+
+					<hr>
+
+					<button class="btn btn-primary font-weight-bold float-right" @click.prevent="saveChanges" :disabled="savingChanges" style="width:130px;">
+						<b-spinner v-if="savingChanges" variant="light" small />
+						<span v-else>Save changes</span>
+					</button>
+				</div>
+				<div v-else class="d-flex align-items-center flex-column">
+					 <b-spinner variant="muted"  />
+					 <p class="pt-3 small text-muted font-weight-bold">Loading interaction limits...</p>
+				</div>
+			</div>
+		</b-modal>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			group: {
+				type: Object
+			},
+			profile: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+				limitsLoaded: false,
+				limits: {
+					can_post: true,
+					can_comment: true,
+					can_like: true
+				},
+				updated: null,
+				savingChanges: false
+			}
+		},
+
+		methods: {
+			fetchInteractionLimits() {
+				axios.get(`/api/v0/groups/${this.group.id}/members/interaction-limits`, {
+					params: {
+						profile_id: this.profile.id
+					}
+				})
+				.then(res => {
+					this.limits = res.data.limits;
+					this.updated = res.data.updated_at;
+					this.limitsLoaded = true;
+				}).catch(err => {
+					this.$refs.home.hide();
+					swal('Oops!', 'Cannot fetch interaction limits at this time, please try again later.', 'error');
+				})
+			},
+
+			open(profile) {
+				this.loaded = true;
+				this.$refs.home.show();
+				this.fetchInteractionLimits();
+			},
+
+			formatDate(ts) {
+				return new Date(ts).toDateString();
+			},
+
+			saveChanges() {
+				event.currentTarget.blur();
+				this.savingChanges = true;
+
+				axios.post(`/api/v0/groups/${this.group.id}/members/interaction-limits`, {
+					profile_id: this.profile.id,
+					can_post: this.limits.can_post,
+					can_comment: this.limits.can_comment,
+					can_like: this.limits.can_like,
+				})
+				.then(res => {
+					this.savingChanges = false;
+					this.$refs.home.hide();
+
+					this.$bvToast.toast(`Updated interaction limits for ${this.profile.username}`, {
+						title: 'Success',
+						variant: 'success',
+						autoHideDelay: 5000
+					});
+				}).catch(err => {
+					this.savingChanges = false;
+					this.$refs.home.hide();
+
+					if(err.response.status == 422 && err.response.data.error == 'limit_reached') {
+							swal('Limit Reached', 'You cannot add any more member limitations', 'info');
+							// swal({
+							// 	title: 'Limit Reached',
+							// 	text: 'You cannot add any more member limitations',
+							// 	icon: 'info',
+							// 	buttons: {
+							// 		info: {
+							// 			className: 'btn-light border',
+							// 			text: 'More info',
+							// 			value: 'more-info'
+							// 		},
+
+							// 		ok: {
+							// 			text: 'Ok',
+							// 			value: null
+							// 		},
+							// 	}
+							// }).then(value => {
+							// 	if(value == 'more-info') {
+							// 		location.href = '/site/kb/groups/interaction-limits';
+							// 	}
+							// });
+					} else {
+						swal('Oops!', 'An error occured while processing this request, please try again later.', 'error');
+					}
+				});
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/Membership/MemberOnlyWarning.vue b/resources/assets/components/groups/partials/Membership/MemberOnlyWarning.vue
new file mode 100644
index 000000000..cea224a5f
--- /dev/null
+++ b/resources/assets/components/groups/partials/Membership/MemberOnlyWarning.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="member-only-warning">
+        <div class="member-only-warning-wrapper">
+            <h3>Content unavailable</h3>
+            <p>You need to join this Group before you can access this content.</p>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .member-only-warning {
+        display: flex;
+        justify-content: center;
+
+        &-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            width: 100%;
+            max-width: 550px;
+            border-radius: 10px;
+            border: 1px solid var(--border-color);
+            padding: 4rem 1rem;
+
+
+            h3 {
+                font-weight: bold;
+                letter-spacing: -1px;
+            }
+
+            p {
+                font-size: 1.2em;
+                margin-bottom: 0px;
+            }
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/Page/GroupBanner.vue b/resources/assets/components/groups/partials/Page/GroupBanner.vue
new file mode 100644
index 000000000..8038cdce5
--- /dev/null
+++ b/resources/assets/components/groups/partials/Page/GroupBanner.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="px-md-5" style="background-color: #fff;">
+        <img
+            v-if="group.metadata && group.metadata.hasOwnProperty('header')"
+            :src="group.metadata.header.url"
+            class="header-image">
+        <div v-else class="header-jumbotron"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            group: {
+                type: Object
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .header-image {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        max-height: 220px;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        margin-top:-1px;
+        border: 1px solid var(--light);
+        margin-bottom: 0px;
+
+        @media(min-width: 768px) {
+            max-height: 420px;
+        }
+    }
+
+    .header-jumbotron {
+        background-color: #F3F4F6;
+        height: 320px;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/Page/GroupHeaderDetails.vue b/resources/assets/components/groups/partials/Page/GroupHeaderDetails.vue
new file mode 100644
index 000000000..baeb2dfd5
--- /dev/null
+++ b/resources/assets/components/groups/partials/Page/GroupHeaderDetails.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="col-12 group-feed-component-header px-3 px-md-5">
+        <div class="media align-items-end">
+            <img
+                v-if="group.metadata && group.metadata.hasOwnProperty('avatar')"
+                :src="group.metadata.avatar.url"
+                width="169"
+                height="169"
+                class="bg-white mx-4 rounded-circle border shadow p-1"
+                style="object-fit: cover;"
+                :style="{ 'margin-top': group.metadata && group.metadata.hasOwnProperty('header') && group.metadata.header.url ? '-100px' : '0' }"
+            />
+
+            <div v-if="!group || !group.name" class="media-body">
+                <h3 class="d-flex align-items-start">
+                    <span>Loading...</span>
+                </h3>
+            </div>
+            <div v-else class="media-body px-3">
+                <h3 class="d-flex align-items-start">
+                    <span>{{ group.name.slice(0,118) }}</span>
+                    <sup v-if="group.verified" class="fa-stack ml-n2" title="Verified Group" data-toggle="tooltip">
+                        <i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+                        <i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+                    </sup>
+                </h3>
+                <p class="text-muted mb-0" style="font-weight: 300;">
+                    <span>
+                        <i class="fas fa-globe mr-1"></i>
+                        {{ group.membership == 'all' ? 'Public Group' : 'Private Group'}}
+                    </span>
+                    <span class="mx-2">
+                        ·
+                    </span>
+                    <span>{{ group.member_count == 1 ? group.member_count + ' Member' : group.member_count + ' Members' }}</span>
+                    <span class="mx-2">
+                        ·
+                    </span>
+                    <span v-if="group.local" class="rounded member-label">Local</span>
+                    <span v-else class="rounded remote-label">Remote</span>
+                    <span v-if="group.self && group.self.hasOwnProperty('role') && group.self.role">
+                        <span class="mx-2">
+                            ·
+                        </span>
+                        <span class="rounded member-label">{{ group.self.role }}</span>
+                    </span>
+                </p>
+            </div>
+        </div>
+        <div v-if="group && group.self">
+            <button v-if="!isMember && !group.self.is_requested" class="btn btn-primary cta-btn font-weight-bold" @click="joinGroup" :disabled="requestingMembership">
+                <span v-if="!requestingMembership">
+                    {{ group.membership == 'all' ? 'Join' : 'Request Membership' }}
+                </span>
+                <div
+                    v-else
+                    class="spinner-border spinner-border-sm"
+                    role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </button>
+
+            <button
+                v-else-if="!isMember && group.self.is_requested"
+                class="btn btn-light border cta-btn font-weight-bold"
+                @click.prevent="cancelJoinRequest">
+                <i class="fas fa-user-clock mr-1"></i> Requested to Join
+            </button>
+
+            <button
+                v-else-if="!isAdmin && isMember && !group.self.is_requested"
+                type="button"
+                class="btn btn-light border cta-btn font-weight-bold"
+                @click.prevent="leaveGroup">
+                <i class="fas sign-out-alt mr-1"></i> Leave Group
+            </button>
+
+            <!-- <div v-if="isAdmin">
+                <a
+                    class="btn btn-light border cta-btn font-weight-bold"
+                    :href="group.url + '/settings'">
+                    Settings
+                </a>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            group: {
+                type: Object
+            },
+            isAdmin: {
+                type: Boolean,
+                default: false
+            },
+            isMember: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        data() {
+            return {
+                requestingMembership: false,
+            }
+        },
+
+        methods: {
+            joinGroup() {
+                this.requestingMembership = true;
+
+                axios.post('/api/v0/groups/'+this.group.id+'/join')
+                .then(res => {
+                    this.requestingMembership = false;
+                    this.$emit('refresh');
+                }).catch(err => {
+                    let body = err.response;
+
+                    if(body.status == 422) {
+                        this.requestingMembership = false;
+                        swal('Oops!', body.data.error, 'error');
+                    }
+                });
+            },
+
+            cancelJoinRequest() {
+                if(!window.confirm('Are you sure you want to cancel your request to join this group?')) {
+                    return;
+                }
+
+                axios.post('/api/v0/groups/'+this.group.id+'/cjr')
+                .then(res => {
+                    this.requestingMembership = false;
+                    this.$emit('refresh');
+                }).catch(err => {
+                    let body = err.response;
+
+                    if(body.status == 422) {
+                        swal('Oops!', body.data.error, 'error');
+                    }
+                });
+            },
+
+            leaveGroup() {
+                if(!window.confirm('Are you sure you want to leave this group? Any content you shared will remain accessible. You won\'t be able to rejoin for 24 hours.')) {
+                    return;
+                }
+
+                axios.post('/api/v0/groups/'+this.group.id+'/leave')
+                .then(res => {
+                    this.$emit('refresh');
+                });
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+    .group-feed-component {
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            padding: 1rem 0;
+            background-color: transparent;
+
+            .cta-btn {
+                width: 190px;
+            }
+        }
+
+        .member-label {
+            padding: 2px 5px;
+            font-size: 12px;
+            color: rgba(75, 119, 190, 1);
+            background:rgba(137, 196, 244, 0.2);
+            border:1px solid rgba(137, 196, 244, 0.3);
+            font-weight:400;
+            text-transform: capitalize;
+        }
+
+        .dropdown-item {
+            font-weight: 600;
+        }
+
+        .remote-label {
+            padding: 2px 5px;
+            font-size: 12px;
+            color: #B45309;
+            background: #FEF3C7;
+            border: 1px solid #FCD34D;
+            font-weight: 400;
+            text-transform: capitalize;
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/Page/GroupNavTabs.vue b/resources/assets/components/groups/partials/Page/GroupNavTabs.vue
new file mode 100644
index 000000000..c0a8827ea
--- /dev/null
+++ b/resources/assets/components/groups/partials/Page/GroupNavTabs.vue
@@ -0,0 +1,167 @@
+<template>
+    <div>
+    <div class="col-12 border-top group-feed-component-menu px-5">
+        <ul class="nav font-weight-bold group-feed-component-menu-nav">
+            <li class="nav-item">
+                <router-link :to="`/groups/${group.id}/about`" class="nav-link">About</router-link>
+            </li>
+            <li class="nav-item">
+                <router-link :to="`/groups/${group.id}`" class="nav-link" exact>Feed</router-link>
+            </li>
+            <li v-if="group?.self && group.self.is_member" class="nav-item">
+                <router-link :to="`/groups/${group.id}/topics`" class="nav-link">Topics</router-link>
+            </li>
+            <li v-if="group?.self && group.self.is_member" class="nav-item">
+                <router-link :to="`/groups/${group.id}/members`" class="nav-link">
+                    Members
+                    <span v-if="group.self.is_member && isAdmin && atabs.request_count" class="badge badge-danger rounded-pill ml-2" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.request_count}}</span>
+                </router-link>
+            </li>
+            <!-- <li v-if="group.self.is_member" class="nav-item">
+                <a :class="{active: tab == 'events'}" class="nav-link" href="#" @click.prevent="switchTab('events')">Events</a>
+            </li> -->
+            <li v-if="group?.self && group.self.is_member" class="nav-item">
+                <router-link :to="`/groups/${group.id}/media`" class="nav-link">Media</router-link>
+            </li>
+            <!-- <li v-if="group.self.is_member" class="nav-item">
+                <a class="nav-link" href="#">Popular</a>
+            </li> -->
+            <!-- <li v-if="group.self.is_member" class="nav-item">
+                <a :class="{active: tab == 'polls'}" class="nav-link" href="#" @click.prevent="switchTab('polls')">Polls</a>
+            </li> -->
+
+            <!-- <li v-if="group.self.is_member && isAdmin" class="nav-item">
+                <a class="nav-link" href="#">Messages</a>
+            </li> -->
+
+            <!-- <li v-if="group.self.is_member && isAdmin" class="nav-item">
+                <a :class="{active: tab == 'insights'}" class="nav-link" href="#" @click.prevent="switchTab('insights')">Insights</a>
+            </li> -->
+            <!-- <li v-if="group.self.is_member && isAdmin && group.membership != 'all'" class="nav-item">
+                <a :class="{active: tab == 'requests'}" class="nav-link" href="#" @click.prevent="switchTab('requests')">
+                    <span class="mr-2">
+                        <i class="far fa-user-plus mr-1"></i>
+                        Requests
+                    </span>
+                    <span v-if="atabs.request_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.request_count}}</span>
+                    <span v-if="atabs.request_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">99+</span>
+                </a>
+            </li> -->
+            <li v-if="group?.self && group.self.is_member && isAdmin" class="nav-item">
+                <router-link :to="`/groups/${group.id}/moderation`" class="nav-link d-flex align-items-top">
+                    <span class="mr-2">Moderation</span>
+                    <span v-if="atabs.moderation_count" class="badge badge-danger rounded-pill" style="height: 20px;padding:4px 8px;font-size: 11px;">{{atabs.moderation_count}}</span>
+                </router-link>
+            </li>
+        </ul>
+        <div>
+            <button
+                v-if="group?.self && group.self.is_member"
+                class="btn btn-light btn-sm border px-3 rounded-pill mr-2"
+                @click="showSearchModal">
+                <i class="far fa-search"></i>
+            </button>
+            <div class="dropdown d-inline">
+                <button class="btn btn-light btn-sm border px-3 rounded-pill dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="far fa-cog"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-right">
+                    <a class="dropdown-item" href="#" @click.prevent="copyLink">
+                        Copy Group Link
+                    </a>
+
+                    <a class="dropdown-item" href="#" @click.prevent="showInviteModal">
+                        Invite friends
+                    </a>
+
+                    <a v-if="!isAdmin" class="dropdown-item" href="#" @click.prevent="reportGroup">
+                        Report Group
+                    </a>
+
+                    <a v-if="isAdmin" class="dropdown-item" :href="group.url + '/settings'">
+                        Settings
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    </div>
+        <search-modal
+            ref="searchModal"
+            :group="group"
+            :profile="profile"
+        />
+    </div>
+</template>
+
+<script>
+    import SearchModal from '@/groups/partials/GroupSearchModal.vue';
+    export default {
+        props: {
+            group: {
+                type: Object
+            },
+            isAdmin: {
+                type: Boolean,
+                default: false
+            },
+            isMember: {
+                type: Boolean,
+                default: false
+            },
+            atabs: {
+                type: Object
+            },
+            profile: {
+                type: Object
+            }
+        },
+
+        components: {
+            'search-modal': SearchModal,
+        },
+
+        methods: {
+            showSearchModal() {
+                event.currentTarget.blur();
+                this.$refs.searchModal.open();
+            },
+
+            // showInviteModal() {
+            //     event.currentTarget.blur();
+            //     this.$refs.inviteModal.open();
+            // },
+        }
+    }
+</script>
+<style lang="scss">
+    .group-feed-component {
+        &-menu {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0;
+
+            &-nav {
+                .nav-item {
+                    .nav-link {
+                        padding-top: 1rem;
+                        padding-bottom: 1rem;
+                        color: #6c757d;
+
+                        &.active {
+                            color: #2c78bf;
+                            border-bottom: 2px solid #2c78bf;
+                        }
+                    }
+                }
+
+                &:not(last-child) {
+                    .nav-item {
+                        margin-right: 14px;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/ReadMore.vue b/resources/assets/components/groups/partials/ReadMore.vue
new file mode 100644
index 000000000..9dabf199d
--- /dev/null
+++ b/resources/assets/components/groups/partials/ReadMore.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="read-more-component" style="word-break: break-all;">
+		<div v-if="status.content.length < 200" v-html="content"></div>
+		<div v-else>
+			<span v-html="content"></span>
+			<a
+				v-if="cursor == 200 || fullContent.length > cursor"
+				class="font-weight-bold text-muted" href="#"
+				style="display: block;white-space: nowrap;"
+				@click.prevent="readMore">
+				<i class="d-none fas fa-caret-down"></i> Read more...
+			</a>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+			status: {
+				type: Object
+			},
+
+			cursorLimit: {
+				type: Number,
+				default: 200
+			}
+		},
+
+		data() {
+			return {
+				fullContent: null,
+				content: null,
+				cursor: 200
+			}
+		},
+
+		mounted() {
+			this.cursor = this.cursorLimit;
+			this.fullContent = this.status.content;
+			this.content = this.status.content.substr(0, this.cursor);
+		},
+
+		methods: {
+			readMore() {
+				this.cursor = this.cursor + 200;
+				this.content = this.fullContent.substr(0, this.cursor);
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/SelfDiscover.vue b/resources/assets/components/groups/partials/SelfDiscover.vue
new file mode 100644
index 000000000..2fb15a39f
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfDiscover.vue
@@ -0,0 +1,465 @@
+<template>
+	<div class="self-discover-component col-12 col-md-9 bg-lighter border-left mb-4">
+		<div class="px-5">
+            <div class="jumbotron my-4 text-light bg-mantle">
+            	<div class="container">
+            		<h1 class="display-4">Discover</h1>
+                	<p class="lead mb-0">Explore group communities and topics</p>
+            		<!-- <p class="lead">
+            			<button class="btn btn-outline-light">Browse Categories</button>
+            		</p> -->
+            	</div>
+            </div>
+        </div>
+
+		<div v-if="tab === 'home'" class="px-5">
+            <div class="row mb-4 pt-5">
+				<div class="col-12 col-md-4">
+					<h4 class="font-weight-bold">Popular</h4>
+					<div class="list-group list-group-scroll">
+						<a v-for="(group, index) in popularGroups"
+							class="list-group-item p-1"
+							:href="group.url">
+							<group-list-card :group="group" :compact="true" />
+						</a>
+					</div>
+				</div>
+
+				<div class="col-12 col-md-4">
+					<div class="card card-body shadow-none bg-mantle text-light" style="margin-top: 33px;">
+						<h3 class="mb-4 font-weight-lighter">Discover communities and topics based on your interests</h3>
+						<p class="mb-0">
+							<button class="btn btn-outline-light font-weight-light btn-block" @click="toggleTab('categories')">Browse Categories</button>
+						</p>
+					</div>
+
+					<div class="card card-body shadow-none bg-light text-dark border" style="margin-top: 20px;">
+						<p class="lead mb-4 text-muted font-weight-lighter mb-1">Browse Public Groups</p>
+						<!-- <p class="lead mb-4 text-muted font-weight-lighter">Tips for growing your group membership</p> -->
+						<!-- <h5 class="mb-4 text-muted font-weight-lighter">Create and easily organize events</h5> -->
+						<p class="mb-0">
+							<button class="btn btn-light border font-weight-light btn-block">Group Directory</button>
+						</p>
+					</div>
+				</div>
+
+				<div class="col-12 col-md-4">
+					<h4 class="font-weight-bold">New</h4>
+					<div class="list-group list-group-scroll">
+						<a v-for="(group, index) in newGroups"
+							class="list-group-item p-1"
+							:href="group.url">
+							<group-list-card :group="group" :compact="true" />
+						</a>
+					</div>
+				</div>
+			</div>
+
+			<div class="jumbotron mb-4 text-light bg-black" style="margin-top: 5rem;">
+            	<div class="container">
+            		<h1 class="display-4">Across the Fediverse</h1>
+                	<p class="mb-0">
+                		<button
+                			class="btn btn-outline-light"
+                			@click="toggleTab('fediverseGroups')"
+                			>
+                			Explore fediverse groups <i class="fal fa-chevron-right ml-2"></i>
+                		</button>
+                	</p>
+                	<hr class="my-4">
+                	<p class="lead">We're in the early stages of Group federation, and working with other projects to support cross-platform compatibility. <a href="#">Learn more about group federation <i class="fal fa-chevron-right ml-2 fa-sm"></i></a></p>
+            	</div>
+            </div>
+
+            <div class="row my-4 py-5">
+            	<div class="col-12 col-md-4">
+            		<div class="card card-body shadow-none bg-light" style="border:1px solid #E5E7EB;">
+            			<p class="text-center text-lighter">
+            				<i class="fal fa-lightbulb fa-4x"></i>
+            			</p>
+            			<p class="text-center lead mb-0">What's New</p>
+            		</div>
+            	</div>
+
+            	<div class="col-12 col-md-4">
+            		<div class="card card-body shadow-none bg-light" style="border:1px solid #E5E7EB;">
+            			<p class="text-center text-lighter">
+            				<i class="fal fa-clipboard-list-check fa-4x"></i>
+            			</p>
+            			<p class="text-center lead mb-0">User Guide</p>
+            		</div>
+            	</div>
+
+            	<div class="col-12 col-md-4">
+            		<div class="card card-body shadow-none bg-light" style="border:1px solid #E5E7EB;">
+            			<p class="text-center text-lighter">
+            				<i class="fal fa-question-circle fa-4x"></i>
+            			</p>
+            			<p class="text-center lead mb-0">Groups Help</p>
+            		</div>
+            	</div>
+            </div>
+
+            <p class="text-lighter" style="font-size:9px">
+            	<span class="font-weight-bold mr-1">Groups v0.0.1</span>
+            </p>
+
+			<!-- <div class="my-4 pt-5">
+				<p class="h4 font-weight-bold mb-1">Suggested for You</p>
+				<p class="lead text-muted mb-0">Groups you might be interested in</p>
+			</div>
+
+			<div class="row mb-4">
+				<div v-for="(group, index) in recommended.slice(recommendedStart, recommendedEnd)" :key="'rec:'+group.id+':'+index" class="col-12 col-md-4 slide-fade">
+					<div class="card shadow-sm border text-decoration-none text-dark">
+						<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: auto;object-fit: cover;max-height: 160px;">
+						<div v-else class="bg-primary" style="width:100%;height:160px;"></div>
+						<div class="card-body">
+							<div class="lead font-weight-bold d-flex align-items-top" style="height: 60px;">
+								{{ group.name }}
+								<span v-if="group.verified" class="fa-stack ml-n2 mt-n2">
+									<i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+									<i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+								</span>
+							</div>
+							<div class="text-muted font-weight-light d-flex justify-content-between">
+								<span>{{group.member_count}} Members</span>
+							</div>
+							<hr>
+							<p class="mb-0">
+								<a class="btn btn-light btn-block border rounded-lg font-weight-bold" :href="group.url">View Group</a>
+							</p>
+						</div>
+					</div>
+					<div v-if="index == 0 && recommended.length > 3 && recommendedStart != 0" style="position: absolute; top: 45%; left: 0px;transform:translateY(-55%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="recommendedPrev()">
+							<i class="fas fa-chevron-left fa-lg"></i>
+						</button>
+					</div>
+					<div v-if="index == 2 && recommended.length > 3" style="position: absolute; top: 45%; right: 0px;transform:translateY(-55%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="recommendedNext()">
+							<i class="fas fa-chevron-right fa-lg"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<div class="py-2 mb-2">
+				<hr>
+			</div> -->
+
+			<!-- <div class="px-4 pb-4">
+				<p class="h4 font-weight-bold mb-1">Friends' Groups</p>
+				<p class="lead text-muted mb-0">Groups your mutuals are in.</p>
+			</div> -->
+
+			<!-- <div class="px-4 py-2">
+				<hr>
+			</div> -->
+
+			<!-- <div class="pb-4">
+				<p class="h4 font-weight-bold mb-1">Categories</p>
+				<p class="lead text-muted mb-0">Find a group by browsing top categories</p>
+			</div>
+
+			<div class="row mb-4">
+				<div v-for="(group, index) in categories.slice(categoriesStart, categoriesEnd)" :key="'rec:'+group.id+':'+index" class="col-12 col-md-2 slide-fade">
+					<div class="card card-body rounded-lg shadow-sm border text-decoration-none bg-primary p-2 text-white d-flex justify-content-end" style="width: 150px; height:150px;  background: linear-gradient(45deg, #ff512f, #dd2476);">
+						<p class="mb-0 font-weight-bold" style="font-size:15px">{{group}}</p>
+					</div>
+					<div v-if="index == 0 && categories.length > 3 && categoriesStart != 0" style="position: absolute; top: 50%; left: -10px;transform:translateY(-50%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="categoriesPrev()">
+							<i class="fas fa-chevron-left fa-lg"></i>
+						</button>
+					</div>
+					<div v-if="index == 5 && categories.length > 3" style="position: absolute; top: 50%; right: -10px;transform:translateY(-50%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="categoriesNext()">
+							<i class="fas fa-chevron-right fa-lg"></i>
+						</button>
+					</div>
+				</div>
+			</div> -->
+
+			<!-- <div class="py-2 mb-2">
+				<hr>
+			</div> -->
+
+			<!-- <div class="pb-4 my-4">
+				<p class="h4 font-weight-bold mb-1">My Groups</p>
+				<p class="lead text-muted mb-0">Groups you are a member of</p>
+			</div>
+
+			<div class="row mb-4">
+				<div v-for="(group, index) in selfGroups.slice(selfGroupsStart, selfGroupsEnd)" :key="'rec:'+group.id+':'+index" class="col-12 col-md-4 slide-fade">
+					<div class="card shadow-sm border text-decoration-none text-dark">
+						<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: auto;object-fit: cover;max-height: 160px;">
+						<div v-else class="bg-primary" style="width:100%;height:160px;"></div>
+						<div class="card-body">
+							<div class="lead font-weight-bold d-flex align-items-top" style="height: 60px;">
+								{{ group.name }}
+								<span v-if="group.verified" class="fa-stack ml-n2 mt-n2">
+									<i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+									<i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+								</span>
+							</div>
+							<div class="text-muted font-weight-light d-flex justify-content-between">
+								<span>{{group.member_count}} Members</span>
+							</div>
+							<hr>
+							<p class="mb-0">
+								<a class="btn btn-light btn-block border rounded-lg font-weight-bold" :href="group.url">View Group</a>
+							</p>
+						</div>
+					</div>
+					<div v-if="index == 0 && selfGroups.length > 3 && selfGroupsStart != 0" style="position: absolute; top: 50%; left: -10px;transform:translateY(-50%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="selfGroupsPrev()">
+							<i class="fas fa-chevron-left fa-lg"></i>
+						</button>
+					</div>
+					<div v-if="index == 2 && selfGroups.length > 3" style="position: absolute; top: 50%; right: -10px;transform:translateY(-50%);">
+						<button class="btn btn-light shadow-lg btn-lg rounded-circle border d-flex align-items-center justify-content-center" style="width: 50px;height:50px;" @click="selfGroupsNext()">
+							<i class="fas fa-chevron-right fa-lg"></i>
+						</button>
+					</div>
+				</div>
+			</div> -->
+		</div>
+
+		<div v-if="tab === 'categories'" class="px-5">
+			<div class="row my-4 justify-content-center">
+				<div class="col-12 col-md-6">
+					<div class="title mb-4">
+						<span>Categories</span>
+						<button class="btn btn-light font-weight-bold" @click="toggleTab('home')">Go Back</button>
+					</div>
+
+					<div class="list-group">
+						<div
+							v-for="(group, index) in categories"
+							:key="'rec:'+group.id+':'+index"
+							class="list-group-item"
+							@click="selectCategory(index)">
+							<p class="mb-0 font-weight-bold">
+								{{group}}
+								<span class="float-right">
+									<i class="fal fa-chevron-right"></i>
+								</span>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="tab === 'category'" class="px-5">
+			<div class="row my-4 justify-content-center">
+				<div class="col-12 col-md-6">
+					<div class="title mb-4">
+						<div>
+							<div class="mb-n2 small text-uppercase text-lighter">Categories</div>
+							<span>{{ categories[activeCategoryIndex] }}</span>
+						</div>
+						<button class="btn btn-light font-weight-bold" @click="toggleTab('categories')">Go Back</button>
+					</div>
+
+					<div v-if="categoryGroupsLoaded">
+						<div class="list-group">
+							<a v-for="(group, index) in categoryGroups"
+								class="list-group-item p-1"
+								:href="group.url">
+								<group-list-card :group="group" :showStats="true" />
+							</a>
+
+							<div
+								v-if="categoryGroupsCanLoadMore"
+								class="list-group-item">
+
+								<button
+									class="btn btn-light font-weight-bold btn-block"
+									@click="fetchCategoryGroups">
+									Load more
+								</button>
+							</div>
+						</div>
+
+						<div v-if="categoryGroups.length === 0" class="mt-3">
+							<div class="bg-white border text-center p-3">
+								<p class="font-weight-light mb-0">No groups found in this category</p>
+							</div>
+						</div>
+					</div>
+					<div v-else>
+						<div class="card card-body shadow-none border justify-content-center flex-row">
+							<b-spinner />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="tab === 'fediverseGroups'" class="px-5">
+			<div class="row my-4 justify-content-center">
+				<div class="col-12 col-md-6">
+					<div class="title mb-4">
+						<span>Fediverse Groups</span>
+						<button class="btn btn-light font-weight-bold" @click="toggleTab('home')">Go Back</button>
+					</div>
+					<div class="mt-3">
+						<div class="bg-white border text-center p-3">
+							<p class="font-weight-light mb-0">No fediverse groups found</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupListCard from './GroupListCard.vue';
+
+	export default {
+		props: {
+			profile: {
+				type: Object
+			}
+		},
+
+		components: {
+			"group-list-card": GroupListCard
+		},
+
+		data() {
+			return {
+				isLoaded: false,
+				tab: 'home',
+				popularGroups: [],
+				newGroups: [],
+				activeCategoryIndex: undefined,
+				activeCategoryPage: 1,
+				categories: [],
+				categoriesStart: 0,
+				categoriesEnd: 6,
+				categoryGroups: [],
+				categoryGroupsLoaded: false,
+				categoryGroupsCanLoadMore: false,
+				// selfGroups: [],
+				// selfGroupsStart: 0,
+				// selfGroupsEnd: 3
+			}
+		},
+
+		mounted() {
+			this.fetchPopular();
+			this.fetchCategories();
+			// this.fetchSelf();
+		},
+
+		methods: {
+			fetchPopular() {
+				axios.get('/api/v0/groups/discover/popular')
+				.then(res => {
+					this.popularGroups = res.data;
+					this.fetchNew();
+				})
+			},
+
+			fetchNew() {
+				axios.get('/api/v0/groups/discover/new')
+				.then(res => {
+					this.newGroups = res.data;
+				})
+			},
+
+			fetchCategories() {
+				axios.get('/api/v0/groups/categories/list')
+				.then(res => {
+					this.categories = res.data;
+				})
+			},
+
+			toggleTab(tab) {
+				window.scrollTo(0, 0);
+				this.tab = tab;
+			},
+
+			selectCategory(index) {
+				window.scrollTo(0, 0);
+				if(index !== this.activeCategoryIndex) {
+					this.activeCategoryPage = 1;
+				}
+				this.activeCategoryIndex = index;
+				this.fetchCategoryGroups();
+			},
+
+			fetchCategoryGroups() {
+				if(this.activeCategoryPage == 1) {
+					this.categoryGroupsLoaded = false;
+				}
+
+				axios.get('/api/v0/groups/category/list', {
+					params: {
+						name: this.categories[this.activeCategoryIndex],
+						page: this.activeCategoryPage
+					}
+				})
+				.then(res => {
+					this.tab = 'category';
+					if(this.activeCategoryPage == 1) {
+						this.categoryGroups = res.data;
+					} else {
+						this.categoryGroups.push(...res.data);
+					}
+					if(res.data.length == 6) {
+						this.categoryGroupsCanLoadMore = true;
+						this.activeCategoryPage++;
+					} else {
+						this.categoryGroupsCanLoadMore = false;
+					}
+					setTimeout(() => {
+						this.categoryGroupsLoaded = true;
+					}, 600);
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.self-discover-component {
+		.list-group-item {
+			text-decoration: none;
+
+			&:hover {
+				background-color: #F3F4F6;
+			}
+		}
+
+		.bg-mantle {
+			background: linear-gradient(45deg, #24c6dc, #514a9d);
+		}
+
+		.bg-black {
+			background-color: #000;
+
+			hr {
+				border-top: 1px solid rgba(255, 255, 255, 0.12);
+			}
+		}
+
+		.title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			span {
+				font-size: 24px;
+				font-weight: 600;
+			}
+
+			.btn {
+				border: 1px solid #E5E7EB;
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/SelfFeed.vue b/resources/assets/components/groups/partials/SelfFeed.vue
new file mode 100644
index 000000000..6663b4dfa
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfFeed.vue
@@ -0,0 +1,146 @@
+<template>
+	<div class="col-12 col-md-9" style="overflow:hidden">
+		<div class="row h-100 bg-light justify-content-center">
+			<div class="col-12 col-md-10 col-lg-7">
+				<div v-if="!initalLoad">
+					<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
+				</div>
+				<div v-else class="px-5">
+					<div v-if="emptyFeed">
+						<div class="jumbotron mt-5">
+							<h1 class="display-4">Hello 👋</h1>
+							<h3 class="font-weight-light">Welcome to Pixelfed Groups!</h3>
+							<p class="lead">Groups are a way to participate in like minded communities and topics.</p>
+							<hr class="my-4">
+							<p>Anyone can create and manage their own group as long as it abides by our <a href="#">community guidelines</a>.</p>
+							<p class="text-center mb-0">
+                                <router-link to="/groups/discover" class="btn btn-primary btn-lg rounded-pill">
+                                    Discover Groups
+                                </router-link>
+							</p>
+						</div>
+					</div>
+
+					<div v-else>
+						<div class="my-4">
+		                    <p class="h1 font-weight-bold mb-1">Groups Feed</p>
+		                    <p class="lead text-muted mb-0">Recent posts from your groups</p>
+		                </div>
+
+						<div class="my-3">
+							<group-status
+								v-for="(status, index) in feed"
+								:key="'gs:' + status.id + index"
+								:prestatus="status"
+								:profile="profile"
+								:show-group-header="true"
+								:group="status.group"
+								:group-id="status.group.id" />
+
+							<div v-if="feed.length > 2">
+								<infinite-loading @infinite="infiniteFeed" :distance="800">
+									<div slot="no-more" class="my-3">
+										<p class="lead font-weight-bold pt-5">You have reached the end of this feed</p>
+										<div style="height: 10rem;"></div>
+									</div>
+									<div slot="no-results"></div>
+								</infinite-loading>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- <div class="col-12 col-md-4">
+				<div class="mt-5 media align-items-center">
+					<div class="mr-3">
+						<i class="fas fa-info-circle fa-2x text-lighter"></i>
+					</div>
+					<p class="media-body text-muted mb-0 font-weight-light">Groups are in beta, some <a href="#" class="font-weight-bold">limitations</a> apply.</p>
+				</div>
+			</div> -->
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupStatus from './GroupStatus.vue';
+
+	export default {
+		props: {
+			profile: {
+				type: Object
+			}
+		},
+
+		data() {
+			return {
+				feed: [],
+				ids: [],
+				page: 1,
+				tab: 'feed',
+				initalLoad: false,
+				emptyFeed: true
+			};
+		},
+
+		components: {
+			'group-status': GroupStatus
+		},
+
+		mounted() {
+			this.fetchFeed();
+		},
+
+		methods: {
+			fetchFeed() {
+				axios.get('/api/v0/groups/self/feed', {
+					params: {
+						initial: true
+					}
+				})
+				.then(res => {
+					this.page++;
+					this.feed = res.data;
+					this.emptyFeed = this.feed.length === 0;
+					this.initalLoad = true;
+				})
+			},
+
+			infiniteFeed($state) {
+				if(this.feed.length < 2 || this.page > 5) {
+					$state.complete();
+					return;
+				}
+
+				axios.get('/api/v0/groups/self/feed', {
+					params: {
+						page: this.page
+					},
+				}).then(res => {
+					if (res.data.length) {
+						let data = res.data;
+						let self = this;
+						data.forEach(d => {
+							if(self.ids.indexOf(d.id) == -1) {
+								self.ids.push(d.id);
+								self.feed.push(d);
+							}
+						});
+						$state.loaded();
+						this.page++;
+					} else {
+						$state.complete();
+					}
+				});
+			},
+
+			switchTab(tab) {
+				this.tab = tab;
+			},
+
+			gotoDiscover() {
+				this.$emit('switchtab', 'discover');
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/SelfGroups.vue b/resources/assets/components/groups/partials/SelfGroups.vue
new file mode 100644
index 000000000..411ec67e4
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfGroups.vue
@@ -0,0 +1,171 @@
+<template>
+    <div class="my-groups-component">
+        <div class="list-container">
+            <div v-if="isLoaded">
+                <div class="list-group">
+                    <a
+                        v-for="(group, index) in groups" :key="'rec:'+group.id+':'+index"
+                        class="list-group-item text-decoration-none"
+                        :href="group.url">
+                        <group-list-card
+                        	:group="group"
+                        	:truncateDescriptionLength="140"
+                        	:showStats="true" />
+                        <!-- <div class="media align-items-center">
+                            <img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="mr-3 border rounded" style="width: 100px; height: 60px;object-fit: cover;padding:5px;">
+
+                            <div v-else class="mr-3 border rounded" style="width: 100px; height: 60px;padding: 5px;">
+                            	<div class="bg-primary d-flex align-items-center justify-content-center" style="width: 100%; height:100%;">
+                            		<i class="fal fa-users text-white fa-lg"></i>
+                            	</div>
+                            </div>
+
+                            <div class="media-body">
+                            	<p class="h5 font-weight-bold mb-1 text-dark">
+                            		{{ group.name || 'Untitled Group' }}
+                            	</p>
+
+                            	<p class="text-muted small mb-1 read-more">
+                            		{{ truncate(group.description) }}
+                            	</p>
+
+                            	<p class="mb-0">
+                            		<span class="text-muted mr-2">
+                            			<i class="far fa-users"></i>
+                            			<strong class="small">{{ prettyCount(group.member_count) }}</strong>
+                            		</span>
+
+                            		<span class="member-label">
+                            			{{ group.self.role }}
+                            		</span>
+
+                            		<span v-if="!group.local" class="remote-label ml-2">
+                            			<i class="fal fa-globe"></i> Remote
+                            		</span>
+                            	</p>
+                            </div>
+                        </div> -->
+                    </a>
+                </div>
+
+                <p v-if="canLoadMore">
+                	<button
+                		class="btn btn-primary btn-block font-weight-bold mt-3"
+                		@click.prevent="loadMore"
+                		:disabled="loadingMore">
+                		Load more
+                	</button>
+                </p>
+            </div>
+
+            <div v-else class="d-flex justify-content-center">
+            	<b-spinner/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+	import GroupListCard from './GroupListCard.vue';
+
+    export default {
+        props: {
+            profile: {
+                type: Object
+            }
+        },
+
+        components: {
+			"group-list-card": GroupListCard
+		},
+
+        data() {
+            return {
+                isLoaded: false,
+                groups: [],
+                canLoadMore: false,
+                loadingMore: false,
+                page: 1
+            }
+        },
+
+        mounted() {
+            this.fetchSelf();
+        },
+
+        methods: {
+            fetchSelf() {
+                axios.get('/api/v0/groups/self/list')
+                .then(res => {
+                	let data = res.data.filter(g => {
+                		return g.hasOwnProperty('id') && g.hasOwnProperty('url');
+                	})
+                    this.groups = data;
+                    this.canLoadMore = res.data.length == 4;
+                    this.page++;
+                    this.isLoaded = true;
+                });
+            },
+
+            loadMore() {
+            	this.loadingMore = true;
+            	axios.get('/api/v0/groups/self/list', {
+            		params: {
+            			page: this.page
+            		}
+            	})
+                .then(res => {
+                	let data = res.data.filter(g => {
+                		return g.hasOwnProperty('id') && g.hasOwnProperty('url');
+                	})
+                    this.groups.push(...data);
+                    this.canLoadMore = res.data.length == 4;
+                    this.page++;
+            		this.loadingMore = false;
+                });
+            },
+
+            prettyCount(val) {
+            	return App.util.format.count(val);
+            },
+
+            truncate(str) {
+            	if(str.length <= 140) {
+            		return str;
+            	}
+
+            	return str.substr(0, 140) + ' ...';
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .my-groups-component {
+    	.list-container {
+    		margin-bottom: 30vh;
+    	}
+
+		.member-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: rgba(75, 119, 190, 1);
+			background:rgba(137, 196, 244, 0.2);
+			border:1px solid rgba(137, 196, 244, 0.3);
+			font-weight:400;
+			text-transform: capitalize;
+			border-radius: 3px;
+		}
+
+		.remote-label {
+			padding: 2px 5px;
+			font-size: 12px;
+			color: #4B5563;
+			background: #F3F4F6;
+			border:1px solid #E5E7EB;
+			font-weight:400;
+			text-transform: capitalize;
+			border-radius: 3px;
+		}
+    }
+</style>
diff --git a/resources/assets/components/groups/partials/SelfInvitations.vue b/resources/assets/components/groups/partials/SelfInvitations.vue
new file mode 100644
index 000000000..f9d4f1e64
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfInvitations.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
+		<div class="row h-100">
+			<div class="col-12 col-md-8 bg-lighter border-left">
+				<div class="p-4 mb-4">
+					<p class="h4 font-weight-bold mb-1 text-center">Group Invitations</p>
+				</div>
+				<div class="p-4 mb-4">
+					<p class="font-weight-bold text-center text-muted">You don't have any group invites</p>
+				</div>
+			</div>
+			<div class="col-12 col-md-4 bg-white border-left">
+				<div class="p-4">
+					<div class="bg-light rounded-lg border p-3">
+						<p class="lead font-weight-bold mb-0">Send Invite</p>
+						<p class="mb-3">Invite friends to your groups</p>
+						<div class="form-group" style="position: relative;">
+							<span style="position: absolute; top:50%;transform: translateY(-50%);left:15px;padding-right:5px;">
+								<i class="fas fa-search text-lighter"></i>
+							</span>
+							<input class="form-control bg-white rounded-pill" placeholder="Search username..." style="padding-left:40px">
+						</div>
+					</div>
+				</div>
+				<hr>
+				<div class="p-4 mb-2">
+					<p class="h4 font-weight-bold mb-1 text-center">Invitations Sent</p>
+				</div>
+				<div class="px-4 mb-4">
+					<p class="font-weight-bold text-center text-muted">You have not sent any group invites</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/SelfNotifications.vue b/resources/assets/components/groups/partials/SelfNotifications.vue
new file mode 100644
index 000000000..f591cfbd7
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfNotifications.vue
@@ -0,0 +1,309 @@
+<template>
+	<div class="group-notification-component col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
+		<div class="row h-100 bg-white">
+			<div class="col-12 col-md-8 border-left">
+                <div class="px-5">
+					<div class="my-4">
+						<p class="h1 font-weight-bold mb-1">Group Notifications</p>
+						<!-- <p class="lead text-muted mb-0">Latest notifications from your groups</p> -->
+					</div>
+					<!-- <div class="p-4 mb-4">
+						<p class="font-weight-bold text-center text-muted">You don't have any notifications</p>
+					</div> -->
+
+					<div v-if="notifications.length > 0" v-for="(n, index) in notifications" class="nitem card card-body shadow-none mb-3 py-2 px-0 rounded-pill" style="background-color: #F3F4F6">
+						<div class="media align-items-center px-3">
+							<img class="mr-3 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px">
+							<div class="media-body">
+								<div v-if="n.type == 'group:like'">
+									<p class="my-0">
+										<a :href="getProfileUrl(n.account)" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> liked your <a v-bind:href="getPostUrl(n.status)">post</a> in <a :href="n.group.url">{{n.group.name}}</a>
+									</p>
+								</div>
+
+								<div v-else-if="n.type == 'group:comment'">
+									<p class="my-0">
+										<a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="n.status.url">post</a> in <a :href="n.group.url">{{n.group.name}}</a>
+									</p>
+								</div>
+
+								<div v-else-if="n.type == 'mention'">
+									<p class="my-0">
+										<a :href="getProfileUrl(n.account)" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> <a v-bind:href="mentionUrl(n.status)">mentioned</a> you.
+									</p>
+								</div>
+
+								<div v-else-if="n.type == 'group.join.approved'">
+									<p class="my-0">
+										Your application to join <a :href="n.group.url" class="font-weight-bold text-dark word-break" :title="n.group.name">{{truncate(n.group.name)}}</a> was approved!
+									</p>
+								</div>
+
+								<div v-else-if="n.type == 'group.join.rejected'">
+									<p class="my-0">
+										Your application to join <a :href="n.group.url" class="font-weight-bold text-dark word-break" :title="n.group.name">{{truncate(n.group.name)}}</a> was rejected. You can re-apply to join in 6 months.
+									</p>
+								</div>
+
+								<div v-else>
+									<p class="my-0">Cannot display notification</p>
+								</div>
+
+								<!-- <div class="align-items-center">
+									<span class="small text-muted" data-toggle="tooltip" data-placement="bottom" :title="n.created_at">{{timeAgo(n.created_at)}}</span>
+								</div> -->
+							</div>
+							<div>
+								<!-- <div v-if="n.status && n.status && n.status.media_attachments && n.status.media_attachments.length">
+									<a :href="getPostUrl(n.status)">
+										<img :src="n.status.media_attachments[0].preview_url" width="32px" height="32px">
+									</a>
+								</div>
+								<div v-else-if="n.status && n.status.parent && n.status.parent.media_attachments && n.status.parent.media_attachments.length">
+									<a :href="n.status.parent.url">
+										<img :src="n.status.parent.media_attachments[0].preview_url" width="32px" height="32px">
+									</a>
+								</div>
+
+								<div v-else>
+									<a v-if="viewContext(n) != '/'" class="btn btn-outline-primary py-0 font-weight-bold" :href="viewContext(n)">View</a>
+								</div> -->
+
+								<div class="align-items-center text-muted">
+									<span class="small" data-toggle="tooltip" data-placement="bottom" :title="n.created_at">{{timeAgo(n.created_at)}}</span>
+									<span>·</span>
+									<div class="dropdown d-inline">
+										<a class="dropdown-toggle text-lighter" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+											<i class="far fa-cog fa-sm"></i>
+										</a>
+
+										<div class="dropdown-menu dropdown-menu-right">
+											<a class="dropdown-item font-weight-bold" href="#">Dismiss</a>
+											<div class="dropdown-divider"></div>
+											<a class="dropdown-item font-weight-bold" href="#">Help</a>
+											<!-- <a class="dropdown-item font-weight-bold" href="#">Ignore</a> -->
+											<a class="dropdown-item font-weight-bold" href="#">Report</a>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12 col-md-4 border-left bg-light">
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		data() {
+			return {
+				notifications: [],
+				initialLoad: false,
+				loading: true,
+				page: 1
+			}
+		},
+
+		mounted() {
+			this.fetchNotifications();
+		},
+
+		methods: {
+			fetchNotifications() {
+				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+						window._sharedData.curUser = res.data;
+						window.App.util.navatar();
+				});
+				axios.get('/api/v0/groups/self/notifications')
+				.then(res => {
+					let data = res.data.filter(n => {
+						if(n.type == 'share' && !n.status) {
+							return false;
+						}
+						if(n.type == 'comment' && !n.status) {
+							return false;
+						}
+						if(n.type == 'mention' && !n.status) {
+							return false;
+						}
+						if(n.type == 'favourite' && !n.status) {
+							return false;
+						}
+						if(n.type == 'follow' && !n.account) {
+							return false;
+						}
+						return true;
+					});
+					// let ids = res.data.map(n => n.id);
+					// this.notificationMaxId = Math.max(...ids);
+					this.notifications = data;
+					// $('.notification-card .loader').addClass('d-none');
+					// $('.notification-card .contents').removeClass('d-none');
+				});
+			},
+
+			// infiniteNotifications($state) {
+			// 	if(this.notificationCursor > 10) {
+			// 		$state.complete();
+			// 		return;
+			// 	}
+			// 	axios.get('/api/pixelfed/v1/notifications', {
+			// 		params: {
+			// 			max_id: this.notificationMaxId
+			// 		}
+			// 	}).then(res => {
+			// 		if(res.data.length) {
+			// 			let data = res.data.filter(n => {
+			// 				if(n.type == 'share' && !n.status) {
+			// 					return false;
+			// 				}
+			// 				if(n.type == 'comment' && !n.status) {
+			// 					return false;
+			// 				}
+			// 				if(n.type == 'mention' && !n.status) {
+			// 					return false;
+			// 				}
+			// 				if(n.type == 'favourite' && !n.status) {
+			// 					return false;
+			// 				}
+			// 				if(n.type == 'follow' && !n.account) {
+			// 					return false;
+			// 				}
+			// 				if(_.find(this.notifications, {id: n.id})) {
+			// 					return false;
+			// 				}
+			// 				return true;
+			// 			});
+			// 			this.notifications.push(...data);
+			// 			this.notificationCursor++;
+			// 			$state.loaded();
+			// 		} else {
+			// 			$state.complete();
+			// 		}
+			// 	});
+			// },
+
+			truncate(text) {
+				if(text.length <= 15) {
+					return text;
+				}
+
+				return text.slice(0,15) + '...'
+			},
+
+			timeAgo(ts) {
+				let date = Date.parse(ts);
+				let seconds = Math.floor((new Date() - date) / 1000);
+				let interval = Math.floor(seconds / 31536000);
+				if (interval >= 1) {
+					return interval + "y";
+				}
+				interval = Math.floor(seconds / 604800);
+				if (interval >= 1) {
+					return interval + "w";
+				}
+				interval = Math.floor(seconds / 86400);
+				if (interval >= 1) {
+					return interval + "d";
+				}
+				interval = Math.floor(seconds / 3600);
+				if (interval >= 1) {
+					return interval + "h";
+				}
+				interval = Math.floor(seconds / 60);
+				if (interval >= 1) {
+					return interval + "m";
+				}
+				return Math.floor(seconds) + "s";
+			},
+
+			mentionUrl(status) {
+				let username = status.account.username;
+				let id = status.id;
+				return '/p/' + username + '/' + id;
+			},
+
+			followProfile(n) {
+				let self = this;
+				let id = n.account.id;
+				axios.post('/i/follow', {
+						item: id
+				}).then(res => {
+					self.notifications.map(notification => {
+						if(notification.account.id === id) {
+							notification.relationship.following = true;
+						}
+					});
+				}).catch(err => {
+					if(err.response.data.message) {
+						swal('Error', err.response.data.message, 'error');
+					}
+				});
+			},
+
+			viewContext(n) {
+				switch(n.type) {
+					case 'follow':
+						return n.account.url;
+					break;
+					case 'mention':
+						return n.status.url;
+					break;
+					case 'like':
+					case 'favourite':
+					case 'comment':
+						return n.status.url;
+					break;
+					case 'tagged':
+						return n.tagged.post_url;
+					break;
+					case 'direct':
+						return '/account/direct/t/'+n.account.id;
+					break
+				}
+				return '/';
+			},
+
+			getProfileUrl(account) {
+				if(account.local == true) {
+					return account.url;
+				}
+
+				return '/i/web/profile/_/' + account.id;
+			},
+
+			getPostUrl(status) {
+				if(status.local == true) {
+					return status.url;
+				}
+
+				return '/i/web/post/_/' + status.account.id + '/' + status.id;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.group-notification-component {
+		.dropdown-toggle::after {
+			content: '';
+			display: none;
+		}
+
+		.nitem {
+			a {
+				color: #000;
+				font-weight: 700 !important;
+
+				&:hover,
+				&:focus {
+    				color: #121416 !important;
+    			}
+			}
+		}
+	}
+</style>
diff --git a/resources/assets/components/groups/partials/SelfRemoteSearch.vue b/resources/assets/components/groups/partials/SelfRemoteSearch.vue
new file mode 100644
index 000000000..9c3443960
--- /dev/null
+++ b/resources/assets/components/groups/partials/SelfRemoteSearch.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
+		<div class="row h-100 bg-lighter">
+			<div class="col-12 col-md-8 border-left">
+				<div class="d-flex justify-content-center">
+					<div class="p-4 mb-4">
+						<p class="h4 font-weight-bold mb-1">Find a Remote Group</p>
+						<p class="lead text-muted">Search and explore remote federated groups.</p>
+					</div>
+				</div>
+				<div class="mb-5">
+					<div class="p-4 mb-4">
+						<div class="form-group">
+							<label>Group URL</label>
+							<input type="text" class="form-control form-control-lg rounded-pill bg-white border" placeholder="https://pixelfed.social/groups/328323406233735168" v-model="q">
+						</div>
+						<button class="btn btn-primary btn-block btn-lg rounded-pill font-weight-bold">Search</button>
+					</div>
+				</div>
+			</div>
+			<div class="col-12 col-md-4 bg-white border-left">
+				<div class="my-4">
+					<h4 class="font-weight-bold">Tips</h4>
+					<ul class="pl-3">
+						<li class="font-weight-bold">Some remote groups are not supported*</li>
+						<li>Read and comply with group rules defined by group admins</li>
+						<li>Use the full <span class="font-weight-bold">Group URL</span> including <code>https://</code></li>
+						<li>Joining private groups requires manual approval from group admins, you will recieve a notification when your membership is approved</li>
+						<li>Inviting people to remote groups is not supported yet</li>
+						<li>Your group membership may be terminated at any time by group admins</li>
+					</ul>
+					<p class="small">* Some remote groups may not be compatible, we are working to support other group implementations</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		data() {
+			return {
+				q: undefined
+			}
+		}
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/ShareMenu.vue b/resources/assets/components/groups/partials/ShareMenu.vue
new file mode 100644
index 000000000..3f4141486
--- /dev/null
+++ b/resources/assets/components/groups/partials/ShareMenu.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="share-menu-component">
+
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+
+	}
+</script>
diff --git a/resources/assets/components/groups/partials/Status/GroupHeader.vue b/resources/assets/components/groups/partials/Status/GroupHeader.vue
new file mode 100644
index 000000000..1a782302a
--- /dev/null
+++ b/resources/assets/components/groups/partials/Status/GroupHeader.vue
@@ -0,0 +1,304 @@
+<template>
+    <div class="group-post-header media">
+        <div v-if="showGroupHeader" style="position: relative;" class="mb-1">
+            <img
+                v-if="group.hasOwnProperty('metadata') && (group.metadata.hasOwnProperty('avatar') || group.metadata.hasOwnProperty('header'))"
+                class="rounded-lg box-shadow mr-2"
+                :src="group.metadata.hasOwnProperty('header') ? group.metadata.header.url : group.metadata.avatar.url"
+                width="52"
+                height="52"
+                onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                alt="avatar"
+                style="object-fit:cover;"
+            />
+            <span
+                v-else
+                class="d-block rounded-lg box-shadow mr-2 bg-primary"
+                style="width: 52px;height:52px;"
+            ></span>
+            <img
+                class="rounded-circle box-shadow border mr-2"
+                :src="status.account.avatar"
+                width="36"
+                height="36"
+                onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+                alt="avatar"
+                style="position: absolute; bottom:-4px; right:-4px;"
+            />
+        </div>
+        <img
+            v-else
+            class="rounded-circle box-shadow mr-2"
+            :src="status.account.avatar"
+            width="42"
+            height="42"
+            onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
+            alt="avatar"
+        />
+        <div class="media-body">
+            <div class="pl-2 d-flex align-items-top">
+                <div>
+                    <p class="mb-0">
+                        <router-link
+                            v-if="showGroupHeader && group"
+                            :to="`/groups/${status.gid}`"
+                            class="group-name-link username"
+                        >
+                            {{ group.name }}
+                        </router-link>
+
+                        <router-link
+                            v-else
+                            :to="`/groups/${status.gid}/user/${status?.account.id}`"
+                            class="group-name-link username"
+                            v-html="statusCardUsernameFormat(status)"
+                        >
+                            Loading...
+                        </router-link>
+
+                        <span v-if="showGroupChevron">
+                            <span class="text-muted" style="padding-left:2px;padding-right:2px;">
+                                <i class="fas fa-caret-right"></i>
+                            </span>
+                            <span>
+                                <router-link
+                                    :to="`/groups/${status.gid}`"
+                                    class="group-name-link"
+                                >
+                                    {{ group.name }}
+                                </router-link>
+                            </span>
+                        </span>
+                    </p>
+                    <p class="mb-0 mt-n1">
+                        <span
+                            v-if="showGroupHeader && group"
+                            style="font-size:13px"
+                        >
+                            <router-link
+                                :to="`/groups/${status.gid}/user/${status?.account.id}`"
+                                class="group-name-link-small username"
+                                v-html="statusCardUsernameFormat(status)"
+                            >
+                                Loading...
+                            </router-link>
+                            <span class="text-lighter" style="padding-left:2px;padding-right:2px;">·</span>
+                            <router-link
+                                :to="`/groups/${status.gid}/p/${status.id}`"
+                                class="font-weight-light text-muted"
+                            >
+                                {{shortTimestamp(status.created_at)}}
+                            </router-link>
+                            <span class="text-lighter" style="padding-left:2px;padding-right:2px;">·</span>
+                            <span class="text-muted"><i class="fas fa-globe"></i></span>
+                        </span>
+                        <span v-else>
+                            <router-link
+                                :to="`/groups/${status.gid}/p/${status.id}`"
+                                class="font-weight-light text-muted small"
+                            >
+                                {{shortTimestamp(status.created_at)}}
+                            </router-link>
+                            <span class="text-lighter" style="padding-left:2px;padding-right:2px;">·</span>
+                            <span class="text-muted small"><i class="fas fa-globe"></i></span>
+                        </span>
+                    </p>
+                </div>
+                <div v-if="profile" class="text-right" style="flex-grow:1;">
+                    <div class="dropdown">
+                      <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+                        <span class="fas fa-ellipsis-h text-lighter"></span>
+                      </button>
+                      <div class="dropdown-menu  dropdown-menu-right">
+                        <a class="dropdown-item" href="#">View Post</a>
+                        <a class="dropdown-item" href="#">View Profile</a>
+                        <a class="dropdown-item" href="#">Copy Link</a>
+                        <a class="dropdown-item" href="#" @click.prevent="sendReport()">Report</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item text-danger" href="#">Delete</a>
+                      </div>
+                    </div>
+                    <!-- <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
+                        <span class="fas fa-ellipsis-h text-lighter"></span>
+                        <span class="sr-only">Post Menu</span>
+                    </button> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            group: {
+                type: Object
+            },
+            status: {
+                type: Object
+            },
+            profile: {
+                type: Object
+            },
+            showGroupHeader: {
+                type: Boolean,
+                default: false
+            },
+            showGroupChevron: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        data() {
+            return {
+                reportTypes: [
+                    { key: "spam", title: "It's spam" },
+                    { key: "sensitive", title: "Nudity or sexual activity" },
+                    { key: "abusive", title: "Bullying or harassment" },
+                    { key: "underage", title: "I think this account is underage" },
+                    { key: "violence", title: "Violence or dangerous organizations" },
+                    { key: "copyright", title: "Copyright infringement" },
+                    { key: "impersonation", title: "Impersonation" },
+                    { key: "scam", title: "Scam or fraud" },
+                    { key: "terrorism", title: "Terrorism or terrorism-related content" }
+                ]
+            }
+        },
+
+        methods: {
+            formatCount(count) {
+                return App.util.format.count(count);
+            },
+
+            statusUrl(status) {
+                return '/groups/' + status.gid + '/p/' + status.id;
+            },
+
+            profileUrl(status) {
+                return '/groups/' + status.gid + '/user/' + status.account.id;
+            },
+
+            timestampFormat(timestamp) {
+                let ts = new Date(timestamp);
+                return ts.toDateString() + ' ' + ts.toLocaleTimeString();
+            },
+
+            shortTimestamp(ts) {
+                return window.App.util.format.timeAgo(ts);
+            },
+
+            statusCardUsernameFormat(status) {
+                if(status.account.local == true) {
+                    return status.account.username;
+                }
+
+                let fmt = window.App.config.username.remote.format;
+                let txt = window.App.config.username.remote.custom;
+                let usr = status.account.username;
+                let dom = document.createElement('a');
+                dom.href = status.account.url;
+                dom = dom.hostname;
+
+                switch(fmt) {
+                    case '@':
+                    return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
+                    break;
+
+                    case 'from':
+                    return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
+                    break;
+
+                    case 'custom':
+                    return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
+                    break;
+
+                    default:
+                    return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
+                    break;
+                }
+            },
+
+            sendReport(type) {
+                let el = document.createElement('div');
+                el.classList.add('list-group');
+                this.reportTypes.forEach(rt => {
+                    let button = document.createElement('button');
+                    button.classList.add('list-group-item', 'small');
+                    button.innerHTML = rt.title;
+                    button.onclick = () => {
+                        document.dispatchEvent(new CustomEvent('reportOption', {
+                            detail: { key: rt.key, title: rt.title }
+                        }));
+                    };
+                    el.appendChild(button);
+                });
+
+                let wrapper = document.createElement('div');
+                wrapper.appendChild(el);
+
+                swal({
+                    title: "Report Content",
+                    icon: "warning",
+                    content: wrapper,
+                    buttons: false
+                });
+
+                document.addEventListener('reportOption', (event) => {
+                    console.log(event.detail);
+                    this.showConfirmation(event.detail);
+                }, { once: true });
+            },
+            showConfirmation(option) {
+                console.log(option)
+              swal({
+                title: "Confirmation",
+                text: `You selected ${option.title}. Do you want to proceed?`,
+                icon: "info",
+                buttons: true
+              }).then((confirm) => {
+                if (confirm) {
+                     axios.post(`/api/v0/groups/${this.status.gid}/report/create`, {
+                        'type': option.key,
+                        'id': this.status.id,
+                    }).then(res => {
+                        swal("Confirmed!", "Your report has been submitted.", "success");
+                    })
+                } else {
+                  swal("Cancelled", "Your report was not submitted.", "error");
+                }
+              });
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+.group-post-header {
+    .btn::focus {
+        box-shadow: none;
+    }
+
+    .dropdown-toggle::after {
+        display: none;
+    }
+
+    .group-name-link {
+        color: var(--body-color) !important;
+        word-break: break-word !important;
+        word-wrap: break-word !important;
+        text-decoration: none;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .group-name-link-small {
+        color: var(--body-color) !important;
+        word-break: break-word !important;
+        word-wrap: break-word !important;
+        text-decoration: none;
+        font-size: 14px;
+        font-weight: 600;
+    }
+}
+</style>
diff --git a/resources/assets/components/groups/partials/Status/ParentUnavailable.vue b/resources/assets/components/groups/partials/Status/ParentUnavailable.vue
new file mode 100644
index 000000000..edb0f5062
--- /dev/null
+++ b/resources/assets/components/groups/partials/Status/ParentUnavailable.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="card shadow-sm" style="border-radius: 18px !important;">
+        <div class="card-body pb-0">
+            <div class="card card-body border shadow-none mb-3" style="background-color: #E5E7EB;">
+                <div class="media p-md-4">
+                    <div class="mr-4 pt-2">
+                        <i class="fas fa-lock fa-2x"></i>
+                    </div>
+                    <div class="media-body" style="max-width: 320px">
+                        <p class="lead font-weight-bold mb-1">This content isn't available right now</p>
+                        <p class="mb-0" style="font-size: 12px;letter-spacing:-0.3px;">When this happens, it's usually because the owner only shared it with a small group of people, changed who can see it, or it's been deleted.</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <comment-drawer
+                    v-if="showCommentDrawer"
+                    :permalink-mode="permalinkMode"
+                    :permalink-status="childContext"
+                    :status="status"
+                    :profile="profile"
+                    :group-id="groupId"
+                    :can-reply="false" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import CommentDrawer from '@/groups/partials/CommentDrawer.vue';
+
+    export default {
+        props: {
+            showCommentDrawer: {
+                type: Boolean,
+            },
+            permalinkMode: {
+                type: Boolean,
+            },
+            childContext: {
+                type: Object
+            },
+            status: {
+                type: Object
+            },
+            profile: {
+                type: Object
+            },
+            groupId: {
+                type: String
+            },
+        },
+
+        components: {
+            "comment-drawer": CommentDrawer,
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/sections/Loader.vue b/resources/assets/components/groups/sections/Loader.vue
new file mode 100644
index 000000000..e0dc053d0
--- /dev/null
+++ b/resources/assets/components/groups/sections/Loader.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="w-100 h-100">
+        <div v-if="!loaded" class="d-flex w-100 h-100 py-5 justify-content-center align-items-center">
+            <div class="text-center">
+                <div class="spinner-border" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+                <p class="text-center font-weight-bold mt-1">Loading...</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            loaded: {
+                type: Boolean,
+                default: false
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/groups/sections/Sidebar.vue b/resources/assets/components/groups/sections/Sidebar.vue
new file mode 100644
index 000000000..7b6326b52
--- /dev/null
+++ b/resources/assets/components/groups/sections/Sidebar.vue
@@ -0,0 +1,307 @@
+<template>
+    <div class="col-3 shadow groups-sidenav">
+        <div class="p-1">
+            <div class="d-flex justify-content-between align-items-center py-3">
+                <p class="h2 font-weight-bold mb-0">Groups</p>
+                <a class="btn btn-light px-2 rounded-circle" href="/settings/home">
+                    <i class="fas fa-cog fa-lg"></i>
+                </a>
+            </div>
+
+            <div class="mb-3">
+                <autocomplete
+                    :search="autocompleteSearch"
+                    placeholder="Search groups by name"
+                    aria-label="Search groups by name"
+                    :get-result-value="getSearchResultValue"
+                    :debounceTime="700"
+                    @submit="onSearchSubmit"
+                    ref="autocomplete"
+                    >
+                    <template #result="{ result, props }">
+                        <li
+                        v-bind="props"
+                        class="autocomplete-result"
+                        >
+
+                            <div class="media align-items-center">
+                                <img v-if="result.local && result.metadata && result.metadata.hasOwnProperty('header') && result.metadata.header.hasOwnProperty('url')" :src="result.metadata.header.url" width="32" height="32">
+                                <div v-else class="icon-placeholder">
+                                    <i class="fal fa-user-friends"></i>
+                                </div>
+                                <div class="media-body text-truncate mr-3">
+                                    <p class="result-name mb-n1 font-weight-bold">
+                                        {{ truncateName(result.name) }}
+                                        <span v-if="result.verified" class="fa-stack ml-n2" title="Verified Group" data-toggle="tooltip">
+                                            <i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+                                            <i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+                                        </span>
+                                    </p>
+                                    <p class="mb-0 text-muted" style="font-size: 10px;">
+                                        <span v-if="!result.local" title="Remote Group">
+                                            <i class="far fa-globe"></i>
+                                        </span>
+                                        <span v-if="!result.local">·</span>
+                                        <span class="font-weight-bold">{{ result.member_count }} members</span>
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                    </template>
+                </autocomplete>
+            </div>
+
+            <!-- <button
+                class="btn btn-light group-nav-btn"
+                :class="{ active: tab == 'feed' }"
+                @click="switchTab('feed')">
+                <div class="group-nav-btn-icon">
+                    <i class="fas fa-list"></i>
+                </div>
+                <div class="group-nav-btn-name">
+                    Your Feed
+                </div>
+            </button> -->
+
+            <template v-for="tab in tabs">
+                <router-link
+                    class="btn btn-light group-nav-btn"
+                    :to="tab.path">
+                        <div class="group-nav-btn-icon">
+                            <i :class="tab.icon"></i>
+                        </div>
+                        <div class="group-nav-btn-name">
+                            {{ tab.name }}
+                        </div>
+                    </router-link>
+            </template>
+
+            <router-link
+                to="/groups/create"
+                class="btn btn-primary btn-block rounded-pill font-weight-bold mt-3">
+                <i class="fas fa-plus mr-2"></i> Create New Group
+            </router-link>
+
+            <hr>
+            <!-- <div v-for="group in groups" class="ml-2">
+                <div class="card shadow-sm border text-decoration-none text-dark">
+                    <img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="card-img-top" style="width: 100%; height: auto;object-fit: cover;max-height: 160px;">
+                    <div v-else class="bg-primary" style="width:100%;height:160px;"></div>
+                    <div class="card-body">
+                        <div class="lead font-weight-bold d-flex align-items-top" style="height: 60px;">
+                            {{ group.name }}
+                            <span v-if="group.verified" class="fa-stack ml-n2 mt-n2">
+                                <i class="fas fa-circle fa-stack-1x fa-lg" style="color: #22a7f0cc;font-size:18px"></i>
+                                <i class="fas fa-check fa-stack-1x text-white" style="font-size:10px"></i>
+                            </span>
+                        </div>
+                        <div class="text-muted font-weight-light d-flex justify-content-between">
+                            <span>{{group.member_count}} Members</span>
+                            <span style="font-size: 12px;padding: 2px 5px;color: rgba(75, 119, 190, 1);background:rgba(137, 196, 244, 0.2);border:1px solid rgba(137, 196, 244, 0.3);font-weight:400;text-transform: capitalize;" class="rounded">{{ group.self.role }}</span>
+                        </div>
+                        <hr>
+                        <p class="mb-0">
+                            <a class="btn btn-light btn-block border rounded-lg font-weight-bold" :href="group.url">View Group</a>
+                        </p>
+                    </div>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+    import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+    export default {
+        data() {
+            return {
+                initialLoad: false,
+                tabs: [
+                    { name: 'Your Feed', icon: 'fas fa-list', path: '/groups/feed' },
+                    { name: 'Discover', icon: 'fas fa-compass', path: '/groups/discover' },
+                    { name: 'Your Groups', icon: 'fas fa-list', path: '/groups/joins' },
+                    // { name: 'Notifications', icon: 'far fa-bell', path: '/groups/notifications' },
+                    // { name: 'Find Remote Group', icon: 'far fa-search-plus', path: '/groups/search' },
+                ],
+                config: {},
+                groups: [],
+                profile: {},
+                tab: null,
+                searchQuery: undefined,
+            };
+        },
+
+        components: {
+            'autocomplete': Autocomplete,
+        },
+
+        methods: {
+            autocompleteSearch(input) {
+                if (!input || input.length < 2) {
+                    return [];
+                };
+
+                this.searchQuery = input;
+                // this.tab = 'searchresults';
+
+                if(input.startsWith('#')) {
+                    this.$bvToast.toast(input, {
+                        title: 'Hashtag detected',
+                        variant: 'info',
+                        autoHideDelay: 5000
+                    });
+                    return [];
+                }
+
+                return axios.post('/api/v0/groups/search/global', {
+                    q: input,
+                    v: '0.2'
+                })
+                .then(res => {
+                    this.searchLoading = false;
+                    return res.data;
+                }).catch(err => {
+
+                    if(err.response.status === 422) {
+                        this.$bvToast.toast(err.response.data.error.message, {
+                            title: 'Cannot display search results',
+                            variant: 'danger',
+                            autoHideDelay: 5000
+                        });
+                    }
+
+                    return [];
+                })
+            },
+
+            getSearchResultValue(result) {
+                return result.name;
+            },
+
+            onSearchSubmit(result) {
+                if (result.length < 1) {
+                    return [];
+                }
+
+                location.href = result.url;
+            },
+
+            truncateName(val) {
+                if(val.length < 24) {
+                    return val;
+                }
+
+                return val.substr(0, 23) + '...';
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .groups-sidenav {
+        display: none;
+        font-family: var(--font-family-sans-serif);
+
+        @media(min-width: 768px) {
+            display: block;
+            width: 100%;
+            height: 100vh;
+            background: #fff;
+            top: 74px;
+            border: none;
+            overflow: hidden;
+            z-index: 1;
+            position: sticky;
+        }
+
+        .group-nav-btn {
+            display: block;
+            width: 100%;
+            padding-left: 0;
+            padding-top: 0.3rem;
+            padding-bottom: 0.3rem;
+            margin-bottom: 0.3rem;
+            border-radius: 1.5rem;
+            text-align: left;
+            color: #6c757d;
+            background-color: transparent;
+            border-color: transparent;
+            justify-content: flex-start;
+
+            &.active {
+                background-color: #EFF6FF !important;
+                border:1px solid #DBEAFE !important;
+                color: #212529;
+
+                .group-nav-btn-icon {
+                    background-color: #2c78bf !important;
+                    color: #fff !important;
+                }
+            }
+
+            &-icon {
+                display: inline-flex;
+                width: 35px;
+                height: 35px;
+                padding: 12px;
+                background-color: #E5E7EB;
+                border-radius: 17px;
+                margin: auto 0.3rem;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &-name {
+                display: inline-block;
+                margin-left: 0.3rem;
+                font-weight: 700;
+            }
+        }
+
+        .autocomplete-input {
+            height: 2.375rem;
+            background-color: #f8f9fa !important;
+            font-size: 0.9rem;
+            color: #495057;
+            border-radius: 50rem;
+            border-color: transparent;
+
+            &:focus,
+            &[aria-expanded=true] {
+                box-shadow: none;
+            }
+        }
+
+        .autocomplete-result {
+            background: none;
+            padding: 12px;
+
+            &:hover,
+            &:focus {
+                background-color: #EFF6FF !important;
+            }
+
+            .media {
+                img {
+                    object-fit: cover;
+                    border-radius: 4px;
+                    margin-right: 0.6rem;
+                }
+
+                .icon-placeholder {
+                    display: flex;
+                    width: 32px;
+                    height: 32px;
+                    background-color: #2c78bf;
+                    border-radius: 4px;
+                    justify-content: center;
+                    align-items: center;
+                    color: #fff;
+                    margin-right: 0.6rem;
+                }
+            }
+        }
+    }
+</style>
diff --git a/resources/assets/components/partials/sidebar.vue b/resources/assets/components/partials/sidebar.vue
index b7b2a061b..7c2891092 100644
--- a/resources/assets/components/partials/sidebar.vue
+++ b/resources/assets/components/partials/sidebar.vue
@@ -132,12 +132,12 @@
 					</router-link>
 				</li>
 
-				<!-- <li class="nav-item">
-					<router-link class="nav-link" to="/i/web/groups">
+				<li class="nav-item">
+					<router-link class="nav-link" to="/groups/feed">
 						<span class="icon text-lighter"><i class="far fa-layer-group"></i></span>
 						{{ $t('navmenu.groups') }}
 					</router-link>
-				</li> -->
+				</li>
 
 				<li v-if="hasLiveStreams" class="nav-item">
 					<router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/livestreams">
diff --git a/resources/assets/js/components/GroupStatusPermalink.vue b/resources/assets/js/components/GroupStatusPermalink.vue
new file mode 100644
index 000000000..14f827e99
--- /dev/null
+++ b/resources/assets/js/components/GroupStatusPermalink.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="group-status-permalink-component">
+		<group-feed :group-id="gid" :permalinkMode="true" :permalinkId="sid" />
+	</div>
+</template>
+
+<script type="text/javascript">
+	import GroupFeed from '@/groups/GroupFeed.vue';
+
+	export default {
+		props: {
+			gid: {
+				type: String
+			},
+
+			sid: {
+				type: String
+			}
+		},
+
+		components: {
+			"group-feed": GroupFeed
+		}
+	}
+</script>
diff --git a/resources/assets/js/group-status.js b/resources/assets/js/group-status.js
new file mode 100644
index 000000000..a95ac270f
--- /dev/null
+++ b/resources/assets/js/group-status.js
@@ -0,0 +1,4 @@
+Vue.component(
+	'gs-permalink',
+	require('./components/GroupStatusPermalink.vue').default
+);
diff --git a/resources/assets/js/group-topic-feed.js b/resources/assets/js/group-topic-feed.js
new file mode 100644
index 000000000..d913336bd
--- /dev/null
+++ b/resources/assets/js/group-topic-feed.js
@@ -0,0 +1,4 @@
+Vue.component(
+	'group-topic-feed',
+	require('./../components/groups/GroupTopicFeed.vue').default
+);
diff --git a/resources/assets/js/groups.js b/resources/assets/js/groups.js
new file mode 100644
index 000000000..94d20cbb2
--- /dev/null
+++ b/resources/assets/js/groups.js
@@ -0,0 +1,29 @@
+Vue.component(
+	'group-component',
+	require('./../components/Groups.vue').default
+);
+
+Vue.component(
+	'groups-home',
+	require('./../components/groups/GroupsHome.vue').default
+);
+
+Vue.component(
+	'group-feed',
+	require('./../components/groups/GroupFeed.vue').default
+);
+
+Vue.component(
+	'group-settings',
+	require('./../components/groups/GroupSettings.vue').default
+);
+
+Vue.component(
+	'group-profile',
+	require('./../components/groups/GroupProfile.vue').default
+);
+
+Vue.component(
+	'groups-invite',
+	require('./../components/groups/GroupInvite.vue').default
+);
diff --git a/resources/assets/js/spa.js b/resources/assets/js/spa.js
index c99763170..c06a3793e 100644
--- a/resources/assets/js/spa.js
+++ b/resources/assets/js/spa.js
@@ -134,7 +134,13 @@ const ChangelogComponent = () => import(/* webpackChunkName: "changelog.bundle"
 // import SettingsComponent from "./../components/Settings.vue";
 // import ProfileComponent from "./components/ProfileNext.vue";
 // import VideosComponent from "./../components/Videos.vue";
-// import GroupsComponent from "./../components/Groups.vue";
+import GroupsComponent from "./../components/Groups.vue";
+import GroupFeedComponent from "./../components/GroupFeed.vue";
+import GroupDiscoverComponent from "./../components/GroupDiscover.vue";
+import GroupJoinsComponent from "./../components/GroupJoins.vue";
+import GroupNotificationsComponent from "./../components/GroupNotifications.vue";
+import GroupSearchComponent from "./../components/GroupSearch.vue";
+const CreateGroupComponent = () => import(/* webpackChunkName: "group.create" */ "./../components/GroupCreate.vue");
 
 const router = new VueRouter({
 	mode: "history",
@@ -161,12 +167,78 @@ const router = new VueRouter({
 		// 	component: DriveComponent,
 		// 	props: true
 		// },
+		{
+			path: "/groups/feed",
+			name: 'groups',
+			component: GroupFeedComponent,
+		},
+		{
+			path: "/groups/joins",
+			name: 'groupjoins',
+			component: GroupJoinsComponent,
+		},
+		{
+			path: "/groups/discover",
+			name: 'groupdiscover',
+			component: GroupDiscoverComponent,
+			props: true
+		},
+		{
+			path: "/groups/notifications",
+			name: 'groupnotify',
+			component: GroupNotificationsComponent,
+		},
+		{
+			path: "/groups/search",
+			name: 'groupsearch',
+			component: GroupSearchComponent,
+		},
+		{
+			path: "/groups/create",
+			name: 'groupscreate',
+			component: CreateGroupComponent,
+		},
 		// {
 		// 	path: "/i/web/groups",
 		// 	name: 'groups',
 		// 	component: GroupsComponent,
 		// 	props: true
 		// },
+		{
+			path: "/groups/:gid/p/:sid",
+			component: () => import(/* webpackChunkName: "groups-post" */ './../components/GroupPost.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:gid/user/:pid",
+			component: () => import(/* webpackChunkName: "groups-profile" */ './../components/GroupProfile.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:groupId/about",
+			component: () => import(/* webpackChunkName: "groups-page-about" */ './../components/groups/Page/GroupAbout.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:groupId/topics",
+			component: () => import(/* webpackChunkName: "groups-page-topics" */ './../components/groups/Page/GroupTopics.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:groupId/members",
+			component: () => import(/* webpackChunkName: "groups-page-members" */ './../components/groups/Page/GroupMembers.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:groupId/media",
+			component: () => import(/* webpackChunkName: "groups-page-media" */ './../components/groups/Page/GroupMedia.vue'),
+			props: true
+		},
+		{
+			path: "/groups/:groupId",
+			component: () => import(/* webpackChunkName: "groups-page" */ './../components/GroupPage.vue'),
+			props: true
+		},
 		{
 			path: "/i/web/post/:id",
 			name: 'post',
@@ -178,18 +250,18 @@ const router = new VueRouter({
 		// 	component: LivePlayerComponent,
 		// 	props: true
 		// },
-        {
-            path: "/i/web/profile/:id/followers",
-            name: 'profile-followers',
-            component: ProfileFollowersComponent,
-            props: true
-        },
-        {
-            path: "/i/web/profile/:id/following",
-            name: 'profile-following',
-            component: ProfileFollowingComponent,
-            props: true
-        },
+		{
+			path: "/i/web/profile/:id/followers",
+			name: 'profile-followers',
+			component: ProfileFollowersComponent,
+			props: true
+		},
+		{
+			path: "/i/web/profile/:id/following",
+			name: 'profile-following',
+			component: ProfileFollowingComponent,
+			props: true
+		},
 		{
 			path: "/i/web/profile/:id",
 			name: 'profile',
diff --git a/resources/views/groups/confirm-leave.blade.php b/resources/views/groups/confirm-leave.blade.php
new file mode 100644
index 000000000..41d400716
--- /dev/null
+++ b/resources/views/groups/confirm-leave.blade.php
@@ -0,0 +1,34 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container mt-5">
+	<div class="row justify-content-center">
+
+		<div class="col-12 col-md-7">
+			<p class="h3 font-weight-bold">Are you sure you want to leave this group?</p>
+			{{-- <p class="lead mb-3">If you decide to leave this group, all of your content will be permanently deleted.</p>
+			<p class="lead font-weight-bold">All of your interactions will be removed, including group</p>
+			<ul class="lead mb-5">
+				<li>Posts</li>
+				<li>Photos & Videos</li>
+				<li>Comments</li>
+				<li>Events</li>
+				<li>Polls</li>
+				<li>Likes</li>
+				<li>Shares</li>
+				<li>Reactions</li>
+				<li>Group Invitations</li>
+				<li>Moderation Reports</li>
+				<li>Recommendations</li>
+			</ul> --}}
+			<p class="mb-1">Any content you shared will remain accessible</p>
+			<p class="mb-3">You will not be able to re-join this group for 24 hours</p>
+			<hr>
+			<form class="d-flex justify-content-between">
+				<button class="btn btn-light border font-weight-bold" style="width: 75%;">Cancel</button>
+				<button type="submit" class="btn btn-danger font-weight-bold">Leave Group</button>
+			</form>
+		</div>
+	</div>
+</div>
+@endsection
diff --git a/resources/views/groups/index.blade.php b/resources/views/groups/index.blade.php
new file mode 100644
index 000000000..f3928546c
--- /dev/null
+++ b/resources/views/groups/index.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<groups-home />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/groups.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/invite-claim.blade.php b/resources/views/groups/invite-claim.blade.php
new file mode 100644
index 000000000..3c27f17a8
--- /dev/null
+++ b/resources/views/groups/invite-claim.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<groups-invite id="{{$group['id']}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/groups.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/invite.blade.php b/resources/views/groups/invite.blade.php
new file mode 100644
index 000000000..47eec9b53
--- /dev/null
+++ b/resources/views/groups/invite.blade.php
@@ -0,0 +1,23 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="row align-items-center" style="display: flex;width: 100%;height: 100vh;overflow: hidden;">
+	<div class="col-12 col-md-6 h-100 bg-primary d-flex align-items-center justify-content-center">
+		<div class="d-flex flex-column align-items-center" style="max-width: 300px;">
+			<p class="h3 text-center text-light font-weight-light">You were invited to join the <strong>{{ $group->name }}</strong> group.</p>
+			<div class="card card-body mt-3">
+				<div class="media align-items-center">
+					<img src="{{$group->metadata['header']['url'] }}" width="64" height="64" class="rounded-circle mr-3">
+					<div class="media-body">
+						<p class="lead mb-0">{{ $group->name }}</p>
+						<p class="small mb-0">34 members</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-12 col-md-6 h-100 d-flex align-items-center">
+		<p></p>
+	</div>
+</div>
+@endsection
diff --git a/resources/views/groups/profile.blade.php b/resources/views/groups/profile.blade.php
new file mode 100644
index 000000000..cbb95d866
--- /dev/null
+++ b/resources/views/groups/profile.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<group-profile pg="{{$group}}" pp="{{$profile}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/groups.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/report.blade.php b/resources/views/groups/report.blade.php
new file mode 100644
index 000000000..be090b024
--- /dev/null
+++ b/resources/views/groups/report.blade.php
@@ -0,0 +1,39 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+	<div class="col-12 col-md-6 offset-md-3 mt-5 pt-5">
+		<div class="card shadow-none border">
+			<div class="card-header font-weight-bold bg-danger text-white">
+				Report Group
+			</div>
+			<div class="card-body">
+				{{-- <p class="text-muted">
+					Only report groups if they are violating the <a href="#" class="font-weight-bold">Terms of Service</a> or <a href="#" class="font-weight-bold">Community Guidelines</a>.
+				</p> --}}
+				<p class="font-weight-bold text-muted">Reason (select one)</p>
+				<div class="custom-control custom-radio">
+					<input type="radio" name="customRadio" class="custom-control-input" id="r1">
+					<label class="custom-control-label" for="r1">Spam or excessive off-topic content</label>
+				</div>
+				<div class="custom-control custom-radio">
+					<input type="radio" name="customRadio" class="custom-control-input" id="r2">
+					<label class="custom-control-label" for="r2">Abusive, harmful or illegal content</label>
+				</div>
+				<div class="custom-control custom-radio">
+					<input type="radio" name="customRadio" class="custom-control-input" id="r2">
+					<label class="custom-control-label" for="r2">Impersonation</label>
+				</div>
+				<div class="custom-control custom-radio">
+					<input type="radio" name="customRadio" class="custom-control-input" id="r2">
+					<label class="custom-control-label" for="r2">Not moderated enough or ignores moderation reports</label>
+				</div>
+				<div class="custom-control custom-radio">
+					<input type="radio" name="customRadio" class="custom-control-input" id="r2">
+					<label class="custom-control-label" for="r2">Other</label>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+@endsection
diff --git a/resources/views/groups/settings.blade.php b/resources/views/groups/settings.blade.php
new file mode 100644
index 000000000..c7c0be6e5
--- /dev/null
+++ b/resources/views/groups/settings.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<group-settings group-id="{{$group->id}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/groups.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/show.blade.php b/resources/views/groups/show.blade.php
new file mode 100644
index 000000000..3fa190f3b
--- /dev/null
+++ b/resources/views/groups/show.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.spa')
+
+@section('content')
+<group-feed group-id="{{$id}}" path="{{$path}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/groups.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/status.blade.php b/resources/views/groups/status.blade.php
new file mode 100644
index 000000000..31b5ce8b4
--- /dev/null
+++ b/resources/views/groups/status.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<gs-permalink gid="{{$group->id}}" sid="{{$gp['status_id']}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/group-status.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/topic-feed.blade.php b/resources/views/groups/topic-feed.blade.php
new file mode 100644
index 000000000..c9d31d4e0
--- /dev/null
+++ b/resources/views/groups/topic-feed.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<group-topic-feed gid="{{$gid}}" name="{{$tag}}" />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/group-topic-feed.js') }}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/groups/unavailable.blade.php b/resources/views/groups/unavailable.blade.php
new file mode 100644
index 000000000..ab48447dd
--- /dev/null
+++ b/resources/views/groups/unavailable.blade.php
@@ -0,0 +1,25 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container d-flex justify-content-center">
+  <div class="error-page py-5 my-5" style="max-width: 450px;">
+    <h3 class="font-weight-bold">Group Unavailable</h3>
+    <p class="lead">The group you are trying to view is unavailable</p>
+
+    <div class="text-muted">
+		<p class="pt-4 mb-1">This can happen for a few reasons:</p>
+		<ul>
+			<li>The group url is invalid or has a typo</li>
+			<li>We are experiencing higher than usual traffic to this group and have temporarily limited access to this group</li>
+			<li>The group has been flagged for review by our automated abuse detection systems</li>
+			<li>The group is temporarily disabled by group administrators</li>
+			<li>The group has been deleted</li>
+		</ul>
+
+		<p class="pt-4">
+			If you are a group administrator, you can view your <a href="#" class="font-weight-bold">groups settings</a> for more information.
+		</p>
+    </div>
+  </div>
+</div>
+@endsection
diff --git a/routes/api.php b/routes/api.php
index 65ea86bb3..eea361e1a 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -20,6 +20,73 @@ Route::redirect('.well-known/change-password', '/settings/password');
 Route::get('api/nodeinfo/2.0.json', 'FederationController@nodeinfo');
 Route::get('api/service/health-check', 'HealthCheckController@get');
 
+Route::prefix('api/v0/groups')->middleware($middleware)->group(function() {
+    Route::get('config', 'Groups\GroupsApiController@getConfig');
+    Route::post('permission/create', 'Groups\CreateGroupsController@checkCreatePermission');
+    Route::post('create', 'Groups\CreateGroupsController@storeGroup');
+
+    Route::post('search/invite/friends/send', 'Groups\GroupsSearchController@inviteFriendsToGroup');
+    Route::post('search/invite/friends', 'Groups\GroupsSearchController@searchFriendsToInvite');
+    Route::post('search/global', 'Groups\GroupsSearchController@searchGlobalResults');
+    Route::post('search/lac', 'Groups\GroupsSearchController@searchLocalAutocomplete');
+    Route::post('search/addrec', 'Groups\GroupsSearchController@searchAddRecent');
+    Route::get('search/getrec', 'Groups\GroupsSearchController@searchGetRecent');
+    Route::get('comments', 'Groups\GroupsCommentController@getComments');
+    Route::post('comment', 'Groups\GroupsCommentController@storeComment');
+    Route::post('comment/photo', 'Groups\GroupsCommentController@storeCommentPhoto');
+    Route::post('comment/delete', 'Groups\GroupsCommentController@deleteComment');
+    Route::get('discover/popular', 'Groups\GroupsDiscoverController@getDiscoverPopular');
+    Route::get('discover/new', 'Groups\GroupsDiscoverController@getDiscoverNew');
+    Route::post('delete', 'Groups\GroupsMetaController@deleteGroup');
+    Route::post('status/new', 'Groups\GroupsPostController@storePost');
+    Route::post('status/delete', 'Groups\GroupsPostController@deletePost');
+    Route::post('status/like', 'Groups\GroupsPostController@likePost');
+    Route::post('status/unlike', 'Groups\GroupsPostController@unlikePost');
+    Route::get('topics/list', 'Groups\GroupsTopicController@groupTopics');
+    Route::get('topics/tag', 'Groups\GroupsTopicController@groupTopicTag');
+    Route::get('accounts/{gid}/{pid}', 'Groups\GroupsApiController@getGroupAccount');
+    Route::get('categories/list', 'Groups\GroupsApiController@getGroupCategories');
+    Route::get('category/list', 'Groups\GroupsApiController@getGroupsByCategory');
+    Route::get('self/recommended/list', 'Groups\GroupsApiController@getRecommendedGroups');
+    Route::get('self/list', 'Groups\GroupsApiController@getSelfGroups');
+    Route::get('media/list', 'Groups\GroupsPostController@getGroupMedia');
+    Route::get('members/list', 'Groups\GroupsMemberController@getGroupMembers');
+    Route::get('members/requests', 'Groups\GroupsMemberController@getGroupMemberJoinRequests');
+    Route::post('members/request', 'Groups\GroupsMemberController@handleGroupMemberJoinRequest');
+    Route::get('members/get', 'Groups\GroupsMemberController@getGroupMember');
+    Route::get('member/intersect/common', 'Groups\GroupsMemberController@getGroupMemberCommonIntersections');
+    Route::get('status', 'Groups\GroupsPostController@getStatus');
+    Route::post('like', 'GroupController@likePost');
+    Route::post('comment/like', 'Groups\GroupsCommentController@likePost');
+    Route::post('comment/unlike', 'Groups\GroupsCommentController@unlikePost');
+    Route::get('self/feed', 'Groups\GroupsFeedController@getSelfFeed');
+    Route::get('self/notifications', 'Groups\GroupsNotificationsController@selfGlobalNotifications');
+    Route::get('{id}/user/{pid}/feed', 'Groups\GroupsFeedController@getGroupProfileFeed');
+    Route::get('{id}/feed', 'Groups\GroupsFeedController@getGroupFeed');
+    Route::get('{id}/atabs', 'Groups\GroupsAdminController@getAdminTabs');
+    Route::get('{id}/admin/interactions', 'Groups\GroupsAdminController@getInteractionLogs');
+    Route::get('{id}/admin/blocks', 'Groups\GroupsAdminController@getBlocks');
+    Route::post('{id}/admin/blocks/add', 'Groups\GroupsAdminController@addBlock');
+    Route::post('{id}/admin/blocks/undo', 'Groups\GroupsAdminController@undoBlock');
+    Route::post('{id}/admin/blocks/export', 'Groups\GroupsAdminController@exportBlocks');
+    Route::get('{id}/reports/list', 'Groups\GroupsAdminController@getReportList');
+
+    Route::get('{id}/members/interaction-limits', 'GroupController@getMemberInteractionLimits');
+    Route::post('{id}/invite/check', 'GroupController@groupMemberInviteCheck');
+    Route::post('{id}/invite/accept', 'GroupController@groupMemberInviteAccept');
+    Route::post('{id}/invite/decline', 'GroupController@groupMemberInviteDecline');
+    Route::post('{id}/members/interaction-limits', 'GroupController@updateMemberInteractionLimits');
+    Route::post('{id}/report/action', 'GroupController@reportAction');
+    Route::post('{id}/report/create', 'GroupController@reportCreate');
+    Route::post('{id}/admin/mbs', 'GroupController@metaBlockSearch');
+    Route::post('{id}/join', 'GroupController@joinGroup');
+    Route::post('{id}/cjr', 'GroupController@cancelJoinRequest');
+    Route::post('{id}/leave', 'GroupController@groupLeave');
+    Route::post('{id}/settings', 'GroupController@updateGroup');
+    Route::get('{id}/likes/{sid}', 'GroupController@showStatusLikes');
+    Route::get('{id}', 'GroupController@getGroup');
+});
+
 Route::group(['prefix' => 'api'], function() use($middleware) {
 
     Route::group(['prefix' => 'v1'], function() use($middleware) {
diff --git a/routes/web.php b/routes/web.php
index 6768ddb1b..00e9e201a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -354,6 +354,32 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
     Route::get('auth/invite/a/{code}', 'AdminInviteController@index');
     Route::post('api/v1.1/auth/invite/admin/re', 'AdminInviteController@apiRegister')->middleware('throttle:5,1440');
 
+    Route::redirect('groups/', '/groups/home');
+    Route::redirect('groups/home', '/groups/feed');
+
+    Route::prefix('groups')->group(function() {
+        // Route::get('feed', 'GroupController@index');
+        Route::get('{id}/invite/claim', 'GroupController@groupInviteClaim');
+        Route::get('{id}/invite', 'GroupController@groupInviteLanding');
+        Route::get('{id}/settings', 'GroupController@groupSettings');
+        Route::get('{gid}/topics/{topic}', 'Groups\GroupsTopicController@showTopicFeed');
+        Route::get('{gid}/p/{sid}.json', 'GroupController@getStatusObject');
+        Route::get('{gid}/p/{sid}', 'GroupController@showStatus');
+        Route::get('{id}/user/{pid}', 'GroupController@showProfile');
+        Route::get('{id}/un/{pid}', 'GroupController@showProfile');
+        Route::get('{id}/username/{pid}', 'GroupController@showProfileByUsername');
+        Route::get('{id}/{path}', 'GroupController@show');
+        Route::get('{id}.json', 'GroupController@getGroupObject');
+        Route::get('feed', 'GroupController@index');
+        Route::get('create', 'GroupController@index');
+        Route::get('discover', 'GroupController@index');
+        Route::get('search', 'GroupController@index');
+        Route::get('joins', 'GroupController@index');
+        Route::get('notifications', 'GroupController@index');
+        Route::get('{id}', 'GroupController@show');
+    });
+    Route::get('g/{hid}', 'GroupController@groupShortLinkRedirect');
+
     Route::get('storage/m/_v2/{pid}/{mhash}/{uhash}/{f}', 'MediaController@fallbackRedirect');
     Route::get('stories/{username}', 'ProfileController@stories');
     Route::get('p/{id}', 'StatusController@shortcodeRedirect');
diff --git a/webpack.mix.js b/webpack.mix.js
index aadcac397..1c52b178b 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -40,6 +40,9 @@ mix.js('resources/assets/js/app.js', 'public/js')
 .js('resources/assets/js/admin_invite.js', 'public/js')
 .js('resources/assets/js/landing.js', 'public/js')
 .js('resources/assets/js/remote_auth.js', 'public/js')
+.js('resources/assets/js/groups.js', 'public/js')
+.js('resources/assets/js/group-status.js', 'public/js')
+.js('resources/assets/js/group-topic-feed.js', 'public/js')
 .vue({ version: 2 });
 
 mix.extract();