From f36115871c52ed6a9b733df06f530968cea94251 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 18 Jun 2024 17:48:04 +0200
Subject: [PATCH] feat: camelcase global components

---
 frontend/.eslintrc.cjs                        |  2 +-
 frontend/src/components/date/DatemathHelp.vue |  4 +-
 .../components/date/DatepickerWithRange.vue   |  4 +-
 .../components/date/DatepickerWithValues.vue  |  4 +-
 .../src/components/home/AddToHomeScreen.vue   |  4 +-
 frontend/src/components/home/ContentAuth.vue  |  8 ++--
 frontend/src/components/home/DemoMode.vue     |  2 +-
 frontend/src/components/home/Navigation.vue   | 10 ++---
 .../home/ProjectsNavigationItem.vue           | 10 ++---
 .../src/components/home/TheNavigation.vue     |  6 +--
 frontend/src/components/input/Button.vue      |  4 +-
 .../src/components/input/DatepickerInline.vue | 12 +++---
 frontend/src/components/input/Multiselect.vue |  2 +-
 frontend/src/components/input/Password.vue    |  2 +-
 frontend/src/components/input/Reactions.vue   |  2 +-
 .../components/input/editor/CommandsList.vue  |  2 +-
 .../components/input/editor/EditorToolbar.vue | 38 +++++++++----------
 .../src/components/input/editor/TipTap.vue    | 12 +++---
 frontend/src/components/misc/Card.vue         |  2 +-
 frontend/src/components/misc/CreateEdit.vue   |  8 ++--
 frontend/src/components/misc/Dropdown.vue     |  2 +-
 frontend/src/components/misc/Modal.vue        |  2 +-
 frontend/src/components/misc/Notification.vue |  4 +-
 .../src/components/misc/OpenQuickActions.vue  |  2 +-
 frontend/src/components/misc/Subscription.vue |  2 +-
 .../misc/keyboard-shortcuts/index.vue         |  8 ++--
 .../notifications/Notifications.vue           |  2 +-
 .../project/ProjectSettingsDropdown.vue       |  2 +-
 .../project/partials/FilterPopup.vue          |  4 +-
 .../components/project/partials/Filters.vue   |  4 +-
 .../project/partials/ProjectCard.vue          |  4 +-
 .../components/project/views/ProjectGantt.vue |  8 ++--
 .../project/views/ProjectKanban.vue           |  6 +--
 .../components/project/views/ProjectList.vue  |  6 +--
 .../components/project/views/ProjectTable.vue |  8 ++--
 .../components/project/views/ViewEditForm.vue |  2 +-
 .../components/quick-actions/QuickActions.vue |  4 +-
 .../src/components/sharing/LinkSharing.vue    | 12 +++---
 frontend/src/components/sharing/UserTeam.vue  | 10 ++---
 frontend/src/components/tasks/AddTask.vue     |  2 +-
 .../tasks/partials/AssigneeList.vue           |  2 +-
 .../components/tasks/partials/Attachments.vue | 20 +++++-----
 .../components/tasks/partials/Comments.vue    |  6 +--
 .../components/tasks/partials/Description.vue |  4 +-
 .../components/tasks/partials/FilePreview.vue |  2 +-
 .../src/components/tasks/partials/Heading.vue |  2 +-
 .../components/tasks/partials/KanbanCard.vue  |  8 ++--
 .../tasks/partials/PriorityLabel.vue          |  4 +-
 .../tasks/partials/QuickAddMagic.vue          | 10 ++---
 .../tasks/partials/RelatedTasks.vue           |  6 +--
 .../components/tasks/partials/Reminders.vue   |  2 +-
 .../tasks/partials/SingleTaskInProject.vue    | 10 ++---
 .../partials/SingleTaskInlineReadonly.vue     |  6 +--
 frontend/src/views/About.vue                  |  8 ++--
 frontend/src/views/filters/FilterDelete.vue   |  4 +-
 frontend/src/views/filters/FilterNew.vue      |  8 ++--
 frontend/src/views/labels/ListLabels.vue      |  8 ++--
 frontend/src/views/project/ProjectInfo.vue    |  8 ++--
 .../settings/ProjectSettingsArchive.vue       |  4 +-
 .../settings/ProjectSettingsDelete.vue        |  4 +-
 .../project/settings/ProjectSettingsViews.vue |  6 +--
 .../settings/ProjectSettingsWebhooks.vue      |  4 +-
 frontend/src/views/tasks/ShowTasks.vue        |  4 +-
 frontend/src/views/tasks/TaskDetailView.vue   | 36 +++++++++---------
 frontend/src/views/teams/EditTeam.vue         | 24 ++++++------
 .../src/views/user/settings/ApiTokens.vue     |  8 ++--
 frontend/src/views/user/settings/Avatar.vue   |  4 +-
 frontend/src/views/user/settings/Caldav.vue   |  4 +-
 .../src/views/user/settings/DataExport.vue    |  4 +-
 frontend/src/views/user/settings/Deletion.vue |  4 +-
 .../src/views/user/settings/EmailUpdate.vue   |  4 +-
 frontend/src/views/user/settings/General.vue  |  4 +-
 .../views/user/settings/PasswordUpdate.vue    |  4 +-
 frontend/src/views/user/settings/TOTP.vue     |  4 +-
 74 files changed, 236 insertions(+), 236 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index edc36d60b..9ded1b0de 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -24,7 +24,7 @@ module.exports = {
 		// uncategorized rules:
 		'vue/component-api-style': ['error', ['script-setup']],
 		'vue/component-name-in-template-casing': ['error', 'PascalCase', {
-			'globals': ['RouterView', 'RouterLink'],
+			'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
 		}],
 		'vue/custom-event-name-casing': ['error', 'camelCase'],
 		'vue/define-macros-order': 'error',
diff --git a/frontend/src/components/date/DatemathHelp.vue b/frontend/src/components/date/DatemathHelp.vue
index 5d5077bd0..946dc6169 100644
--- a/frontend/src/components/date/DatemathHelp.vue
+++ b/frontend/src/components/date/DatemathHelp.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		class="has-no-shadow how-it-works-modal"
 		:title="$t('input.datemathHelp.title')"
 	>
@@ -118,7 +118,7 @@
 				</tr>
 			</tbody>
 		</table>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index 51cbbbad5..19da15e0f 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -84,7 +84,7 @@
 							{{ $t('input.datemathHelp.learnhow') }}
 						</BaseButton>
 
-						<modal
+						<Modal
 							:enabled="showHowItWorks"
 							transition-name="fade"
 							:overflow="true"
@@ -92,7 +92,7 @@
 							@close="() => showHowItWorks = false"
 						>
 							<DatemathHelp />
-						</modal>
+						</Modal>
 					</div>
 				</div>
 			</template>
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index 36664337d..869cdb125 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -61,7 +61,7 @@
 							{{ $t('input.datemathHelp.learnhow') }}
 						</BaseButton>
 
-						<modal
+						<Modal
 							:enabled="showHowItWorks"
 							transition-name="fade"
 							:overflow="true"
@@ -69,7 +69,7 @@
 							@close="() => showHowItWorks = false"
 						>
 							<DatemathHelp />
-						</modal>
+						</Modal>
 					</div>
 				</div>
 			</template>
diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index a09587729..cd41cd8a5 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -4,7 +4,7 @@
 		class="add-to-home-screen"
 		:class="{'has-update-available': hasUpdateAvailable}"
 	>
-		<icon
+		<Icon
 			icon="arrow-up-from-bracket"
 			class="add-icon"
 		/>
@@ -15,7 +15,7 @@
 			class="hide-button"
 			@click="() => hideMessage = true"
 		>
-			<icon icon="x" />
+			<Icon icon="x" />
 		</BaseButton>
 	</div>
 </template>
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index 3d7288ea9..99ad88d2c 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -5,7 +5,7 @@
 			class="menu-hide-button d-print-none"
 			@click="baseStore.setMenuActive(false)"
 		>
-			<icon icon="times" />
+			<Icon icon="times" />
 		</BaseButton>
 		<div
 			class="app-container"
@@ -42,21 +42,21 @@
 					</keep-alive>
 				</RouterView>
 
-				<modal
+				<Modal
 					:enabled="typeof currentModal !== 'undefined'"
 					variant="scrolling"
 					class="task-detail-view-modal"
 					@close="closeModal()"
 				>
 					<component :is="currentModal" />
-				</modal>
+				</Modal>
 
 				<BaseButton
 					v-shortcut="'?'"
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 				>
-					<icon icon="keyboard" />
+					<Icon icon="keyboard" />
 				</BaseButton>
 			</main>
 		</div>
diff --git a/frontend/src/components/home/DemoMode.vue b/frontend/src/components/home/DemoMode.vue
index 0e7090863..8648293f3 100644
--- a/frontend/src/components/home/DemoMode.vue
+++ b/frontend/src/components/home/DemoMode.vue
@@ -21,7 +21,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			class="hide-button"
 			@click="() => hide = true"
 		>
-			<icon icon="times" />
+			<Icon icon="times" />
 		</BaseButton>
 	</div>
 </template>
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index 697de6997..cb4558fb0 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -20,7 +20,7 @@
 						:to="{ name: 'home'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="calendar" />
+							<Icon icon="calendar" />
 						</span>
 						{{ $t('navigation.overview') }}
 					</RouterLink>
@@ -31,7 +31,7 @@
 						:to="{ name: 'tasks.range'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon :icon="['far', 'calendar-alt']" />
+							<Icon :icon="['far', 'calendar-alt']" />
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</RouterLink>
@@ -42,7 +42,7 @@
 						:to="{ name: 'projects.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="layer-group" />
+							<Icon icon="layer-group" />
 						</span>
 						{{ $t('project.projects') }}
 					</RouterLink>
@@ -53,7 +53,7 @@
 						:to="{ name: 'labels.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="tags" />
+							<Icon icon="tags" />
 						</span>
 						{{ $t('label.title') }}
 					</RouterLink>
@@ -64,7 +64,7 @@
 						:to="{ name: 'teams.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="users" />
+							<Icon icon="users" />
 						</span>
 						{{ $t('team.title') }}
 					</RouterLink>
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 2a9b1e741..376f566bc 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -9,7 +9,7 @@
 				class="collapse-project-button"
 				@click="childProjectsOpen = !childProjectsOpen"
 			>
-				<icon
+				<Icon
 					icon="chevron-down"
 					:class="{ 'project-is-collapsed': !childProjectsOpen }"
 				/>
@@ -35,14 +35,14 @@
 						v-else-if="project.id < -1"
 						class="saved-filter-icon icon menu-item-icon"
 					>
-						<icon icon="filter" />
+						<Icon icon="filter" />
 					</span>
 					<span
 						v-if="project.id > 0"
 						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
-						<icon icon="grip-lines" />
+						<Icon icon="grip-lines" />
 					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@@ -53,7 +53,7 @@
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
-				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 			</BaseButton>
 			<ProjectSettingsDropdown
 				class="menu-list-dropdown"
@@ -64,7 +64,7 @@
 						class="menu-list-dropdown-trigger"
 						@click="toggleOpen"
 					>
-						<icon
+						<Icon
 							icon="ellipsis-h"
 							class="icon"
 						/>
diff --git a/frontend/src/components/home/TheNavigation.vue b/frontend/src/components/home/TheNavigation.vue
index a812c93a7..bf13e8e80 100644
--- a/frontend/src/components/home/TheNavigation.vue
+++ b/frontend/src/components/home/TheNavigation.vue
@@ -28,7 +28,7 @@
 				:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
 				class="project-title-button"
 			>
-				<icon icon="circle-info" />
+				<Icon icon="circle-info" />
 			</BaseButton>
 
 			<ProjectSettingsDropdown
@@ -41,7 +41,7 @@
 						class="project-title-button"
 						@click="toggleOpen"
 					>
-						<icon
+						<Icon
 							icon="ellipsis-h"
 							class="icon"
 						/>
@@ -75,7 +75,7 @@
 								transform: open ? 'rotate(180deg)' : 'rotate(0)',
 							}"
 						>
