diff --git a/.eslintrc.js b/.eslintrc.js
index c3da23c..4bd4f2e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,8 +21,13 @@ module.exports = {
     react: {
       version: "detect",
     },
+    "import/resolver": {
+      "typescript": {
+      }
+    }
   },
   rules: {
+    "import/no-named-as-default-member": "off",
     "newline-per-chained-call": "off",
     "react/jsx-pascal-case": "off",
     "react/require-default-props": "off",
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 661e21b..eade2a8 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,3 +1,5 @@
+import path from "path";
+
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import type { Configuration } from "webpack";
 
@@ -25,6 +27,13 @@ const config: StorybookConfig = {
       experiments: {
         asyncWebAssembly: true,
       },
+      resolve: {
+        ...webpackConfig.resolve,
+        alias: {
+          ...webpackConfig.resolve?.alias,
+          "@": path.resolve(__dirname, "./../src"),
+        },
+      },
     };
   },
 };
diff --git a/package.json b/package.json
index f86ac4f..a29a34e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "eslint-config-airbnb": "19",
     "eslint-config-airbnb-typescript": "^18",
     "eslint-config-prettier": "^9",
-    "eslint-plugin-import": "^2",
+    "eslint-import-resolver-typescript": "^3",
     "eslint-plugin-jsx-a11y": "^6",
     "eslint-plugin-prettier": "^5",
     "eslint-plugin-react": "^7",
@@ -58,6 +58,7 @@
     "rollup-plugin-esbuild": "^6",
     "rollup-plugin-node-externals": "^7",
     "rollup-plugin-postcss": "^4",
+    "rollup-plugin-typescript-paths": "^1",
     "storybook": "^8",
     "tslib": "^2",
     "typescript": "^5",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 9323885..53ab67b 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -5,6 +5,11 @@ import nodeExternals from "rollup-plugin-node-externals";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import postcss from "rollup-plugin-postcss";
 import terser from "@rollup/plugin-terser";
