diff --git a/package.json b/package.json
index c6eca48e..64fd49f1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@kyvg/vue3-notification": "2.3.4",
     "@sentry/tracing": "6.16.1",
     "@sentry/vue": "6.16.1",
+    "@types/is-touch-device": "^1.0.0",
     "@vue/compat": "3.2.26",
     "@vueuse/core": "7.5.2",
     "@vueuse/router": "7.5.3",
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 1ae53c15..97648a09 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="[background ? 'has-background' : '', $route.name+'-view']"
+		:class="[background ? 'has-background' : '', $route.name as string +'-view']"
 		:style="{'background-image': `url(${background})`}"
 		class="link-share-container"
 	>
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index f2ccfb71..d2dce836 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -33,7 +33,9 @@ import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
 
-const background = ref(null)
+import {colorIsDark} from '@/helpers/color/colorIsDark'
+
+const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
 
 const props = defineProps({
diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index adc69fd7..37891956 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -13,7 +13,7 @@
 			<section class="content">
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
-					<api-config @foundApi="hasApiUrl = true"/>
+					<api-config/>
 					<slot/>
 				</div>
 				<legal/>
@@ -23,9 +23,9 @@
 </template>
 
 <script lang="ts" setup>
-import Logo from '@/components/home/Logo'
-import Message from '@/components/misc/message'
-import Legal from '@/components/misc/legal'
+import Logo from '@/components/home/Logo.vue'
+import Message from '@/components/misc/message.vue'
+import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
 import {useStore} from 'vuex'
 import {computed} from 'vue'
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 1ebdf180..e751ff91 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -183,6 +183,8 @@ import {mapState} from 'vuex'
 import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 
+import {colorIsDark} from '@/helpers/color/colorIsDark'
+
 export default {
 	name: 'GanttChart',
 	components: {
@@ -252,6 +254,7 @@ export default {
 		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {
+		colorIsDark,
 		buildTheGanttChart() {
 			this.setDates()
 			this.prepareGanttDays()
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 96e73a99..e1910643 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -73,6 +73,8 @@ import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
+import {colorIsDark} from '@/helpers/color/colorIsDark'
+
 export default {
 	name: 'kanban-card',
 	components: {
@@ -98,6 +100,7 @@ export default {
 		},
 	},
 	methods: {
+		colorIsDark,
 		async toggleTaskDone(task) {
 			this.loadingInternal = true
 			try {
diff --git a/src/main.ts b/src/main.ts
index 09823122..45108a74 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -76,7 +76,6 @@ app.component('card', Card)
 // Mixins
 import {getNamespaceTitle} from './helpers/getNamespaceTitle'
 import {getListTitle} from './helpers/getListTitle'
-import {colorIsDark} from './helpers/color/colorIsDark'
 import {setTitle} from './helpers/setTitle'
 
 app.mixin({
@@ -87,7 +86,6 @@ app.mixin({
 		formatDateShort: formatDateShort,
 		getNamespaceTitle,
 		getListTitle,
-		colorIsDark,
 		setTitle,
 	},
 })
diff --git a/src/router/index.ts b/src/router/index.ts
index 21e4a96a..7b28a509 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,73 +2,73 @@ import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 import {store} from '@/store'
 
-import HomeComponent from '../views/Home'
-import NotFoundComponent from '../views/404'
-import About from '../views/About'
+import HomeComponent from '../views/Home.vue'
+import NotFoundComponent from '../views/404.vue'
+import About from '../views/About.vue'
 // User Handling
-import LoginComponent from '../views/user/Login'
-import RegisterComponent from '../views/user/Register'
-import OpenIdAuth from '../views/user/OpenIdAuth'
-import DataExportDownload from '../views/user/DataExportDownload'
+import LoginComponent from '../views/user/Login.vue'
+import RegisterComponent from '../views/user/Register.vue'
+import OpenIdAuth from '../views/user/OpenIdAuth.vue'
+import DataExportDownload from '../views/user/DataExportDownload.vue'
 // Tasks
-import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
-import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
-import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
-import TaskDetailView from '../views/tasks/TaskDetailView'
-import ListNamespaces from '../views/namespaces/ListNamespaces'
+import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange.vue'
+import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth.vue'
+import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal.vue'
+import TaskDetailView from '../views/tasks/TaskDetailView.vue'
+import ListNamespaces from '../views/namespaces/ListNamespaces.vue'
 // Team Handling
-import ListTeamsComponent from '../views/teams/ListTeams'
+import ListTeamsComponent from '../views/teams/ListTeams.vue'
 // Label Handling
-import ListLabelsComponent from '../views/labels/ListLabels'
-import NewLabelComponent from '../views/labels/NewLabel'
+import ListLabelsComponent from '../views/labels/ListLabels.vue'
+import NewLabelComponent from '../views/labels/NewLabel.vue'
 // Migration
-import MigrationComponent from '../views/migrator/Migrate'
-import MigrateServiceComponent from '../views/migrator/MigrateService'
+import MigrationComponent from '../views/migrator/Migrate.vue'
+import MigrateServiceComponent from '../views/migrator/MigrateService.vue'
 // List Views
-import ShowListComponent from '../views/list/ShowList'
-import Kanban from '../views/list/views/Kanban'
-import List from '../views/list/views/List'
-import Gantt from '../views/list/views/Gantt'
-import Table from '../views/list/views/Table'
+import ShowListComponent from '../views/list/ShowList.vue'
+import Kanban from '../views/list/views/Kanban.vue'
+import List from '../views/list/views/List.vue'
+import Gantt from '../views/list/views/Gantt.vue'
+import Table from '../views/list/views/Table.vue'
 // List Settings
-import ListSettingEdit from '../views/list/settings/edit'
-import ListSettingBackground from '../views/list/settings/background'
-import ListSettingDuplicate from '../views/list/settings/duplicate'
-import ListSettingShare from '../views/list/settings/share'
-import ListSettingDelete from '../views/list/settings/delete'
-import ListSettingArchive from '../views/list/settings/archive'
+import ListSettingEdit from '../views/list/settings/edit.vue'
+import ListSettingBackground from '../views/list/settings/background.vue'
+import ListSettingDuplicate from '../views/list/settings/duplicate.vue'
+import ListSettingShare from '../views/list/settings/share.vue'
+import ListSettingDelete from '../views/list/settings/delete.vue'
+import ListSettingArchive from '../views/list/settings/archive.vue'
 
 // Namespace Settings
-import NamespaceSettingEdit from '../views/namespaces/settings/edit'
-import NamespaceSettingShare from '../views/namespaces/settings/share'
-import NamespaceSettingArchive from '../views/namespaces/settings/archive'
-import NamespaceSettingDelete from '../views/namespaces/settings/delete'
+import NamespaceSettingEdit from '../views/namespaces/settings/edit.vue'
+import NamespaceSettingShare from '../views/namespaces/settings/share.vue'
+import NamespaceSettingArchive from '../views/namespaces/settings/archive.vue'
+import NamespaceSettingDelete from '../views/namespaces/settings/delete.vue'
 
 // Saved Filters
-import FilterNew from '@/views/filters/FilterNew'
-import FilterEdit from '@/views/filters/FilterEdit'
-import FilterDelete from '@/views/filters/FilterDelete'
+import FilterNew from '@/views/filters/FilterNew.vue'
+import FilterEdit from '@/views/filters/FilterEdit.vue'
+import FilterDelete from '@/views/filters/FilterDelete.vue'
 
-const PasswordResetComponent = () => import('../views/user/PasswordReset')
-const GetPasswordResetComponent = () => import('../views/user/RequestPasswordReset')
-const UserSettingsComponent = () => import('../views/user/Settings')
-const UserSettingsAvatarComponent = () => import('../views/user/settings/Avatar')
-const UserSettingsCaldavComponent = () => import('../views/user/settings/Caldav')
-const UserSettingsDataExportComponent = () => import('../views/user/settings/DataExport')
-const UserSettingsDeletionComponent = () => import('../views/user/settings/Deletion')
-const UserSettingsEmailUpdateComponent = () => import('../views/user/settings/EmailUpdate')
-const UserSettingsGeneralComponent = () => import('../views/user/settings/General')
-const UserSettingsPasswordUpdateComponent = () => import('../views/user/settings/PasswordUpdate')
-const UserSettingsTOTPComponent = () => import('../views/user/settings/TOTP')
+const PasswordResetComponent = () => import('../views/user/PasswordReset.vue')
+const GetPasswordResetComponent = () => import('../views/user/RequestPasswordReset.vue')
+const UserSettingsComponent = () => import('../views/user/Settings.vue')
+const UserSettingsAvatarComponent = () => import('../views/user/settings/Avatar.vue')
+const UserSettingsCaldavComponent = () => import('../views/user/settings/Caldav.vue')
+const UserSettingsDataExportComponent = () => import('../views/user/settings/DataExport.vue')
+const UserSettingsDeletionComponent = () => import('../views/user/settings/Deletion.vue')
+const UserSettingsEmailUpdateComponent = () => import('../views/user/settings/EmailUpdate.vue')
+const UserSettingsGeneralComponent = () => import('../views/user/settings/General.vue')
+const UserSettingsPasswordUpdateComponent = () => import('../views/user/settings/PasswordUpdate.vue')
+const UserSettingsTOTPComponent = () => import('../views/user/settings/TOTP.vue')
 
 // List Handling
-const NewListComponent = () => import('../views/list/NewList')
+const NewListComponent = () => import('../views/list/NewList.vue')
 
 // Namespace Handling
-const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace')
+const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace.vue')
 
-const EditTeamComponent = () => import('../views/teams/EditTeam')
-const NewTeamComponent = () =>  import('../views/teams/NewTeam')
+const EditTeamComponent = () => import('../views/teams/EditTeam.vue')
+const NewTeamComponent = () =>  import('../views/teams/NewTeam.vue')
 
 const router = createRouter({
 	history: createWebHistory(),
diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts
index 8ccd616a..4f0571df 100644
--- a/src/types/shims-vue.d.ts
+++ b/src/types/shims-vue.d.ts
@@ -1,4 +1,6 @@
 declare module 'vue' {
+	import { CompatVue } from '@vue/runtime-dom'
+	const Vue: CompatVue
   export default Vue
   export * from '@vue/runtime-dom'
 }
diff --git a/src/views/migrator/migrators.ts b/src/views/migrator/migrators.ts
index 08e7ca8f..aac2d191 100644
--- a/src/views/migrator/migrators.ts
+++ b/src/views/migrator/migrators.ts
@@ -24,17 +24,17 @@ export const MIGRATORS: IMigratorRecord = {
 	todoist: {
 		id: 'todoist',
 		name: 'Todoist',
-		icon: todoistIcon,
+		icon: todoistIcon as string,
 	},
 	trello: {
 		id: 'trello',
 		name: 'Trello',
-		icon: trelloIcon,
+		icon: trelloIcon as string,
 	},
 	'microsoft-todo': {
 		id: 'microsoft-todo',
 		name: 'Microsoft Todo',
-		icon: microsoftTodoIcon,
+		icon: microsoftTodoIcon as string,
 	},
 	'vikunja-file': {
 		id: 'vikunja-file',
diff --git a/src/views/tasks/ShowTasksInRange.vue b/src/views/tasks/ShowTasksInRange.vue
index 54a2ced9..02498cc1 100644
--- a/src/views/tasks/ShowTasksInRange.vue
+++ b/src/views/tasks/ShowTasksInRange.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import ShowTasks from './ShowTasks'
+import ShowTasks from './ShowTasks.vue'
 
 function getNextWeekDate() {
 	return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
diff --git a/yarn.lock b/yarn.lock
index 4ea74e7e..5f20b8a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2869,6 +2869,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/is-touch-device@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/is-touch-device/-/is-touch-device-1.0.0.tgz#c835c4c220a4e5635f4895b6223630dcd429b49c"
+  integrity sha512-/rErV0NuroAR9EZF1xK0TrihQ/7BbVckGfSr/suq/E4tJQLr4TrADR0qAUpDs/hxtl1NiP0V/ho+fSA/5EIO9Q==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"