diff --git a/src/api/apiService.ts b/src/api/apiService.ts
index ab47898..553d651 100644
--- a/src/api/apiService.ts
+++ b/src/api/apiService.ts
@@ -1,5 +1,4 @@
 import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from "axios";
-
 class ApiService {
   async callApi(config: AxiosRequestConfig): Promise<AxiosPromise<AxiosResponse>> {
     return axios.request(config);
diff --git a/src/components/App/App.test.tsx b/src/components/App/App.test.tsx
index 0d26919..215d71f 100644
--- a/src/components/App/App.test.tsx
+++ b/src/components/App/App.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import renderConnected from "../../utilities/test/renderConnected";
+import renderConnected from "utilities/test/renderConnected";
 
 import App from "./App";
 
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index a7bca60..09fd880 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,13 +1,13 @@
 import React, { FC, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { fetchUserById } from "../../state/userProfile/actions";
-import { getUsername } from "../../state/userProfile/selectors";
+import { fetchUserById } from "state/userProfile/actions";
+import { getUsername } from "state/userProfile/selectors";
 
 import Loader from "../Loader/Loader";
 import UserHeader from "../UserHeader/UserHeader";
 
-import "../../styles/app.scss";
+import "styles/app.scss";
 
 const App: FC = () => {
   const dispatch = useDispatch();
diff --git a/src/components/UserHeader/UserHeader.test.tsx b/src/components/UserHeader/UserHeader.test.tsx
index 90501f7..3ebb33c 100644
--- a/src/components/UserHeader/UserHeader.test.tsx
+++ b/src/components/UserHeader/UserHeader.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { screen } from "@testing-library/react";
-import renderConnected from "../../utilities/test/renderConnected";
+import renderConnected from "utilities/test/renderConnected";
 
 import UserHeader from "./UserHeader";
 
diff --git a/src/components/UserHeader/UserHeader.tsx b/src/components/UserHeader/UserHeader.tsx
index 8f6862b..960e2c7 100644
--- a/src/components/UserHeader/UserHeader.tsx
+++ b/src/components/UserHeader/UserHeader.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { useSelector } from "react-redux";
 
-import { getUsername } from "../../state/userProfile/selectors";
+import { getUsername } from "state/userProfile/selectors";
 
 const UserHeader: FC = () => {
   const userName = useSelector(getUsername);
diff --git a/src/index.tsx b/src/index.tsx
index 305dd19..a961e10 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 
-import store from "./state/store";
-import App from "./components/App/App";
+import store from "state/store";
+import App from "components/App/App";
 
 render(
   <Provider store={store}>
diff --git a/src/state/userProfile/actions.ts b/src/state/userProfile/actions.ts
index 2d06d5c..77c141c 100644
--- a/src/state/userProfile/actions.ts
+++ b/src/state/userProfile/actions.ts
@@ -1,6 +1,6 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
-import ApiService from "../../api/apiService";
-import apiConfig from "../../api/apiConfig";
+import ApiService from "api/apiService";
+import apiConfig from "api/apiConfig";
 
 export const fetchUserById = createAsyncThunk("users/fetchById", async () => {
   const response = await ApiService.callApi({
diff --git a/tsconfig.json b/tsconfig.json
index ec353f3..a6a8924 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,13 @@
     "outDir": "./dist",
     "jsx": "react",
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  },
-}
\ No newline at end of file
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "api/*": ["./src/api/*"],
+      "components/*": ["./src/components/*"],
+      "state/*": ["./src/state/*"],
+      "styles/*": ["./src/styles/*"],
+      "utilities/*": ["./src/utilities/*"]
+    }
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 5ce4a9e..606639e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,9 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-const buildPath = path.join(__dirname, './dist');
-const sourcePath = path.join(__dirname, './src');
-const publicPath = path.join(__dirname, './public');
+const buildPath = path.join(__dirname, "./dist");
+const sourcePath = path.join(__dirname, "./src");
+const publicPath = path.join(__dirname, "./public");
 
 module.exports = () => ({
   entry: {
@@ -11,13 +11,13 @@ module.exports = () => ({
   },
   output: {
     path: buildPath,
-    filename: '[name].[hash].js',
-    chunkFilename: '[name].[hash].js',
+    filename: "[name].[hash].js",
+    chunkFilename: "[name].[hash].js",
   },
-  mode: 'development',
-  devtool: 'source-map',
+  mode: "development",
+  devtool: "source-map",
   devServer: {
-    contentBase: './dist',
+    contentBase: "./dist",
     historyApiFallback: true,
     compress: true,
     open: true,
@@ -29,8 +29,15 @@ module.exports = () => ({
     minimize: false,
   },
   resolve: {
-    modules: ['node_modules'],
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: ["node_modules"],
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    alias: {
+      api: path.resolve(sourcePath, "api/"),
+      components: path.resolve(sourcePath, "components/"),
+      state: path.resolve(sourcePath, "state/"),
+      styles: path.resolve(sourcePath, "styles/"),
+      utilities: path.resolve(sourcePath, "utilities/"),
+    },
   },
   module: {
     rules: [
@@ -38,23 +45,23 @@ module.exports = () => ({
         test: /\.(ts)x?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'ts-loader',
+          loader: "ts-loader",
         },
       },
       {
         test: /\.(scss|css)$/,
         use: [
           {
-            loader: 'style-loader',
+            loader: "style-loader",
           },
           {
-            loader: 'css-loader',
+            loader: "css-loader",
           },
           {
-            loader: 'postcss-loader',
+            loader: "postcss-loader",
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },
@@ -67,9 +74,9 @@ module.exports = () => ({
 
   plugins: [
     new HtmlWebpackPlugin({
-      chunks: ['vendor', 'app'],
-      filename: 'index.html',
-      template: path.join(publicPath, '/index.html'),
+      chunks: ["vendor", "app"],
+      filename: "index.html",
+      template: path.join(publicPath, "/index.html"),
     }),
   ],
 });