diff --git a/resources/assets/components/Direct.vue b/resources/assets/components/Direct.vue
index b00319104..af9c4375c 100644
--- a/resources/assets/components/Direct.vue
+++ b/resources/assets/components/Direct.vue
@@ -1,301 +1,311 @@
 <template>
-	<div class="dms-page-component">
-		<div v-if="isLoaded" class="container-fluid mt-3">
-			<div class="row">
-				<div class="col-md-3 d-md-block">
-					<sidebar :user="profile" />
-				</div>
-
-				<div class="col-md-5 offset-md-1 mb-5 order-2 order-md-1">
-					<h1 class="font-weight-bold mb-4">Direct Messages</h1>
-					<div v-if="threadsLoaded">
-						<div v-for="(thread, idx) in threads" class="card shadow-sm mb-1" style="border-radius:15px;">
-							<div class="card-body p-3">
-								<div class="media">
-									<img :src="thread.accounts[0].avatar" width="45" height="45" class="shadow-sm mr-3" style="border-radius: 15px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
-
-									<div class="media-body">
-										<!-- <p class="lead mb-n2">{{ thread.accounts[0].display_name }}</p> -->
-										<div class="d-flex justify-content-between align-items-start mb-1">
-											<p class="dm-display-name font-weight-bold mb-0">&commat;{{ thread.accounts[0].acct }}</p>
-											<p class="font-weight-bold small text-muted mb-0">{{ timeago(thread.last_status.created_at) }} ago</p>
-										</div>
-
-										<p class="dm-thread-summary text-muted mr-4" v-html="threadSummary(thread.last_status)"></p>
-									</div>
-
-									<router-link class="btn btn-link stretched-link align-self-center mr-n3" :to="`/i/web/direct/thread/${thread.accounts[0].id}`">
-										<i class="fal fa-chevron-right fa-lg text-lighter"></i>
-									</router-link>
-								</div>
-							</div>
-						</div>
-
-						<div v-if="!threads || !threads.length" class="row justify-content-center">
-							<div class="col-12 text-center">
-								<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
-								<p class="lead text-muted font-weight-bold">Your inbox is empty</p>
-							</div>
-						</div>
-
-						<div v-if="canLoadMore">
-							<intersect @enter="enterIntersect">
-								<dm-placeholder />
-							</intersect>
-						</div>
-					</div>
-
-					<div v-else>
-						<dm-placeholder />
-					</div>
-				</div>
-
-				<div class="col-md-3 d-md-block order-1 order-md-2 mb-4">
-					<button class="btn btn-dark shadow-sm font-weight-bold btn-block" @click="openCompose"><i class="far fa-envelope mr-1"></i> Compose</button>
-					<hr>
-					<div class="d-flex d-md-block">
-						<button
-							v-for="(tab, index) in tabs"
-							class="btn shadow-sm font-weight-bold btn-block text-capitalize mt-0 mt-md-2 mx-1 mx-md-0"
-							:class="[ index === tabIndex ? 'btn-primary' : 'btn-light' ]"
-							@click="toggleTab(index)"
-							>
-								{{ $t('directMessages.' + tab) }}
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<drawer />
-		</div>
-		<div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
-			<b-spinner />
-		</div>
-
-		<b-modal
-			ref="compose"
-			hide-header
-			hide-footer
-			centered
-			rounded
-			size="md"
-		>
-			<div class="card shadow-none mt-4">
-				<div class="card-body d-flex align-items-center justify-content-between flex-column" style="min-height: 50vh;">
-					<h3 class="font-weight-bold">New Direct Message</h3>
-					<div>
-						<p class="mb-0 font-weight-bold">Select Recipient</p>
-						<autocomplete
-							:search="composeSearch"
-							:disabled="composeLoading"
-							placeholder="@dansup"
-							aria-label="Search usernames"
-							:get-result-value="getTagResultValue"
-							@submit="onTagSubmitLocation"
-							:debounce-time="500"
-							ref="autocomplete"
-						>
-						</autocomplete>
-						<p class="small text-muted">Search by username, or webfinger (@dansup@pixelfed.social)</p>
-						<div style="width:300px;"></div>
-					</div>
-					<div>
-						<button class="btn btn-outline-dark rounded-pill font-weight-bold px-5 py-1" @click="closeCompose">Cancel</button>
-					</div>
-				</div>
-			</div>
-		</b-modal>
-	</div>
+    <div class="dms-page-component">
+        <div v-if="isLoaded" class="container-fluid mt-3">
+            <div class="row">
+                <div class="col-md-3 d-md-block">
+                    <sidebar :user="profile" />
+                </div>
+
+                <div class="col-md-5 offset-md-1 mb-5 order-2 order-md-1">
+                    <h1 class="font-weight-bold mb-4">Direct Messages</h1>
+                    <div v-if="threadsLoaded">
+                        <div v-for="(thread, idx) in threads" class="card shadow-sm mb-1" style="border-radius:15px;">
+                            <div class="card-body p-3">
+                                <div class="media">
+                                    <img :src="thread.accounts[0].avatar" width="45" height="45" class="shadow-sm mr-3" style="border-radius: 15px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
+
+                                    <div class="media-body">
+                                        <!-- <p class="lead mb-n2">{{ thread.accounts[0].display_name }}</p> -->
+                                        <div class="d-flex justify-content-between align-items-start mb-1">
+                                            <p class="dm-display-name font-weight-bold mb-0">&commat;{{ thread.accounts[0].acct }}</p>
+                                            <p class="font-weight-bold small text-muted mb-0">{{ timeago(thread.last_status.created_at) }} ago</p>
+                                        </div>
+
+                                        <p class="dm-thread-summary text-muted mr-4" v-html="threadSummary(thread.last_status)"></p>
+                                    </div>
+
+                                    <router-link class="btn btn-link stretched-link align-self-center mr-n3" :to="`/i/web/direct/thread/${thread.accounts[0].id}`">
+                                        <i class="fal fa-chevron-right fa-lg text-lighter"></i>
+                                    </router-link>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-if="!threads || !threads.length" class="row justify-content-center">
+                            <div class="col-12 text-center">
+                                <img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
+                                <p class="lead text-muted font-weight-bold">Your inbox is empty</p>
+                            </div>
+                        </div>
+
+                        <div v-if="canLoadMore">
+                            <intersect @enter="enterIntersect">
+                                <dm-placeholder />
+                            </intersect>
+                        </div>
+                    </div>
+
+                    <div v-else>
+                        <dm-placeholder />
+                    </div>
+                </div>
+
+                <div class="col-md-3 d-md-block order-1 order-md-2 mb-4">
+                    <button class="btn btn-dark shadow-sm font-weight-bold btn-block" @click="openCompose"><i class="far fa-envelope mr-1"></i> Compose</button>
+                    <hr>
+                    <div class="d-flex d-md-block">
+                        <button
+                            v-for="(tab, index) in tabs"
+                            class="btn shadow-sm font-weight-bold btn-block text-capitalize mt-0 mt-md-2 mx-1 mx-md-0"
+                            :class="[ index === tabIndex ? 'btn-primary' : 'btn-light' ]"
+                            @click="toggleTab(index)"
+                            >
+                                {{ $t('directMessages.' + tab) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <drawer />
+        </div>
+        <div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
+            <b-spinner />
+        </div>
+
+        <b-modal
+            ref="compose"
+            hide-header
+            hide-footer
+            centered
+            rounded
+            size="md"
+        >
+            <div class="card shadow-none mt-4">
+                <div class="card-body d-flex align-items-center justify-content-between flex-column" style="min-height: 50vh;">
+                    <h3 class="font-weight-bold">New Direct Message</h3>
+                    <div>
+                        <p class="mb-0 font-weight-bold">Select Recipient</p>
+                        <autocomplete
+                            :search="composeSearch"
+                            :disabled="composeLoading"
+                            placeholder="@dansup"
+                            aria-label="Search usernames"
+                            :get-result-value="getTagResultValue"
+                            @submit="onTagSubmitLocation"
+                            :debounce-time="500"
+                            ref="autocomplete"
+                        >
+                        </autocomplete>
+                        <p class="small text-muted">Search by username, or webfinger (@dansup@pixelfed.social)</p>
+                        <div style="width:300px;"></div>
+                    </div>
+                    <div>
+                        <button class="btn btn-outline-dark rounded-pill font-weight-bold px-5 py-1" @click="closeCompose">Cancel</button>
+                    </div>
+                </div>
+            </div>
+        </b-modal>
+    </div>
 </template>
 
 <script type="text/javascript">
-	import Drawer from './partials/drawer.vue';
-	import Sidebar from './partials/sidebar.vue';
-	import Placeholder from './partials/placeholders/DirectMessagePlaceholder.vue';
-	import Intersect from 'vue-intersect'
-	import Autocomplete from '@trevoreyre/autocomplete-vue'
-	import '@trevoreyre/autocomplete-vue/dist/style.css';
-
-	export default {
-		components: {
-			"drawer": Drawer,
-			"sidebar": Sidebar,
-			"intersect": Intersect,
-			"dm-placeholder": Placeholder,
-			"autocomplete": Autocomplete
-		},
-
-		data() {
-			return {
-				isLoaded: false,
-				profile: undefined,
-				canLoadMore: true,
-				threadsLoaded: false,
-				composeLoading: false,
-				threads: [],
-				tabIndex: 0,
-				tabs: [
-					'inbox',
-					'sent',
-					'requests'
-				],
-				page: 1,
-				ids: [],
-				isIntersecting: false
-			}
-		},
-
-		mounted() {
-			this.profile = window._sharedData.user;
-			this.isLoaded = true;
-			this.fetchThreads();
+    import Drawer from './partials/drawer.vue';
+    import Sidebar from './partials/sidebar.vue';
+    import Placeholder from './partials/placeholders/DirectMessagePlaceholder.vue';
+    import Intersect from 'vue-intersect'
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+    import '@trevoreyre/autocomplete-vue/dist/style.css';
+    import { parseLinkHeader } from '@web3-storage/parse-link-header';
+
+    export default {
+        components: {
+            "drawer": Drawer,
+            "sidebar": Sidebar,
+            "intersect": Intersect,
+            "dm-placeholder": Placeholder,
+            "autocomplete": Autocomplete
+        },
+
+        data() {
+            return {
+                isLoaded: false,
+                profile: undefined,
+                canLoadMore: true,
+                threadsLoaded: false,
+                composeLoading: false,
+                threads: [],
+                tabIndex: 0,
+                tabs: [
+                    'inbox',
+                    'sent',
+                    'requests'
+                ],
+                nextUrl: false,
+                ids: [],
+                isIntersecting: false
+            }
+        },
+
+        mounted() {
+            this.profile = window._sharedData.user;
+            this.isLoaded = true;
+            this.fetchThreads();
         },
 
         methods: {
-        	fetchThreads() {
-        		axios.get('/api/v1/conversations', {
-        			params: {
-        				scope: this.tabs[this.tabIndex]
-        			}
-        		})
-        		.then(res => {
-        			let data = res.data.filter(m => {
-        				return m && m.hasOwnProperty('last_status') && m.last_status;
-        			})
-        			let ids = data.map(dm => dm.accounts[0].id);
-        			this.ids = ids;
-        			this.threads = data;
-        			this.threadsLoaded = true;
-        			this.page++;
-        		});
-        	},
-
-        	timeago(ts) {
-        		return App.util.format.timeAgo(ts);
-        	},
-
-        	enterIntersect() {
-        		if(this.isIntersecting) {
-        			return;
-        		}
-
-        		this.isIntersecting = true;
-
-        		axios.get('/api/v1/conversations', {
-        			params: {
-        				scope: this.tabs[this.tabIndex],
-        				page: this.page
-        			}
-        		})
-        		.then(res => {
-        			let data = res.data.filter(m => {
-        				return m && m.hasOwnProperty('last_status') && m.last_status;
-        			})
-        			data.forEach(dm => {
-        				if(this.ids.indexOf(dm.accounts[0].id) == -1) {
-        					this.ids.push(dm.accounts[0].id);
-        					this.threads.push(dm);
-        				}
-        			})
-        			// this.threads.push(...res.data);
-        			if(!res.data.length || res.data.length < 5) {
-        				this.canLoadMore = false;
-        				this.isIntersecting = false;
-        				return;
-        			}
-        			this.page++;
-        			this.isIntersecting = false;
-        		});
-        	},
-
-        	toggleTab(index) {
-        		event.currentTarget.blur();
-        		this.threadsLoaded = false;
-        		this.page = 1;
-        		this.tabIndex = index;
-        		this.fetchThreads();
-        	},
-
-        	threadSummary(status, len = 50) {
-        		if(status.pf_type == 'photo') {
-        			let sender = this.profile.id == status.account.id;
-        			let icon = '<div class="' + (sender ? 'text-muted' : 'text-primary') + ' border px-2 py-1 mt-1 rounded" style="font-size:11px;width: fit-content"><i class="far fa-image mr-1"></i> <span>';
-        			icon += sender ? 'Sent a photo' : 'Received a photo';
-        			return icon + '</span></div>';
-        		}
-
-        		if(status.pf_type == 'video') {
-        			let sender = this.profile.id == status.account.id;
-        			let icon = '<div class="' + (sender ? 'text-muted' : 'text-primary') + ' border px-2 py-1 mt-1 rounded" style="font-size:11px;width: fit-content"><i class="far fa-video mr-1"></i> <span>';
-        			icon += sender ? 'Sent a video' : 'Received a video';
-        			return icon + '</span></div>';
-        		}
-
-        		let res = '';
-
-        		if(this.profile.id == status.account.id) {
-        			res += '<i class="far fa-reply-all fa-flip-both"></i> ';
-        		}
-
-        		let content = status.content;
-        		let text = content.replace(/(<([^>]+)>)/gi, "");
-
-        		if(text.length > len) {
-        			return res + text.slice(0, len) + '...';
-        		}
-
-        		return res + text;
-        	},
-
-        	openCompose() {
-        		this.$refs.compose.show();
-        	},
-
-        	composeSearch(input) {
-				if (input.length < 1) { return []; };
-				let self = this;
-				let results = [];
-				return axios.post('/api/direct/lookup', {
-					q: input
-				}).then(res => {
-					return res.data;
-				});
-			},
-
-			getTagResultValue(result) {
-				// return '@' + result.name;
-				return result.local ? '@' + result.name : result.name;
-			},
-
-			onTagSubmitLocation(result) {
-				//this.$refs.autocomplete.value = '';
-				this.composeLoading = true;
-				window.location.href = '/i/web/direct/thread/' + result.id;
-				return;
-			},
-
-			closeCompose() {
-				this.$refs.compose.hide();
-			}
+            fetchThreads() {
+                axios.get('/api/v1/conversations', {
+                    params: {
+                        scope: this.tabs[this.tabIndex]
+                    }
+                })
+                .then(res => {
+                    let data = res.data.filter(m => {
+                        return m && m.hasOwnProperty('last_status') && m.last_status;
+                    })
+                    if(res.headers && res.headers.link) {
+                        const links = parseLinkHeader(res.headers.link);
+                        if(links.next && links.next.url) {
+                            this.nextUrl = links.next.url
+                        } else {
+                            this.nextUrl = false;
+                        }
+                    }
+                    let ids = data.map(dm => dm.accounts[0].id);
+                    this.ids = ids;
+                    this.threads = data;
+                    this.threadsLoaded = true;
+                });
+            },
+
+            timeago(ts) {
+                return App.util.format.timeAgo(ts);
+            },
+
+            enterIntersect() {
+                if(this.isIntersecting || !this.nextUrl) {
+                    return;
+                }
+
+                this.isIntersecting = true;
+
+                axios.get(this.nextUrl)
+                .then(res => {
+                    if(res.headers && res.headers.link) {
+                        const links = parseLinkHeader(res.headers.link);
+                        if(links.next && links.next.url) {
+                            this.nextUrl = links.next.url
+                        } else {
+                            this.nextUrl = false;
+                        }
+                    }
+                    let data = res.data.filter(m => {
+                        return m && m.hasOwnProperty('last_status') && m.last_status;
+                    })
+                    data.forEach(dm => {
+                        if(this.ids.indexOf(dm.accounts[0].id) == -1) {
+                            this.ids.push(dm.accounts[0].id);
+                            this.threads.push(dm);
+                        }
+                    })
+                    // this.threads.push(...res.data);
+                    if(!res.data.length || res.data.length < 5) {
+                        this.canLoadMore = false;
+                        this.isIntersecting = false;
+                        return;
+                    }
+                    this.isIntersecting = false;
+                });
+            },
+
+            toggleTab(index) {
+                event.currentTarget.blur();
+                this.threadsLoaded = false;
+                this.nextUrl = false;
+                this.tabIndex = index;
+                this.fetchThreads();
+            },
+
+            threadSummary(status, len = 50) {
+                if(status.pf_type == 'photo') {
+                    let sender = this.profile.id == status.account.id;
+                    let icon = '<div class="' + (sender ? 'text-muted' : 'text-primary') + ' border px-2 py-1 mt-1 rounded" style="font-size:11px;width: fit-content"><i class="far fa-image mr-1"></i> <span>';
+                    icon += sender ? 'Sent a photo' : 'Received a photo';
+                    return icon + '</span></div>';
+                }
+
+                if(status.pf_type == 'video') {
+                    let sender = this.profile.id == status.account.id;
+                    let icon = '<div class="' + (sender ? 'text-muted' : 'text-primary') + ' border px-2 py-1 mt-1 rounded" style="font-size:11px;width: fit-content"><i class="far fa-video mr-1"></i> <span>';
+                    icon += sender ? 'Sent a video' : 'Received a video';
+                    return icon + '</span></div>';
+                }
+
+                let res = '';
+
+                if(this.profile.id == status.account.id) {
+                    res += '<i class="far fa-reply-all fa-flip-both"></i> ';
+                }
+
+                let content = status.content;
+                let text = content.replace(/(<([^>]+)>)/gi, "");
+
+                if(text.length > len) {
+                    return res + text.slice(0, len) + '...';
+                }
+
+                return res + text;
+            },
+
+            openCompose() {
+                this.$refs.compose.show();
+            },
+
+            composeSearch(input) {
+                if (input.length < 1) { return []; };
+                let self = this;
+                let results = [];
+                return axios.post('/api/direct/lookup', {
+                    q: input
+                }).then(res => {
+                    return res.data;
+                });
+            },
+
+            getTagResultValue(result) {
+                // return '@' + result.name;
+                return result.local ? '@' + result.name : result.name;
+            },
+
+            onTagSubmitLocation(result) {
+                //this.$refs.autocomplete.value = '';
+                this.composeLoading = true;
+                window.location.href = '/i/web/direct/thread/' + result.id;
+                return;
+            },
+
+            closeCompose() {
+                this.$refs.compose.hide();
+            }
         }
-	}
+    }
 </script>
 
 <style lang="scss" scoped>
-	.dms-page-component {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-
-		.dm {
-			&-thread-summary {
-				margin-bottom: 0;
-				font-size: 12px;
-				line-height: 12px;
-			}
-
-			&-display-name {
-				font-size: 16px;
-			}
-		}
-	}
+    .dms-page-component {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+        .dm {
+            &-thread-summary {
+                margin-bottom: 0;
+                font-size: 12px;
+                line-height: 12px;
+            }
+
+            &-display-name {
+                font-size: 16px;
+            }
+        }
+    }
 
 </style>