diff --git a/package-lock.json b/package-lock.json
index 65ce5bf..84de6cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/vue-fontawesome": "^3.0.1",
         "core-js": "^3.8.3",
+        "marked": "^4.0.18",
         "vue": "^3.2.37",
         "vue-meta": "^2.4.0",
         "vue-router": "^4.1.2",
@@ -7414,6 +7415,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/marked": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -12800,7 +12812,8 @@
     "@fortawesome/vue-fontawesome": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
-      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A=="
+      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
+      "requires": {}
     },
     "@hapi/hoek": {
       "version": "9.3.0",
@@ -13462,7 +13475,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13973,13 +13987,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -14038,7 +14054,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -14839,7 +14856,8 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
       "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.1",
@@ -15010,7 +15028,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -16436,7 +16455,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17072,6 +17092,11 @@
         "semver": "^6.0.0"
       }
     },
+    "marked": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw=="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -17817,25 +17842,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17925,7 +17954,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -17960,7 +17990,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -19834,7 +19865,8 @@
           "version": "8.8.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
           "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -19961,7 +19993,8 @@
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
       "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
diff --git a/package.json b/package.json
index 8f11371..ed44282 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "core-js": "^3.8.3",
+    "marked": "^4.0.18",
     "vue": "^3.2.37",
     "vue-meta": "^2.4.0",
     "vue-router": "^4.1.2",
diff --git a/src/App.vue b/src/App.vue
index 1df3c52..795af5e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,19 @@
 <template>
-  <main rel="main" id="app">
+  <main
+    id="app"
+    rel="main"
+  >
     <SiteHeader />
-    <router-view />
-    <Footer />
+    <RouterView />
+    <FooterComponent />
   </main>
 </template>
 
+<script setup>
+import SiteHeader from './components/SiteHeader'
+import FooterComponent from './components/FooterComponent'
+</script>
+
 <style lang="scss">
 #app {
   font-family: var(--font-family);
@@ -14,16 +22,3 @@
   color: var(--text-color);
 }
 </style>
-
-<script>
-import SiteHeader from './components/SiteHeader'
-import Footer from './components/Footer'
-
-export default {
-  name: 'App',
-  components: {
-    SiteHeader,
-    Footer
-  }
-}
-</script>
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index df4af2f..5de3cf1 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,19 +1,34 @@
 <template>
-  <button class="btn" :class="{ 'btn-reverse': isReverse }">
-    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
-    <span><slot></slot></span>
+  <button
+    class="btn"
+    :class="{ 'btn-reverse': isReverse }"
+  >
+    <font-awesome-icon
+      v-if="hasIcon && icon"
+      class="icon"
+      :icon="icon"
+    />
+    <span><slot /></span>
   </button>
 </template>
 
