diff --git a/src/api/category.ts b/src/api/category.ts
index 6a85119..69aed03 100644
--- a/src/api/category.ts
+++ b/src/api/category.ts
@@ -1,4 +1,4 @@
-import categoryData from "../data/categories.json";
+import categoryData from "@/data/categories.json";
 
 export function getCategories() {
   return categoryData;
diff --git a/src/components/CategoryList.test.tsx b/src/components/CategoryList.test.tsx
index 49d6139..f762115 100644
--- a/src/components/CategoryList.test.tsx
+++ b/src/components/CategoryList.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 import CategoryList from "./CategoryList";
 
 const categories: ICategory[] = [
diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index e4c98cf..12f8fb5 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -1,6 +1,6 @@
 import CategoryListItem from "./CategoryListItem";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 interface CategoryListProps {
   categories: ICategory[];
diff --git a/src/components/CategoryListItem.test.tsx b/src/components/CategoryListItem.test.tsx
index 45f6d27..ee42891 100644
--- a/src/components/CategoryListItem.test.tsx
+++ b/src/components/CategoryListItem.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 import CategoryListItem from "./CategoryListItem";
 
 const category: ICategory = { id: 1, title: "hats", imageUrl: "some-url" };
diff --git a/src/components/CategoryListItem.tsx b/src/components/CategoryListItem.tsx
index ec8574e..f157f6b 100644
--- a/src/components/CategoryListItem.tsx
+++ b/src/components/CategoryListItem.tsx
@@ -1,4 +1,4 @@
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 interface CategoryItemProps {
   category: ICategory;
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
index 1e32db0..634fb43 100644
--- a/src/components/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 
-import CrownLogo from "../assets/crown.svg";
+import CrownLogo from "@/assets/crown.svg";
 
 export default function NavigationBar() {
   return (
diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx
index 17724f0..51c0064 100644
--- a/src/components/UI/Button.tsx
+++ b/src/components/UI/Button.tsx
@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
-import tw from "../../utils/tw-identity";
+
+import tw from "@/utils/tw-identity";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
diff --git a/src/components/UI/FormInput.tsx b/src/components/UI/FormInput.tsx
index b6e57d0..1d0c3be 100644
--- a/src/components/UI/FormInput.tsx
+++ b/src/components/UI/FormInput.tsx
@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from "react";
 
-import tw from "../../utils/tw-identity";
+import tw from "@/utils/tw-identity";
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
diff --git a/src/components/authentication/SignInForm.test.tsx b/src/components/authentication/SignInForm.test.tsx
index 019a748..9c106c6 100644
--- a/src/components/authentication/SignInForm.test.tsx
+++ b/src/components/authentication/SignInForm.test.tsx
@@ -9,7 +9,7 @@ const mockedMethods = vi.hoisted(function () {
   };
 });
 
-vi.mock("../../utils/firebase", function () {
+vi.mock("@/utils/firebase", function () {
   return {
     signInAuthUserWithEmailAndPassword: mockedMethods.signInAuthUserFn,
   };
diff --git a/src/components/authentication/SignInForm.tsx b/src/components/authentication/SignInForm.tsx
index b551533..a3fcc29 100644
--- a/src/components/authentication/SignInForm.tsx
+++ b/src/components/authentication/SignInForm.tsx
@@ -1,8 +1,8 @@
 import { AuthError, getRedirectResult } from "firebase/auth";
 import { ChangeEvent, FormEvent, useEffect, useState } from "react";
 
-import Button from "../UI/Button";
-import FormInput from "../UI/FormInput";
+import Button from "@/components/UI/Button";
+import FormInput from "@/components/UI/FormInput";
 
 import {
   auth,
@@ -10,7 +10,7 @@ import {
   signInAuthUserWithEmailAndPassword,
   signInWithGooglePopup,
   signInWithGoogleRedirect,
-} from "../../utils/firebase";
+} from "@/utils/firebase";
 
 const INITIAL_FORM_FIELDS = {
   email: "",
diff --git a/src/components/authentication/SignUpForm.test.tsx b/src/components/authentication/SignUpForm.test.tsx
index ec515fd..4fca3b6 100644
--- a/src/components/authentication/SignUpForm.test.tsx
+++ b/src/components/authentication/SignUpForm.test.tsx
@@ -10,7 +10,7 @@ const mockedMethods = vi.hoisted(function () {
   };
 });
 
-vi.mock("../../utils/firebase", function () {
+vi.mock("@/utils/firebase", function () {
   return {
     createAuthUserWithEmailAndPassword: mockedMethods.createAuthUserFn,
     createUserDocumentFromAuth: mockedMethods.createUserDocumentFn,
diff --git a/src/components/authentication/SignUpForm.tsx b/src/components/authentication/SignUpForm.tsx
index 48b645a..ae750b8 100644
--- a/src/components/authentication/SignUpForm.tsx
+++ b/src/components/authentication/SignUpForm.tsx
@@ -1,13 +1,13 @@
 import { AuthError } from "firebase/auth";
 import { ChangeEvent, FormEvent, useState } from "react";
 
-import Button from "../UI/Button";
-import FormInput from "../UI/FormInput";
+import Button from "@/components/UI/Button";
+import FormInput from "@/components/UI/FormInput";
 
 import {
   createAuthUserWithEmailAndPassword,
   createUserDocumentFromAuth,
-} from "../../utils/firebase";
+} from "@/utils/firebase";
 
 const INITIAL_FORM_FIELDS = {
   displayName: "",
diff --git a/src/pages/AuthenticationPage.tsx b/src/pages/AuthenticationPage.tsx
index 7640a01..32f6f01 100644
--- a/src/pages/AuthenticationPage.tsx
+++ b/src/pages/AuthenticationPage.tsx
@@ -1,5 +1,5 @@
-import SignInForm from "../components/authentication/SignInForm";
-import SignUpForm from "../components/authentication/SignUpForm";
+import SignInForm from "@/components/authentication/SignInForm";
+import SignUpForm from "@/components/authentication/SignUpForm";
 
 export default function AuthenticationPage() {
   return (
diff --git a/src/pages/HomePage.test.tsx b/src/pages/HomePage.test.tsx
index 68ffb5e..cc1174a 100644
--- a/src/pages/HomePage.test.tsx
+++ b/src/pages/HomePage.test.tsx
@@ -1,9 +1,9 @@
 import { render } from "@testing-library/react";
 
-import * as CategoryList from "../components/CategoryList";
+import * as CategoryList from "@/components/CategoryList";
 import HomePage from "./HomePage";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 const { categories } = vi.hoisted(function () {
   const categories: ICategory[] = [
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 622a54d..bb50046 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,8 +1,8 @@
 import { useLoaderData } from "react-router-dom";
 
-import CategoryList from "../components/CategoryList";
+import CategoryList from "@/components/CategoryList";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 export default function HomePage() {
   const categories = useLoaderData() as ICategory[];
diff --git a/src/pages/layouts/RootLayout.tsx b/src/pages/layouts/RootLayout.tsx
index c8c49c5..a962fcf 100644
--- a/src/pages/layouts/RootLayout.tsx
+++ b/src/pages/layouts/RootLayout.tsx
@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { Outlet } from "react-router-dom";
-import NavigationBar from "../../components/NavigationBar";
+
+import NavigationBar from "@/components/NavigationBar";
 
 export default function RootLayout() {
   return (
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
index 56d3734..7cb2ce6 100644
--- a/src/utils/firebase.ts
+++ b/src/utils/firebase.ts
@@ -16,7 +16,7 @@ import {
   setDoc,
 } from "firebase/firestore";
 
-import firebaseApp from "../config/firebase";
+import firebaseApp from "@/config/firebase";
 
 const FIREBASE_AUTH_EMULATOR = import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_HOST;
 
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 7942253..fd18eb5 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -20,6 +20,9 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
+
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "include": ["src"]
diff --git a/vite.config.ts b/vite.config.ts
index 0102d67..4a44b63 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,7 @@
 /// <reference types="vitest" />
 
+import path from "path";
+
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import svgr, { VitePluginSvgrOptions } from "vite-plugin-svgr";
@@ -22,4 +24,9 @@ export default defineConfig({
     setupFiles: "./tests/setup.ts",
     exclude: [...configDefaults.exclude, "./firebase", "./config"],
   },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
 });