diff --git a/app/components/Gallery/BottomScreen/BottomScreen.vue b/app/components/Gallery/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..b0c256e
--- /dev/null
+++ b/app/components/Gallery/BottomScreen/BottomScreen.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useGalleryStore();
+const { assets } = useAssets();
+
+onRender((ctx) => {
+  ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
+
+  ctx.fillStyle = "#000000";
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.fadeOpacity
+    : store.isOutro
+      ? store.outro.fadeOpacity
+      : 0;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/components/Gallery/TopScreen/TopScreen.vue b/app/components/Gallery/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..7bbdc61
--- /dev/null
+++ b/app/components/Gallery/TopScreen/TopScreen.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useGalleryStore();
+const { assets } = useAssets();
+
+onMounted(() => {
+  if (store.shouldAnimateOutro) {
+    store.shouldAnimateOutro = false;
+    store.animateOutro();
+  } else {
+    store.$reset();
+    store.animateIntro();
+  }
+});
+
+onRender((ctx) => {
+  ctx.drawImage(assets.home.topScreen.background, 0, 0);
+
+  ctx.fillStyle = "#000000";
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.fadeOpacity
+    : store.isOutro
+      ? store.outro.fadeOpacity
+      : 0;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index 1e8a8e2..764401b 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -11,7 +11,7 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   buttons: {
     projects: [31, 23, 193, 49],
     contact: [31, 71, 97, 49],
-    downloadPlay: [127, 71, 97, 49],
+    gallery: [127, 71, 97, 49],
 
     theme: [0, 167, 31, 26],
     settings: [112, 167, 31, 26],
@@ -19,7 +19,7 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    if (button === "downloadPlay" || button === "theme" || button === "alarm")
+    if (button === "theme" || button === "alarm")
       throw new Error(`Not implemented: ${button}`);
 
     store.animateOutro(button);
@@ -28,15 +28,15 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     projects: {
       down: "last",
       left: "contact",
-      right: "downloadPlay",
+      right: "gallery",
       horizontalMode: "preview",
     },
     contact: {
       up: "projects",
-      right: "downloadPlay",
+      right: "gallery",
       down: "settings",
     },
-    downloadPlay: {
+    gallery: {
       up: "projects",
       left: "contact",
       down: "settings",
@@ -70,6 +70,19 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => {
 
 onRender((ctx) => {
   ctx.globalAlpha = getOpacity();
+
+  // gallery
+  ctx.font = "7px NDS7";
+  ctx.fillStyle = "#2c2c2c";
+  fillTextCentered(
+    ctx,
+    $t("home.photoGallery"),
+    132,
+    78 + getButtonOffset("gallery"),
+    87,
+  );
+
+  // gba thing
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#a2a2a2";
   fillTextCentered(ctx, $t("home.greeting"), 79, 135, 140);
@@ -91,9 +104,9 @@ onRender((ctx) => {
   />
   <Button
     :x="128"
-    :y="72 + getButtonOffset('downloadPlay')"
-    :opacity="getOpacity('downloadPlay')"
-    :image="assets.home.bottomScreen.buttons.downloadPlay"
+    :y="72 + getButtonOffset('gallery')"
+    :opacity="getOpacity('gallery')"
+    :image="assets.home.bottomScreen.buttons.gallery"
   />
 
   <Button
diff --git a/app/components/NDS.vue b/app/components/NDS.vue
index 100bfad..bd28cb5 100644
--- a/app/components/NDS.vue
+++ b/app/components/NDS.vue
@@ -41,6 +41,15 @@ const { camera, renderer } = useTresContext();
 
 model.scale.set(100, 100, 100);
 
+const app = useAppStore();
+watch(
+  () => camera.activeCamera.value,
+  (cam) => {
+    if (cam) app.setCamera(cam);
+  },
+  { immediate: true },
+);
+
 meshes.clear();
 model.traverse((child) => {
   if (child instanceof THREE.Mesh) {
@@ -199,6 +208,7 @@ const handleClick = (event: MouseEvent) => {
   switch (intersection.object.name) {
     case TOP_SCREEN:
     case BOTTOM_SCREEN: {
+      console.log(intersection);
       const canvas =
         intersection.object.name === TOP_SCREEN
           ? props.topScreenCanvas
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index f77e84d..8dde5e5 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -133,6 +133,8 @@ const animateIntro = async () => {
   );
 };
 
+const galleryStore = useGalleryStore();
+
 const animateOutro = async () => {
   isAnimating.value = true;
 
@@ -156,6 +158,7 @@ const animateOutro = async () => {
   typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
     onComplete: async () => {
       await sleep(ANIMATION_SLEEP * 1000);
+      galleryStore.shouldAnimateOutro = true;
       router.push("/");
     },
   });
diff --git a/app/pages/index.vue b/app/pages/index.vue
index eff0564..8578fac 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import * as THREE from "three";
 import type { Screen as NDSScreen } from "#components";
 
-// TODO: keys doesn't work anymore if 3D modea is disabled
-const ENABLE_3D = false;
+const ENABLE_3D = true;
 
 type ScreenInstance = InstanceType<typeof NDSScreen>;
 
@@ -59,7 +59,7 @@ useKeyUp((key) => {
       <TresPerspectiveCamera
         :args="[45, 1, 0.001, 1000]"
         :position="[0, 10, 12]"
-        :rotation="[-Math.PI / 4.7, 0, 0]"
+        :rotation="[THREE.MathUtils.degToRad(-38.3), 0, 0]"
       />
 
       <TresAmbientLight />
@@ -79,6 +79,7 @@ useKeyUp((key) => {
           <ContactTopScreen v-else-if="app.screen === 'contact'" />
           <ProjectsTopScreen v-else-if="app.screen === 'projects'" />
           <SettingsTopScreen v-else-if="app.screen === 'settings'" />
+          <GalleryTopScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
       <div>
@@ -87,6 +88,7 @@ useKeyUp((key) => {
           <ContactBottomScreen v-else-if="app.screen === 'contact'" />
           <ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
           <SettingsBottomScreen v-else-if="app.screen === 'settings'" />
+          <GalleryBottomScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
     </div>
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 9e00fc2..f1397ab 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -1,4 +1,5 @@
 import { z } from "zod/mini";
+import type * as THREE from "three";
 
 const STORAGE_ID = "app_settings";
 
@@ -29,6 +30,7 @@ export const useAppStore = defineStore("app", {
       booted: false,
       settings,
       screen: "home" as AppScreen,
+      camera: null as THREE.Camera | null,
     };
   },
 
@@ -41,6 +43,10 @@ export const useAppStore = defineStore("app", {
       this.screen = screen;
     },
 
+    setCamera(camera: THREE.Camera) {
+      this.camera = camera;
+    },
+
     save() {
       localStorage.setItem(STORAGE_ID, JSON.stringify(this.settings));
     },
diff --git a/app/stores/gallery.ts b/app/stores/gallery.ts
new file mode 100644
index 0000000..61d4aaa
--- /dev/null
+++ b/app/stores/gallery.ts
@@ -0,0 +1,147 @@
+import gsap from "gsap";
+import * as THREE from "three";
+
+export const useGalleryStore = defineStore("gallery", {
+  state: () => ({
+    intro: {
+      fadeOpacity: 0,
+    },
+
+    outro: {
+      fadeOpacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+    shouldAnimateOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      const CAMERA_DELAY = 0.7;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 0;
+      const FADE_DURATION = 1;
+
+      this.isIntro = true;
+      this.isOutro = false;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+          },
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.intro,
+        { fadeOpacity: 0 },
+        {
+          fadeOpacity: 1,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        navigateTo("/gallery");
+      }, 3150);
+    },
+
+    animateOutro() {
+      const CAMERA_DELAY = 0;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 2.3;
+      const FADE_DURATION = 1;
+
+      this.isIntro = false;
+      this.isOutro = true;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+          },
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.outro,
+        { fadeOpacity: 1 },
+        {
+          fadeOpacity: 0,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        this.isOutro = false;
+        app.navigateTo("home");
+      }, 3310);
+    },
+  },
+});
diff --git a/app/stores/home.ts b/app/stores/home.ts
index fcf5489..c07a84b 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -61,8 +61,13 @@ export const useHomeStore = defineStore("home", {
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isOutro = true;
+
           const app = useAppStore();
-          app.navigateTo(to);
+          if (to === "gallery") {
+            app.navigateTo("gallery");
+          } else {
+            app.navigateTo(to);
+          }
         },
       });
 
diff --git a/app/types/app.d.ts b/app/types/app.d.ts
index 0f87c2b..eb57fc5 100644
--- a/app/types/app.d.ts
+++ b/app/types/app.d.ts
@@ -1 +1 @@
-type AppScreen = "home" | "contact" | "projects" | "settings";
+type AppScreen = "home" | "contact" | "projects" | "settings" | "gallery";
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9634291..c24aa80 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,6 +1,7 @@
 {
   "home": {
-    "greeting": "Welcome to my website!"
+    "greeting": "Welcome to my website!",
+    "photoGallery": "Photo Gallery"
   },
   "settings": {
     "title": "Settings",
diff --git a/public/nds/images/home/bottom-screen/buttons/downloadPlay.webp b/public/nds/images/home/bottom-screen/buttons/downloadPlay.webp
deleted file mode 100644
index 8583901..0000000
Binary files a/public/nds/images/home/bottom-screen/buttons/downloadPlay.webp and /dev/null differ
diff --git a/public/nds/images/home/bottom-screen/buttons/gallery.webp b/public/nds/images/home/bottom-screen/buttons/gallery.webp
new file mode 100644
index 0000000..7042cec
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/gallery.webp differ