-							<icon icon="chevron-down" />
+							<Icon icon="chevron-down" />
 						</span>
 					</BaseButton>
 				</template>
diff --git a/frontend/src/components/input/Button.vue b/frontend/src/components/input/Button.vue
index def406eeb..0d502e518 100644
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@@ -13,7 +13,7 @@
 		}"
 	>
 		<template v-if="icon">
-			<icon
+			<Icon
 				v-if="showIconOnly"
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
@@ -22,7 +22,7 @@
 				v-else
 				class="icon is-small"
 			>
-				<icon
+				<Icon
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index eca16d99d..ec89b5896 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -4,7 +4,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('today')"
 	>
-		<span class="icon"><icon :icon="['far', 'calendar-alt']" /></span>
+		<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.today') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
@@ -14,7 +14,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('tomorrow')"
 	>
-		<span class="icon"><icon :icon="['far', 'sun']" /></span>
+		<span class="icon"><Icon :icon="['far', 'sun']" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.tomorrow') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
@@ -24,7 +24,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextMonday')"
 	>
-		<span class="icon"><icon icon="coffee" /></span>
+		<span class="icon"><Icon icon="coffee" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextMonday') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
@@ -34,7 +34,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('thisWeekend')"
 	>
-		<span class="icon"><icon icon="cocktail" /></span>
+		<span class="icon"><Icon icon="cocktail" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
@@ -44,7 +44,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('laterThisWeek')"
 	>
-		<span class="icon"><icon icon="chess-knight" /></span>
+		<span class="icon"><Icon icon="chess-knight" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
@@ -54,7 +54,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextWeek')"
 	>
-		<span class="icon"><icon icon="forward" /></span>
+		<span class="icon"><Icon icon="forward" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 0ba1f70c6..d945e4e75 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -57,7 +57,7 @@
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
-					<icon icon="times" />
+					<Icon icon="times" />
 				</BaseButton>
 			</div>
 		</div>
diff --git a/frontend/src/components/input/Password.vue b/frontend/src/components/input/Password.vue
index a3d927933..525f3e7a6 100644
--- a/frontend/src/components/input/Password.vue
+++ b/frontend/src/components/input/Password.vue
@@ -20,7 +20,7 @@
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			@click="togglePasswordFieldType"
 		>
-			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
+			<Icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
 		</BaseButton>
 	</div>
 	<p
