diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
index 366de79..24bbaba 100644
--- a/client/eslint.config.mjs
+++ b/client/eslint.config.mjs
@@ -9,9 +9,9 @@ export default tsEslint.config(
             parserOptions: {
                 parser: tsEslint.parser,
                 ecmaVersion: 2020,
-                sourceType: 'module',
-            },
-        },
+                sourceType: 'module'
+            }
+        }
     },
     {
         rules: {
@@ -48,11 +48,12 @@ export default tsEslint.config(
                 {
                     anonymous: 'always',
                     asyncArrow: 'always',
-                    named: 'never',
-                },
+                    named: 'never'
+                }
             ],
             '@typescript-eslint/no-unused-vars': ['error'],
-        },
+            'vue/block-order': ['error', { order: ['script', 'template', 'style'] }]
+        }
     },
     {
         files: ['**/*.vue'],
@@ -60,7 +61,7 @@ export default tsEslint.config(
             'vue/attribute-hyphenation': ['error', 'never'],
             'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
             'vue/prefer-true-attribute-shorthand': ['error', 'always'],
-            'vue/experimental-script-setup-vars': 'off',
-        },
-    },
+            'vue/experimental-script-setup-vars': 'off'
+        }
+    }
 );
diff --git a/client/src/components/App.vue b/client/src/components/App.vue
index a3b4be5..33212c8 100644
--- a/client/src/components/App.vue
+++ b/client/src/components/App.vue
@@ -1,11 +1,3 @@
-<template>
-    <RouterView
-        v-if="initialized"
-        :style="`--scrollbar-width: ${scrollbarWidth}px; --vh: ${windowHeight / 100}px`"
-    />
-    <ToastContainer />
-</template>
-
 <script lang="ts" setup>
     import useStore from '@/store';
     import { computed, ref } from 'vue';
@@ -24,6 +16,14 @@
     const windowHeight = computed(() => store.windowHeight);
 </script>
 
+<template>
+    <RouterView
+        v-if="initialized"
+        :style="`--scrollbar-width: ${scrollbarWidth}px; --vh: ${windowHeight / 100}px`"
+    />
+    <ToastContainer />
+</template>
+
 <style lang="scss">
     @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Montserrat&display=swap');
     @import 'reset';
diff --git a/client/src/components/ExternalLink.vue b/client/src/components/ExternalLink.vue
index 7b34b15..e716277 100644
--- a/client/src/components/ExternalLink.vue
+++ b/client/src/components/ExternalLink.vue
@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
     <a
         class="external-link"
@@ -8,5 +10,3 @@
         <slot />
     </a>
 </template>
-
-<script lang="ts" setup></script>
diff --git a/client/src/components/main/CloseIcon.vue b/client/src/components/main/CloseIcon.vue
index e11bb29..5f1ad2b 100644
--- a/client/src/components/main/CloseIcon.vue
+++ b/client/src/components/main/CloseIcon.vue
@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
     <svg
         class="close-icon"
@@ -15,8 +17,6 @@
     </svg>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped>
     .close-icon {
         fill: currentColor;
diff --git a/client/src/components/main/Main.vue b/client/src/components/main/Main.vue
index 0733ee4..5b8b112 100644
--- a/client/src/components/main/Main.vue
+++ b/client/src/components/main/Main.vue
@@ -1,29 +1,3 @@
-<template>
-    <div
-        class="main"
-        ref="root"
-        :style="`--navbar-height: ${navbarHeight}px`"
-    >
-        <Navbar
-            v-if="activeSection"
-            :activeSection="activeSection"
-            :sections="sections"
-            @linkClick="onLinkClick"
-        />
-        <div class="main-section-container">
-            <Component
-                v-for="[sectionName, sectionData] in sections"
-                :key="sectionName"
-                :is="components[sectionData.componentName]"
-                :name="sectionName"
-                :ref="(component) => (sectionElements[sectionName] = component.$el)"
-            />
-        </div>
-        <FooterComponent />
-        <div id="modal-container" />
-    </div>
-</template>
-
 <script lang="ts" setup>
     import Navbar from '@/components/main/navbar/Navbar.vue';
     import mainSections from '@/components/main/mainSections';
@@ -123,6 +97,32 @@
     });
 </script>
 