+import { typescriptPaths } from 'rollup-plugin-typescript-paths';
+
+const customResolver = nodeResolve({
+  extensions: [".ts", ".tsx"]
+});
 
 export default [
   {
@@ -22,12 +27,15 @@ export default [
       },
     ],
     plugins: [
+      typescriptPaths({
+        preserveExtensions: true,
+      }),
       nodeExternals(),
       nodeResolve(),
       commonjs(),
       esbuild({ tsconfig: "./tsconfig.json" }),
       postcss({ modules: true }),
-      terser(),
+      terser()
     ],
   },
   {
diff --git a/src/components/CalculationDetail/CalculationDetail.stories.tsx b/src/components/CalculationDetail/CalculationDetail.stories.tsx
index a1a50b4..addb89b 100644
--- a/src/components/CalculationDetail/CalculationDetail.stories.tsx
+++ b/src/components/CalculationDetail/CalculationDetail.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { CalculationDetail } from "./";
 
 const meta: Meta<typeof CalculationDetail> = {
diff --git a/src/components/CalculationDetail/CalculationDetail.tsx b/src/components/CalculationDetail/CalculationDetail.tsx
index 579907c..3bb7a7e 100644
--- a/src/components/CalculationDetail/CalculationDetail.tsx
+++ b/src/components/CalculationDetail/CalculationDetail.tsx
@@ -1,15 +1,15 @@
 import clsx from "clsx";
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
 import {
   ShipSnapshotContext,
   ShipSnapshotItemAttribute,
   ShipSnapshotItemAttributeEffect,
-} from "../../providers/ShipSnapshotProvider";
+} from "@/providers/ShipSnapshotProvider";
+import { Icon } from "@/components/Icon";
 
 import styles from "./CalculationDetail.module.css";
-import { Icon } from "../Icon";
 
 const EffectOperatorOrder: Record<string, string> = {
   PreAssign: "=",
diff --git a/src/components/DroneBay/DroneBay.stories.tsx b/src/components/DroneBay/DroneBay.stories.tsx
index 4ee5e4d..89ca410 100644
--- a/src/components/DroneBay/DroneBay.stories.tsx
+++ b/src/components/DroneBay/DroneBay.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { DroneBay } from "./";
 
 const meta: Meta<typeof DroneBay> = {
diff --git a/src/components/DroneBay/DroneBay.tsx b/src/components/DroneBay/DroneBay.tsx
index dc7917c..c142af9 100644
--- a/src/components/DroneBay/DroneBay.tsx
+++ b/src/components/DroneBay/DroneBay.tsx
@@ -1,10 +1,11 @@
 import clsx from "clsx";
 import React from "react";
 
+import { ShipSnapshotContext, ShipSnapshotItem } from "@/providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { CharAttribute, ShipAttribute } from "@/components/ShipAttribute";
+
 import styles from "./DroneBay.module.css";
-import { CharAttribute, ShipAttribute } from "../ShipAttribute";
-import { ShipSnapshotContext, ShipSnapshotItem } from "../../providers/ShipSnapshotProvider";
-import { EveDataContext } from "../../providers/EveDataProvider";
 
 const DroneBayEntrySelected = ({
   drone,
diff --git a/src/components/EsiCharacterSelection/EsiCharacterSelection.stories.tsx b/src/components/EsiCharacterSelection/EsiCharacterSelection.stories.tsx
index 19ec471..e4b5d72 100644
--- a/src/components/EsiCharacterSelection/EsiCharacterSelection.stories.tsx
+++ b/src/components/EsiCharacterSelection/EsiCharacterSelection.stories.tsx
@@ -1,9 +1,9 @@
 import type { Decorator, Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { EsiProvider } from "../../providers/EsiProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
 import { EsiCharacterSelection } from "./";
-import { EveDataProvider } from "../../providers/EveDataProvider";
 
 const meta: Meta<typeof EsiCharacterSelection> = {
   component: EsiCharacterSelection,
diff --git a/src/components/EsiCharacterSelection/EsiCharacterSelection.tsx b/src/components/EsiCharacterSelection/EsiCharacterSelection.tsx
index f8b4414..1449061 100644
--- a/src/components/EsiCharacterSelection/EsiCharacterSelection.tsx
+++ b/src/components/EsiCharacterSelection/EsiCharacterSelection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { EsiContext } from "../../providers/EsiProvider";
+import { EsiContext } from "@/providers/EsiProvider";
 
 import styles from "./EsiCharacterSelection.module.css";
 
diff --git a/src/components/FitButtonBar/ClipboardButton.tsx b/src/components/FitButtonBar/ClipboardButton.tsx
index 2f28f3d..09df3e8 100644
--- a/src/components/FitButtonBar/ClipboardButton.tsx
+++ b/src/components/FitButtonBar/ClipboardButton.tsx
@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import React from "react";
 
-import { EsiFit, ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
-import { ModalDialog } from "../ModalDialog";
-import { useClipboard } from "../../hooks/Clipboard";
-import { useFormatAsEft } from "../../hooks/FormatAsEft";
-import { useFormatEftToEsi } from "../../hooks/FormatEftToEsi";
+import { EsiFit, ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { ModalDialog } from "@/components/ModalDialog";
+import { useClipboard } from "@/hooks/Clipboard";
+import { useFormatAsEft } from "@/hooks/FormatAsEft";
+import { useFormatEftToEsi } from "@/hooks/FormatEftToEsi";
 
 import styles from "./FitButtonBar.module.css";
 
diff --git a/src/components/FitButtonBar/FitButtonBar.stories.tsx b/src/components/FitButtonBar/FitButtonBar.stories.tsx
index efc6f87..9a9c54d 100644
--- a/src/components/FitButtonBar/FitButtonBar.stories.tsx
+++ b/src/components/FitButtonBar/FitButtonBar.stories.tsx
@@ -3,11 +3,11 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { LocalFitProvider } from "../../providers/LocalFitProvider";
-import { ModalDialogAnchor } from "../ModalDialog/ModalDialog";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { LocalFitProvider } from "@/providers/LocalFitProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
+import { ModalDialogAnchor } from "@/components/ModalDialog/ModalDialog";
 
 import { FitButtonBar } from "./";
 
diff --git a/src/components/FitButtonBar/RenameButton.tsx b/src/components/FitButtonBar/RenameButton.tsx
index 62fa1fb..37b1588 100644
--- a/src/components/FitButtonBar/RenameButton.tsx
+++ b/src/components/FitButtonBar/RenameButton.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import React from "react";
 
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
-import { ModalDialog } from "../ModalDialog";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { ModalDialog } from "@/components/ModalDialog";
 
 import styles from "./FitButtonBar.module.css";
 
diff --git a/src/components/FitButtonBar/SaveButton.tsx b/src/components/FitButtonBar/SaveButton.tsx
index 0e00bc2..cdca313 100644
--- a/src/components/FitButtonBar/SaveButton.tsx
+++ b/src/components/FitButtonBar/SaveButton.tsx
@@ -1,9 +1,9 @@
 import clsx from "clsx";
 import React from "react";
 
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
-import { LocalFitContext } from "../../providers/LocalFitProvider";
-import { ModalDialog } from "../ModalDialog";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { LocalFitContext } from "@/providers/LocalFitProvider";
+import { ModalDialog } from "@/components/ModalDialog";
 
 import styles from "./FitButtonBar.module.css";
 
diff --git a/src/components/FitButtonBar/ShareButton.tsx b/src/components/FitButtonBar/ShareButton.tsx
index 71e6c07..a260a8c 100644
--- a/src/components/FitButtonBar/ShareButton.tsx
+++ b/src/components/FitButtonBar/ShareButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { useClipboard } from "../../hooks/Clipboard";
-import { useEveShipFitLink } from "../../hooks/EveShipFitLink";
+import { useClipboard } from "@/hooks/Clipboard";
+import { useEveShipFitLink } from "@/hooks/EveShipFitLink";
 
 import styles from "./FitButtonBar.module.css";
 
diff --git a/src/components/HardwareListing/HardwareListing.stories.tsx b/src/components/HardwareListing/HardwareListing.stories.tsx
index 53e50c5..2be7b36 100644
--- a/src/components/HardwareListing/HardwareListing.stories.tsx
+++ b/src/components/HardwareListing/HardwareListing.stories.tsx
@@ -1,11 +1,12 @@
 import type { Decorator, Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
 import { fullFit } from "../../../.storybook/fits";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 
 import { HardwareListing } from "./";
 
diff --git a/src/components/HardwareListing/HardwareListing.tsx b/src/components/HardwareListing/HardwareListing.tsx
index 2a6c107..4af12b4 100644
--- a/src/components/HardwareListing/HardwareListing.tsx
+++ b/src/components/HardwareListing/HardwareListing.tsx
@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import React from "react";
 
-import { defaultDataUrl } from "../../settings";
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { Icon } from "../Icon";
-import { ShipSnapshotContext, ShipSnapshotSlotsType } from "../../providers/ShipSnapshotProvider";
-import { TreeListing, TreeHeader, TreeLeaf } from "../TreeListing";
+import { defaultDataUrl } from "@/settings";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext, ShipSnapshotSlotsType } from "@/providers/ShipSnapshotProvider";
+import { Icon } from "@/components/Icon";
+import { TreeListing, TreeHeader, TreeLeaf } from "@/components/TreeListing";
 
 import styles from "./HardwareListing.module.css";
 
diff --git a/src/components/HullListing/HullListing.stories.tsx b/src/components/HullListing/HullListing.stories.tsx
index 1f587e7..be5e009 100644
--- a/src/components/HullListing/HullListing.stories.tsx
+++ b/src/components/HullListing/HullListing.stories.tsx
@@ -4,11 +4,11 @@ import React from "react";
 import { fullFit } from "../../../.storybook/fits";
 
 import { HullListing } from "./";
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { LocalFitProvider } from "../../providers/LocalFitProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { LocalFitProvider } from "@/providers/LocalFitProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 
 const meta: Meta<typeof HullListing> = {
   component: HullListing,
diff --git a/src/components/HullListing/HullListing.tsx b/src/components/HullListing/HullListing.tsx
index 8812fc3..a92efa1 100644
--- a/src/components/HullListing/HullListing.tsx
+++ b/src/components/HullListing/HullListing.tsx
@@ -1,12 +1,12 @@
 import clsx from "clsx";
 import React from "react";
 
-import { EsiContext } from "../../providers/EsiProvider";
-import { EsiFit, ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { Icon, IconName } from "../Icon";
-import { TreeListing, TreeHeader, TreeHeaderAction, TreeLeaf } from "../TreeListing";
-import { LocalFitContext } from "../../providers/LocalFitProvider";
+import { EsiContext } from "@/providers/EsiProvider";
+import { EsiFit, ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { LocalFitContext } from "@/providers/LocalFitProvider";
+import { Icon, IconName } from "@/components/Icon";
+import { TreeListing, TreeHeader, TreeHeaderAction, TreeLeaf } from "@/components/TreeListing";
 
 import styles from "./HullListing.module.css";
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 9476b0b..256b2ff 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { defaultDataUrl } from "../../settings";
+import { defaultDataUrl } from "@/settings";
 
 const iconMapping = {
   "align-time": "texture/classes/fitting/statsicons/aligntime.png",
diff --git a/src/components/ShipAttribute/ShipAttribute.stories.tsx b/src/components/ShipAttribute/ShipAttribute.stories.tsx
index 5ff7528..ec0ed2c 100644
--- a/src/components/ShipAttribute/ShipAttribute.stories.tsx
+++ b/src/components/ShipAttribute/ShipAttribute.stories.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { ShipAttribute } from "./";
 
 const meta: Meta<typeof ShipAttribute> = {
diff --git a/src/components/ShipAttribute/ShipAttribute.tsx b/src/components/ShipAttribute/ShipAttribute.tsx
index 4973b7c..ace7dc5 100644
--- a/src/components/ShipAttribute/ShipAttribute.tsx
+++ b/src/components/ShipAttribute/ShipAttribute.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
 
 export interface AttributeProps {
   /** Name of the attribute. */
diff --git a/src/components/ShipFit/FitLink.tsx b/src/components/ShipFit/FitLink.tsx
index 323b5e6..9927df3 100644
--- a/src/components/ShipFit/FitLink.tsx
+++ b/src/components/ShipFit/FitLink.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { useEveShipFitLink } from "../../hooks/EveShipFitLink";
-import { useClipboard } from "../../hooks/Clipboard";
+import { useEveShipFitLink } from "@/hooks/EveShipFitLink";
+import { useClipboard } from "@/hooks/Clipboard";
 
 import styles from "./ShipFit.module.css";
 
diff --git a/src/components/ShipFit/Hull.tsx b/src/components/ShipFit/Hull.tsx
index 3bd35f0..4458ab9 100644
--- a/src/components/ShipFit/Hull.tsx
+++ b/src/components/ShipFit/Hull.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
 
 import styles from "./ShipFit.module.css";
 
diff --git a/src/components/ShipFit/ShipFit.stories.tsx b/src/components/ShipFit/ShipFit.stories.tsx
index 135ec67..8c83d27 100644
--- a/src/components/ShipFit/ShipFit.stories.tsx
+++ b/src/components/ShipFit/ShipFit.stories.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { ShipFit } from "./";
 
 const meta: Meta<typeof ShipFit> = {
diff --git a/src/components/ShipFit/ShipFit.tsx b/src/components/ShipFit/ShipFit.tsx
index 7a0b4bf..d56cd8a 100644
--- a/src/components/ShipFit/ShipFit.tsx
+++ b/src/components/ShipFit/ShipFit.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import clsx from "clsx";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { Icon } from "@/components/Icon";
 
 import { FitLink } from "./FitLink";
 import { Hull } from "./Hull";
-import { Icon } from "../Icon";
 import { RadialMenu } from "./RadialMenu";
 import { RingInner } from "./RingInner";
 import { RingOuter } from "./RingOuter";
diff --git a/src/components/ShipFit/Slot.tsx b/src/components/ShipFit/Slot.tsx
index 352afd0..3e9912a 100644
--- a/src/components/ShipFit/Slot.tsx
+++ b/src/components/ShipFit/Slot.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
-
-import { Icon, IconName } from "../Icon";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { Icon, IconName } from "@/components/Icon";
 
 import styles from "./ShipFit.module.css";
 
diff --git a/src/components/ShipFit/Usage.tsx b/src/components/ShipFit/Usage.tsx
index dabf47b..7e5aade 100644
--- a/src/components/ShipFit/Usage.tsx
+++ b/src/components/ShipFit/Usage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
 
 import styles from "./ShipFit.module.css";
 
diff --git a/src/components/ShipFitExtended/ShipFitExtended.stories.tsx b/src/components/ShipFitExtended/ShipFitExtended.stories.tsx
index 8275cef..c3b1acc 100644
--- a/src/components/ShipFitExtended/ShipFitExtended.stories.tsx
+++ b/src/components/ShipFitExtended/ShipFitExtended.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { ShipFitExtended } from "./";
 
 const meta: Meta<typeof ShipFitExtended> = {
diff --git a/src/components/ShipFitExtended/ShipFitExtended.tsx b/src/components/ShipFitExtended/ShipFitExtended.tsx
index a7e5fbd..599f63a 100644
--- a/src/components/ShipFitExtended/ShipFitExtended.tsx
+++ b/src/components/ShipFitExtended/ShipFitExtended.tsx
@@ -1,14 +1,14 @@
+import clsx from "clsx";
 import React from "react";
 
-import { Icon } from "../Icon";
-import { ShipFit } from "../ShipFit";
-import { ShipAttribute } from "../ShipAttribute";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { Icon } from "@/components/Icon";
+import { ShipFit } from "@/components/ShipFit";
+import { ShipAttribute } from "@/components/ShipAttribute";
+import { DroneBay } from "@/components/DroneBay";
 
 import styles from "./ShipFitExtended.module.css";
-import clsx from "clsx";
-import { DroneBay } from "../DroneBay";
-import { EveDataContext } from "../../providers/EveDataProvider";
 
 const ShipCargoHold = () => {
   return (
diff --git a/src/components/ShipStatistics/RechargeRate.tsx b/src/components/ShipStatistics/RechargeRate.tsx
index f9b2594..2a0a6d2 100644
--- a/src/components/ShipStatistics/RechargeRate.tsx
+++ b/src/components/ShipStatistics/RechargeRate.tsx
@@ -1,10 +1,10 @@
+import clsx from "clsx";
 import React from "react";
 
-import { useAttribute } from "../ShipAttribute";
+import { useAttribute } from "@/components/ShipAttribute";
+import { IconName, Icon } from "@/components/Icon";
 
 import styles from "./ShipStatistics.module.css";
-import clsx from "clsx";
-import { IconName, Icon } from "../Icon";
 
 export const RechargeRateItem = (props: { name: string; icon: IconName }) => {
   const stringValue = useAttribute("Ship", {
diff --git a/src/components/ShipStatistics/Resistance.tsx b/src/components/ShipStatistics/Resistance.tsx
index acb055e..d7a2ddb 100644
--- a/src/components/ShipStatistics/Resistance.tsx
+++ b/src/components/ShipStatistics/Resistance.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useAttribute } from "../ShipAttribute";
+import { useAttribute } from "@/components/ShipAttribute";
 
 import styles from "./ShipStatistics.module.css";
 
diff --git a/src/components/ShipStatistics/ShipStatistics.stories.tsx b/src/components/ShipStatistics/ShipStatistics.stories.tsx
index e90035a..f7898eb 100644
--- a/src/components/ShipStatistics/ShipStatistics.stories.tsx
+++ b/src/components/ShipStatistics/ShipStatistics.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { EsiProvider } from "../../providers/EsiProvider";
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { EsiProvider } from "@/providers/EsiProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { ShipStatistics } from "./";
 
 const meta: Meta<typeof ShipStatistics> = {
diff --git a/src/components/ShipStatistics/ShipStatistics.tsx b/src/components/ShipStatistics/ShipStatistics.tsx
index 2abb663..35ac6f6 100644
--- a/src/components/ShipStatistics/ShipStatistics.tsx
+++ b/src/components/ShipStatistics/ShipStatistics.tsx
@@ -1,17 +1,17 @@
 import clsx from "clsx";
 import React from "react";
 
-import { ShipAttribute } from "../ShipAttribute";
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { ShipAttribute } from "@/components/ShipAttribute";
+import { Icon } from "@/components/Icon";
+import { CharAttribute } from "@/components/ShipAttribute/ShipAttribute";
 
 import { Category, CategoryLine } from "./Category";
 import { RechargeRate } from "./RechargeRate";
 import { Resistance } from "./Resistance";
 
 import styles from "./ShipStatistics.module.css";
-import { Icon } from "../Icon";
-import { CharAttribute } from "../ShipAttribute/ShipAttribute";
 
 /**
  * Render ship statistics similar to how it is done in-game.
diff --git a/src/components/TreeListing/TreeListing.tsx b/src/components/TreeListing/TreeListing.tsx
index 41a4515..9ed3a4d 100644
--- a/src/components/TreeListing/TreeListing.tsx
+++ b/src/components/TreeListing/TreeListing.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import React from "react";
 
-import { Icon, IconName } from "../Icon";
+import { Icon, IconName } from "@/components/Icon";
 
 import styles from "./TreeListing.module.css";
 
diff --git a/src/hooks/EveShipFitHash/EveShipFitHash.stories.tsx b/src/hooks/EveShipFitHash/EveShipFitHash.stories.tsx
index ce00d4a..b625efa 100644
--- a/src/hooks/EveShipFitHash/EveShipFitHash.stories.tsx
+++ b/src/hooks/EveShipFitHash/EveShipFitHash.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { hashFit } from "../../../.storybook/fits";
 
-import { EveDataProvider } from "../../providers/EveDataProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
 import { EveShipFitHash } from "./EveShipFitHash";
 
 const meta: Meta<typeof EveShipFitHash> = {
diff --git a/src/hooks/EveShipFitHash/EveShipFitHash.tsx b/src/hooks/EveShipFitHash/EveShipFitHash.tsx
index 5344f51..41ca61f 100644
--- a/src/hooks/EveShipFitHash/EveShipFitHash.tsx
+++ b/src/hooks/EveShipFitHash/EveShipFitHash.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { EsiFit } from "../../providers/ShipSnapshotProvider";
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { useFormatEftToEsi } from "../FormatEftToEsi";
+import { EsiFit } from "@/providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { useFormatEftToEsi } from "@/hooks/FormatEftToEsi";
 
 async function decompress(base64compressedBytes: string): Promise<string> {
   const stream = new Blob([Uint8Array.from(atob(base64compressedBytes), (c) => c.charCodeAt(0))]).stream();
diff --git a/src/hooks/EveShipFitLink/EveShipFitLink.stories.tsx b/src/hooks/EveShipFitLink/EveShipFitLink.stories.tsx
index ce01f39..e8ef25a 100644
--- a/src/hooks/EveShipFitLink/EveShipFitLink.stories.tsx
+++ b/src/hooks/EveShipFitLink/EveShipFitLink.stories.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { EveDataProvider } from "../../providers/EveDataProvider";
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
 import { EveShipFitLink } from "./EveShipFitLink";
 
 const meta: Meta<typeof EveShipFitLink> = {
diff --git a/src/hooks/EveShipFitLink/EveShipFitLink.tsx b/src/hooks/EveShipFitLink/EveShipFitLink.tsx
index 1c80760..fe3f07a 100644
--- a/src/hooks/EveShipFitLink/EveShipFitLink.tsx
+++ b/src/hooks/EveShipFitLink/EveShipFitLink.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { EsiFit, ShipSnapshotContext } from "../../providers/ShipSnapshotProvider";
+import { EsiFit, ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
 
 async function compress(str: string): Promise<string> {
   const stream = new Blob([str]).stream();
diff --git a/src/hooks/FormatAsEft/FormatAsEft.stories.tsx b/src/hooks/FormatAsEft/FormatAsEft.stories.tsx
index cacf682..15dddab 100644
--- a/src/hooks/FormatAsEft/FormatAsEft.stories.tsx
+++ b/src/hooks/FormatAsEft/FormatAsEft.stories.tsx
@@ -3,10 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { EveDataProvider } from "../../providers/EveDataProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
 import { FormatAsEft } from "./FormatAsEft";
-import { ShipSnapshotProvider } from "../../providers/ShipSnapshotProvider";
-import { DogmaEngineProvider } from "../../providers/DogmaEngineProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
 
 const meta: Meta<typeof FormatAsEft> = {
   component: FormatAsEft,
diff --git a/src/hooks/FormatAsEft/FormatAsEft.tsx b/src/hooks/FormatAsEft/FormatAsEft.tsx
index 1c80b61..baab81c 100644
--- a/src/hooks/FormatAsEft/FormatAsEft.tsx
+++ b/src/hooks/FormatAsEft/FormatAsEft.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { ShipSnapshotContext, ShipSnapshotSlotsType } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { ShipSnapshotContext, ShipSnapshotSlotsType } from "@/providers/ShipSnapshotProvider";
 
 /** Mapping between slot types and ESI flags (for first slot in the type). */
 const esiFlagMapping: Record<ShipSnapshotSlotsType, number[]> = {
diff --git a/src/hooks/FormatEftToEsi/FormatEftToEsi.stories.tsx b/src/hooks/FormatEftToEsi/FormatEftToEsi.stories.tsx
index 7c2dfad..f2ee1aa 100644
--- a/src/hooks/FormatEftToEsi/FormatEftToEsi.stories.tsx
+++ b/src/hooks/FormatEftToEsi/FormatEftToEsi.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { eftFit } from "../../../.storybook/fits";
 
-import { EveDataProvider } from "../../providers/EveDataProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
 import { FormatEftToEsi } from "./FormatEftToEsi";
 
 const meta: Meta<typeof FormatEftToEsi> = {
diff --git a/src/hooks/FormatEftToEsi/FormatEftToEsi.tsx b/src/hooks/FormatEftToEsi/FormatEftToEsi.tsx
index 971cae7..806e2c4 100644
--- a/src/hooks/FormatEftToEsi/FormatEftToEsi.tsx
+++ b/src/hooks/FormatEftToEsi/FormatEftToEsi.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { EveDataContext } from "../../providers/EveDataProvider";
-import { EsiFit } from "../../providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { EsiFit } from "@/providers/ShipSnapshotProvider";
 
 /** Mapping between slot types and ESI flags (for first slot in the type). */
 const esiFlagMapping: Record<string, number[]> = {
diff --git a/src/providers/DogmaEngineProvider/DogmaEngineProvider.stories.tsx b/src/providers/DogmaEngineProvider/DogmaEngineProvider.stories.tsx
index d18f104..3da2487 100644
--- a/src/providers/DogmaEngineProvider/DogmaEngineProvider.stories.tsx
+++ b/src/providers/DogmaEngineProvider/DogmaEngineProvider.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { EveDataProvider } from "../EveDataProvider";
+import { EveDataProvider } from "@/providers/EveDataProvider";
 import { DogmaEngineContext, DogmaEngineProvider } from "./";
 
 const meta: Meta<typeof DogmaEngineProvider> = {
diff --git a/src/providers/DogmaEngineProvider/DogmaEngineProvider.tsx b/src/providers/DogmaEngineProvider/DogmaEngineProvider.tsx
index 3ca72b5..67ca461 100644
--- a/src/providers/DogmaEngineProvider/DogmaEngineProvider.tsx
+++ b/src/providers/DogmaEngineProvider/DogmaEngineProvider.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { init, calculate } from "@eveshipfit/dogma-engine";
+
 import {
   DogmaAttribute,
   DogmaEffect,
@@ -7,8 +9,7 @@ import {
   TypeDogmaEffect,
   TypeID,
   EveDataContext,
-} from "../EveDataProvider";
-import type { init, calculate } from "@eveshipfit/dogma-engine";
+} from "@/providers/EveDataProvider";
 
 interface EsfDogmaEngine {
   init: typeof init;
diff --git a/src/providers/EsiProvider/EsiFittings.tsx b/src/providers/EsiProvider/EsiFittings.tsx
index d9ab19a..851f7aa 100644
--- a/src/providers/EsiProvider/EsiFittings.tsx
+++ b/src/providers/EsiProvider/EsiFittings.tsx
@@ -1,4 +1,4 @@
-import { EsiFit } from "../ShipSnapshotProvider";
+import { EsiFit } from "@/providers/ShipSnapshotProvider";
 
 export async function getCharFittings(characterId: string, accessToken: string): Promise<EsiFit[] | undefined> {
   let response;
diff --git a/src/providers/EsiProvider/EsiProvider.stories.tsx b/src/providers/EsiProvider/EsiProvider.stories.tsx
index 8a8de09..dd23b80 100644
--- a/src/providers/EsiProvider/EsiProvider.stories.tsx
+++ b/src/providers/EsiProvider/EsiProvider.stories.tsx
@@ -3,9 +3,10 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
+import { EveDataProvider } from "@/providers/EveDataProvider";
+import { ShipSnapshotProvider } from "@/providers/ShipSnapshotProvider";
+
 import { EsiContext, EsiProvider } from "./";
-import { EveDataProvider } from "../EveDataProvider";
-import { ShipSnapshotProvider } from "../ShipSnapshotProvider";
 
 const meta: Meta<typeof EsiProvider> = {
   component: EsiProvider,
diff --git a/src/providers/EsiProvider/EsiProvider.tsx b/src/providers/EsiProvider/EsiProvider.tsx
index 4fc3b92..2586737 100644
--- a/src/providers/EsiProvider/EsiProvider.tsx
+++ b/src/providers/EsiProvider/EsiProvider.tsx
@@ -1,14 +1,13 @@
 import { jwtDecode } from "jwt-decode";
 import React from "react";
 
-import { EsiFit, ShipSnapshotContext } from "../ShipSnapshotProvider";
+import { EsiFit, ShipSnapshotContext } from "@/providers/ShipSnapshotProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
+import { useLocalStorage } from "@/hooks/LocalStorage";
 
 import { getAccessToken } from "./EsiAccessToken";
 import { getSkills } from "./EsiSkills";
 import { getCharFittings } from "./EsiFittings";
-import { EveDataContext } from "../EveDataProvider";
-
-import { useLocalStorage } from "../../hooks/LocalStorage";
 
 export interface EsiCharacter {
   name: string;
diff --git a/src/providers/EveDataProvider/EveDataProvider.tsx b/src/providers/EveDataProvider/EveDataProvider.tsx
index 21da018..3f330e1 100644
--- a/src/providers/EveDataProvider/EveDataProvider.tsx
+++ b/src/providers/EveDataProvider/EveDataProvider.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
+import { defaultDataUrl } from "@/settings";
+
 import { DogmaAttribute, DogmaEffect, GroupID, MarketGroup, TypeDogma, TypeID } from "./DataTypes";
-import { defaultDataUrl } from "../../settings";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
diff --git a/src/providers/LocalFitProvider/LocalFitProvider.tsx b/src/providers/LocalFitProvider/LocalFitProvider.tsx
index d469b6a..06f31df 100644
--- a/src/providers/LocalFitProvider/LocalFitProvider.tsx
+++ b/src/providers/LocalFitProvider/LocalFitProvider.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 
-import { EsiFit } from "../ShipSnapshotProvider";
-
-import { useLocalStorage } from "../../hooks/LocalStorage";
+import { useLocalStorage } from "@/hooks/LocalStorage";
+import { EsiFit } from "@/providers/ShipSnapshotProvider";
 
 export interface LocalFit {
   loaded?: boolean;
diff --git a/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.stories.tsx b/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.stories.tsx
index 23807a9..be8004f 100644
--- a/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.stories.tsx
+++ b/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.stories.tsx
@@ -3,8 +3,8 @@ import React from "react";
 
 import { fullFit } from "../../../.storybook/fits";
 
-import { EveDataContext, EveDataProvider } from "../EveDataProvider";
-import { DogmaEngineProvider } from "../DogmaEngineProvider";
+import { EveDataContext, EveDataProvider } from "@/providers/EveDataProvider";
+import { DogmaEngineProvider } from "@/providers/DogmaEngineProvider";
 import { ShipSnapshotItemAttribute, ShipSnapshotContext, ShipSnapshotProvider } from "./";
 
 const meta: Meta<typeof ShipSnapshotProvider> = {
diff --git a/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.tsx b/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.tsx
index a5b2a89..1055636 100644
--- a/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.tsx
+++ b/src/providers/ShipSnapshotProvider/ShipSnapshotProvider.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { DogmaEngineContext } from "../DogmaEngineProvider";
-import { EveDataContext } from "../EveDataProvider";
+import { DogmaEngineContext } from "@/providers/DogmaEngineProvider";
+import { EveDataContext } from "@/providers/EveDataProvider";
 
 export interface ShipSnapshotItemAttributeEffect {
   operator: string;
diff --git a/tsconfig.json b/tsconfig.json
index c0618a0..c4de14c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
     "declaration": true,
     "declarationDir": "dist/types",
     "emitDeclarationOnly": true,
@@ -10,6 +11,9 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,