diff --git a/app/assets/images/settings/top-screen/clock/alarm.webp b/app/assets/images/settings/top-screen/clock/alarm.webp
new file mode 100644
index 0000000..bb610fb
Binary files /dev/null and b/app/assets/images/settings/top-screen/clock/alarm.webp differ
diff --git a/app/assets/images/settings/top-screen/clock/clock.webp b/app/assets/images/settings/top-screen/clock/clock.webp
new file mode 100644
index 0000000..9359ac0
Binary files /dev/null and b/app/assets/images/settings/top-screen/clock/clock.webp differ
diff --git a/app/assets/images/settings/top-screen/clock/date.webp b/app/assets/images/settings/top-screen/clock/date.webp
new file mode 100644
index 0000000..7fce3c4
Binary files /dev/null and b/app/assets/images/settings/top-screen/clock/date.webp differ
diff --git a/app/assets/images/settings/top-screen/clock/time.webp b/app/assets/images/settings/top-screen/clock/time.webp
new file mode 100644
index 0000000..f745ebb
Binary files /dev/null and b/app/assets/images/settings/top-screen/clock/time.webp differ
diff --git a/app/assets/images/settings/top-screen/notification-title.webp b/app/assets/images/settings/top-screen/notification-title.webp
new file mode 100644
index 0000000..a01e480
Binary files /dev/null and b/app/assets/images/settings/top-screen/notification-title.webp differ
diff --git a/app/assets/images/settings/top-screen/options/gba-mode.webp b/app/assets/images/settings/top-screen/options/gba-mode.webp
new file mode 100644
index 0000000..f71125a
Binary files /dev/null and b/app/assets/images/settings/top-screen/options/gba-mode.webp differ
diff --git a/app/assets/images/settings/top-screen/options/language.webp b/app/assets/images/settings/top-screen/options/language.webp
new file mode 100644
index 0000000..1af16b5
Binary files /dev/null and b/app/assets/images/settings/top-screen/options/language.webp differ
diff --git a/app/assets/images/settings/top-screen/options/options.webp b/app/assets/images/settings/top-screen/options/options.webp
new file mode 100644
index 0000000..bd8a7c6
Binary files /dev/null and b/app/assets/images/settings/top-screen/options/options.webp differ
diff --git a/app/assets/images/settings/top-screen/options/start-up.webp b/app/assets/images/settings/top-screen/options/start-up.webp
new file mode 100644
index 0000000..99b0394
Binary files /dev/null and b/app/assets/images/settings/top-screen/options/start-up.webp differ
diff --git a/app/assets/images/settings/top-screen/touch_screen/touch_screen.webp b/app/assets/images/settings/top-screen/touch_screen/touch_screen.webp
new file mode 100644
index 0000000..75d93c2
Binary files /dev/null and b/app/assets/images/settings/top-screen/touch_screen/touch_screen.webp differ
diff --git a/app/assets/images/settings/top-screen/user/birthday.webp b/app/assets/images/settings/top-screen/user/birthday.webp
new file mode 100644
index 0000000..003eb0e
Binary files /dev/null and b/app/assets/images/settings/top-screen/user/birthday.webp differ
diff --git a/app/assets/images/settings/top-screen/user/color.webp b/app/assets/images/settings/top-screen/user/color.webp
new file mode 100644
index 0000000..75840d0
Binary files /dev/null and b/app/assets/images/settings/top-screen/user/color.webp differ
diff --git a/app/assets/images/settings/top-screen/user/message.webp b/app/assets/images/settings/top-screen/user/message.webp
new file mode 100644
index 0000000..427c263
Binary files /dev/null and b/app/assets/images/settings/top-screen/user/message.webp differ
diff --git a/app/assets/images/settings/top-screen/user/user.webp b/app/assets/images/settings/top-screen/user/user.webp
new file mode 100644
index 0000000..ca96276
Binary files /dev/null and b/app/assets/images/settings/top-screen/user/user.webp differ
diff --git a/app/assets/images/settings/top-screen/user/user_name.webp b/app/assets/images/settings/top-screen/user/user_name.webp
new file mode 100644
index 0000000..5adcda3
Binary files /dev/null and b/app/assets/images/settings/top-screen/user/user_name.webp differ
diff --git a/app/components/Settings/BottomScreen/BottomScreen.vue b/app/components/Settings/BottomScreen/BottomScreen.vue
index 88892f8..fea147c 100644
--- a/app/components/Settings/BottomScreen/BottomScreen.vue
+++ b/app/components/Settings/BottomScreen/BottomScreen.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
+import Menus from "./Menus/Menus.vue";
 
 const store = useSettingsStore();
 
