diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index e0631e3617..968f3e949f 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -36,7 +36,7 @@ type NestedKeys<T, K = keyof T> = K extends keyof T & string
   : never;
 
 declare module 'svelte-i18n' {
-  import type { InterpolationValues } from '$lib/elements/format-message.svelte';
+  import type { InterpolationValues } from '$lib/elements/format-message';
   import type { Readable } from 'svelte/store';
 
   type Translations = NestedKeys<typeof en>;
diff --git a/web/src/lib/actions/__test__/focus-trap.spec.ts b/web/src/lib/actions/__test__/FocusTrap.spec.ts
similarity index 95%
rename from web/src/lib/actions/__test__/focus-trap.spec.ts
rename to web/src/lib/actions/__test__/FocusTrap.spec.ts
index c4d43dbc71..30bec8f0e7 100644
--- a/web/src/lib/actions/__test__/focus-trap.spec.ts
+++ b/web/src/lib/actions/__test__/FocusTrap.spec.ts
@@ -1,4 +1,4 @@
-import FocusTrapTest from '$lib/actions/__test__/focus-trap-test.svelte';
+import FocusTrapTest from '$lib/actions/__test__/FocusTrapTest.svelte';
 import { setDefaultTabbleOptions } from '$lib/utils/focus-util';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
diff --git a/web/src/lib/actions/__test__/focus-trap-test.svelte b/web/src/lib/actions/__test__/FocusTrapTest.svelte
similarity index 100%
rename from web/src/lib/actions/__test__/focus-trap-test.svelte
rename to web/src/lib/actions/__test__/FocusTrapTest.svelte
diff --git a/web/src/lib/components/ActionMenuItem.svelte b/web/src/lib/components/ActionMenuItem.svelte
index d50d50bf0b..32434c1b8f 100644
--- a/web/src/lib/components/ActionMenuItem.svelte
+++ b/web/src/lib/components/ActionMenuItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { isEnabled } from '$lib/utils';
   import { type ActionItem } from '@immich/ui';
 
diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index c51ef10c11..a61fb13029 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
   import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
   import ImageLayer from '$lib/components/ImageLayer.svelte';
   import Thumbhash from '$lib/components/Thumbhash.svelte';
diff --git a/web/src/lib/components/ApiKeyPermissionsPicker.svelte b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
index ecdb68b038..62283bcf74 100644
--- a/web/src/lib/components/ApiKeyPermissionsPicker.svelte
+++ b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
+  import ApiKeyGrid from '$lib/components/user-settings-page/UserApiKeyGrid.svelte';
   import { Permission } from '@immich/sdk';
   import { Checkbox, IconButton, Input, Label } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
diff --git a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
index 18830ae475..3cce0ffd3b 100644
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
@@ -2,8 +2,8 @@
   import SupportedDatetimePanel from '$lib/components/admin-settings/SupportedDatetimePanel.svelte';
   import SupportedVariablesPanel from '$lib/components/admin-settings/SupportedVariablesPanel.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/AlbumCard.svelte
similarity index 97%
rename from web/src/lib/components/album-page/album-card.svelte
rename to web/src/lib/components/album-page/AlbumCard.svelte
index a641af79ff..38b13fa150 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/AlbumCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
diff --git a/web/src/lib/components/album-page/album-card-group.svelte b/web/src/lib/components/album-page/AlbumCardGroup.svelte
similarity index 97%
rename from web/src/lib/components/album-page/album-card-group.svelte
rename to web/src/lib/components/album-page/AlbumCardGroup.svelte
index eb931d834c..778f04872e 100644
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/web/src/lib/components/album-page/AlbumCardGroup.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import AlbumCard from '$lib/components/album-page/AlbumCard.svelte';
   import { Route } from '$lib/route';
   import { albumViewSettings } from '$lib/stores/preferences.store';
   import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
diff --git a/web/src/lib/components/album-page/album-cover.svelte b/web/src/lib/components/album-page/AlbumCover.svelte
similarity index 87%
rename from web/src/lib/components/album-page/album-cover.svelte
rename to web/src/lib/components/album-page/AlbumCover.svelte
index 2af2be77f6..971ae73f26 100644
--- a/web/src/lib/components/album-page/album-cover.svelte
+++ b/web/src/lib/components/album-page/AlbumCover.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
-  import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+  import AssetCover from '$lib/components/sharedlinks-page/covers/AssetCover.svelte';
+  import NoCover from '$lib/components/sharedlinks-page/covers/NoCover.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/AlbumMap.svelte
similarity index 100%
rename from web/src/lib/components/album-page/album-map.svelte
rename to web/src/lib/components/album-page/AlbumMap.svelte
diff --git a/web/src/lib/components/album-page/album-shared-link.svelte b/web/src/lib/components/album-page/AlbumSharedLink.svelte
similarity index 100%
rename from web/src/lib/components/album-page/album-shared-link.svelte
rename to web/src/lib/components/album-page/AlbumSharedLink.svelte
diff --git a/web/src/lib/components/album-page/album-summary.svelte b/web/src/lib/components/album-page/AlbumSummary.svelte
similarity index 100%
rename from web/src/lib/components/album-page/album-summary.svelte
rename to web/src/lib/components/album-page/AlbumSummary.svelte
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/AlbumViewer.svelte
similarity index 95%
rename from web/src/lib/components/album-page/album-viewer.svelte
rename to web/src/lib/components/album-page/AlbumViewer.svelte
index 55e80ae983..98e251be30 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/AlbumViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import AlbumMap from '$lib/components/album-page/album-map.svelte';
+  import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
@@ -20,9 +20,9 @@
   import { ActionButton, IconButton, Logo } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import ThemeButton from '../shared-components/theme-button.svelte';
-  import AlbumSummary from './album-summary.svelte';
+  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
+  import ThemeButton from '../shared-components/ThemeButton.svelte';
+  import AlbumSummary from './AlbumSummary.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/AlbumsList.svelte
similarity index 97%
rename from web/src/lib/components/album-page/albums-list.svelte
rename to web/src/lib/components/album-page/AlbumsList.svelte
index 641ce3fb64..d62e6c1d3b 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/web/src/lib/components/album-page/AlbumsList.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
-  import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
+  import AlbumCardGroup from '$lib/components/album-page/AlbumCardGroup.svelte';
+  import AlbumsTable from '$lib/components/album-page/AlbumsTable.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import RightClickContextMenu from '$lib/components/shared-components/context-menu/RightClickContextMenu.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
diff --git a/web/src/lib/components/album-page/albums-table.svelte b/web/src/lib/components/album-page/AlbumsTable.svelte
similarity index 94%
rename from web/src/lib/components/album-page/albums-table.svelte
rename to web/src/lib/components/album-page/AlbumsTable.svelte
index d1166ee87a..b41b79ca16 100644
--- a/web/src/lib/components/album-page/albums-table.svelte
+++ b/web/src/lib/components/album-page/AlbumsTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import AlbumTableHeader from '$lib/components/album-page/albums-table-header.svelte';
-  import AlbumTableRow from '$lib/components/album-page/albums-table-row.svelte';
+  import AlbumTableHeader from '$lib/components/album-page/AlbumsTableHeader.svelte';
+  import AlbumTableRow from '$lib/components/album-page/AlbumsTableRow.svelte';
   import { AlbumGroupBy, albumViewSettings } from '$lib/stores/preferences.store';
   import {
     isAlbumGroupCollapsed,
diff --git a/web/src/lib/components/album-page/albums-table-header.svelte b/web/src/lib/components/album-page/AlbumsTableHeader.svelte
similarity index 100%
rename from web/src/lib/components/album-page/albums-table-header.svelte
rename to web/src/lib/components/album-page/AlbumsTableHeader.svelte
diff --git a/web/src/lib/components/album-page/albums-table-row.svelte b/web/src/lib/components/album-page/AlbumsTableRow.svelte
similarity index 100%
rename from web/src/lib/components/album-page/albums-table-row.svelte
rename to web/src/lib/components/album-page/AlbumsTableRow.svelte
diff --git a/web/src/lib/components/album-page/__tests__/album-card.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
similarity index 98%
rename from web/src/lib/components/album-page/__tests__/album-card.spec.ts
rename to web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
index 67ae2daf2e..17a3e71495 100644
--- a/web/src/lib/components/album-page/__tests__/album-card.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { init, register, waitLocale } from 'svelte-i18n';
-import AlbumCard from '../album-card.svelte';
+import AlbumCard from '../AlbumCard.svelte';
 
 const onShowContextMenu = vi.fn();
 
diff --git a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
similarity index 95%
rename from web/src/lib/components/album-page/__tests__/album-cover.spec.ts
rename to web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
index 3d081a3d2d..6c80d6783a 100644
--- a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
@@ -1,4 +1,4 @@
-import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
 import { albumFactory } from '@test-data/factories/album-factory';
 import { render } from '@testing-library/svelte';
diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/activity-status.svelte
rename to web/src/lib/components/asset-viewer/ActivityStatus.svelte
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
similarity index 98%
rename from web/src/lib/components/asset-viewer/activity-viewer.svelte
rename to web/src/lib/components/asset-viewer/ActivityViewer.svelte
index 30271a45a9..2b5d5f9345 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
@@ -18,7 +18,7 @@
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
   import { fromAction } from 'svelte/attachments';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import UserAvatar from '../shared-components/UserAvatar.svelte';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
diff --git a/web/src/lib/components/asset-viewer/album-list-item.svelte b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
similarity index 98%
rename from web/src/lib/components/asset-viewer/album-list-item.svelte
rename to web/src/lib/components/asset-viewer/AlbumListItem.svelte
index 8a616209fa..4cc35baacf 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
@@ -7,7 +7,7 @@
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle } from '@mdi/js';
   import type { Action } from 'svelte/action';
-  import AlbumListItemDetails from './album-list-item-details.svelte';
+  import AlbumListItemDetails from './AlbumListItemDetails.svelte';
 
   interface Props {
     album: AlbumResponseDto;
diff --git a/web/src/lib/components/asset-viewer/album-list-item-details.svelte b/web/src/lib/components/asset-viewer/AlbumListItemDetails.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/album-list-item-details.svelte
rename to web/src/lib/components/asset-viewer/AlbumListItemDetails.svelte
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.spec.ts b/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
similarity index 98%
rename from web/src/lib/components/asset-viewer/asset-viewer.spec.ts
rename to web/src/lib/components/asset-viewer/AssetViewer.spec.ts
index 017c6abccb..83579cae39 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
@@ -8,7 +8,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import { fireEvent, waitFor } from '@testing-library/svelte';
-import AssetViewer from './asset-viewer.svelte';
+import AssetViewer from './AssetViewer.svelte';
 
 vi.mock('$lib/managers/feature-flags-manager.svelte', () => ({
   featureFlagsManager: {
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
similarity index 96%
rename from web/src/lib/components/asset-viewer/asset-viewer.svelte
rename to web/src/lib/components/asset-viewer/AssetViewer.svelte
index bf13cb4399..4f8002b42f 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte
@@ -2,9 +2,9 @@
   import { browser } from '$app/environment';
   import { focusTrap } from '$lib/actions/focus-trap';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
-  import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
-  import AssetViewerNavBar from '$lib/components/asset-viewer/asset-viewer-nav-bar.svelte';
+  import NextAssetAction from '$lib/components/asset-viewer/actions/NextAssetAction.svelte';
+  import PreviousAssetAction from '$lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
+  import AssetViewerNavBar from '$lib/components/asset-viewer/AssetViewerNavBar.svelte';
   import { preloadManager } from '$lib/components/asset-viewer/PreloadManager.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { AssetAction, ProjectionType } from '$lib/constants';
@@ -38,17 +38,17 @@
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
-  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import ActivityStatus from './activity-status.svelte';
-  import ActivityViewer from './activity-viewer.svelte';
-  import DetailPanel from './detail-panel.svelte';
-  import EditorPanel from './editor/editor-panel.svelte';
-  import CropArea from './editor/transform-tool/crop-area.svelte';
-  import ImagePanoramaViewer from './image-panorama-viewer.svelte';
-  import OcrButton from './ocr-button.svelte';
-  import PhotoViewer from './photo-viewer.svelte';
-  import SlideshowBar from './slideshow-bar.svelte';
-  import VideoViewer from './video-wrapper-viewer.svelte';
+  import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
+  import ActivityStatus from './ActivityStatus.svelte';
+  import ActivityViewer from './ActivityViewer.svelte';
+  import DetailPanel from './DetailPanel.svelte';
+  import EditorPanel from './editor/EditorPanel.svelte';
+  import CropArea from './editor/transform-tool/CropArea.svelte';
+  import ImagePanoramaViewer from './ImagePanoramaViewer.svelte';
+  import OcrButton from './OcrButton.svelte';
+  import PhotoViewer from './PhotoViewer.svelte';
+  import SlideshowBar from './SlideshowBar.svelte';
+  import VideoViewer from './VideoWrapperViewer.svelte';
 
   export type AssetCursor = {
     current: AssetResponseDto;
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
similarity index 97%
rename from web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
rename to web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
index 706188458a..58cafa39b8 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
@@ -5,7 +5,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import '@testing-library/jest-dom';
-import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
+import AssetViewerNavBar from './AssetViewerNavBar.svelte';
 
 describe('AssetViewerNavBar component', () => {
   const additionalProps = {
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
similarity index 94%
rename from web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
rename to web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
index c1494b14f0..4aa72bb368 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
@@ -2,22 +2,22 @@
   import { goto } from '$app/navigation';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
-  import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
-  import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
-  import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
-  import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
-  import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
-  import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
-  import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
-  import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
-  import SetProfilePictureAction from '$lib/components/asset-viewer/actions/set-profile-picture-action.svelte';
-  import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte';
-  import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte';
-  import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
+  import AddToStackAction from '$lib/components/asset-viewer/actions/AddToStackAction.svelte';
+  import ArchiveAction from '$lib/components/asset-viewer/actions/ArchiveAction.svelte';
+  import DeleteAction from '$lib/components/asset-viewer/actions/DeleteAction.svelte';
+  import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte';
+  import RatingAction from '$lib/components/asset-viewer/actions/RatingAction.svelte';
+  import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte';
+  import RestoreAction from '$lib/components/asset-viewer/actions/RestoreAction.svelte';
+  import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte';
+  import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte';
+  import SetProfilePictureAction from '$lib/components/asset-viewer/actions/SetProfilePictureAction.svelte';
+  import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte';
+  import SetVisibilityAction from '$lib/components/asset-viewer/actions/SetVisibilityAction.svelte';
+  import UnstackAction from '$lib/components/asset-viewer/actions/UnstackAction.svelte';
   import LoadingDots from '$lib/components/LoadingDots.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/DetailPanel.svelte
similarity index 96%
rename from web/src/lib/components/asset-viewer/detail-panel.svelte
rename to web/src/lib/components/asset-viewer/DetailPanel.svelte
index 8e1ec4acf7..f46ddee4d6 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanel.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import DetailPanelDate from '$lib/components/asset-viewer/detail-panel-date.svelte';
-  import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
-  import DetailPanelLocation from '$lib/components/asset-viewer/detail-panel-location.svelte';
-  import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
-  import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
+  import DetailPanelDate from '$lib/components/asset-viewer/DetailPanelDate.svelte';
+  import DetailPanelDescription from '$lib/components/asset-viewer/DetailPanelDescription.svelte';
+  import DetailPanelLocation from '$lib/components/asset-viewer/DetailPanelLocation.svelte';
+  import DetailPanelRating from '$lib/components/asset-viewer/DetailPanelStarRating.svelte';
+  import DetailPanelTags from '$lib/components/asset-viewer/DetailPanelTags.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -40,11 +40,11 @@
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import PersonSidePanel from '../faces-page/person-side-panel.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
+  import PersonSidePanel from '../faces-page/PersonSidePanel.svelte';
   import OnEvents from '../OnEvents.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import AlbumListItemDetails from './album-list-item-details.svelte';
+  import UserAvatar from '../shared-components/UserAvatar.svelte';
+  import AlbumListItemDetails from './AlbumListItemDetails.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -393,7 +393,7 @@
 
   {#if latlng && featureFlagsManager.value.map}
     <div class="h-90">
-      {#await import('$lib/components/shared-components/map/map.svelte')}
+      {#await import('$lib/components/shared-components/map/Map.svelte')}
         {#await delay(timeToLoadTheMap) then}
           <!-- show the loading spinner only if loading the map takes too much time -->
           <div class="flex items-center justify-center h-full w-full">
diff --git a/web/src/lib/components/asset-viewer/detail-panel-date.svelte b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/detail-panel-date.svelte
rename to web/src/lib/components/asset-viewer/DetailPanelDate.svelte
diff --git a/web/src/lib/components/asset-viewer/detail-panel-description.spec.ts b/web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
similarity index 96%
rename from web/src/lib/components/asset-viewer/detail-panel-description.spec.ts
rename to web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
index 3175bd8194..d20de66247 100644
--- a/web/src/lib/components/asset-viewer/detail-panel-description.spec.ts
+++ b/web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
@@ -2,7 +2,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import DetailPanelDescription from './detail-panel-description.svelte';
+import DetailPanelDescription from './DetailPanelDescription.svelte';
 
 describe('DetailPanelDescription', () => {
   it('clears unsaved draft on asset change', async () => {
diff --git a/web/src/lib/components/asset-viewer/detail-panel-description.svelte b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/detail-panel-description.svelte
rename to web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
diff --git a/web/src/lib/components/asset-viewer/detail-panel-location.svelte b/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/detail-panel-location.svelte
rename to web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
diff --git a/web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte b/web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte
rename to web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte
diff --git a/web/src/lib/components/asset-viewer/detail-panel-tags.svelte b/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/detail-panel-tags.svelte
rename to web/src/lib/components/asset-viewer/DetailPanelTags.svelte
diff --git a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
similarity index 91%
rename from web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
rename to web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
index 1d597062cb..81d8c8c436 100644
--- a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
-  {#await Promise.all([loadAssetData(assetId), import('./photo-sphere-viewer-adapter.svelte')])}
+  {#await Promise.all([loadAssetData(assetId), import('./PhotoSphereViewerAdapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}
     <PhotoSphereViewer panorama={data} originalPanorama={getAssetUrl({ asset, forceOriginal: true })} />
diff --git a/web/src/lib/components/asset-viewer/navigation-area.svelte b/web/src/lib/components/asset-viewer/NavigationArea.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/navigation-area.svelte
rename to web/src/lib/components/asset-viewer/NavigationArea.svelte
diff --git a/web/src/lib/components/asset-viewer/ocr-bounding-box.svelte b/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/ocr-bounding-box.svelte
rename to web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
diff --git a/web/src/lib/components/asset-viewer/ocr-button.svelte b/web/src/lib/components/asset-viewer/OcrButton.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/ocr-button.svelte
rename to web/src/lib/components/asset-viewer/OcrButton.svelte
diff --git a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte b/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
rename to web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
similarity index 98%
rename from web/src/lib/components/asset-viewer/photo-viewer.svelte
rename to web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 775e9017ce..cf8ee876e4 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -2,9 +2,9 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction } from '$lib/actions/zoom-image';
   import AdaptiveImage from '$lib/components/AdaptiveImage.svelte';
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/FaceEditor.svelte';
   import Thumbhash from '$lib/components/Thumbhash.svelte';
-  import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
+  import OcrBoundingBox from '$lib/components/asset-viewer/OcrBoundingBox.svelte';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
@@ -22,7 +22,7 @@
   import { onDestroy, untrack } from 'svelte';
   import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import type { AssetCursor } from './asset-viewer.svelte';
+  import type { AssetCursor } from './AssetViewer.svelte';
 
   type Props = {
     cursor: AssetCursor;
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
similarity index 99%
rename from web/src/lib/components/asset-viewer/slideshow-bar.svelte
rename to web/src/lib/components/asset-viewer/SlideshowBar.svelte
index 8cdcbcda56..e8c1c4a4b6 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
+  import ProgressBar from '$lib/components/shared-components/progress-bar/ProgressBar.svelte';
   import { ProgressBarStatus } from '$lib/constants';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/video-native-viewer.svelte
rename to web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
index 915d5ceb58..9403d99f3a 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-  import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/FaceEditor.svelte';
+  import VideoRemoteViewer from '$lib/components/asset-viewer/VideoRemoteViewer.svelte';
   import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
diff --git a/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
similarity index 93%
rename from web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
rename to web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
index 2f22094bc7..b97538ee35 100644
--- a/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
@@ -12,7 +12,7 @@
   const { asset }: Props = $props();
 
   const modules = Promise.all([
-    import('./photo-sphere-viewer-adapter.svelte').then((module) => module.default),
+    import('./PhotoSphereViewerAdapter.svelte').then((module) => module.default),
     import('@photo-sphere-viewer/equirectangular-video-adapter').then((module) => module.EquirectangularVideoAdapter),
     import('@photo-sphere-viewer/video-plugin').then((module) => module.VideoPlugin),
     import('@photo-sphere-viewer/video-plugin/index.css'),
diff --git a/web/src/lib/components/asset-viewer/video-remote-viewer.svelte b/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/video-remote-viewer.svelte
rename to web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
diff --git a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte b/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
similarity index 90%
rename from web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
rename to web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
index 57d8acd78a..a26a60ee86 100644
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
-  import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
+  import VideoNativeViewer from '$lib/components/asset-viewer/VideoNativeViewer.svelte';
+  import VideoPanoramaViewer from '$lib/components/asset-viewer/VideoPanoramaViewer.svelte';
   import { ProjectionType } from '$lib/constants';
   import type { AssetResponseDto } from '@immich/sdk';
 
diff --git a/web/src/lib/components/asset-viewer/actions/add-to-stack-action.svelte b/web/src/lib/components/asset-viewer/actions/AddToStackAction.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/add-to-stack-action.svelte
rename to web/src/lib/components/asset-viewer/actions/AddToStackAction.svelte
index 5b30beff6e..4337d8cf5e 100644
--- a/web/src/lib/components/asset-viewer/actions/add-to-stack-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/AddToStackAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { createStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/asset-viewer/actions/archive-action.svelte b/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/archive-action.svelte
rename to web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
index c4936d21d0..d60ae5815a 100644
--- a/web/src/lib/components/asset-viewer/actions/archive-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { toggleArchive } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
diff --git a/web/src/lib/components/asset-viewer/actions/delete-action.spec.ts b/web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
similarity index 96%
rename from web/src/lib/components/asset-viewer/actions/delete-action.spec.ts
rename to web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
index 8ba3432464..4d1ea61fa4 100644
--- a/web/src/lib/components/asset-viewer/actions/delete-action.spec.ts
+++ b/web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
@@ -2,7 +2,7 @@ import { renderWithTooltips } from '$tests/helpers';
 import type { AssetResponseDto } from '@immich/sdk';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
-import DeleteAction from './delete-action.svelte';
+import DeleteAction from './DeleteAction.svelte';
 
 let asset: AssetResponseDto;
 
diff --git a/web/src/lib/components/asset-viewer/actions/delete-action.svelte b/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/actions/delete-action.svelte
rename to web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
diff --git a/web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte b/web/src/lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte
rename to web/src/lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte
index dfb8d8910c..adc1dd1776 100644
--- a/web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte
+++ b/web/src/lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
diff --git a/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte b/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
similarity index 91%
rename from web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
rename to web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
index 32550c0a60..6389cf95e0 100644
--- a/web/src/lib/components/asset-viewer/actions/next-asset-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
@@ -3,7 +3,7 @@
   import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import NavigationArea from '../navigation-area.svelte';
+  import NavigationArea from '../NavigationArea.svelte';
 
   interface Props {
     onNextAsset: () => void;
diff --git a/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte b/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
similarity index 91%
rename from web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
rename to web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
index 082d96b29e..e5d222190a 100644
--- a/web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
@@ -3,7 +3,7 @@
   import { Icon } from '@immich/ui';
   import { mdiChevronLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import NavigationArea from '../navigation-area.svelte';
+  import NavigationArea from '../NavigationArea.svelte';
 
   interface Props {
     onPreviousAsset: () => void;
diff --git a/web/src/lib/components/asset-viewer/actions/rating-action.svelte b/web/src/lib/components/asset-viewer/actions/RatingAction.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/actions/rating-action.svelte
rename to web/src/lib/components/asset-viewer/actions/RatingAction.svelte
diff --git a/web/src/lib/components/asset-viewer/actions/remove-asset-from-stack.svelte b/web/src/lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/remove-asset-from-stack.svelte
rename to web/src/lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte
index 0c77f3a1a6..e0589b01ea 100644
--- a/web/src/lib/components/asset-viewer/actions/remove-asset-from-stack.svelte
+++ b/web/src/lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
 
   import { AssetAction } from '$lib/constants';
   import { removeAssetFromStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/asset-viewer/actions/restore-action.svelte b/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/restore-action.svelte
rename to web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
index 9a8a22f486..5a160801ff 100644
--- a/web/src/lib/components/asset-viewer/actions/restore-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
diff --git a/web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte b/web/src/lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
rename to web/src/lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte
index bb36220e89..b4d3d19fb5 100644
--- a/web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte b/web/src/lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte
similarity index 97%
rename from web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
rename to web/src/lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte
index 136737d830..0795662fd5 100644
--- a/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte b/web/src/lib/components/asset-viewer/actions/SetProfilePictureAction.svelte
similarity index 95%
rename from web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte
rename to web/src/lib/components/asset-viewer/actions/SetProfilePictureAction.svelte
index 0d7735d4f1..d647e67bf8 100644
--- a/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetProfilePictureAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
   import type { AssetResponseDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
diff --git a/web/src/lib/components/asset-viewer/actions/set-stack-primary-asset.svelte b/web/src/lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte
similarity index 96%
rename from web/src/lib/components/asset-viewer/actions/set-stack-primary-asset.svelte
rename to web/src/lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte
index 6ca1548f4b..696fb31655 100644
--- a/web/src/lib/components/asset-viewer/actions/set-stack-primary-asset.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
 
   import { AssetAction } from '$lib/constants';
   import { updateStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte b/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
similarity index 98%
rename from web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte
rename to web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
index 44c1687be6..7c7c0a5e5d 100644
--- a/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/lib/components/asset-viewer/actions/unstack-action.svelte b/web/src/lib/components/asset-viewer/actions/UnstackAction.svelte
similarity index 96%
rename from web/src/lib/components/asset-viewer/actions/unstack-action.svelte
rename to web/src/lib/components/asset-viewer/actions/UnstackAction.svelte
index 0c8192a9e3..b328b816f8 100644
--- a/web/src/lib/components/asset-viewer/actions/unstack-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/UnstackAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { deleteStack } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/editor/editor-panel.svelte
rename to web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte
rename to web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-preset.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/CropPreset.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/editor/transform-tool/crop-preset.svelte
rename to web/src/lib/components/asset-viewer/editor/transform-tool/CropPreset.svelte
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
similarity index 100%
rename from web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte
rename to web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
diff --git a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
similarity index 99%
rename from web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
rename to web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
index 2418e5bf85..051fe1c370 100644
--- a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
diff --git a/web/src/lib/components/assets/broken-asset.svelte b/web/src/lib/components/assets/BrokenAsset.svelte
similarity index 100%
rename from web/src/lib/components/assets/broken-asset.svelte
rename to web/src/lib/components/assets/BrokenAsset.svelte
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
similarity index 96%
rename from web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts
rename to web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
index 04835e9209..3ea1729dd8 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
@@ -1,4 +1,4 @@
-import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
 import { fireEvent, render } from '@testing-library/svelte';
 
 vi.mock('$lib/utils/sw-messaging', () => ({
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
similarity index 97%
rename from web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
rename to web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
index 3ee633a603..1e55ebb411 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
   import Image from '$lib/components/Image.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
similarity index 99%
rename from web/src/lib/components/assets/thumbnail/thumbnail.svelte
rename to web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index b7001e217f..99608eabcc 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -26,8 +26,8 @@
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import Thumbhash from '$lib/components/Thumbhash.svelte';
-  import ImageThumbnail from './image-thumbnail.svelte';
-  import VideoThumbnail from './video-thumbnail.svelte';
+  import ImageThumbnail from './ImageThumbnail.svelte';
+  import VideoThumbnail from './VideoThumbnail.svelte';
   interface Props {
     asset: TimelineAsset;
     groupIndex?: number;
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
similarity index 100%
rename from web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
rename to web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
diff --git a/web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
similarity index 96%
rename from web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts
rename to web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
index 1d78e24935..56a4ae8230 100644
--- a/web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
@@ -1,5 +1,5 @@
 import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
 import { getTabbable } from '$lib/utils/focus-util';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { render } from '@testing-library/svelte';
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
similarity index 97%
rename from web/src/lib/components/faces-page/assign-face-side-panel.svelte
rename to web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
index 772fbe954e..477d62cf67 100644
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
@@ -13,7 +13,7 @@
   import { t } from 'svelte-i18n';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     editedFace: AssetFaceResponseDto;
diff --git a/web/src/lib/components/faces-page/people-search.svelte b/web/src/lib/components/faces-page/PeopleSearch.svelte
similarity index 100%
rename from web/src/lib/components/faces-page/people-search.svelte
rename to web/src/lib/components/faces-page/PeopleSearch.svelte
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/PersonSidePanel.svelte
similarity index 98%
rename from web/src/lib/components/faces-page/person-side-panel.svelte
rename to web/src/lib/components/faces-page/PersonSidePanel.svelte
index fa5afadfa6..c8f5d1429c 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/PersonSidePanel.svelte
@@ -24,8 +24,8 @@
   import { t } from 'svelte-i18n';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
+  import AssignFaceSidePanel from './AssignFaceSidePanel.svelte';
 
   interface Props {
     assetId: string;
diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index f38675c47e..7f80e3911a 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import BreadcrumbActionPage from '$lib/components/BreadcrumbActionPage.svelte';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
+  import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
+  import BottomInfo from '$lib/components/shared-components/side-bar/BottomInfo.svelte';
   import { Route } from '$lib/route';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/UserPageLayout.svelte
similarity index 98%
rename from web/src/lib/components/layouts/user-page-layout.svelte
rename to web/src/lib/components/layouts/UserPageLayout.svelte
index 614b1377fb..17db326c56 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/UserPageLayout.svelte
@@ -4,8 +4,8 @@
 
 <script lang="ts">
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
+  import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
+  import UserSidebar from '$lib/components/shared-components/side-bar/UserSidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
diff --git a/web/src/lib/components/pages/SharedLinkPage.svelte b/web/src/lib/components/pages/SharedLinkPage.svelte
index bbfd77c697..35a56579d6 100644
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkPage.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import AlbumViewer from '$lib/components/album-page/AlbumViewer.svelte';
+  import IndividualSharedViewer from '$lib/components/share-page/IndividualSharedViewer.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import ThemeButton from '$lib/components/shared-components/ThemeButton.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { setSharedLink } from '$lib/utils';
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
similarity index 96%
rename from web/src/lib/components/share-page/individual-shared-viewer.svelte
rename to web/src/lib/components/share-page/IndividualSharedViewer.svelte
index b746c60d87..b294fa8158 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
@@ -20,8 +20,8 @@
   import { IconButton, Logo, toastManager } from '@immich/ui';
   import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
+  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
+  import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -132,7 +132,7 @@
   </header>
 {:else if assets.length === 1}
   {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
-    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer cursor={{ current: asset }} onAction={handleAction} />
     {/await}
   {/await}
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/Combobox.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/combobox.svelte
rename to web/src/lib/components/shared-components/Combobox.svelte
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/ControlAppBar.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/control-app-bar.svelte
rename to web/src/lib/components/shared-components/ControlAppBar.svelte
diff --git a/web/src/lib/components/shared-components/coordinates-input.svelte b/web/src/lib/components/shared-components/CoordinatesInput.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/coordinates-input.svelte
rename to web/src/lib/components/shared-components/CoordinatesInput.svelte
index 9b35d1a485..b4af1a33d1 100644
--- a/web/src/lib/components/shared-components/coordinates-input.svelte
+++ b/web/src/lib/components/shared-components/CoordinatesInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
+  import NumberRangeInput from '$lib/components/shared-components/NumberRangeInput.svelte';
   import { generateId } from '$lib/utils/generate-id';
   import { convert } from 'geo-coordinates-parser';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/empty-placeholder.svelte b/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/empty-placeholder.svelte
rename to web/src/lib/components/shared-components/EmptyPlaceholder.svelte
diff --git a/web/src/lib/components/shared-components/number-range-input.svelte b/web/src/lib/components/shared-components/NumberRangeInput.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/number-range-input.svelte
rename to web/src/lib/components/shared-components/NumberRangeInput.svelte
diff --git a/web/src/lib/components/shared-components/qrcode.svelte b/web/src/lib/components/shared-components/Qrcode.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/qrcode.svelte
rename to web/src/lib/components/shared-components/Qrcode.svelte
diff --git a/web/src/lib/components/shared-components/single-grid-row.svelte b/web/src/lib/components/shared-components/SingleGridRow.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/single-grid-row.svelte
rename to web/src/lib/components/shared-components/SingleGridRow.svelte
diff --git a/web/src/lib/components/shared-components/tag-pill.svelte b/web/src/lib/components/shared-components/TagPill.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/tag-pill.svelte
rename to web/src/lib/components/shared-components/TagPill.svelte
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/ThemeButton.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/theme-button.svelte
rename to web/src/lib/components/shared-components/ThemeButton.svelte
diff --git a/web/src/lib/components/shared-components/user-avatar.svelte b/web/src/lib/components/shared-components/UserAvatar.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/user-avatar.svelte
rename to web/src/lib/components/shared-components/UserAvatar.svelte
diff --git a/web/src/lib/components/shared-components/__test__/number-range-input.spec.ts b/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
similarity index 98%
rename from web/src/lib/components/shared-components/__test__/number-range-input.spec.ts
rename to web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
index dc325bd52c..2899e6d002 100644
--- a/web/src/lib/components/shared-components/__test__/number-range-input.spec.ts
+++ b/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
@@ -1,4 +1,4 @@
-import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
+import NumberRangeInput from '$lib/components/shared-components/NumberRangeInput.svelte';
 import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { Mock } from 'vitest';
diff --git a/web/src/lib/components/shared-components/album-selection/new-album-list-item.svelte b/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/album-selection/new-album-list-item.svelte
rename to web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
similarity index 99%
rename from web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
rename to web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
index 0eb65ef75c..e1e34b76d7 100644
--- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/ContextMenu.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
   import {
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/context-menu/context-menu.svelte
rename to web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/context-menu/menu-option.svelte
rename to web/src/lib/components/shared-components/context-menu/MenuOption.svelte
diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
rename to web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
index 7a2b646141..6e0a974792 100644
--- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/ContextMenu.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
   import { generateId } from '$lib/utils/generate-id';
   import { tick, type Snippet } from 'svelte';
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
rename to web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
index ed16c3d9f1..552954ddf3 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
@@ -2,8 +2,8 @@
   import { goto } from '$app/navigation';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
+  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
@@ -401,7 +401,7 @@
 <!-- Overlay Asset Viewer -->
 {#if assetViewerManager.isViewing}
   <Portal target="body">
-    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer
         cursor={assetCursor}
         onAction={handleAction}
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/map/map.svelte
rename to web/src/lib/components/shared-components/map/Map.svelte
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
rename to web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
index 21e093a272..b661837c69 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
@@ -12,7 +12,7 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import UserAvatar from '../user-avatar.svelte';
+  import UserAvatar from '../UserAvatar.svelte';
 
   type Props = {
     onClose?: () => void;
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
similarity index 96%
rename from web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
rename to web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
index 4ec153ad23..705f1455a1 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
@@ -5,8 +5,8 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
-  import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import NotificationPanel from '$lib/components/shared-components/navigation-bar/NotificationPanel.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/SearchBar.svelte';
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
@@ -19,9 +19,9 @@
   import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import ThemeButton from '../theme-button.svelte';
-  import UserAvatar from '../user-avatar.svelte';
-  import AccountInfoPanel from './account-info-panel.svelte';
+  import ThemeButton from '../ThemeButton.svelte';
+  import UserAvatar from '../UserAvatar.svelte';
+  import AccountInfoPanel from './AccountInfoPanel.svelte';
 
   type Props = {
     onUploadClick?: () => void;
diff --git a/web/src/lib/components/shared-components/navigation-bar/notification-item.svelte b/web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/navigation-bar/notification-item.svelte
rename to web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte
diff --git a/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
rename to web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
index eb4f31a79d..42456151ef 100644
--- a/web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
-  import NotificationItem from '$lib/components/shared-components/navigation-bar/notification-item.svelte';
+  import NotificationItem from '$lib/components/shared-components/navigation-bar/NotificationItem.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { NotificationType, type NotificationDto } from '@immich/sdk';
diff --git a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte b/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
rename to web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
diff --git a/web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte b/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
rename to web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
diff --git a/web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
similarity index 97%
rename from web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
rename to web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
index fba4fec848..46c2b91491 100644
--- a/web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
   import { Button, Icon } from '@immich/ui';
diff --git a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
similarity index 93%
rename from web/src/lib/components/shared-components/purchasing/purchase-content.svelte
rename to web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
index 9bbffe53ef..6f651a0f0b 100644
--- a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
@@ -4,8 +4,8 @@
   import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
   import { Button, Heading, LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
-  import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
+  import UserPurchaseOptionCard from './IndividualPurchaseOptionCard.svelte';
+  import ServerPurchaseOptionCard from './ServerPurchaseOptionCard.svelte';
 
   interface Props {
     onActivate: () => void;
diff --git a/web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte b/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
rename to web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
similarity index 99%
rename from web/src/lib/components/shared-components/search-bar/search-bar.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchBar.svelte
index 891331eaed..80f847fbcd 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
@@ -12,7 +12,7 @@
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import SearchHistoryBox from './search-history-box.svelte';
+  import SearchHistoryBox from './SearchHistoryBox.svelte';
 
   type Props = {
     value?: string;
diff --git a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
index 34f336a4ed..1820354acd 100644
--- a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/Combobox.svelte';
   import type { SearchCameraFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
diff --git a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/search-bar/search-date-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte
diff --git a/web/src/lib/components/shared-components/search-bar/search-display-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/search-bar/search-display-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
diff --git a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte b/web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/search-bar/search-history-box.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte
diff --git a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/search-bar/search-location-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
index c130217b09..8158385ef7 100644
--- a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/Combobox.svelte';
   import type { SearchLocationFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
diff --git a/web/src/lib/components/shared-components/search-bar/search-media-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/search-bar/search-media-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
similarity index 95%
rename from web/src/lib/components/shared-components/search-bar/search-people-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
index 0f8780a566..101f324a6a 100644
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
similarity index 95%
rename from web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
index 7b9fa7414f..fb0975af17 100644
--- a/web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import Combobox from '../combobox.svelte';
+  import Combobox from '../Combobox.svelte';
 
   interface Props {
     rating?: number | null;
diff --git a/web/src/lib/components/shared-components/search-bar/search-tags-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
similarity index 96%
rename from web/src/lib/components/shared-components/search-bar/search-tags-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
index 89a79eda9d..90ad7e7312 100644
--- a/web/src/lib/components/shared-components/search-bar/search-tags-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { Checkbox, Label, Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
-  import TagPill from '../tag-pill.svelte';
+  import TagPill from '../TagPill.svelte';
 
   interface Props {
     selectedTags: SvelteSet<string> | null;
diff --git a/web/src/lib/components/shared-components/search-bar/search-text-section.svelte b/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/search-bar/search-text-section.svelte
rename to web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
diff --git a/web/src/lib/components/shared-components/settings/setting-accordion.svelte b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
similarity index 97%
rename from web/src/lib/components/shared-components/settings/setting-accordion.svelte
rename to web/src/lib/components/shared-components/settings/SettingAccordion.svelte
index 585de9cbc6..bd450ff585 100755
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
@@ -2,7 +2,7 @@
   import { Icon } from '@immich/ui';
   import { onDestroy, onMount, type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
-  import { getAccordionState } from './setting-accordion-state.svelte';
+  import { getAccordionState } from './SettingAccordionState.svelte';
 
   const accordionState = getAccordionState();
 
diff --git a/web/src/lib/components/shared-components/settings/setting-accordion-state.svelte b/web/src/lib/components/shared-components/settings/SettingAccordionState.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/settings/setting-accordion-state.svelte
rename to web/src/lib/components/shared-components/settings/SettingAccordionState.svelte
diff --git a/web/src/lib/components/shared-components/settings/setting-dropdown.svelte b/web/src/lib/components/shared-components/settings/SettingDropdown.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/settings/setting-dropdown.svelte
rename to web/src/lib/components/shared-components/settings/SettingDropdown.svelte
diff --git a/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts b/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
similarity index 95%
rename from web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
rename to web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
index a6b0140de4..d9c1eb98ce 100644
--- a/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
+++ b/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
@@ -1,7 +1,7 @@
 import { SettingInputFieldType } from '$lib/constants';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import SettingInputField from './setting-input-field.svelte';
+import SettingInputField from './SettingInputField.svelte';
 
 describe('SettingInputField component', () => {
   it('validates number input on blur', async () => {
diff --git a/web/src/lib/components/shared-components/settings/setting-input-field.svelte b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/settings/setting-input-field.svelte
rename to web/src/lib/components/shared-components/settings/SettingInputField.svelte
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.spec.ts b/web/src/lib/components/shared-components/settings/SettingSwitch.spec.ts
similarity index 93%
rename from web/src/lib/components/shared-components/settings/setting-switch.spec.ts
rename to web/src/lib/components/shared-components/settings/SettingSwitch.spec.ts
index 7bd657a3a4..5a84595060 100644
--- a/web/src/lib/components/shared-components/settings/setting-switch.spec.ts
+++ b/web/src/lib/components/shared-components/settings/SettingSwitch.spec.ts
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import SettingSwitch from './setting-switch.svelte';
+import SettingSwitch from './SettingSwitch.svelte';
 
 describe('SettingSwitch component', () => {
   it('links switch and subtitle ids on the switch', () => {
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.svelte b/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/settings/setting-switch.svelte
rename to web/src/lib/components/shared-components/settings/SettingSwitch.svelte
diff --git a/web/src/lib/components/shared-components/settings/settings-language-selector.svelte b/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
similarity index 95%
rename from web/src/lib/components/shared-components/settings/settings-language-selector.svelte
rename to web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
index d5e82fe7c8..269edb2204 100644
--- a/web/src/lib/components/shared-components/settings/settings-language-selector.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { invalidateAll } from '$app/navigation';
-  import Combobox from '$lib/components/shared-components/combobox.svelte';
+  import Combobox from '$lib/components/shared-components/Combobox.svelte';
   import { defaultLang } from '$lib/constants';
   import { lang } from '$lib/stores/preferences.store';
   import { getClosestAvailableLocale, langCodes, langs } from '$lib/utils/i18n';
diff --git a/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte b/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte
new file mode 100644
index 0000000000..561cbda0f2
--- /dev/null
+++ b/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import PurchaseInfo from './PurchaseInfo.svelte';
+  import ServerStatus from './ServerStatus.svelte';
+  import StorageSpace from './StorageSpace.svelte';
+</script>
+
+<div class="mt-auto">
+  <StorageSpace />
+</div>
+
+<PurchaseInfo />
+
+<div class="mb-6 mt-2">
+  <ServerStatus />
+</div>
diff --git a/web/src/lib/components/shared-components/side-bar/purchase-info.svelte b/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/side-bar/purchase-info.svelte
rename to web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
diff --git a/web/src/lib/components/shared-components/side-bar/recent-albums.spec.ts b/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
similarity index 97%
rename from web/src/lib/components/shared-components/side-bar/recent-albums.spec.ts
rename to web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
index 30b3336643..3aacdecc6f 100644
--- a/web/src/lib/components/shared-components/side-bar/recent-albums.spec.ts
+++ b/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
@@ -1,5 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
+import RecentAlbums from '$lib/components/shared-components/side-bar/RecentAlbums.svelte';
 import { albumFactory } from '@test-data/factories/album-factory';
 import { render, screen } from '@testing-library/svelte';
 import { tick } from 'svelte';
diff --git a/web/src/lib/components/shared-components/side-bar/recent-albums.svelte b/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/side-bar/recent-albums.svelte
rename to web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
diff --git a/web/src/lib/components/shared-components/side-bar/server-status.svelte b/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/side-bar/server-status.svelte
rename to web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
diff --git a/web/src/lib/components/shared-components/side-bar/storage-space.svelte b/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/side-bar/storage-space.svelte
rename to web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
diff --git a/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte b/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
similarity index 96%
rename from web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
rename to web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
index 0e90066073..8c142d68b1 100644
--- a/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
-  import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
-  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import BottomInfo from '$lib/components/shared-components/side-bar/BottomInfo.svelte';
+  import RecentAlbums from '$lib/components/shared-components/side-bar/RecentAlbums.svelte';
+  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
diff --git a/web/src/lib/components/shared-components/side-bar/bottom-info.svelte b/web/src/lib/components/shared-components/side-bar/bottom-info.svelte
deleted file mode 100644
index e82ba0bbdf..0000000000
--- a/web/src/lib/components/shared-components/side-bar/bottom-info.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import PurchaseInfo from './purchase-info.svelte';
-  import ServerStatus from './server-status.svelte';
-  import StorageSpace from './storage-space.svelte';
-</script>
-
-<div class="mt-auto">
-  <StorageSpace />
-</div>
-
-<PurchaseInfo />
-
-<div class="mb-6 mt-2">
-  <ServerStatus />
-</div>
diff --git a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte b/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/tree/breadcrumbs.svelte
rename to web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
diff --git a/web/src/lib/components/shared-components/tree/tree.svelte b/web/src/lib/components/shared-components/tree/Tree.svelte
similarity index 98%
rename from web/src/lib/components/shared-components/tree/tree.svelte
rename to web/src/lib/components/shared-components/tree/Tree.svelte
index ac87371bf9..8f58982790 100644
--- a/web/src/lib/components/shared-components/tree/tree.svelte
+++ b/web/src/lib/components/shared-components/tree/Tree.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
   import { TreeNode } from '$lib/utils/tree-utils';
   import { Icon } from '@immich/ui';
   import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte b/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
similarity index 100%
rename from web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
rename to web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
diff --git a/web/src/lib/components/shared-components/tree/tree-items.svelte b/web/src/lib/components/shared-components/tree/TreeItems.svelte
similarity index 88%
rename from web/src/lib/components/shared-components/tree/tree-items.svelte
rename to web/src/lib/components/shared-components/tree/TreeItems.svelte
index 9c2fb6638e..3952a32b52 100644
--- a/web/src/lib/components/shared-components/tree/tree-items.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeItems.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Tree from '$lib/components/shared-components/tree/tree.svelte';
+  import Tree from '$lib/components/shared-components/tree/Tree.svelte';
   import { type TreeNode } from '$lib/utils/tree-utils';
 
   interface Props {
diff --git a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
similarity index 89%
rename from web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
rename to web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
index 1e2533804c..21600ba045 100644
--- a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cleanClass } from '$lib';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
 
   interface Props {
     alt?: string;
diff --git a/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/NoCover.svelte
similarity index 100%
rename from web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
rename to web/src/lib/components/sharedlinks-page/covers/NoCover.svelte
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
similarity index 96%
rename from web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
rename to web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
index 1aecc73404..2362e23657 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
@@ -1,4 +1,4 @@
-import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
+import AssetCover from '$lib/components/sharedlinks-page/covers/AssetCover.svelte';
 import { render } from '@testing-library/svelte';
 
 describe('AssetCover component', () => {
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
similarity index 87%
rename from web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
rename to web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
index bb87c02135..2b3ec1be62 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
@@ -1,4 +1,4 @@
-import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+import NoCover from '$lib/components/sharedlinks-page/covers/NoCover.svelte';
 import { render } from '@testing-library/svelte';
 
 describe('NoCover component', () => {
diff --git a/web/src/lib/components/sidebar/sidebar.spec.ts b/web/src/lib/components/sidebar/Sidebar.spec.ts
similarity index 97%
rename from web/src/lib/components/sidebar/sidebar.spec.ts
rename to web/src/lib/components/sidebar/Sidebar.spec.ts
index 51bb13fc80..0cdd391881 100644
--- a/web/src/lib/components/sidebar/sidebar.spec.ts
+++ b/web/src/lib/components/sidebar/Sidebar.spec.ts
@@ -1,4 +1,4 @@
-import SideBarSection from '$lib/components/sidebar/sidebar.svelte';
+import SideBarSection from '$lib/components/sidebar/Sidebar.svelte';
 import { sidebarStore } from '$lib/stores/sidebar.svelte';
 import { render, screen } from '@testing-library/svelte';
 import { vi } from 'vitest';
diff --git a/web/src/lib/components/sidebar/sidebar.svelte b/web/src/lib/components/sidebar/Sidebar.svelte
similarity index 97%
rename from web/src/lib/components/sidebar/sidebar.svelte
rename to web/src/lib/components/sidebar/Sidebar.svelte
index 9630b6c024..f7376df8cb 100644
--- a/web/src/lib/components/sidebar/sidebar.svelte
+++ b/web/src/lib/components/sidebar/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { clickOutside } from '$lib/actions/click-outside';
   import { focusTrap } from '$lib/actions/focus-trap';
-  import { menuButtonId } from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+  import { menuButtonId } from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { onMount, type Snippet } from 'svelte';
diff --git a/web/src/lib/components/timeline/AssetSelectControlBar.svelte b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
index 07fd1688a9..49a3f26884 100644
--- a/web/src/lib/components/timeline/AssetSelectControlBar.svelte
+++ b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { mdiClose } from '@mdi/js';
   import type { Snippet } from 'svelte';
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index bcef9f3260..37dfc20e97 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
   import Month from '$lib/components/timeline/Month.svelte';
   import Scrubber from '$lib/components/timeline/Scrubber.svelte';
   import TimelineAssetViewer from '$lib/components/timeline/TimelineAssetViewer.svelte';
diff --git a/web/src/lib/components/timeline/TimelineAssetViewer.svelte b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
index 47144dcca9..8c2a84298b 100644
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
+  import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
   import { AssetAction } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
@@ -232,7 +232,7 @@
   });
 </script>
 
-{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+{#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
   <AssetViewer
     {withStacked}
     cursor={assetCursor}
diff --git a/web/src/lib/components/timeline/actions/ArchiveAction.svelte b/web/src/lib/components/timeline/actions/ArchiveAction.svelte
index 26545d5ccf..21e2bde574 100644
--- a/web/src/lib/components/timeline/actions/ArchiveAction.svelte
+++ b/web/src/lib/components/timeline/actions/ArchiveAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { OnArchive } from '$lib/utils/actions';
   import { archiveAssets } from '$lib/utils/asset-utils';
diff --git a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
index 7a312e3ec2..239d238a2e 100644
--- a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import AssetSelectionChangeDateModal from '$lib/modals/AssetSelectionChangeDateModal.svelte';
   import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util';
diff --git a/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte b/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
index 865da4f58e..f5c3985c60 100644
--- a/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
@@ -8,7 +8,7 @@
   import { modalManager } from '@immich/ui';
   import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '../../shared-components/context-menu/MenuOption.svelte';
 
   interface Props {
     menuItem?: boolean;
diff --git a/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte b/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
index 66545d43e2..8b59bc341b 100644
--- a/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
diff --git a/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte b/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
index 16fa72a75d..e62e52bba5 100644
--- a/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
+++ b/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
diff --git a/web/src/lib/components/timeline/actions/DownloadAction.svelte b/web/src/lib/components/timeline/actions/DownloadAction.svelte
index 0a9ab89df8..43916c2165 100644
--- a/web/src/lib/components/timeline/actions/DownloadAction.svelte
+++ b/web/src/lib/components/timeline/actions/DownloadAction.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
 
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleDownloadAsset } from '$lib/services/asset.service';
diff --git a/web/src/lib/components/timeline/actions/FavoriteAction.svelte b/web/src/lib/components/timeline/actions/FavoriteAction.svelte
index b60740d471..0cc861020d 100644
--- a/web/src/lib/components/timeline/actions/FavoriteAction.svelte
+++ b/web/src/lib/components/timeline/actions/FavoriteAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { OnFavorite } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte b/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
index 0a94b64963..9d91fc5c94 100644
--- a/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
+++ b/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
diff --git a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
index f25ecfb433..cc4766150b 100644
--- a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
+++ b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte b/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
index 3806dc5325..3a687a3a72 100644
--- a/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
+++ b/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { OnSetVisibility } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/lib/components/timeline/actions/StackAction.svelte b/web/src/lib/components/timeline/actions/StackAction.svelte
index 212b0f0355..be49ad5e50 100644
--- a/web/src/lib/components/timeline/actions/StackAction.svelte
+++ b/web/src/lib/components/timeline/actions/StackAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { OnStack, OnUnstack } from '$lib/utils/actions';
   import { deleteStack, stackAssets } from '$lib/utils/asset-utils';
diff --git a/web/src/lib/components/timeline/actions/TagAction.svelte b/web/src/lib/components/timeline/actions/TagAction.svelte
index e4887441e3..e70f24b490 100644
--- a/web/src/lib/components/timeline/actions/TagAction.svelte
+++ b/web/src/lib/components/timeline/actions/TagAction.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
   import { IconButton, modalManager } from '@immich/ui';
diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/DeviceCard.svelte
similarity index 100%
rename from web/src/lib/components/user-settings-page/device-card.svelte
rename to web/src/lib/components/user-settings-page/DeviceCard.svelte
diff --git a/web/src/lib/components/user-settings-page/user-api-key-grid.svelte b/web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte
similarity index 100%
rename from web/src/lib/components/user-settings-page/user-api-key-grid.svelte
rename to web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte
diff --git a/web/src/lib/elements/__test__/format-message.spec.ts b/web/src/lib/elements/__test__/FormatMessage.spec.ts
similarity index 98%
rename from web/src/lib/elements/__test__/format-message.spec.ts
rename to web/src/lib/elements/__test__/FormatMessage.spec.ts
index 3a5f665281..873d7c5bee 100644
--- a/web/src/lib/elements/__test__/format-message.spec.ts
+++ b/web/src/lib/elements/__test__/FormatMessage.spec.ts
@@ -1,4 +1,4 @@
-import FormatTagB from '$lib/elements/__test__/format-tag-b.svelte';
+import FormatTagB from '$lib/elements/__test__/FormatTagB.svelte';
 import FormatMessage from '$lib/elements/FormatMessage.svelte';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
diff --git a/web/src/lib/elements/__test__/format-tag-b.svelte b/web/src/lib/elements/__test__/FormatTagB.svelte
similarity index 100%
rename from web/src/lib/elements/__test__/format-tag-b.svelte
rename to web/src/lib/elements/__test__/FormatTagB.svelte
diff --git a/web/src/lib/elements/__test__/star-rating.spec.ts b/web/src/lib/elements/__test__/StarRating.spec.ts
similarity index 100%
rename from web/src/lib/elements/__test__/star-rating.spec.ts
rename to web/src/lib/elements/__test__/StarRating.spec.ts
diff --git a/web/src/lib/managers/edit/edit-manager.svelte.ts b/web/src/lib/managers/edit/edit-manager.svelte.ts
index 9eba741c36..5e33562cae 100644
--- a/web/src/lib/managers/edit/edit-manager.svelte.ts
+++ b/web/src/lib/managers/edit/edit-manager.svelte.ts
@@ -1,4 +1,4 @@
-import TransformTool from '$lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte';
+import TransformTool from '$lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte';
 import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { waitForWebsocketEvent } from '$lib/stores/websocket';
diff --git a/web/src/lib/modals/AlbumAddUsersModal.svelte b/web/src/lib/modals/AlbumAddUsersModal.svelte
index 8444978487..dbfda82da9 100644
--- a/web/src/lib/modals/AlbumAddUsersModal.svelte
+++ b/web/src/lib/modals/AlbumAddUsersModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { initInput } from '$lib/actions/focus';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import { handleAddUsersToAlbum } from '$lib/services/album.service';
   import { normalizeSearchString } from '$lib/utils/string-utils';
   import { searchUsers, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
diff --git a/web/src/lib/modals/AlbumEditModal.svelte b/web/src/lib/modals/AlbumEditModal.svelte
index be38c17db5..386bf93084 100644
--- a/web/src/lib/modals/AlbumEditModal.svelte
+++ b/web/src/lib/modals/AlbumEditModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
   import { handleUpdateAlbum } from '$lib/services/album.service';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { Field, FormModal, Input, Textarea } from '@immich/ui';
diff --git a/web/src/lib/modals/AlbumOptionsModal.svelte b/web/src/lib/modals/AlbumOptionsModal.svelte
index 80961969c5..b80097a6f3 100644
--- a/web/src/lib/modals/AlbumOptionsModal.svelte
+++ b/web/src/lib/modals/AlbumOptionsModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
+  import AlbumSharedLink from '$lib/components/album-page/AlbumSharedLink.svelte';
   import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import {
     getAlbumActions,
     handleRemoveUserFromAlbum,
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index ed0066f9f3..3456a9c192 100644
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@@ -12,8 +12,8 @@
   import { mdiKeyboardReturn } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import AlbumListItem from '../components/asset-viewer/album-list-item.svelte';
-  import NewAlbumListItem from '../components/shared-components/album-selection/new-album-list-item.svelte';
+  import AlbumListItem from '../components/asset-viewer/AlbumListItem.svelte';
+  import NewAlbumListItem from '../components/shared-components/album-selection/NewAlbumListItem.svelte';
 
   let albums: AlbumResponseDto[] = $state([]);
   let recentAlbums: AlbumResponseDto[] = $state([]);
diff --git a/web/src/lib/modals/AssetChangeDateModal.svelte b/web/src/lib/modals/AssetChangeDateModal.svelte
index fe9d1baf25..e35c7d3ac1 100644
--- a/web/src/lib/modals/AssetChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetChangeDateModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox from '$lib/components/shared-components/combobox.svelte';
+  import Combobox from '$lib/components/shared-components/Combobox.svelte';
   import DateInput from '$lib/elements/DateInput.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { getPreferredTimeZone, getTimezones, toIsoDate } from '$lib/modals/timezone-utils';
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index c4a1eb3587..a9eb6692e2 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox from '$lib/components/shared-components/combobox.svelte';
+  import Combobox from '$lib/components/shared-components/Combobox.svelte';
   import DateInput from '$lib/elements/DateInput.svelte';
   import DurationInput from '$lib/elements/DurationInput.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
diff --git a/web/src/lib/modals/AssetTagModal.svelte b/web/src/lib/modals/AssetTagModal.svelte
index 5097be51aa..4db551bac1 100644
--- a/web/src/lib/modals/AssetTagModal.svelte
+++ b/web/src/lib/modals/AssetTagModal.svelte
@@ -7,8 +7,8 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
-  import Combobox, { type ComboBoxOption } from '../components/shared-components/combobox.svelte';
-  import TagPill from '../components/shared-components/tag-pill.svelte';
+  import Combobox, { type ComboBoxOption } from '../components/shared-components/Combobox.svelte';
+  import TagPill from '../components/shared-components/TagPill.svelte';
 
   interface Props {
     onClose: (updated?: boolean) => void;
diff --git a/web/src/lib/modals/AvatarEditModal.svelte b/web/src/lib/modals/AvatarEditModal.svelte
index e1e1900d70..41e6cc4f37 100644
--- a/web/src/lib/modals/AvatarEditModal.svelte
+++ b/web/src/lib/modals/AvatarEditModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
diff --git a/web/src/lib/modals/GeolocationPointPickerModal.svelte b/web/src/lib/modals/GeolocationPointPickerModal.svelte
index e749f3f8d6..2d9fb5e7a2 100644
--- a/web/src/lib/modals/GeolocationPointPickerModal.svelte
+++ b/web/src/lib/modals/GeolocationPointPickerModal.svelte
@@ -2,8 +2,8 @@
   import { isDefined } from '$lib';
   import { clickOutside } from '$lib/actions/click-outside';
   import { listNavigation } from '$lib/actions/list-navigation';
-  import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
-  import type Map from '$lib/components/shared-components/map/map.svelte';
+  import CoordinatesInput from '$lib/components/shared-components/CoordinatesInput.svelte';
+  import type Map from '$lib/components/shared-components/map/Map.svelte';
   import { timeDebounceOnSearch, timeToLoadTheMap } from '$lib/constants';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { geolocationManager } from '$lib/managers/geolocation.manager.svelte';
@@ -183,7 +183,7 @@
 
       <span>{$t('pick_a_location')}</span>
       <div class="h-125 min-h-75 w-full z-0">
-        {#await import('$lib/components/shared-components/map/map.svelte')}
+        {#await import('$lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex items-center justify-center h-full w-full">
diff --git a/web/src/lib/modals/JobCreateModal.svelte b/web/src/lib/modals/JobCreateModal.svelte
index 3f171a70f5..c98400990f 100644
--- a/web/src/lib/modals/JobCreateModal.svelte
+++ b/web/src/lib/modals/JobCreateModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
   import { handleCreateJob } from '$lib/services/job.service';
   import { ManualJobName } from '@immich/sdk';
   import { FormModal } from '@immich/ui';
diff --git a/web/src/lib/modals/MapModal.svelte b/web/src/lib/modals/MapModal.svelte
index 6914762747..9a59fb72a9 100644
--- a/web/src/lib/modals/MapModal.svelte
+++ b/web/src/lib/modals/MapModal.svelte
@@ -17,7 +17,7 @@
   <ModalBody>
     <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
       <div class="h-[75vh] min-h-[300px] w-full">
-        {#await import('$lib/components/shared-components/map/map.svelte')}
+        {#await import('$lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex items-center justify-center h-full w-full">
diff --git a/web/src/lib/modals/PartnerSelectionModal.svelte b/web/src/lib/modals/PartnerSelectionModal.svelte
index f5e2dc63cf..17872dc721 100644
--- a/web/src/lib/modals/PartnerSelectionModal.svelte
+++ b/web/src/lib/modals/PartnerSelectionModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
   import { Button, ListButton, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
diff --git a/web/src/lib/modals/PeoplePickerModal.svelte b/web/src/lib/modals/PeoplePickerModal.svelte
index 66e98885a3..fa72e92af5 100644
--- a/web/src/lib/modals/PeoplePickerModal.svelte
+++ b/web/src/lib/modals/PeoplePickerModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
index 62cae0bed0..6bc2425eed 100644
--- a/web/src/lib/modals/PersonMergeSuggestionModal.svelte
+++ b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -6,7 +6,7 @@
   import { mdiArrowLeft, mdiCallMerge, mdiSwapHorizontal } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import ImageThumbnail from '../components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '../components/assets/thumbnail/ImageThumbnail.svelte';
 
   type Props = {
     personToMerge: PersonResponseDto;
diff --git a/web/src/lib/modals/ProfileImageCropperModal.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
index af725f0ef8..62ad075b75 100644
--- a/web/src/lib/modals/ProfileImageCropperModal.svelte
+++ b/web/src/lib/modals/ProfileImageCropperModal.svelte
@@ -6,7 +6,7 @@
   import domtoimage from 'dom-to-image';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import PhotoViewer from '../components/asset-viewer/photo-viewer.svelte';
+  import PhotoViewer from '../components/asset-viewer/PhotoViewer.svelte';
 
   interface Props {
     asset: AssetResponseDto;
diff --git a/web/src/lib/modals/PurchaseModal.svelte b/web/src/lib/modals/PurchaseModal.svelte
index eb1880c91b..3add62cc8e 100644
--- a/web/src/lib/modals/PurchaseModal.svelte
+++ b/web/src/lib/modals/PurchaseModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import PurchaseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
-  import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
+  import PurchaseActivationSuccess from '$lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
+  import PurchaseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
 
   import { Modal, ModalBody } from '@immich/ui';
 
diff --git a/web/src/lib/modals/QrCodeModal.svelte b/web/src/lib/modals/QrCodeModal.svelte
index c56fda801b..6bd1ad6b31 100644
--- a/web/src/lib/modals/QrCodeModal.svelte
+++ b/web/src/lib/modals/QrCodeModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import QRCode from '$lib/components/shared-components/qrcode.svelte';
+  import Qrcode from '$lib/components/shared-components/Qrcode.svelte';
   import { copyToClipboard } from '$lib/utils';
   import { HStack, IconButton, Input, Modal, ModalBody } from '@immich/ui';
   import { mdiContentCopy, mdiLink } from '@mdi/js';
@@ -20,7 +20,7 @@
   <ModalBody>
     <div class="w-full py-2 px-10">
       <div bind:clientWidth={modalWidth} class="w-full">
-        <QRCode {value} width={modalWidth} />
+        <Qrcode {value} width={modalWidth} />
       </div>
     </div>
     <HStack class="w-full pt-3" gap={1}>
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
index 8c9fca2f22..61dd12ba14 100644
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ b/web/src/lib/modals/SearchFilterModal.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import SearchCameraSection from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
-  import SearchDateSection from '$lib/components/shared-components/search-bar/search-date-section.svelte';
-  import SearchDisplaySection from '$lib/components/shared-components/search-bar/search-display-section.svelte';
-  import SearchLocationSection from '$lib/components/shared-components/search-bar/search-location-section.svelte';
-  import SearchMediaSection from '$lib/components/shared-components/search-bar/search-media-section.svelte';
-  import SearchPeopleSection from '$lib/components/shared-components/search-bar/search-people-section.svelte';
-  import SearchRatingsSection from '$lib/components/shared-components/search-bar/search-ratings-section.svelte';
-  import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
-  import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
+  import SearchCameraSection from '$lib/components/shared-components/search-bar/SearchCameraSection.svelte';
+  import SearchDateSection from '$lib/components/shared-components/search-bar/SearchDateSection.svelte';
+  import SearchDisplaySection from '$lib/components/shared-components/search-bar/SearchDisplaySection.svelte';
+  import SearchLocationSection from '$lib/components/shared-components/search-bar/SearchLocationSection.svelte';
+  import SearchMediaSection from '$lib/components/shared-components/search-bar/SearchMediaSection.svelte';
+  import SearchPeopleSection from '$lib/components/shared-components/search-bar/SearchPeopleSection.svelte';
+  import SearchRatingsSection from '$lib/components/shared-components/search-bar/SearchRatingsSection.svelte';
+  import SearchTagsSection from '$lib/components/shared-components/search-bar/SearchTagsSection.svelte';
+  import SearchTextSection from '$lib/components/shared-components/search-bar/SearchTextSection.svelte';
   import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { SearchFilter } from '$lib/types';
diff --git a/web/src/lib/modals/SlideshowSettingsModal.svelte b/web/src/lib/modals/SlideshowSettingsModal.svelte
index d4230f8bf4..b57d5c0584 100644
--- a/web/src/lib/modals/SlideshowSettingsModal.svelte
+++ b/web/src/lib/modals/SlideshowSettingsModal.svelte
@@ -10,7 +10,7 @@
     mdiShuffle,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import SettingDropdown from '../components/shared-components/settings/setting-dropdown.svelte';
+  import SettingDropdown from '../components/shared-components/settings/SettingDropdown.svelte';
   import { SlideshowLook, SlideshowNavigation, SlideshowState, slideshowStore } from '../stores/slideshow.store';
 
   const {
diff --git a/web/src/lib/modals/TagEditModal.svelte b/web/src/lib/modals/TagEditModal.svelte
index 14a137a16a..d1d4670644 100644
--- a/web/src/lib/modals/TagEditModal.svelte
+++ b/web/src/lib/modals/TagEditModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { handleUpdateTag } from '$lib/services/tag.service';
   import type { TreeNode } from '$lib/utils/tree-utils';
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index 3e71097096..3f724ef054 100644
--- a/web/src/routes/(user)/+layout.svelte
+++ b/web/src/routes/(user)/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import UploadCover from './drag-and-drop-upload-overlay.svelte';
+  import UploadCover from './DragAndDropUploadOverlay.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import type { Snippet } from 'svelte';
   interface Props {
diff --git a/web/src/routes/(user)/drag-and-drop-upload-overlay.svelte b/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
similarity index 100%
rename from web/src/routes/(user)/drag-and-drop-upload-overlay.svelte
rename to web/src/routes/(user)/DragAndDropUploadOverlay.svelte
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 193b871040..b61ea49c39 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { scrollMemory } from '$lib/actions/scroll-memory';
-  import AlbumsControls from './albums-controls.svelte';
-  import Albums from '$lib/components/album-page/albums-list.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import AlbumsControls from './AlbumsControls.svelte';
+  import Albums from '$lib/components/album-page/AlbumsList.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import GroupTab from '$lib/elements/GroupTab.svelte';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { Route } from '$lib/route';
diff --git a/web/src/routes/(user)/albums/albums-controls.svelte b/web/src/routes/(user)/albums/AlbumsControls.svelte
similarity index 100%
rename from web/src/routes/(user)/albums/albums-controls.svelte
rename to web/src/routes/(user)/albums/AlbumsControls.svelte
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 3f9b0b04dd..35078b06e4 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
   import { goto, invalidate, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import AlbumDescription from './album-description.svelte';
-  import AlbumMap from '$lib/components/album-page/album-map.svelte';
-  import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
-  import AlbumTitle from './album-title.svelte';
-  import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
-  import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
+  import AlbumDescription from './AlbumDescription.svelte';
+  import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
+  import AlbumSummary from '$lib/components/album-page/AlbumSummary.svelte';
+  import AlbumTitle from './AlbumTitle.svelte';
+  import ActivityStatus from '$lib/components/asset-viewer/ActivityStatus.svelte';
+  import ActivityViewer from '$lib/components/asset-viewer/ActivityViewer.svelte';
   import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-description.spec.ts b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.spec.ts
similarity index 92%
rename from web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-description.spec.ts
rename to web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.spec.ts
index 3f552fb340..1b6f724177 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-description.spec.ts
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.spec.ts
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import { describe } from 'vitest';
-import AlbumDescription from './album-description.svelte';
+import AlbumDescription from './AlbumDescription.svelte';
 
 describe('AlbumDescription component', () => {
   it('shows an AutogrowTextarea component when isOwned is true', () => {
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-description.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
similarity index 100%
rename from web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-description.svelte
rename to web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-title.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte
similarity index 100%
rename from web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/album-title.svelte
rename to web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c89b4b7892..45b59ed237 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
   import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
diff --git a/web/src/routes/(user)/buy/+page.svelte b/web/src/routes/(user)/buy/+page.svelte
index 581a31b2bd..712d4b3f30 100644
--- a/web/src/routes/(user)/buy/+page.svelte
+++ b/web/src/routes/(user)/buy/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
-  import LicenseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
-  import SupporterBadge from './supporter-badge.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
+  import LicenseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
+  import SupporterBadge from './SupporterBadge.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { Route } from '$lib/route';
   import { Alert, Container, Stack } from '@immich/ui';
diff --git a/web/src/routes/(user)/buy/supporter-badge.svelte b/web/src/routes/(user)/buy/SupporterBadge.svelte
similarity index 100%
rename from web/src/routes/(user)/buy/supporter-badge.svelte
rename to web/src/routes/(user)/buy/SupporterBadge.svelte
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 8452c52bcb..41ebd6b8ca 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
+  import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
   import { Route } from '$lib/route';
   import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 503f7d97b7..e601faae4f 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index e3369f168c..144abcd544 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { afterNavigate, goto, invalidateAll } from '$app/navigation';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
-  import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
-  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
-  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
+  import Breadcrumbs from '$lib/components/shared-components/tree/Breadcrumbs.svelte';
+  import TreeItemThumbnails from '$lib/components/shared-components/tree/TreeItemThumbnails.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
+  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index a01b47884c..dcaafe33d4 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
   import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 5a8391bb9a..0d356fdb5c 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import MapTimelinePanel from './MapTimelinePanel.svelte';
   import type { SelectionBBox } from '$lib/components/shared-components/map/types';
   import { timeToLoadTheMap } from '$lib/constants';
@@ -61,7 +61,7 @@
           isTimelinePanelVisible ? 'h-1/2 w-full pb-2 sm:h-full sm:w-2/3 sm:pe-2 sm:pb-0' : 'h-full w-full',
         ]}
       >
-        {#await import('$lib/components/shared-components/map/map.svelte')}
+        {#await import('$lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex items-center justify-center h-full w-full">
@@ -87,7 +87,7 @@
   </UserPageLayout>
   <Portal target="body">
     {#if assetViewerManager.isViewing}
-      {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+      {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
         <AssetViewer
           cursor={{ current: assetViewerManager.asset! }}
           showNavigation={false}
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
index c5105df97c..2a17c55c6d 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import type { SelectionBBox } from '$lib/components/shared-components/map/types';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
index f971ab60b6..a4d8f34c48 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import MemoryViewer from './memory-viewer.svelte';
+  import MemoryViewer from './MemoryViewer.svelte';
 </script>
 
 <MemoryViewer />
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-photo-viewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
similarity index 100%
rename from web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-photo-viewer.svelte
rename to web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-video-viewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
similarity index 100%
rename from web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-video-viewer.svelte
rename to web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-viewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
similarity index 98%
rename from web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-viewer.svelte
rename to web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
index 7c0693badb..cd415fc704 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/memory-viewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@@ -2,12 +2,12 @@
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcuts } from '$lib/actions/shortcut';
-  import MemoryPhotoViewer from './memory-photo-viewer.svelte';
-  import MemoryVideoViewer from './memory-video-viewer.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
+  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9a06fd5d5a..8126c88137 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index c6e445f7d8..eadc295773 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -3,11 +3,11 @@
   import { page } from '$app/stores';
   import { scrollMemory } from '$lib/actions/scroll-memory';
   import { shortcut } from '$lib/actions/shortcut';
-  import ManagePeopleVisibility from './manage-people-visibility.svelte';
-  import PeopleCard from './people-card.svelte';
-  import PeopleInfiniteScroll from './people-infinite-scroll.svelte';
-  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ManagePeopleVisibility from './ManagePeopleVisibility.svelte';
+  import PeopleCard from './PeopleCard.svelte';
+  import PeopleInfiniteScroll from './PeopleInfiniteScroll.svelte';
+  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { QueryParameter, SessionStorageKey } from '$lib/constants';
   import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
diff --git a/web/src/routes/(user)/people/manage-people-visibility.spec.ts b/web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts
similarity index 96%
rename from web/src/routes/(user)/people/manage-people-visibility.spec.ts
rename to web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts
index 9bead61162..4c2ca38176 100644
--- a/web/src/routes/(user)/people/manage-people-visibility.spec.ts
+++ b/web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts
@@ -3,7 +3,7 @@ import { personFactory } from '@test-data/factories/person-factory';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
-import ManagePeopleVisibilityWrapper from './manage-people-visibility.test-wrapper.svelte';
+import ManagePeopleVisibilityWrapper from './ManagePeopleVisibility.test-wrapper.svelte';
 
 describe('ManagePeopleVisibility component', () => {
   beforeEach(() => {
diff --git a/web/src/routes/(user)/people/manage-people-visibility.svelte b/web/src/routes/(user)/people/ManagePeopleVisibility.svelte
similarity index 97%
rename from web/src/routes/(user)/people/manage-people-visibility.svelte
rename to web/src/routes/(user)/people/ManagePeopleVisibility.svelte
index 13ebf102b0..1a6e6a8307 100644
--- a/web/src/routes/(user)/people/manage-people-visibility.svelte
+++ b/web/src/routes/(user)/people/ManagePeopleVisibility.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import PeopleInfiniteScroll from './people-infinite-scroll.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import PeopleInfiniteScroll from './PeopleInfiniteScroll.svelte';
   import { ToggleVisibility } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { getPeopleThumbnailUrl } from '$lib/utils';
diff --git a/web/src/routes/(user)/people/manage-people-visibility.test-wrapper.svelte b/web/src/routes/(user)/people/ManagePeopleVisibility.test-wrapper.svelte
similarity index 86%
rename from web/src/routes/(user)/people/manage-people-visibility.test-wrapper.svelte
rename to web/src/routes/(user)/people/ManagePeopleVisibility.test-wrapper.svelte
index 16619a2879..7e64f30b43 100644
--- a/web/src/routes/(user)/people/manage-people-visibility.test-wrapper.svelte
+++ b/web/src/routes/(user)/people/ManagePeopleVisibility.test-wrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { PersonResponseDto } from '@immich/sdk';
   import { TooltipProvider } from '@immich/ui';
-  import ManagePeopleVisibility from './manage-people-visibility.svelte';
+  import ManagePeopleVisibility from './ManagePeopleVisibility.svelte';
 
   interface Props {
     people: PersonResponseDto[];
diff --git a/web/src/routes/(user)/people/people-card.svelte b/web/src/routes/(user)/people/PeopleCard.svelte
similarity index 94%
rename from web/src/routes/(user)/people/people-card.svelte
rename to web/src/routes/(user)/people/PeopleCard.svelte
index ee4bc02fab..a9c81c7760 100644
--- a/web/src/routes/(user)/people/people-card.svelte
+++ b/web/src/routes/(user)/people/PeopleCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { focusOutside } from '$lib/actions/focus-outside';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import { Route } from '$lib/route';
   import { getPersonActions } from '$lib/services/person.service';
   import { getPeopleThumbnailUrl } from '$lib/utils';
@@ -16,8 +16,8 @@
     mdiHeartOutline,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
 
   type Props = {
     person: PersonResponseDto;
diff --git a/web/src/routes/(user)/people/people-infinite-scroll.svelte b/web/src/routes/(user)/people/PeopleInfiniteScroll.svelte
similarity index 100%
rename from web/src/routes/(user)/people/people-infinite-scroll.svelte
rename to web/src/routes/(user)/people/PeopleInfiniteScroll.svelte
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 67b6f3c1ac..7f0665fa6e 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -4,14 +4,14 @@
   import { clickOutside } from '$lib/actions/click-outside';
   import { listNavigation } from '$lib/actions/list-navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import EditNameInput from './edit-name-input.svelte';
-  import MergeFaceSelector from './merge-face-selector.svelte';
-  import UnMergeFaceSelector from './unmerge-face-selector.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import EditNameInput from './EditNameInput.svelte';
+  import MergeFaceSelector from './MergeFaceSelector.svelte';
+  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
@@ -517,7 +517,7 @@
 </header>
 
 {#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
-  <UnMergeFaceSelector
+  <UnmergeFaceSelector
     assetIds={assetMultiSelectManager.assets.map((a) => a.id)}
     personAssets={person}
     onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/edit-name-input.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
similarity index 89%
rename from web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/edit-name-input.svelte
rename to web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
index 5db57444e5..a51debcc03 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/edit-name-input.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     person: PersonResponseDto;
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/face-thumbnail.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
similarity index 95%
rename from web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/face-thumbnail.svelte
rename to web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
index 135b181be1..f3ec5d9d51 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/face-thumbnail.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { type PersonResponseDto } from '@immich/sdk';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     person: PersonResponseDto;
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/merge-face-selector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
similarity index 96%
rename from web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/merge-face-selector.svelte
rename to web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
index 37055b13cb..8539d7955f 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/merge-face-selector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
@@ -10,9 +10,9 @@
   import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import FaceThumbnail from './face-thumbnail.svelte';
-  import PeopleList from './people-list.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import FaceThumbnail from './FaceThumbnail.svelte';
+  import PeopleList from './PeopleList.svelte';
 
   interface Props {
     person: PersonResponseDto;
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/people-list.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
similarity index 93%
rename from web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/people-list.svelte
rename to web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
index 7a401fefa3..f884544647 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/people-list.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
   import { type PersonResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import FaceThumbnail from './face-thumbnail.svelte';
+  import FaceThumbnail from './FaceThumbnail.svelte';
   import { mdiSwapVertical } from '@mdi/js';
   import { IconButton } from '@immich/ui';
 
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/unmerge-face-selector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
similarity index 96%
rename from web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/unmerge-face-selector.svelte
rename to web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
index 90347c8898..4296ed7e5f 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/unmerge-face-selector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
@@ -14,9 +14,9 @@
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import FaceThumbnail from './face-thumbnail.svelte';
-  import PeopleList from './people-list.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import FaceThumbnail from './FaceThumbnail.svelte';
+  import PeopleList from './PeopleList.svelte';
 
   interface Props {
     assetIds: string[];
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index d8f4550693..29d6887999 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/places/+page.svelte b/web/src/routes/(user)/places/+page.svelte
index e4d6234763..55f841a3c2 100644
--- a/web/src/routes/(user)/places/+page.svelte
+++ b/web/src/routes/(user)/places/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import PlacesControls from './places-controls.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import PlacesControls from './PlacesControls.svelte';
   import type { PageData } from './$types';
   import { type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import { locale } from '$lib/stores/preferences.store';
-  import Places from './places-list.svelte';
+  import Places from './PlacesList.svelte';
   import { placesViewSettings } from '$lib/stores/preferences.store';
 
   interface Props {
diff --git a/web/src/routes/(user)/places/places-card-group.svelte b/web/src/routes/(user)/places/PlacesCardGroup.svelte
similarity index 100%
rename from web/src/routes/(user)/places/places-card-group.svelte
rename to web/src/routes/(user)/places/PlacesCardGroup.svelte
diff --git a/web/src/routes/(user)/places/places-controls.svelte b/web/src/routes/(user)/places/PlacesControls.svelte
similarity index 100%
rename from web/src/routes/(user)/places/places-controls.svelte
rename to web/src/routes/(user)/places/PlacesControls.svelte
diff --git a/web/src/routes/(user)/places/places-list.svelte b/web/src/routes/(user)/places/PlacesList.svelte
similarity index 98%
rename from web/src/routes/(user)/places/places-list.svelte
rename to web/src/routes/(user)/places/PlacesList.svelte
index f0b34eff70..725786bdc5 100644
--- a/web/src/routes/(user)/places/places-list.svelte
+++ b/web/src/routes/(user)/places/PlacesList.svelte
@@ -4,7 +4,7 @@
   import { type AssetResponseDto } from '@immich/sdk';
   import { mdiMapMarkerOff } from '@mdi/js';
   import { groupBy } from 'lodash-es';
-  import PlacesCardGroup from './places-card-group.svelte';
+  import PlacesCardGroup from './PlacesCardGroup.svelte';
 
   import { type PlacesGroup, getSelectedPlacesGroupOption } from '$lib/utils/places-utils';
   import { Icon } from '@immich/ui';
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9a306619e9..e0df412eb5 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -3,10 +3,10 @@
   import { page } from '$app/state';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/SearchBar.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
diff --git a/web/src/routes/(user)/shared-links/(list)/+layout.svelte b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
index 8f36b04c67..b4196c9dee 100644
--- a/web/src/routes/(user)/shared-links/(list)/+layout.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import SharedLinkCard from './SharedLinkCard.svelte';
   import { type SharedLinkTab } from '$lib/constants';
diff --git a/web/src/routes/(user)/shared-links/(list)/share-cover.spec.ts b/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
similarity index 98%
rename from web/src/routes/(user)/shared-links/(list)/share-cover.spec.ts
rename to web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
index 76ebcf860a..12882f6613 100644
--- a/web/src/routes/(user)/shared-links/(list)/share-cover.spec.ts
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
@@ -3,7 +3,7 @@ import { albumFactory } from '@test-data/factories/album-factory';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
 import { render, screen } from '@testing-library/svelte';
-import ShareCover from './share-cover.svelte';
+import ShareCover from './ShareCover.svelte';
 
 vi.mock('$lib/utils');
 
diff --git a/web/src/routes/(user)/shared-links/(list)/share-cover.svelte b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
similarity index 82%
rename from web/src/routes/(user)/shared-links/(list)/share-cover.svelte
rename to web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
index bf671b6a71..1e190909de 100644
--- a/web/src/routes/(user)/shared-links/(list)/share-cover.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
-  import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
-  import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+  import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
+  import AssetCover from '$lib/components/sharedlinks-page/covers/AssetCover.svelte';
+  import NoCover from '$lib/components/sharedlinks-page/covers/NoCover.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import type { SharedLinkResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
index 7262447894..e6618146cc 100644
--- a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ShareCover from './share-cover.svelte';
+  import ShareCover from './ShareCover.svelte';
   import { Route } from '$lib/route';
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index 5af948314d..855db69618 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import empty2Url from '$lib/assets/empty-2.svg';
-  import Albums from '$lib/components/album-page/albums-list.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import Albums from '$lib/components/album-page/AlbumsList.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import { Route } from '$lib/route';
   import { getAlbumsActions } from '$lib/services/album.service';
   import { getSharedLinksActions } from '$lib/services/shared-link.service';
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9381ed7232..554a7b82e5 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
-  import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
-  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
-  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import Breadcrumbs from '$lib/components/shared-components/tree/Breadcrumbs.svelte';
+  import TreeItemThumbnails from '$lib/components/shared-components/tree/TreeItemThumbnails.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
+  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 3f269875fa..3ca197c755 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import empty3Url from '$lib/assets/empty-3.svg';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
   import RestoreAssets from './RestoreAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index 1ce261af5b..9501e459f4 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import UserSettingsList from './user-settings-list.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserSettingsList from './UserSettingsList.svelte';
   import { getKeyboardActions } from '$lib/services/keyboard.service';
   import { Container } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/app-settings.svelte b/web/src/routes/(user)/user-settings/AppSettings.svelte
similarity index 96%
rename from web/src/routes/(user)/user-settings/app-settings.svelte
rename to web/src/routes/(user)/user-settings/AppSettings.svelte
index 49498da431..91049b5ea5 100644
--- a/web/src/routes/(user)/user-settings/app-settings.svelte
+++ b/web/src/routes/(user)/user-settings/AppSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
-  import SettingCombobox from './setting-combobox.svelte';
-  import SettingsLanguageSelector from '$lib/components/shared-components/settings/settings-language-selector.svelte';
+  import type { ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
+  import SettingCombobox from './SettingCombobox.svelte';
+  import SettingsLanguageSelector from '$lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
   import { fallbackLocale, locales } from '$lib/constants';
   import {
     alwaysLoadOriginalFile,
diff --git a/web/src/routes/(user)/user-settings/change-password-settings.svelte b/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/change-password-settings.svelte
rename to web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
diff --git a/web/src/routes/(user)/user-settings/device-list.svelte b/web/src/routes/(user)/user-settings/DeviceList.svelte
similarity index 97%
rename from web/src/routes/(user)/user-settings/device-list.svelte
rename to web/src/routes/(user)/user-settings/DeviceList.svelte
index 891452772a..738ef617bd 100644
--- a/web/src/routes/(user)/user-settings/device-list.svelte
+++ b/web/src/routes/(user)/user-settings/DeviceList.svelte
@@ -4,7 +4,7 @@
   import { Button, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
+  import DeviceCard from '$lib/components/user-settings-page/DeviceCard.svelte';
 
   interface Props {
     devices: SessionResponseDto[];
diff --git a/web/src/routes/(user)/user-settings/download-settings.svelte b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
similarity index 96%
rename from web/src/routes/(user)/user-settings/download-settings.svelte
rename to web/src/routes/(user)/user-settings/DownloadSettings.svelte
index 8626388e1f..2cad63ca11 100644
--- a/web/src/routes/(user)/user-settings/download-settings.svelte
+++ b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
diff --git a/web/src/routes/(user)/user-settings/feature-settings.svelte b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
similarity index 99%
rename from web/src/routes/(user)/user-settings/feature-settings.svelte
rename to web/src/routes/(user)/user-settings/FeatureSettings.svelte
index aab9d97179..c35029d61d 100644
--- a/web/src/routes/(user)/user-settings/feature-settings.svelte
+++ b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetOrder, updateMyPreferences } from '@immich/sdk';
diff --git a/web/src/routes/(user)/user-settings/notifications-settings.svelte b/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/notifications-settings.svelte
rename to web/src/routes/(user)/user-settings/NotificationsSettings.svelte
diff --git a/web/src/routes/(user)/user-settings/oauth-settings.svelte b/web/src/routes/(user)/user-settings/OauthSettings.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/oauth-settings.svelte
rename to web/src/routes/(user)/user-settings/OauthSettings.svelte
diff --git a/web/src/routes/(user)/user-settings/partner-settings.svelte b/web/src/routes/(user)/user-settings/PartnerSettings.svelte
similarity index 98%
rename from web/src/routes/(user)/user-settings/partner-settings.svelte
rename to web/src/routes/(user)/user-settings/PartnerSettings.svelte
index 8a2cfee162..ac485678d7 100644
--- a/web/src/routes/(user)/user-settings/partner-settings.svelte
+++ b/web/src/routes/(user)/user-settings/PartnerSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
   import PartnerSelectionModal from '$lib/modals/PartnerSelectionModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import {
diff --git a/web/src/routes/(user)/user-settings/setting-combobox.svelte b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
similarity index 97%
rename from web/src/routes/(user)/user-settings/setting-combobox.svelte
rename to web/src/routes/(user)/user-settings/SettingCombobox.svelte
index 29ea650df9..1e7a3e74d6 100644
--- a/web/src/routes/(user)/user-settings/setting-combobox.svelte
+++ b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
   import { Label, Text } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/user-api-key-list.svelte b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/user-api-key-list.svelte
rename to web/src/routes/(user)/user-settings/UserApiKeyList.svelte
diff --git a/web/src/routes/(user)/user-settings/user-profile-settings.svelte b/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/user-profile-settings.svelte
rename to web/src/routes/(user)/user-settings/UserProfileSettings.svelte
diff --git a/web/src/routes/(user)/user-settings/user-purchase-settings.svelte b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
similarity index 98%
rename from web/src/routes/(user)/user-settings/user-purchase-settings.svelte
rename to web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
index af34ca52c9..db2e2267e3 100644
--- a/web/src/routes/(user)/user-settings/user-purchase-settings.svelte
+++ b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
 
-  import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import PurchaseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { dateFormats } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
diff --git a/web/src/routes/(user)/user-settings/user-settings-list.svelte b/web/src/routes/(user)/user-settings/UserSettingsList.svelte
similarity index 83%
rename from web/src/routes/(user)/user-settings/user-settings-list.svelte
rename to web/src/routes/(user)/user-settings/UserSettingsList.svelte
index 835961a46d..c57e3e0870 100644
--- a/web/src/routes/(user)/user-settings/user-settings-list.svelte
+++ b/web/src/routes/(user)/user-settings/UserSettingsList.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import ChangePinCodeSettings from './PinCodeSettings.svelte';
-  import DownloadSettings from './download-settings.svelte';
-  import FeatureSettings from './feature-settings.svelte';
-  import NotificationsSettings from './notifications-settings.svelte';
-  import UserPurchaseSettings from './user-purchase-settings.svelte';
-  import UserUsageStatistic from './user-usage-statistic.svelte';
+  import DownloadSettings from './DownloadSettings.svelte';
+  import FeatureSettings from './FeatureSettings.svelte';
+  import NotificationsSettings from './NotificationsSettings.svelte';
+  import UserPurchaseSettings from './UserPurchaseSettings.svelte';
+  import UserUsageStatistic from './UserUsageStatistic.svelte';
   import { OpenQueryParam, QueryParameter } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { oauth } from '$lib/utils';
@@ -26,15 +26,15 @@
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import AppSettings from './app-settings.svelte';
-  import ChangePasswordSettings from './change-password-settings.svelte';
-  import DeviceList from './device-list.svelte';
-  import OAuthSettings from './oauth-settings.svelte';
-  import PartnerSettings from './partner-settings.svelte';
-  import UserApiKeyList from './user-api-key-list.svelte';
-  import UserProfileSettings from './user-profile-settings.svelte';
+  import SettingAccordionState from '$lib/components/shared-components/settings/SettingAccordionState.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import AppSettings from './AppSettings.svelte';
+  import ChangePasswordSettings from './ChangePasswordSettings.svelte';
+  import DeviceList from './DeviceList.svelte';
+  import OauthSettings from './OauthSettings.svelte';
+  import PartnerSettings from './PartnerSettings.svelte';
+  import UserApiKeyList from './UserApiKeyList.svelte';
+  import UserProfileSettings from './UserProfileSettings.svelte';
 
   interface Props {
     keys?: ApiKeyResponseDto[];
@@ -119,7 +119,7 @@
       subtitle={$t('manage_your_oauth_connection')}
       isOpen={oauthOpen || undefined}
     >
-      <OAuthSettings />
+      <OauthSettings />
     </SettingAccordion>
   {/if}
 
diff --git a/web/src/routes/(user)/user-settings/user-usage-statistic.svelte b/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
similarity index 100%
rename from web/src/routes/(user)/user-settings/user-usage-statistic.svelte
rename to web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
diff --git a/web/src/routes/(user)/utilities/+page.svelte b/web/src/routes/(user)/utilities/+page.svelte
index 3eb6470c6c..500ab35bf9 100644
--- a/web/src/routes/(user)/utilities/+page.svelte
+++ b/web/src/routes/(user)/utilities/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import type { PageData } from './$types';
-  import UtilitiesMenu from './utilities-menu.svelte';
+  import UtilitiesMenu from './UtilitiesMenu.svelte';
 
   interface Props {
     data: PageData;
diff --git a/web/src/routes/(user)/utilities/utilities-menu.svelte b/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
similarity index 100%
rename from web/src/routes/(user)/utilities/utilities-menu.svelte
rename to web/src/routes/(user)/utilities/UtilitiesMenu.svelte
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 4c348fefcc..6edc42009f 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -2,9 +2,9 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcuts } from '$lib/actions/shortcut';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import LinkToDocs from './LinkToDocs.svelte';
-  import DuplicatesCompareControl from './duplicates-compare-control.svelte';
+  import DuplicatesCompareControl from './DuplicatesCompareControl.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicate-asset.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
similarity index 99%
rename from web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicate-asset.svelte
rename to web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
index 59672b6bb3..68be58e0ae 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicate-asset.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
@@ -20,7 +20,7 @@
     mdiMapMarkerOutline,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import InfoRow from './info-row.svelte';
+  import InfoRow from './InfoRow.svelte';
 
   interface Props {
     assets: AssetResponseDto[];
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicates-compare-control.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
similarity index 97%
rename from web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicates-compare-control.svelte
rename to web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
index 063992f609..6b44e7b085 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/duplicates-compare-control.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import DuplicateAsset from './duplicate-asset.svelte';
+  import DuplicateAsset from './DuplicateAsset.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -167,7 +167,7 @@
 </div>
 
 {#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
         cursor={assetCursor}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/info-row.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
similarity index 100%
rename from web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/info-row.svelte
rename to web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index 7a577bd8cf..93e710df7f 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { isDefined } from '$lib';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c64f93202d..55bd648730 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import LargeAssetData from './large-asset-data.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import LargeAssetData from './LargeAssetData.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
@@ -69,7 +69,7 @@
 </UserPageLayout>
 
 {#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
         cursor={assetCursor}
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/large-asset-data.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
similarity index 95%
rename from web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/large-asset-data.svelte
rename to web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
index db1fe4615b..d151788c44 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/large-asset-data.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
   import { getFileSize } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AssetResponseDto } from '@immich/sdk';
diff --git a/web/src/routes/(user)/utilities/workflows/+page.svelte b/web/src/routes/(user)/utilities/workflows/+page.svelte
index 01d4418cff..0d89431638 100644
--- a/web/src/routes/(user)/utilities/workflows/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import emptyWorkflows from '$lib/assets/empty-workflows.svg';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import { Route } from '$lib/route';
   import {
     getWorkflowActions,
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
index 204a046593..2e81c5fea5 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { beforeNavigate, goto } from '$app/navigation';
   import { dragAndDrop } from '$lib/attachments/drag-and-drop.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import SchemaFormFields from './SchemaFormFields.svelte';
   import WorkflowCardConnector from './WorkflowCardConnector.svelte';
   import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 31726238f8..fb76883431 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,11 +2,11 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import { getPagesProvider, getSettingsProvider } from '$lib/commands';
-  import DownloadPanel from './download-panel.svelte';
+  import DownloadPanel from './DownloadPanel.svelte';
   import ErrorLayout from './ErrorLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import NavigationLoadingBar from './navigation-loading-bar.svelte';
-  import UploadPanel from './upload-panel.svelte';
+  import NavigationLoadingBar from './NavigationLoadingBar.svelte';
+  import UploadPanel from './UploadPanel.svelte';
   import VersionAnnouncement from './VersionAnnouncement.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
diff --git a/web/src/routes/download-panel.svelte b/web/src/routes/DownloadPanel.svelte
similarity index 100%
rename from web/src/routes/download-panel.svelte
rename to web/src/routes/DownloadPanel.svelte
diff --git a/web/src/routes/navigation-loading-bar.svelte b/web/src/routes/NavigationLoadingBar.svelte
similarity index 100%
rename from web/src/routes/navigation-loading-bar.svelte
rename to web/src/routes/NavigationLoadingBar.svelte
diff --git a/web/src/routes/upload-asset-preview.svelte b/web/src/routes/UploadAssetPreview.svelte
similarity index 100%
rename from web/src/routes/upload-asset-preview.svelte
rename to web/src/routes/UploadAssetPreview.svelte
diff --git a/web/src/routes/upload-panel.svelte b/web/src/routes/UploadPanel.svelte
similarity index 98%
rename from web/src/routes/upload-panel.svelte
rename to web/src/routes/UploadPanel.svelte
index 498410b815..e59257b3f0 100644
--- a/web/src/routes/upload-panel.svelte
+++ b/web/src/routes/UploadPanel.svelte
@@ -7,7 +7,7 @@
   import { t } from 'svelte-i18n';
   import { quartInOut } from 'svelte/easing';
   import { fade, scale } from 'svelte/transition';
-  import UploadAssetPreview from './upload-asset-preview.svelte';
+  import UploadAssetPreview from './UploadAssetPreview.svelte';
 
   let showDetail = $state(false);
   let showOptions = $state(false);
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte
index 5d6138fbac..793da2410e 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -2,7 +2,7 @@
   import { goto, invalidate } from '$app/navigation';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import { Route } from '$lib/route';
   import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
diff --git a/web/src/routes/admin/library-management/[id]/+layout.svelte b/web/src/routes/admin/library-management/[id]/+layout.svelte
index d615d948a6..26cec19340 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.svelte
+++ b/web/src/routes/admin/library-management/[id]/+layout.svelte
@@ -5,7 +5,7 @@
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import TableButton from '$lib/components/TableButton.svelte';
   import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
   import { Route } from '$lib/route';
diff --git a/web/src/routes/admin/maintenance/+page.svelte b/web/src/routes/admin/maintenance/+page.svelte
index 5b0181a372..cc2d4d4b17 100644
--- a/web/src/routes/admin/maintenance/+page.svelte
+++ b/web/src/routes/admin/maintenance/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import MaintenanceBackupsList from '$lib/components/maintenance/MaintenanceBackupsList.svelte';
-  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingAccordionState from '$lib/components/shared-components/settings/SettingAccordionState.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
   import { QueryParameter } from '$lib/constants';
   import { getMaintenanceAdminActions } from '$lib/services/maintenance.service';
   import { mdiRefresh } from '@mdi/js';
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index 6dbc73185d..a38282ec1e 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -18,8 +18,8 @@
   import TrashSettings from './TrashSettings.svelte';
   import UserSettings from './UserSettings.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingAccordionState from '$lib/components/shared-components/settings/SettingAccordionState.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
   import { QueryParameter } from '$lib/constants';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/AuthSettings.svelte b/web/src/routes/admin/system-settings/AuthSettings.svelte
index 774fb70aa5..e34639d601 100644
--- a/web/src/routes/admin/system-settings/AuthSettings.svelte
+++ b/web/src/routes/admin/system-settings/AuthSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
@@ -14,7 +14,7 @@
   import { mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import SettingSelect from './setting-select.svelte';
+  import SettingSelect from './SettingSelect.svelte';
 
   const disabled = $derived(featureFlagsManager.value.configFile);
   const config = $derived(systemConfigManager.value);
diff --git a/web/src/routes/admin/system-settings/BackupSettings.svelte b/web/src/routes/admin/system-settings/BackupSettings.svelte
index 69f0f1b245..644be2e32a 100644
--- a/web/src/routes/admin/system-settings/BackupSettings.svelte
+++ b/web/src/routes/admin/system-settings/BackupSettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from './setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSelect from './SettingSelect.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/FFmpegSettings.svelte b/web/src/routes/admin/system-settings/FFmpegSettings.svelte
index ac5c596b99..2fbc45ce2a 100644
--- a/web/src/routes/admin/system-settings/FFmpegSettings.svelte
+++ b/web/src/routes/admin/system-settings/FFmpegSettings.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingCheckboxes from './setting-checkboxes.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from './setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingCheckboxes from './SettingCheckboxes.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSelect from './SettingSelect.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
diff --git a/web/src/routes/admin/system-settings/ImageSettings.svelte b/web/src/routes/admin/system-settings/ImageSettings.svelte
index d22935082a..d7fd86e71a 100644
--- a/web/src/routes/admin/system-settings/ImageSettings.svelte
+++ b/web/src/routes/admin/system-settings/ImageSettings.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import SettingSelect from './setting-select.svelte';
+  import SettingSelect from './SettingSelect.svelte';
   import { Colorspace, ImageFormat } from '@immich/sdk';
   import { fade } from 'svelte/transition';
 
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/JobSettings.svelte b/web/src/routes/admin/system-settings/JobSettings.svelte
index 18bc9e7a4c..b18d134d81 100644
--- a/web/src/routes/admin/system-settings/JobSettings.svelte
+++ b/web/src/routes/admin/system-settings/JobSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/LibrarySettings.svelte b/web/src/routes/admin/system-settings/LibrarySettings.svelte
index 1bf59c29a6..d6773fe7ca 100644
--- a/web/src/routes/admin/system-settings/LibrarySettings.svelte
+++ b/web/src/routes/admin/system-settings/LibrarySettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from './setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSelect from './SettingSelect.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
diff --git a/web/src/routes/admin/system-settings/LoggingSettings.svelte b/web/src/routes/admin/system-settings/LoggingSettings.svelte
index 0d5f0c4e22..16158bacb4 100644
--- a/web/src/routes/admin/system-settings/LoggingSettings.svelte
+++ b/web/src/routes/admin/system-settings/LoggingSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSelect from './setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSelect from './SettingSelect.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { LogLevel } from '@immich/sdk';
diff --git a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
index 3544ddeb14..765398d735 100644
--- a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
+++ b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from './setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSelect from './SettingSelect.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
diff --git a/web/src/routes/admin/system-settings/MapSettings.svelte b/web/src/routes/admin/system-settings/MapSettings.svelte
index 5888c82611..07eb5292ae 100644
--- a/web/src/routes/admin/system-settings/MapSettings.svelte
+++ b/web/src/routes/admin/system-settings/MapSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
diff --git a/web/src/routes/admin/system-settings/MetadataSettings.svelte b/web/src/routes/admin/system-settings/MetadataSettings.svelte
index 0db36e0e82..d49292694f 100644
--- a/web/src/routes/admin/system-settings/MetadataSettings.svelte
+++ b/web/src/routes/admin/system-settings/MetadataSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte b/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
index 1e791c0b78..71d8424e2a 100644
--- a/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
+++ b/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte b/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
index 9647f0c7c3..1d5debe818 100644
--- a/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
+++ b/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/NotificationSettings.svelte b/web/src/routes/admin/system-settings/NotificationSettings.svelte
index 2b5f1da9fb..fd0d10ba30 100644
--- a/web/src/routes/admin/system-settings/NotificationSettings.svelte
+++ b/web/src/routes/admin/system-settings/NotificationSettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import TemplateSettings from './TemplateSettings.svelte';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/ServerSettings.svelte b/web/src/routes/admin/system-settings/ServerSettings.svelte
index 936c4f406e..4bf2236fb2 100644
--- a/web/src/routes/admin/system-settings/ServerSettings.svelte
+++ b/web/src/routes/admin/system-settings/ServerSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/setting-checkboxes.svelte b/web/src/routes/admin/system-settings/SettingCheckboxes.svelte
similarity index 100%
rename from web/src/routes/admin/system-settings/setting-checkboxes.svelte
rename to web/src/routes/admin/system-settings/SettingCheckboxes.svelte
diff --git a/web/src/routes/admin/system-settings/setting-select.svelte b/web/src/routes/admin/system-settings/SettingSelect.svelte
similarity index 100%
rename from web/src/routes/admin/system-settings/setting-select.svelte
rename to web/src/routes/admin/system-settings/SettingSelect.svelte
diff --git a/web/src/routes/admin/system-settings/setting-textarea.svelte b/web/src/routes/admin/system-settings/SettingTextarea.svelte
similarity index 100%
rename from web/src/routes/admin/system-settings/setting-textarea.svelte
rename to web/src/routes/admin/system-settings/SettingTextarea.svelte
diff --git a/web/src/routes/admin/system-settings/TemplateSettings.svelte b/web/src/routes/admin/system-settings/TemplateSettings.svelte
index b6420a4c47..55da30e266 100644
--- a/web/src/routes/admin/system-settings/TemplateSettings.svelte
+++ b/web/src/routes/admin/system-settings/TemplateSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingTextarea from './setting-textarea.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingTextarea from './SettingTextarea.svelte';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
diff --git a/web/src/routes/admin/system-settings/ThemeSettings.svelte b/web/src/routes/admin/system-settings/ThemeSettings.svelte
index a44d180615..7149825d0f 100644
--- a/web/src/routes/admin/system-settings/ThemeSettings.svelte
+++ b/web/src/routes/admin/system-settings/ThemeSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingTextarea from './setting-textarea.svelte';
+  import SettingTextarea from './SettingTextarea.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/system-settings/TrashSettings.svelte b/web/src/routes/admin/system-settings/TrashSettings.svelte
index 9e71d0abc1..6829d8487f 100644
--- a/web/src/routes/admin/system-settings/TrashSettings.svelte
+++ b/web/src/routes/admin/system-settings/TrashSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/admin/system-settings/UserSettings.svelte b/web/src/routes/admin/system-settings/UserSettings.svelte
index 23ea052b52..7ac33709ac 100644
--- a/web/src/routes/admin/system-settings/UserSettings.svelte
+++ b/web/src/routes/admin/system-settings/UserSettings.svelte
@@ -2,7 +2,7 @@
   import { fade } from 'svelte/transition';
 
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/admin/users/[id]/+layout.svelte b/web/src/routes/admin/users/[id]/+layout.svelte
index f9f1fbe2ee..cc5c4f19e0 100644
--- a/web/src/routes/admin/users/[id]/+layout.svelte
+++ b/web/src/routes/admin/users/[id]/+layout.svelte
@@ -4,8 +4,8 @@
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
+  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
+  import DeviceCard from '$lib/components/user-settings-page/DeviceCard.svelte';
   import FeatureSetting from './FeatureSetting.svelte';
   import { Route } from '$lib/route';
   import { getUserAdminActions } from '$lib/services/user-admin.service';
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 657f55e8f2..82279abeb1 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import OnboardingBackup from './onboarding-backup.svelte';
-  import OnboardingCard from './onboarding-card.svelte';
-  import OnboardingHello from './onboarding-hello.svelte';
-  import OnboardingLocale from './onboarding-language.svelte';
-  import OnboardingMobileApp from './onboarding-mobile-app.svelte';
-  import OnboardingServerPrivacy from './onboarding-server-privacy.svelte';
-  import OnboardingStorageTemplate from './onboarding-storage-template.svelte';
-  import OnboardingTheme from './onboarding-theme.svelte';
-  import OnboardingUserPrivacy from './onboarding-user-privacy.svelte';
+  import OnboardingBackup from './OnboardingBackup.svelte';
+  import OnboardingCard from './OnboardingCard.svelte';
+  import OnboardingHello from './OnboardingHello.svelte';
+  import OnboardingLocale from './OnboardingLanguage.svelte';
+  import OnboardingMobileApp from './OnboardingMobileApp.svelte';
+  import OnboardingServerPrivacy from './OnboardingServerPrivacy.svelte';
+  import OnboardingStorageTemplate from './OnboardingStorageTemplate.svelte';
+  import OnboardingTheme from './OnboardingTheme.svelte';
+  import OnboardingUserPrivacy from './OnboardingUserPrivacy.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
diff --git a/web/src/routes/auth/onboarding/onboarding-backup.svelte b/web/src/routes/auth/onboarding/OnboardingBackup.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-backup.svelte
rename to web/src/routes/auth/onboarding/OnboardingBackup.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-card.svelte b/web/src/routes/auth/onboarding/OnboardingCard.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-card.svelte
rename to web/src/routes/auth/onboarding/OnboardingCard.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-hello.svelte b/web/src/routes/auth/onboarding/OnboardingHello.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-hello.svelte
rename to web/src/routes/auth/onboarding/OnboardingHello.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-language.svelte b/web/src/routes/auth/onboarding/OnboardingLanguage.svelte
similarity index 82%
rename from web/src/routes/auth/onboarding/onboarding-language.svelte
rename to web/src/routes/auth/onboarding/OnboardingLanguage.svelte
index a37b026f13..97b2d641dd 100644
--- a/web/src/routes/auth/onboarding/onboarding-language.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingLanguage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingsLanguageSelector from '$lib/components/shared-components/settings/settings-language-selector.svelte';
+  import SettingsLanguageSelector from '$lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
   import { t } from 'svelte-i18n';
 </script>
 
diff --git a/web/src/routes/auth/onboarding/onboarding-mobile-app.svelte b/web/src/routes/auth/onboarding/OnboardingMobileApp.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-mobile-app.svelte
rename to web/src/routes/auth/onboarding/OnboardingMobileApp.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-server-privacy.svelte b/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
similarity index 96%
rename from web/src/routes/auth/onboarding/onboarding-server-privacy.svelte
rename to web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
index e1c4d9765d..3bae79b9a1 100644
--- a/web/src/routes/auth/onboarding/onboarding-server-privacy.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { handleSystemConfigSave } from '$lib/services/system-config.service';
   import { onDestroy } from 'svelte';
diff --git a/web/src/routes/auth/onboarding/onboarding-storage-template.svelte b/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-storage-template.svelte
rename to web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-theme.svelte b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
similarity index 100%
rename from web/src/routes/auth/onboarding/onboarding-theme.svelte
rename to web/src/routes/auth/onboarding/OnboardingTheme.svelte
diff --git a/web/src/routes/auth/onboarding/onboarding-user-privacy.svelte b/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
similarity index 96%
rename from web/src/routes/auth/onboarding/onboarding-user-privacy.svelte
rename to web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
index 9a04001dc6..600e6abeac 100644
--- a/web/src/routes/auth/onboarding/onboarding-user-privacy.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyPreferences } from '@immich/sdk';