+<template>
+    <div
+        class="main"
+        ref="root"
+        :style="`--navbar-height: ${navbarHeight}px`"
+    >
+        <Navbar
+            v-if="activeSection"
+            :activeSection="activeSection"
+            :sections="sections"
+            @linkClick="onLinkClick"
+        />
+        <div class="main-section-container">
+            <Component
+                v-for="[sectionName, sectionData] in sections"
+                :key="sectionName"
+                :is="components[sectionData.componentName]"
+                :name="sectionName"
+                :ref="(component) => (sectionElements[sectionName] = component.$el)"
+            />
+        </div>
+        <FooterComponent />
+        <div id="modal-container" />
+    </div>
+</template>
+
 <style lang="scss" scoped>
     .main {
         --main-row-gap: 50px;
diff --git a/client/src/components/main/MainSection.vue b/client/src/components/main/MainSection.vue
index 98c72c4..9d6ddf6 100644
--- a/client/src/components/main/MainSection.vue
+++ b/client/src/components/main/MainSection.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import mainSections from '@/components/main/mainSections';
+    import { MainSectionProps } from '@/components/main/types';
+
+    const props = withDefaults(defineProps<MainSectionProps>(), { heading: false });
+
+    const root = ref<HTMLDivElement | null>(null);
+
+    const activeSection = computed(() => mainSections[props.name]);
+
+    const id = computed(() => activeSection.value.id);
+
+    const title = computed(() => activeSection.value.title);
+</script>
+
 <template>
     <section
         class="main-section"
@@ -16,22 +32,6 @@
     </section>
 </template>
 
-<script lang="ts" setup>
-    import { computed, ref } from 'vue';
-    import mainSections from '@/components/main/mainSections';
-    import { MainSectionProps } from '@/components/main/types';
-
-    const props = withDefaults(defineProps<MainSectionProps>(), { heading: false });
-
-    const root = ref<HTMLDivElement | null>(null);
-
-    const activeSection = computed(() => mainSections[props.name]);
-
-    const id = computed(() => activeSection.value.id);
-
-    const title = computed(() => activeSection.value.title);
-</script>
-
 <style lang="scss" scoped>
     .main-section {
         align-items: center;
diff --git a/client/src/components/main/Toast.vue b/client/src/components/main/Toast.vue
index 96e85f0..c18f646 100644
--- a/client/src/components/main/Toast.vue
+++ b/client/src/components/main/Toast.vue
@@ -1,30 +1,3 @@
-<template>
-    <Teleport to="#modal-container">
-        <Transition
-            name="fade"
-            @after-leave="$emit('close')"
-        >
-            <div
-                v-if="opened"
-                class="toast"
-                :class="[`type-${type}`]"
-                data-testid="toast"
-                :style="`--relative-margin-top: ${relativeMarginTop}`"
-            >
-                <div class="toast-message">{{ message }}</div>
-                <button
-                    class="toast-close-button"
-                    data-testid="close-button"
-                    :title="locales.closeButtonTitle"
-                    @click="opened = false"
-                >
-                    <CloseIcon class="toast-close-button-icon" />
-                </button>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
-
 <script lang="ts" setup>
     import useStore from '@/store';
     import { computed, onMounted, ref } from 'vue';
@@ -68,6 +41,33 @@
     });
 </script>
 
+<template>
+    <Teleport to="#modal-container">
+        <Transition
+            name="fade"
+            @after-leave="$emit('close')"
+        >
+            <div
+                v-if="opened"
+                class="toast"
+                :class="[`type-${type}`]"
+                data-testid="toast"
+                :style="`--relative-margin-top: ${relativeMarginTop}`"
+            >
+                <div class="toast-message">{{ message }}</div>
+                <button
+                    class="toast-close-button"
+                    data-testid="close-button"
+                    :title="locales.closeButtonTitle"
+                    @click="opened = false"
+                >
+                    <CloseIcon class="toast-close-button-icon" />
+                </button>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
 <style lang="scss" scoped>
     .toast {
         --default-margin-top: calc(var(--content-padding-horizontal) + var(--navbar-height));
diff --git a/client/src/components/main/ToastContainer.vue b/client/src/components/main/ToastContainer.vue
index 502c87f..4cee052 100644
--- a/client/src/components/main/ToastContainer.vue
+++ b/client/src/components/main/ToastContainer.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+    import Toast from '@/components/main/Toast.vue';
+    import useStore from '@/store';
+
+    const store = useStore();
+</script>
+
 <template>
     <Toast
         v-for="(toast, toastIndex) in store.toasts"
@@ -5,10 +12,3 @@
         @close="store.removeToast(toastIndex)"
     />
 </template>
-
-<script setup lang="ts">
-    import Toast from '@/components/main/Toast.vue';
-    import useStore from '@/store';
-
-    const store = useStore();
-</script>
diff --git a/client/src/components/main/about-myself/AboutMyself.vue b/client/src/components/main/about-myself/AboutMyself.vue
index f54e3db..3166460 100644
--- a/client/src/components/main/about-myself/AboutMyself.vue
+++ b/client/src/components/main/about-myself/AboutMyself.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+    import MainSection from '@/components/main/MainSection.vue';
+    import AboutMyselfColumn from '@/components/main/about-myself/AboutMyselfColumn.vue';
+    import { computed } from 'vue';
+    import useStore from '@/store';
+    import AboutMyselfPhotoContainer from '@/components/main/about-myself/AboutMyselfPhotoContainer.vue';
+
+    const store = useStore();
+
+    const locales = computed(() => store.locales.sections.aboutMyself);
+</script>
+
 <template>
     <MainSection
         class="about-myself"
@@ -20,18 +32,6 @@
     </MainSection>
 </template>
 
-<script lang="ts" setup>
-    import MainSection from '@/components/main/MainSection.vue';
-    import AboutMyselfColumn from '@/components/main/about-myself/AboutMyselfColumn.vue';
-    import { computed } from 'vue';
-    import useStore from '@/store';
-    import AboutMyselfPhotoContainer from '@/components/main/about-myself/AboutMyselfPhotoContainer.vue';
-
-    const store = useStore();
-
-    const locales = computed(() => store.locales.sections.aboutMyself);
-</script>
-
 <style lang="scss" scoped>
     .about-myself {
         padding-bottom: var(--main-row-gap);
diff --git a/client/src/components/main/about-myself/AboutMyselfColumn.vue b/client/src/components/main/about-myself/AboutMyselfColumn.vue
index 57b19ce..b58ae99 100644
--- a/client/src/components/main/about-myself/AboutMyselfColumn.vue
+++ b/client/src/components/main/about-myself/AboutMyselfColumn.vue
@@ -1,19 +1,3 @@
-<template>
-    <div class="about-myself-column">
-        <h3
-            class="about-myself-column-title"
-            data-testid="title"
-        >
-            {{ title }}
-        </h3>
-        <p
-            class="about-myself-column-text"
-            data-testid="text"
-            v-html="text"
-        />
-    </div>
-</template>
-
 <script lang="ts" setup>
     import { computed } from 'vue';
     import useStore from '@/store';
@@ -31,6 +15,22 @@
     );
 </script>
 
+<template>
+    <div class="about-myself-column">
+        <h3
+            class="about-myself-column-title"
+            data-testid="title"
+        >
+            {{ title }}
+        </h3>
+        <p
+            class="about-myself-column-text"
+            data-testid="text"
+            v-html="text"
+        />
+    </div>
+</template>
+
 <style lang="scss" scoped>
     .about-myself-column {
         box-sizing: border-box;
diff --git a/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue b/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue
index fcc1d74..6b361a9 100644
--- a/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue
+++ b/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+    import { AboutMyselfPhotoContainerProps } from '@/components/main/about-myself/types';
+
+    defineProps<AboutMyselfPhotoContainerProps>();
+</script>
+
 <template>
     <picture
         data-testid="about-myself-photo-container"
@@ -21,9 +27,3 @@
         />
     </picture>
 </template>
-
-<script setup lang="ts">
-    import { AboutMyselfPhotoContainerProps } from '@/components/main/about-myself/types';
-
-    defineProps<AboutMyselfPhotoContainerProps>();
-</script>
diff --git a/client/src/components/main/contact/Contact.vue b/client/src/components/main/contact/Contact.vue
index f819989..36bc0fd 100644
--- a/client/src/components/main/contact/Contact.vue
+++ b/client/src/components/main/contact/Contact.vue
@@ -1,20 +1,3 @@
-<template>
-    <MainSection
-        class="contact"
-        heading
-        name="contact"
-    >
-        <div class="text-content">
-            <div
-                class="contact-brief-text"
-                data-testid="brief-text"
-                v-html="briefText"
-            />
-            <ContactForm />
-        </div>
-    </MainSection>
-</template>
-
 <script lang="ts" setup>
     import MainSection from '@/components/main/MainSection.vue';
     import useStore from '@/store';
@@ -35,6 +18,23 @@
     });
 </script>
 
