diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue
index 93ac457..b6ba2c4 100644
--- a/src/components/YrhNav.vue
+++ b/src/components/YrhNav.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import YrhButton from '@/components/atoms/YrhButton.vue'
+
 import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
-import YrhButton from './YrhButton.vue'
 
 const { bannerText } = storeToRefs(useBannerStore())
 
@@ -42,7 +43,7 @@ function handleInactiveState() {
 
 <template>
   <div class="relative">
-    <menu v-if="props.items">
+    <menu v-if="props.items" class="pl-11">
       <li
         v-for="item in props.items"
         :key="item.id"
@@ -70,7 +71,6 @@ function handleInactiveState() {
 <style lang="scss" scoped>
 menu {
   position: relative;
-  @apply pl-11;
 
   li:not(:first-child) {
     @apply mt-3;
diff --git a/src/components/YrhBanner.vue b/src/components/atoms/YrhBanner.vue
similarity index 100%
rename from src/components/YrhBanner.vue
rename to src/components/atoms/YrhBanner.vue
diff --git a/src/components/YrhButton.vue b/src/components/atoms/YrhButton.vue
similarity index 97%
rename from src/components/YrhButton.vue
rename to src/components/atoms/YrhButton.vue
index bab6721..2918371 100644
--- a/src/components/YrhButton.vue
+++ b/src/components/atoms/YrhButton.vue
@@ -65,12 +65,6 @@ function handleClick(e: MouseEvent) {
   }
 }
 
-function handleMouseOver() {
-  if (!isBtnFocused.value) {
-    playHoverSfx()
-  }
-}
-
 function handleFocusin() {
   if (!isBtnHovered.value) {
     playHoverSfx()
@@ -93,7 +87,6 @@ function handleFocusin() {
     @keyup.enter="handleClick"
     @keyup.space="handleClick"
     @focusin="handleFocusin"
-    @mouseover="handleMouseOver"
   >
     <Transition name="fade" :duration="{ enter: 100, leave: 100 }">
       <img
@@ -106,6 +99,7 @@ function handleFocusin() {
         alt=""
       />
     </Transition>
+
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />
     </span>
diff --git a/src/components/YrhCard.vue b/src/components/atoms/YrhCard.vue
similarity index 100%
rename from src/components/YrhCard.vue
rename to src/components/atoms/YrhCard.vue
diff --git a/src/components/YrhHeading.vue b/src/components/atoms/YrhHeading.vue
similarity index 100%
rename from src/components/YrhHeading.vue
rename to src/components/atoms/YrhHeading.vue
diff --git a/src/components/config/YrhAudioMenu.vue b/src/components/config/YrhAudioMenu.vue
index a06c553..7c59979 100644
--- a/src/components/config/YrhAudioMenu.vue
+++ b/src/components/config/YrhAudioMenu.vue
@@ -3,7 +3,7 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 </script>
 
 <template>
-  <menu>
+  <menu class="pl-11">
     <li>
       <YrhAudioSlider>Volume</YrhAudioSlider>
     </li>
@@ -13,7 +13,6 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 <style lang="scss" scoped>
 menu {
   position: relative;
-  @apply pl-11;
 
   li:not(:first-child) {
     @apply mt-3;
diff --git a/src/components/config/YrhAudioSlider.vue b/src/components/config/YrhAudioSlider.vue
index a9eb9b2..c107e1b 100644
--- a/src/components/config/YrhAudioSlider.vue
+++ b/src/components/config/YrhAudioSlider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import YrhButton from '../YrhButton.vue'
+import YrhButton from '@/components/atoms/YrhButton.vue'
 </script>
 
 <template>
diff --git a/src/components/datas/YrhStatusCard.vue b/src/components/datas/YrhStatusCard.vue
index b3823a8..87b1d52 100644
--- a/src/components/datas/YrhStatusCard.vue
+++ b/src/components/datas/YrhStatusCard.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import YrhCard from '@/components/atoms/YrhCard.vue'
+
 import { useStatusStore } from '@/stores/datas/statusStore'
 import { storeToRefs } from 'pinia'
-import YrhCard from '../YrhCard.vue'
 
 const { androidData } = storeToRefs(useStatusStore())
 </script>
diff --git a/src/components/datas/items/ItemSelection.vue b/src/components/datas/items/ItemSelection.vue
index 53289f4..4e8fa8f 100644
--- a/src/components/datas/items/ItemSelection.vue
+++ b/src/components/datas/items/ItemSelection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import YrhButton from '@/components/YrhButton.vue'
+import YrhButton from '@/components/atoms/YrhButton.vue'
+
 import type { GameItem } from '@/models/YrhGameItem'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
diff --git a/src/router/index.ts b/src/router/index.ts
index dbf4d48..43fc175 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import HomeVue from '../views/Home.vue'
-import DataVue from '../views/Data.vue'
+import HomeVue from '@/views/Home.vue'
+import DataVue from '@/views/Data.vue'
 import ItemsVue from '@/views/datas/Items.vue'
 import ConfigVue from '@/views/Config.vue'
 
diff --git a/src/views/Config.vue b/src/views/Config.vue
index 7feaa66..df79f46 100644
--- a/src/views/Config.vue
+++ b/src/views/Config.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
 import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
 import type { MenuItem } from '@/models/YrhNavItem'
diff --git a/src/views/Data.vue b/src/views/Data.vue
index aecdf33..fca8c68 100644
--- a/src/views/Data.vue
+++ b/src/views/Data.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ef2ae4c..084c603 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhBanner from '@/components/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhBanner from '@/components/atoms/YrhBanner.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
 import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
diff --git a/src/views/datas/Items.vue b/src/views/datas/Items.vue
index c41da76..987dcdb 100644
--- a/src/views/datas/Items.vue
+++ b/src/views/datas/Items.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import YrhCard from '@/components/YrhCard.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
+import YrhCard from '@/components/atoms/YrhCard.vue'
+import YrhHeading from '@/components/atoms/YrhHeading.vue'
 import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
 import { useBannerStore } from '@/stores/banner'
@@ -34,10 +34,12 @@ onMounted(() => {
     ITEMS
     <template #subtitle> All items </template>
   </YrhHeading>
+
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
     <div class="items-container max-h-full overflow-hidden">
       <ItemSelection :items="availableItems" />
     </div>
+
     <div class="max-h-full">
       <Transition name="fade" mode="out-in">
         <YrhCard v-if="currentItem" breathe-bottom>