refactor(build): replace paths aliases with relative paths

Using paths aliases starting with "@" can be confusing and can lead to
conflict with existings modules. I prefer to use relative paths to
avoid extra configuration in tools because of these aliases.

234 files changed, 436 insertions, 455 deletions

diff --git a/src/components/atoms/buttons/button-link.test.tsx b/src/components/atoms/buttons/button-link.test.tsx
index 5563964..a5aa7b1 100644
--- a/src/components/atoms/buttons/button-link.test.tsx
+++ b/src/components/atoms/buttons/button-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ButtonLink from './button-link';
 
 describe('ButtonLink', () => {
diff --git a/src/components/atoms/buttons/button.test.tsx b/src/components/atoms/buttons/button.test.tsx
index 073b940..90fca02 100644
--- a/src/components/atoms/buttons/button.test.tsx
+++ b/src/components/atoms/buttons/button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Button from './button';
 
 describe('Button', () => {
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index b702544..a46f55c 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .btn {
   display: inline-flex;
diff --git a/src/components/atoms/forms/boolean-field.module.scss b/src/components/atoms/forms/boolean-field.module.scss
index 3f0676e..f299ddd 100644
--- a/src/components/atoms/forms/boolean-field.module.scss
+++ b/src/components/atoms/forms/boolean-field.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .hidden {
   @include mix.visually-hidden;
diff --git a/src/components/atoms/forms/boolean-field.test.tsx b/src/components/atoms/forms/boolean-field.test.tsx
index fe314fb..b6fa625 100644
--- a/src/components/atoms/forms/boolean-field.test.tsx
+++ b/src/components/atoms/forms/boolean-field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import BooleanField from './boolean-field';
 
 describe('BooleanField', () => {
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
index 0cc8a60..26ad764 100644
--- a/src/components/atoms/forms/field.test.tsx
+++ b/src/components/atoms/forms/field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Field from './field';
 
 describe('Field', () => {
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
index 2171fde..3a055ed 100644
--- a/src/components/atoms/forms/form.test.tsx
+++ b/src/components/atoms/forms/form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Form from './form';
 
 describe('Form', () => {
diff --git a/src/components/atoms/forms/forms.module.scss b/src/components/atoms/forms/forms.module.scss
index 19c7aee..ece26e5 100644
--- a/src/components/atoms/forms/forms.module.scss
+++ b/src/components/atoms/forms/forms.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .item {
   margin: var(--spacing-xs) 0;
diff --git a/src/components/atoms/forms/label.test.tsx b/src/components/atoms/forms/label.test.tsx
index 9968946..761d3b4 100644
--- a/src/components/atoms/forms/label.test.tsx
+++ b/src/components/atoms/forms/label.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Label from './label';
 
 describe('Label', () => {
diff --git a/src/components/atoms/forms/select.test.tsx b/src/components/atoms/forms/select.test.tsx
index 542449c..ca9f6d3 100644
--- a/src/components/atoms/forms/select.test.tsx
+++ b/src/components/atoms/forms/select.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Select from './select';
 
 const selectOptions = [
diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
index a420bc1..1c898e6 100644
--- a/src/components/atoms/headings/heading.module.scss
+++ b/src/components/atoms/headings/heading.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .heading {
   color: var(--color-primary-dark);
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index 50cd843..e1eef77 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Heading from './heading';
 
 describe('Heading', () => {
diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss
index 76e6aea..6ee3364 100644
--- a/src/components/atoms/icons/arrow.module.scss
+++ b/src/components/atoms/icons/arrow.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   fill: var(--color-primary);
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
index 60a1679..9985717 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Arrow from './arrow';
 
 describe('Arrow', () => {
diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss
index c5d65eb..0731526 100644
--- a/src/components/atoms/icons/career.module.scss
+++ b/src/components/atoms/icons/career.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
index 3eb9bc8..0c47262 100644
--- a/src/components/atoms/icons/career.test.tsx
+++ b/src/components/atoms/icons/career.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Career from './career';
 
 describe('Career', () => {
diff --git a/src/components/atoms/icons/cc-by-sa.module.scss b/src/components/atoms/icons/cc-by-sa.module.scss
index e1b2100..14935b6 100644
--- a/src/components/atoms/icons/cc-by-sa.module.scss
+++ b/src/components/atoms/icons/cc-by-sa.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index cb05492..2bcb437 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import CCBySA from './cc-by-sa';
 
 describe('CCBySA', () => {
diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss
index 4a5d18d..a90391a 100644
--- a/src/components/atoms/icons/close.module.scss
+++ b/src/components/atoms/icons/close.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
index 658af9a..dc82a2d 100644
--- a/src/components/atoms/icons/close.test.tsx
+++ b/src/components/atoms/icons/close.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Close from './close';
 
 describe('Close', () => {
diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss
index 5201598..feda6ce 100644
--- a/src/components/atoms/icons/cog.module.scss
+++ b/src/components/atoms/icons/cog.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   width: var(--icon-size, #{fun.convert-px(40)});
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
index 1ce7f28..9d201b1 100644
--- a/src/components/atoms/icons/cog.test.tsx
+++ b/src/components/atoms/icons/cog.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Cog from './cog';
 
 describe('Cog', () => {
diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss
index 6c8f701..fcc4002 100644
--- a/src/components/atoms/icons/computer-screen.module.scss
+++ b/src/components/atoms/icons/computer-screen.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
index 0fb73c4..baa2c78 100644
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import ComputerScreen from './computer-screen';
 
 describe('ComputerScreen', () => {
diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss
index 202900b..584fe97 100644
--- a/src/components/atoms/icons/envelop.module.scss
+++ b/src/components/atoms/icons/envelop.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
index b25a977..c040134 100644
--- a/src/components/atoms/icons/envelop.test.tsx
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Envelop from './envelop';
 
 describe('Envelop', () => {
diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss
index 56a5253..bf15c23 100644
--- a/src/components/atoms/icons/feed.module.scss
+++ b/src/components/atoms/icons/feed.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
index fa24106..630089d 100644
--- a/src/components/atoms/icons/feed.test.tsx
+++ b/src/components/atoms/icons/feed.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Feed from './feed';
 
 describe('Feed', () => {
diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss
index 4fba4df..c92b3ab 100644
--- a/src/components/atoms/icons/hamburger.module.scss
+++ b/src/components/atoms/icons/hamburger.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   display: flex;
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index 5ce6733..4f6a457 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Hamburger from './hamburger';
 
 describe('Hamburger', () => {
diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss
index 48dcc6c..8ed05a0 100644
--- a/src/components/atoms/icons/home.module.scss
+++ b/src/components/atoms/icons/home.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
index 3688501..0473d0b 100644
--- a/src/components/atoms/icons/home.test.tsx
+++ b/src/components/atoms/icons/home.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Home from './home';
 
 describe('Home', () => {
diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss
index d14bec5..33a82d6 100644
--- a/src/components/atoms/icons/magnifying-glass.module.scss
+++ b/src/components/atoms/icons/magnifying-glass.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   width: var(--icon-size, #{fun.convert-px(40)});
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
index 2c031f3..c6ddb18 100644
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import MagnifyingGlass from './magnifying-glass';
 
 describe('MagnifyingGlass', () => {
diff --git a/src/components/atoms/icons/moon.module.scss b/src/components/atoms/icons/moon.module.scss
index e0b53d6..f2564a9 100644
--- a/src/components/atoms/icons/moon.module.scss
+++ b/src/components/atoms/icons/moon.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   fill: var(--color-primary-lighter);
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
index 18581e9..09415a9 100644
--- a/src/components/atoms/icons/moon.test.tsx
+++ b/src/components/atoms/icons/moon.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Moon from './moon';
 
 describe('Moon', () => {
diff --git a/src/components/atoms/icons/plus-minus.module.scss b/src/components/atoms/icons/plus-minus.module.scss
index c54db33..b46b5ba 100644
--- a/src/components/atoms/icons/plus-minus.module.scss
+++ b/src/components/atoms/icons/plus-minus.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: flex;
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 895a565..5105403 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import PlusMinus from './plus-minus';
 
 describe('PlusMinus', () => {
diff --git a/src/components/atoms/icons/posts-stack.module.scss b/src/components/atoms/icons/posts-stack.module.scss
index a22d265..aa1f4f0 100644
--- a/src/components/atoms/icons/posts-stack.module.scss
+++ b/src/components/atoms/icons/posts-stack.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
index 89064c7..65e0d3b 100644
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ b/src/components/atoms/icons/posts-stack.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import PostsStack from './posts-stack';
 
 describe('PostsStack', () => {
diff --git a/src/components/atoms/icons/sun.module.scss b/src/components/atoms/icons/sun.module.scss
index 5682aa3..8d9683f 100644
--- a/src/components/atoms/icons/sun.module.scss
+++ b/src/components/atoms/icons/sun.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .sun {
   fill: var(--color-primary-lighter);
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
index fe01f4f..af52a5f 100644
--- a/src/components/atoms/icons/sun.test.tsx
+++ b/src/components/atoms/icons/sun.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Sun from './sun';
 
 describe('Sun', () => {
diff --git a/src/components/atoms/images/logo.module.scss b/src/components/atoms/images/logo.module.scss
index f802a4b..bd4ee90 100644
--- a/src/components/atoms/images/logo.module.scss
+++ b/src/components/atoms/images/logo.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   width: var(--logo-size, fun.convert-px(100));
diff --git a/src/components/atoms/images/logo.test.tsx b/src/components/atoms/images/logo.test.tsx
index aabfd17..e56a737 100644
--- a/src/components/atoms/images/logo.test.tsx
+++ b/src/components/atoms/images/logo.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Logo from './logo';
 
 describe('Logo', () => {
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
index 95508b3..c722082 100644
--- a/src/components/atoms/layout/column.test.tsx
+++ b/src/components/atoms/layout/column.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Column from './column';
 
 const body =
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index a0e5347..5d5435c 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   --icon-size: #{fun.convert-px(70)};
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 612b114..25d54b0 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
-import CCBySA from '@components/atoms/icons/cc-by-sa';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CCBySA from '../icons/cc-by-sa';
 import CopyrightComponent from './copyright';
 
 /**
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 09392b6..c3eef67 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,5 +1,5 @@
-import CCBySA from '@components/atoms/icons/cc-by-sa';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import CCBySA from '../icons/cc-by-sa';
 import Copyright from './copyright';
 
 const dates = {
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
index 392fbd5..d9b9e57 100644
--- a/src/components/atoms/layout/main.test.tsx
+++ b/src/components/atoms/layout/main.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Main from './main';
 
 const id = 'main';
diff --git a/src/components/atoms/layout/no-script.module.scss b/src/components/atoms/layout/no-script.module.scss
index d8712af..b64edb9 100644
--- a/src/components/atoms/layout/no-script.module.scss
+++ b/src/components/atoms/layout/no-script.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .noscript {
   color: var(--color-primary-darker);
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
index 1b9e96f..4c62879 100644
--- a/src/components/atoms/layout/no-script.test.tsx
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import NoScript from './no-script';
 
 const message = 'A noscript message.';
diff --git a/src/components/atoms/layout/notice.module.scss b/src/components/atoms/layout/notice.module.scss
index 7fd972c..b532464 100644
--- a/src/components/atoms/layout/notice.module.scss
+++ b/src/components/atoms/layout/notice.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   padding: var(--spacing-2xs) var(--spacing-xs);
diff --git a/src/components/atoms/layout/notice.test.tsx b/src/components/atoms/layout/notice.test.tsx
index 8408d17..56b5f85 100644
--- a/src/components/atoms/layout/notice.test.tsx
+++ b/src/components/atoms/layout/notice.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Notice from './notice';
 
 const message = 'Tenetur consequuntur tempore.';
diff --git a/src/components/atoms/layout/section.module.scss b/src/components/atoms/layout/section.module.scss
index 012493a..8a33848 100644
--- a/src/components/atoms/layout/section.module.scss
+++ b/src/components/atoms/layout/section.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   @extend %grid;
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
index 2143b70..e31dc32 100644
--- a/src/components/atoms/layout/section.test.tsx
+++ b/src/components/atoms/layout/section.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Section from './section';
 
 const title = 'Section title';
diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss
index 5d36f18..31adb6f 100644
--- a/src/components/atoms/layout/sidebar.module.scss
+++ b/src/components/atoms/layout/sidebar.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   > *:not(:first-child) {
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
index 6fdb24a..c23c551 100644
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ b/src/components/atoms/layout/sidebar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Sidebar from './sidebar';
 
 const children = 'A widget';
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index bb5775f..4980a1c 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/variables" as var;
 
 /* stylelint-disable no-descending-specificity */
 .link {
diff --git a/src/components/atoms/links/link.test.tsx b/src/components/atoms/links/link.test.tsx
index 16d52d2..ef74821 100644
--- a/src/components/atoms/links/link.test.tsx
+++ b/src/components/atoms/links/link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Link from './link';
 
 describe('Link', () => {
diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss
index 241c9c3..acabcab 100644
--- a/src/components/atoms/links/nav-link.module.scss
+++ b/src/components/atoms/links/nav-link.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .link {
   --draw-border-thickness: #{fun.convert-px(4)};
diff --git a/src/components/atoms/links/nav-link.test.tsx b/src/components/atoms/links/nav-link.test.tsx
index b9a595a..a5f5b5f 100644
--- a/src/components/atoms/links/nav-link.test.tsx
+++ b/src/components/atoms/links/nav-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import NavLink from './nav-link';
 
 describe('NavLink', () => {
diff --git a/src/components/atoms/links/sharing-link.module.scss b/src/components/atoms/links/sharing-link.module.scss
index 26ca737..089fd13 100644
--- a/src/components/atoms/links/sharing-link.module.scss
+++ b/src/components/atoms/links/sharing-link.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .link {
   display: inline-flex;
diff --git a/src/components/atoms/links/sharing-link.test.tsx b/src/components/atoms/links/sharing-link.test.tsx
index 7989d04..0a8b87c 100644
--- a/src/components/atoms/links/sharing-link.test.tsx
+++ b/src/components/atoms/links/sharing-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SharingLink from './sharing-link';
 
 describe('SharingLink', () => {
diff --git a/src/components/atoms/links/social-link.module.scss b/src/components/atoms/links/social-link.module.scss
index 02fc61c..57dcf42 100644
--- a/src/components/atoms/links/social-link.module.scss
+++ b/src/components/atoms/links/social-link.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .link {
   display: flex;
diff --git a/src/components/atoms/links/social-link.test.tsx b/src/components/atoms/links/social-link.test.tsx
index b3f9a4c..b55dbcc 100644
--- a/src/components/atoms/links/social-link.test.tsx
+++ b/src/components/atoms/links/social-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SocialLink from './social-link';
 
 /**
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
index 464bc60..d0719a3 100644
--- a/src/components/atoms/links/social-link.tsx
+++ b/src/components/atoms/links/social-link.tsx
@@ -1,8 +1,8 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
-import TwitterIcon from '@assets/images/social-media/twitter.svg';
 import { FC } from 'react';
+import GithubIcon from '../../../assets/images/social-media/github.svg';
+import GitlabIcon from '../../../assets/images/social-media/gitlab.svg';
+import LinkedInIcon from '../../../assets/images/social-media/linkedin.svg';
+import TwitterIcon from '../../../assets/images/social-media/twitter.svg';
 import styles from './social-link.module.scss';
 
 export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
diff --git a/src/components/atoms/lists/description-list-item.test.tsx b/src/components/atoms/lists/description-list-item.test.tsx
index a505158..07632a6 100644
--- a/src/components/atoms/lists/description-list-item.test.tsx
+++ b/src/components/atoms/lists/description-list-item.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import DescriptionListItem from './description-list-item';
 
 const itemLabel = 'Repellendus corporis facilis';
diff --git a/src/components/atoms/lists/description-list.module.scss b/src/components/atoms/lists/description-list.module.scss
index 9e913d4..d31c88a 100644
--- a/src/components/atoms/lists/description-list.module.scss
+++ b/src/components/atoms/lists/description-list.module.scss
@@ -1,5 +1,3 @@
-@use "@styles/abstracts/mixins" as mix;
-
 .list {
   display: flex;
   column-gap: var(--spacing-md);
diff --git a/src/components/atoms/lists/description-list.test.tsx b/src/components/atoms/lists/description-list.test.tsx
index 22421b0..11b4965 100644
--- a/src/components/atoms/lists/description-list.test.tsx
+++ b/src/components/atoms/lists/description-list.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import DescriptionList, { DescriptionListItem } from './description-list';
 
 const items: DescriptionListItem[] = [
diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index 95f9b40..cbb391e 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .list {
   margin: 0;
diff --git a/src/components/atoms/lists/list.test.tsx b/src/components/atoms/lists/list.test.tsx
index 7cf9585..fbe56a4 100644
--- a/src/components/atoms/lists/list.test.tsx
+++ b/src/components/atoms/lists/list.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import List, { type ListItem } from './list';
 
 const items: ListItem[] = [
diff --git a/src/components/atoms/loaders/progress-bar.module.scss b/src/components/atoms/loaders/progress-bar.module.scss
index 878010a..ed64ceb 100644
--- a/src/components/atoms/loaders/progress-bar.module.scss
+++ b/src/components/atoms/loaders/progress-bar.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .progress {
   margin: var(--spacing-sm) auto var(--spacing-md);
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index bb28f41..0310aec 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ProgressBar from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
diff --git a/src/components/atoms/loaders/spinner.module.scss b/src/components/atoms/loaders/spinner.module.scss
index 8d818a2..3e05cb3 100644
--- a/src/components/atoms/loaders/spinner.module.scss
+++ b/src/components/atoms/loaders/spinner.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   display: flex;
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
index bfb0894..0bcc189 100644
--- a/src/components/atoms/loaders/spinner.test.tsx
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Spinner from './spinner';
 
 describe('Spinner', () => {
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 77ee97b..f5b3acd 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   .link {
diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx
index 827c2a8..c03ccb2 100644
--- a/src/components/molecules/buttons/back-to-top.test.tsx
+++ b/src/components/molecules/buttons/back-to-top.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import BackToTop from './back-to-top';
 
 describe('BackToTop', () => {
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index ad5c674..f422444 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,9 +1,9 @@
-import ButtonLink, {
-  type ButtonLinkProps,
-} from '@components/atoms/buttons/button-link';
-import Arrow from '@components/atoms/icons/arrow';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import ButtonLink, {
+  type ButtonLinkProps,
+} from '../../atoms/buttons/button-link';
+import Arrow from '../../atoms/icons/arrow';
 import styles from './back-to-top.module.scss';
 
 export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index 3c69221..689f1e6 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   transition: all 0.25s ease-in-out 0s;
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index 59f7be9..d1b5ed4 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -1,4 +1,3 @@
-import headingStories from '@components/atoms/headings/heading.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import HeadingButtonComponent from './heading-button';
diff --git a/src/components/molecules/buttons/heading-button.test.tsx b/src/components/molecules/buttons/heading-button.test.tsx
index d8da748..5dcc4cc 100644
--- a/src/components/molecules/buttons/heading-button.test.tsx
+++ b/src/components/molecules/buttons/heading-button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import HeadingButton from './heading-button';
 
 describe('HeadingButton', () => {
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 0ed9a76..cefd179 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,7 +1,7 @@
-import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
-import PlusMinus from '@components/atoms/icons/plus-minus';
 import { FC, SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
+import Heading, { type HeadingProps } from '../../atoms/headings/heading';
+import PlusMinus from '../../atoms/icons/plus-minus';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
diff --git a/src/components/molecules/buttons/help-button.module.scss b/src/components/molecules/buttons/help-button.module.scss
index 42d49f6..fb28b57 100644
--- a/src/components/molecules/buttons/help-button.module.scss
+++ b/src/components/molecules/buttons/help-button.module.scss
@@ -1,5 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .btn {
   padding: var(--spacing-xs);
diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx
index 0f8770e..67472f1 100644
--- a/src/components/molecules/buttons/help-button.test.tsx
+++ b/src/components/molecules/buttons/help-button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import HelpButton from './help-button';
 
 describe('Help', () => {
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index ec89f4e..6178317 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,6 +1,6 @@
-import Button, { type ButtonProps } from '@components/atoms/buttons/button';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
+import Button, { type ButtonProps } from '../../atoms/buttons/button';
 import styles from './help-button.module.scss';
 
 export type HelpButtonProps = Pick<
diff --git a/src/components/molecules/forms/ackee-toggle.test.tsx b/src/components/molecules/forms/ackee-toggle.test.tsx
index 5bcd018..a4d36b3 100644
--- a/src/components/molecules/forms/ackee-toggle.test.tsx
+++ b/src/components/molecules/forms/ackee-toggle.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import AckeeToggle from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx
index 67a3644..ba77c10 100644
--- a/src/components/molecules/forms/ackee-toggle.tsx
+++ b/src/components/molecules/forms/ackee-toggle.tsx
@@ -1,9 +1,9 @@
-import useLocalStorage from '@utils/hooks/use-local-storage';
-import useUpdateAckeeOptions, {
-  type AckeeOptions,
-} from '@utils/hooks/use-update-ackee-options';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import useLocalStorage from '../../../utils/hooks/use-local-storage';
+import useUpdateAckeeOptions, {
+  type AckeeOptions,
+} from '../../../utils/hooks/use-update-ackee-options';
 import RadioGroup, {
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
diff --git a/src/components/molecules/forms/fieldset.test.tsx b/src/components/molecules/forms/fieldset.test.tsx
index cfddc9e..aec7a51 100644
--- a/src/components/molecules/forms/fieldset.test.tsx
+++ b/src/components/molecules/forms/fieldset.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Fieldset from './fieldset';
 import { body, legend, Tooltip } from './fieldset.fixture';
 
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index 961ec6d..4cbf71d 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -1,4 +1,3 @@
-import useOnClickOutside from '@utils/hooks/use-on-click-outside';
 import {
   cloneElement,
   FC,
@@ -7,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import useOnClickOutside from '../../../utils/hooks/use-on-click-outside';
 import HelpButton from '../buttons/help-button';
 import Tooltip from '../modals/tooltip';
 import styles from './fieldset.module.scss';
diff --git a/src/components/molecules/forms/flipping-label.module.scss b/src/components/molecules/forms/flipping-label.module.scss
index e650ebe..b0452fe 100644
--- a/src/components/molecules/forms/flipping-label.module.scss
+++ b/src/components/molecules/forms/flipping-label.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .label {
   display: block;
diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx
index b8d17ec..9391fd2 100644
--- a/src/components/molecules/forms/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label.stories.tsx
@@ -1,6 +1,6 @@
-import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
+import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
 import FlippingLabel from './flipping-label';
 
 export default {
diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx
index a1aab97..61864fd 100644
--- a/src/components/molecules/forms/flipping-label.test.tsx
+++ b/src/components/molecules/forms/flipping-label.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import FlippingLabel from './flipping-label';
 
 describe('FlippingLabel', () => {
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
index 12f8d8d..ca83c6d 100644
--- a/src/components/molecules/forms/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -1,6 +1,6 @@
-import Label, { LabelProps } from '@components/atoms/forms/label';
-import Close from '@components/atoms/icons/close';
 import { FC } from 'react';
+import Label, { LabelProps } from '../../atoms/forms/label';
+import Close from '../../atoms/icons/close';
 import styles from './flipping-label.module.scss';
 
 export type FlippingLabelProps = Pick<
diff --git a/src/components/molecules/forms/labelled-boolean-field.test.tsx b/src/components/molecules/forms/labelled-boolean-field.test.tsx
index 7e01853..4e7728c 100644
--- a/src/components/molecules/forms/labelled-boolean-field.test.tsx
+++ b/src/components/molecules/forms/labelled-boolean-field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import LabelledBooleanField from './labelled-boolean-field';
 import { label } from './labelled-boolean-field.fixture';
 
diff --git a/src/components/molecules/forms/labelled-boolean-field.tsx b/src/components/molecules/forms/labelled-boolean-field.tsx
index 46eb080..661e549 100644
--- a/src/components/molecules/forms/labelled-boolean-field.tsx
+++ b/src/components/molecules/forms/labelled-boolean-field.tsx
@@ -1,8 +1,8 @@
+import { FC } from 'react';
 import BooleanField, {
   type BooleanFieldProps,
-} from '@components/atoms/forms/boolean-field';
-import Label, { type LabelProps } from '@components/atoms/forms/label';
-import { FC } from 'react';
+} from '../../atoms/forms/boolean-field';
+import Label, { type LabelProps } from '../../atoms/forms/label';
 import styles from './labelled-boolean-field.module.scss';
 
 export type LabelledBooleanFieldProps = Omit<
diff --git a/src/components/molecules/forms/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field.test.tsx
index 030ec7c..97681dc 100644
--- a/src/components/molecules/forms/labelled-field.test.tsx
+++ b/src/components/molecules/forms/labelled-field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import LabelledField from './labelled-field';
 
 describe('LabelledField', () => {
diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
index 6a00a3e..63c91fe 100644
--- a/src/components/molecules/forms/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field.tsx
@@ -1,6 +1,6 @@
-import Field, { type FieldProps } from '@components/atoms/forms/field';
-import Label from '@components/atoms/forms/label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
+import Field, { type FieldProps } from '../../atoms/forms/field';
+import Label from '../../atoms/forms/label';
 import styles from './labelled-field.module.scss';
 
 export type LabelledFieldProps = FieldProps & {
diff --git a/src/components/molecules/forms/labelled-select.test.tsx b/src/components/molecules/forms/labelled-select.test.tsx
index 1346e7c..3823117 100644
--- a/src/components/molecules/forms/labelled-select.test.tsx
+++ b/src/components/molecules/forms/labelled-select.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import LabelledSelect from './labelled-select';
 
 const selectOptions = [
diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx
index 23057d0..a12956c 100644
--- a/src/components/molecules/forms/labelled-select.tsx
+++ b/src/components/molecules/forms/labelled-select.tsx
@@ -1,6 +1,6 @@
-import Label, { type LabelProps } from '@components/atoms/forms/label';
-import Select, { type SelectProps } from '@components/atoms/forms/select';
 import { FC } from 'react';
+import Label, { type LabelProps } from '../../atoms/forms/label';
+import Select, { type SelectProps } from '../../atoms/forms/select';
 import styles from './labelled-select.module.scss';
 
 export type LabelledSelectProps = Omit<
diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx
index 8b66758..f6cf3ac 100644
--- a/src/components/molecules/forms/motion-toggle.test.tsx
+++ b/src/components/molecules/forms/motion-toggle.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import MotionToggle from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index ad47b33..7e150ca 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -1,7 +1,7 @@
-import useAttributes from '@utils/hooks/use-attributes';
-import useLocalStorage from '@utils/hooks/use-local-storage';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import useAttributes from '../../../utils/hooks/use-attributes';
+import useLocalStorage from '../../../utils/hooks/use-local-storage';
 import RadioGroup, {
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx
index 1fc537b..a488720 100644
--- a/src/components/molecules/forms/prism-theme-toggle.test.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import PrismThemeToggle from './prism-theme-toggle';
 
 describe('PrismThemeToggle', () => {
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 5a4d8a9..b058230 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -1,8 +1,11 @@
-import Moon from '@components/atoms/icons/moon';
-import Sun from '@components/atoms/icons/sun';
-import { type PrismTheme, usePrismTheme } from '@utils/providers/prism-theme';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import {
+  type PrismTheme,
+  usePrismTheme,
+} from '../../../utils/providers/prism-theme';
+import Moon from '../../atoms/icons/moon';
+import Sun from '../../atoms/icons/sun';
 import RadioGroup, {
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
diff --git a/src/components/molecules/forms/radio-group.module.scss b/src/components/molecules/forms/radio-group.module.scss
index f363d1b..cadff46 100644
--- a/src/components/molecules/forms/radio-group.module.scss
+++ b/src/components/molecules/forms/radio-group.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   &--inline {
diff --git a/src/components/molecules/forms/radio-group.test.tsx b/src/components/molecules/forms/radio-group.test.tsx
index fda505b..9fb4249 100644
--- a/src/components/molecules/forms/radio-group.test.tsx
+++ b/src/components/molecules/forms/radio-group.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import RadioGroup from './radio-group';
 import { getOptions, initialChoice, legend } from './radio-group.fixture';
 
diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx
index 3930908..7f47673 100644
--- a/src/components/molecules/forms/radio-group.tsx
+++ b/src/components/molecules/forms/radio-group.tsx
@@ -1,8 +1,6 @@
-import Fieldset, {
-  type FieldsetProps,
-} from '@components/molecules/forms/fieldset';
-import useStateChange from '@utils/hooks/use-state-change';
 import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react';
+import useStateChange from '../../../utils/hooks/use-state-change';
+import Fieldset, { type FieldsetProps } from '../forms/fieldset';
 import LabelledBooleanField, {
   type LabelledBooleanFieldProps,
 } from './labelled-boolean-field';
diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx
index 7c056b8..d379423 100644
--- a/src/components/molecules/forms/theme-toggle.test.tsx
+++ b/src/components/molecules/forms/theme-toggle.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ThemeToggle from './theme-toggle';
 
 describe('ThemeToggle', () => {
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 6a676a9..e0a6683 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -1,8 +1,8 @@
-import Moon from '@components/atoms/icons/moon';
-import Sun from '@components/atoms/icons/sun';
 import { useTheme } from 'next-themes';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import Moon from '../../atoms/icons/moon';
+import Sun from '../../atoms/icons/sun';
 import RadioGroup, {
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
diff --git a/src/components/molecules/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss
index 89b9499..b3b7c96 100644
--- a/src/components/molecules/images/flipping-logo.module.scss
+++ b/src/components/molecules/images/flipping-logo.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .logo {
   width: var(--logo-size, fun.convert-px(100));
diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx
index 4be69d1..c3ee492 100644
--- a/src/components/molecules/images/flipping-logo.test.tsx
+++ b/src/components/molecules/images/flipping-logo.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import FlippingLogo from './flipping-logo';
 
 describe('FlippingLogo', () => {
diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
index 0d59a55..a739b30 100644
--- a/src/components/molecules/images/flipping-logo.tsx
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -1,6 +1,6 @@
-import Logo, { type LogoProps } from '@components/atoms/images/logo';
 import Image, { type ImageProps } from 'next/image';
 import { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react';
+import Logo, { type LogoProps } from '../../atoms/images/logo';
 import styles from './flipping-logo.module.scss';
 
 export type FlippingLogoProps = {
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 7f5fafd..e4ed4aa 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .caption {
   margin: 0;
diff --git a/src/components/molecules/images/responsive-image.test.tsx b/src/components/molecules/images/responsive-image.test.tsx
index 9dafbc2..68e810b 100644
--- a/src/components/molecules/images/responsive-image.test.tsx
+++ b/src/components/molecules/images/responsive-image.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ResponsiveImage from './responsive-image';
 
 describe('ResponsiveImage', () => {
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 79e7db4..1160027 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -1,6 +1,6 @@
-import Link, { type LinkProps } from '@components/atoms/links/link';
 import Image, { type ImageProps } from 'next/image';
 import { FC, ReactNode } from 'react';
+import Link, { type LinkProps } from '../../atoms/links/link';
 import styles from './responsive-image.module.scss';
 
 export type ResponsiveImageProps = Omit<
diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
index 6121fa1..4d9e32c 100644
--- a/src/components/molecules/layout/branding.module.scss
+++ b/src/components/molecules/layout/branding.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 @mixin typing-animation {
   --typing-animation: none;
diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx
index f04b963..b3dfaa9 100644
--- a/src/components/molecules/layout/branding.test.tsx
+++ b/src/components/molecules/layout/branding.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Branding from './branding';
 
 describe('Branding', () => {
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index b351f12..10574ab 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,8 +1,8 @@
-import Heading from '@components/atoms/headings/heading';
-import useStyles from '@utils/hooks/use-styles';
 import Link from 'next/link';
 import { FC, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import useStyles from '../../../utils/hooks/use-styles';
+import Heading from '../../atoms/headings/heading';
 import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
 import styles from './branding.module.scss';
 
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 42e9192..8f9f4a5 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   --scale-up: 1.05;
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index 1023aeb..825ad41 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Card from './card';
 import { cover, id, meta, tagline, title, url } from './card.fixture';
 
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index d03b8b7..50431d8 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,7 +1,7 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
-import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
-import { type Image } from '@ts/types/app';
 import { FC } from 'react';
+import { type Image } from '../../../types/app';
+import ButtonLink from '../../atoms/buttons/button-link';
+import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
 import ResponsiveImage from '../images/responsive-image';
 import styles from './card.module.scss';
 import Meta, { type MetaData } from './meta';
diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss
index 1feeccc..2eaf9a2 100644
--- a/src/components/molecules/layout/code.module.scss
+++ b/src/components/molecules/layout/code.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   :global {
diff --git a/src/components/molecules/layout/code.test.tsx b/src/components/molecules/layout/code.test.tsx
index e270aac..b825fec 100644
--- a/src/components/molecules/layout/code.test.tsx
+++ b/src/components/molecules/layout/code.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Code from './code';
 
 const code = `
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 7e249d1..4eb9be3 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,8 +1,8 @@
+import { FC, useRef } from 'react';
 import usePrism, {
   type OptionalPrismPlugin,
   type PrismLanguage,
-} from '@utils/hooks/use-prism';
-import { FC, useRef } from 'react';
+} from '../../../utils/hooks/use-prism';
 import styles from './code.module.scss';
 
 export type CodeProps = {
diff --git a/src/components/molecules/layout/columns.module.scss b/src/components/molecules/layout/columns.module.scss
index b449c45..0d383e7 100644
--- a/src/components/molecules/layout/columns.module.scss
+++ b/src/components/molecules/layout/columns.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: grid;
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
index 2022fa4..7105bb9 100644
--- a/src/components/molecules/layout/columns.stories.tsx
+++ b/src/components/molecules/layout/columns.stories.tsx
@@ -1,5 +1,5 @@
-import Column from '@components/atoms/layout/column';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Column from '../../atoms/layout/column';
 import Columns from './columns';
 
 export default {
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
index 9e994ae..5a23d0d 100644
--- a/src/components/molecules/layout/columns.test.tsx
+++ b/src/components/molecules/layout/columns.test.tsx
@@ -1,5 +1,5 @@
-import Column from '@components/atoms/layout/column';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import Column from '../../atoms/layout/column';
 import Columns from './columns';
 
 const column1 =
diff --git a/src/components/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx
index c196457..ec62b18 100644
--- a/src/components/molecules/layout/columns.tsx
+++ b/src/components/molecules/layout/columns.tsx
@@ -1,5 +1,5 @@
-import Column from '@components/atoms/layout/column';
 import { FC, ReactComponentElement } from 'react';
+import Column from '../../atoms/layout/column';
 import styles from './columns.module.scss';
 
 export type ColumnsProps = {
diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
index 4194a6e..f572b65 100644
--- a/src/components/molecules/layout/meta.module.scss
+++ b/src/components/molecules/layout/meta.module.scss
@@ -1,5 +1,3 @@
-@use "@styles/abstracts/mixins" as mix;
-
 .value {
   word-break: break-all;
 }
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index c33680f..3a204c0 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,6 +1,6 @@
-import descriptionListItemStories from '@components/atoms/lists/description-list-item.stories';
-import descriptionListStories from '@components/atoms/lists/description-list.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import descriptionListItemStories from '../../atoms/lists/description-list-item.stories';
+import descriptionListStories from '../../atoms/lists/description-list.stories';
 import MetaComponent, { MetaData } from './meta';
 
 /**
diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx
index e01a0a1..e9deb23 100644
--- a/src/components/molecules/layout/meta.test.tsx
+++ b/src/components/molecules/layout/meta.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen } from '@tests/utils';
-import { getFormattedDate } from '@utils/helpers/dates';
+import { render, screen } from '../../../../tests/utils';
+import { getFormattedDate } from '../../../utils/helpers/dates';
 import Meta from './meta';
 
 const data = {
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 74bd4ff..48c0748 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -1,11 +1,14 @@
-import Link from '@components/atoms/links/link';
+import { FC, ReactNode } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  getFormattedDate,
+  getFormattedTime,
+} from '../../../utils/helpers/dates';
+import Link from '../../atoms/links/link';
 import DescriptionList, {
   type DescriptionListProps,
   type DescriptionListItem,
-} from '@components/atoms/lists/description-list';
-import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates';
-import { FC, ReactNode } from 'react';
-import { useIntl } from 'react-intl';
+} from '../../atoms/lists/description-list';
 
 export type CustomMeta = {
   label: string;
diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx
index f61cf20..baf13b2 100644
--- a/src/components/molecules/layout/page-footer.test.tsx
+++ b/src/components/molecules/layout/page-footer.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import PageFooter from './page-footer';
 
 describe('PageFooter', () => {
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
index 232023a..1a90fe5 100644
--- a/src/components/molecules/layout/page-header.module.scss
+++ b/src/components/molecules/layout/page-header.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   @extend %grid;
diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx
index 8e97669..9c737c7 100644
--- a/src/components/molecules/layout/page-header.test.tsx
+++ b/src/components/molecules/layout/page-header.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import PageHeader from './page-header';
 
 const title = 'Non nemo amet';
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 6759c7f..78d875e 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,5 +1,5 @@
-import Heading from '@components/atoms/headings/heading';
 import { FC, ReactNode } from 'react';
+import Heading from '../../atoms/headings/heading';
 import Meta, { type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
index 27d7ffd..1a601e5 100644
--- a/src/components/molecules/layout/widget.module.scss
+++ b/src/components/molecules/layout/widget.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .widget {
   display: flex;
diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx
index 5b6af57..47282a0 100644
--- a/src/components/molecules/layout/widget.test.tsx
+++ b/src/components/molecules/layout/widget.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Widget from './widget';
 
 const children = 'Widget body';
diff --git a/src/components/molecules/modals/modal.module.scss b/src/components/molecules/modals/modal.module.scss
index f57d33c..22ddb11 100644
--- a/src/components/molecules/modals/modal.module.scss
+++ b/src/components/molecules/modals/modal.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   padding: var(--spacing-md);
diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx
index a913d42..9297662 100644
--- a/src/components/molecules/modals/modal.test.tsx
+++ b/src/components/molecules/modals/modal.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Modal from './modal';
 
 const title = 'A custom title';
diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index 58f5fa0..76dab55 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -1,8 +1,8 @@
-import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
-import { type CogProps } from '@components/atoms/icons/cog';
-import { type MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass';
 import dynamic from 'next/dynamic';
 import { FC, ReactNode } from 'react';
+import Heading, { type HeadingProps } from '../../atoms/headings/heading';
+import { type CogProps } from '../../atoms/icons/cog';
+import { type MagnifyingGlassProps } from '../../atoms/icons/magnifying-glass';
 import styles from './modal.module.scss';
 
 export type Icons = 'cogs' | 'search';
@@ -30,11 +30,11 @@ export type ModalProps = {
   title?: string;
 };
 
-const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog'), {
+const CogIcon = dynamic<CogProps>(() => import('../../atoms/icons/cog'), {
   ssr: false,
 });
 const SearchIcon = dynamic<MagnifyingGlassProps>(
-  () => import('@components/atoms/icons/magnifying-glass'),
+  () => import('../../atoms/icons/magnifying-glass'),
   { ssr: false }
 );
 
diff --git a/src/components/molecules/modals/tooltip.module.scss b/src/components/molecules/modals/tooltip.module.scss
index 94aa3dd..0a177e5 100644
--- a/src/components/molecules/modals/tooltip.module.scss
+++ b/src/components/molecules/modals/tooltip.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   --title-height: #{fun.convert-px(40)};
diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx
index 0af7299..6bca281 100644
--- a/src/components/molecules/modals/tooltip.test.tsx
+++ b/src/components/molecules/modals/tooltip.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Tooltip from './tooltip';
 import { content, icon, title } from './tooltip.fixture';
 
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index 9801393..9beab86 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -1,5 +1,5 @@
-import List, { type ListItem } from '@components/atoms/lists/list';
 import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import List, { type ListItem } from '../../atoms/lists/list';
 import styles from './tooltip.module.scss';
 
 export type TooltipProps = {
diff --git a/src/components/molecules/nav/breadcrumb.module.scss b/src/components/molecules/nav/breadcrumb.module.scss
index c26f60a..c72e349 100644
--- a/src/components/molecules/nav/breadcrumb.module.scss
+++ b/src/components/molecules/nav/breadcrumb.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .list {
   @extend %reset-ordered-list;
diff --git a/src/components/molecules/nav/breadcrumb.test.tsx b/src/components/molecules/nav/breadcrumb.test.tsx
index 68638ef..f3a23b5 100644
--- a/src/components/molecules/nav/breadcrumb.test.tsx
+++ b/src/components/molecules/nav/breadcrumb.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Breadcrumb, { type BreadcrumbItem } from './breadcrumb';
 
 const items: BreadcrumbItem[] = [
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx
index d184d65..bc50f55 100644
--- a/src/components/molecules/nav/breadcrumb.tsx
+++ b/src/components/molecules/nav/breadcrumb.tsx
@@ -1,9 +1,9 @@
-import Link from '@components/atoms/links/link';
-import { settings } from '@utils/config';
 import Script from 'next/script';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { BreadcrumbList, ListItem, WithContext } from 'schema-dts';
+import { settings } from '../../../utils/config';
+import Link from '../../atoms/links/link';
 import styles from './breadcrumb.module.scss';
 
 export type BreadcrumbItem = {
diff --git a/src/components/molecules/nav/nav.module.scss b/src/components/molecules/nav/nav.module.scss
index 9c0f6de..a6d43bc 100644
--- a/src/components/molecules/nav/nav.module.scss
+++ b/src/components/molecules/nav/nav.module.scss
@@ -1,5 +1,4 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .nav {
   &__list {
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index f3a29a6..abf6882 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -1,6 +1,6 @@
-import Envelop from '@components/atoms/icons/envelop';
-import Home from '@components/atoms/icons/home';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Envelop from '../../atoms/icons/envelop';
+import Home from '../../atoms/icons/home';
 import NavComponent, { type NavItem } from './nav';
 
 /**
diff --git a/src/components/molecules/nav/nav.test.tsx b/src/components/molecules/nav/nav.test.tsx
index cf63ace..b0920c8 100644
--- a/src/components/molecules/nav/nav.test.tsx
+++ b/src/components/molecules/nav/nav.test.tsx
@@ -1,6 +1,6 @@
-import Envelop from '@components/atoms/icons/envelop';
-import Home from '@components/atoms/icons/home';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import Envelop from '../../atoms/icons/envelop';
+import Home from '../../atoms/icons/home';
 import Nav, { type NavItem } from './nav';
 
 const navItems: NavItem[] = [
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 581f813..71d459a 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -1,6 +1,6 @@
-import Link from '@components/atoms/links/link';
-import NavLink from '@components/atoms/links/nav-link';
 import { FC, ReactNode } from 'react';
+import Link from '../../atoms/links/link';
+import NavLink from '../../atoms/links/nav-link';
 import styles from './nav.module.scss';
 
 export type NavItem = {
diff --git a/src/components/molecules/nav/pagination.module.scss b/src/components/molecules/nav/pagination.module.scss
index 56c5bfc..4ffad5a 100644
--- a/src/components/molecules/nav/pagination.module.scss
+++ b/src/components/molecules/nav/pagination.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   .list {
diff --git a/src/components/molecules/nav/pagination.test.tsx b/src/components/molecules/nav/pagination.test.tsx
index f7ebffd..bf0e6c1 100644
--- a/src/components/molecules/nav/pagination.test.tsx
+++ b/src/components/molecules/nav/pagination.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Pagination from './pagination';
 
 const total = 50;
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index 604720e..e832e1d 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -1,6 +1,6 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
 import { FC, Fragment, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
+import ButtonLink from '../../atoms/buttons/button-link';
 import styles from './pagination.module.scss';
 
 export type PaginationProps = {
diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx
index cac9df7..10119ce 100644
--- a/src/components/organisms/forms/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import CommentForm from './comment-form';
 
 const saveComment = async () => {
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index b2c725f..a823977 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,13 +1,13 @@
-import Button from '@components/atoms/buttons/button';
-import Form, { type FormProps } from '@components/atoms/forms/form';
+import { FC, ReactNode, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Button from '../../atoms/buttons/button';
+import Form, { type FormProps } from '../../atoms/forms/form';
 import Heading, {
   type HeadingProps,
   type HeadingLevel,
-} from '@components/atoms/headings/heading';
-import Spinner from '@components/atoms/loaders/spinner';
-import LabelledField from '@components/molecules/forms/labelled-field';
-import { FC, ReactNode, useState } from 'react';
-import { useIntl } from 'react-intl';
+} from '../../atoms/headings/heading';
+import Spinner from '../../atoms/loaders/spinner';
+import LabelledField from '../../molecules/forms/labelled-field';
 import styles from './comment-form.module.scss';
 
 export type CommentFormData = {
diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx
index 521179a..def4346 100644
--- a/src/components/organisms/forms/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ContactForm from './contact-form';
 
 const props = {
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index 912402c..b8dcb5e 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -1,9 +1,9 @@
-import Button from '@components/atoms/buttons/button';
-import Form from '@components/atoms/forms/form';
-import Spinner from '@components/atoms/loaders/spinner';
-import LabelledField from '@components/molecules/forms/labelled-field';
 import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
+import Button from '../../atoms/buttons/button';
+import Form from '../../atoms/forms/form';
+import Spinner from '../../atoms/loaders/spinner';
+import LabelledField from '../../molecules/forms/labelled-field';
 import styles from './contact-form.module.scss';
 
 export type ContactFormData = {
diff --git a/src/components/organisms/forms/search-form.module.scss b/src/components/organisms/forms/search-form.module.scss
index 1d388a4..773a79f 100644
--- a/src/components/organisms/forms/search-form.module.scss
+++ b/src/components/organisms/forms/search-form.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: flex;
diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx
index e35c46f..0f79caf 100644
--- a/src/components/organisms/forms/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SearchForm from './search-form';
 
 describe('SearchForm', () => {
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index 1b5f662..a3cb6e4 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -1,12 +1,12 @@
-import Button from '@components/atoms/buttons/button';
-import Form from '@components/atoms/forms/form';
-import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
-import LabelledField, {
-  type LabelledFieldProps,
-} from '@components/molecules/forms/labelled-field';
 import { useRouter } from 'next/router';
 import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react';
 import { useIntl } from 'react-intl';
+import Button from '../../atoms/buttons/button';
+import Form from '../../atoms/forms/form';
+import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
+import LabelledField, {
+  type LabelledFieldProps,
+} from '../../molecules/forms/labelled-field';
 import styles from './search-form.module.scss';
 
 export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss
index a057ed9..f4faa63 100644
--- a/src/components/organisms/images/gallery.module.scss
+++ b/src/components/organisms/images/gallery.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   @extend %reset-list;
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 6fc278f..b1c308e 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -1,5 +1,5 @@
-import ResponsiveImage from '@components/molecules/images/responsive-image';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ResponsiveImage from '../../molecules/images/responsive-image';
 import Gallery from './gallery';
 
 /**
diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
index 1db3733..611262e 100644
--- a/src/components/organisms/images/gallery.test.tsx
+++ b/src/components/organisms/images/gallery.test.tsx
@@ -1,5 +1,5 @@
-import ResponsiveImage from '@components/molecules/images/responsive-image';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import ResponsiveImage from '../../molecules/images/responsive-image';
 import Gallery from './gallery';
 
 const columns = 3;
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
index 6c4a271..8b73ce1 100644
--- a/src/components/organisms/images/gallery.tsx
+++ b/src/components/organisms/images/gallery.tsx
@@ -1,5 +1,5 @@
-import { type ResponsiveImageProps } from '@components/molecules/images/responsive-image';
 import { Children, FC, ReactElement } from 'react';
+import { type ResponsiveImageProps } from '../../molecules/images/responsive-image';
 import styles from './gallery.module.scss';
 
 export type GalleryColumn = 2 | 3 | 4;
diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss
index 6274b93..ff79f33 100644
--- a/src/components/organisms/layout/cards-list.module.scss
+++ b/src/components/organisms/layout/cards-list.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   display: grid;
diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx
index f77ee83..6a0ff7c 100644
--- a/src/components/organisms/layout/cards-list.test.tsx
+++ b/src/components/organisms/layout/cards-list.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import CardsList, { type CardsListItem } from './cards-list';
 
 const items: CardsListItem[] = [
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index f6cb6ed..12ec7d9 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -1,9 +1,6 @@
-import List, {
-  type ListItem,
-  type ListProps,
-} from '@components/atoms/lists/list';
-import Card, { type CardProps } from '@components/molecules/layout/card';
 import { FC } from 'react';
+import List, { type ListItem, type ListProps } from '../../atoms/lists/list';
+import Card, { type CardProps } from '../../molecules/layout/card';
 import styles from './cards-list.module.scss';
 
 export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
diff --git a/src/components/organisms/layout/comment.fixture.tsx b/src/components/organisms/layout/comment.fixture.tsx
index 0118139..57a4389 100644
--- a/src/components/organisms/layout/comment.fixture.tsx
+++ b/src/components/organisms/layout/comment.fixture.tsx
@@ -1,4 +1,7 @@
-import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates';
+import {
+  getFormattedDate,
+  getFormattedTime,
+} from '../../../utils/helpers/dates';
 import { CommentProps } from './comment';
 
 export const author = {
diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss
index d2b68e1..f645354 100644
--- a/src/components/organisms/layout/comment.module.scss
+++ b/src/components/organisms/layout/comment.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   padding: var(--spacing-md);
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 7290c6c..5ea8c6f 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Comment from './comment';
 import {
   author,
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 3b58a79..23073ad 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -1,13 +1,13 @@
-import Button from '@components/atoms/buttons/button';
-import Link from '@components/atoms/links/link';
-import Meta from '@components/molecules/layout/meta';
-import { type SingleComment } from '@ts/types/app';
-import useSettings from '@utils/hooks/use-settings';
 import Image from 'next/image';
 import Script from 'next/script';
 import { FC, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { type Comment as CommentSchema, type WithContext } from 'schema-dts';
+import { type SingleComment } from '../../../types/app';
+import useSettings from '../../../utils/hooks/use-settings';
+import Button from '../../atoms/buttons/button';
+import Link from '../../atoms/links/link';
+import Meta from '../../molecules/layout/meta';
 import CommentForm, { type CommentFormProps } from '../forms/comment-form';
 import styles from './comment.module.scss';
 
diff --git a/src/components/organisms/layout/comments-list.fixture.tsx b/src/components/organisms/layout/comments-list.fixture.tsx
index f2a1d26..5842129 100644
--- a/src/components/organisms/layout/comments-list.fixture.tsx
+++ b/src/components/organisms/layout/comments-list.fixture.tsx
@@ -1,4 +1,4 @@
-import { SingleComment } from '@ts/types/app';
+import { SingleComment } from '../../../types/app';
 
 export const comments: SingleComment[] = [
   {
diff --git a/src/components/organisms/layout/comments-list.module.scss b/src/components/organisms/layout/comments-list.module.scss
index 803a418..f7a0cf0 100644
--- a/src/components/organisms/layout/comments-list.module.scss
+++ b/src/components/organisms/layout/comments-list.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .list {
   @extend %reset-ordered-list;
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
index 72c7eb9..ef4b4af 100644
--- a/src/components/organisms/layout/comments-list.test.tsx
+++ b/src/components/organisms/layout/comments-list.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import { saveComment } from './comment.fixture';
 import CommentsList from './comments-list';
 import { comments } from './comments-list.fixture';
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index deb0776..227f715 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -1,8 +1,6 @@
-import Comment, {
-  type CommentProps,
-} from '@components/organisms/layout/comment';
-import { SingleComment } from '@ts/types/app';
 import { FC } from 'react';
+import { SingleComment } from '../../../types/app';
+import Comment, { type CommentProps } from '../../organisms/layout/comment';
 import styles from './comments-list.module.scss';
 
 export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/footer.module.scss
index c180e86..a8bcd61 100644
--- a/src/components/organisms/layout/footer.module.scss
+++ b/src/components/organisms/layout/footer.module.scss
@@ -1,5 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: flex;
diff --git a/src/components/organisms/layout/footer.test.tsx b/src/components/organisms/layout/footer.test.tsx
index 1d451c7..0ba1a57 100644
--- a/src/components/organisms/layout/footer.test.tsx
+++ b/src/components/organisms/layout/footer.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Footer, { type FooterProps } from './footer';
 
 const copyright: FooterProps['copyright'] = {
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index c60afec..f67ad7d 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -1,12 +1,10 @@
-import Copyright, {
-  type CopyrightProps,
-} from '@components/atoms/layout/copyright';
-import BackToTop, {
-  type BackToTopProps,
-} from '@components/molecules/buttons/back-to-top';
-import Nav, { type NavItem } from '@components/molecules/nav/nav';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import Copyright, { type CopyrightProps } from '../../atoms/layout/copyright';
+import BackToTop, {
+  type BackToTopProps,
+} from '../../molecules/buttons/back-to-top';
+import Nav, { type NavItem } from '../../molecules/nav/nav';
 import styles from './footer.module.scss';
 
 export type FooterProps = {
diff --git a/src/components/organisms/layout/header.module.scss b/src/components/organisms/layout/header.module.scss
index a98cf45..573d455 100644
--- a/src/components/organisms/layout/header.module.scss
+++ b/src/components/organisms/layout/header.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: grid;
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx
index 1ef79e0..c7819c0 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/header.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Header from './header';
 
 const nav = [
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
index f6212c3..4e5e0f2 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/header.tsx
@@ -1,7 +1,5 @@
-import Branding, {
-  type BrandingProps,
-} from '@components/molecules/layout/branding';
 import { FC } from 'react';
+import Branding, { type BrandingProps } from '../../molecules/layout/branding';
 import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
 import styles from './header.module.scss';
 
diff --git a/src/components/organisms/layout/no-results.test.tsx b/src/components/organisms/layout/no-results.test.tsx
index 5576117..551b82f 100644
--- a/src/components/organisms/layout/no-results.test.tsx
+++ b/src/components/organisms/layout/no-results.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import NoResults from './no-results';
 
 describe('NoResults', () => {
diff --git a/src/components/organisms/layout/no-results.tsx b/src/components/organisms/layout/no-results.tsx
index 2245dbf..1b563da 100644
--- a/src/components/organisms/layout/no-results.tsx
+++ b/src/components/organisms/layout/no-results.tsx
@@ -1,8 +1,8 @@
-import SearchForm, {
-  type SearchFormProps,
-} from '@components/organisms/forms/search-form';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import SearchForm, {
+  type SearchFormProps,
+} from '../../organisms/forms/search-form';
 
 export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>;
 
diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss
index 5620513..e4f6a6a 100644
--- a/src/components/organisms/layout/overview.module.scss
+++ b/src/components/organisms/layout/overview.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   padding: var(--spacing-sm) var(--spacing-md);
diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx
index c096bad..72e4cc0 100644
--- a/src/components/organisms/layout/overview.test.tsx
+++ b/src/components/organisms/layout/overview.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Overview, { type OverviewMeta } from './overview';
 
 const cover = {
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index 04ec79a..e539731 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -1,8 +1,8 @@
+import { FC } from 'react';
 import ResponsiveImage, {
   type ResponsiveImageProps,
-} from '@components/molecules/images/responsive-image';
-import Meta, { type MetaData } from '@components/molecules/layout/meta';
-import { FC } from 'react';
+} from '../../molecules/images/responsive-image';
+import Meta, { type MetaData } from '../../molecules/layout/meta';
 import styles from './overview.module.scss';
 
 export type OverviewMeta = Pick<
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index b09bb12..64ad33f 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .section {
   &:not(:last-of-type) {
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 571c421..1d6bbcb 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import PostsList from './posts-list';
 import { posts, searchPage } from './posts-list.fixture';
 
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index e3788c7..dede7b6 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -1,14 +1,14 @@
-import Button from '@components/atoms/buttons/button';
-import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
-import ProgressBar from '@components/atoms/loaders/progress-bar';
-import Spinner from '@components/atoms/loaders/spinner';
-import Pagination, {
-  type PaginationProps,
-} from '@components/molecules/nav/pagination';
-import useIsMounted from '@utils/hooks/use-is-mounted';
-import useSettings from '@utils/hooks/use-settings';
 import { FC, Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import useIsMounted from '../../../utils/hooks/use-is-mounted';
+import useSettings from '../../../utils/hooks/use-settings';
+import Button from '../../atoms/buttons/button';
+import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
+import ProgressBar from '../../atoms/loaders/progress-bar';
+import Spinner from '../../atoms/loaders/spinner';
+import Pagination, {
+  type PaginationProps,
+} from '../../molecules/nav/pagination';
 import NoResults, { NoResultsProps } from './no-results';
 import styles from './posts-list.module.scss';
 import Summary, { type SummaryProps } from './summary';
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 62dfc0e..9530312 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: grid;
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
index bc69f3b..73f6df8 100644
--- a/src/components/organisms/layout/summary.test.tsx
+++ b/src/components/organisms/layout/summary.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Summary from './summary';
 import { cover, intro, meta, title, url } from './summary.fixture';
 
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 5d27862..f2031d5 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -1,15 +1,15 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
-import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
-import Arrow from '@components/atoms/icons/arrow';
-import Link from '@components/atoms/links/link';
-import ResponsiveImage, {
-  type ResponsiveImageProps,
-} from '@components/molecules/images/responsive-image';
-import Meta, { type MetaData } from '@components/molecules/layout/meta';
-import { type Article, type Meta as MetaType } from '@ts/types/app';
-import useReadingTime from '@utils/hooks/use-reading-time';
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
+import { type Article, type Meta as MetaType } from '../../../types/app';
+import useReadingTime from '../../../utils/hooks/use-reading-time';
+import ButtonLink from '../../atoms/buttons/button-link';
+import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
+import Arrow from '../../atoms/icons/arrow';
+import Link from '../../atoms/links/link';
+import ResponsiveImage, {
+  type ResponsiveImageProps,
+} from '../../molecules/images/responsive-image';
+import Meta, { type MetaData } from '../../molecules/layout/meta';
 import styles from './summary.module.scss';
 
 export type Cover = Pick<
diff --git a/src/components/organisms/modals/search-modal.module.scss b/src/components/organisms/modals/search-modal.module.scss
index aba0593..449aa91 100644
--- a/src/components/organisms/modals/search-modal.module.scss
+++ b/src/components/organisms/modals/search-modal.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   padding-bottom: var(--spacing-md);
diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx
index 7043d54..397c36f 100644
--- a/src/components/organisms/modals/search-modal.test.tsx
+++ b/src/components/organisms/modals/search-modal.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SearchModal from './search-modal';
 
 describe('SearchModal', () => {
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index ed6084a..08b28cb 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,6 +1,6 @@
-import Modal, { type ModalProps } from '@components/molecules/modals/modal';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
+import Modal, { type ModalProps } from '../../molecules/modals/modal';
 import SearchForm, { type SearchFormProps } from '../forms/search-form';
 import styles from './search-modal.module.scss';
 
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index fef3492..e9b3b85 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/variables" as var;
 
 .wrapper {
   width: 100%;
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 649d68b..4f0b79b 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,6 +1,6 @@
-import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
 import SettingsModal from './settings-modal';
 
 /**
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index 9277067..9e07175 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -1,6 +1,6 @@
-import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
 import SettingsModal from './settings-modal';
 
 describe('SettingsModal', () => {
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index d11dfe7..4e2b119 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,15 +1,15 @@
-import Form from '@components/atoms/forms/form';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import Form from '../../atoms/forms/form';
 import AckeeToggle, {
   AckeeToggleProps,
-} from '@components/molecules/forms/ackee-toggle';
+} from '../../molecules/forms/ackee-toggle';
 import MotionToggle, {
   MotionToggleProps,
-} from '@components/molecules/forms/motion-toggle';
-import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
-import ThemeToggle from '@components/molecules/forms/theme-toggle';
-import Modal, { type ModalProps } from '@components/molecules/modals/modal';
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
+} from '../../molecules/forms/motion-toggle';
+import PrismThemeToggle from '../../molecules/forms/prism-theme-toggle';
+import ThemeToggle from '../../molecules/forms/theme-toggle';
+import Modal, { type ModalProps } from '../../molecules/modals/modal';
 import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> &
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 24abc43..1b6b110 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .item {
   @include mix.media("screen") {
diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx
index 43b8666..47e7c38 100644
--- a/src/components/organisms/toolbar/main-nav.test.tsx
+++ b/src/components/organisms/toolbar/main-nav.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import MainNav from './main-nav';
 
 const items = [
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 5dd32f7..3a2fbf5 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,14 +1,11 @@
-import BooleanField, {
-  type BooleanFieldProps,
-} from '@components/atoms/forms/boolean-field';
-import Label from '@components/atoms/forms/label';
-import Hamburger from '@components/atoms/icons/hamburger';
-import Nav, {
-  type NavProps,
-  type NavItem,
-} from '@components/molecules/nav/nav';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '../../atoms/forms/boolean-field';
+import Label from '../../atoms/forms/label';
+import Hamburger from '../../atoms/icons/hamburger';
+import Nav, { type NavProps, type NavItem } from '../../molecules/nav/nav';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
index 23dbda9..bafb58d 100644
--- a/src/components/organisms/toolbar/search.test.tsx
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Search from './search';
 
 describe('Search', () => {
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 0ac82d9..90ee1b4 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,11 +1,11 @@
-import BooleanField, {
-  type BooleanFieldProps,
-} from '@components/atoms/forms/boolean-field';
-import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
-import FlippingLabel from '@components/molecules/forms/flipping-label';
-import useInputAutofocus from '@utils/hooks/use-input-autofocus';
 import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import useInputAutofocus from '../../../utils/hooks/use-input-autofocus';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '../../atoms/forms/boolean-field';
+import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
+import FlippingLabel from '../../molecules/forms/flipping-label';
 import SearchModal, { type SearchModalProps } from '../modals/search-modal';
 import searchStyles from './search.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss
index a46f28c..59c44f8 100644
--- a/src/components/organisms/toolbar/settings.module.scss
+++ b/src/components/organisms/toolbar/settings.module.scss
@@ -1,6 +1,3 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
 .item .tooltip {
   top: unset;
   bottom: calc(100% + var(--spacing-2xs));
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
index 9e91b09..44bed56 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Settings from './settings';
 
 describe('Settings', () => {
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 774de64..6dc73e4 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,10 +1,10 @@
-import BooleanField, {
-  type BooleanFieldProps,
-} from '@components/atoms/forms/boolean-field';
-import Cog from '@components/atoms/icons/cog';
-import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '../../atoms/forms/boolean-field';
+import Cog from '../../atoms/icons/cog';
+import FlippingLabel from '../../molecules/forms/flipping-label';
 import SettingsModal, {
   type SettingsModalProps,
 } from '../modals/settings-modal';
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index 86b4924..540844b 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .item {
   --btn-size: #{fun.convert-px(65)};
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index 60f41f1..1254f64 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/variables" as var;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   --toolbar-size: #{fun.convert-px(75)};
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 20f782a..01cc5ba 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Toolbar from './toolbar';
 
 const nav = [
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 50fc7f2..339dec4 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,6 +1,6 @@
-import useOnClickOutside from '@utils/hooks/use-on-click-outside';
-import useRouteChange from '@utils/hooks/use-route-change';
 import { FC, useState } from 'react';
+import useOnClickOutside from '../../../utils/hooks/use-on-click-outside';
+import useRouteChange from '../../../utils/hooks/use-route-change';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
 import Settings, { type SettingsProps } from '../toolbar/settings';
diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
index 0d69441..2174d5b 100644
--- a/src/components/organisms/widgets/image-widget.module.scss
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .figure {
   --scale-up: 1.02;
diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
index 6548584..b41e6a8 100644
--- a/src/components/organisms/widgets/image-widget.test.tsx
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ImageWidget from './image-widget';
 
 const description = 'Ut vitae sit';
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index 873337b..7ca5d90 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,8 +1,8 @@
+import { FC } from 'react';
 import ResponsiveImage, {
   type ResponsiveImageProps,
-} from '@components/molecules/images/responsive-image';
-import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { FC } from 'react';
+} from '../../molecules/images/responsive-image';
+import Widget, { type WidgetProps } from '../../molecules/layout/widget';
 import styles from './image-widget.module.scss';
 
 export type Alignment = 'left' | 'center' | 'right';
diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
index 4444df4..26f1549 100644
--- a/src/components/organisms/widgets/links-list-widget.module.scss
+++ b/src/components/organisms/widgets/links-list-widget.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/placeholders";
 
 .widget {
   .list {
diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx
index d695d68..8578040 100644
--- a/src/components/organisms/widgets/links-list-widget.test.tsx
+++ b/src/components/organisms/widgets/links-list-widget.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import LinksListWidget from './links-list-widget';
 
 const title = 'Voluptatem minus autem';
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index a9c677b..23392b9 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -1,11 +1,8 @@
-import Link from '@components/atoms/links/link';
-import List, {
-  type ListProps,
-  type ListItem,
-} from '@components/atoms/lists/list';
-import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { slugify } from '@utils/helpers/strings';
 import { FC } from 'react';
+import { slugify } from '../../../utils/helpers/strings';
+import Link from '../../atoms/links/link';
+import List, { type ListProps, type ListItem } from '../../atoms/lists/list';
+import Widget, { type WidgetProps } from '../../molecules/layout/widget';
 import styles from './links-list-widget.module.scss';
 
 export type LinksListItems = {
diff --git a/src/components/organisms/widgets/sharing.module.scss b/src/components/organisms/widgets/sharing.module.scss
index e06d4e3..24f6fc9 100644
--- a/src/components/organisms/widgets/sharing.module.scss
+++ b/src/components/organisms/widgets/sharing.module.scss
@@ -1,5 +1,3 @@
-@use "@styles/abstracts/mixins" as mix;
-
 .list {
   display: flex;
   flex-flow: row wrap;
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
index 88f72fe..f05a73b 100644
--- a/src/components/organisms/widgets/sharing.test.tsx
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Sharing, { type SharingData } from './sharing';
 
 const postData: SharingData = {
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index c63f5db..57578cb 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -1,9 +1,9 @@
-import SharingLink, {
-  type SharingMedium,
-} from '@components/atoms/links/sharing-link';
-import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import SharingLink, {
+  type SharingMedium,
+} from '../../atoms/links/sharing-link';
+import Widget, { type WidgetProps } from '../../molecules/layout/widget';
 import styles from './sharing.module.scss';
 
 export type SharingData = {
diff --git a/src/components/organisms/widgets/social-media.module.scss b/src/components/organisms/widgets/social-media.module.scss
index 01b6c0e..b7191be 100644
--- a/src/components/organisms/widgets/social-media.module.scss
+++ b/src/components/organisms/widgets/social-media.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .list {
   @extend %reset-list;
diff --git a/src/components/organisms/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx
index ec6c536..a9056af 100644
--- a/src/components/organisms/widgets/social-media.test.tsx
+++ b/src/components/organisms/widgets/social-media.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SocialMedia, { Media } from './social-media';
 
 const media: Media[] = [
diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
index 58b2f73..1a261a9 100644
--- a/src/components/organisms/widgets/social-media.tsx
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -1,8 +1,8 @@
+import { FC } from 'react';
 import SocialLink, {
   type SocialLinkProps,
-} from '@components/atoms/links/social-link';
-import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { FC } from 'react';
+} from '../../atoms/links/social-link';
+import Widget, { type WidgetProps } from '../../molecules/layout/widget';
 import styles from './social-media.module.scss';
 
 export type Media = SocialLinkProps;
diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx
index 92ae895..dd0338a 100644
--- a/src/components/organisms/widgets/table-of-contents.test.tsx
+++ b/src/components/organisms/widgets/table-of-contents.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import TableOfContents from './table-of-contents';
 
 describe('TableOfContents', () => {
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 800ff58..0c18f03 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -1,6 +1,8 @@
-import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import useHeadingsTree, {
+  type Heading,
+} from '../../../utils/hooks/use-headings-tree';
 import LinksListWidget, { type LinksListItems } from './links-list-widget';
 import styles from './table-of-contents.module.scss';
 
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 1080732..5b89341 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .header {
   border-bottom: fun.convert-px(3) solid var(--color-border-light);
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index eab7a2a..6b3818e 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Layout from './layout';
 
 const body =
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 2a10a30..cf35b5c 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -1,22 +1,22 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
-import Career from '@components/atoms/icons/career';
-import CCBySA from '@components/atoms/icons/cc-by-sa';
-import ComputerScreen from '@components/atoms/icons/computer-screen';
-import Envelop from '@components/atoms/icons/envelop';
-import Home from '@components/atoms/icons/home';
-import PostsStack from '@components/atoms/icons/posts-stack';
-import Main from '@components/atoms/layout/main';
-import NoScript from '@components/atoms/layout/no-script';
-import Footer, { type FooterProps } from '@components/organisms/layout/footer';
-import Header, { type HeaderProps } from '@components/organisms/layout/header';
-import { type NextPageWithLayoutOptions } from '@ts/types/app';
-import useRouteChange from '@utils/hooks/use-route-change';
-import useScrollPosition from '@utils/hooks/use-scroll-position';
-import useSettings from '@utils/hooks/use-settings';
 import Script from 'next/script';
 import { FC, ReactElement, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Person, SearchAction, WebSite, WithContext } from 'schema-dts';
+import { type NextPageWithLayoutOptions } from '../../../types/app';
+import useRouteChange from '../../../utils/hooks/use-route-change';
+import useScrollPosition from '../../../utils/hooks/use-scroll-position';
+import useSettings from '../../../utils/hooks/use-settings';
+import ButtonLink from '../../atoms/buttons/button-link';
+import Career from '../../atoms/icons/career';
+import CCBySA from '../../atoms/icons/cc-by-sa';
+import ComputerScreen from '../../atoms/icons/computer-screen';
+import Envelop from '../../atoms/icons/envelop';
+import Home from '../../atoms/icons/home';
+import PostsStack from '../../atoms/icons/posts-stack';
+import Main from '../../atoms/layout/main';
+import NoScript from '../../atoms/layout/no-script';
+import Footer, { type FooterProps } from '../../organisms/layout/footer';
+import Header, { type HeaderProps } from '../../organisms/layout/header';
 import photo from '/public/armand-philippot.jpg';
 import styles from './layout.module.scss';
 
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index c7674ae..d29df2c 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .breadcrumb {
   @extend %grid;
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 06c6c24..5fc5063 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,12 +1,12 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
-import Heading from '@components/atoms/headings/heading';
-import Link from '@components/atoms/links/link';
-import { comments } from '@components/organisms/layout/comments-list.fixture';
-import PostsList from '@components/organisms/layout/posts-list';
-import { posts } from '@components/organisms/layout/posts-list.fixture';
-import LinksListWidget from '@components/organisms/widgets/links-list-widget';
-import Sharing from '@components/organisms/widgets/sharing';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ButtonLink from '../../atoms/buttons/button-link';
+import Heading from '../../atoms/headings/heading';
+import Link from '../../atoms/links/link';
+import { comments } from '../../organisms/layout/comments-list.fixture';
+import PostsList from '../../organisms/layout/posts-list';
+import { posts } from '../../organisms/layout/posts-list.fixture';
+import LinksListWidget from '../../organisms/widgets/links-list-widget';
+import Sharing from '../../organisms/widgets/sharing';
 import { LayoutBase } from '../layout/layout.stories';
 import PageLayoutComponent from './page-layout';
 
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index b5480d8..316ff58 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -1,6 +1,6 @@
-import { comments } from '@components/organisms/layout/comments-list.fixture';
-import { render, screen } from '@tests/utils';
 import { BreadcrumbList } from 'schema-dts';
+import { render, screen } from '../../../../tests/utils';
+import { comments } from '../../organisms/layout/comments-list.fixture';
 import PageLayout from './page-layout';
 
 const title = 'Incidunt ad earum';
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index d53f53d..6792724 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -1,30 +1,30 @@
-import Heading from '@components/atoms/headings/heading';
-import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
-import Sidebar from '@components/atoms/layout/sidebar';
-import { MetaData } from '@components/molecules/layout/meta';
+import Script from 'next/script';
+import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { BreadcrumbList } from 'schema-dts';
+import { sendComment } from '../../../services/graphql/comments';
+import { SendCommentInput } from '../../../types/graphql/mutations';
+import useIsMounted from '../../../utils/hooks/use-is-mounted';
+import Heading from '../../atoms/headings/heading';
+import Notice, { type NoticeKind } from '../../atoms/layout/notice';
+import Sidebar from '../../atoms/layout/sidebar';
+import { MetaData } from '../../molecules/layout/meta';
 import PageFooter, {
   type PageFooterProps,
-} from '@components/molecules/layout/page-footer';
+} from '../../molecules/layout/page-footer';
 import PageHeader, {
   type PageHeaderProps,
-} from '@components/molecules/layout/page-header';
+} from '../../molecules/layout/page-header';
 import Breadcrumb, {
   type BreadcrumbItem,
-} from '@components/molecules/nav/breadcrumb';
+} from '../../molecules/nav/breadcrumb';
 import CommentForm, {
   type CommentFormProps,
-} from '@components/organisms/forms/comment-form';
+} from '../../organisms/forms/comment-form';
 import CommentsList, {
   type CommentsListProps,
-} from '@components/organisms/layout/comments-list';
-import TableOfContents from '@components/organisms/widgets/table-of-contents';
-import { sendComment } from '@services/graphql/comments';
-import { SendCommentInput } from '@ts/types/graphql/mutations';
-import useIsMounted from '@utils/hooks/use-is-mounted';
-import Script from 'next/script';
-import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { BreadcrumbList } from 'schema-dts';
+} from '../../organisms/layout/comments-list';
+import TableOfContents from '../../organisms/widgets/table-of-contents';
 import styles from './page-layout.module.scss';
 
 export type PageLayoutProps = {
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
index 73d7224..a7f19cc 100644
--- a/src/components/templates/sectioned/sectioned-layout.test.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import { BreadcrumbList } from 'schema-dts';
 import SectionedLayout from './sectioned-layout';
 
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index f91c354..7fcad63 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -1,10 +1,10 @@
-import Section, {
-  type SectionProps,
-  type SectionVariant,
-} from '@components/atoms/layout/section';
 import Script from 'next/script';
 import { FC } from 'react';
 import { BreadcrumbList } from 'schema-dts';
+import Section, {
+  type SectionProps,
+  type SectionVariant,
+} from '../../atoms/layout/section';
 
 export type Section = Pick<SectionProps, 'content' | 'title'>;