diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
index 1a240a564..6f8ddce20 100644
--- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
+++ b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
@@ -2,8 +2,8 @@ import { ActionIcon, Space, createStyles } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useScreenLargerThan } from '../../../../hooks/useScreenLargerThan';
+import { useConfigContext } from '~/config/provider';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { MobileRibbonSidebarDrawer } from './MobileRibbonSidebarDrawer';
 
 export const MobileRibbons = () => {
diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx
index f943b3942..52bec9c64 100644
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx
@@ -1,9 +1,9 @@
 import { SelectItem } from '@mantine/core';
 import { ContextModalProps, closeModal } from '@mantine/modals';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { AppType } from '../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { AppType } from '~/types/app';
 import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { ChangePositionModal } from './ChangePositionModal';
 
diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
index 3214b95d2..5b19d3d52 100644
--- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
@@ -2,7 +2,7 @@ import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/co
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 
-import { useConfigContext } from '../../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 
 interface ChangePositionModalProps {
   initialX?: number;
diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
index 25236c79b..43a68101f 100644
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
@@ -1,8 +1,8 @@
 import { SelectItem } from '@mantine/core';
 import { ContextModalProps, closeModal } from '@mantine/modals';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
 import widgets from '../../../../widgets';
 import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
 import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
index 782cc047e..c447115d6 100644
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -13,9 +13,9 @@ import {
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { AppType } from '../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { AppType } from '~/types/app';
 import { DebouncedImage } from '../../../IconSelector/DebouncedImage';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab';
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
index 43a371a0a..3de8ebf46 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -4,8 +4,8 @@ import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useRef } from 'react';
 
-import { AppType } from '../../../../../../types/app';
-import { IconSelector } from '../../../../../IconSelector/IconSelector';
+import { AppType } from '~/types/app';
+import { IconSelector } from '~/components/IconSelector/IconSelector';
 
 interface AppearanceTabProps {
   form: UseFormReturnType<AppType, (values: AppType) => AppType>;
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
index 4395f0f9f..3280c6e15 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
@@ -2,7 +2,7 @@ import { Text, TextInput, Tooltip, Stack, Switch, Tabs, Group, useMantineTheme,
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+import { AppType } from '~/types/app';
 import { InfoCard } from '~/components/InfoCard/InfoCard'
 
 interface BehaviourTabProps {
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
index 82c875c71..16d8f6194 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
@@ -3,7 +3,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+import { AppType } from '~/types/app';
 import { EditAppModalTab } from '../type';
 
 interface GeneralTabProps {
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
index 9370dad18..31bfb1f69 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
@@ -16,7 +16,7 @@ import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../../types/app';
+import { AppIntegrationPropertyAccessabilityType } from '~/types/app';
 
 interface GenericSecretInputProps {
   label: string;
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
index 3e74032cc..82574b82a 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -11,7 +11,7 @@ import {
   IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
-} from '../../../../../../../../types/app';
+} from '~/types/app';
 
 interface IntegrationSelectorProps {
   form: UseFormReturnType<AppType, (item: AppType) => AppType>;
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
index f1da7d4c6..9e032ebbd 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -8,7 +8,7 @@ import {
   IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
-} from '../../../../../../../../types/app';
+} from '~/types/app';
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';
 
 interface IntegrationOptionsRendererProps {
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
index 38d2d84a7..5b7fa5bd1 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
@@ -3,7 +3,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+import { AppType } from '~/types/app';
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
 import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
 
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
index 50586bf5f..6b2aa809e 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -2,8 +2,8 @@ import { MultiSelect, Stack, Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 
-import { StatusCodes } from '../../../../../../tools/acceptableStatusCodes';
-import { AppType } from '../../../../../../types/app';
+import { StatusCodes } from '~/tools/acceptableStatusCodes';
+import { AppType } from '~/types/app';
 
 interface NetworkTabProps {
   form: UseFormReturnType<AppType, (values: AppType) => AppType>;
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
index 3f386ff14..9239e6c1d 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
@@ -7,10 +7,10 @@ import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-import { useConfigContext } from '../../../../../../config/provider';
-import { useConfigStore } from '../../../../../../config/store';
-import { openContextModalGeneric } from '../../../../../../tools/mantineModalManagerExtensions';
-import { AppType } from '../../../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
+import { AppType } from '~/types/app';
 import { CategoryEditModalInnerProps } from '../../../../Wrappers/Category/CategoryEditModal';
 import { useStyles } from '../Shared/styles';
 
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
index 5e6d5c18d..6a783ba12 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
@@ -4,9 +4,9 @@ import { Icon, IconChecks } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { v4 as uuidv4 } from 'uuid';
 
-import { useConfigContext } from '../../../../../../config/provider';
-import { useConfigStore } from '../../../../../../config/store';
-import { IWidget, IWidgetDefinition } from '../../../../../../widgets/widgets';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
 import { useEditModeStore } from '../../../../Views/useEditModeStore';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 
diff --git a/src/components/Dashboard/Tiles/Apps/AppMenu.tsx b/src/components/Dashboard/Tiles/Apps/AppMenu.tsx
index fea3a6e2c..ca95b35f7 100644
--- a/src/components/Dashboard/Tiles/Apps/AppMenu.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppMenu.tsx
@@ -1,7 +1,7 @@
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { AppType } from '../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
+import { AppType } from '~/types/app';
 import { GenericTileMenu } from '../GenericTileMenu';
 
 interface TileMenuProps {
diff --git a/src/components/Dashboard/Tiles/Apps/AppPing.tsx b/src/components/Dashboard/Tiles/Apps/AppPing.tsx
index 92789200d..bf5e89f03 100644
--- a/src/components/Dashboard/Tiles/Apps/AppPing.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppPing.tsx
@@ -6,8 +6,8 @@ import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { RouterOutputs, api } from '~/utils/api';
 
-import { useConfigContext } from '../../../../config/provider';
-import { AppType } from '../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { AppType } from '~/types/app';
 
 interface AppPingProps {
   app: AppType;
diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
index 2b592d9b9..4ec346b85 100644
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -3,7 +3,7 @@ import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 
-import { AppType } from '../../../../types/app';
+import { AppType } from '~/types/app';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
index 4271175ea..6984b84dc 100644
--- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx
+++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Menu } from '@mantine/core';
 import { IconLayoutKanban, IconPencil, IconSettings, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { useColorTheme } from '../../../tools/color';
+import { useColorTheme } from '~/tools/color';
 import { useEditModeStore } from '../Views/useEditModeStore';
 
 interface GenericTileMenuProps {
diff --git a/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx b/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx
index f2a537a6d..b97d6fbf9 100644
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx
@@ -4,7 +4,7 @@ import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
 
-import { IDraggableEditableListInputValue } from '../../../../../widgets/widgets';
+import { IDraggableEditableListInputValue } from '~/widgets/widgets';
 
 interface DraggableListProps {
   items: {
diff --git a/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx b/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
index 8df503e25..146fc3d5e 100644
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
@@ -4,7 +4,7 @@ import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, ReactNode, useEffect, useRef } from 'react';
 
-import { IDraggableListInputValue } from '../../../../../widgets/widgets';
+import { IDraggableListInputValue } from '~/widgets/widgets';
 
 const useStyles = createStyles((theme) => ({
   container: {
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index d068563c0..63e636a29 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -19,12 +19,12 @@ import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react'
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { mapObject } from '../../../../tools/client/objects';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { mapObject } from '~/tools/client/objects';
 import Widgets from '../../../../widgets';
-import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
-import { IWidget } from '../../../../widgets/widgets';
+import type { IDraggableListInputValue, IWidgetOptionValue } from '~/widgets/widgets';
+import { IWidget } from '~/widgets/widgets';
 import { InfoCard } from '../../../InfoCard/InfoCard';
 import { DraggableList } from './Inputs/DraggableList';
 import { LocationSelection } from './Inputs/LocationSelection';
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
index aa3015511..fecb60641 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -1,9 +1,9 @@
 import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
-import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
+import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
 import WidgetsDefinitions from '../../../../widgets';
-import { IWidget } from '../../../../widgets/widgets';
+import { IWidget } from '~/widgets/widgets';
 import { useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { GenericTileMenu } from '../GenericTileMenu';
 import { WidgetEditModalInnerProps } from './WidgetsEditModal';
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
index 0afedf520..ea66fb511 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
@@ -2,8 +2,8 @@ import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
 
 export type WidgetsRemoveModalInnerProps = {
   widgetId: string;
diff --git a/src/components/Dashboard/Views/DashboardView.tsx b/src/components/Dashboard/Views/DashboardView.tsx
index 244d1ff19..3c75e3dbd 100644
--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -1,11 +1,11 @@
 import { Group, Stack } from '@mantine/core';
 import { useEffect, useMemo, useRef } from 'react';
 
-import { useConfigContext } from '../../../config/provider';
-import { useResize } from '../../../hooks/use-resize';
-import { useScreenLargerThan } from '../../../hooks/useScreenLargerThan';
-import { CategoryType } from '../../../types/category';
-import { WrapperType } from '../../../types/wrapper';
+import { useConfigContext } from '~/config/provider';
+import { useResize } from '~/hooks/use-resize';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+import { CategoryType } from '~/types/category';
+import { WrapperType } from '~/types/wrapper';
 import { DashboardCategory } from '../Wrappers/Category/Category';
 import { DashboardSidebar } from '../Wrappers/Sidebar/Sidebar';
 import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
diff --git a/src/components/Dashboard/Views/ViewToggleButton.tsx b/src/components/Dashboard/Views/ViewToggleButton.tsx
index 28720955a..5502edcf9 100644
--- a/src/components/Dashboard/Views/ViewToggleButton.tsx
+++ b/src/components/Dashboard/Views/ViewToggleButton.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Button, Text, Tooltip } from '@mantine/core';
 import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { useScreenLargerThan } from '../../../hooks/useScreenLargerThan';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { useEditModeStore } from './useEditModeStore';
 
 export const ViewToggleButton = () => {
diff --git a/src/components/Dashboard/Wrappers/Category/Category.tsx b/src/components/Dashboard/Wrappers/Category/Category.tsx
index 0819c9b91..2e9acc908 100644
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/src/components/Dashboard/Wrappers/Category/Category.tsx
@@ -14,8 +14,8 @@ import { modals } from '@mantine/modals';
 import { IconDotsVertical, IconShare3 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { useConfigContext } from '../../../../config/provider';
-import { CategoryType } from '../../../../types/category';
+import { useConfigContext } from '~/config/provider';
+import { CategoryType } from '~/types/category';
 import { useCardStyles } from '../../../layout/Common/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { WrapperContent } from '../WrapperContent';
diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
index 2f5557088..258a42a3d 100644
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
@@ -9,8 +9,8 @@ import {
   IconTrash,
 } from '@tabler/icons-react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { CategoryType } from '../../../../types/category';
+import { useConfigContext } from '~/config/provider';
+import { CategoryType } from '~/types/category';
 import { useCategoryActions } from './useCategoryActions';
 import { useTranslation } from 'next-i18next';
 
diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
index a78fc0824..0ba775505 100644
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
@@ -3,9 +3,9 @@ import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { CategoryType } from '../../../../types/category';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { CategoryType } from '~/types/category';
 
 export type CategoryEditModalInnerProps = {
   category: CategoryType;
diff --git a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx b/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
index 418bb569d..e954a2c9a 100644
--- a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
+++ b/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
@@ -1,11 +1,11 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import { useConfigStore } from '../../../../config/store';
-import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { AppType } from '../../../../types/app';
-import { CategoryType } from '../../../../types/category';
-import { WrapperType } from '../../../../types/wrapper';
-import { IWidget } from '../../../../widgets/widgets';
+import { useConfigStore } from '~/config/store';
+import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
+import { AppType } from '~/types/app';
+import { CategoryType } from '~/types/category';
+import { WrapperType } from '~/types/wrapper';
+import { IWidget } from '~/widgets/widgets';
 import { CategoryEditModalInnerProps } from './CategoryEditModal';
 
 export const useCategoryActions = (configName: string | undefined, category: CategoryType) => {
diff --git a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
index c4cf1b0ff..71f88dd5b 100644
--- a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
+++ b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
@@ -1,4 +1,4 @@
-import { WrapperType } from '../../../../types/wrapper';
+import { WrapperType } from '~/types/wrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { WrapperContent } from '../WrapperContent';
 import { useGridstack } from '../gridstack/use-gridstack';
diff --git a/src/components/Dashboard/Wrappers/WrapperContent.tsx b/src/components/Dashboard/Wrappers/WrapperContent.tsx
index 754c8d993..5fc531ac5 100644
--- a/src/components/Dashboard/Wrappers/WrapperContent.tsx
+++ b/src/components/Dashboard/Wrappers/WrapperContent.tsx
@@ -1,10 +1,10 @@
 import { GridStack } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
 
-import { AppType } from '../../../types/app';
+import { AppType } from '~/types/app';
 import Widgets from '../../../widgets';
-import { WidgetWrapper } from '../../../widgets/WidgetWrapper';
-import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
+import { WidgetWrapper } from '~/widgets/WidgetWrapper';
+import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
 import { appTileDefinition } from '../Tiles/Apps/AppTile';
 import { GridstackTileWrapper } from '../Tiles/TileWrapper';
 import { useGridstackStore } from './gridstack/store';
diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
index c9b347783..763b9da05 100644
--- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
@@ -1,9 +1,9 @@
 import { GridItemHTMLElement, GridStack, GridStackNode } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
 
-import { AppType } from '../../../../types/app';
-import { ShapeType } from '../../../../types/shape';
-import { IWidget } from '../../../../widgets/widgets';
+import { AppType } from '~/types/app';
+import { ShapeType } from '~/types/shape';
+import { IWidget } from '~/widgets/widgets';
 
 export const initializeGridstack = (
   areaType: 'wrapper' | 'category' | 'sidebar',
diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx
index 4d6e041df..f02bc16b4 100644
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx
@@ -1,7 +1,7 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 
-import { useConfigContext } from '../../../../config/provider';
-import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints';
+import { useConfigContext } from '~/config/provider';
+import { GridstackBreakpoints } from '~/constants/gridstack-breakpoints';
 
 export const useGridstackStore = createWithEqualityFn<GridstackStoreType>(
   (set, get) => ({
diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
index d6f304798..994a5fbc8 100644
--- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
@@ -1,11 +1,11 @@
 import { GridStack, GridStackNode } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject, createRef, useEffect, useMemo, useRef } from 'react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { AppType } from '../../../../types/app';
-import { AreaType } from '../../../../types/area';
-import { IWidget } from '../../../../widgets/widgets';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { AppType } from '~/types/app';
+import { AreaType } from '~/types/area';
+import { IWidget } from '~/widgets/widgets';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { TileWithUnknownLocation, initializeGridstack } from './init-gridstack';
 import { useGridstackStore, useWrapperColumnCount } from './store';
diff --git a/src/components/IconSelector/IconSelector.tsx b/src/components/IconSelector/IconSelector.tsx
index 97a2448c0..e42c30018 100644
--- a/src/components/IconSelector/IconSelector.tsx
+++ b/src/components/IconSelector/IconSelector.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'next-i18next';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { api } from '~/utils/api';
 
-import { humanFileSize } from '../../tools/humanFileSize';
+import { humanFileSize } from '~/tools/humanFileSize';
 import { DebouncedImage } from './DebouncedImage';
 
 export const IconSelector = forwardRef(
diff --git a/src/components/User/Preferences/Language/LanguageSelect.tsx b/src/components/User/Preferences/Language/LanguageSelect.tsx
index 03f12e3d0..a0e269230 100644
--- a/src/components/User/Preferences/Language/LanguageSelect.tsx
+++ b/src/components/User/Preferences/Language/LanguageSelect.tsx
@@ -8,7 +8,7 @@ import { forwardRef, useState } from 'react';
 import { api } from '~/utils/api';
 
 import { COOKIE_LOCALE_KEY } from '../../../../../data/constants';
-import { Language, getLanguageByCode } from '../../../../tools/language';
+import { Language, getLanguageByCode } from '~/tools/language';
 
 export default function LanguageSelect() {
   const { data: sessionData } = useSession();
diff --git a/src/components/layout/Common/Logo.tsx b/src/components/layout/Common/Logo.tsx
index f57470864..07116361e 100644
--- a/src/components/layout/Common/Logo.tsx
+++ b/src/components/layout/Common/Logo.tsx
@@ -1,7 +1,7 @@
 import { Group, Image, Text } from '@mantine/core';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 import { usePrimaryGradient } from './useGradient';
 
 interface LogoProps {
diff --git a/src/components/layout/Common/useCardStyles.ts b/src/components/layout/Common/useCardStyles.ts
index d813b6bcc..f85d0e097 100644
--- a/src/components/layout/Common/useCardStyles.ts
+++ b/src/components/layout/Common/useCardStyles.ts
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/core';
 
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 
 export const useCardStyles = (isCategory: boolean) => {
   const { config } = useConfigContext();
diff --git a/src/components/layout/Common/useGradient.tsx b/src/components/layout/Common/useGradient.tsx
index 419e3bc1a..4ba667f1e 100644
--- a/src/components/layout/Common/useGradient.tsx
+++ b/src/components/layout/Common/useGradient.tsx
@@ -1,6 +1,6 @@
 import { MantineGradient } from '@mantine/core';
 
-import { useColorTheme } from '../../../tools/color';
+import { useColorTheme } from '~/tools/color';
 
 export const usePrimaryGradient = () => {
   const { primaryColor, secondaryColor } = useColorTheme();
diff --git a/src/components/layout/Meta/BoardHeadOverride.tsx b/src/components/layout/Meta/BoardHeadOverride.tsx
index aa631c91a..7009489dc 100644
--- a/src/components/layout/Meta/BoardHeadOverride.tsx
+++ b/src/components/layout/Meta/BoardHeadOverride.tsx
@@ -2,7 +2,7 @@ import Head from 'next/head';
 import React from 'react';
 import { firstUpperCase } from '~/tools/shared/strings';
 
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 
 export const BoardHeadOverride = () => {
   const { config, name } = useConfigContext();
diff --git a/src/components/layout/header/About/AboutModal.tsx b/src/components/layout/header/About/AboutModal.tsx
index 891897d35..8455b5179 100644
--- a/src/components/layout/header/About/AboutModal.tsx
+++ b/src/components/layout/header/About/AboutModal.tsx
@@ -32,10 +32,10 @@ import { Trans, i18n, useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
-import { useColorTheme } from '../../../../tools/color';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
+import { useColorTheme } from '~/tools/color';
 import { usePrimaryGradient } from '../../Common/useGradient';
 import Credits from './Credits';
 import Tip from './Tip';
diff --git a/src/components/layout/header/About/Credits.tsx b/src/components/layout/header/About/Credits.tsx
index e71311f91..61e437d29 100644
--- a/src/components/layout/header/About/Credits.tsx
+++ b/src/components/layout/header/About/Credits.tsx
@@ -2,7 +2,7 @@ import { Anchor, Box, Collapse, Flex, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 
-import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 export default function Credits() {
   const { t } = useTranslation('settings/common');
diff --git a/src/config/init.ts b/src/config/init.ts
index e078332ed..05af7e514 100644
--- a/src/config/init.ts
+++ b/src/config/init.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { ConfigType } from '../types/config';
+import { ConfigType } from '~/types/config';
 import { useConfigContext } from './provider';
 import { useConfigStore } from './store';
 
diff --git a/src/config/provider.tsx b/src/config/provider.tsx
index e41c96cd9..f6c3af58c 100644
--- a/src/config/provider.tsx
+++ b/src/config/provider.tsx
@@ -1,8 +1,8 @@
 import { ReactNode, createContext, useContext, useEffect, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { useColorTheme } from '../tools/color';
-import { ConfigType } from '../types/config';
+import { useColorTheme } from '~/tools/color';
+import { ConfigType } from '~/types/config';
 import { useConfigStore } from './store';
 
 export type ConfigContextType = {
diff --git a/src/config/store.ts b/src/config/store.ts
index 9267dbae2..e03bbfe69 100644
--- a/src/config/store.ts
+++ b/src/config/store.ts
@@ -1,7 +1,7 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { trcpProxyClient } from '~/utils/api';
 
-import { ConfigType } from '../types/config';
+import { ConfigType } from '~/types/config';
 
 export const useConfigStore = createWithEqualityFn<UseConfigStoreType>(
   (set, get) => ({
diff --git a/src/modules/Docker/DockerModule.tsx b/src/modules/Docker/DockerModule.tsx
index db459f7b7..513e364d9 100644
--- a/src/modules/Docker/DockerModule.tsx
+++ b/src/modules/Docker/DockerModule.tsx
@@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { api } from '~/utils/api';
 
-import { useCardStyles } from '../../components/layout/Common/useCardStyles';
-import { useConfigContext } from '../../config/provider';
+import { useCardStyles } from '~/components/layout/Common/useCardStyles';
+import { useConfigContext } from '~/config/provider';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
 
diff --git a/src/modules/Docker/DockerTable.tsx b/src/modules/Docker/DockerTable.tsx
index 998163440..f51e1e00c 100644
--- a/src/modules/Docker/DockerTable.tsx
+++ b/src/modules/Docker/DockerTable.tsx
@@ -14,7 +14,7 @@ import Dockerode, { ContainerInfo } from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({
diff --git a/src/modules/common/MediaDisplay.tsx b/src/modules/common/MediaDisplay.tsx
index e191286d6..b873455c5 100644
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -3,8 +3,8 @@ import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons-re
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { useConfigContext } from '../../config/provider';
-import { useColorTheme } from '../../tools/color';
+import { useConfigContext } from '~/config/provider';
+import { useColorTheme } from '~/tools/color';
 import { RequestModal } from '../overseerr/RequestModal';
 import { Result } from '../overseerr/SearchResult';
 
diff --git a/src/modules/overseerr/RequestModal.tsx b/src/modules/overseerr/RequestModal.tsx
index eeae9a931..d1c2097ef 100644
--- a/src/modules/overseerr/RequestModal.tsx
+++ b/src/modules/overseerr/RequestModal.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react';
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
 
-import { useColorTheme } from '../../tools/color';
+import { useColorTheme } from '~/tools/color';
 import { MovieResult } from './Movie.d';
 import { Result } from './SearchResult';
 import { TvShowResult, TvShowResultSeason } from './TvShow.d';
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index d703aad43..c6cb0b8e7 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import pageNotFoundImage from '~/images/undraw_page_not_found_re_e9o6.svg';
 import { pageNotFoundNamespaces } from '~/tools/server/translation-namespaces';
 
-import { getServerSideTranslations } from '../tools/server/getServerSideTranslations';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 
 export default function Custom404() {
   const { classes } = useStyles();
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f660bb395..fe469d254 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -26,15 +26,15 @@ import { colorSchemeParser } from '~/validations/user';
 
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
-import { ConfigProvider } from '../config/provider';
+import { ConfigProvider } from '~/config/provider';
 import '../styles/global.scss';
-import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
-import { ColorTheme } from '../tools/color';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
+import { ColorTheme } from '~/tools/color';
 import {
   ServerSidePackageAttributesType,
   getServiceSidePackageAttributes,
-} from '../tools/server/getPackageVersion';
-import { theme } from '../tools/server/theme/theme';
+} from '~/tools/server/getPackageVersion';
+import { theme } from '~/tools/server/theme/theme';
 
 dayjs.extend(locale);
 dayjs.extend(utc);
diff --git a/src/server/api/routers/config.ts b/src/server/api/routers/config.ts
index 93724bca6..8a8cd1b67 100644
--- a/src/server/api/routers/config.ts
+++ b/src/server/api/routers/config.ts
@@ -10,7 +10,7 @@ import { BackendConfigType, ConfigType } from '~/types/config';
 import { boardCustomizationSchema } from '~/validations/boards';
 import { IRssWidget } from '~/widgets/rss/RssWidgetTile';
 
-import { getConfig } from '../../../tools/config/getConfig';
+import { getConfig } from '~/tools/config/getConfig';
 import { adminProcedure, createTRPCRouter, publicProcedure } from '../trpc';
 
 const configNameSchema = z.string().regex(/^[a-zA-Z0-9-_]+$/);
diff --git a/src/tools/client/app-properties.ts b/src/tools/client/app-properties.ts
index 9d6a1731d..ee18d63ba 100644
--- a/src/tools/client/app-properties.ts
+++ b/src/tools/client/app-properties.ts
@@ -1,4 +1,4 @@
-import { ConfigAppType, IntegrationField, IntegrationType } from '../../types/app';
+import { ConfigAppType, IntegrationField, IntegrationType } from '~/types/app';
 
 export const findAppProperty = (app: ConfigAppType, key: IntegrationField) =>
   app.integration?.properties.find((prop) => prop.field === key)?.value ?? '';
diff --git a/src/tools/config/getConfig.ts b/src/tools/config/getConfig.ts
index 6bee0db4a..1866a5480 100644
--- a/src/tools/config/getConfig.ts
+++ b/src/tools/config/getConfig.ts
@@ -1,7 +1,7 @@
 import Consola from 'consola';
 import { v4 as uuidv4 } from 'uuid';
 
-import { BackendConfigType, ConfigType } from '../../types/config';
+import { BackendConfigType, ConfigType } from '~/types/config';
 import { configExists } from './configExists';
 import { getFallbackConfig } from './getFallbackConfig';
 import { readConfig } from './readConfig';
diff --git a/src/tools/config/getFrontendConfig.ts b/src/tools/config/getFrontendConfig.ts
index 1266da585..d67f62901 100644
--- a/src/tools/config/getFrontendConfig.ts
+++ b/src/tools/config/getFrontendConfig.ts
@@ -3,7 +3,7 @@ import fs from 'fs';
 import { fetchCity } from '~/server/api/routers/weather';
 import { IntegrationField } from '~/types/app';
 
-import { BackendConfigType, ConfigType } from '../../types/config';
+import { BackendConfigType, ConfigType } from '~/types/config';
 import { getConfig } from './getConfig';
 
 export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
diff --git a/src/tools/config/writeConfig.ts b/src/tools/config/writeConfig.ts
index f5bb8ede4..0c1fcffe6 100644
--- a/src/tools/config/writeConfig.ts
+++ b/src/tools/config/writeConfig.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
 
-import { BackendConfigType } from '../../types/config';
+import { BackendConfigType } from '~/types/config';
 import { generateConfigPath } from './generateConfigPath';
 
 export function writeConfig(config: BackendConfigType) {
diff --git a/src/tools/server/sdk/adGuard/adGuard.ts b/src/tools/server/sdk/adGuard/adGuard.ts
index 38a05102c..02afc360e 100644
--- a/src/tools/server/sdk/adGuard/adGuard.ts
+++ b/src/tools/server/sdk/adGuard/adGuard.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { trimStringEnding } from '../../../shared/strings';
+import { trimStringEnding } from '~/tools/shared/strings';
 import {
   adGuardApiFilteringStatusSchema,
   adGuardApiStatsResponseSchema,
diff --git a/src/tools/server/sdk/pihole/piHole.ts b/src/tools/server/sdk/pihole/piHole.ts
index 13ffd2b35..8d611a773 100644
--- a/src/tools/server/sdk/pihole/piHole.ts
+++ b/src/tools/server/sdk/pihole/piHole.ts
@@ -1,4 +1,4 @@
-import { trimStringEnding } from '../../../shared/strings';
+import { trimStringEnding } from '~/tools/shared/strings';
 import { PiHoleApiStatusChangeResponse, PiHoleApiSummaryResponse } from './piHole.type';
 
 export class PiHoleClient {
diff --git a/src/tools/server/sdk/plex/plexClient.ts b/src/tools/server/sdk/plex/plexClient.ts
index f6bff9565..e7ecc2f83 100644
--- a/src/tools/server/sdk/plex/plexClient.ts
+++ b/src/tools/server/sdk/plex/plexClient.ts
@@ -3,7 +3,7 @@ import { Element, xml2js } from 'xml-js';
 import {
   GenericCurrentlyPlaying,
   GenericSessionInfo,
-} from '../../../../types/api/media-server/session-info';
+} from '~/types/api/media-server/session-info';
 
 export class PlexClient {
   constructor(
diff --git a/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts b/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts
index 2e8cd657b..7f4d7187d 100644
--- a/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts
+++ b/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts
@@ -1,6 +1,6 @@
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 
-import { UsenetQueueItem } from '../../../../widgets/useNet/types';
+import { UsenetQueueItem } from '~/widgets/useNet/types';
 
 export type NormalizedDownloadQueueResponse = {
   apps: NormalizedDownloadAppStat[];
diff --git a/src/types/config.ts b/src/types/config.ts
index 5392ca1e2..597d24035 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -1,4 +1,4 @@
-import { IWidget } from '../widgets/widgets';
+import { IWidget } from '~/widgets/widgets';
 import { AppType, ConfigAppType } from './app';
 import { CategoryType } from './category';
 import { SettingsType } from './settings';
diff --git a/src/widgets/WidgetWrapper.tsx b/src/widgets/WidgetWrapper.tsx
index 3d3b1214c..ec613edad 100644
--- a/src/widgets/WidgetWrapper.tsx
+++ b/src/widgets/WidgetWrapper.tsx
@@ -1,8 +1,8 @@
 import { ComponentType } from 'react';
 
 import Widgets from '.';
-import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper';
-import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { HomarrCardWrapper } from '~/components/Dashboard/Tiles/HomarrCardWrapper';
+import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import ErrorBoundary from './boundary';
 import { IWidget } from './widgets';
 
diff --git a/src/widgets/bookmark/BookmarkWidgetTile.tsx b/src/widgets/bookmark/BookmarkWidgetTile.tsx
index 6969bc18d..2b74ef1a0 100644
--- a/src/widgets/bookmark/BookmarkWidgetTile.tsx
+++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx
@@ -31,8 +31,8 @@ import { v4 } from 'uuid';
 import { z } from 'zod';
 import React from 'react';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { IconSelector } from '../../components/IconSelector/IconSelector';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { IconSelector } from '~/components/IconSelector/IconSelector';
 import { defineWidget } from '../helper';
 import { IDraggableEditableListInputValue, IWidget } from '../widgets';
 
diff --git a/src/widgets/boundary.tsx b/src/widgets/boundary.tsx
index 79dec0aa5..c023291fc 100644
--- a/src/widgets/boundary.tsx
+++ b/src/widgets/boundary.tsx
@@ -5,7 +5,7 @@ import Consola from 'consola';
 import { withTranslation } from 'next-i18next';
 import React, { ReactNode } from 'react';
 
-import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { IWidget } from './widgets';
 
 type ErrorBoundaryState = {
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx
index df7566e85..55bc6d44e 100644
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/src/widgets/calendar/CalendarTile.tsx
@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
 import { RouterOutputs, api } from '~/utils/api';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';
diff --git a/src/widgets/calendar/MediaList.tsx b/src/widgets/calendar/MediaList.tsx
index 89d0950cc..359ac72e5 100644
--- a/src/widgets/calendar/MediaList.tsx
+++ b/src/widgets/calendar/MediaList.tsx
@@ -7,7 +7,7 @@ import {
   RadarrMediaDisplay,
   ReadarrMediaDisplay,
   SonarrMediaDisplay,
-} from '../../modules/common';
+} from '~/modules/common';
 import { MediasType } from './type';
 
 interface MediaListProps {
diff --git a/src/widgets/calendar/bg-calculator.ts b/src/widgets/calendar/bg-calculator.ts
index 690780d37..58040e641 100644
--- a/src/widgets/calendar/bg-calculator.ts
+++ b/src/widgets/calendar/bg-calculator.ts
@@ -1,6 +1,6 @@
 import { ColorScheme, useMantineTheme } from '@mantine/core';
 
-import { isToday } from '../../tools/shared/time/date.tool';
+import { isToday } from '~/tools/shared/time/date.tool';
 
 export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {
   if (!isToday(date)) {
diff --git a/src/widgets/dashDot/DashDotCompactNetwork.tsx b/src/widgets/dashDot/DashDotCompactNetwork.tsx
index eceda48ae..55b313b5c 100644
--- a/src/widgets/dashDot/DashDotCompactNetwork.tsx
+++ b/src/widgets/dashDot/DashDotCompactNetwork.tsx
@@ -3,7 +3,7 @@ import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { RouterOutputs } from '~/utils/api';
 
-import { bytes } from '../../tools/bytesHelper';
+import { bytes } from '~/tools/bytesHelper';
 
 interface DashDotCompactNetworkProps {
   info: DashDotInfo;
diff --git a/src/widgets/dashDot/DashDotCompactStorage.tsx b/src/widgets/dashDot/DashDotCompactStorage.tsx
index 25c8b3430..fa82c71f5 100644
--- a/src/widgets/dashDot/DashDotCompactStorage.tsx
+++ b/src/widgets/dashDot/DashDotCompactStorage.tsx
@@ -2,8 +2,8 @@ import { Group, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
 
-import { bytes } from '../../tools/bytesHelper';
-import { percentage } from '../../tools/shared/math/percentage.tool';
+import { bytes } from '~/tools/bytesHelper';
+import { percentage } from '~/tools/shared/math/percentage.tool';
 import { DashDotInfo } from './DashDotCompactNetwork';
 
 interface DashDotCompactStorageProps {
diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx
index b72873f28..1b3ce6f77 100644
--- a/src/widgets/date/DateTile.tsx
+++ b/src/widgets/date/DateTile.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
 import { api } from '~/utils/api';
 
-import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
+import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
diff --git a/src/widgets/dnshole/DnsHoleControls.tsx b/src/widgets/dnshole/DnsHoleControls.tsx
index 0d7444a46..226c8fd77 100644
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -5,7 +5,7 @@ import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
 
-import { useConfigContext } from '../../config/provider';
+import { useConfigContext } from '~/config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
diff --git a/src/widgets/dnshole/DnsHoleSummary.tsx b/src/widgets/dnshole/DnsHoleSummary.tsx
index 9b25e5efd..8211f65f1 100644
--- a/src/widgets/dnshole/DnsHoleSummary.tsx
+++ b/src/widgets/dnshole/DnsHoleSummary.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
 import { RouterOutputs, api } from '~/utils/api';
 
-import { formatNumber, formatPercentage } from '../../tools/client/math';
+import { formatNumber, formatPercentage } from '~/tools/client/math';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
diff --git a/src/widgets/download-speed/Tile.tsx b/src/widgets/download-speed/Tile.tsx
index 83d568e18..8eea57ea0 100644
--- a/src/widgets/download-speed/Tile.tsx
+++ b/src/widgets/download-speed/Tile.tsx
@@ -16,15 +16,15 @@ import { IconDownload, IconUpload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { useConfigContext } from '../../config/provider';
+import { AppAvatar } from '~/components/AppAvatar';
+import { useConfigContext } from '~/config/provider';
 import { useGetDownloadClientsQueue } from './useGetNetworkSpeed';
-import { useColorTheme } from '../../tools/color';
-import { humanFileSize } from '../../tools/humanFileSize';
+import { useColorTheme } from '~/tools/color';
+import { humanFileSize } from '~/tools/humanFileSize';
 import {
   NormalizedDownloadQueueResponse,
   TorrentTotalDownload,
-} from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
+} from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import definition, { ITorrentNetworkTraffic } from './TorrentNetworkTrafficTile';
 
 interface TorrentNetworkTrafficTileProps {
diff --git a/src/widgets/media-server/DetailCollapseable.tsx b/src/widgets/media-server/DetailCollapseable.tsx
index 85aa18531..e221beac4 100644
--- a/src/widgets/media-server/DetailCollapseable.tsx
+++ b/src/widgets/media-server/DetailCollapseable.tsx
@@ -1,7 +1,7 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
 import { IconDeviceMobile, IconId } from '@tabler/icons-react';
 
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
 import { useTranslation } from 'react-i18next';
 
 export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {
diff --git a/src/widgets/media-server/MediaServerTile.tsx b/src/widgets/media-server/MediaServerTile.tsx
index c2257ee49..9fe94af5e 100644
--- a/src/widgets/media-server/MediaServerTile.tsx
+++ b/src/widgets/media-server/MediaServerTile.tsx
@@ -12,9 +12,9 @@ import {
 import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { AppAvatar } from '~/components/AppAvatar';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { useGetMediaServers } from './useGetMediaServers';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
diff --git a/src/widgets/media-server/NowPlayingDisplay.tsx b/src/widgets/media-server/NowPlayingDisplay.tsx
index d03e4935c..87dc980cb 100644
--- a/src/widgets/media-server/NowPlayingDisplay.tsx
+++ b/src/widgets/media-server/NowPlayingDisplay.tsx
@@ -9,7 +9,7 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
 
 export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {
   const { t } = useTranslation();
diff --git a/src/widgets/media-server/TableRow.tsx b/src/widgets/media-server/TableRow.tsx
index 1ee9bc304..c9a795786 100644
--- a/src/widgets/media-server/TableRow.tsx
+++ b/src/widgets/media-server/TableRow.tsx
@@ -1,9 +1,9 @@
 import { Avatar, Collapse, Flex, Text, createStyles } from '@mantine/core';
 import { useState } from 'react';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
-import { AppType } from '../../types/app';
+import { AppAvatar } from '~/components/AppAvatar';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
+import { AppType } from '~/types/app';
 import { DetailCollapseable } from './DetailCollapseable';
 import { NowPlayingDisplay } from './NowPlayingDisplay';
 
diff --git a/src/widgets/notebook/NotebookEditor.tsx b/src/widgets/notebook/NotebookEditor.tsx
index 8d527e42b..e0c9df4f2 100644
--- a/src/widgets/notebook/NotebookEditor.tsx
+++ b/src/widgets/notebook/NotebookEditor.tsx
@@ -9,8 +9,8 @@ import { useConfigStore } from '~/config/store';
 import { useColorTheme } from '~/tools/color';
 import { api } from '~/utils/api';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { WidgetLoading } from '../loading';
 import { INotebookWidget } from './NotebookWidgetTile';
 
diff --git a/src/widgets/torrent/TorrentQueueItem.tsx b/src/widgets/torrent/TorrentQueueItem.tsx
index 74600ca87..a29862bfb 100644
--- a/src/widgets/torrent/TorrentQueueItem.tsx
+++ b/src/widgets/torrent/TorrentQueueItem.tsx
@@ -27,9 +27,9 @@ import {
 import { useTranslation } from 'next-i18next';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 
-import { calculateETA } from '../../tools/client/calculateEta';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { AppType } from '../../types/app';
+import { calculateETA } from '~/tools/client/calculateEta';
+import { humanFileSize } from '~/tools/humanFileSize';
+import { AppType } from '~/types/app';
 
 interface TorrentQueueItemProps {
   torrent: NormalizedTorrent;
diff --git a/src/widgets/torrent/TorrentTile.tsx b/src/widgets/torrent/TorrentTile.tsx
index ac621333a..c9b6a738e 100644
--- a/src/widgets/torrent/TorrentTile.tsx
+++ b/src/widgets/torrent/TorrentTile.tsx
@@ -19,9 +19,9 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
 import { useCardStyles } from '~/components/layout/Common/useCardStyles';
 
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
-import { AppIntegrationType } from '../../types/app';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
+import { NormalizedDownloadQueueResponse } from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
+import { AppIntegrationType } from '~/types/app';
 import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
diff --git a/src/widgets/useNet/UseNetTile.tsx b/src/widgets/useNet/UseNetTile.tsx
index 264544667..1bd91602c 100644
--- a/src/widgets/useNet/UseNetTile.tsx
+++ b/src/widgets/useNet/UseNetTile.tsx
@@ -7,10 +7,10 @@ import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 
-import { useConfigContext } from '../../config/provider';
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { AppIntegrationType } from '../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
+import { humanFileSize } from '~/tools/humanFileSize';
+import { AppIntegrationType } from '~/types/app';
 import {
   useGetUsenetInfo,
   usePauseUsenetQueueMutation,
diff --git a/src/widgets/useNet/UsenetHistoryList.tsx b/src/widgets/useNet/UsenetHistoryList.tsx
index 2db65f033..7d57e6e10 100644
--- a/src/widgets/useNet/UsenetHistoryList.tsx
+++ b/src/widgets/useNet/UsenetHistoryList.tsx
@@ -19,8 +19,8 @@ import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 
 import { useGetUsenetHistory } from '../dashDot/api';
-import { parseDuration } from '../../tools/client/parseDuration';
-import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '~/tools/client/parseDuration';
+import { humanFileSize } from '~/tools/humanFileSize';
 
 dayjs.extend(duration);
 
diff --git a/src/widgets/useNet/UsenetQueueList.tsx b/src/widgets/useNet/UsenetQueueList.tsx
index 125dd9df7..136a999a5 100644
--- a/src/widgets/useNet/UsenetQueueList.tsx
+++ b/src/widgets/useNet/UsenetQueueList.tsx
@@ -21,7 +21,7 @@ import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 
-import { humanFileSize } from '../../tools/humanFileSize';
+import { humanFileSize } from '~/tools/humanFileSize';
 import { useGetUsenetDownloads } from '../dashDot/api';
 
 dayjs.extend(duration);
diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts
index c69ad6688..3763fe61d 100644
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -9,8 +9,8 @@ import {
 import { Icon } from '@tabler/icons-react';
 import React from 'react';
 
-import { AreaType } from '../types/area';
-import { ShapeType } from '../types/shape';
+import { AreaType } from '~/types/area';
+import { ShapeType } from '~/types/shape';
 
 // Type of widgets which are saved to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {