diff --git a/app/assets/app.css b/app/assets/app.css
index c6f55d2..c37c484 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -17,6 +17,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "NDS12 Bold";
+  src: url("/assets/fonts/nds-12px-bold.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "NDS39";
   src: url("/assets/fonts/nds-39px.ttf") format("truetype");
diff --git a/app/assets/fonts/nds-12px-bold.woff2 b/app/assets/fonts/nds-12px-bold.woff2
new file mode 100644
index 0000000..11e8c3a
Binary files /dev/null and b/app/assets/fonts/nds-12px-bold.woff2 differ
diff --git a/app/components/Home/BottomScreen/Background.vue b/app/components/Home/BottomScreen/Background.vue
index 16cabcf..a018654 100644
--- a/app/components/Home/BottomScreen/Background.vue
+++ b/app/components/Home/BottomScreen/Background.vue
@@ -7,7 +7,10 @@ const app = useAppStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
-  ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
+  ctx.fillStyle = "#fbfbfb"
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+  
+  ctx.globalAlpha = store.isIntro? store.intro.stage1Opacity:1;
   assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
 });
 
diff --git a/app/components/Home/TopScreen/Background.vue b/app/components/Home/TopScreen/Background.vue
index 88ae153..8c61cab 100644
--- a/app/components/Home/TopScreen/Background.vue
+++ b/app/components/Home/TopScreen/Background.vue
@@ -6,7 +6,10 @@ const app = useAppStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
-  ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
+  ctx.fillStyle = "#fbfbfb"
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+  
+  ctx.globalAlpha = store.isIntro? store.intro.stage1Opacity:1;
   assets.images.home.topScreen.background.draw(ctx, 0, 0);
 });
 