@@ -10,4 +11,5 @@ onMounted(() => {
 
 <template>
   <Background />
+  <Menus />
 </template>
diff --git a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
new file mode 100644
index 0000000..c019949
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
+import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
+import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
+import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, alarmImage, timeImage, dateImage] = useImages(
+  MENU_IMAGE,
+  ALARM_IMAGE,
+  TIME_IMAGE,
+  DATE_IMAGE,
+);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(alarmImage!, 0, -48);
+    ctx.drawImage(timeImage!, 48, -48);
+    ctx.drawImage(dateImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
new file mode 100644
index 0000000..e0a2140
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import OptionsMenu from "./OptionsMenu.vue";
+import ClockMenu from "./ClockMenu.vue";
+import UserMenu from "./UserMenu.vue";
+import TouchScreenMenu from "./TouchScreenMenu.vue";
+import Selector from "~/components/Common/ButtonSelector.vue";
+
+const { selectedButton: selected, selectorPosition } = useButtonNavigation({
+  buttons: {
+    options: [31, 119, 49, 49],
+    optionsLanguage: [31, 71, 49, 49],
+    optionsGbaMode: [79, 71, 49, 49],
+    optionsStartUp: [31, 23, 49, 49],
+
+    clock: [79, 119, 49, 49],
+    clockAlarm: [79, 71, 49, 49],
+    clockTime: [127, 71, 49, 49],
+    clockDate: [79, 23, 49, 49],
+
+    user: [127, 119, 49, 49],
+    userBirthday: [79, 71, 49, 49],
+    userName: [127, 71, 49, 49],
+    userMessage: [175, 71, 49, 49],
+    userColor: [127, 23, 49, 49],
+
+    touchScreen: [175, 119, 49, 49],
+  },
+  initialButton: "options",
+  navigation: {
+    options: {
+      right: "clock",
+      up: "optionsLanguage",
+    },
+    optionsLanguage: {
+      down: "options",
+      up: "optionsStartUp",
+      right: "optionsGbaMode",
+    },
+    optionsGbaMode: {
+      down: "options",
+      left: "optionsLanguage",
+      up: "optionsStartUp",
+    },
+    optionsStartUp: {
+      right: "optionsGbaMode",
+      down: "optionsLanguage",
+    },
+
+    clock: {
+      left: "options",
+      right: "user",
+      up: "clockAlarm",
+    },
+    clockAlarm: {
+      down: "clock",
+      up: "clockDate",
+      right: "clockTime",
+    },
+    clockTime: {
+      down: "clock",
+      left: "clockAlarm",
+      up: "clockDate",
+    },
+    clockDate: {
+      right: "clockTime",
+      down: "clockAlarm",
+    },
+
+    user: {
+      left: "clock",
+      right: "touchScreen",
+      up: "userName",
+    },
+    userBirthday: {
+      down: "user",
+      up: "userColor",
+      right: "userName",
+    },
+    userName: {
+      down: "user",
+      left: "userBirthday",
+      right: "userMessage",
+      up: "userColor",
+    },
+    userMessage: {
+      down: "user",
+      left: "userName",
+      up: "userColor",
+    },
+    userColor: {
+      left: "userBirthday",
+      right: "userMessage",
+      down: "userName",
+    },
+
+    touchScreen: {
+      left: "user",
+    },
+  },
+});
+</script>
+
+<template>
+  <OptionsMenu :x="33" :y="121" :is-open="/^options[A-Z]/.test(selected)" />
+  <ClockMenu :x="81" :y="121" :is-open="/^clock[A-Z]/.test(selected)" />
+  <UserMenu :x="129" :y="121" :is-open="/^user[A-Z]/.test(selected)" />
+  <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+
+  <Selector :rect="selectorPosition" :opacity="1" />
+</template>
diff --git a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
new file mode 100644
index 0000000..f336ac6
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
+import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
+import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
+import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, gbaModeImage, languageImage, startUpImage] = useImages(
+  MENU_IMAGE,
+  GBA_MODE_IMAGE,
+  LANGUAGE_IMAGE,
+  START_UP_IMAGE,
+);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(languageImage!, 0, -48);
+    ctx.drawImage(gbaModeImage!, 48, -48);
+    ctx.drawImage(startUpImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
new file mode 100644
index 0000000..c57ce6c
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch_screen.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+}>();
+
+const [menuImage] = useImages(MENU_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(menuImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Settings/BottomScreen/Menus/UserMenu.vue b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
new file mode 100644
index 0000000..dc84431
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
+import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
+import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
+import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
+import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
+  useImages(
+    MENU_IMAGE,
+    BIRTHDAY_IMAGE,
+    COLOR_IMAGE,
+    MESSAGE_IMAGE,
+    USER_NAME_IMAGE,
+  );
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(birthdayImage!, -48, -48);
+    ctx.drawImage(userNameImage!, 0, -48);
+    ctx.drawImage(messageImage!, 48, -48);
+    ctx.drawImage(colorImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Settings/TopScreen/Calendar.vue b/app/components/Settings/TopScreen/Calendar.vue
index 9cc65bc..f77bdca 100644
--- a/app/components/Settings/TopScreen/Calendar.vue
+++ b/app/components/Settings/TopScreen/Calendar.vue
@@ -13,6 +13,8 @@ useRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
+  ctx.translate(0, -16);
+
   const CALENDAR_COLS = 7;
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
diff --git a/app/components/Settings/TopScreen/Clock.vue b/app/components/Settings/TopScreen/Clock.vue
index 244443b..e6542e9 100644
--- a/app/components/Settings/TopScreen/Clock.vue
+++ b/app/components/Settings/TopScreen/Clock.vue
@@ -52,6 +52,8 @@ function drawLine(
 }
 
 useRender((ctx) => {
+  ctx.translate(0, -16);
+
   ctx.drawImage(clockImage!, 13, 45);
 
   const now = new Date();
diff --git a/app/components/Settings/TopScreen/Notifications.vue b/app/components/Settings/TopScreen/Notifications.vue
new file mode 100644
index 0000000..392305a
--- /dev/null
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
+
+const [titleImage] = useImages(TITLE_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(titleImage!, 0, 144);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Settings/TopScreen/TopScreen.vue b/app/components/Settings/TopScreen/TopScreen.vue
index 111d4a9..85f4874 100644
--- a/app/components/Settings/TopScreen/TopScreen.vue
+++ b/app/components/Settings/TopScreen/TopScreen.vue
@@ -3,6 +3,7 @@ import Background from "./Background.vue";
 import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
+import Notifications from "./Notifications.vue";
 </script>
 
 <template>
@@ -10,4 +11,5 @@ import StatusBar from "./StatusBar.vue";
   <Calendar />
   <Clock />
   <StatusBar />
+  <Notifications />
 </template>
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index f3f9564..ba53a9e 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -1,5 +1,3 @@
 export const useSettingsStore = defineStore("settings", {
   state: () => ({}),
-
-  actions: {},
 });