+<template>
+    <MainSection
+        class="contact"
+        heading
+        name="contact"
+    >
+        <div class="text-content">
+            <div
+                class="contact-brief-text"
+                data-testid="brief-text"
+                v-html="briefText"
+            />
+            <ContactForm />
+        </div>
+    </MainSection>
+</template>
+
 <style lang="scss" scoped>
     .contact {
         padding-bottom: var(--main-row-gap);
diff --git a/client/src/components/main/contact/form/ContactForm.vue b/client/src/components/main/contact/form/ContactForm.vue
index e6c053f..fd2c802 100644
--- a/client/src/components/main/contact/form/ContactForm.vue
+++ b/client/src/components/main/contact/form/ContactForm.vue
@@ -1,31 +1,3 @@
-<template>
-    <form
-        class="contact-form -ml-label"
-        action="/contact-form/send-mail"
-        method="post"
-        ref="root"
-        @submit.prevent="onSubmit"
-    >
-        <ContactFormField
-            v-for="field in fields"
-            :label="locales[field.name]"
-            v-bind="field"
-            v-model="field.value"
-            @blur="field.touched = true"
-            @validSet="(newValue) => onValidSet(field, newValue)"
-        />
-        <input
-            hidden
-            name="lang"
-            :value="language"
-        />
-        <ContactFormBottomPart
-            :formValid="valid"
-            :submitDisabled="submitDisabled"
-        />
-    </form>
-</template>
-
 <script lang="ts" setup>
     import { computed, ref } from 'vue';
     import useStore from '@/store';
@@ -94,6 +66,34 @@
     const valid = computed(() => fields.every((field) => field.valid));
 </script>
 
+<template>
+    <form
+        class="contact-form -ml-label"
+        action="/contact-form/send-mail"
+        method="post"
+        ref="root"
+        @submit.prevent="onSubmit"
+    >
+        <ContactFormField
+            v-for="field in fields"
+            :label="locales[field.name]"
+            v-bind="field"
+            v-model="field.value"
+            @blur="field.touched = true"
+            @validSet="(newValue) => onValidSet(field, newValue)"
+        />
+        <input
+            hidden
+            name="lang"
+            :value="language"
+        />
+        <ContactFormBottomPart
+            :formValid="valid"
+            :submitDisabled="submitDisabled"
+        />
+    </form>
+</template>
+
 <style lang="scss" scoped>
     .contact-form {
         --contact-form-font-family: Montserrat, sans-serif;
diff --git a/client/src/components/main/contact/form/ContactFormBottomPart.vue b/client/src/components/main/contact/form/ContactFormBottomPart.vue
index c4fc71f..7848fb9 100644
--- a/client/src/components/main/contact/form/ContactFormBottomPart.vue
+++ b/client/src/components/main/contact/form/ContactFormBottomPart.vue
@@ -1,23 +1,3 @@
-<template>
-    <div
-        data-testid="contact-form-bottom-part"
-        class="lg:ml-label ml-0 flex flex-col items-center justify-center gap-6 text-xl"
-    >
-        <p data-testid="required-legend">
-            {{ locales.requiredLegend }}
-        </p>
-        <button
-            data-testid="submit-button"
-            :class="`bg-primary contact-form-submit hover:bg-primary-light h-12 w-full max-w-52 transition-colors duration-300 disabled:cursor-not-allowed disabled:bg-gray-500`"
-            :disabled="submitDisabled"
-            :title="submitTitle"
-            @click="$emit('click')"
-        >
-            {{ locales.submitLabel }}
-        </button>
-    </div>
-</template>
-
 <script lang="ts" setup>
     import { computed } from 'vue';
     import useStore from '@/store';
@@ -37,3 +17,23 @@
         props.formValid ? locales.value.submitTitle : locales.value.submitTitleDisabled,
     );
 </script>
+
+<template>
+    <div
+        data-testid="contact-form-bottom-part"
+        class="lg:ml-label ml-0 flex flex-col items-center justify-center gap-6 text-xl"
+    >
+        <p data-testid="required-legend">
+            {{ locales.requiredLegend }}
+        </p>
+        <button
+            data-testid="submit-button"
+            :class="`bg-primary contact-form-submit hover:bg-primary-light h-12 w-full max-w-52 transition-colors duration-300 disabled:cursor-not-allowed disabled:bg-gray-500`"
+            :disabled="submitDisabled"
+            :title="submitTitle"
+            @click="$emit('click')"
+        >
+            {{ locales.submitLabel }}
+        </button>
+    </div>
+</template>
diff --git a/client/src/components/main/contact/form/ContactFormField.vue b/client/src/components/main/contact/form/ContactFormField.vue
index a3f7a95..8c90e1f 100644
--- a/client/src/components/main/contact/form/ContactFormField.vue
+++ b/client/src/components/main/contact/form/ContactFormField.vue
@@ -1,30 +1,3 @@
-<template>
-    <label
-        :data-testid="`field-${name}`"
-        class="contact-form-field"
-        :class="{ 'has-error': error }"
-    >
-        <ContactFormLabelText
-            :fieldRequired="required"
-            :text="label"
-        />
-        <Component
-            :is="element"
-            class="contact-form-data flex-grow"
-            :class="[`contact-form-${element}`]"
-            :minlength="minlength"
-            :maxlength="maxlength"
-            :name="name"
-            :required="required"
-            :value="model"
-            v-bind="dynamicProps"
-            @blur="onBlur"
-            @input="onInput"
-        />
-        <ContactFormFieldError :error="error" />
-    </label>
-</template>
-
 <script lang="ts" setup>
     import { computed, ref, watch } from 'vue';
     import { Merge } from 'ts-essentials';
@@ -109,6 +82,33 @@
     );
 </script>
 
