diff --git a/src/background.ts b/src/background.ts
index 43e58991..4c41dffe 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,5 +1,5 @@
import browser from 'webextension-polyfill'
-import { SettingsState } from "./types/storage";
+import { SettingsState } from "@/types/storage";
export const openDB = () => {
return new Promise((resolve, reject) => {
diff --git a/src/interface/main.tsx b/src/interface/main.tsx
index fb1e37bb..fe7b7a01 100644
--- a/src/interface/main.tsx
+++ b/src/interface/main.tsx
@@ -6,7 +6,7 @@ import { ErrorBoundary } from "react-error-boundary";
import './index.css';
import SettingsPage from './pages/SettingsPage.js';
import browser from 'webextension-polyfill';
-import font from '../resources/fonts/IconFamily.woff'
+import font from '@/resources/fonts/IconFamily.woff'
import ThemeCreator from './pages/ThemeCreator';
import Store from './pages/Store';
diff --git a/src/interface/pages/SettingsPage.tsx b/src/interface/pages/SettingsPage.tsx
index f18c467d..6fcc3dec 100644
--- a/src/interface/pages/SettingsPage.tsx
+++ b/src/interface/pages/SettingsPage.tsx
@@ -1,7 +1,7 @@
import TabbedContainer from '../components/TabbedContainer';
import Settings from './SettingsPage/Settings';
-import logo from '../../resources/icons/betterseqta-dark-full.png';
-import logoDark from '../../resources/icons/betterseqta-light-full.png';
+import logo from '@/resources/icons/betterseqta-dark-full.png';
+import logoDark from '@/resources/icons/betterseqta-light-full.png';
import { SettingsContextProvider } from '../SettingsContext';
import Shortcuts from './SettingsPage/Shortcuts';
import Picker from '../components/Picker';
diff --git a/src/manifests/brave.ts b/src/manifests/brave.ts
index 6d88caf4..92d4512c 100644
--- a/src/manifests/brave.ts
+++ b/src/manifests/brave.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
export const brave = createManifest(baseManifest, 'brave')
diff --git a/src/manifests/chrome.ts b/src/manifests/chrome.ts
index c718d7b8..a43ed806 100644
--- a/src/manifests/chrome.ts
+++ b/src/manifests/chrome.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
export const chrome = createManifest(baseManifest, 'chrome')
diff --git a/src/manifests/edge.ts b/src/manifests/edge.ts
index 19c4a85a..be6fe354 100644
--- a/src/manifests/edge.ts
+++ b/src/manifests/edge.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
export const edge = createManifest(baseManifest, 'edge')
diff --git a/src/manifests/firefox.ts b/src/manifests/firefox.ts
index a9a5b7dc..f82ac61f 100644
--- a/src/manifests/firefox.ts
+++ b/src/manifests/firefox.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
import pkg from '../../package.json'
diff --git a/src/manifests/opera.ts b/src/manifests/opera.ts
index c3909c2c..7702a8af 100644
--- a/src/manifests/opera.ts
+++ b/src/manifests/opera.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
export const opera = createManifest(baseManifest, 'opera')
diff --git a/src/manifests/safari.ts b/src/manifests/safari.ts
index e8201c56..ade46690 100644
--- a/src/manifests/safari.ts
+++ b/src/manifests/safari.ts
@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
import baseManifest from './manifest.json'
const updatedSafariManifest = {
diff --git a/src/seqta/icons/assessmentsIcon.ts b/src/seqta/icons/assessmentsIcon.ts
index 1b6048a3..028f9406 100644
--- a/src/seqta/icons/assessmentsIcon.ts
+++ b/src/seqta/icons/assessmentsIcon.ts
@@ -1,4 +1,4 @@
-export default String.raw`
+export default /* html */`
diff --git a/src/seqta/icons/coursesIcon.ts b/src/seqta/icons/coursesIcon.ts
index c3d09f42..4c4023d2 100644
--- a/src/seqta/icons/coursesIcon.ts
+++ b/src/seqta/icons/coursesIcon.ts
@@ -1,4 +1,4 @@
-export default String.raw`
+export default /* html */`
diff --git a/src/seqta/ui/AddBetterSEQTAElements.ts b/src/seqta/ui/AddBetterSEQTAElements.ts
index 1282b14c..c09637a3 100644
--- a/src/seqta/ui/AddBetterSEQTAElements.ts
+++ b/src/seqta/ui/AddBetterSEQTAElements.ts
@@ -1,10 +1,10 @@
-import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "../../SEQTA";
+import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "@/SEQTA";
import { updateBgDurations } from "./Animation";
import { appendBackgroundToUI } from "./ImageBackgrounds";
-import stringToHTML from "../utils/stringToHTML";
-import { settingsState } from "../utils/listeners/SettingsState";
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
import { updateAllColors } from "./colors/Manager";
-import { delay } from "../utils/delay";
+import { delay } from "@/seqta/utils/delay";
export async function AddBetterSEQTAElements() {
if (settingsState.onoff) {
diff --git a/src/seqta/ui/Animation.ts b/src/seqta/ui/Animation.ts
index bd52c4d0..6c4cffda 100644
--- a/src/seqta/ui/Animation.ts
+++ b/src/seqta/ui/Animation.ts
@@ -1,4 +1,4 @@
-import { settingsState } from "../utils/listeners/SettingsState";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
/**
* Update the background animation durations based on the slider input.
diff --git a/src/seqta/ui/Loading.ts b/src/seqta/ui/Loading.ts
index 9ab876b1..931b1849 100644
--- a/src/seqta/ui/Loading.ts
+++ b/src/seqta/ui/Loading.ts
@@ -1,5 +1,5 @@
import browser from 'webextension-polyfill'
-import stringToHTML from '../utils/stringToHTML';
+import stringToHTML from '@/seqta/utils/stringToHTML';
const loadingSpinner = /* html */`
diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts
index a1ec8971..10ad531c 100644
--- a/src/seqta/ui/colors/Manager.ts
+++ b/src/seqta/ui/colors/Manager.ts
@@ -1,11 +1,11 @@
import browser from 'webextension-polyfill'
-import { GetThresholdOfColor } from '../../../SEQTA';
+import { GetThresholdOfColor } from '@/SEQTA';
import { lightenAndPaleColor } from './lightenAndPaleColor';
import ColorLuminance from './ColorLuminance';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
-import darkLogo from '../../../resources/icons/betterseqta-light-full.png';
-import lightLogo from '../../../resources/icons/betterseqta-dark-full.png';
+import darkLogo from '@/resources/icons/betterseqta-light-full.png';
+import lightLogo from '@/resources/icons/betterseqta-dark-full.png';
// Helper functions
const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
diff --git a/src/seqta/ui/colors/lightenAndPaleColor.ts b/src/seqta/ui/colors/lightenAndPaleColor.ts
index 00c42653..1c57b6a1 100644
--- a/src/seqta/ui/colors/lightenAndPaleColor.ts
+++ b/src/seqta/ui/colors/lightenAndPaleColor.ts
@@ -1,6 +1,5 @@
import Color from 'color';
-
export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) {
if (!inputColor) return;
diff --git a/src/seqta/ui/themes/Themes.ts b/src/seqta/ui/themes/Themes.ts
index 5482fdc1..1462ebef 100644
--- a/src/seqta/ui/themes/Themes.ts
+++ b/src/seqta/ui/themes/Themes.ts
@@ -1,4 +1,4 @@
-import { base64toblobURL } from '../../utils/imageConversions';
+import { base64toblobURL } from '@/seqta/utils/imageConversions';
export const imageData: Record = {};
diff --git a/src/seqta/ui/themes/UpdateThemePreview.ts b/src/seqta/ui/themes/UpdateThemePreview.ts
index 3b2200c8..b60aebc0 100644
--- a/src/seqta/ui/themes/UpdateThemePreview.ts
+++ b/src/seqta/ui/themes/UpdateThemePreview.ts
@@ -1,6 +1,6 @@
-import { CustomThemeBase64 } from '../../../interface/types/CustomThemes';
+import { CustomThemeBase64 } from '@/interface/types/CustomThemes';
import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit & { CustomImages: Omit[] } */) => {
diff --git a/src/seqta/ui/themes/applyTheme.ts b/src/seqta/ui/themes/applyTheme.ts
index edb774f2..7e2fae0f 100644
--- a/src/seqta/ui/themes/applyTheme.ts
+++ b/src/seqta/ui/themes/applyTheme.ts
@@ -1,5 +1,5 @@
-import { CustomImage, CustomTheme } from '../../../interface/types/CustomThemes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomImage, CustomTheme } from '@/interface/types/CustomThemes';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
import { applyCustomCSS } from './Themes';
diff --git a/src/seqta/ui/themes/deleteTheme.ts b/src/seqta/ui/themes/deleteTheme.ts
index 75e4c6a4..2f9d1a38 100644
--- a/src/seqta/ui/themes/deleteTheme.ts
+++ b/src/seqta/ui/themes/deleteTheme.ts
@@ -1,7 +1,7 @@
import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
import { removeTheme } from './removeTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const deleteTheme = async (themeId: string) => {
diff --git a/src/seqta/ui/themes/disableTheme.ts b/src/seqta/ui/themes/disableTheme.ts
index ea77d5dc..cebd5983 100644
--- a/src/seqta/ui/themes/disableTheme.ts
+++ b/src/seqta/ui/themes/disableTheme.ts
@@ -1,8 +1,8 @@
import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
import { removeTheme } from './removeTheme';
-import { Mutex } from '../../utils/mutex';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { Mutex } from '@/seqta/utils/mutex';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
const mutex = new Mutex();
let isDisabling = false;
diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts
index 7c3cad69..83ea5623 100644
--- a/src/seqta/ui/themes/downloadTheme.ts
+++ b/src/seqta/ui/themes/downloadTheme.ts
@@ -1,6 +1,6 @@
import localforage from 'localforage';
-import { Theme } from '../../../interface/pages/Store';
-import base64ToBlob from '../../utils/base64ToBlob';
+import { Theme } from '@/interface/pages/Store';
+import base64ToBlob from '@/seqta/utils/base64ToBlob';
type ThemeContent = {
id: string;
diff --git a/src/seqta/ui/themes/enableCurrent.ts b/src/seqta/ui/themes/enableCurrent.ts
index 290d010d..40379d2e 100644
--- a/src/seqta/ui/themes/enableCurrent.ts
+++ b/src/seqta/ui/themes/enableCurrent.ts
@@ -1,7 +1,7 @@
import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
import { applyTheme } from './applyTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const enableCurrentTheme = async () => {
diff --git a/src/seqta/ui/themes/getAvailableThemes.ts b/src/seqta/ui/themes/getAvailableThemes.ts
index a587fa57..429c04a3 100644
--- a/src/seqta/ui/themes/getAvailableThemes.ts
+++ b/src/seqta/ui/themes/getAvailableThemes.ts
@@ -1,7 +1,7 @@
import localforage from 'localforage';
-import { CustomTheme, ThemeList } from '../../../interface/types/CustomThemes';
-import { blobToBase64 } from '../../utils/blobToBase64';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomTheme, ThemeList } from '@/interface/types/CustomThemes';
+import { blobToBase64 } from '@/seqta/utils/blobToBase64';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const getAvailableThemes = async (): Promise => {
try {
diff --git a/src/seqta/ui/themes/getTheme.ts b/src/seqta/ui/themes/getTheme.ts
index ffd24c01..c698e13e 100644
--- a/src/seqta/ui/themes/getTheme.ts
+++ b/src/seqta/ui/themes/getTheme.ts
@@ -1,6 +1,6 @@
import localforage from 'localforage';
-import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '../../../interface/types/CustomThemes';
-import { blobToBase64 } from '../../utils/blobToBase64';
+import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
+import { blobToBase64 } from '@/seqta/utils/blobToBase64';
export const getTheme = async (themeId: string): Promise => {
diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts
index 8a2e5fa5..bfb5a613 100644
--- a/src/seqta/ui/themes/removeTheme.ts
+++ b/src/seqta/ui/themes/removeTheme.ts
@@ -1,6 +1,6 @@
import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomTheme } from '@/interface/types/CustomThemes';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const removeTheme = async (theme: CustomTheme) => {
// Remove custom CSS
diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts
index 6533d54c..060eaa6b 100644
--- a/src/seqta/ui/themes/saveTheme.ts
+++ b/src/seqta/ui/themes/saveTheme.ts
@@ -1,5 +1,5 @@
import localforage from 'localforage';
-import { CustomTheme, CustomThemeBase64 } from '../../../interface/types/CustomThemes';
+import { CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
import { disableTheme } from './disableTheme';
diff --git a/src/seqta/ui/themes/setTheme.ts b/src/seqta/ui/themes/setTheme.ts
index 71405b1e..0646408a 100644
--- a/src/seqta/ui/themes/setTheme.ts
+++ b/src/seqta/ui/themes/setTheme.ts
@@ -1,8 +1,8 @@
import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
import { applyTheme } from './applyTheme';
import { removeTheme } from './removeTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
export const setTheme = async (themeId: string) => {
diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts
index 9fda706c..b4d53146 100644
--- a/src/seqta/utils/listeners/MessageListener.ts
+++ b/src/seqta/utils/listeners/MessageListener.ts
@@ -1,17 +1,17 @@
import browser from 'webextension-polyfill'
import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA';
-import { deleteTheme } from '../../ui/themes/deleteTheme';
-import { getAvailableThemes } from '../../ui/themes/getAvailableThemes';
-import { saveTheme } from '../../ui/themes/saveTheme';
-import { UpdateThemePreview } from '../../ui/themes/UpdateThemePreview';
-import { getTheme } from '../../ui/themes/getTheme';
-import { setTheme } from '../../ui/themes/setTheme';
-import { disableTheme } from '../../ui/themes/disableTheme';
-import { CloseThemeCreator, OpenThemeCreator } from '../../ui/ThemeCreator';
-import ShareTheme from '../../ui/themes/shareTheme';
-import sendThemeUpdate from '../sendThemeUpdate';
-import hideSensitiveContent from '../../ui/dev/hideSensitiveContent';
+import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
+import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
+import { saveTheme } from '@/seqta/ui/themes/saveTheme';
+import { UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview';
+import { getTheme } from '@/seqta/ui/themes/getTheme';
+import { setTheme } from '@/seqta/ui/themes/setTheme';
+import { disableTheme } from '@/seqta/ui/themes/disableTheme';
+import { CloseThemeCreator, OpenThemeCreator } from '@/seqta/ui/ThemeCreator';
+import ShareTheme from '@/seqta/ui/themes/shareTheme';
+import sendThemeUpdate from '@/seqta/utils/sendThemeUpdate';
+import hideSensitiveContent from '@/seqta/ui/dev/hideSensitiveContent';
export class MessageHandler {
constructor() {
diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts
index 73c63cf8..ad46b139 100644
--- a/src/seqta/utils/listeners/SettingsState.ts
+++ b/src/seqta/utils/listeners/SettingsState.ts
@@ -1,5 +1,5 @@
import browser from 'webextension-polyfill';
-import { SettingsState } from '../../../types/storage';
+import { SettingsState } from '@/types/storage';
type ChangeListener = (newValue: any, oldValue: any) => void;
diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts
index 2c802b4e..271cd2b9 100644
--- a/src/seqta/utils/listeners/StorageChanges.ts
+++ b/src/seqta/utils/listeners/StorageChanges.ts
@@ -1,5 +1,5 @@
import { settingsState } from './SettingsState';
-import { updateAllColors } from '../../ui/colors/Manager';
+import { updateAllColors } from '@/seqta/ui/colors/Manager';
import {
addShortcuts,
CreateBackground,
@@ -9,10 +9,10 @@ import {
FilterUpcomingAssessments,
RemoveBackground,
RemoveShortcutDiv,
-} from '../../../SEQTA';
-import { updateBgDurations } from '../../ui/Animation';
+} from '@/SEQTA';
+import { updateBgDurations } from '@/seqta/ui/Animation';
import browser from 'webextension-polyfill';
-import { CustomShortcut } from '../../../types/storage';
+import { CustomShortcut } from '@/types/storage';
export class StorageChangeHandler {
constructor() {
diff --git a/tsconfig.json b/tsconfig.json
index fdc28389..c000c2c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,7 @@
"paths": {
"@/*": ["./src/*"],
- "$lib": ["./lib/*"],
+ "$lib/*": ["./lib/*"],
}
},
}