diff --git a/app/components/Intro/BottomScreen/BottomScreen.vue b/app/components/Intro/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..85db1c5
--- /dev/null
+++ b/app/components/Intro/BottomScreen/BottomScreen.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import gsap from "gsap";
+
+const app = useAppStore();
+const store = useIntroStore();
+const { onRender, onClick } = useScreen();
+const { assets } = useAssets();
+
+const TITLE_Y = 25;
+const TEXT_Y = 63;
+const HINT_Y = 167;
+
+const hintTextOpacity = ref(0);
+
+store.$subscribe((_, state) => {
+  if (!state.isIntro && !state.isOutro) {
+    gsap.to(hintTextOpacity, {
+      value: 1,
+      duration: 0.5,
+      repeat: -1,
+      yoyo: true,
+      ease: "none",
+    });
+  }
+});
+
+onRender((ctx) => {
+  ctx.textBaseline = "top";
+
+  ctx.fillStyle = "#fbfbfb";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  ctx.fillStyle = "#000000";
+
+  // title
+  ctx.font = "12px NDS12 Bold";
+  ctx.letterSpacing = "1px";
+
+  const TEXT = "WARNING - COPYRIGHT";
+  const { actualBoundingBoxRight: width } = ctx.measureText(TEXT);
+
+  const logoWidth = assets.images.intro.warning.rect.width;
+  const logoX = Math.floor(LOGICAL_WIDTH / 2 - (width + logoWidth + 3) / 2);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.textOpacity
+    : store.isOutro
+      ? store.outro.textOpacity
+      : 1;
+
+  assets.images.intro.warning.draw(ctx, logoX, TITLE_Y - 1);
+  ctx.fillText(TEXT, logoX + logoWidth + 3, TITLE_Y);
+
+  ctx.letterSpacing = "0px";
+
+  // text
+  ctx.font = "10px NDS10";
+  const TEXT2 =
+    "THIS IS A NON-COMMERCIAL FAN-MADE\nRECREATION. NOT AFFILIATED WITH\nOR ENDORSED BY NINTENDO.\nNINTENDO DS IS A TRADEMARK OF\nNINTENDO CO., LTD.";
+  const lines = TEXT2.split("\n");
+  for (let i = 0, y = TEXT_Y; i < lines.length; i += 1, y += 18)
+    fillTextHCentered(ctx, lines[i]!, 0, y, LOGICAL_WIDTH);
+
+  // hint
+  ctx.font = "10px NDS10";
+  ctx.globalAlpha = store.isIntro
+    ? 0
+    : store.isOutro
+      ? store.outro.textOpacity
+      : hintTextOpacity.value;
+  fillTextHCentered(
+    ctx,
+    "Touch the Touch Screen to continue.",
+    0,
+    HINT_Y,
+    LOGICAL_WIDTH,
+  );
+});
+
+onClick(() => {
+  if (store.isIntro || store.isOutro) return;
+
+  store.animateOutro();
+});
+
+useKeyDown((key) => {
+  if (store.isIntro || store.isOutro) return;
+
+  switch (key) {
+    case "NDS_A":
+    case "NDS_START":
+      store.animateOutro();
+      break;
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/components/Intro/TopScreen/TopScreen.vue b/app/components/Intro/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..7d25f64
--- /dev/null
+++ b/app/components/Intro/TopScreen/TopScreen.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const { assets } = useAssets();
+const store = useIntroStore();
+
+const frames = Object.keys(assets.images.intro.logoAnimated).sort();
+
+onMounted(() => {
+  store.$reset();
+  store.animateIntro();
+});
+
+onRender((ctx) => {
+  ctx.fillStyle = "#fbfbfb";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.textOpacity
+    : store.isOutro
+      ? store.outro.textOpacity
+      : 1;
+
+  const frameIndex = Math.floor(store.intro.logoFrameIndex);
+  const frameKey = frames[
+    frameIndex
+  ] as keyof typeof assets.images.intro.logoAnimated;
+  const frame = assets.images.intro.logoAnimated[frameKey];
+
+  frame.draw(ctx, 0, 0);
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/stores/home.ts b/app/stores/home.ts
index c07a84b..3c0d0d5 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -20,14 +20,11 @@ export const useHomeStore = defineStore("home", {
 
   actions: {
     animateIntro() {
-      const appStore = useAppStore();
-
       this.isIntro = true;
 
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isIntro = false;
-          if (!appStore.booted) appStore.booted = true;
         },
       });
 
diff --git a/app/stores/intro.ts b/app/stores/intro.ts
new file mode 100644
index 0000000..f18caf4
--- /dev/null
+++ b/app/stores/intro.ts
@@ -0,0 +1,68 @@
+import gsap from "gsap";
+
+export const useIntroStore = defineStore("intro", {
+  state: () => ({
+    intro: {
+      textOpacity: 0,
+      logoFrameIndex: 0,
+    },
+
+    outro: {
+      textOpacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      this.isIntro = true;
+
+      const { assets } = useAssets();
+      const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
+      const logoDuration = totalFrames / 25;
+
+      gsap
+        .timeline()
+        .to({}, { duration: 2 })
+        .to(
+          this.intro,
+          {
+            textOpacity: 1,
+            duration: 0.1,
+            ease: "none",
+          },
+          3,
+        )
+        .to(
+          this.intro,
+          {
+            logoFrameIndex: totalFrames - 1,
+            duration: logoDuration,
+            ease: "steps(" + (totalFrames - 1) + ")",
+          },
+          3,
+        )
+        .call(() => {
+          this.isIntro = false;
+        });
+    },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      gsap
+        .timeline()
+        .to(this.outro, {
+          textOpacity: 0,
+          duration: 0.25,
+          ease: "none",
+        })
+        .call(() => {
+          const app = useAppStore();
+          app.booted = true;
+        });
+    },
+  },
+});
diff --git a/public/nds/images/intro/logo-animated/01.webp b/public/nds/images/intro/logo-animated/01.webp
new file mode 100644
index 0000000..1192c4b
Binary files /dev/null and b/public/nds/images/intro/logo-animated/01.webp differ
diff --git a/public/nds/images/intro/logo-animated/02.webp b/public/nds/images/intro/logo-animated/02.webp
new file mode 100644
index 0000000..13c2af9
Binary files /dev/null and b/public/nds/images/intro/logo-animated/02.webp differ
diff --git a/public/nds/images/intro/logo-animated/03.webp b/public/nds/images/intro/logo-animated/03.webp
new file mode 100644
index 0000000..7849347
Binary files /dev/null and b/public/nds/images/intro/logo-animated/03.webp differ
diff --git a/public/nds/images/intro/logo-animated/04.webp b/public/nds/images/intro/logo-animated/04.webp
new file mode 100644
index 0000000..7536108
Binary files /dev/null and b/public/nds/images/intro/logo-animated/04.webp differ
diff --git a/public/nds/images/intro/logo-animated/05.webp b/public/nds/images/intro/logo-animated/05.webp
new file mode 100644
index 0000000..46c5bd7
Binary files /dev/null and b/public/nds/images/intro/logo-animated/05.webp differ
diff --git a/public/nds/images/intro/logo-animated/06.webp b/public/nds/images/intro/logo-animated/06.webp
new file mode 100644
index 0000000..263bbd5
Binary files /dev/null and b/public/nds/images/intro/logo-animated/06.webp differ
diff --git a/public/nds/images/intro/logo-animated/07.webp b/public/nds/images/intro/logo-animated/07.webp
new file mode 100644
index 0000000..81b5a01
Binary files /dev/null and b/public/nds/images/intro/logo-animated/07.webp differ
diff --git a/public/nds/images/intro/logo-animated/08.webp b/public/nds/images/intro/logo-animated/08.webp
new file mode 100644
index 0000000..9145c86
Binary files /dev/null and b/public/nds/images/intro/logo-animated/08.webp differ
diff --git a/public/nds/images/intro/logo-animated/09.webp b/public/nds/images/intro/logo-animated/09.webp
new file mode 100644
index 0000000..44b291c
Binary files /dev/null and b/public/nds/images/intro/logo-animated/09.webp differ
diff --git a/public/nds/images/intro/logo-animated/10.webp b/public/nds/images/intro/logo-animated/10.webp
new file mode 100644
index 0000000..3f93282
Binary files /dev/null and b/public/nds/images/intro/logo-animated/10.webp differ
diff --git a/public/nds/images/intro/logo-animated/11.webp b/public/nds/images/intro/logo-animated/11.webp
new file mode 100644
index 0000000..b606d8d
Binary files /dev/null and b/public/nds/images/intro/logo-animated/11.webp differ
diff --git a/public/nds/images/intro/logo-animated/12.webp b/public/nds/images/intro/logo-animated/12.webp
new file mode 100644
index 0000000..6f2fbe6
Binary files /dev/null and b/public/nds/images/intro/logo-animated/12.webp differ
diff --git a/public/nds/images/intro/logo-animated/13.webp b/public/nds/images/intro/logo-animated/13.webp
new file mode 100644
index 0000000..b465007
Binary files /dev/null and b/public/nds/images/intro/logo-animated/13.webp differ
diff --git a/public/nds/images/intro/logo-animated/14.webp b/public/nds/images/intro/logo-animated/14.webp
new file mode 100644
index 0000000..79234da
Binary files /dev/null and b/public/nds/images/intro/logo-animated/14.webp differ
diff --git a/public/nds/images/intro/logo-animated/15.webp b/public/nds/images/intro/logo-animated/15.webp
new file mode 100644
index 0000000..247f499
Binary files /dev/null and b/public/nds/images/intro/logo-animated/15.webp differ
diff --git a/public/nds/images/intro/logo-animated/16.webp b/public/nds/images/intro/logo-animated/16.webp
new file mode 100644
index 0000000..58eb65b
Binary files /dev/null and b/public/nds/images/intro/logo-animated/16.webp differ
diff --git a/public/nds/images/intro/logo-animated/17.webp b/public/nds/images/intro/logo-animated/17.webp
new file mode 100644
index 0000000..837da44
Binary files /dev/null and b/public/nds/images/intro/logo-animated/17.webp differ
diff --git a/public/nds/images/intro/logo-animated/18.webp b/public/nds/images/intro/logo-animated/18.webp
new file mode 100644
index 0000000..51c1031
Binary files /dev/null and b/public/nds/images/intro/logo-animated/18.webp differ
diff --git a/public/nds/images/intro/logo-animated/19.webp b/public/nds/images/intro/logo-animated/19.webp
new file mode 100644
index 0000000..92743ba
Binary files /dev/null and b/public/nds/images/intro/logo-animated/19.webp differ
diff --git a/public/nds/images/intro/logo-animated/20.webp b/public/nds/images/intro/logo-animated/20.webp
new file mode 100644
index 0000000..81148a9
Binary files /dev/null and b/public/nds/images/intro/logo-animated/20.webp differ
diff --git a/public/nds/images/intro/logo-animated/21.webp b/public/nds/images/intro/logo-animated/21.webp
new file mode 100644
index 0000000..81148a9
Binary files /dev/null and b/public/nds/images/intro/logo-animated/21.webp differ
diff --git a/public/nds/images/intro/logo-animated/22.webp b/public/nds/images/intro/logo-animated/22.webp
new file mode 100644
index 0000000..b6cf60b
Binary files /dev/null and b/public/nds/images/intro/logo-animated/22.webp differ
diff --git a/public/nds/images/intro/logo-animated/23.webp b/public/nds/images/intro/logo-animated/23.webp
new file mode 100644
index 0000000..a4a98f6
Binary files /dev/null and b/public/nds/images/intro/logo-animated/23.webp differ
diff --git a/public/nds/images/intro/logo-animated/24.webp b/public/nds/images/intro/logo-animated/24.webp
new file mode 100644
index 0000000..8d4edfb
Binary files /dev/null and b/public/nds/images/intro/logo-animated/24.webp differ
diff --git a/public/nds/images/intro/logo-animated/25.webp b/public/nds/images/intro/logo-animated/25.webp
new file mode 100644
index 0000000..ef88839
Binary files /dev/null and b/public/nds/images/intro/logo-animated/25.webp differ
diff --git a/public/nds/images/intro/logo-animated/26.webp b/public/nds/images/intro/logo-animated/26.webp
new file mode 100644
index 0000000..ce9cac5
Binary files /dev/null and b/public/nds/images/intro/logo-animated/26.webp differ
diff --git a/public/nds/images/intro/logo-animated/27.webp b/public/nds/images/intro/logo-animated/27.webp
new file mode 100644
index 0000000..2d6f9f4
Binary files /dev/null and b/public/nds/images/intro/logo-animated/27.webp differ
diff --git a/public/nds/images/intro/logo-animated/28.webp b/public/nds/images/intro/logo-animated/28.webp
new file mode 100644
index 0000000..72413c7
Binary files /dev/null and b/public/nds/images/intro/logo-animated/28.webp differ
diff --git a/public/nds/images/intro/logo-animated/29.webp b/public/nds/images/intro/logo-animated/29.webp
new file mode 100644
index 0000000..0397d95
Binary files /dev/null and b/public/nds/images/intro/logo-animated/29.webp differ
diff --git a/public/nds/images/intro/logo-animated/30.webp b/public/nds/images/intro/logo-animated/30.webp
new file mode 100644
index 0000000..0aaf703
Binary files /dev/null and b/public/nds/images/intro/logo-animated/30.webp differ
diff --git a/public/nds/images/intro/logo-animated/31.webp b/public/nds/images/intro/logo-animated/31.webp
new file mode 100644
index 0000000..b92bb45
Binary files /dev/null and b/public/nds/images/intro/logo-animated/31.webp differ
diff --git a/public/nds/images/intro/logo-animated/32.webp b/public/nds/images/intro/logo-animated/32.webp
new file mode 100644
index 0000000..2f62d70
Binary files /dev/null and b/public/nds/images/intro/logo-animated/32.webp differ
diff --git a/public/nds/images/intro/logo-animated/33.webp b/public/nds/images/intro/logo-animated/33.webp
new file mode 100644
index 0000000..7219ac9
Binary files /dev/null and b/public/nds/images/intro/logo-animated/33.webp differ
diff --git a/public/nds/images/intro/logo-animated/34.webp b/public/nds/images/intro/logo-animated/34.webp
new file mode 100644
index 0000000..57f5290
Binary files /dev/null and b/public/nds/images/intro/logo-animated/34.webp differ
diff --git a/public/nds/images/intro/logo-animated/35.webp b/public/nds/images/intro/logo-animated/35.webp
new file mode 100644
index 0000000..850eb1d
Binary files /dev/null and b/public/nds/images/intro/logo-animated/35.webp differ
diff --git a/public/nds/images/intro/logo-animated/36.webp b/public/nds/images/intro/logo-animated/36.webp
new file mode 100644
index 0000000..c55399c
Binary files /dev/null and b/public/nds/images/intro/logo-animated/36.webp differ
diff --git a/public/nds/images/intro/logo-animated/37.webp b/public/nds/images/intro/logo-animated/37.webp
new file mode 100644
index 0000000..5f8217a
Binary files /dev/null and b/public/nds/images/intro/logo-animated/37.webp differ
diff --git a/public/nds/images/intro/logo-animated/38.webp b/public/nds/images/intro/logo-animated/38.webp
new file mode 100644
index 0000000..8adf5ee
Binary files /dev/null and b/public/nds/images/intro/logo-animated/38.webp differ
diff --git a/public/nds/images/intro/logo-animated/39.webp b/public/nds/images/intro/logo-animated/39.webp
new file mode 100644
index 0000000..c6d960c
Binary files /dev/null and b/public/nds/images/intro/logo-animated/39.webp differ
diff --git a/public/nds/images/intro/warning.webp b/public/nds/images/intro/warning.webp
new file mode 100644
index 0000000..52b482d
Binary files /dev/null and b/public/nds/images/intro/warning.webp differ