diff --git a/src/App.vue b/src/App.vue
index 4abcf83..a88a794 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
+  <SiteHeader />
   <main
     rel="main"
   >
-    <SiteHeader />
     <RouterView />
-    <FooterComponent />
   </main>
+  <FooterComponent />
 </template>
 
 <script setup>
-import SiteHeader from './components/SiteHeader'
-import FooterComponent from './components/FooterComponent'
+import SiteHeader from '@/components/SiteHeader'
+import FooterComponent from '@/components/FooterComponent'
 </script>
 
 <style lang="scss">
diff --git a/src/components/SelectedProjects.vue b/src/components/SelectedProjects.vue
index 1c2d0fe..66ecc1c 100644
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -59,7 +59,7 @@
 import { defineProps, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
-import BaseButton from './buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { marked } from 'marked'
 
 defineProps({
@@ -92,7 +92,7 @@ function markdownToText (project) {
 </script>
 
 <style lang="scss" scoped>
-@import "scss/media";
+@import 'scss/media';
 
 .grid-project {
   animation: load-project 2s forwards;
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 80f55e4..4e12f4a 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -27,7 +27,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import Navigation from './NavigationHeader'
+import Navigation from '@/components/NavigationHeader'
 
 const store = useStore()
 const route = useRoute()
diff --git a/src/components/buttons/BaseButton.vue b/src/components/buttons/BaseButton.vue
index d2971bc..00bc029 100644
--- a/src/components/buttons/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@@ -33,7 +33,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-@import "../../../scss/btn";
+@import 'scss/btn';
 
 .btn {
   @include button($has-icon: true);
diff --git a/src/components/buttons/GhostButton.vue b/src/components/buttons/GhostButton.vue
index f3899b5..e4b5515 100644
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -25,7 +25,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import "../../../scss/btn";
+@import 'scss/btn';
 
 .btn {
   @include ghost-button();
diff --git a/src/components/sections/AboutSection.vue b/src/components/sections/AboutSection.vue
index 9ce9b9c..d14d27e 100644
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
diff --git a/src/components/sections/FavoriteProjects.vue b/src/components/sections/FavoriteProjects.vue
index 0de2236..b98420b 100644
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -24,8 +24,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import Projects from '../SelectedProjects'
-import GhostButton from '../buttons/GhostButton'
+import Projects from '@/components/SelectedProjects'
+import GhostButton from '@/components/buttons/GhostButton'
 
 const router = useRouter()
 
diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index 1711a04..f6a52c7 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../../buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { ref, reactive, watch, computed } from 'vue'
 
 function emailValidate (mailObj) {
diff --git a/src/main.js b/src/main.js
index cf6cc74..a427e49 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { store } from './store'
+import App from '@/App.vue'
+import router from '@/router'
+import { store } from '@/store'
 // import VueMeta from 'vue-meta'
 
 import '../scss/default.scss'
diff --git a/src/router/index.js b/src/router/index.js
index 1a7487e..c284d34 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/HomeView'
-import About from '../views/AboutView'
-import Projects from '../views/ProjectsView'
-import Project from '../views/ProjectView'
-import Contact from '../views/ContactView'
-import NotFound from '../views/NotFound'
+import Home from '@/views/HomeView'
+import About from '@/views/AboutView'
+import Projects from '@/views/ProjectsView'
+import Project from '@/views/ProjectView'
+import Contact from '@/views/ContactView'
+import NotFound from '@/views/NotFound'
 
 const mainTitle = 'kamilcraft.com'
 
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index e05b70c..97c2ef8 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -9,8 +9,8 @@
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import MailContact from '../components/sections/contacts/MailContact'
-import OtherContact from '../components/sections/contacts/OtherContact'
+import MailContact from '@/components/sections/contacts/MailContact'
+import OtherContact from '@/components/sections/contacts/OtherContact'
 
 const route = useRoute()
 const store = useStore()
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3677aed..eb327e5 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -10,9 +10,9 @@
 import { onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import About from '../components/sections/AboutSection'
-import ExperiencesSection from '../components/sections/ExperiencesSection'
-import FavoriteProjects from '../components/sections/FavoriteProjects'
+import About from '@/components/sections/AboutSection'
+import ExperiencesSection from '@/components/sections/ExperiencesSection'
+import FavoriteProjects from '@/components/sections/FavoriteProjects'
 
 const store = useStore()
 const route = useRoute()
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index b6f224a..323f9c8 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -28,7 +28,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
-import SelectedProjects from '../components/SelectedProjects'
+import SelectedProjects from '@/components/SelectedProjects'
 
 const store = useStore()
 
diff --git a/vue.config.js b/vue.config.js
index 6b8fe5e..1b7178f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,14 @@
+const path = require("path")
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
   publicPath: '/',
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'),
+      }
+    }
+  },
 })