+<template>
+    <label
+        :data-testid="`field-${name}`"
+        class="contact-form-field"
+        :class="{ 'has-error': error }"
+    >
+        <ContactFormLabelText
+            :fieldRequired="required"
+            :text="label"
+        />
+        <Component
+            :is="element"
+            class="contact-form-data flex-grow"
+            :class="[`contact-form-${element}`]"
+            :minlength="minlength"
+            :maxlength="maxlength"
+            :name="name"
+            :required="required"
+            :value="model"
+            v-bind="dynamicProps"
+            @blur="onBlur"
+            @input="onInput"
+        />
+        <ContactFormFieldError :error="error" />
+    </label>
+</template>
+
 <style lang="scss" scoped>
     .contact-form-field {
         --contact-form-data-background-color: #2d2d2d;
diff --git a/client/src/components/main/contact/form/ContactFormFieldError.vue b/client/src/components/main/contact/form/ContactFormFieldError.vue
index 7828922..1b968db 100644
--- a/client/src/components/main/contact/form/ContactFormFieldError.vue
+++ b/client/src/components/main/contact/form/ContactFormFieldError.vue
@@ -1,12 +1,3 @@
-<template>
-    <div
-        class="contact-form-field-error"
-        v-if="error"
-    >
-        <div class="contact-form-field-error-message">{{ message }}</div>
-    </div>
-</template>
-
 <script lang="ts" setup>
     import { computed } from 'vue';
     import useStore from '@/store';
@@ -21,6 +12,15 @@
     const message = computed(() => locales.value[props.error!]);
 </script>
 
+<template>
+    <div
+        class="contact-form-field-error"
+        v-if="error"
+    >
+        <div class="contact-form-field-error-message">{{ message }}</div>
+    </div>
+</template>
+
 <style lang="scss" scoped>
     .contact-form-field-error {
         --contact-form-field-error-arrow-width: 10px;
diff --git a/client/src/components/main/contact/form/ContactFormLabelText.vue b/client/src/components/main/contact/form/ContactFormLabelText.vue
index b22fb0a..467b707 100644
--- a/client/src/components/main/contact/form/ContactFormLabelText.vue
+++ b/client/src/components/main/contact/form/ContactFormLabelText.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+    import { computed } from 'vue';
+    import useStore from '@/store';
+    import { ContactFormLabelTextProps } from '@/components/main/contact/form/types';
+
+    const store = useStore();
+
+    defineProps<ContactFormLabelTextProps>();
+
+    const locales = computed(() => store.locales.sections.contact.form);
+</script>
+
 <template>
     <span
         data-testid="label-text"
@@ -13,15 +25,3 @@
         >
     </span>
 </template>
-
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import useStore from '@/store';
-    import { ContactFormLabelTextProps } from '@/components/main/contact/form/types';
-
-    const store = useStore();
-
-    defineProps<ContactFormLabelTextProps>();
-
-    const locales = computed(() => store.locales.sections.contact.form);
-</script>
diff --git a/client/src/components/main/footer/CookiesModal.vue b/client/src/components/main/footer/CookiesModal.vue
index 2f6d49e..6182d8d 100644
--- a/client/src/components/main/footer/CookiesModal.vue
+++ b/client/src/components/main/footer/CookiesModal.vue
@@ -1,3 +1,16 @@
+<script lang="ts" setup>
+    import { computed } from 'vue';
+    import useStore from '@/store';
+    import skLocales from '@/locales/sk';
+    import CloseIcon from '@/components/main/CloseIcon.vue';
+
+    defineEmits<{ (event: 'close'): void }>();
+
+    const store = useStore();
+
+    const locales = computed(() => (store.locales as typeof skLocales).cookies);
+</script>
+
 <template>
     <Teleport to="#modal-container">
         <div class="cookies-modal">
@@ -29,19 +42,6 @@
     </Teleport>
 </template>
 
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import useStore from '@/store';
-    import skLocales from '@/locales/sk';
-    import CloseIcon from '@/components/main/CloseIcon.vue';
-
-    defineEmits<{ (event: 'close'): void }>();
-
-    const store = useStore();
-
-    const locales = computed(() => (store.locales as typeof skLocales).cookies);
-</script>
-
 <style lang="scss" scoped>
     .cookies-modal {
         align-items: center;
diff --git a/client/src/components/main/footer/FooterComponent.vue b/client/src/components/main/footer/FooterComponent.vue
index 5dfefa3..ef27eb3 100644
--- a/client/src/components/main/footer/FooterComponent.vue
+++ b/client/src/components/main/footer/FooterComponent.vue
@@ -1,3 +1,20 @@
+<script lang="ts" setup>
+    import { computed, defineAsyncComponent, ref } from 'vue';
+    import useStore from '@/store';
+    import ExternalLink from '@/components/ExternalLink.vue';
+    import { SiteLanguage } from '@/store/types';
+
+    const CookiesModal = defineAsyncComponent({ loader: () => import('./CookiesModal.vue') });
+
+    const store = useStore();
+
+    const showCookies = ref(false);
+
+    const language = computed(() => store.language);
+
+    const locales = computed(() => store.locales.footer);
+</script>
+
 <template>
     <section class="footer-component">
         <footer class="footer">
@@ -31,23 +48,6 @@
     </section>
 </template>
 
-<script lang="ts" setup>
-    import { computed, defineAsyncComponent, ref } from 'vue';
-    import useStore from '@/store';
-    import ExternalLink from '@/components/ExternalLink.vue';
-    import { SiteLanguage } from '@/store/types';
-
-    const CookiesModal = defineAsyncComponent({ loader: () => import('./CookiesModal.vue') });
-
-    const store = useStore();
-
-    const showCookies = ref(false);
-
-    const language = computed(() => store.language);
-
-    const locales = computed(() => store.locales.footer);
-</script>
-
 <style lang="scss" scoped>
     .footer-component {
         --footer-height: 40px;
diff --git a/client/src/components/main/home/Home.vue b/client/src/components/main/home/Home.vue
index fda2a74..950f552 100644
--- a/client/src/components/main/home/Home.vue
+++ b/client/src/components/main/home/Home.vue
@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+    import MainSection from '@/components/main/MainSection.vue';
+    import HomeText from '@/components/main/home/HomeText.vue';
+    import { computed } from 'vue';
+    import useStore from '@/store';
+
+    const store = useStore();
+
+    const imageFormat = computed(() => store.imageFormat);
+</script>
+
 <template>
     <MainSection
         class="home has-curtain"
@@ -10,17 +21,6 @@
     </MainSection>
 </template>
 
-<script lang="ts" setup>
-    import MainSection from '@/components/main/MainSection.vue';
-    import HomeText from '@/components/main/home/HomeText.vue';
-    import { computed } from 'vue';
-    import useStore from '@/store';
-
-    const store = useStore();
-
-    const imageFormat = computed(() => store.imageFormat);
-</script>
-
 <style lang="scss" scoped>
     .home {
         --navbar-height: 60px;
diff --git a/client/src/components/main/home/HomeText.vue b/client/src/components/main/home/HomeText.vue
index 69b2ee4..dbe8125 100644
--- a/client/src/components/main/home/HomeText.vue
+++ b/client/src/components/main/home/HomeText.vue
@@ -1,29 +1,3 @@
-<template>
-    <p class="home-text">
-        <span>{{ locales.welcome }}</span>
-        <span
-            class="home-programming-language"
-            data-testid="programming-language"
-        >
-            <span
-                class="home-programming-language-non-marked"
-                data-testid="non-marked-text"
-            >
-                <HomeTextProgrammingLanguage :programmingLanguage="nonMarkedText" />
-            </span>
-            <mark
-                class="home-programming-language-marked"
-                data-testid="marked-text"
-            >
-                <HomeTextProgrammingLanguage :programmingLanguage="markedText" />
-            </mark>
-        </span>
-        <HomeTextCursor :blinking="cursorIsBlinking" />
-        <span>{{ ' ' }}</span>
-        <span data-testid="locales">{{ locales.developer }}.</span>
-    </p>
-</template>
-
 <script lang="ts" setup>
     import { computed, ref, watch } from 'vue';
     import useStore from '@/store';
@@ -230,6 +204,32 @@
     );
 </script>
 
+<template>
+    <p class="home-text">
+        <span>{{ locales.welcome }}</span>
+        <span
+            class="home-programming-language"
+            data-testid="programming-language"
+        >
+            <span
+                class="home-programming-language-non-marked"
+                data-testid="non-marked-text"
+            >
+                <HomeTextProgrammingLanguage :programmingLanguage="nonMarkedText" />
+            </span>
+            <mark
+                class="home-programming-language-marked"
+                data-testid="marked-text"
+            >
+                <HomeTextProgrammingLanguage :programmingLanguage="markedText" />
+            </mark>
+        </span>
+        <HomeTextCursor :blinking="cursorIsBlinking" />
+        <span>{{ ' ' }}</span>
+        <span data-testid="locales">{{ locales.developer }}.</span>
+    </p>
+</template>
+
 <style lang="scss" scoped>
     .home-text {
         --home-text-font-size: 70px;
diff --git a/client/src/components/main/home/HomeTextCursor.vue b/client/src/components/main/home/HomeTextCursor.vue
index 5addfba..5ad43aa 100644
--- a/client/src/components/main/home/HomeTextCursor.vue
+++ b/client/src/components/main/home/HomeTextCursor.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+    defineProps<{
+        blinking: boolean;
+    }>();
+</script>
+
 <template>
     <span
         data-testid="cursor"
@@ -5,9 +11,3 @@
         :class="{ 'animate-blinking': blinking }"
     />
 </template>
-
-<script lang="ts" setup>
-    defineProps<{
-        blinking: boolean;
-    }>();
-</script>
diff --git a/client/src/components/main/home/HomeTextProgrammingLanguage.vue b/client/src/components/main/home/HomeTextProgrammingLanguage.vue
index 1ae00e8..b6aeccc 100644
--- a/client/src/components/main/home/HomeTextProgrammingLanguage.vue
+++ b/client/src/components/main/home/HomeTextProgrammingLanguage.vue
@@ -1,8 +1,3 @@
-<template>
-    <span class="home-programming-language-an-prefix">{{ anPrefix }}</span>
-    <span class="home-programming-language-base">{{ base }}</span>
-</template>
-
 <script lang="ts" setup>
     import { computed } from 'vue';
     import { HomeTextProgrammingLanguageProps } from '@/components/main/home/types';
@@ -22,6 +17,11 @@
     );
 </script>
 
+<template>
+    <span class="home-programming-language-an-prefix">{{ anPrefix }}</span>
+    <span class="home-programming-language-base">{{ base }}</span>
+</template>
+
 <style lang="scss" scoped>
     .home-programming-language-base {
         font-weight: 700;
diff --git a/client/src/components/main/navbar/Navbar.vue b/client/src/components/main/navbar/Navbar.vue
index c515ccc..9cc7417 100644
--- a/client/src/components/main/navbar/Navbar.vue
+++ b/client/src/components/main/navbar/Navbar.vue
@@ -1,62 +1,3 @@
-<template>
-    <nav
-        class="navbar"
-        :class="{ opened }"
-        ref="root"
-        :style="`--navbar-max-height: ${maxHeight}`"
-    >
-        <div class="navbar-part navbar-left-part navbar-outer-part">
-            <NavbarLink
-                class="navbar-left-link navbar-logo"
-                data-testid="logo"
-                routerLink
-                replace
-                title="Tomáš Kudláč"
-                to="home"
-                @click="$emit('linkClick', 'home')"
-            />
-        </div>
-        <div class="navbar-part navbar-middle-part">
-            <NavbarLink
-                class="navbar-middle-link"
-                v-for="[name, section] in sections"
-                :key="name"
-                :active="name === activeSection"
-                data-testid="section-link"
-                routerLink
-                replace
-                :title="section.title"
-                :to="name"
-                @click="onLinkClick(name)"
-            />
-        </div>
-        <div class="navbar-part navbar-right-part navbar-outer-part">
-            <div class="navbar-other-lang-container">
-                <NavbarLink
-                    class="navbar-other-lang"
-                    data-testid="navbar-other-lang"
-                    routerLink
-                    :text="locales.otherLangCode"
-                    :title="locales.otherLangLinkTitle"
-                    :to="locales.otherLangHref"
-                    @click="$emit('languageToggle')"
-                />
-                <NavbarIcon
-                    v-if="touchscreen"
-                    :mode="opened ? 'cross' : 'bars'"
-                    @click="opened = !opened"
-                />
-            </div>
-            <div class="navbar-social-network-container">
-                <NavbarSocialNetwork
-                    v-for="socialNetwork in socialNetworks"
-                    v-bind="socialNetwork"
-                />
-            </div>
-        </div>
-    </nav>
-</template>
-
 <script lang="ts" setup>
     import NavbarLink from '@/components/main/navbar/NavbarLink.vue';
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
@@ -129,6 +70,65 @@
     });
 </script>
 
+<template>
+    <nav
+        class="navbar"
+        :class="{ opened }"
+        ref="root"
+        :style="`--navbar-max-height: ${maxHeight}`"
+    >
+        <div class="navbar-part navbar-left-part navbar-outer-part">
+            <NavbarLink
+                class="navbar-left-link navbar-logo"
+                data-testid="logo"
+                routerLink
+                replace
+                title="Tomáš Kudláč"
+                to="home"
+                @click="$emit('linkClick', 'home')"
+            />
+        </div>
+        <div class="navbar-part navbar-middle-part">
+            <NavbarLink
+                class="navbar-middle-link"
+                v-for="[name, section] in sections"
+                :key="name"
+                :active="name === activeSection"
+                data-testid="section-link"
+                routerLink
+                replace
+                :title="section.title"
+                :to="name"
+                @click="onLinkClick(name)"
+            />
+        </div>
+        <div class="navbar-part navbar-right-part navbar-outer-part">
+            <div class="navbar-other-lang-container">
+                <NavbarLink
+                    class="navbar-other-lang"
+                    data-testid="navbar-other-lang"
+                    routerLink
+                    :text="locales.otherLangCode"
+                    :title="locales.otherLangLinkTitle"
+                    :to="locales.otherLangHref"
+                    @click="$emit('languageToggle')"
+                />
+                <NavbarIcon
+                    v-if="touchscreen"
+                    :mode="opened ? 'cross' : 'bars'"
+                    @click="opened = !opened"
+                />
+            </div>
+            <div class="navbar-social-network-container">
+                <NavbarSocialNetwork
+                    v-for="socialNetwork in socialNetworks"
+                    v-bind="socialNetwork"
+                />
+            </div>
+        </div>
+    </nav>
+</template>
+
 <style lang="scss" scoped>
     .navbar {
         --navbar-transition-duration: 0.8s;
diff --git a/client/src/components/main/navbar/NavbarIcon.vue b/client/src/components/main/navbar/NavbarIcon.vue
index d7fae4a..e9c4a63 100644
--- a/client/src/components/main/navbar/NavbarIcon.vue
+++ b/client/src/components/main/navbar/NavbarIcon.vue
@@ -1,3 +1,20 @@
+<script lang="ts" setup>
+    import { computed } from 'vue';
+    import useStore from '@/store';
+    import { NavbarIconProps } from '@/components/main/navbar/types';
+
+    defineProps<NavbarIconProps>();
+    const emit = defineEmits<{ (event: 'click'): void }>();
+
+    const store = useStore();
+
+    const onClick = () => {
+        emit('click');
+    };
+
+    const locales = computed(() => store.locales.navbar);
+</script>
+
 <template>
     <div
         class="navbar-icon"
@@ -23,23 +40,6 @@
     </div>
 </template>
 
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import useStore from '@/store';
-    import { NavbarIconProps } from '@/components/main/navbar/types';
-
-    defineProps<NavbarIconProps>();
-    const emit = defineEmits<{ (event: 'click'): void }>();
-
-    const store = useStore();
-
-    const onClick = () => {
-        emit('click');
-    };
-
-    const locales = computed(() => store.locales.navbar);
-</script>
-
 <style lang="scss" scoped>
     .navbar-icon {
         --half-transition: calc(var(--navbar-transition-duration) / 2);
diff --git a/client/src/components/main/navbar/NavbarLink.vue b/client/src/components/main/navbar/NavbarLink.vue
index 8fc5771..8c001f5 100644
--- a/client/src/components/main/navbar/NavbarLink.vue
+++ b/client/src/components/main/navbar/NavbarLink.vue
@@ -1,16 +1,3 @@
-<template>
-    <Component
-        :is="routerLink ? 'router-link' : ExternalLink"
-        class="navbar-link"
-        :class="[$attrs.class, { active }]"
-        :title="title"
-        v-bind="dynamicProps"
-        @click="onClick"
-    >
-        <slot>{{ text ?? title }}</slot>
-    </Component>
-</template>
-
 <script lang="ts" setup>
     import mainSections from '@/components/main/mainSections';
     import { computed } from 'vue';
@@ -39,6 +26,19 @@
     const to = computed(() => mainSections[props.to]?.url ?? props.to);
 </script>
 
+<template>
+    <Component
+        :is="routerLink ? 'router-link' : ExternalLink"
+        class="navbar-link"
+        :class="[$attrs.class, { active }]"
+        :title="title"
+        v-bind="dynamicProps"
+        @click="onClick"
+    >
+        <slot>{{ text ?? title }}</slot>
+    </Component>
+</template>
+
 <style lang="scss" scoped>
     .navbar-link {
         align-items: center;
diff --git a/client/src/components/main/navbar/NavbarSocialNetwork.vue b/client/src/components/main/navbar/NavbarSocialNetwork.vue
index a0bcd67..345f285 100644
--- a/client/src/components/main/navbar/NavbarSocialNetwork.vue
+++ b/client/src/components/main/navbar/NavbarSocialNetwork.vue
@@ -1,16 +1,3 @@
-<template>
-    <NavbarLink
-        position="right"
-        :title="title"
-        :to="to"
-    >
-        <FontAwesomeIcon
-            class="navbar-social-network"
-            :icon="icon"
-        />
-    </NavbarLink>
-</template>
-
 <script lang="ts" setup>
     import { library } from '@fortawesome/fontawesome-svg-core';
     import { faEnvelope, faTimes } from '@fortawesome/free-solid-svg-icons';
@@ -29,6 +16,19 @@
     defineProps<NavbarSocialNetworkProps>();
 </script>
 
+<template>
+    <NavbarLink
+        position="right"
+        :title="title"
+        :to="to"
+    >
+        <FontAwesomeIcon
+            class="navbar-social-network"
+            :icon="icon"
+        />
+    </NavbarLink>
+</template>
+
 <style lang="scss" scoped>
     .navbar-social-network {
         padding-left: 10px;
diff --git a/client/src/components/main/projects/Project.vue b/client/src/components/main/projects/Project.vue
index 17de187..05a7512 100644
--- a/client/src/components/main/projects/Project.vue
+++ b/client/src/components/main/projects/Project.vue
@@ -1,44 +1,3 @@
-<template>
-    <ExternalLink
-        class="project cover-background has-curtain"
-        :href="projectLocales.href"
-        :style="{ backgroundImage }"
-        :title="`${generalLocales.showProject} ${[projectLocales.title]}`"
-    >
-        <div class="text-content">
-            <div class="project-content">
-                <h3
-                    class="project-title"
-                    data-testid="title"
-                >
-                    {{ projectLocales.title }}
-                </h3>
-                <div
-                    class="project-text"
-                    :style="`--hover-height: ${textHoverHeight}px`"
-                >
-                    <div
-                        class="project-text-content"
-                        data-testid="text-content"
-                        ref="textContent"
-                    >
-                        <h4 class="project-what-ive-done">{{ generalLocales.whatIveDone }}:</h4>
-                        <p class="project-text-design">
-                            {{ generalLocales.designLabel }}: {{ projectLocales.designDesc }}
-                        </p>
-                        <p class="project-text-front-end">
-                            {{ generalLocales.frontEndLabel }}: {{ projectLocales.frontEndDesc }}
-                        </p>
-                        <p class="project-text-back-end">
-                            {{ generalLocales.backEndLabel }}: {{ projectLocales.backEndDesc }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ExternalLink>
-</template>
-
 <script lang="ts" setup>
     import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import useStore from '@/store';
@@ -84,6 +43,47 @@
     });
 </script>
 
+<template>
+    <ExternalLink
+        class="project cover-background has-curtain"
+        :href="projectLocales.href"
+        :style="{ backgroundImage }"
+        :title="`${generalLocales.showProject} ${[projectLocales.title]}`"
+    >
+        <div class="text-content">
+            <div class="project-content">
+                <h3
+                    class="project-title"
+                    data-testid="title"
+                >
+                    {{ projectLocales.title }}
+                </h3>
+                <div
+                    class="project-text"
+                    :style="`--hover-height: ${textHoverHeight}px`"
+                >
+                    <div
+                        class="project-text-content"
+                        data-testid="text-content"
+                        ref="textContent"
+                    >
+                        <h4 class="project-what-ive-done">{{ generalLocales.whatIveDone }}:</h4>
+                        <p class="project-text-design">
+                            {{ generalLocales.designLabel }}: {{ projectLocales.designDesc }}
+                        </p>
+                        <p class="project-text-front-end">
+                            {{ generalLocales.frontEndLabel }}: {{ projectLocales.frontEndDesc }}
+                        </p>
+                        <p class="project-text-back-end">
+                            {{ generalLocales.backEndLabel }}: {{ projectLocales.backEndDesc }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ExternalLink>
+</template>
+
 <style lang="scss" scoped>
     .project {
         align-items: center;
diff --git a/client/src/components/main/projects/Projects.vue b/client/src/components/main/projects/Projects.vue
index e63be2c..8ed236c 100644
--- a/client/src/components/main/projects/Projects.vue
+++ b/client/src/components/main/projects/Projects.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+    import MainSection from '@/components/main/MainSection.vue';
+    import Project from '@/components/main/projects/Project.vue';
+
+    const projects = ['fifaManiaci', 'simonQ', 'villaRomaine', 'havranPub'];
+</script>
+
 <template>
     <MainSection
         class="projects"
@@ -13,13 +20,6 @@
     </MainSection>
 </template>
 
-<script lang="ts" setup>
-    import MainSection from '@/components/main/MainSection.vue';
-    import Project from '@/components/main/projects/Project.vue';
-
-    const projects = ['fifaManiaci', 'simonQ', 'villaRomaine', 'havranPub'];
-</script>
-
 <style lang="scss" scoped>
     .projects {
         padding-top: var(--main-row-gap);