diff --git a/resources/assets/js/components/Direct.vue b/resources/assets/js/components/Direct.vue
index f56f395bd..d7cdf7148 100644
--- a/resources/assets/js/components/Direct.vue
+++ b/resources/assets/js/components/Direct.vue
@@ -156,7 +156,6 @@
 								<input v-model="composeUsername" type="text" class="form-control" placeholder="dansup">
 							</div> -->
 							<autocomplete 
-							v-show="true"
 							:search="composeSearch"
 							placeholder="@dansup"
 							aria-label="Search usernames"
@@ -186,7 +185,12 @@
 </style>
 
 <script type="text/javascript">
+import Autocomplete from '@trevoreyre/autocomplete-vue'
+import '@trevoreyre/autocomplete-vue/dist/style.css'
 export default {
+	components: { 
+		Autocomplete 
+	},
 	data() {
 		return {
 			config: window.App.config,
@@ -223,7 +227,7 @@ export default {
 	mounted() {
 		this.fetchProfile();
 		let self = this;
-		axios.get('/api/pixelfed/v1/direct/browse', {
+		axios.get('/api/direct/browse', {
 			params: {
 				a: 'inbox'
 			}
@@ -298,7 +302,7 @@ export default {
 				break;
 				case 'sent':
 				if(this.messages.sent.length == 0) {
-					axios.get('/api/pixelfed/v1/direct/browse', {
+					axios.get('/api/direct/browse', {
 						params: {
 							a: 'sent'
 						}
@@ -312,7 +316,7 @@ export default {
 				break;
 				case 'filtered':
 					if(this.messages.filtered.length == 0) {
-						axios.get('/api/pixelfed/v1/direct/browse', {
+						axios.get('/api/direct/browse', {
 							params: {
 								a: 'filtered'
 							}
@@ -344,7 +348,7 @@ export default {
 		getTagResultValue(result) {
 			return '@' + result.name;
 		},
-		
+
 		onTagSubmitLocation(result) {
 			//this.$refs.autocomplete.value = '';
 			window.location.href = '/account/direct/t/' + result.id;
@@ -354,7 +358,7 @@ export default {
 		messagePagination(tab, dir) {
 			if(tab == 'inbox') {
 				this.inboxPage = dir == 'prev' ? this.inboxPage - 1 : this.inboxPage + 1;
-				axios.get('/api/pixelfed/v1/direct/browse', {
+				axios.get('/api/direct/browse', {
 					params: {
 						a: 'inbox',
 						page: this.inboxPage
@@ -368,7 +372,7 @@ export default {
 			}
 			if(tab == 'sent') {
 				this.sentPage = dir == 'prev' ? this.sentPage - 1 : this.sentPage + 1;
-				axios.get('/api/pixelfed/v1/direct/browse', {
+				axios.get('/api/direct/browse', {
 					params: {
 						a: 'sent',
 						page: this.sentPage
@@ -382,7 +386,7 @@ export default {
 			}
 			if(tab == 'filtered') {
 				this.filteredPage = dir == 'prev' ? this.filteredPage - 1 : this.filteredPage + 1;
-				axios.get('/api/pixelfed/v1/direct/browse', {
+				axios.get('/api/direct/browse', {
 					params: {
 						a: 'filtered',
 						page: this.filteredPage
diff --git a/resources/assets/js/components/DirectMessage.vue b/resources/assets/js/components/DirectMessage.vue
index 23826b561..5df3891eb 100644
--- a/resources/assets/js/components/DirectMessage.vue
+++ b/resources/assets/js/components/DirectMessage.vue
@@ -355,7 +355,7 @@
 		mounted() {
 			this.fetchProfile();
 			let self = this;
-			axios.get('/api/pixelfed/v1/direct/thread', {
+			axios.get('/api/direct/thread', {
 				params: {
 					pid: self.accountId
 				}
@@ -383,13 +383,13 @@
 		watch: {
 			mutedNotifications: function(v) {
 				if(v) {
-					axios.post('/api/pixelfed/v1/direct/mute', {
+					axios.post('/api/direct/mute', {
 						id: this.accountId
 					}).then(res => {
 
 					});
 				} else {
-					axios.post('/api/pixelfed/v1/direct/unmute', {
+					axios.post('/api/direct/unmute', {
 						id: this.accountId
 					}).then(res => {
 
@@ -414,7 +414,7 @@
 			sendMessage() {
 				let self = this;
 				let rt = this.replyText;
-				axios.post('/api/pixelfed/v1/direct/create', {
+				axios.post('/api/direct/create', {
 					'to_id': this.threads[this.threadIndex].id,
 					'message': rt,
 					'type': self.isEmoji(rt) && rt.length < 10 ? 'emoji' : 'text'
@@ -594,7 +594,7 @@
 				let self = this;
 				this.loadingMessages = true;
 
-				axios.get('/api/pixelfed/v1/direct/thread', {
+				axios.get('/api/direct/thread', {
 					params: {
 						pid: this.accountId,
 						max_id: this.min_id,
@@ -630,7 +630,7 @@
 			messagePoll() {
 				let self = this;
 				setInterval(function() {
-					axios.get('/api/pixelfed/v1/direct/thread', {
+					axios.get('/api/direct/thread', {
 						params: {
 							pid: self.accountId,
 							min_id: self.thread.messages[self.thread.messages.length - 1].id
diff --git a/routes/web.php b/routes/web.php
index 436d058fe..494116b3d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -97,6 +97,18 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
         Route::get('search', 'SearchController@searchAPI');
         Route::get('nodeinfo/2.0.json', 'FederationController@nodeinfo');
 
+        Route::group(['prefix' => 'direct'], function () {
+            Route::get('browse', 'DirectMessageController@browse');
+            Route::post('create', 'DirectMessageController@create');
+            Route::get('thread', 'DirectMessageController@thread');
+            Route::post('mute', 'DirectMessageController@mute');
+            Route::post('unmute', 'DirectMessageController@unmute');
+            Route::delete('message', 'DirectMessageController@delete');
+            Route::post('media', 'DirectMessageController@mediaUpload');
+            Route::post('lookup', 'DirectMessageController@composeLookup');
+            Route::post('read', 'DirectMessageController@read');
+        });
+
         Route::group(['prefix' => 'v2'], function() {
             Route::get('config', 'ApiController@siteConfiguration');
             Route::get('discover', 'InternalApiController@discover');
@@ -287,6 +299,8 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
 
     Route::group(['prefix' => 'account'], function () {
         Route::redirect('/', '/');
+        Route::get('direct', 'AccountController@direct');
+        Route::get('direct/t/{id}', 'AccountController@directMessage');
         Route::get('activity', 'AccountController@notifications')->name('notifications');
         Route::get('follow-requests', 'AccountController@followRequests')->name('follow-requests');
         Route::post('follow-requests', 'AccountController@followRequestHandle');