-<script>
-export default {
-  name: 'BaseButton',
-  props: {
-    hasIcon: Boolean,
-    icon: String,
-    isReverse: Boolean
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  isReverse: {
+    type: Boolean,
+    default: false
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Footer.vue b/src/components/FooterComponent.vue
similarity index 66%
rename from src/components/Footer.vue
rename to src/components/FooterComponent.vue
index d738d31..70ff017 100644
--- a/src/components/Footer.vue
+++ b/src/components/FooterComponent.vue
@@ -1,27 +1,43 @@
 <template>
   <footer class="footer">
     <div class="footer_container">
-      <div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
+      <div class="container_logo">
+        Kamil<span class="logo_element">Craft</span>
+      </div>
       <ul class="socials">
-        <li class="social_link"
-            v-for="link in socialLinks"
-            :key="link.title.slug">
-          <a class="link"
-             :href="link.link"
-             :title="link.title"
-             target="_blank"
-             rel="noopener nofollow noreferrer">
-            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
+        <li
+          v-for="link in socialLinks"
+          :key="link.title.slug"
+          class="social_link"
+        >
+          <a
+            class="link"
+            :href="link.link"
+            :title="link.title"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+          >
+            <font-awesome-icon
+              class="icon"
+              :icon="['fab', link.icon]"
+            />
             <span class="social_title">{{ link.title }}</span>
             <span class="social_shortcut">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>
     </div>
-    <div class="container"></div>
+    <div class="container" />
   </footer>
 </template>
 
+<script setup>
+const socialLinks = [
+  { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
+  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
+]
+</script>
+
 <style lang="scss" scoped>
 @import "scss/default";
 
@@ -104,17 +120,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  name: 'Footer',
-  data () {
-    return {
-      socialLinks: [
-        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
-        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
-      ]
-    }
-  }
-}
-</script>
diff --git a/src/components/GhostButton.vue b/src/components/GhostButton.vue
index 737be06..43c36e9 100644
--- a/src/components/GhostButton.vue
+++ b/src/components/GhostButton.vue
@@ -1,21 +1,27 @@
 <template>
   <button class="btn">
-    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
-    <span><slot></slot></span>
+    <font-awesome-icon
+      v-if="hasIcon && icon"
+      class="icon"
+      :icon="icon"
+    />
+    <span><slot /></span>
   </button>
 </template>
 
-<script>
-export default {
-  name: 'GhostButton',
-  props: {
-    hasIcon: {
-      type: Boolean,
-      default: false
-    },
-    icon: String
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/HomePageElement.vue b/src/components/HomePageElement.vue
index 12ccf7c..dacad94 100644
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="hello">
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ route.meta.title }}</h1>
     <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
   </div>
 </template>
 
+<script setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
 <style scoped lang="scss">
   h1 {
     margin: 30px 0 20px;
diff --git a/src/components/Navigation.vue b/src/components/NavigationHeader.vue
similarity index 57%
rename from src/components/Navigation.vue
rename to src/components/NavigationHeader.vue
index fb25a62..8f69a2b 100644
--- a/src/components/Navigation.vue
+++ b/src/components/NavigationHeader.vue
@@ -1,28 +1,110 @@
 <template>
-  <div class="container" :class="{'container-menu-active': clickedStatus}">
+  <div
+    class="container"
+    :class="{ 'container-menu-active': isClicked }"
+  >
     <router-link to="/">
-      <div class="logo" @click="linkClicked">Kamil<span class="logo-element">Craft</span></div>
+      <div
+        class="logo"
+        @click="linkClicked"
+      >
+        Kamil<span class="logo-element">Craft</span>
+      </div>
     </router-link>
     <nav class="nav">
-      <button class="nav-btn" @click="clickMenu">
-        <font-awesome-icon v-if="!clicked" icon="bars"></font-awesome-icon>
-        <font-awesome-icon v-else icon="times"></font-awesome-icon>
+      <button
+        class="nav-btn"
+        @click="clickMenu"
+      >
+        <font-awesome-icon
+          v-if="!isClicked"
+          icon="bars"
+        />
+        <font-awesome-icon
+          v-else
+          icon="times"
+        />
       </button>
-      <ul class="site-menu" :class="{'menu-clicked': clicked}">
-        <li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked">
-          <router-link :to="menuItem.uri">{{ menuItem.title }}</router-link>
+      <ul
+        class="site-menu"
+        :class="{ 'menu-clicked': isClicked }"
+      >
+        <li
+          v-for="menuItem in menuItems"
+          :key="menuItem.slug"
+          class="menu-element"
+          @click="linkClicked"
+        >
+          <RouterLink :to="menuItem.uri">
+            {{ menuItem.title }}
+          </RouterLink>
         </li>
       </ul>
     </nav>
   </div>
 </template>
 
+<script setup>
+import { ref, computed } from 'vue'
+
+const menuItems = [
+  {
+    slug: 'start',
+    title: 'Start',
+    uri: '/'
+  },
+  {
+    slug: 'projects',
+    title: 'Projekty',
+    uri: '/projects'
+  },
+  {
+    slug: 'about',
+    title: 'O mnie',
+    uri: '/about'
+  },
+  {
+    slug: 'contact',
+    title: 'Kontakt',
+    uri: '/contact'
+  }
+]
+
+const clicked = ref(false)
+const isClicked = computed(() => clicked.value)
+
+function changeClickedStatus() {
+  clicked.value = !clicked.value
+}
+
+function clickMenu() {
+  changeClickedStatus()
+}
+
+function linkClicked() {
+  if (isClicked.value) {
+    changeClickedStatus()
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 @import "scss/media";
 
-.sub-page > .container .nav-btn,
-.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
-  color: #8D8D8D;
+.sub-page > .container {
+  .nav-btn {
+    color: #8D8D8D;
+  }
+
+  .nav .site-menu .menu-element {
+    a:not([class|=router-link]) {
+      color: #8D8D8D;
+
+      &:hover {
+        color: #A2CF00;
+      }
+    }
+  }
 }
 .container {
   display: flex;
@@ -143,55 +225,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  name: 'SiteHeader',
-  data () {
-    return {
-      menuItems: [
-        {
-          slug: 'start',
-          title: 'Start',
-          uri: '/'
-        },
-        {
-          slug: 'projects',
-          title: 'Projekty',
-          uri: '/projects'
-        },
-        {
-          slug: 'about',
-          title: 'O mnie',
-          uri: '/about'
-        },
-        {
-          slug: 'contact',
-          title: 'Kontakt',
-          uri: '/contact'
-        }
-      ],
-      clicked: false,
-      publicPath: process.env.VUE_APP_BASE_URL + '/'
-    }
-  },
-  computed: {
-    clickedStatus () {
-      return this.clicked
-    }
-  },
-  methods: {
-    changeClickedStatus () {
-      this.clicked = !this.clicked
-    },
-    clickMenu () {
-      this.changeClickedStatus()
-    },
-    linkClicked () {
-      if (this.clicked) {
-        this.changeClickedStatus()
-      }
-    }
-  }
-}
-</script>
diff --git a/src/components/SelectedProjects.vue b/src/components/SelectedProjects.vue
index 28f151c..262f2f2 100644
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,29 +1,88 @@
 <template>
   <div class="projects">
-    <slot></slot>
+    <slot />
     <div class="container">
-      <div class="project"
-           v-for="project in projects"
-           :key="project.title.slug">
-        <img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" />
-        <img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" />
+      <div
+        v-for="project in projects"
+        :key="project.title.slug"
+        class="project"
+      >
+        <img
+          v-if="project.images.small"
+          class="project_image"
+          :src="project.images.small"
+          :alt="project.title"
+        >
+        <img
+          v-else-if="project.images.large"
+          class="project_image"
+          :src="project.images.large"
+          :alt="project.title"
+        >
         <div class="project_content">
-          <h3 class="project_title">{{ project.title }}</h3>
-          <div class="project_release">{{ project.version }}</div>
-          <div class="project_description" v-html="markdownToText(project)"></div>
+          <h3 class="project_title">
+            {{ project.title }}
+          </h3>
+          <div class="project_release">
+            {{ project.version }}
+          </div>
+          <div
+            class="project_description"
+            v-html="markdownToText(project)"
+          />
         </div>
         <div class="more-button">
-          <base-btn has-icon
-                    icon="eye"
-                    is-reverse
-                    @click.native="$router.push({ name: 'Project', params: { id: project.id } })"
-                    class="btn">O projekcie</base-btn>
+          <BaseButton
+            has-icon
+            icon="eye"
+            is-reverse
+            class="btn"
+            @click="router.push({ name: 'Project', params: { id: project.id } })"
+          >
+            O projekcie
+          </BaseButton>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { defineProps, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import BaseButton from './BaseButton'
+import { marked } from 'marked'
+
+defineProps({
+  projects: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Witam Państwa na podstronie z moimi projektami!'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+function markdownToText (project) {
+  const projectText = marked.parse(project.description)
+  const nodeElement = document.createElement('div')
+  nodeElement.innerHTML = projectText
+  return nodeElement.querySelector('p').innerText.substr(0, 350)
+}
+</script>
+
 <style lang="scss">
 @import "scss/media";
 
@@ -178,40 +237,3 @@
   }
 }
 </style>
-
-<script>
-import BaseButton from './BaseButton'
-import { marked } from 'marked'
-
-export default {
-  name: 'SelectedProjects',
-  data () {
-    return {}
-  },
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: [
-        'Witam Państwa na podstronie z moimi projektami!'
-      ]
-    }
-    this.$store.commit('setHeader', header)
-  },
-  methods: {
-    markdownToText (project) {
-      const projectText = marked.parse(project.description)
-      const nodeElement = document.createElement('div')
-      nodeElement.innerHTML = projectText
-      return nodeElement.querySelector('p').innerText.substr(0, 350)
-    }
-  },
-  props: {
-    projects: {
-      type: Array
-    }
-  },
-  components: {
-    'base-btn': BaseButton
-  }
-}
-</script>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index ca2e214..25a0f60 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,48 +1,45 @@
 <template>
   <header :class="thisClass">
-    <navigation/>
-    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+    <navigation />
+    <div
+      v-if="isTitle"
+      class="header-info"
+      :class="{ 'header-info-home': isHome }"
+    >
       <h1>{{ getTitle }}</h1>
-      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
-      <p v-else-if="isDescription && descriptionType === 'array'"
-         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+      <p v-if="isDescription && descriptionType === 'string'">
+        {{ getDescription }}
+      </p>
+      <p
+        v-for="(desc, key) in getDescription"
+        v-else-if="isDescription && descriptionType === 'array'"
+        :key="key"
+      >
+        {{ desc }}
+      </p>
     </div>
   </header>
 </template>
 
-<script>
-import Navigation from '@/components/Navigation'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import Navigation from './NavigationHeader'
 
-export default {
-  name: 'SiteHeader',
-  computed: {
-    isHome () {
-      return this.$route.path === '/'
-    },
-    thisClass () {
-      return [this.isHome ? 'home-page' : 'sub-page']
-    },
-    getTitle () {
-      return this.$store.getters.getHeader.title
-    },
-    isTitle () {
-      return this.getTitle !== null
-    },
-    getDescription () {
-      return this.$store.getters.getHeader.description
-    },
-    descriptionType () {
-      const isArray = this.getDescription instanceof Array
-      return isArray ? 'array' : typeof this.getDescription
-    },
-    isDescription () {
-      return this.getDescription !== null
-    }
-  },
-  components: {
-    navigation: Navigation
-  }
-}
+const store = useStore()
+const route = useRoute()
+
+const isHome = computed(() => route.path === '/')
+const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
+const getTitle = computed(() => store.getters.getHeader.title)
+const isTitle = computed(() => getTitle.value !== null)
+const getDescription = computed(() => store.getters.getHeader.description)
+const isDescription = computed(() => getDescription.value !== null)
+const descriptionType = computed(() => {
+  const isArray = getDescription.value instanceof Array
+  return isArray ? 'array' : typeof getDescription.value
+})
 </script>
 
 <style lang="scss">
diff --git a/src/components/sections/About.vue b/src/components/sections/AboutSection.vue
similarity index 68%
rename from src/components/sections/About.vue
rename to src/components/sections/AboutSection.vue
index 63a74fc..7c702f0 100644
--- a/src/components/sections/About.vue
+++ b/src/components/sections/AboutSection.vue
@@ -3,23 +3,37 @@
     <div class="container">
       <div id="grid">
         <div id="grid-text">
-          <h2 class="name">Kamil Niemczycki</h2>
-          <div class="tagline">Web Developer</div>
-          <p>Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
-            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</p>
+          <h2 class="name">
+            Kamil Niemczycki
+          </h2>
+          <div class="tagline">
+            Web Developer
+          </div>
+          <p>
+            Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+          </p>
           <div class="buttons">
-            <base-btn has-icon
-                      icon="portrait"
-                      is-reverse
-                      @click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
-            <base-btn has-icon
-                      icon="user"
-                      @click.native="$router.push('about')">Więcej o mnie</base-btn>
+            <BaseButton
+              has-icon
+              icon="portrait"
+              is-reverse
+              @click="scrollTo('.selected-projects')"
+            >
+              Wybrane projekty
+            </BaseButton>
+            <BaseButton
+              has-icon
+              icon="user"
+              @click="router.push('about')"
+            >
+              Więcej o mnie
+            </BaseButton>
           </div>
         </div>
         <div id="grid-photo">
           <figure id="about-photo">
-            <img :src="`${publicPath}assets/me.jpg`" />
+            <img :src="`${publicPath}assets/me.jpg`">
           </figure>
         </div>
       </div>
@@ -27,6 +41,20 @@
   </div>
 </template>
 
+<script setup>
+import BaseButton from '../BaseButton'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
 <style lang="scss">
 @import "scss/media";
 
@@ -122,24 +150,3 @@
   }
 }
 </style>
-<script>
-import BaseButton from '../BaseButton'
-
-export default {
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/'
-    }
-  },
-  methods: {
-    scrollTo (id) {
-      document.querySelector(id).scrollIntoView({
-        behavior: 'smooth'
-      })
-    }
-  },
-  components: {
-    'base-btn': BaseButton
-  }
-}
-</script>
diff --git a/src/components/sections/Experiences.vue b/src/components/sections/Experiences.vue
deleted file mode 100644
index 26e334b..0000000
--- a/src/components/sections/Experiences.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <div class="experiences">
-    <div class="container">
-      <h2>Wykorzystywane technologie</h2>
-      <p>
-        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
-        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
-        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
-      </p>
-      <div class="skills">
-        <div v-for="(skill, key) in list" :key="key" class="skill-group">
-          <header class="skill-header">
-            <div class="tech-icons">
-              <font-awesome-icon
-                v-for="(icon, keyIcon) in skill.icons"
-                :key="keyIcon" :class="icon.class"
-                :icon="['fab', icon.name]"
-                :alt="icon.alt"
-                :title="icon.title" />
-            </div>
-            <h3>{{ skill.header }}</h3>
-          </header>
-          <p v-if="skill.showMore || skill.description.length < 200">{{ skill.description }}</p>
-          <p v-else>{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a></p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Experiences',
-  data () {
-    return {
-      list: []
-    }
-  },
-  mounted () {
-    this.list = [
-      {
-        icons: [
-          {
-            class: 'icon-php',
-            name: 'php',
-            alt: 'Ikona przedstawiająca język PHP',
-            title: 'Ikona PHP'
-          },
-          {
-            class: 'icon-laravel',
-            name: 'laravel',
-            alt: 'Ikona przedstawiająca framework Laravel',
-            title: 'Ikona Laravel'
-          }
-        ],
-        header: 'PHP & Laravel',
-        showMore: false,
-        description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
-        przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
-        walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
-        w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
-      },
-      {
-        icons: [
-          {
-            class: 'icon-js',
-            name: 'js-square',
-            alt: 'Ikona przedstawiająca język JavaScript',
-            title: 'Ikona JavaScript'
-          }
-        ],
-        header: 'JavaScript Vanilla',
-        showMore: false,
-        description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
-        przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
-      },
-      {
-        icons: [
-          {
-            class: 'icon-vue',
-            name: 'vuejs',
-            alt: 'Ikona przedstawiająca framework Vue.js',
-            title: 'Ikona Vue.js'
-          }
-        ],
-        header: 'Vue',
-        showMore: false,
-        description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
-        wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
-        przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
-      },
-      {
-        icons: [
-          {
-            class: 'icon-html5',
-            name: 'html5',
-            alt: 'Ikona przedstawiająca HTML5',
-            title: 'Ikona HTML5'
-          },
-          {
-            class: 'icon-css3',
-            name: 'css3-alt',
-            alt: 'Ikona przedstawiająca CSS3',
-            title: 'Ikona CSS3'
-          }
-        ],
-        header: 'HTML & CSS',
-        showMore: false,
-        description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
-        spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
-        przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
-        i klienta (czas).`
-      },
-      {
-        icons: [
-          {
-            class: 'icon-node',
-            name: 'node',
-            alt: 'Ikona przedstawiająca Node.js',
-            title: 'Ikona Node.js'
-          }
-        ],
-        header: 'Node.js',
-        showMore: false,
-        description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
-        JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
-        aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
-      },
-      {
-        icons: [
-          {
-            class: 'icon-sass',
-            name: 'sass',
-            alt: 'Ikona przedstawiająca Sass',
-            title: 'Ikona Sass'
-          }
-        ],
-        header: 'Sass',
-        showMore: false,
-        description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
-        przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
-        przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
-      }
-    ]
-  },
-  methods: {
-    parseText (text) {
-      let shortText = text.substr(0, 200)
-      if (shortText.slice(-1) === ' ') {
-        shortText = text.substr(0, 199)
-      }
-      return shortText
-    },
-    changeMoreStatus (skill) {
-      skill.showMore = !skill.showMore
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "scss/media";
-
-.experiences {
-  .container {
-    padding-top: 45px;
-    padding-bottom: 45px;
-
-    .skills {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      column-gap: 20px;
-      row-gap: 20px;
-      margin-top: 15px;
-
-      .skill-group {
-        background-color: #fafafa;
-        padding: 15px;
-        border-radius: 5px;
-
-        .tech-icons {
-          font-size: 1.8em;
-          margin-bottom: 3px;
-
-          & > svg[class*='icon'] {
-            margin-right: 10px;
-
-            &:last-child {
-              margin-right: 0;
-            }
-          }
-        }
-        h3 {
-          font-size: 1.2em;
-          line-height: 1.6em;
-          font-weight: bold;
-        }
-        .skill-list {
-          margin-block: auto;
-          padding-inline: inherit;
-          margin-left: 5px;
-          list-style-type: initial;
-        }
-        p {
-          font-size: .9em;
-
-          a {
-            color: #8D8D8D;
-            cursor: pointer;
-          }
-        }
-        &:hover {
-          background-color: rgba(0, 0, 0, .03);
-        }
-      }
-
-      @include media-small {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      @include media-tablet {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @include media-mobile {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-  }
-}
-.icon-js {
-  color: #F1DE4F;
-}
-.icon-php {
-  color: #777bb3;
-}
-.icon-laravel {
-  color: #FF2D20;
-}
-.icon-vue {
-  color: #64B687;
-}
-.icon-html5 {
-  color: #DE6E3C;
-}
-.icon-node {
-  color: #64B687;
-}
-.icon-css3 {
-  color: #53A7DC;
-}
-.icon-sass {
-  color: #BF6B97;
-}
-</style>
diff --git a/src/components/sections/ExperiencesSection.vue b/src/components/sections/ExperiencesSection.vue
new file mode 100644
index 0000000..eebeb39
--- /dev/null
+++ b/src/components/sections/ExperiencesSection.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="experiences">
+    <div class="container">
+      <h2>Wykorzystywane technologie</h2>
+      <p>
+        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
+        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
+        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
+      </p>
+      <div class="skills">
+        <div
+          v-for="(skill, skillKey) in list"
+          :key="skillKey"
+          class="skill-group"
+        >
+          <header class="skill-header">
+            <div class="tech-icons">
+              <font-awesome-icon
+                v-for="(icon, iconKey) in skill.icons"
+                :key="iconKey"
+                :class="icon.class"
+                :icon="['fab', icon.name]"
+                :alt="icon.alt"
+                :title="icon.title"
+              />
+            </div>
+            <h3>{{ skill.header }}</h3>
+          </header>
+          <p v-if="skill.showMore.value || skill.description.length < 200">
+            {{ skill.description }}
+          </p>
+          <p v-else>
+            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+let list = [
+  {
+    icons: [
+      {
+        class: 'icon-php',
+        name: 'php',
+        alt: 'Ikona przedstawiająca język PHP',
+        title: 'Ikona PHP'
+      },
+      {
+        class: 'icon-laravel',
+        name: 'laravel',
+        alt: 'Ikona przedstawiająca framework Laravel',
+        title: 'Ikona Laravel'
+      }
+    ],
+    header: 'PHP & Laravel',
+    showMore: ref(false),
+    description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
+      przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
+      walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
+      w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-js',
+        name: 'js-square',
+        alt: 'Ikona przedstawiająca język JavaScript',
+        title: 'Ikona JavaScript'
+      }
+    ],
+    header: 'JavaScript Vanilla',
+    showMore: ref(false),
+    description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
+      przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-vue',
+        name: 'vuejs',
+        alt: 'Ikona przedstawiająca framework Vue.js',
+        title: 'Ikona Vue.js'
+      }
+    ],
+    header: 'Vue',
+    showMore: ref(false),
+    description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
+      wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
+      przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-html5',
+        name: 'html5',
+        alt: 'Ikona przedstawiająca HTML5',
+        title: 'Ikona HTML5'
+      },
+      {
+        class: 'icon-css3',
+        name: 'css3-alt',
+        alt: 'Ikona przedstawiająca CSS3',
+        title: 'Ikona CSS3'
+      }
+    ],
+    header: 'HTML & CSS',
+    showMore: ref(false),
+    description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
+      spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
+      przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
+      i klienta (czas).`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-node',
+        name: 'node',
+        alt: 'Ikona przedstawiająca Node.js',
+        title: 'Ikona Node.js'
+      }
+    ],
+    header: 'Node.js',
+    showMore: ref(false),
+    description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
+      JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
+      aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-sass',
+        name: 'sass',
+        alt: 'Ikona przedstawiająca Sass',
+        title: 'Ikona Sass'
+      }
+    ],
+    header: 'Sass',
+    showMore: ref(false),
+    description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
+      przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
+      przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
+  }
+]
+
+function parseText(text) {
+  let shortText = text.substr(0, 200)
+  if (shortText.slice(-1) === ' ') {
+    shortText = text.substr(0, 199)
+  }
+  return shortText
+}
+
+function changeMoreStatus(skill) {
+  skill.showMore.value = !skill.showMore.value
+}
+</script>
+
+<style lang="scss">
+@import "scss/media";
+
+.experiences {
+  .container {
+    padding-top: 45px;
+    padding-bottom: 45px;
+
+    .skills {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      column-gap: 20px;
+      row-gap: 20px;
+      margin-top: 15px;
+
+      .skill-group {
+        background-color: #fafafa;
+        padding: 15px;
+        border-radius: 5px;
+
+        .tech-icons {
+          font-size: 1.8em;
+          margin-bottom: 3px;
+
+          & > svg[class*='icon'] {
+            margin-right: 10px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+        h3 {
+          font-size: 1.2em;
+          line-height: 1.6em;
+          font-weight: bold;
+        }
+        .skill-list {
+          margin-block: auto;
+          padding-inline: inherit;
+          margin-left: 5px;
+          list-style-type: initial;
+        }
+        p {
+          font-size: .9em;
+
+          a {
+            color: #8D8D8D;
+            cursor: pointer;
+          }
+        }
+        &:hover {
+          background-color: rgba(0, 0, 0, .03);
+        }
+      }
+
+      @include media-small {
+        grid-template-columns: repeat(3, 1fr);
+      }
+      @include media-tablet {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      @include media-mobile {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+}
+.icon-js {
+  color: #F1DE4F;
+}
+.icon-php {
+  color: #777bb3;
+}
+.icon-laravel {
+  color: #FF2D20;
+}
+.icon-vue {
+  color: #64B687;
+}
+.icon-html5 {
+  color: #DE6E3C;
+}
+.icon-node {
+  color: #64B687;
+}
+.icon-css3 {
+  color: #53A7DC;
+}
+.icon-sass {
+  color: #BF6B97;
+}
+</style>
diff --git a/src/components/sections/FavoriteProjects.vue b/src/components/sections/FavoriteProjects.vue
index 1d3df87..cfeac4e 100644
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -7,41 +7,33 @@
       </div>
     </projects>
     <div class="more-button">
-      <GhostButton @click.native="$router.push('projects')">
+      <GhostButton @click="router.push('projects')">
         ZOBACZ WIĘCEJ
       </GhostButton>
     </div>
   </section>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import Projects from '../SelectedProjects'
 import GhostButton from '../GhostButton'
 
-export default {
-  name: 'FavoriteProjects',
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
-      select_projects: []
-    }
-  },
-  mounted () {
-    this.loadProjectList()
-  },
-  methods: {
-    loadProjectList () {
-      fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
-        .then(response => response.json())
-        .then(data => {
-          this.select_projects = data
-        })
-    }
-  },
-  components: {
-    GhostButton,
-    Projects
-  }
+const router = useRouter()
+
+let select_projects = ref([])
+
+onMounted(() => {
+  loadProjectList()
+})
+
+function loadProjectList() {
+  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
+    .then(response => response.json())
+    .then(data => {
+      select_projects.value = data
+    })
 }
 </script>
 
diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index af69137..0247fd7 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,22 +1,64 @@
 <template>
   <div class="contact_container">
-    <div class="message"></div>
-    <header class="container_head">Formularz kontaktowy:</header>
-    <form id="form-point" @submit="formSubmit">
-      <input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
-      <textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
-      <input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
-      <base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
+    <div
+      v-if="hasMessageError"
+      class="message message_error"
+    >
+      {{ messageError }}
+    </div>
+    <div
+      v-if="hasMessageOkStatus"
+      class="message message_ok"
+    >
+      {{ messageOk }}
+    </div>
+    <header class="container_head">
+      Formularz kontaktowy:
+    </header>
+    <form
+      id="form-point"
+      @submit="formSubmit"
+    >
+      <input
+        v-model="emailValue"
+        class="contact_input"
+        :class="{ 'contact_input-error': isEmailError }"
+        type="text"
+        name="email"
+        placeholder="Twój adres e-mail."
+      >
+      <textarea
+        v-model="messageValue"
+        class="contact_input"
+        :class="{ 'contact_input-error': isMessageError }"
+        name="message"
+        placeholder="Twoja wiadomość."
+      />
+      <input
+        v-model="senderValue"
+        class="contact_input"
+        :class="{ 'contact_input-error': isSenderError }"
+        type="text"
+        name="sender"
+        placeholder="Twój podpis."
+      >
+      <BaseButton
+        is-reverse
+        :disabled="buttonDisabled"
+      >
+        Wyślij
+      </BaseButton>
     </form>
   </div>
 </template>
 
-<script>
+<script setup>
 import BaseButton from '../../BaseButton'
+import {ref, reactive, watch, computed} from 'vue'
 
 function emailValidate (mailObj) {
   const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
-  return !!mailObj.value.match(mailFormat)
+  return mailObj.match(mailFormat)
 }
 
 async function postData (url = '', data = {}) {
@@ -31,99 +73,88 @@ async function postData (url = '', data = {}) {
   return response.json()
 }
 
-export default {
-  name: 'MailContact',
-  data () {
-    return {
-      buttonDisabled: false,
-      statusError: 0,
-      email: {},
-      emailValue: '',
-      message: {},
-      messageValue: '',
-      sender: {},
-      senderValue: ''
-    }
-  },
-  components: {
-    'base-btn': BaseButton
-  },
-  watch: {
-    emailValue (value) {
-      if (this.statusError > 0 && emailValidate(this.email)) {
-        this.email.classList.remove('contact_input-error')
-      }
-    },
-    messageValue (value) {
-      if (this.statusError > 0 && value !== '') {
-        this.message.classList.remove('contact_input-error')
-      }
-    },
-    senderValue (value) {
-      if (this.statusError > 0 && value !== '') {
-        this.sender.classList.remove('contact_input-error')
-      }
-    }
-  },
-  methods: {
-    clearErrors () {
-      this.statusError = 0
-      this.email.classList.remove('contact_input-error')
-      this.message.classList.remove('contact_input-error')
-      this.sender.classList.remove('contact_input-error')
-    },
-    checkForm () {
-      if (!emailValidate(this.email)) {
-        this.email.classList.add('contact_input-error')
-        this.statusError++
-      }
-      if (this.message.value === '') {
-        this.message.classList.add('contact_input-error')
-        this.statusError++
-      }
-      if (this.sender.value === '') {
-        this.sender.classList.add('contact_input-error')
-        this.statusError++
-      }
-    },
-    formSubmit (event) {
-      event.preventDefault()
+const buttonDisabled = ref(false)
+const statusError = ref(0)
+const emailValue = ref('')
+const messageValue = ref('')
+const senderValue = ref('')
 
-      this.email = event.target[0]
-      this.message = event.target[1]
-      this.sender = event.target[2]
+const messageError = ref('')
+const messageOk = ref('')
 
-      this.clearErrors()
-      this.checkForm()
+const errors = reactive({
+  email: false,
+  message: false,
+  sender: false
+})
 
-      const messageElement = document.querySelector('.message')
-      messageElement.classList.remove('message_ok', 'message_error')
+const isEmailError = computed(() => errors.email)
+const isMessageError = computed(() => errors.message)
+const isSenderError = computed(() => errors.sender)
+const hasMessageError = computed(() => messageError.value)
+const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
 
-      if (this.statusError === 0) {
-        this.buttonDisabled = true
-        postData('/send', {
-          email: this.emailValue,
-          message: this.messageValue,
-          sender: this.senderValue
-        }).then(result => {
-          messageElement.classList.add(
-            result.error ? 'message_error' : 'message_ok'
-          )
+watch([statusError, emailValue], ([errorCount, value]) => {
+  errors.email = errorCount > 0 && !emailValidate(value)
+})
 
-          messageElement.textContent = result.message
-          if (!result.error) {
-            this.messageValue = ''
-            this.emailValue = ''
-            this.senderValue = ''
-          }
-          this.buttonDisabled = false
-        }).catch(() => {
-          messageElement.classList.add('message_error')
-          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
-          this.buttonDisabled = false
-        })
+watch([statusError, messageValue], ([errorCount, value]) => {
+  errors.message = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+watch([statusError, senderValue], ([errorCount, value]) => {
+  errors.sender = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+function clearErrors() {
+  statusError.value = 0
+  errors.email = false
+  errors.message = false
+  errors.sender = false
+}
+
+function checkForm() {
+  clearErrors()
+  if (!emailValidate(emailValue.value)) {
+    errors.email = true
+    statusError.value++
+  }
+  if (messageValue.value === '') {
+    errors.message = true
+    statusError.value++
+  }
+  if (senderValue.value === '') {
+    errors.sender = true
+    statusError.value++
+  }
+}
+
+function formSubmit(event) {
+  event.preventDefault()
+
+  checkForm()
+
+  if (statusError.value === 0) {
+    console.log('Send!')
+    buttonDisabled.value = true
+    postData('https://kamilcraft.com/send', {
+      email: emailValue.value,
+      message: messageValue.value,
+      sender: senderValue.value
+    }).then(result => {
+      if (result.error) {
+        messageError.value = result.message
+      } else {
+        messageOk.value = result.message
+        messageValue.value = ''
+        emailValue.value = ''
+        senderValue.value = ''
       }
-    }
+      buttonDisabled.value = false
+    }).catch(() => {
+      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
+      buttonDisabled.value = false
+    })
   }
 }
 </script>
diff --git a/src/components/sections/contacts/OtherContact.vue b/src/components/sections/contacts/OtherContact.vue
index d603bb1..df5d080 100644
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,53 +1,81 @@
 <template>
   <div class="contact_info">
-    <header class="info_head">Inne formy kontaktu:</header>
+    <header class="info_head">
+      Inne formy kontaktu:
+    </header>
     <div class="contact_element">
-      <img class="contact_element_icon"
-           src="/assets/img/instagram.jpg" />
-      <span id="instagram" class="contact_element_text">
-        <a href="https://www.instagram.com/nikcamii/"
-           target="_blank"
-           rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
+      <img
+        class="contact_element_icon"
+        src="/assets/img/instagram.jpg"
+      >
+      <span
+        id="instagram"
+        class="contact_element_text"
+      >
+        <a
+          href="https://www.instagram.com/nikcamii/"
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+        >Instagram: @NiKCamii</a>
       </span>
     </div>
     <div class="contact_element">
-      <img class="contact_element_icon" src="/assets/img/facebook.jpg" />
-      <span id="facebook" class="contact_element_text">
-        <a href="https://www.facebook.com/nikcamii/"
-           target="_blank"
-           rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
+      <img
+        class="contact_element_icon"
+        src="/assets/img/facebook.jpg"
+      >
+      <span
+        id="facebook"
+        class="contact_element_text"
+      >
+        <a
+          href="https://www.facebook.com/nikcamii/"
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+        >Facebook: @NiKCamii</a>
       </span>
     </div>
     <div class="contact_element">
-      <img class="contact_element_icon"
-           src="/assets/img/twitter.jpg" />
-      <span id="twitter" class="contact_element_text">
-        <a href="https://twitter.com/nikcamii"
-           target="_blank"
-           rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
+      <img
+        class="contact_element_icon"
+        src="/assets/img/twitter.jpg"
+      >
+      <span
+        id="twitter"
+        class="contact_element_text"
+      >
+        <a
+          href="https://twitter.com/nikcamii"
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+        >Twitter: @NiKCamii</a>
       </span>
     </div>
     <div class="contact_element">
-      <img class="contact_element_icon"
-           src="/assets/img/gg.png" />
-      <span id="gg" class="contact_element_text">GG: 38429969</span>
+      <img
+        class="contact_element_icon"
+        src="/assets/img/gg.png"
+      >
+      <span
+        id="gg"
+        class="contact_element_text"
+      >GG: 38429969</span>
     </div>
     <div class="contact_element">
-      <img class="contact_element_icon"
-           src="/assets/img/user.jpg" />
-      <span id="email" class="contact_element_text">
+      <img
+        class="contact_element_icon"
+        src="/assets/img/user.jpg"
+      >
+      <span
+        id="email"
+        class="contact_element_text"
+      >
         <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
       </span>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'OtherContact'
-}
-</script>
-
 <style lang="scss" scoped>
 @import "scss/media";
 
diff --git a/src/main.js b/src/main.js
index c5d1836..c563a6e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
-import './vue-meta'
+import { store } from './store'
+// import VueMeta from 'vue-meta'
 
 import '../scss/default.scss'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -11,15 +11,16 @@ import { fab } from '@fortawesome/free-brands-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(fas)
-library.add(fab)
-library.add(far)
-Vue.component('font-awesome-icon', FontAwesomeIcon)
+library.add(fas, fab, far)
 
-Vue.config.productionTip = false
+const app = createApp(App)
 
-new Vue({
-  store,
-  router,
-  render: h => h(App)
-}).$mount('#app')
+app.config.productionTip = false
+
+app.component('FontAwesomeIcon', FontAwesomeIcon)
+
+app.use(router)
+app.use(store)
+// app.use(VueMeta)
+
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 298bcc3..1a7487e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,15 +1,11 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home'
-import About from '../views/About'
-import Projects from '../views/Projects'
-import Project from '../views/Project'
-import Contact from '../views/Contact'
-import KamilCraftInfo from '../views/KamilCraftInfo'
+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'
 
-Vue.use(VueRouter)
-
 const mainTitle = 'kamilcraft.com'
 
 const routes = [
@@ -54,15 +50,7 @@ const routes = [
     component: Contact
   },
   {
-    path: '/info',
-    name: 'KamilCraftProject',
-    meta: {
-      title: 'KamilCraft Project'
-    },
-    component: KamilCraftInfo
-  },
-  {
-    path: '*',
+    path: '/:catchAll(.*)',
     name: '404',
     meta: {
       title: 'Błąd 404'
@@ -71,22 +59,39 @@ const routes = [
   }
 ]
 
-const router = new VueRouter({
-  mode: 'history',
-  base: '/',
+const router = createRouter({
+  history: createWebHistory('/'),
   routes,
-  scrollBehavior (to, from, savedPosition) {
+  scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
     } else if (to.hash) {
-      return {
-        selector: to.hash,
-        behavior: 'smooth'
-      }
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            selector: to.hash
+          }, 1000)
+        })
+      })
+    } else {
+      return { left: 0, top: 0 }
+    }
+  }
+  /*scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else if (to.hash) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            selector: to.hash
+          }, 1000)
+        })
+      })
     } else {
       return { x: 0, y: 0 }
     }
-  }
+  }*/
 })
 
 const title = ' :: ' + mainTitle
diff --git a/src/store/index.js b/src/store/index.js
index 998be25..b85a940 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,6 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
-Vue.use(Vuex)
-
-const moduleSettings = {
+export const store = createStore({
   state: {
     header: {
       title: null,
@@ -64,10 +61,4 @@ const moduleSettings = {
       state.header.description = null
     }
   }
-}
-
-export default new Vuex.Store({
-  modules: {
-    settings: moduleSettings
-  }
 })
diff --git a/src/views/About.vue b/src/views/AboutView.vue
similarity index 56%
rename from src/views/About.vue
rename to src/views/AboutView.vue
index f924c37..c4b312e 100644
--- a/src/views/About.vue
+++ b/src/views/AboutView.vue
@@ -14,21 +14,53 @@
         Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
       </p>
       <h3>Kursy</h3>
-      <p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-        <strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
-                   target="_blank"
-                   rel="noopener nofollow noreferrer">
-          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.</p>
-      <p>Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
-        wiedzy o nowe doświadczenia.</p>
+      <p>
+        W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+        <strong><a
+          :href="publicPath + 'download/certyfikat-laravel.pdf'"
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+        >
+          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
+      </p>
+      <p>
+        Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
+        wiedzy o nowe doświadczenia.
+      </p>
       <h2>Moje zainteresowania</h2>
-      <p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
+      <p>
+        W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
         programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
-        problemów przy prywatnych projektach.</p>
+        problemów przy prywatnych projektach.
+      </p>
     </div>
   </section>
 </template>
 
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+const store = useStore()
+const route = useRoute()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
+  }
+  store.commit('setHeader', header)
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+</script>
+
 <style lang="scss">
 section#about {
   padding: 45px 0;
@@ -57,25 +89,3 @@ section#about {
   }
 }
 </style>
-
-<script>
-export default {
-  name: 'About',
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/'
-    }
-  },
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
-    }
-    this.$store.commit('setHeader', header)
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  }
-}
-</script>
diff --git a/src/views/Contact.vue b/src/views/ContactView.vue
similarity index 75%
rename from src/views/Contact.vue
rename to src/views/ContactView.vue
index 6f14137..10b9b31 100644
--- a/src/views/Contact.vue
+++ b/src/views/ContactView.vue
@@ -7,24 +7,23 @@
   </section>
 </template>
 
-<script>
+<script setup>
+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'
 
-export default {
-  name: 'Contact',
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
-    }
-    this.$store.commit('setHeader', header)
-  },
-  components: {
-    MailContact,
-    OtherContact
+const route = useRoute()
+const store = useStore()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
   }
-}
+  store.commit('setHeader', header)
+})
 </script>
 
 <style lang="scss">
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 98c7d5b..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <section class="home">
-    <About />
-    <Experiences />
-    <FavoriteProjects />
-  </section>
-</template>
-
-<script>
-import About from '../components/sections/About'
-import Experiences from '../components/sections/Experiences'
-import FavoriteProjects from '../components/sections/FavoriteProjects'
-
-export default {
-  name: 'Home',
-  data () {
-    return {
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
-      select_projects: []
-    }
-  },
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: [
-        'Chciałbym Państwa powitać na mojej stronie!',
-        'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
-      ]
-    }
-    this.$store.commit('setHeader', header)
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  },
-  components: {
-    About,
-    Experiences,
-    FavoriteProjects
-  }
-}
-</script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..3677aed
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="home">
+    <About />
+    <ExperiencesSection />
+    <FavoriteProjects />
+  </section>
+</template>
+
+<script setup>
+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'
+
+const store = useStore()
+const route = useRoute()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Chciałbym Państwa powitać na mojej stronie!',
+      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+</script>
diff --git a/src/views/KamilCraftInfo.vue b/src/views/KamilCraftInfo.vue
deleted file mode 100644
index 068d1c5..0000000
--- a/src/views/KamilCraftInfo.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <section class="info">
-    <div class="container">
-      <h2>{{ $route.meta.title }}</h2>
-      <p>Wersja projektu: {{ project.version }}</p>
-      <p>Użyte paczki:</p>
-      <ul class="package-list">
-        <li v-for="(version, name) in project.dependencies" :key="name">{{ name }}: {{ version }}</li>
-      </ul>
-    </div>
-  </section>
-</template>
-
-<script>
-const nodeProject = require('../../package.json')
-export default {
-  name: 'KamilCraftInfo',
-  data () {
-    return {
-      project: {
-        version: '',
-        dependencies: []
-      }
-    }
-  },
-  mounted () {
-    this.project.version = nodeProject.version
-    this.project.dependencies = nodeProject.dependencies
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  padding-top: 45px;
-  padding-bottom: 45px;
-
-  .package-list {
-    list-style: inside;
-  }
-}
-</style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 934b6ca..0088ac3 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -10,12 +10,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NotFound'
-}
-</script>
-
 <style lang="scss" scoped>
 .not-found {
   .container {
diff --git a/src/views/Project.vue b/src/views/ProjectView.vue
similarity index 52%
rename from src/views/Project.vue
rename to src/views/ProjectView.vue
index 0e7a415..c285cce 100644
--- a/src/views/Project.vue
+++ b/src/views/ProjectView.vue
@@ -1,94 +1,137 @@
 <template>
-  <section class="project" v-if="project">
+  <section
+    v-if="isLoaded"
+    class="project"
+  >
     <header class="project_header">
       <h1>{{ project.title }}</h1>
       <ul class="project_info">
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'clock']"
+          />
           <span>{{ project.release_date }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'user']"
+          />
           <span>{{ project.author }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
-          <span>{{ getCategoryName(project.categories)[0] }}</span>
+          <font-awesome-icon
+            class="icon"
+            :icon="['far', 'folder']"
+          />
+          <span>{{ getCategoryName(project.categories) }}</span>
         </li>
         <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
+          <font-awesome-icon
+            class="icon"
+            :icon="['fas', 'code-branch']"
+          />
           <span>{{ project.project_version }}</span>
         </li>
-        <li class="info_text" v-if="project.project_url">
-          <font-awesome-icon class="icon" :icon="['fas', 'link']"/>
-          <span><a :href="project.project_url"
-                  target="_blank"
-                  rel="noopener nofollow noreferrer">Link</a></span>
+        <li
+          v-if="project.project_url"
+          class="info_text"
+        >
+          <font-awesome-icon
+            class="icon"
+            :icon="['fas', 'link']"
+          />
+          <span><a
+            :href="project.project_url"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+          >Link</a></span>
         </li>
       </ul>
     </header>
     <div class="container">
-      <component :is="`figure`" class="project-photo">
-        <img :src="`${project.images.large}`" :alt="project.title">
+      <component
+        :is="`figure`"
+        class="project-photo"
+      >
+        <img
+          :src="`${project.images.large}`"
+          :alt="project.title"
+        >
       </component>
-      <div class="content" v-html="markdownToHtml"></div>
+      <div
+        class="content"
+        v-html="markdownToHtml"
+      />
     </div>
   </section>
-  <div v-else class="loading">
-    <div class="loading-animation"></div>
+  <div
+    v-else
+    class="loading"
+  >
+    <div class="loading_animation" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import { marked } from 'marked'
 
-export default {
-  name: 'Project',
-  data () {
-    return {
-      publicPath: process.env.BASE_URL,
-      project: null
-    }
-  },
-  mounted () {
-    if (this.getCategories.length === 0) {
-      this.$store.dispatch('fetchCategories')
-    }
-    this.loadProject(this.$route.params.id)
-  },
-  computed: {
-    getCategories () {
-      return this.$store.getters.getCategories
-    },
-    markdownToHtml () {
-      return marked.parse(this.project.description)
-    }
-  },
-  methods: {
-    getCategoryName (categories) {
-      const categoriesText = []
-      categories.forEach(categoryElement => {
-        const cat = this.getCategories.find(category => category.slug === categoryElement)
-        if (cat) {
-          categoriesText.push(cat.name)
-        }
-      })
-      return categoriesText
-    },
-    loadProject (id) {
-      fetch(process.env.VUE_APP_API_URL + '/project/' + id)
-        .then(response => response.json())
-        .then(data => {
-          this.project = data
-        })
-    }
+const route = useRoute()
+const store = useStore()
+
+const isLoaded = ref(false)
+let project = reactive({})
+
+const getCategories = computed(() => store.getters.getCategories)
+const markdownToHtml = computed(() => marked.parse(project.description))
+
+onMounted(() => {
+  if (getCategories.value.length === 0) {
+    store.dispatch('fetchCategories')
   }
+  loadProject(route.params.id)
+})
+
+function getCategoryName(categories = []) {
+  const categoriesText = []
+  categories.forEach(categoryElement => {
+    const category = getCategories.value.find(category => category.slug === categoryElement)
+    if (category) {
+      categoriesText.push(category.name)
+    }
+  })
+  return categoriesText[0] ?? undefined
+}
+
+function loadProject(id) {
+  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
+    .then(response => response.json())
+    .then(data => {
+      project.title = data.title
+      project.description = data.description
+      project.release_date = data.release_date
+      project.author = data.author
+      project.categories = data.categories
+      project.project_version = data.project_version
+      project.project_url = data.project_url
+      project.images = data.images
+      isLoaded.value = true
+    })
 }
 </script>
 
 <style lang="scss">
 @import "scss/default";
 
+.loading {
+  display: flex;
+  align-items: center;
+}
+
 .project {
   .project_header {
     @extend .container;
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
deleted file mode 100644
index 9396bf5..0000000
--- a/src/views/Projects.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div>
-    <div class="project_categories">
-      <ul class="categories">
-        <li class="categories_element"
-            v-for="category in getCategories"
-            :key="category.slug"
-            :class="{ 'categories_element-active': categories.active === category.slug }"
-            @click="changeCategory(category.slug)">
-          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
-        </li>
-      </ul>
-    </div>
-    <projects :projects="projects" />
-    <div v-if="projects.length === 0" class="loading">
-      <div class="loading_animation"></div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "scss/media";
-
-.project_categories {
-  padding-top: 45px;
-
-  .categories {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-
-    .categories_element {
-      position: relative;
-      cursor: pointer;
-      margin-right: 25px;
-
-      a {
-        color: var(--text-color);
-        &:hover {
-          color: black;
-        }
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &-active {
-        &::after {
-          content: '';
-          position: absolute;
-          margin: 0 auto;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: 2px;
-          background-color: #A2CF00;
-          transform: translateY(8px);
-          animation: load-underline 300ms forwards;
-        }
-      }
-
-      @include media-mobile {
-        margin-right: 15px;
-      }
-    }
-  }
-}
-
-.projects {
-  padding-top: 25px;
-  padding-bottom: 25px;
-}
-
-@keyframes loading-animation {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes load-underline {
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-}
-</style>
-
-<script>
-import SelectedProjects from '../components/SelectedProjects'
-
-export default {
-  name: 'Projects',
-  data () {
-    return {
-      categories: {
-        active: 'all'
-      },
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
-      projects: []
-    }
-  },
-  computed: {
-    getCategories () {
-      return this.$store.getters.getCategories
-    }
-  },
-  mounted () {
-    this.loadAllData()
-  },
-  destroyed () {
-    this.$store.commit('resetHeaderTitle')
-    this.$store.commit('resetHeaderDescription')
-  },
-  methods: {
-    async loadAllData () {
-      await this.$store.dispatch('fetchCategories')
-      await this.$store.dispatch('fetchProjects').then(projects => {
-        /* projects.sort((firstProduct, secondProduct) => {
-          return secondProduct.id - firstProduct.id
-        }) */
-        this.projects = projects
-      }).catch(error => {
-        console.log(error)
-      })
-    },
-    loadListWhereCategory (category) {
-      this.projects = []
-      setTimeout(() => {
-        if (category !== 'all') {
-          const projects = this.$store.getters.getProjects.filter(project => project.categories.includes(category))
-          this.projects = projects
-        } else {
-          this.projects = this.$store.getters.getProjects
-        }
-      }, 500)
-    },
-    changeCategory (category) {
-      this.categories.active = category
-      this.loadListWhereCategory(category)
-    }
-  },
-  components: {
-    projects: SelectedProjects
-  }
-}
-</script>
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
new file mode 100644
index 0000000..3e5ee51
--- /dev/null
+++ b/src/views/ProjectsView.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div class="project_categories">
+      <ul class="categories">
+        <li
+          v-for="category in getCategories"
+          :key="category.slug"
+          class="categories_element"
+          :class="{ 'categories_element-active': categories.active === category.slug }"
+          @click="changeCategory(category.slug)"
+        >
+          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <SelectedProjects :projects="projects" />
+    <div
+      v-if="projects.length === 0"
+      class="loading"
+    >
+      <div class="loading_animation" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import SelectedProjects from '../components/SelectedProjects'
+
+const store = useStore()
+
+const categories = reactive({
+  active: 'all'
+})
+const projects = reactive([])
+
+const getCategories = computed(() => store.getters.getCategories)
+
+onMounted(() => {
+  loadAllData()
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+
+function loadAllData () {
+  store.dispatch('fetchCategories')
+  store.dispatch('fetchProjects').then(loadedProjects => {
+    loadedProjects.forEach(project => {
+      projects.push(project)
+    })
+  })
+}
+
+function loadListWhereCategory(category) {
+  projects.splice(0)
+  setTimeout(() => {
+    if (category !== 'all') {
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
+      storedProjects.forEach(project => {
+        projects.push(project)
+      })
+    } else {
+      store.getters.getProjects.forEach(project => {
+        projects.push(project)
+      })
+    }
+  }, 500)
+}
+
+function changeCategory(category) {
+  categories.active = category
+  loadListWhereCategory(category)
+}
+</script>
+
+<style lang="scss">
+@import "scss/media";
+
+.project_categories {
+  padding-top: 45px;
+
+  .categories {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+
+    .categories_element {
+      position: relative;
+      cursor: pointer;
+      margin-right: 25px;
+
+      a {
+        color: var(--text-color);
+        &:hover {
+          color: black;
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &-active {
+        &::after {
+          content: '';
+          position: absolute;
+          margin: 0 auto;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          width: 0;
+          height: 2px;
+          background-color: #A2CF00;
+          transform: translateY(8px);
+          animation: load-underline 300ms forwards;
+        }
+      }
+
+      @include media-mobile {
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+.projects {
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+
+@keyframes loading-animation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-underline {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/vue-meta/index.js b/src/vue-meta/index.js
deleted file mode 100644
index a9e3c36..0000000
--- a/src/vue-meta/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import VueMeta from 'vue-meta'
-
-Vue.use(VueMeta)
diff --git a/vue.config.js b/vue.config.js
index ace5a89..6b8fe5e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,6 @@
-module.exports = {
+const { defineConfig } = require('@vue/cli-service')
+
+module.exports = defineConfig({
   publicPath: '/',
-  devServer: {
-    disableHostCheck: true
-  }
-}
+  transpileDependencies: true
+})