diff --git a/frontend/src/components/input/Reactions.vue b/frontend/src/components/input/Reactions.vue
index 929404035..7e9207b53 100644
--- a/frontend/src/components/input/Reactions.vue
+++ b/frontend/src/components/input/Reactions.vue
@@ -157,7 +157,7 @@ async function toggleReaction(value: string) {
 			class="reaction-button"
 			@click.stop="toggleEmojiPicker"
 		>
-			<icon :icon="['far', 'face-laugh']" />
+			<Icon :icon="['far', 'face-laugh']" />
 		</BaseButton>
 		<CustomTransition name="fade">
 			<VuemojiPicker
diff --git a/frontend/src/components/input/editor/CommandsList.vue b/frontend/src/components/input/editor/CommandsList.vue
index e66f798f5..90e973456 100644
--- a/frontend/src/components/input/editor/CommandsList.vue
+++ b/frontend/src/components/input/editor/CommandsList.vue
@@ -8,7 +8,7 @@
 				:class="{ 'is-selected': index === selectedIndex }"
 				@click="selectItem(index)"
 			>
-				<icon :icon="item.icon" />
+				<Icon :icon="item.icon" />
 				<div class="description">
 					<p>{{ item.title }}</p>
 					<p>{{ item.description }}</p>
diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index 9018f79dd..5495de1db 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -8,7 +8,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">1</span>
 				</span>
 			</BaseButton>
@@ -19,7 +19,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">2</span>
 				</span>
 			</BaseButton>
@@ -30,7 +30,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">3</span>
 				</span>
 			</BaseButton>
@@ -44,7 +44,7 @@
 				@click="editor.chain().focus().toggleBold().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-bold']" />
+					<Icon :icon="['fa', 'fa-bold']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -54,7 +54,7 @@
 				@click="editor.chain().focus().toggleItalic().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-italic']" />
+					<Icon :icon="['fa', 'fa-italic']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -64,7 +64,7 @@
 				@click="editor.chain().focus().toggleUnderline().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-underline']" />
+					<Icon :icon="['fa', 'fa-underline']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -74,7 +74,7 @@
 				@click="editor.chain().focus().toggleStrike().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-strikethrough']" />
+					<Icon :icon="['fa', 'fa-strikethrough']" />
 				</span>
 			</BaseButton>
 		</div>
@@ -87,7 +87,7 @@
 				@click="editor.chain().focus().toggleCodeBlock().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-code']" />
+					<Icon :icon="['fa', 'fa-code']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -97,7 +97,7 @@
 				@click="editor.chain().focus().toggleBlockquote().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-quote-right']" />
+					<Icon :icon="['fa', 'fa-quote-right']" />
 				</span>
 			</BaseButton>
 		</div>
@@ -110,7 +110,7 @@
 				@click="editor.chain().focus().toggleBulletList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ul']" />
+					<Icon :icon="['fa', 'fa-list-ul']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -120,7 +120,7 @@
 				@click="editor.chain().focus().toggleOrderedList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ol']" />
+					<Icon :icon="['fa', 'fa-list-ol']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -130,7 +130,7 @@
 				@click="editor.chain().focus().toggleTaskList().run()"
 			>
 				<span class="icon">
-					<icon icon="fa-list-check" />
+					<Icon icon="fa-list-check" />
 				</span>
 			</BaseButton>
 		</div>
@@ -142,7 +142,7 @@
 				@click="e => emit('imageUploadClicked', e)"
 			>
 				<span class="icon">
-					<icon icon="fa-image" />
+					<Icon icon="fa-image" />
 				</span>
 			</BaseButton>
 		</div>
@@ -156,7 +156,7 @@
 				@click="setLink"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-link']" />
+					<Icon :icon="['fa', 'fa-link']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -167,7 +167,7 @@
 				@click="editor.chain().focus().setParagraph().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-paragraph']" />
+					<Icon :icon="['fa', 'fa-paragraph']" />
 				</span>
 			</BaseButton>
 
@@ -177,7 +177,7 @@
 				@click="editor.chain().focus().setHorizontalRule().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-ruler-horizontal']" />
+					<Icon :icon="['fa', 'fa-ruler-horizontal']" />
 				</span>
 			</BaseButton>
 		</div>
@@ -189,7 +189,7 @@
 				@click="editor.chain().focus().undo().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-undo']" />
+					<Icon :icon="['fa', 'fa-undo']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@@ -198,7 +198,7 @@
 				@click="editor.chain().focus().redo().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-redo']" />
+					<Icon :icon="['fa', 'fa-redo']" />
 				</span>
 			</BaseButton>
 		</div>
@@ -212,7 +212,7 @@
 				@click="toggleTableMode"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-table']" />
+					<Icon :icon="['fa', 'fa-table']" />
 				</span>
 			</BaseButton>
 			<div
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 7070b83ba..b1d1b9675 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -19,7 +19,7 @@
 				:class="{ 'is-active': editor.isActive('bold') }"
 				@click="editor.chain().focus().toggleBold().run()"
 			>
-				<icon :icon="['fa', 'fa-bold']" />
+				<Icon :icon="['fa', 'fa-bold']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.italic')"
@@ -27,7 +27,7 @@
 				:class="{ 'is-active': editor.isActive('italic') }"
 				@click="editor.chain().focus().toggleItalic().run()"
 			>
-				<icon :icon="['fa', 'fa-italic']" />
+				<Icon :icon="['fa', 'fa-italic']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.underline')"
@@ -35,7 +35,7 @@
 				:class="{ 'is-active': editor.isActive('underline') }"
 				@click="editor.chain().focus().toggleUnderline().run()"
 			>
-				<icon :icon="['fa', 'fa-underline']" />
+				<Icon :icon="['fa', 'fa-underline']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.strikethrough')"
@@ -43,7 +43,7 @@
 				:class="{ 'is-active': editor.isActive('strike') }"
 				@click="editor.chain().focus().toggleStrike().run()"
 			>
-				<icon :icon="['fa', 'fa-strikethrough']" />
+				<Icon :icon="['fa', 'fa-strikethrough']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.code')"
@@ -51,7 +51,7 @@
 				:class="{ 'is-active': editor.isActive('code') }"
 				@click="editor.chain().focus().toggleCode().run()"
 			>
-				<icon :icon="['fa', 'fa-code']" />
+				<Icon :icon="['fa', 'fa-code']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.link')"
@@ -59,7 +59,7 @@
 				:class="{ 'is-active': editor.isActive('link') }"
 				@click="setLink"
 			>
-				<icon :icon="['fa', 'fa-link']" />
+				<Icon :icon="['fa', 'fa-link']" />
 			</BaseButton>
 		</BubbleMenu>
 
diff --git a/frontend/src/components/misc/Card.vue b/frontend/src/components/misc/Card.vue
index 2d0edbae1..dd696c48d 100644
--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@@ -18,7 +18,7 @@
 				@click="$emit('close')"
 			>	
 				<span class="icon">
-					<icon :icon="closeIcon" />
+					<Icon :icon="closeIcon" />
 				</span>
 			</BaseButton>
 		</header>
diff --git a/frontend/src/components/misc/CreateEdit.vue b/frontend/src/components/misc/CreateEdit.vue
index 6b460d8b0..9ead40b9b 100644
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@@ -1,10 +1,10 @@
 <template>
-	<modal
+	<Modal
 		:overflow="true"
 		:wide="wide"
 		@close="$router.back()"
 	>
-		<card
+		<Card
 			:title="title"
 			:shadow="false"
 			:padding="false"
@@ -45,8 +45,8 @@
 					</x-button>
 				</slot>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 59ad211ae..e211763bb 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -13,7 +13,7 @@
 				class="dropdown-trigger is-flex"
 				@click="toggleOpen"
 			>
-				<icon
+				<Icon
 					:icon="triggerIcon"
 					class="icon"
 				/>
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index f3f105eb4..807a24245 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -31,7 +31,7 @@
 							class="close"
 							@click="$emit('close')"
 						>
-							<icon icon="times" />
+							<Icon icon="times" />
 						</BaseButton>
 
 						<slot>
diff --git a/frontend/src/components/misc/Notification.vue b/frontend/src/components/misc/Notification.vue
index 614d7a664..320ac6841 100644
--- a/frontend/src/components/misc/Notification.vue
+++ b/frontend/src/components/misc/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-	<notifications
+	<Notifications
 		position="bottom left"
 		:max="2"
 		class="global-notification"
@@ -44,7 +44,7 @@
 				</div>
 			</div>
 		</template>
-	</notifications>
+	</Notifications>
 </template>
 
 <style scoped>
diff --git a/frontend/src/components/misc/OpenQuickActions.vue b/frontend/src/components/misc/OpenQuickActions.vue
index 9a5077afc..5619c1c75 100644
--- a/frontend/src/components/misc/OpenQuickActions.vue
+++ b/frontend/src/components/misc/OpenQuickActions.vue
@@ -35,6 +35,6 @@ function openQuickActions() {
 		:title="$t('keyboardShortcuts.quickSearch')"
 		@click="openQuickActions"
 	>
-		<icon icon="search" />
+		<Icon icon="search" />
 	</BaseButton>
 </template>
diff --git a/frontend/src/components/misc/Subscription.vue b/frontend/src/components/misc/Subscription.vue
index 459255626..48dca9afd 100644
--- a/frontend/src/components/misc/Subscription.vue
+++ b/frontend/src/components/misc/Subscription.vue
@@ -26,7 +26,7 @@
 		@click="changeSubscription"
 	>
 		<span class="icon">
-			<icon :icon="iconName" />
+			<Icon :icon="iconName" />
 		</span>
 		{{ buttonText }}
 	</BaseButton>
diff --git a/frontend/src/components/misc/keyboard-shortcuts/index.vue b/frontend/src/components/misc/keyboard-shortcuts/index.vue
index e48c196e8..8c8f082fe 100644
--- a/frontend/src/components/misc/keyboard-shortcuts/index.vue
+++ b/frontend/src/components/misc/keyboard-shortcuts/index.vue
@@ -1,6 +1,6 @@
 <template>
-	<modal @close="close()">
-		<card
+	<Modal @close="close()">
+		<Card
 			class="has-background-white keyboard-shortcuts"
 			:shadow="false"
 			:title="$t('keyboardShortcuts.title')"
@@ -43,8 +43,8 @@
 					</template>
 				</dl>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index 800962ca9..def5d9bbd 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -13,7 +13,7 @@
 					v-if="unreadNotifications > 0"
 					class="unread-indicator"
 				/>
-				<icon icon="bell" />
+				<Icon icon="bell" />
 			</BaseButton>
 		</slot>
 
diff --git a/frontend/src/components/project/ProjectSettingsDropdown.vue b/frontend/src/components/project/ProjectSettingsDropdown.vue
index e88820c3c..8d320ab41 100644
--- a/frontend/src/components/project/ProjectSettingsDropdown.vue
+++ b/frontend/src/components/project/ProjectSettingsDropdown.vue
@@ -9,7 +9,7 @@
 					class="dropdown-trigger"
 					@click="triggerProps.toggleOpen"
 				>
-					<icon
+					<Icon
 						icon="ellipsis-h"
 						class="icon"
 					/>
diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index fd5f0005f..ad4ec61a4 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -7,7 +7,7 @@
 	>
 		{{ $t('filters.title') }}
 	</x-button>
-	<modal
+	<Modal
 		:enabled="modalOpen"
 		transition-name="fade"
 		:overflow="true"
@@ -22,7 +22,7 @@
 			@update:modelValue="emitChanges"
 			@showResultsButtonClicked="() => modalOpen = false"
 		/>
-	</modal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index 1d687eac5..f78cbd13b 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		class="filters has-overflow"
 		:title="hasTitle ? $t('filters.title') : ''"
 		role="search"
@@ -40,7 +40,7 @@
 				{{ $t('filters.showResults') }}
 			</x-button>
 		</template>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index 3b0d5d260..10655e8d4 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -28,7 +28,7 @@
 				v-if="project.id < -1"
 				class="saved-filter-icon icon"
 			>
-				<icon icon="filter" />
+				<Icon icon="filter" />
 			</span>
 			{{ getProjectTitle(project) }}
 		</div>
@@ -47,7 +47,7 @@
 			:class="{'is-favorite': project.isFavorite}"
 			@click.prevent.stop="projectStore.toggleProjectFavorite(project)"
 		>
-			<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+			<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 		</BaseButton>
 	</div>
 </template>
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index bde0683c1..14811f806 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -5,7 +5,7 @@
 		:view-id
 	>
 		<template #default>
-			<card :has-content="false">
+			<Card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
 						<label
@@ -44,10 +44,10 @@
 						{{ $t('project.gantt.showTasksWithoutDates') }}
 					</FancyCheckbox>
 				</div>
-			</card>
+			</Card>
 
 			<div class="gantt-chart-container">
-				<card
+				<Card
 					:has-content="false"
 					:padding="false"
 					class="has-overflow"
@@ -64,7 +64,7 @@
 						v-if="canWrite"
 						@createTask="addGanttTask"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index f0fbc7e99..7601c02bb 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -45,7 +45,7 @@
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
-										<icon icon="check-double" />
+										<Icon icon="check-double" />
 									</span>
 									<h2
 										class="title input"
@@ -246,7 +246,7 @@
 					</div>
 				</div>
 
-				<modal
+				<Modal
 					:enabled="showBucketDeleteModal"
 					@close="showBucketDeleteModal = false"
 					@submit="deleteBucket()"
@@ -261,7 +261,7 @@
 							{{ $t('project.kanban.deleteBucketText2') }}
 						</p>
 					</template>
-				</modal>
+				</Modal>
 			</div>
 		</template>
 	</ProjectWrapper>
diff --git a/frontend/src/components/project/views/ProjectList.vue b/frontend/src/components/project/views/ProjectList.vue
index daa7c43e4..59dbad697 100644
--- a/frontend/src/components/project/views/ProjectList.vue
+++ b/frontend/src/components/project/views/ProjectList.vue
@@ -19,7 +19,7 @@
 				:class="{ 'is-loading': loading }"
 				class="loader-container is-max-width-desktop list-view"
 			>
-				<card
+				<Card
 					:padding="false"
 					:has-content="false"
 					class="has-overflow"
@@ -73,7 +73,7 @@
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
-										<icon icon="grip-lines" />
+										<Icon icon="grip-lines" />
 									</span>
 								</template>
 							</SingleTaskInProject>
@@ -84,7 +84,7 @@
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index 98bc29e52..e04b3f9de 100644
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@@ -18,7 +18,7 @@
 						</x-button>
 					</template>
 					<template #content="{isOpen}">
-						<card
+						<Card
 							class="columns-filter"
 							:class="{'is-open': isOpen}"
 						>
@@ -64,7 +64,7 @@
 							<FancyCheckbox v-model="activeColumns.createdBy">
 								{{ $t('task.attributes.createdBy') }}
 							</FancyCheckbox>
-						</card>
+						</Card>
 					</template>
 				</Popup>
 				<FilterPopup v-model="params" />
@@ -76,7 +76,7 @@
 				:class="{'is-loading': loading}"
 				class="loader-container"
 			>
-				<card
+				<Card
 					:padding="false"
 					:has-content="false"
 				>
@@ -260,7 +260,7 @@
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index c0db52837..0dcb4b17b 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -193,7 +193,7 @@ function handleBubbleSave() {
 						class="is-danger"
 						@click.prevent="() => view.bucketConfiguration.splice(index, 1)"
 					>
-						<icon icon="trash-alt" />
+						<Icon icon="trash-alt" />
 					</button>
 					<div class="filter-bucket-form">
 						<div class="field">
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index 328f328bd..bfa3b2762 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -1,5 +1,5 @@
 <template>
-	<modal
+	<Modal
 		:enabled="active"
 		:overflow="isNewTaskCommand"
 		@close="closeQuickActions"
@@ -81,7 +81,7 @@
 				</div>
 			</div>
 		</div>
-	</modal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/sharing/LinkSharing.vue b/frontend/src/components/sharing/LinkSharing.vue
index 184873a2d..066f59c6a 100644
--- a/frontend/src/components/sharing/LinkSharing.vue
+++ b/frontend/src/components/sharing/LinkSharing.vue
@@ -129,19 +129,19 @@
 							<p class="mb-2">
 								<template v-if="s.right === RIGHTS.ADMIN">
 									<span class="icon is-small">
-										<icon icon="lock" />
+										<Icon icon="lock" />
 									</span>&nbsp;
 									{{ $t('project.share.right.admin') }}
 								</template>
 								<template v-else-if="s.right === RIGHTS.READ_WRITE">
 									<span class="icon is-small">
-										<icon icon="pen" />
+										<Icon icon="pen" />
 									</span>&nbsp;
 									{{ $t('project.share.right.readWrite') }}
 								</template>
 								<template v-else>
 									<span class="icon is-small">
-										<icon icon="users" />
+										<Icon icon="users" />
 									</span>&nbsp;
 									{{ $t('project.share.right.read') }}
 								</template>
@@ -163,7 +163,7 @@
 										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
 									>
 										<span class="icon">
-											<icon icon="paste" />
+											<Icon icon="paste" />
 										</span>
 									</x-button>
 								</div>
@@ -199,7 +199,7 @@
 			</table>
 		</div>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="remove(projectId)"
@@ -211,7 +211,7 @@
 			<template #text>
 				<p>{{ $t('project.share.links.removeText') }}</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/components/sharing/UserTeam.vue b/frontend/src/components/sharing/UserTeam.vue
index 9e04521c7..1695cb4c4 100644
--- a/frontend/src/components/sharing/UserTeam.vue
+++ b/frontend/src/components/sharing/UserTeam.vue
@@ -73,19 +73,19 @@
 					<td class="type">
 						<template v-if="s.right === RIGHTS.ADMIN">
 							<span class="icon is-small">
-								<icon icon="lock" />
+								<Icon icon="lock" />
 							</span>
 							{{ $t('project.share.right.admin') }}
 						</template>
 						<template v-else-if="s.right === RIGHTS.READ_WRITE">
 							<span class="icon is-small">
-								<icon icon="pen" />
+								<Icon icon="pen" />
 							</span>
 							{{ $t('project.share.right.readWrite') }}
 						</template>
 						<template v-else>
 							<span class="icon is-small">
-								<icon icon="users" />
+								<Icon icon="users" />
 							</span>
 							{{ $t('project.share.right.read') }}
 						</template>
@@ -139,7 +139,7 @@
 			{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
 		</Nothing>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteSharable()"
@@ -152,7 +152,7 @@
 			<template #text>
 				<p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index 93c6eb3b0..4a834443b 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -17,7 +17,7 @@
 					@keydown.enter="handleEnter"
 				/>
 				<span class="icon is-small is-left">
-					<icon icon="tasks" />
+					<Icon icon="tasks" />
 				</span>
 				<QuickAddMagic :highlight-hint-icon="taskAddHovered" />
 			</p>
diff --git a/frontend/src/components/tasks/partials/AssigneeList.vue b/frontend/src/components/tasks/partials/AssigneeList.vue
index 08161f0d1..b0c2a251d 100644
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@@ -44,7 +44,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 				class="remove-assignee"
 				@click="remove(user)"
 			>
-				<icon icon="times" />
+				<Icon icon="times" />
 			</BaseButton>
 		</span>
 	</div>
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index e7f5c1c30..4f60d9002 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -2,7 +2,7 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="paperclip" />
+				<Icon icon="paperclip" />
 			</span>
 			{{ $t('task.attachment.title') }}
 		</h3>
@@ -77,14 +77,14 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="downloadAttachment(a)"
 							>
-								<icon icon="download" />
+								<Icon icon="download" />
 							</BaseButton>
 							<BaseButton
 								v-tooltip="$t('task.attachment.copyUrlTooltip')"
 								class="attachment-info-meta-button"
 								@click.stop="copyUrl(a)"
 							>
-								<icon icon="copy" />
+								<Icon icon="copy" />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled"
@@ -92,7 +92,7 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setAttachmentToDelete(a)"
 							>
-								<icon icon="trash-alt" />
+								<Icon icon="trash-alt" />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled && canPreview(a)"
@@ -102,7 +102,7 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
 							>
-								<icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
+								<Icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
 							</BaseButton>
 						</p>
 					</div>
@@ -131,7 +131,7 @@
 			>
 				<div class="drop-hint">
 					<div class="icon">
-						<icon icon="cloud-upload-alt" />
+						<Icon icon="cloud-upload-alt" />
 					</div>
 					<div class="hint">
 						{{ $t('task.attachment.drop') }}
@@ -141,7 +141,7 @@
 		</Teleport>
 
 		<!-- Delete modal -->
-		<modal
+		<Modal
 			:enabled="attachmentToDelete !== null"
 			@close="setAttachmentToDelete(null)"
 			@submit="deleteAttachment()"
@@ -156,10 +156,10 @@
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
-		</modal>
+		</Modal>
 
 		<!-- Attachment image modal -->
-		<modal
+		<Modal
 			:enabled="attachmentImageBlobUrl !== null"
 			@close="attachmentImageBlobUrl = null"
 		>
@@ -167,7 +167,7 @@
 				:src="attachmentImageBlobUrl"
 				alt=""
 			>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index acf21d8e6..958837848 100644
--- a/frontend/src/components/tasks/partials/Comments.vue
+++ b/frontend/src/components/tasks/partials/Comments.vue
@@ -8,7 +8,7 @@
 			:class="{'d-print-none': comments.length === 0}"
 		>
 			<span class="icon is-grey">
-				<icon :icon="['far', 'comments']" />
+				<Icon :icon="['far', 'comments']" />
 			</span>
 			{{ $t('task.comment.title') }}
 		</h3>
@@ -160,7 +160,7 @@
 			</div>
 		</div>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="() => deleteComment(commentToDelete)"
@@ -175,7 +175,7 @@
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/components/tasks/partials/Description.vue b/frontend/src/components/tasks/partials/Description.vue
index 5d23f9e89..e5896bbac 100644
--- a/frontend/src/components/tasks/partials/Description.vue
+++ b/frontend/src/components/tasks/partials/Description.vue
@@ -2,7 +2,7 @@
 	<div>
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="align-left" />
+				<Icon icon="align-left" />
 			</span>
 			{{ $t('task.attributes.description') }}
 			<CustomTransition name="fade">
@@ -17,7 +17,7 @@
 					v-else-if="!loading && saved"
 					class="is-small has-text-success"
 				>
-					<icon icon="check" />
+					<Icon icon="check" />
 					{{ $t('misc.saved') }}
 				</span>
 			</CustomTransition>
diff --git a/frontend/src/components/tasks/partials/FilePreview.vue b/frontend/src/components/tasks/partials/FilePreview.vue
index 0043f963d..076c86772 100644
--- a/frontend/src/components/tasks/partials/FilePreview.vue
+++ b/frontend/src/components/tasks/partials/FilePreview.vue
@@ -11,7 +11,7 @@
 		v-else
 		class="icon-wrapper"
 	>
-		<icon
+		<Icon
 			size="6x"
 			icon="file"
 		/>
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index c0b3cd5f9..585b10250 100644
--- a/frontend/src/components/tasks/partials/Heading.vue
+++ b/frontend/src/components/tasks/partials/Heading.vue
@@ -38,7 +38,7 @@
 				v-else-if="!loading && showSavedMessage"
 				class="has-text-success is-inline-flex is-align-content-center"
 			>
-				<icon
+				<Icon
 					icon="check"
 					class="mr-2"
 				/>
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index b885ca4f9..a5334b826 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -39,7 +39,7 @@
 				class="due-date"
 			>
 				<span class="icon">
-					<icon :icon="['far', 'calendar-alt']" />
+					<Icon :icon="['far', 'calendar-alt']" />
 				</span>
 				<time :datetime="formatISO(task.dueDate)">
 					{{ formatDateSince(task.dueDate) }}
@@ -73,19 +73,19 @@
 					v-if="task.attachments.length > 0"
 					class="icon"
 				>
-					<icon icon="paperclip" />	
+					<Icon icon="paperclip" />	
 				</span>
 				<span
 					v-if="!isEditorContentEmpty(task.description)"
 					class="icon"
 				>
-					<icon icon="align-left" />
+					<Icon icon="align-left" />
 				</span>
 				<span
 					v-if="task.repeatAfter.amount > 0"
 					class="icon"
 				>
-					<icon icon="history" />
+					<Icon icon="history" />
 				</span>
 			</div>
 		</div>
diff --git a/frontend/src/components/tasks/partials/PriorityLabel.vue b/frontend/src/components/tasks/partials/PriorityLabel.vue
index c7feab085..840db41c4 100644
--- a/frontend/src/components/tasks/partials/PriorityLabel.vue
+++ b/frontend/src/components/tasks/partials/PriorityLabel.vue
@@ -8,7 +8,7 @@
 			v-if="priority >= priorities.HIGH"
 			class="icon"
 		>
-			<icon icon="exclamation" />
+			<Icon icon="exclamation" />
 		</span>
 		<span>
 			<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
@@ -22,7 +22,7 @@
 			v-if="priority === priorities.DO_NOW"
 			class="icon pr-0"
 		>
-			<icon icon="exclamation" />
+			<Icon icon="exclamation" />
 		</span>
 	</span>
 </template>
diff --git a/frontend/src/components/tasks/partials/QuickAddMagic.vue b/frontend/src/components/tasks/partials/QuickAddMagic.vue
index c0270e017..41cd2f9f2 100644
--- a/frontend/src/components/tasks/partials/QuickAddMagic.vue
+++ b/frontend/src/components/tasks/partials/QuickAddMagic.vue
@@ -7,16 +7,16 @@
 			:class="{'is-highlighted': highlightHintIcon}"
 			@click="() => visible = true"
 		>
-			<icon :icon="['far', 'circle-question']" />
+			<Icon :icon="['far', 'circle-question']" />
 		</BaseButton>
-		<modal
+		<Modal
 			:enabled="visible"
 			transition-name="fade"
 			:overflow="true"
 			variant="hint-modal"
 			@close="() => visible = false"
 		>
-			<card
+			<Card
 				class="has-no-shadow"
 				:title="$t('task.quickAddMagic.title')"
 			>
@@ -89,8 +89,8 @@
 					<li>Every 2 weeks</li>
 					<li>Every month</li>
 				</ul>
-			</card>
-		</modal>
+			</Card>
+		</Modal>
 	</template>
 </template>
 
diff --git a/frontend/src/components/tasks/partials/RelatedTasks.vue b/frontend/src/components/tasks/partials/RelatedTasks.vue
index 4daa990e9..bfbf932a3 100644
--- a/frontend/src/components/tasks/partials/RelatedTasks.vue
+++ b/frontend/src/components/tasks/partials/RelatedTasks.vue
@@ -151,7 +151,7 @@
 							otherTaskId: task.id
 						})"
 					>
-						<icon icon="trash-alt" />
+						<Icon icon="trash-alt" />
 					</BaseButton>
 				</div>
 			</div>
@@ -163,7 +163,7 @@
 			{{ $t('task.relation.noneYet') }}
 		</p>
 
-		<modal
+		<Modal
 			:enabled="relationToDelete !== undefined"
 			@close="relationToDelete = undefined"
 			@submit="removeTaskRelation()"
@@ -178,7 +178,7 @@
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/components/tasks/partials/Reminders.vue b/frontend/src/components/tasks/partials/Reminders.vue
index e83d1289f..bba2a0ad1 100644
--- a/frontend/src/components/tasks/partials/Reminders.vue
+++ b/frontend/src/components/tasks/partials/Reminders.vue
@@ -18,7 +18,7 @@
 				class="remove"
 				@click="removeReminderByIndex(index)"
 			>
-				<icon icon="times" />
+				<Icon icon="times" />
 			</BaseButton>
 		</div>
 
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 86e050a1e..5d0597111 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -102,19 +102,19 @@
 						v-if="task.attachments.length > 0"
 						class="project-task-icon"
 					>
-						<icon icon="paperclip" />
+						<Icon icon="paperclip" />
 					</span>
 					<span
 						v-if="!isEditorContentEmpty(task.description)"
 						class="project-task-icon"
 					>
-						<icon icon="align-left" />
+						<Icon icon="align-left" />
 					</span>
 					<span
 						v-if="isRepeating"
 						class="project-task-icon"
 					>
-						<icon icon="history" />
+						<Icon icon="history" />
 					</span>
 				</span>
 
@@ -147,11 +147,11 @@
 				class="favorite"
 				@click="toggleFavorite"
 			>
-				<icon
+				<Icon
 					v-if="task.isFavorite"
 					icon="star"
 				/>
-				<icon
+				<Icon
 					v-else
 					:icon="['far', 'star']"
 				/>
diff --git a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
index ade0e5fd0..2bd88c258 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
@@ -67,19 +67,19 @@
 				v-if="task.attachments.length > 0"
 				class="project-task-icon"
 			>
-				<icon icon="paperclip" />
+				<Icon icon="paperclip" />
 			</span>
 			<span
 				v-if="task.description"
 				class="project-task-icon"
 			>
-				<icon icon="align-left" />
+				<Icon icon="align-left" />
 			</span>
 			<span
 				v-if="task.repeatAfter.amount > 0"
 				class="project-task-icon"
 			>
-				<icon icon="history" />
+				<Icon icon="history" />
 			</span>
 		</span>
 
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index a8f259796..81b506161 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -1,10 +1,10 @@
 <template>
-	<modal
+	<Modal
 		transition-name="fade"
 		variant="hint-modal"
 		@close="$router.back()"
 	>
-		<card
+		<Card
 			class="has-no-shadow"
 			:title="$t('about.title')"
 			:has-close="true"
@@ -24,8 +24,8 @@
 					{{ $t('misc.close') }}
 				</x-button>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/filters/FilterDelete.vue b/frontend/src/views/filters/FilterDelete.vue
index d9fd04e5f..c52e7671b 100644
--- a/frontend/src/views/filters/FilterDelete.vue
+++ b/frontend/src/views/filters/FilterDelete.vue
@@ -1,5 +1,5 @@
 <template>
-	<modal
+	<Modal
 		@close="$router.back()"
 		@submit="deleteFilter()"
 	>
@@ -10,7 +10,7 @@
 		<template #text>
 			<p>{{ $t('filters.delete.text') }}</p>
 		</template>
-	</modal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/filters/FilterNew.vue b/frontend/src/views/filters/FilterNew.vue
index 54875c033..fb8362afb 100644
--- a/frontend/src/views/filters/FilterNew.vue
+++ b/frontend/src/views/filters/FilterNew.vue
@@ -1,9 +1,9 @@
 <template>
-	<modal
+	<Modal
 		variant="hint-modal"
 		@close="$router.back()"
 	>
-		<card
+		<Card
 			class="has-no-shadow"
 			:title="$t('filters.create.title')"
 		>
@@ -77,8 +77,8 @@
 					{{ $t('filters.create.action') }}
 				</x-button>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/labels/ListLabels.vue b/frontend/src/views/labels/ListLabels.vue
index b4fe62695..35713b12f 100644
--- a/frontend/src/views/labels/ListLabels.vue
+++ b/frontend/src/views/labels/ListLabels.vue
@@ -60,7 +60,7 @@
 				v-if="isLabelEdit"
 				class="column is-4"
 			>
-				<card
+				<Card
 					:title="$t('label.edit.header')"
 					:has-close="true"
 					@close="() => isLabelEdit = false"
@@ -112,10 +112,10 @@
 							</div>
 						</div>
 					</form>
-				</card>
+				</Card>
 			</div>
 
-			<modal
+			<Modal
 				:enabled="showDeleteModal"
 				@close="showDeleteModal = false"
 				@submit="deleteLabel(labelToDelete)"
@@ -130,7 +130,7 @@
 						{{ $t('task.label.delete.text2') }}
 					</p>
 				</template>
-			</modal>
+			</Modal>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/views/project/ProjectInfo.vue b/frontend/src/views/project/ProjectInfo.vue
index f451089f6..010abca30 100644
--- a/frontend/src/views/project/ProjectInfo.vue
+++ b/frontend/src/views/project/ProjectInfo.vue
@@ -1,8 +1,8 @@
 <template>
-	<modal
+	<Modal
 		@close="$router.back()"
 	>
-		<card
+		<Card
 			:title="project?.title"
 		>
 			<div
@@ -16,8 +16,8 @@
 			>
 				{{ $t('project.noDescriptionAvailable') }}
 			</p>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/project/settings/ProjectSettingsArchive.vue b/frontend/src/views/project/settings/ProjectSettingsArchive.vue
index d229521a7..abf928187 100644
--- a/frontend/src/views/project/settings/ProjectSettingsArchive.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsArchive.vue
@@ -1,5 +1,5 @@
 <template>
-	<modal
+	<Modal
 		@close="$router.back()"
 		@submit="archiveProject()"
 	>
@@ -10,7 +10,7 @@
 		<template #text>
 			<p>{{ project.isArchived ? $t('project.archive.unarchiveText') : $t('project.archive.archiveText') }}</p>
 		</template>
-	</modal>
+	</Modal>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/project/settings/ProjectSettingsDelete.vue b/frontend/src/views/project/settings/ProjectSettingsDelete.vue
index c77a327cf..d9862d2d7 100644
--- a/frontend/src/views/project/settings/ProjectSettingsDelete.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsDelete.vue
@@ -1,5 +1,5 @@
 <template>
-	<modal
+	<Modal
 		@close="$router.back()"
 		@submit="deleteProject()"
 	>
@@ -28,7 +28,7 @@
 				{{ $t('misc.cannotBeUndone') }}
 			</p>
 		</template>
-	</modal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/project/settings/ProjectSettingsViews.vue b/frontend/src/views/project/settings/ProjectSettingsViews.vue
index 1e62b66aa..0c4aca831 100644
--- a/frontend/src/views/project/settings/ProjectSettingsViews.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsViews.vue
@@ -205,7 +205,7 @@ async function saveViewPosition(e) {
 									@click="viewToEdit = {...v}"
 								/>
 								<span class="icon handle">
-									<icon icon="grip-lines" />
+									<Icon icon="grip-lines" />
 								</span>
 							</td>
 						</template>
@@ -215,7 +215,7 @@ async function saveViewPosition(e) {
 		</table>
 	</CreateEdit>
 
-	<modal
+	<Modal
 		:enabled="showDeleteModal"
 		@close="showDeleteModal = false"
 		@submit="deleteView"
@@ -227,7 +227,7 @@ async function saveViewPosition(e) {
 		<template #text>
 			<p>{{ $t('project.views.deleteText') }}</p>
 		</template>
-	</modal>
+	</Modal>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
index 223fa2c57..9872789fd 100644
--- a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
@@ -256,7 +256,7 @@ function validateSelectedEvents() {
 			</tbody>
 		</table>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteWebhook()"
@@ -268,7 +268,7 @@ function validateSelectedEvents() {
 			<template #text>
 				<p>{{ $t('project.webhooks.deleteText') }}</p>
 			</template>
-		</modal>
+		</Modal>
 	</CreateEdit>
 </template>
 
diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/views/tasks/ShowTasks.vue
index bce32005c..01cb67195 100644
--- a/frontend/src/views/tasks/ShowTasks.vue
+++ b/frontend/src/views/tasks/ShowTasks.vue
@@ -43,7 +43,7 @@
 			<LlamaCool class="llama-cool" />
 		</template>
 
-		<card
+		<Card
 			v-if="hasTasks"
 			:padding="false"
 			class="has-overflow"
@@ -59,7 +59,7 @@
 					@taskUpdated="updateTasks"
 				/>
 			</div>
-		</card>
+		</Card>
 		<div
 			v-else
 			:class="{ 'is-loading': loading}"
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index 5b9747bc1..573e01674 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -60,7 +60,7 @@
 						>
 							<!-- Assignees -->
 							<div class="detail-title">
-								<icon icon="users" />
+								<Icon icon="users" />
 								{{ $t('task.attributes.assignees') }}
 							</div>
 							<EditAssignees
@@ -86,7 +86,7 @@
 							>
 								<!-- Priority -->
 								<div class="detail-title">
-									<icon icon="exclamation" />
+									<Icon icon="exclamation" />
 									{{ $t('task.attributes.priority') }}
 								</div>
 								<PrioritySelect
@@ -107,7 +107,7 @@
 							>
 								<!-- Due Date -->
 								<div class="detail-title">
-									<icon icon="calendar" />
+									<Icon icon="calendar" />
 									{{ $t('task.attributes.dueDate') }}
 								</div>
 								<div class="date-input">
@@ -124,7 +124,7 @@
 										@click="() => {task.dueDate = null;saveTask()}"
 									>
 										<span class="icon is-small">
-											<icon icon="times" />
+											<Icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
@@ -140,7 +140,7 @@
 							>
 								<!-- Progress -->
 								<div class="detail-title">
-									<icon icon="percent" />
+									<Icon icon="percent" />
 									{{ $t('task.attributes.percentDone') }}
 								</div>
 								<PercentDoneSelect
@@ -161,7 +161,7 @@
 							>
 								<!-- Start Date -->
 								<div class="detail-title">
-									<icon icon="play" />
+									<Icon icon="play" />
 									{{ $t('task.attributes.startDate') }}
 								</div>
 								<div class="date-input">
@@ -178,7 +178,7 @@
 										@click="() => {task.startDate = null;saveTask()}"
 									>
 										<span class="icon is-small">
-											<icon icon="times" />
+											<Icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
@@ -194,7 +194,7 @@
 							>
 								<!-- End Date -->
 								<div class="detail-title">
-									<icon icon="stop" />
+									<Icon icon="stop" />
 									{{ $t('task.attributes.endDate') }}
 								</div>
 								<div class="date-input">
@@ -211,7 +211,7 @@
 										@click="() => {task.endDate = null;saveTask()}"
 									>
 										<span class="icon is-small">
-											<icon icon="times" />
+											<Icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
@@ -227,7 +227,7 @@
 							>
 								<!-- Reminders -->
 								<div class="detail-title">
-									<icon :icon="['far', 'clock']" />
+									<Icon :icon="['far', 'clock']" />
 									{{ $t('task.attributes.reminders') }}
 								</div>
 								<Reminders
@@ -249,7 +249,7 @@
 								<!-- Repeat after -->
 								<div class="is-flex is-justify-content-space-between">
 									<div class="detail-title">
-										<icon icon="history" />
+										<Icon icon="history" />
 										{{ $t('task.attributes.repeat') }}
 									</div>
 									<BaseButton
@@ -258,7 +258,7 @@
 										@click="removeRepeatAfter"
 									>
 										<span class="icon is-small">
-											<icon icon="times" />
+											<Icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
@@ -280,7 +280,7 @@
 							>
 								<!-- Color -->
 								<div class="detail-title">
-									<icon icon="fill-drip" />
+									<Icon icon="fill-drip" />
 									{{ $t('task.attributes.color') }}
 								</div>
 								<ColorPicker
@@ -300,7 +300,7 @@
 					>
 						<div class="detail-title">
 							<span class="icon is-grey">
-								<icon icon="tags" />
+								<Icon icon="tags" />
 							</span>
 							{{ $t('task.attributes.labels') }}
 						</div>
@@ -352,7 +352,7 @@
 					>
 						<h3>
 							<span class="icon is-grey">
-								<icon icon="sitemap" />
+								<Icon icon="sitemap" />
 							</span>
 							{{ $t('task.attributes.relatedTasks') }}
 						</h3>
@@ -373,7 +373,7 @@
 					>
 						<h3>
 							<span class="icon is-grey">
-								<icon icon="list" />
+								<Icon icon="list" />
 							</span>
 							{{ $t('task.detail.move') }}
 						</h3>
@@ -560,7 +560,7 @@
 			/>
 		</div>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteTask()"
@@ -575,7 +575,7 @@
 					{{ $t('task.detail.delete.text2') }}
 				</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/views/teams/EditTeam.vue b/frontend/src/views/teams/EditTeam.vue
index bc0f30133..1dc5696d9 100644
--- a/frontend/src/views/teams/EditTeam.vue
+++ b/frontend/src/views/teams/EditTeam.vue
@@ -3,7 +3,7 @@
 		class="loader-container is-max-width-desktop"
 		:class="{ 'is-loading': teamService.loading }"
 	>
-		<card
+		<Card
 			v-if="userIsAdmin && !team.oidcId"
 			class="is-fullwidth"
 			:title="title"
@@ -90,9 +90,9 @@
 					/>
 				</div>
 			</div>
-		</card>
+		</Card>
 
-		<card
+		<Card
 			class="is-fullwidth has-overflow"
 			:title="$t('team.edit.members')"
 			:padding="false"
@@ -157,13 +157,13 @@
 						<td class="type">
 							<template v-if="m.admin">
 								<span class="icon is-small">
-									<icon icon="lock" />
+									<Icon icon="lock" />
 								</span>
 								{{ $t('team.attributes.admin') }}
 							</template>
 							<template v-else>
 								<span class="icon is-small">
-									<icon icon="user" />
+									<Icon icon="user" />
 								</span>
 								{{ $t('team.attributes.member') }}
 							</template>
@@ -191,7 +191,7 @@
 					</tr>
 				</tbody>
 			</table>
-		</card>
+		</Card>
 
 		<x-button
 			v-if="team && !team.oidcId"
@@ -202,7 +202,7 @@
 		</x-button>
 
 		<!-- Leave team modal -->
-		<modal
+		<Modal
 			v-if="showLeaveModal"
 			@close="showLeaveModal = false"
 			@submit="leave()"
@@ -217,10 +217,10 @@
 					{{ $t('team.edit.leave.text2') }}
 				</p>
 			</template>
-		</modal>
+		</Modal>
 
 		<!-- Team delete modal -->
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteTeam()"
@@ -235,10 +235,10 @@
 					{{ $t('team.edit.delete.text2') }}
 				</p>
 			</template>
-		</modal>
+		</Modal>
 
 		<!-- User delete modal -->
-		<modal
+		<Modal
 			:enabled="showUserDeleteModal"
 			@close="showUserDeleteModal = false"
 			@submit="deleteMember()"
@@ -253,7 +253,7 @@
 					{{ $t('team.edit.deleteUser.text2') }}
 				</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>
 
diff --git a/frontend/src/views/user/settings/ApiTokens.vue b/frontend/src/views/user/settings/ApiTokens.vue
index 55dbc34dd..f56aa2c8c 100644
--- a/frontend/src/views/user/settings/ApiTokens.vue
+++ b/frontend/src/views/user/settings/ApiTokens.vue
@@ -150,7 +150,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 </script>
 
 <template>
-	<card :title="$t('user.settings.apiTokens.title')">
+	<Card :title="$t('user.settings.apiTokens.title')">
 		<Message
 			v-if="tokenCreatedSuccessMessage !== ''"
 			class="has-text-centered mb-4"
@@ -342,7 +342,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 			{{ $t('user.settings.apiTokens.createAToken') }}
 		</XButton>
 
-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteToken()"
@@ -357,6 +357,6 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 					{{ $t('user.settings.apiTokens.delete.text2') }}
 				</p>
 			</template>
-		</modal>
-	</card>
+		</Modal>
+	</Card>
 </template>
diff --git a/frontend/src/views/user/settings/Avatar.vue b/frontend/src/views/user/settings/Avatar.vue
index 193a3d167..bfe1f100e 100644
--- a/frontend/src/views/user/settings/Avatar.vue
+++ b/frontend/src/views/user/settings/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-	<card :title="$t('user.settings.avatar.title')">
+	<Card :title="$t('user.settings.avatar.title')">
 		<div class="control mb-4">
 			<label
 				v-for="(label, providerId) in AVATAR_PROVIDERS"
@@ -62,7 +62,7 @@
 				{{ $t('misc.save') }}
 			</x-button>
 		</div>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/Caldav.vue b/frontend/src/views/user/settings/Caldav.vue
index da5a8194c..95c0b1bc7 100644
--- a/frontend/src/views/user/settings/Caldav.vue
+++ b/frontend/src/views/user/settings/Caldav.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		v-if="caldavEnabled"
 		:title="$t('user.settings.caldav.title')"
 	>
@@ -95,7 +95,7 @@
 				{{ $t('user.settings.caldav.more') }}
 			</BaseButton>
 		</p>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/user/settings/DataExport.vue b/frontend/src/views/user/settings/DataExport.vue
index 9e2d810e6..7a0e0646a 100644
--- a/frontend/src/views/user/settings/DataExport.vue
+++ b/frontend/src/views/user/settings/DataExport.vue
@@ -1,5 +1,5 @@
 <template>
-	<card :title="$t('user.export.title')">
+	<Card :title="$t('user.export.title')">
 		<p>
 			{{ $t('user.export.description') }}
 		</p>
@@ -42,7 +42,7 @@
 		>
 			{{ $t('user.export.request') }}
 		</x-button>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/Deletion.vue b/frontend/src/views/user/settings/Deletion.vue
index 30c7e1d00..7033c6b25 100644
--- a/frontend/src/views/user/settings/Deletion.vue
+++ b/frontend/src/views/user/settings/Deletion.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		v-if="userDeletionEnabled"
 		:title="$t('user.deletion.title')"
 	>
@@ -107,7 +107,7 @@
 				{{ $t('user.deletion.confirm') }}
 			</x-button>
 		</template>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/EmailUpdate.vue b/frontend/src/views/user/settings/EmailUpdate.vue
index 481c3b486..c335cec00 100644
--- a/frontend/src/views/user/settings/EmailUpdate.vue
+++ b/frontend/src/views/user/settings/EmailUpdate.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		v-if="isLocalUser"
 		:title="$t('user.settings.updateEmailTitle')"
 	>
@@ -45,7 +45,7 @@
 		>
 			{{ $t('misc.save') }}
 		</x-button>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue
index b406b8b6b..6fa24157d 100644
--- a/frontend/src/views/user/settings/General.vue
+++ b/frontend/src/views/user/settings/General.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		:title="$t('user.settings.general.title')"
 		class="general-settings"
 		:loading="loading"
@@ -212,7 +212,7 @@
 		>
 			{{ $t('misc.save') }}
 		</x-button>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/PasswordUpdate.vue b/frontend/src/views/user/settings/PasswordUpdate.vue
index 389d30caf..9214d8b67 100644
--- a/frontend/src/views/user/settings/PasswordUpdate.vue
+++ b/frontend/src/views/user/settings/PasswordUpdate.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		v-if="isLocalUser"
 		:title="$t('user.settings.newPasswordTitle')"
 		:loading="passwordUpdateService.loading"
@@ -65,7 +65,7 @@
 		>
 			{{ $t('misc.save') }}
 		</x-button>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">
diff --git a/frontend/src/views/user/settings/TOTP.vue b/frontend/src/views/user/settings/TOTP.vue
index 838d066c7..3868770ca 100644
--- a/frontend/src/views/user/settings/TOTP.vue
+++ b/frontend/src/views/user/settings/TOTP.vue
@@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		v-if="totpEnabled"
 		:title="$t('user.settings.totp.title')"
 	>
@@ -90,7 +90,7 @@
 				</x-button>
 			</div>
 		</template>
-	</card>
+	</Card>
 </template>
 
 <script lang="ts">