diff --git a/resources/assets/scripts/components/Flash.vue b/resources/assets/scripts/components/Flash.vue
index 5a776c19b..860d94749 100644
--- a/resources/assets/scripts/components/Flash.vue
+++ b/resources/assets/scripts/components/Flash.vue
@@ -12,8 +12,9 @@
     </div>
 </template>
 
-<script>
-    import MessageBox from './MessageBox';
+<script lang="ts">
+    import MessageBox from './MessageBox.vue';
+
     export default {
         name: 'flash',
         components: {MessageBox},
diff --git a/resources/assets/scripts/components/MessageBox.vue b/resources/assets/scripts/components/MessageBox.vue
index b552f7747..7e8159558 100644
--- a/resources/assets/scripts/components/MessageBox.vue
+++ b/resources/assets/scripts/components/MessageBox.vue
@@ -5,7 +5,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'message-box',
         props: {
diff --git a/resources/assets/scripts/components/auth/ForgotPassword.vue b/resources/assets/scripts/components/auth/ForgotPassword.vue
index 6f40f2df8..8259e1fca 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.vue
+++ b/resources/assets/scripts/components/auth/ForgotPassword.vue
@@ -36,7 +36,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'forgot-password',
         props: {
diff --git a/resources/assets/scripts/components/auth/Login.vue b/resources/assets/scripts/components/auth/Login.vue
index 7a8406f96..a3bea6c8f 100644
--- a/resources/assets/scripts/components/auth/Login.vue
+++ b/resources/assets/scripts/components/auth/Login.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script lang="ts">
+    import Flash from '../Flash.vue';
+    import ForgotPassword from "./ForgotPassword.vue";
+    import LoginForm from "./LoginForm.vue";
+    import TwoFactorForm from "./TwoFactorForm.vue";
     import Vue from 'vue';
-    import Flash from '../Flash';
-    import ForgotPassword from "./ForgotPassword";
-    import LoginForm from "./LoginForm";
-    import TwoFactorForm from "./TwoFactorForm";
 
     export default Vue.extend({
         name: 'login',
diff --git a/resources/assets/scripts/components/auth/LoginForm.vue b/resources/assets/scripts/components/auth/LoginForm.vue
index 318825675..84770b379 100644
--- a/resources/assets/scripts/components/auth/LoginForm.vue
+++ b/resources/assets/scripts/components/auth/LoginForm.vue
@@ -45,7 +45,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'login-form',
         props: {
diff --git a/resources/assets/scripts/components/auth/ResetPassword.vue b/resources/assets/scripts/components/auth/ResetPassword.vue
index 451b78ac8..1e84e2738 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.vue
+++ b/resources/assets/scripts/components/auth/ResetPassword.vue
@@ -55,7 +55,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "ResetPassword",
         props: {
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.vue b/resources/assets/scripts/components/auth/TwoFactorForm.vue
index 8c800af2d..6301cded9 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.vue
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.vue
@@ -28,7 +28,7 @@
     </form>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "two-factor-form",
         data: function () {
diff --git a/resources/assets/scripts/components/core/Modal.vue b/resources/assets/scripts/components/core/Modal.vue
index 3f7db17f6..4cbef2c24 100644
--- a/resources/assets/scripts/components/core/Modal.vue
+++ b/resources/assets/scripts/components/core/Modal.vue
@@ -11,7 +11,7 @@
     </transition>
 </template>
 
-<script>
+<script lang="ts">
     import { XIcon } from 'vue-feather-icons';
     export default {
         name: 'modal',
diff --git a/resources/assets/scripts/components/core/Navigation.vue b/resources/assets/scripts/components/core/Navigation.vue
index 92b485b27..f9bf82415 100644
--- a/resources/assets/scripts/components/core/Navigation.vue
+++ b/resources/assets/scripts/components/core/Navigation.vue
@@ -67,7 +67,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import debounce from 'lodash/debounce';
     import { mapState } from 'vuex';
     import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index f23f5dc8c..92bd7fa8c 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -25,7 +25,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import Navigation from '../core/Navigation';
     import Flash from '../Flash';
     import UpdateEmail from './account/UpdateEmail';
diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index ae436826d..6614ada5f 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -27,7 +27,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import debounce from 'lodash/debounce';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index 90a816f04..917d28573 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -35,7 +35,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import get from 'lodash/get';
     import differenceInSeconds from 'date-fns/difference_in_seconds';
 
diff --git a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
index 494c76be2..f1b631c35 100644
--- a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
+++ b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
@@ -38,7 +38,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import isObject from 'lodash/isObject';
 
     export default {
diff --git a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
index 387f275e8..f52054185 100644
--- a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
+++ b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
@@ -62,7 +62,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import Vue from 'vue';
     import isObject from 'lodash/isObject';
 
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
index a228480a1..42e1a811c 100644
--- a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
@@ -26,7 +26,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { isObject, get } from 'lodash';
     import { mapState, mapActions } from 'vuex';
 
diff --git a/resources/assets/scripts/components/forms/CSRF.vue b/resources/assets/scripts/components/forms/CSRF.vue
index b421a91da..5e6eccb96 100644
--- a/resources/assets/scripts/components/forms/CSRF.vue
+++ b/resources/assets/scripts/components/forms/CSRF.vue
@@ -2,7 +2,7 @@
     <input type="hidden" name="_token" v-bind:value="X_CSRF_TOKEN" />
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'csrf',
         data: function () {
diff --git a/resources/assets/scripts/components/server/Server.vue b/resources/assets/scripts/components/server/Server.vue
index 1bde1194f..4b73b31d3 100644
--- a/resources/assets/scripts/components/server/Server.vue
+++ b/resources/assets/scripts/components/server/Server.vue
@@ -63,7 +63,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
diff --git a/resources/assets/scripts/components/server/ServerAllocations.vue b/resources/assets/scripts/components/server/ServerAllocations.vue
index 87fca2233..ecd5295f7 100644
--- a/resources/assets/scripts/components/server/ServerAllocations.vue
+++ b/resources/assets/scripts/components/server/ServerAllocations.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "ServerAllocations"
     }
diff --git a/resources/assets/scripts/components/server/ServerSchedules.vue b/resources/assets/scripts/components/server/ServerSchedules.vue
index 358962e40..c5a04d509 100644
--- a/resources/assets/scripts/components/server/ServerSchedules.vue
+++ b/resources/assets/scripts/components/server/ServerSchedules.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "ServerSchedules"
     }
diff --git a/resources/assets/scripts/components/server/ServerSettings.vue b/resources/assets/scripts/components/server/ServerSettings.vue
index 41dcdc539..8b9e177c9 100644
--- a/resources/assets/scripts/components/server/ServerSettings.vue
+++ b/resources/assets/scripts/components/server/ServerSettings.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "ServerSettings"
     }
diff --git a/resources/assets/scripts/components/server/ServerSubusers.vue b/resources/assets/scripts/components/server/ServerSubusers.vue
index 969ba0a07..d40a107da 100644
--- a/resources/assets/scripts/components/server/ServerSubusers.vue
+++ b/resources/assets/scripts/components/server/ServerSubusers.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: "ServerSubusers"
     }
diff --git a/resources/assets/scripts/components/server/components/PowerButtons.vue b/resources/assets/scripts/components/server/components/PowerButtons.vue
index 990b179a0..37c88f45a 100644
--- a/resources/assets/scripts/components/server/components/PowerButtons.vue
+++ b/resources/assets/scripts/components/server/components/PowerButtons.vue
@@ -22,7 +22,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import Status from '../../../helpers/statuses';
     import { Socketio } from '../../../mixins/socketio/index';
     import { mapState } from 'vuex';
diff --git a/resources/assets/scripts/components/server/components/ProgressBar.vue b/resources/assets/scripts/components/server/components/ProgressBar.vue
index e4a123c55..3fbe8c450 100644
--- a/resources/assets/scripts/components/server/components/ProgressBar.vue
+++ b/resources/assets/scripts/components/server/components/ProgressBar.vue
@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'progress-bar',
         props: {
diff --git a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
index 35cff9478..6a67704c1 100644
--- a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
@@ -35,7 +35,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import MessageBox from '../../../MessageBox';
     import get from 'lodash/get';
 
diff --git a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
index 159ac7561..0db55b9b6 100644
--- a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
+++ b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
@@ -41,7 +41,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { LockIcon, Trash2Icon, DatabaseIcon } from 'vue-feather-icons';
     import Modal from '../../../core/Modal';
     import DeleteDatabaseModal from './DeleteDatabaseModal';
diff --git a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
index aed842d82..f2c495bb8 100644
--- a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
@@ -18,7 +18,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
         name: 'delete-database-modal',
         props: {
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
index 74e768103..b3cd59217 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
@@ -51,7 +51,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
 
     export default {
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
index 7aef9b80b..9a8caf586 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import * as Helpers from '../../../../helpers/index';
     import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
     import FileManagerContextMenu from './FileManagerContextMenu';
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
index cf7b47197..6b6e59a78 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { FolderIcon } from 'vue-feather-icons';
     import { formatDate } from '../../../../helpers/index';
 
diff --git a/resources/assets/scripts/components/server/index.js b/resources/assets/scripts/components/server/index.js
deleted file mode 100644
index ac1f6705a..000000000
--- a/resources/assets/scripts/components/server/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export {default as Server} from './Server';
-export {default as ServerAllocations} from './ServerAllocations';
-export {default as ConsolePage} from './subpages/Console';
-export {default as DatabasesPage} from './subpages/Databases';
-export {default as FileManagerPage} from './subpages/FileManager';
-export {default as ServerSchedules} from './ServerSchedules';
-export {default as ServerSettings} from './ServerSettings';
-export {default as ServerSubusers} from './ServerSubusers';
diff --git a/resources/assets/scripts/components/server/index.ts b/resources/assets/scripts/components/server/index.ts
new file mode 100644
index 000000000..2c9ba9bf7
--- /dev/null
+++ b/resources/assets/scripts/components/server/index.ts
@@ -0,0 +1,8 @@
+export {default as Server} from './Server.vue';
+export {default as ServerAllocations} from './ServerAllocations.vue';
+export {default as ConsolePage} from './subpages/Console.vue';
+export {default as DatabasesPage} from './subpages/Databases.vue';
+export {default as FileManagerPage} from './subpages/FileManager.vue';
+export {default as ServerSchedules} from './ServerSchedules.vue';
+export {default as ServerSettings} from './ServerSettings.vue';
+export {default as ServerSubusers} from './ServerSubusers.vue';
diff --git a/resources/assets/scripts/components/server/subpages/Console.vue b/resources/assets/scripts/components/server/subpages/Console.vue
index 284ea0e9a..53d75d58b 100644
--- a/resources/assets/scripts/components/server/subpages/Console.vue
+++ b/resources/assets/scripts/components/server/subpages/Console.vue
@@ -24,7 +24,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { Terminal } from 'xterm';
     import * as TerminalFit from 'xterm/lib/addons/fit/fit';
     import {mapState} from 'vuex';
diff --git a/resources/assets/scripts/components/server/subpages/Databases.vue b/resources/assets/scripts/components/server/subpages/Databases.vue
index 1425c77c0..c4024aab7 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.vue
+++ b/resources/assets/scripts/components/server/subpages/Databases.vue
@@ -29,7 +29,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
     import map from 'lodash/map';
     import filter from 'lodash/filter';
diff --git a/resources/assets/scripts/components/server/subpages/FileManager.vue b/resources/assets/scripts/components/server/subpages/FileManager.vue
index be7618829..2684702ed 100644
--- a/resources/assets/scripts/components/server/subpages/FileManager.vue
+++ b/resources/assets/scripts/components/server/subpages/FileManager.vue
@@ -41,7 +41,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import map from 'lodash/map';
 import { mapState } from 'vuex';
 import FileManagerFileRow from '../components/filemanager/FileManagerFileRow';
diff --git a/resources/assets/scripts/router.ts b/resources/assets/scripts/router.ts
index ad1278659..1ed1bf63d 100644
--- a/resources/assets/scripts/router.ts
+++ b/resources/assets/scripts/router.ts
@@ -5,9 +5,9 @@ const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 // Base Vuejs Templates
 import Login from './components/auth/Login.vue';
-import Dashboard from './components/dashboard/Dashboard';
-import Account from './components/dashboard/Account';
-import ResetPassword from './components/auth/ResetPassword';
+import Dashboard from './components/dashboard/Dashboard.vue';
+import Account from './components/dashboard/Account.vue';
+import ResetPassword from './components/auth/ResetPassword.vue';
 import User from './models/user';
 import {
     Server,