diff --git a/app/Http/Controllers/StatusController.php b/app/Http/Controllers/StatusController.php
index 649ab2da1..fe2ac6468 100644
--- a/app/Http/Controllers/StatusController.php
+++ b/app/Http/Controllers/StatusController.php
@@ -325,6 +325,7 @@ class StatusController extends Controller
 
         if ($changed === true) {
             $media->save();
+            Cache::forget('status:transformer:media:attachments:'.$media->status_id);
         }
 
         return response()->json([], 200);
diff --git a/app/Transformer/Api/StatusTransformer.php b/app/Transformer/Api/StatusTransformer.php
index 1a4b55a39..c74f4ed61 100644
--- a/app/Transformer/Api/StatusTransformer.php
+++ b/app/Transformer/Api/StatusTransformer.php
@@ -68,7 +68,7 @@ class StatusTransformer extends Fractal\TransformerAbstract
     public function includeMediaAttachments(Status $status)
     {
         return Cache::remember('status:transformer:media:attachments:'.$status->id, now()->addDays(14), function() use($status) {
-            if(in_array($status->type, ['photo', 'video', 'photo:album', 'loop'])) {
+            if(in_array($status->type, ['photo', 'video', 'photo:album', 'loop', 'photo:video:album'])) {
                 $media = $status->media()->orderBy('order')->get();
                 return $this->collection($media, new MediaTransformer());
             }
diff --git a/public/js/profile.js b/public/js/profile.js
index 4c718010b..369bc1781 100644
Binary files a/public/js/profile.js and b/public/js/profile.js differ
diff --git a/public/js/status.js b/public/js/status.js
index 45bf8e6dc..b863c6247 100644
Binary files a/public/js/status.js and b/public/js/status.js differ
diff --git a/public/js/timeline.js b/public/js/timeline.js
index 4a8a75e58..57d9b587b 100644
Binary files a/public/js/timeline.js and b/public/js/timeline.js differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 297dd213b..c92679d40 100644
Binary files a/public/mix-manifest.json and b/public/mix-manifest.json differ
diff --git a/resources/assets/js/components/presenter/MixedAlbumPresenter.vue b/resources/assets/js/components/presenter/MixedAlbumPresenter.vue
index 790ce11ce..f105c1205 100644
--- a/resources/assets/js/components/presenter/MixedAlbumPresenter.vue
+++ b/resources/assets/js/components/presenter/MixedAlbumPresenter.vue
@@ -18,8 +18,8 @@
 						<source :src="media.url" :type="media.mime">
 					</video>
 
-					<div v-else-if="media.type == 'Image'" slot="img" :title="media.description" :class="media.filter_class">
-						<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy">
+					<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
+						<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy">
 					</div>
 
 					<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
@@ -38,12 +38,12 @@
 				>
 			<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
 
-				<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
+				<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
 					<source :src="media.url" :type="media.mime">
 				</video>
 
-				<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class" :title="media.description">
-					<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy">
+				<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
+					<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy">
 				</div>
 
 				<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
diff --git a/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue b/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
index b4f75c09a..173ceb3bb 100644
--- a/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
+++ b/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
@@ -13,8 +13,8 @@
 				:interval="0"
 			>
 				<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
-					<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;" :title="img.description">
-						<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
+					<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;" :title="img.description">
+						<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
 					</div>
 				</b-carousel-slide>
 				<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
@@ -32,8 +32,8 @@
 			:interval="0"
 		>
 			<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id" :title="img.description">
-				<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;">
-					<img class="img-fluid" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
+				<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;">
+					<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
 				</div>
 			</b-carousel-slide>
 			<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
diff --git a/resources/assets/js/components/presenter/PhotoPresenter.vue b/resources/assets/js/components/presenter/PhotoPresenter.vue
index fbd43b5a8..6d1d22777 100644
--- a/resources/assets/js/components/presenter/PhotoPresenter.vue
+++ b/resources/assets/js/components/presenter/PhotoPresenter.vue
@@ -5,14 +5,14 @@
 				<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
 				<p class="font-weight-light">(click to show)</p>
 			</summary>
-			<div class="max-hide-overflow" :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description">
-				<img class="card-img-top" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
+			<div class="max-hide-overflow" :title="status.media_attachments[0].description">
+				<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
 			</div>
 		</details>
 	</div>
 	<div v-else>
-		<div :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description">
-			<img class="card-img-top" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
+		<div :title="status.media_attachments[0].description">
+			<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
 		</div>
 	</div>
 </template>
diff --git a/resources/views/settings/relationships/home.blade.php b/resources/views/settings/relationships/home.blade.php
index c4183534a..66b27628f 100644
--- a/resources/views/settings/relationships/home.blade.php
+++ b/resources/views/settings/relationships/home.blade.php
@@ -18,34 +18,33 @@
 	</li>
 </ul>
 <hr>
-<table class="table table-bordered">
+<div class="table-responsive">
+<table class="table table-bordered table-hover">
 	<thead>
 		<tr>
-			<th scope="col" class="pt-0 pb-1 mt-0">
+			{{-- <th scope="col" class="pt-0 pb-1 mt-0">
 				<input type="checkbox" name="check" class="form-control check-all">
-			</th>
+			</th> --}}
 			<th scope="col">Username</th>
-			<th scope="col">Relationship</th>
 			<th scope="col">Action</th>
 		</tr>
 	</thead>
 	<tbody>
 		@foreach($data as $follower)
 		<tr>
-			<th scope="row" class="pb-0 pt-1 my-0">
-				{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}}
-			</th>
+			{{-- <th scope="row" class="pb-0 pt-1 my-0">
+				<input type="checkbox" class="form-control mr-1 check-row">
+			</th> --}}
 			<td class="font-weight-bold">
-				<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">
-				<span class="d-inline-block text-truncate" style="max-width: 160px;" title="{{$follower->username}}">{{$follower->username}}</span>
+				<a href="{{$follower->url()}}" class="text-decoration-none text-dark">
+					<p class="mb-0 pb-0 text-truncate" title="{{$follower->username}}">{{$follower->username}}</p>
+				</a>
 			</td>
 			@if($mode == 'following')
-			<td class="text-center">Following</td>
 			<td class="text-center">
 				<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
 			</td>
 			@else
-			<td class="text-center">Follower</td>
 			<td class="text-center">
 				<a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a>
 				<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a>
@@ -55,10 +54,19 @@
 		@endforeach
 	</tbody>
 </table>
+</div>
 <div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div>
 @endif
 @endsection
 
+@push('styles')
+<style type="text/css">
+.table-hover tbody tr:hover {
+    color: #718096;
+    background-color: #F7FAFC;
+}
+</style>
+@endpush 
 @push('scripts')
 <script type="text/javascript">
 	$(document).ready(() => {
diff --git a/resources/views/status/edit.blade.php b/resources/views/status/edit.blade.php
index d69843552..f16aa2bf9 100644
--- a/resources/views/status/edit.blade.php
+++ b/resources/views/status/edit.blade.php
@@ -3,89 +3,104 @@
 @section('content')
 
 <div class="container">
-  <div class="col-12 col-md-8 offset-md-2 pt-4">
+	<div class="col-12 col-md-8 offset-md-2 pt-4">
 
-    <div class="card">
-      <div class="card-header bg-white font-weight-bold d-flex justify-content-between align-items-center">
-        <span>Edit Status</span>
-        <a class="btn btn-outline-primary btn-sm font-weight-bold" href="{{$status->url()}}">Back to post</a>
-      </div>
-      <div class="card-body">
-          @csrf
-          <div class="form-group mb-0">
-            <label class="font-weight-bold text-muted small">CW/NSFW</label>
-            <div class="switch switch-sm">
-              <input type="checkbox" class="switch" id="cw-switch" name="cw" {{$status->is_nsfw==true?'checked=""':''}} disabled="">
-              <label for="cw-switch" class="small font-weight-bold">(Default off)</label>
-            </div>
-          </div>
-      </div>
-    </div>
+		<div class="card">
+			<div class="card-header bg-white font-weight-bold d-flex justify-content-between align-items-center">
+				<span>Edit Status</span>
+				<a class="btn btn-outline-primary btn-sm font-weight-bold" href="{{$status->url()}}">Back to post</a>
+			</div>
+			<div class="card-body">
+				@csrf
+				<div class="form-group mb-0">
+					<label class="font-weight-bold text-muted small">CW/NSFW</label>
+					<div class="switch switch-sm">
+						<input type="checkbox" class="switch" id="cw-switch" name="cw" {{$status->is_nsfw==true?'checked=""':''}} disabled="">
+						<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="accordion" id="accordionWrapper">
+			@foreach($status->media()->orderBy('order')->get() as $media)
+			<div class="card mt-4 media-card">
+				<div class="card-header bg-white font-weight-bold" data-toggle="collapse" href="#collapseMedia{{$loop->iteration}}">
+					Media #{{$media->order + 1}}
+					<span class="float-right">
+						<span class="badge badge-primary">
+							{{$media->mime}}
+						</span>
+					</span>
+				</div>
+				<div class="collapse {{$loop->iteration==1?'show':''}}" id="collapseMedia{{$loop->iteration}}" data-parent="#accordionWrapper">
+					<div class="card-body p-0">
+						<form method="post" enctype="multipart/form-data" class="media-form">
+							@csrf
+							<input type="hidden" name="media_id" value="{{$media->id}}">
+							<div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}">
+								<img class="img-fluid" src="{{$media->thumbnailUrl()}}" width="100%">
+							</div>
+							<div class="p-3">
+								<div class="form-group">
+									<label class="font-weight-bold text-muted small">Description</label>
+									<input class="form-control" name="media_caption" value="{{$media->caption}}" placeholder="Add a descriptive caption for screenreaders" autocomplete="off">
+								</div>
+							@if($media->activityVerb() == 'Image')
+								<div class="form-group form-filters" data-filter="{{$media->filter_class}}">
+									<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
+									<select class="form-control filter-dropdown" name="media_filter"><option value="" selected="">No Filter</option><option value="filter-1977">1977</option><option value="filter-aden">Aden</option><option value="filter-amaro">Amaro</option><option value="filter-ashby">Ashby</option><option value="filter-brannan">Brannan</option><option value="filter-brooklyn">Brooklyn</option><option value="filter-charmes">Charmes</option><option value="filter-clarendon">Clarendon</option><option value="filter-crema">Crema</option><option value="filter-dogpatch">Dogpatch</option><option value="filter-earlybird">Earlybird</option><option value="filter-gingham">Gingham</option><option value="filter-ginza">Ginza</option><option value="filter-hefe">Hefe</option><option value="filter-helena">Helena</option><option value="filter-hudson">Hudson</option><option value="filter-inkwell">Inkwell</option><option value="filter-kelvin">Kelvin</option><option value="filter-juno">Kuno</option><option value="filter-lark">Lark</option><option value="filter-lofi">Lo-Fi</option><option value="filter-ludwig">Ludwig</option><option value="filter-maven">Maven</option><option value="filter-mayfair">Mayfair</option><option value="filter-moon">Moon</option><option value="filter-nashville">Nashville</option><option value="filter-perpetua">Perpetua</option><option value="filter-poprocket">Poprocket</option><option value="filter-reyes">Reyes</option><option value="filter-rise">Rise</option><option value="filter-sierra">Sierra</option><option value="filter-skyline">Skyline</option><option value="filter-slumber">Slumber</option><option value="filter-stinson">Stinson</option><option value="filter-sutro">Sutro</option><option value="filter-toaster">Toaster</option><option value="filter-valencia">Valencia</option><option value="filter-vesper">Vesper</option><option value="filter-walden">Walden</option><option value="filter-willow">Willow</option><option value="filter-xpro-ii">X-Pro II</option></select>
+								</div>
+							@endif
+								<hr>
+								<div class="form-group d-flex justify-content-between align-items-center mb-0">
+									<p class="text-muted font-weight-bold mb-0 small">Last Updated: {{$media->updated_at->diffForHumans()}}</p>
+									<button type="submit" class="btn btn-primary btn-sm font-weight-bold px-4">Update</button>
+								</div>  
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			@endforeach
+		</div>
 
-    @foreach($status->media()->orderBy('order')->get() as $media)
-    <div class="card mt-4 media-card">
-      <div class="card-header bg-white font-weight-bold">
-        Media #{{$media->order}}
-      </div>
-      <div class="card-body p-0">
-      <form method="post" enctype="multipart/form-data" class="media-form">
-        @csrf
-        <input type="hidden" name="media_id" value="{{$media->id}}">
-        <div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}">
-          <img class="img-fluid" src="{{$media->url()}}" width="100%">
-        </div>
-        <div class="p-3">
-          <div class="form-group">
-            <label class="font-weight-bold text-muted small">Description</label>
-            <input class="form-control" name="media_caption" value="{{$media->caption}}" placeholder="Add a descriptive caption for screenreaders" autocomplete="off">
-          </div>
-          <div class="form-group form-filters" data-filter="{{$media->filter_class}}">
-            <label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
-            <select class="form-control filter-dropdown" name="media_filter"><option value="" selected="">No Filter</option><option value="filter-1977">1977</option><option value="filter-aden">Aden</option><option value="filter-amaro">Amaro</option><option value="filter-ashby">Ashby</option><option value="filter-brannan">Brannan</option><option value="filter-brooklyn">Brooklyn</option><option value="filter-charmes">Charmes</option><option value="filter-clarendon">Clarendon</option><option value="filter-crema">Crema</option><option value="filter-dogpatch">Dogpatch</option><option value="filter-earlybird">Earlybird</option><option value="filter-gingham">Gingham</option><option value="filter-ginza">Ginza</option><option value="filter-hefe">Hefe</option><option value="filter-helena">Helena</option><option value="filter-hudson">Hudson</option><option value="filter-inkwell">Inkwell</option><option value="filter-kelvin">Kelvin</option><option value="filter-juno">Kuno</option><option value="filter-lark">Lark</option><option value="filter-lofi">Lo-Fi</option><option value="filter-ludwig">Ludwig</option><option value="filter-maven">Maven</option><option value="filter-mayfair">Mayfair</option><option value="filter-moon">Moon</option><option value="filter-nashville">Nashville</option><option value="filter-perpetua">Perpetua</option><option value="filter-poprocket">Poprocket</option><option value="filter-reyes">Reyes</option><option value="filter-rise">Rise</option><option value="filter-sierra">Sierra</option><option value="filter-skyline">Skyline</option><option value="filter-slumber">Slumber</option><option value="filter-stinson">Stinson</option><option value="filter-sutro">Sutro</option><option value="filter-toaster">Toaster</option><option value="filter-valencia">Valencia</option><option value="filter-vesper">Vesper</option><option value="filter-walden">Walden</option><option value="filter-willow">Willow</option><option value="filter-xpro-ii">X-Pro II</option></select>
-          </div>
-          <hr>
-          <div class="form-group d-flex justify-content-between align-items-center mb-0">
-            <p class="text-muted font-weight-bold mb-0 small">Last Updated: {{$media->updated_at->diffForHumans()}}</p>
-            <button type="submit" class="btn btn-primary btn-sm font-weight-bold px-4">Update</button>
-          </div>  
-        </div>
-      </form>
-      </div>
-    </div>
-    @endforeach
-
-  </div>
+	</div>
 </div>
 @endsection
 
 @push('scripts')
+<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
 <script type="text/javascript">
-  
-  $('.form-filters').each(function(i,d) {
-    let el = $(d);
-    let filter = el.data('filter');
-    if(filter) {
-      var opt = el.find('option[value='+filter+']')[0];
-      $(opt).attr('selected','');
-    }
-  });
+	$(document).ready(function() {
+		new Vue({ 
+			el: '#content'
+		});
+		$('.form-filters').each(function(i,d) {
+			let el = $(d);
+			let filter = el.data('filter');
+			if(filter) {
+				var opt = el.find('option[value='+filter+']')[0];
+				$(opt).attr('selected','');
+			}
+		});
 
-  $('.media-form').on('submit', function(e){
-    e.preventDefault();
-    let el = $(this);
-    let id = el.find('input[name=media_id]').val();
-    let caption = el.find('input[name=media_caption]').val();
-    let filter = el.find('.filter-dropdown option:selected').val();
-    axios.post(window.location.href, {
-      'id': id,
-      'caption': caption,
-      'filter': filter
-    }).then((res) => {
-      swal('Success!', 'You have successfully updated your post', 'success');
-    }).catch((err) => {
-      swal('Something went wrong', 'An error occurred, please try again later', 'error');
-    });
-  });
+		$('.media-form').on('submit', function(e){
+			e.preventDefault();
+			let el = $(this);
+			let id = el.find('input[name=media_id]').val();
+			let caption = el.find('input[name=media_caption]').val();
+			let filter = el.find('.filter-dropdown option:selected').val();
+			axios.post(window.location.href, {
+				'id': id,
+				'caption': caption,
+				'filter': filter
+			}).then((res) => {
+				window.location.href = '{{$status->url()}}';
+			}).catch((err) => {
+				swal('Something went wrong', 'An error occurred, please try again later', 'error');
+			});
+		});
+	});
 
 </script>
 @endpush
\ No newline at end of file