diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..8d26b9a
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"src/*"
+			]
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/components/ChangeLog.vue b/src/components/ChangeLog.vue
index 58170cc..c971bfe 100644
--- a/src/components/ChangeLog.vue
+++ b/src/components/ChangeLog.vue
@@ -44,7 +44,7 @@
 
 <script>
 import {bus} from './../main.js'
-import changelog from '@/changelog.js'
+import changelog from '@/utils/changelog.js'
 export default {
   data() {
     return {
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index e8296af..2065af5 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -34,9 +34,9 @@
 
 <script>
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import messageFormatter from "@/messageFormatter.js";
+import messageFormatter from "@/utils/messageFormatter.js";
 import config from "@/config.js";
-import friendlyDate from "@/date";
+import friendlyDate from "@/utils/date";
 import path from "path";
 
 
diff --git a/src/components/app/News.vue b/src/components/app/News.vue
index 9f078f3..caf6e8b 100644
--- a/src/components/app/News.vue
+++ b/src/components/app/News.vue
@@ -53,7 +53,7 @@
 <script>
 import Spinner from '@/components/Spinner.vue'
 import ChangeLog from '@/components/ChangeLog.vue'
-import changelog from '@/changelog.js'
+import changelog from '@/utils/changelog.js'
 export default {
   components: {},
   data() {
diff --git a/src/components/app/RightPanel.vue b/src/components/app/RightPanel.vue
index f18e696..9d6f537 100644
--- a/src/components/app/RightPanel.vue
+++ b/src/components/app/RightPanel.vue
@@ -80,7 +80,7 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import TypingStatus from "@/components/app/TypingStatus.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
-import emojiParser from "@/emojiParser.js";
+import emojiParser from "@/utils/emojiParser.js";
 
 export default {
   components: {
@@ -97,7 +97,8 @@ export default {
       postTimerID: null,
       getTimerID: null,
       typing: false,
-      whosTyping: ""
+      whosTyping: "",
+      showEmojiSuggestions: false
     };
   },
   methods: {
@@ -188,6 +189,14 @@ export default {
     delayedResize(event) {
       this.resize(event);
     },
+    showEmojiPopout(shortcode) {
+      if (shortcode.length < 3) return this.showEmojiSuggestions = false;
+      const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1))
+      if (searchArr.length <=0) return this.showEmojiSuggestions = false;
+      return this.showEmojiSuggestions = true;
+      console.log(searchArr)
+      
+    },
     async onInput(event) {
       this.delayedResize(event);
       this.messageLength = this.message.length;
@@ -196,6 +205,9 @@ export default {
         this.postTimer();
         await typingService.post(this.selectedChannelID);
       }
+
+      const shortCode = this.message.split(" ").pop()
+      if (shortCode && shortCode.startsWith(":")) this.showEmojiPopout(shortCode);
     },
     chatInput(event) {
       this.delayedResize(event);
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 9b0e946..60d5840 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -19,7 +19,7 @@
 import channelService from '@/services/channelService';
 import messagesService from '@/services/messagesService';
 import config from '@/config.js'
-import statuses from '@/statuses';
+import statuses from '@/utils/statuses';
 import {bus} from '@/main'
 
 export default {
diff --git a/src/components/app/uploadDialog.vue b/src/components/app/uploadDialog.vue
index 9d9acb8..8896b7a 100644
--- a/src/components/app/uploadDialog.vue
+++ b/src/components/app/uploadDialog.vue
@@ -37,7 +37,7 @@
 
 <script>
 import filesize from "filesize";
-import emojiParser from "@/emojiParser.js";
+import emojiParser from "@/utils/emojiParser.js";
 import messagesService from "@/services/messagesService";
 import { bus } from "../../main";
 export default {
diff --git a/src/main.js b/src/main.js
index d73cd70..52ab3b2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import {router} from './router'
 import Main from '../src/Main.vue'
 import {store} from './store/index';
 import Axios from 'axios';
-import './clickOutside';
+import './utils/clickOutside';
 import vueHeadful from 'vue-headful';
 Vue.component('vue-headful', vueHeadful);
 
diff --git a/src/services/Api.js b/src/services/Api.js
index ba400a2..067fb50 100644
--- a/src/services/Api.js
+++ b/src/services/Api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import config from '@/config';
+import config from '../config';
 
 export const instance = () => {
   return axios.create({
diff --git a/src/store/modules/notificationsModule.js b/src/store/modules/notificationsModule.js
index 112a3ec..eee4aec 100644
--- a/src/store/modules/notificationsModule.js
+++ b/src/store/modules/notificationsModule.js
@@ -1,7 +1,7 @@
 import {bus} from '../../main'
 import {router} from './../../router'
 import Vue from 'vue';
-import NotificationSounds from '@/notificationSound';
+import NotificationSounds from '@/utils/notificationSound';
 
 const state = {
   notifications: []
diff --git a/src/store/modules/popoutsModule.js b/src/store/modules/popoutsModule.js
index 1127a34..10bdbd6 100644
--- a/src/store/modules/popoutsModule.js
+++ b/src/store/modules/popoutsModule.js
@@ -4,7 +4,7 @@ import {
   bus
 } from '../../main'
 import VueRouter from 'vue-router';
-import NotificationSounds from '@/notificationSound';
+import NotificationSounds from '@/utils/notificationSound';
 
 const state = {
   fileToUpload: null,
diff --git a/src/store/modules/userModule.js b/src/store/modules/userModule.js
index 70631f4..bde6331 100644
--- a/src/store/modules/userModule.js
+++ b/src/store/modules/userModule.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 import Vue from 'vue'
 import {bus} from '../../main'
 import VueRouter from 'vue-router';
-import NotificationSounds from '@/notificationSound';
+import NotificationSounds from '@/utils/notificationSound';
 
 const state = {
   token: localStorage.getItem('hauthid') || null,
diff --git a/src/changelog.js b/src/utils/changelog.js
similarity index 100%
rename from src/changelog.js
rename to src/utils/changelog.js
diff --git a/src/clickOutside.js b/src/utils/clickOutside.js
similarity index 100%
rename from src/clickOutside.js
rename to src/utils/clickOutside.js
diff --git a/src/date.js b/src/utils/date.js
similarity index 100%
rename from src/date.js
rename to src/utils/date.js
diff --git a/src/emojiParser.js b/src/utils/emojiParser.js
similarity index 95%
rename from src/emojiParser.js
rename to src/utils/emojiParser.js
index 53a6e82..6e5ecf2 100644
--- a/src/emojiParser.js
+++ b/src/utils/emojiParser.js
@@ -22,6 +22,7 @@ export default {
 			for (let i = 0; i < element.shortcodes.length; i++) {
 				const el2 = element.shortcodes[i];
 				if (el2.includes(shortCode)) array.push(element);
+				if (array.length >= 10) return array;
 			}
 		}
 		return array;
diff --git a/src/messageFormatter.js b/src/utils/messageFormatter.js
similarity index 100%
rename from src/messageFormatter.js
rename to src/utils/messageFormatter.js
diff --git a/src/notificationSound.js b/src/utils/notificationSound.js
similarity index 100%
rename from src/notificationSound.js
rename to src/utils/notificationSound.js
diff --git a/src/statuses.js b/src/utils/statuses.js
similarity index 100%
rename from src/statuses.js
rename to src/utils/statuses.js
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 659f759..9710726 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -40,7 +40,7 @@
 import {bus} from '../main';
 import RightPanel from "./../components/homePage/RightPanel.vue"
 import ChangeLog from "./../components/ChangeLog.vue"
-import changelog from '@/changelog.js'
+import changelog from '@/utils/changelog.js'
 export default {
   components: {
     RightPanel,