diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 421cf77a..5d553417 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -14,7 +14,7 @@ $vh-app-bar-height: 72px;
 $vh-app-drawer-width: 256px;
 
 // z-index
-$vh-app-drawer-zindex: 6;
+$vh-app-drawer-zindex: 7;
 $vh-app-drawer-overlay-zindex: $vh-app-drawer-zindex - 1;
 
 // class
diff --git a/assets/scss/plugins/vuetify.scss b/assets/scss/plugins/vuetify.scss
index ebe67d6c..a8fc3c00 100644
--- a/assets/scss/plugins/vuetify.scss
+++ b/assets/scss/plugins/vuetify.scss
@@ -75,23 +75,6 @@
     }
 }
 
-.v-app-bar {
-    background: transparentize($vh-color-app-bar, .18) !important;
-    backdrop-filter: blur(1rem);
-    box-shadow: none !important;
-    height: $vh-app-bar-height !important;
-    border-block-end: 1px solid rgba(#fff, .12) !important;
-    @media #{map-get($display-breakpoints, "md-and-up")} {
-        display: none !important
-    }
-    .v-toolbar__content {
-        height: 100% !important
-    }
-    .vh-app-logo {
-        margin-inline-start: -48px
-    }
-}
-
 .v-main {
     transition: none !important;
     padding: $vh-app-bar-height 0 0 0 !important;
diff --git a/components/App/AppBar.vue b/components/App/AppBar.vue
index 52150660..11321fbc 100644
--- a/components/App/AppBar.vue
+++ b/components/App/AppBar.vue
@@ -4,18 +4,31 @@
             aria-label="Menüyü aç"
             @click="openDrawer()" />
 
-        <div class="d-flex justify-center flex-grow-1 h-100 py-2">
+        <div class="d-flex align-center justify-center flex-1">
             <AppLogo />
         </div>
     </v-app-bar>
 </template>
 
-<script>
+<script setup>
 import { openDrawer } from "@/utils/drawer.js";
+</script>
 
-export default {
-    methods: {
-        openDrawer
+<style lang="scss">
+.v-app-bar {
+    background: transparentize($vh-color-app-bar, .18) !important;
+    backdrop-filter: blur(1rem);
+    box-shadow: none !important;
+    height: $vh-app-bar-height !important;
+    border-block-end: 1px solid rgba(#fff, .12) !important;
+    @media #{map-get($display-breakpoints, "md-and-up")} {
+        display: none !important
     }
-};
-</script>
+    .v-toolbar__content {
+        height: 100% !important
+    }
+    .vh-app-logo {
+        margin-inline-start: -48px // Width of <v-app-bar-nav-icon />
+    }
+}
+</style>
diff --git a/components/App/AppDrawer.vue b/components/App/AppDrawer.vue
index 21474e8b..31c7bf9e 100644
--- a/components/App/AppDrawer.vue
+++ b/components/App/AppDrawer.vue
@@ -3,46 +3,40 @@
         <v-navigation-drawer
             app=""
             touchless="">
-            <template #prepend>
-                <div class="px-4 py-4">
-                    <AppLogo class="py-4" />
-                </div>
-                <v-divider class="mx-4 mb-2" />
-            </template>
+            <div class="pa-4">
+                <AppLogo />
+            </div>
+            <v-divider class="mx-4 mb-4" />
 
-            <div class="d-flex flex-column h-100">
-                <CalculatorList />
+            <CalculatorList />
 
-                <v-list
-                    class="mb-auto"
-                    subheader="">
-                    <v-subheader class="d-flex flex-row justify-space-between">
-                        <span>Döviz kurları</span>
-                        <v-btn
-                            href="https://www.exchangerate-api.com"
-                            target="_blank"
-                            plain=""
-                            small=""
-                            rel="nofollow noopener noreferrer"
-                            class="mx-n2">
-                            Exchange Rate API
-                            <v-icon
-                                size="12"
-                                right="">
-                                {{ icons.mdiOpenInNew }}
-                            </v-icon>
-                        </v-btn>
-                    </v-subheader>
-                    <v-list-item>
-                        <ExchangeRateGrid />
-                    </v-list-item>
-                </v-list>
-            </div>
+            <v-list
+                class="mb-auto"
+                subheader="">
+                <v-subheader class="d-flex flex-row justify-space-between">
+                    <span>Döviz kurları</span>
+                    <v-btn
+                        href="https://www.exchangerate-api.com"
+                        target="_blank"
+                        plain=""
+                        small=""
+                        rel="nofollow noopener noreferrer"
+                        class="mx-n2">
+                        Exchange Rate API
+                        <v-icon
+                            size="12"
+                            right="">
+                            {{ icons.mdiOpenInNew }}
+                        </v-icon>
+                    </v-btn>
+                </v-subheader>
+                <v-list-item>
+                    <ExchangeRateGrid />
+                </v-list-item>
+            </v-list>
 
             <template #append>
-                <div class="d-none d-md-block pa-4">
-                    <AppFooter />
-                </div>
+                <app-footer class="d-none d-md-block pa-4" />
             </template>
         </v-navigation-drawer>
         <v-overlay
diff --git a/components/App/AppFooter.vue b/components/App/AppFooter.vue
deleted file mode 100644
index 9468a259..00000000
--- a/components/App/AppFooter.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <footer class="text-center text-body-2 text--secondary">
-        <a href="https://github.com/ozgurg" rel="nofollow noopener noreferrer" target="_blank">@ozgurg</a> tarafından <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/ozgurg/vergihesaplayici.com">açık kaynaklı</a> olarak geliştirilmektedir
-        <b class="mt-2 d-block">v{{ version }}</b>
-    </footer>
-</template>
-
-<script>
-import { version } from "@/package.json";
-
-export default {
-    data: () => ({
-        version
-    })
-};
-</script>
diff --git a/components/App/AppLogo.vue b/components/App/AppLogo.vue
index 11d47109..2a1ce6fe 100644
--- a/components/App/AppLogo.vue
+++ b/components/App/AppLogo.vue
@@ -2,28 +2,22 @@
     <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
     <nuxt-link
         v-ripple=""
-        class="vh-app-logo d-flex align-center justify-center px-3 rounded-pill text--primary"
+        class="vh-app-logo d-flex align-center justify-center px-4 rounded-pill"
         aria-label="Ana sayfaya git"
         :to="AnaSayfa.url"
         v-html="logo" />
 </template>
 
-<script>
+<script setup>
 import AnaSayfa from "@/data/pages/ana-sayfa.page.js";
 import logo from "@/assets/img/logo.svg?raw";
-
-export default {
-    data: () => ({
-        AnaSayfa,
-        logo
-    })
-};
 </script>
 
 <!-- DO NOT make scoped -->
 <style lang="scss">
 .vh-app-logo {
     background: rgba($vh-color-primary, $vh-card-hover-opacity);
+    height: 48px;
     svg {
         width: 192px;
         height: 25px
diff --git a/components/App/app-footer.vue b/components/App/app-footer.vue
new file mode 100644
index 00000000..4093bbf4
--- /dev/null
+++ b/components/App/app-footer.vue
@@ -0,0 +1,28 @@
+<template>
+    <!--
+    To enhance readability, formatter:on and formatter:off comments have been added to disable the WebStorm formatter for the sentence.
+    -->
+    <footer class="text-center text-body-2 text--secondary">
+        <!-- @formatter:off -->
+        <a :href="authorUrl" rel="nofollow noopener noreferrer" target="_blank">@{{ authorUsername }}</a> tarafından <a :href="repositoryUrl" rel="nofollow noopener noreferrer" target="_blank">açık kaynaklı</a> olarak geliştirilmektedir
+        <!-- @formatter:on -->
+
+        <span class="font-weight-bold mt-2 d-block">
+            v{{ version }}
+        </span>
+    </footer>
+</template>
+
+<script setup>
+// FIXME:
+// Importing with object destructuring in "script setup" without using "as" causes WebStorm to not detect their usage within the template.
+// This can be refactored when it's fixed.
+import packageJson from "@/package.json";
+
+const authorUrl = packageJson.author.url;
+const authorUsername = packageJson.author.url.split("/")[3];
+
+const repositoryUrl = packageJson.repository.url;
+
+const version = packageJson.version;
+</script>
diff --git a/components/ArticleDisclaimerAlert.vue b/components/ArticleDisclaimerAlert.vue
index 296d4826..78bc4276 100644
--- a/components/ArticleDisclaimerAlert.vue
+++ b/components/ArticleDisclaimerAlert.vue
@@ -1,11 +1,8 @@
 <template>
-    <v-alert
-        :icon="false"
-        text=""
-        type="warning">
+    <vh-alert type="warning">
         Bu web sitesinde yer alan <b>doğruluğu ve güncelliği teyit edilmemiş</b> yazılar siteyi dolu gösterme amaçlıdır
         ve herhangi bir
         <b>niteliği yoktur</b>. Bu yazılara bakarak herhangi bir <b>karar almayın</b> veya yazıları <b>referans olarak
         göstermeyin</b>.
-    </v-alert>
+    </vh-alert>
 </template>
diff --git a/components/Calculation/CalculationPresetBrandCardItem.vue b/components/Calculation/CalculationPresetBrandCardItem.vue
index 0cd200f6..66c28ccf 100644
--- a/components/Calculation/CalculationPresetBrandCardItem.vue
+++ b/components/Calculation/CalculationPresetBrandCardItem.vue
@@ -5,7 +5,7 @@
         <v-avatar
             size="32"
             color="white">
-            <Icon
+            <vh-icon
                 :icon="brand.icon"
                 :color="brand.color" />
         </v-avatar>
diff --git a/components/Calculator/CalculatorResultFormRow.vue b/components/Calculator/CalculatorResultFormRow.vue
index e2f031e6..565c69ce 100644
--- a/components/Calculator/CalculatorResultFormRow.vue
+++ b/components/Calculator/CalculatorResultFormRow.vue
@@ -14,7 +14,7 @@
                 <v-divider
                     class="my-2 me-3"
                     vertical="" />
-                <CopyButton :value-to-copy="value" />
+                <copy-icon-button :value-to-copy="value" />
             </template>
         </v-text-field>
     </FormRow>
diff --git a/components/Calculator/CalculatorShareDialogUrl.vue b/components/Calculator/CalculatorShareDialogUrl.vue
index b84969bf..7738f5dc 100644
--- a/components/Calculator/CalculatorShareDialogUrl.vue
+++ b/components/Calculator/CalculatorShareDialogUrl.vue
@@ -62,7 +62,7 @@
                     <v-divider
                         class="my-2 me-3"
                         vertical="" />
-                    <LazyCopyButton
+                    <lazy-copy-icon-button
                         :value-to-copy="url"
                         container-selector="#calculatorShareDialogCopyUrlContainer" />
                 </template>
diff --git a/components/CalculatorListItem.vue b/components/CalculatorListItem.vue
index 2c760e53..5c88f830 100644
--- a/components/CalculatorListItem.vue
+++ b/components/CalculatorListItem.vue
@@ -1,5 +1,7 @@
 <template>
-    <v-list-item :to="calculator.url">
+    <v-list-item
+        :to="calculator.url"
+        color="primary">
         <v-list-item-icon>
             <v-icon>
                 {{ calculator.icon }}
diff --git a/components/CopyButton.vue b/components/CopyButton.vue
deleted file mode 100644
index ea8f016d..00000000
--- a/components/CopyButton.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <v-btn
-        :aria-checked="isCopied ? 'true' : 'false'"
-        :aria-label="ariaLabel"
-        title="Kopyala"
-        class="vh-copy-button mx-n2"
-        icon=""
-        @click="copy()">
-        <span class="vh-copy-button__copy-icon">
-            <v-icon
-                size="20"
-                class="grey--text lighten-3">
-                {{ icons.mdiContentCopy }}
-            </v-icon>
-        </span>
-        <span class="vh-copy-button__check-icon">
-            <v-icon
-                size="24"
-                color="primary">
-                {{ icons.mdiCheck }}
-            </v-icon>
-        </span>
-    </v-btn>
-</template>
-
-<script>
-import { mdiCheck, mdiContentCopy } from "@mdi/js";
-
-export default {
-    data: () => ({
-        icons: {
-            mdiCheck,
-            mdiContentCopy
-        },
-        copiedTimeout: null,
-        isCopied: false
-    }),
-    props: {
-        valueToCopy: {
-            type: String,
-            required: true
-        },
-        containerSelector: {
-            type: String,
-            default: null
-        }
-    },
-    methods: {
-        copy() {
-            const vm = this;
-
-            // Prevent multiple copying
-            if (vm.isCopied) return;
-
-            vm._copyValue();
-
-            if (vm.copiedTimeout !== null) {
-                clearTimeout(vm.copiedTimeout);
-            }
-
-            vm.isCopied = true;
-
-            vm.copiedTimeout = setTimeout(() => {
-                vm.isCopied = false;
-            }, 1200); // 1000 + $secondary-transition's duration
-        },
-        _copyValue() {
-            const vm = this;
-
-            if (vm.containerSelector !== null) {
-                vm.$copyText(vm.valueToCopy, document.querySelector(vm.containerSelector));
-            } else {
-                vm.$copyText(vm.valueToCopy);
-            }
-        }
-    },
-    computed: {
-        ariaLabel() {
-            const vm = this;
-            return vm.isCopied ? "Kopyalandı" : "Kopyala";
-        }
-    },
-    destroyed() {
-        const vm = this;
-        clearTimeout(vm.copiedTimeout);
-    }
-};
-</script>
-
-<style lang="scss" scoped="">
-@import "~vuetify/src/styles/settings/_variables.scss";
-
-.vh-copy-button {
-    $self: &;
-    min-width: unset !important;
-    &[aria-checked="true"] {
-        #{$self}__copy-icon {
-            opacity: 0
-        }
-        #{$self}__check-icon {
-            opacity: 1
-        }
-    }
-    &__check-icon {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        flex-flow: column wrap;
-        justify-content: center;
-        opacity: 0
-    }
-    &__copy-icon,
-    &__check-icon {
-        transition: opacity $secondary-transition
-    }
-}
-</style>
diff --git a/components/EstimatedCalculationAlert.vue b/components/EstimatedCalculationAlert.vue
index c3303999..6327ca26 100644
--- a/components/EstimatedCalculationAlert.vue
+++ b/components/EstimatedCalculationAlert.vue
@@ -1,10 +1,7 @@
 <template>
-    <v-alert
-        :icon="false"
-        text=""
-        type="warning">
+    <vh-alert type="warning">
         Ürünlerin ülkeye giriş fiyatını veya menşei ülkenin vergilendirmesini bilmediğimiz için yurt dışı satış
         fiyatından <b>tahmini olarak</b> hesaplanmıştır. Gerçek satış
         fiyatı farklı olabilir.
-    </v-alert>
+    </vh-alert>
 </template>
diff --git a/components/ReverseCalculationAlert.vue b/components/ReverseCalculationAlert.vue
deleted file mode 100644
index 6b02350c..00000000
--- a/components/ReverseCalculationAlert.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <v-alert
-        :icon="false"
-        text=""
-        type="warning">
-        Para birimini <b>TRY</b> seçtiğiniz için vergili fiyat üzerinden vergisiz fiyat hesaplaması yapıldı.
-    </v-alert>
-</template>
diff --git a/components/MinimumWageAlert.vue b/components/affordability-alert.vue
similarity index 51%
rename from components/MinimumWageAlert.vue
rename to components/affordability-alert.vue
index 36e512fe..30e29bfb 100644
--- a/components/MinimumWageAlert.vue
+++ b/components/affordability-alert.vue
@@ -1,19 +1,16 @@
 <template>
-    <!-- DO NOT use v-html on root element -->
-    <v-alert
-        :icon="false"
-        text=""
-        type="info">
+    <!-- DO NOT use v-html on the root element -->
+    <vh-alert type="info">
         <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
         <div v-html="text" />
-    </v-alert>
+    </vh-alert>
 </template>
 
 <script>
 import { calculateMinimumWageDayCount, calculateMinimumWageMonthCount } from "@/utils/calculate-minimum-wage-count.js";
 import { moneyFormat } from "@/utils/formatter.js";
 
-const minimumWage = process.env.MINIMUM_WAGE;
+const { MINIMUM_WAGE } = process.env;
 
 export default {
     props: {
@@ -26,22 +23,21 @@ export default {
         text() {
             const vm = this;
 
-            if (vm.minimumWageMonthCount > 1) {
-                return `Türkiye'de asgari ücretle (${vm.formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${vm.minimumWageMonthCount}</span> aylık maaşı ile satın alabilir.`;
-            }
+            const count = vm.minimumWageMonthCount > 1 ? vm.minimumWageMonthCount : vm.minimumWageDayCount;
+            const timeUnit = vm.minimumWageMonthCount > 1 ? "aylık" : "günlük";
 
-            return `Türkiye'de asgari ücretle (${vm.formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${vm.minimumWageDayCount}</span> günlük maaşı ile satın alabilir.`;
+            return `Türkiye'de asgari ücretle (${vm.formattedMinimumWage}) çalışan birisi yemeden içmeden bu ürünü <span class="text-h6 font-weight-bold">${count}</span> ${timeUnit} maaşıyla satın alabilir.`;
         },
         formattedMinimumWage() {
-            return moneyFormat(minimumWage, "TRY");
+            return moneyFormat(MINIMUM_WAGE, "TRY");
         },
         minimumWageDayCount() {
             const vm = this;
-            return calculateMinimumWageDayCount(vm.price, minimumWage);
+            return calculateMinimumWageDayCount(vm.price, MINIMUM_WAGE);
         },
         minimumWageMonthCount() {
             const vm = this;
-            return calculateMinimumWageMonthCount(vm.price, minimumWage);
+            return calculateMinimumWageMonthCount(vm.price, MINIMUM_WAGE);
         }
     }
 };
diff --git a/components/copy-icon-button.vue b/components/copy-icon-button.vue
new file mode 100644
index 00000000..ebc2b194
--- /dev/null
+++ b/components/copy-icon-button.vue
@@ -0,0 +1,95 @@
+<template>
+    <v-btn
+        :aria-label="ariaLabel"
+        title="Kopyala"
+        class="mx-n2"
+        icon=""
+        @click="copy()">
+        <v-scroll-y-transition
+            origin="center"
+            mode="out-in">
+            <template v-if="!isCopied">
+                <v-icon
+                    key="copy"
+                    size="20"
+                    class="grey--text lighten-3">
+                    {{ icons.mdiContentCopy }}
+                </v-icon>
+            </template>
+            <template v-else>
+                <v-icon
+                    key="copied"
+                    size="24"
+                    color="primary">
+                    {{ icons.mdiCheckCircle }}
+                </v-icon>
+            </template>
+        </v-scroll-y-transition>
+    </v-btn>
+</template>
+
+<script>
+import { mdiCheckCircle, mdiContentCopy } from "@mdi/js";
+
+export default {
+    data: () => ({
+        icons: {
+            mdiCheckCircle,
+            mdiContentCopy
+        },
+        copiedTimeout: null,
+        isCopied: false
+    }),
+    props: {
+        valueToCopy: {
+            type: String,
+            required: true
+        },
+        containerSelector: {
+            type: String,
+            default: null
+        }
+    },
+    methods: {
+        copy() {
+            const vm = this;
+
+            if (vm.isCopied) return;
+
+            vm._copyValue();
+            vm._destroyTimeout();
+
+            vm.isCopied = true;
+            vm.copiedTimeout = setTimeout(() => {
+                vm.isCopied = false;
+            }, 1000);
+        },
+        _copyValue() {
+            const vm = this;
+
+            // DO NOT pass "null" as the default value.
+            // When "null" is used instead of "false", "$copyText" doesn't behave as expected.
+            const container = vm.containerSelector ? document.querySelector(vm.containerSelector) : false;
+            vm.$copyText(vm.valueToCopy, container);
+        },
+        _destroyTimeout() {
+            const vm = this;
+
+            if (vm.copiedTimeout !== null) {
+                clearTimeout(vm.copiedTimeout);
+                vm.copiedTimeout = null;
+            }
+        }
+    },
+    computed: {
+        ariaLabel() {
+            const vm = this;
+            return vm.isCopied ? "Kopyalandı" : "Kopyala";
+        }
+    },
+    destroyed() {
+        const vm = this;
+        vm._destroyTimeout();
+    }
+};
+</script>
diff --git a/components/CurrencySelector.vue b/components/currency-selector.vue
similarity index 100%
rename from components/CurrencySelector.vue
rename to components/currency-selector.vue
diff --git a/components/OsitaIhemeVideo.vue b/components/osita-iheme-video.vue
similarity index 71%
rename from components/OsitaIhemeVideo.vue
rename to components/osita-iheme-video.vue
index e0df45cf..e30f866a 100644
--- a/components/OsitaIhemeVideo.vue
+++ b/components/osita-iheme-video.vue
@@ -1,19 +1,20 @@
 <template>
     <a
         v-ripple=""
-        class="d-inline-flex overflow-hidden rounded grey darken-4"
+        class="d-inline-block overflow-hidden rounded"
         href="https://youtu.be/LPrhPC-L5Go?t=5"
         rel="nofollow noopener noreferrer"
         target="_blank"
         title="Osita Iheme">
         <video
-            class="rounded"
-            poster="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
             width="256"
             height="256"
             autoplay=""
             loop=""
             muted=""
+            defaultMuted=""
+            disablePictureInPicture=""
+            controlsList="nodownload"
             playsinline=""
             preload="none">
             <source
diff --git a/components/RetailPriceUpdateInfo.vue b/components/retail-price-update-info.vue
similarity index 87%
rename from components/RetailPriceUpdateInfo.vue
rename to components/retail-price-update-info.vue
index 722cc778..c3ad8301 100644
--- a/components/RetailPriceUpdateInfo.vue
+++ b/components/retail-price-update-info.vue
@@ -1,17 +1,17 @@
 <template>
     <v-tooltip
         right=""
-        max-width="240">
+        max-width="224">
         <template #activator="{ on, attrs }">
             <v-btn
                 v-bind="attrs"
                 :href="sourceUrl"
                 target="_blank"
-                plain=""
                 rel="nofollow noopener noreferrer"
+                plain=""
                 class="mx-n3"
                 v-on="on">
-                {{ relativeFormattedDate }} güncellendi
+                <span>{{ relativeFormattedDate }} güncellendi</span>
                 <v-icon
                     size="16"
                     right="">
@@ -20,7 +20,9 @@
             </v-btn>
         </template>
         <span>
-            Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <b>{{ domain }}</b> adresinden alınmıştır. Şu anki fiyat farklı olabilir.
+            Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <b>{{ domain }}</b> sitesinden elle güncellenmiştir.
+            <br />
+            Güncel fiyat farklı olabilir.
         </span>
     </v-tooltip>
 </template>
diff --git a/components/reverse-calculation-alert.vue b/components/reverse-calculation-alert.vue
new file mode 100644
index 00000000..1ff9cc71
--- /dev/null
+++ b/components/reverse-calculation-alert.vue
@@ -0,0 +1,5 @@
+<template>
+    <vh-alert type="warning">
+        Para birimi <b>TRY</b> olduğu için vergili fiyat üzerinden vergisiz fiyat hesaplaması yapıldı.
+    </vh-alert>
+</template>
diff --git a/components/vh/alert.vue b/components/vh/alert.vue
new file mode 100644
index 00000000..72475d9a
--- /dev/null
+++ b/components/vh/alert.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-alert
+        :type="type"
+        :icon="false"
+        :text="true">
+        <slot v-if="$slots.default" />
+    </v-alert>
+</template>
+<script>
+export default {
+    props: {
+        type: {
+            type: String,
+            default: ""
+        }
+    }
+};
+</script>
diff --git a/components/Icon.vue b/components/vh/icon.vue
similarity index 53%
rename from components/Icon.vue
rename to components/vh/icon.vue
index 7ee0ea42..ed9f5007 100644
--- a/components/Icon.vue
+++ b/components/vh/icon.vue
@@ -1,8 +1,13 @@
 <template>
-    <div class="vh-icon">
+    <div
+        class="vh-icon"
+        :style="style">
         <template v-if="isCustomIcon(icon)">
             <!-- eslint-disable vue/no-v-html -->
-            <div v-html="loadCustomIconAsHtml(icon)" />
+            <!-- FIXME: We don't need the wrapping "span" for it to work properly. It needs to be removed somehow. -->
+            <span
+                aria-hidden="true"
+                v-html="loadCustomIconAsHtml(icon)" />
         </template>
         <template v-else>
             <v-icon
@@ -25,7 +30,7 @@ export default {
         },
         color: {
             type: String,
-            required: true
+            default: "#000"
         },
         size: {
             type: Number,
@@ -35,18 +40,27 @@ export default {
     methods: {
         isCustomIcon,
         loadCustomIconAsHtml
+    },
+    computed: {
+        style() {
+            const vm = this;
+            return {
+                "--vh-icon-size": `${vm.size}px`,
+                "--vh-icon-color": vm.color
+            };
+        }
     }
 };
 </script>
 
-<style lang="scss" scoped="">
+<style>
 .vh-icon {
-    > div {
-        width: 24px;
-        height: 24px
-    }
-    :deep(svg) {
-        fill: v-bind(color)
+    color: var(--vh-icon-color);
+    width: var(--vh-icon-size);
+    height: var(--vh-icon-size);
+
+    svg {
+        fill: currentColor
     }
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 73586e66..40e1dbd9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,7 +9,7 @@
         <MainContainer>
             <Nuxt />
 
-            <AppFooter class="d-block d-md-none mt-16" />
+            <app-footer class="d-block d-md-none mt-16" />
         </MainContainer>
     </v-app>
 </template>
diff --git a/layouts/error.vue b/layouts/error.vue
index 2cffd255..16ed203b 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -28,12 +28,9 @@
                 Kalmasın diyorsan hatalarımı yüzüme vurmak için bunu kullanabilirsin:
             </p>
 
-            <v-alert
-                :icon="false"
-                text=""
-                type="error">
+            <vh-alert type="error">
                 {{ message }}
-            </v-alert>
+            </vh-alert>
         </InnerContainer>
     </div>
 </template>
diff --git a/package-lock.json b/package-lock.json
index f92e8d89..444f7fc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "6.70.0",
+    "version": "6.71.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "vergihesaplayici.com",
-            "version": "6.70.0",
+            "version": "6.71.0",
             "license": "MIT",
             "dependencies": {
                 "firebase": "10.7.1",
diff --git a/package.json b/package.json
index 62625c6a..1cb2e88c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vergihesaplayici.com",
-    "version": "6.70.0",
+    "version": "6.71.0",
     "description": "vergihesaplayici.com, vergi hesaplar.",
     "license": "MIT",
     "homepage": "https://vergihesaplayici.com/",
diff --git a/pages/index.vue b/pages/index.vue
index 36776e6e..5bae5552 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,7 +12,7 @@
                             vergihesaplayici.com, vergi hesaplar.
                         </p>
 
-                        <OsitaIhemeVideo />
+                        <osita-iheme-video />
                     </div>
                 </div>
 
diff --git a/pages/konsol-vergisi-hesaplayici/_slug.vue b/pages/konsol-vergisi-hesaplayici/_slug.vue
index be9d74fc..0f02f413 100644
--- a/pages/konsol-vergisi-hesaplayici/_slug.vue
+++ b/pages/konsol-vergisi-hesaplayici/_slug.vue
@@ -8,12 +8,12 @@
 
         <CalculatorInnerContainer>
             <template v-if="slug === 'steam-deck'">
-                <v-alert
-                    class="mb-10"
-                    type="info">
+                <vh-alert
+                    type="info"
+                    class="mb-10">
                     Bu ürünün hangi ürün kategorisinden vergilendirildiğini henüz bilmiyoruz. Bu sayfa sadece bilgi
                     vermek amacıyla hazırlanmıştır.
-                </v-alert>
+                </vh-alert>
             </template>
 
             <FormRow
@@ -34,7 +34,7 @@
                     class="mb-4" />
 
                 <FormRow class="mb-10">
-                    <MinimumWageAlert :price="results.prices.taxAdded" />
+                    <affordability-alert :price="results.prices.taxAdded" />
                 </FormRow>
 
                 <div
@@ -46,7 +46,7 @@
                         label="Piyasa fiyatı" />
 
                     <FormRow direction="horizontal">
-                        <RetailPriceUpdateInfo
+                        <retail-price-update-info
                             :last-updated-date="form.option.retailPrice.lastUpdatedDate"
                             :source-url="form.option.retailPrice.sourceUrl" />
                     </FormRow>
diff --git a/pages/konsol-vergisi-hesaplayici/index.vue b/pages/konsol-vergisi-hesaplayici/index.vue
index ca4703e8..e670492d 100644
--- a/pages/konsol-vergisi-hesaplayici/index.vue
+++ b/pages/konsol-vergisi-hesaplayici/index.vue
@@ -53,7 +53,7 @@
                             <v-col
                                 cols="4"
                                 md="3">
-                                <CurrencySelector v-model="form.currency" />
+                                <currency-selector v-model="form.currency" />
                             </v-col>
                         </v-row>
                     </FormRow>
@@ -61,7 +61,7 @@
                     <template v-if="shouldShowResults">
                         <FormRow>
                             <template v-if="form.currency === 'TRY'">
-                                <ReverseCalculationAlert />
+                                <reverse-calculation-alert />
                             </template>
                             <template v-else>
                                 <EstimatedCalculationAlert />
@@ -73,7 +73,7 @@
                             class="mb-5" />
 
                         <FormRow>
-                            <MinimumWageAlert
+                            <affordability-alert
                                 :price="results.prices.taxAdded"
                                 class="mb-10" />
                         </FormRow>
diff --git a/pages/telefon-vergisi-hesaplayici/_slug.vue b/pages/telefon-vergisi-hesaplayici/_slug.vue
index 44c48c70..008512a7 100644
--- a/pages/telefon-vergisi-hesaplayici/_slug.vue
+++ b/pages/telefon-vergisi-hesaplayici/_slug.vue
@@ -8,12 +8,12 @@
 
         <CalculatorInnerContainer>
             <template v-if="slug === 'apple-vision-pro'">
-                <v-alert
-                    class="mb-10"
-                    type="info">
+                <vh-alert
+                    type="info"
+                    class="mb-10">
                     Bu ürünün hangi ürün kategorisinden vergilendirileceğini henüz bilmiyoruz. Bu sayfa sadece bilgi
                     vermek amacıyla hazırlanmıştır.
-                </v-alert>
+                </vh-alert>
             </template>
 
             <FormRow
@@ -42,7 +42,7 @@
                     class="mb-4" />
 
                 <FormRow class="mb-10">
-                    <MinimumWageAlert :price="results.prices.taxAdded" />
+                    <affordability-alert :price="results.prices.taxAdded" />
                 </FormRow>
 
                 <div
@@ -54,7 +54,7 @@
                         label="Piyasa fiyatı" />
 
                     <FormRow direction="horizontal">
-                        <RetailPriceUpdateInfo
+                        <retail-price-update-info
                             :last-updated-date="form.option.retailPrice.lastUpdatedDate"
                             :source-url="form.option.retailPrice.sourceUrl" />
                     </FormRow>
diff --git a/pages/telefon-vergisi-hesaplayici/index.vue b/pages/telefon-vergisi-hesaplayici/index.vue
index 93b34c32..5b64e0e8 100644
--- a/pages/telefon-vergisi-hesaplayici/index.vue
+++ b/pages/telefon-vergisi-hesaplayici/index.vue
@@ -53,7 +53,7 @@
                             <v-col
                                 cols="4"
                                 md="3">
-                                <CurrencySelector v-model="form.currency" />
+                                <currency-selector v-model="form.currency" />
                             </v-col>
                         </v-row>
                     </FormRow>
@@ -69,7 +69,7 @@
                     <template v-if="shouldShowResults">
                         <FormRow>
                             <template v-if="form.currency === 'TRY'">
-                                <ReverseCalculationAlert />
+                                <reverse-calculation-alert />
                             </template>
                             <template v-else>
                                 <EstimatedCalculationAlert />
@@ -81,7 +81,7 @@
                             class="mb-5" />
 
                         <FormRow>
-                            <MinimumWageAlert
+                            <affordability-alert
                                 :price="results.prices.taxAdded"
                                 class="mb-10" />
                         </FormRow>