diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3648726..c7ea800 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -20,6 +20,7 @@ import SimPhonePicker, {
 } from '@/components/SimPhonePicker.vue'
 import { PHONE_FRAME_IMAGES } from '@/config/appearance'
 import { useClockStore } from '@/stores/clock'
+import { useGamesStore } from '@/features/games/store'
 import { useCallsStore } from '@/stores/calls'
 import { useAccountStore } from '@/stores/account'
 import { useMailStore } from '@/stores/mail'
@@ -66,6 +67,7 @@ const isDevelopment = import.meta.env.DEV
 const phone = usePhoneStore()
 const account = useAccountStore()
 const clock = useClockStore()
+const games = useGamesStore()
 const calls = useCallsStore()
 const mail = useMailStore()
 const media = useMediaStore()
@@ -106,6 +108,7 @@ function hydratePhone(payload: PhoneOpenPayload): void {
   account.hydrate(payload.account ?? null)
   notes.hydrate(payload.notes ?? [])
   clock.hydrate(payload.device?.data.alarms?.payload)
+  games.hydrate(payload.device?.data.games?.payload)
   media.hydrate(payload.device?.data.media?.payload)
   void mail.bootstrap(payload.account?.email ?? '')
   void calls.bootstrap()
diff --git a/frontend/src/assets/img/app-icons/memory.webp b/frontend/src/assets/img/app-icons/memory.webp
new file mode 100644
index 0000000..c1ff6a6
Binary files /dev/null and b/frontend/src/assets/img/app-icons/memory.webp differ
diff --git a/frontend/src/assets/img/app-icons/snake.webp b/frontend/src/assets/img/app-icons/snake.webp
new file mode 100644
index 0000000..f6605ad
Binary files /dev/null and b/frontend/src/assets/img/app-icons/snake.webp differ
diff --git a/frontend/src/config/apps.test.ts b/frontend/src/config/apps.test.ts
index 0140978..fe047d4 100644
--- a/frontend/src/config/apps.test.ts
+++ b/frontend/src/config/apps.test.ts
@@ -26,6 +26,18 @@ describe('app registry', () => {
       labelKey: 'Apps.weather.name',
       route: '/apps/weather',
     })
+    expect(PHONE_APPS.find((app) => app.id === 'snake')).toMatchObject({
+      dockOrder: null,
+      gridOrder: 11,
+      labelKey: 'Apps.snake.name',
+      route: '/apps/snake',
+    })
+    expect(PHONE_APPS.find((app) => app.id === 'memory')).toMatchObject({
+      dockOrder: null,
+      gridOrder: 12,
+      labelKey: 'Apps.memory.name',
+      route: '/apps/memory',
+    })
     expect(
       PHONE_APPS.filter((app) => app.dockOrder !== null)
         .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0))
diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
index 07fd30c..683315a 100644
--- a/frontend/src/config/apps.ts
+++ b/frontend/src/config/apps.ts
@@ -2,6 +2,8 @@ import {
   Calculator,
   Camera,
   Clock3,
+  Gamepad2,
+  Brain,
   Images,
   Mail,
   MapPinned,
@@ -23,6 +25,8 @@ import notesIcon from '@/assets/img/app-icons/notes.webp'
 import photosIcon from '@/assets/img/app-icons/gallery.webp'
 import phoneIcon from '@/assets/img/app-icons/phone.webp'
 import settingsIcon from '@/assets/img/app-icons/settings.webp'
+import snakeIcon from '@/assets/img/app-icons/snake.webp'
+import memoryIcon from '@/assets/img/app-icons/memory.webp'
 import weatherIcon from '@/assets/img/app-icons/weather.webp'
 import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
 
@@ -170,6 +174,32 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     labelKey: 'Apps.settings.name',
     route: '/apps/settings',
   },
+  {
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/SnakeApp.vue')),
+    ),
+    dockOrder: null,
+    gridOrder: 11,
+    icon: markRaw(Gamepad2),
+    iconClass: 'app-icon--snake',
+    iconImage: snakeIcon,
+    id: 'snake',
+    labelKey: 'Apps.snake.name',
+    route: '/apps/snake',
+  },
+  {
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/MemoryApp.vue')),
+    ),
+    dockOrder: null,
+    gridOrder: 12,
+    icon: markRaw(Brain),
+    iconClass: 'app-icon--memory',
+    iconImage: memoryIcon,
+    id: 'memory',
+    labelKey: 'Apps.memory.name',
+    route: '/apps/memory',
+  },
 ]
 
 export const PHONE_APP_IDS = PHONE_APPS.map((app) => app.id)
diff --git a/frontend/src/features/games/memory/audio.ts b/frontend/src/features/games/memory/audio.ts
new file mode 100644
index 0000000..70a1e50
--- /dev/null
+++ b/frontend/src/features/games/memory/audio.ts
@@ -0,0 +1,56 @@
+export type MemorySound = 'flip' | 'match' | 'mismatch' | 'win'
+
+type Tone = {
+  duration: number
+  frequency: number
+  offset: number
+  type: OscillatorType
+  volume: number
+}
+
+const sounds: Record<MemorySound, Tone[]> = {
+  flip: [
+    { duration: 0.055, frequency: 520, offset: 0, type: 'sine', volume: 0.07 },
+  ],
+  match: [
+    { duration: 0.11, frequency: 660, offset: 0, type: 'sine', volume: 0.09 },
+    { duration: 0.16, frequency: 880, offset: 0.09, type: 'sine', volume: 0.1 },
+  ],
+  mismatch: [
+    { duration: 0.1, frequency: 210, offset: 0, type: 'triangle', volume: 0.07 },
+    { duration: 0.14, frequency: 150, offset: 0.08, type: 'triangle', volume: 0.065 },
+  ],
+  win: [
+    { duration: 0.16, frequency: 523.25, offset: 0, type: 'sine', volume: 0.085 },
+    { duration: 0.16, frequency: 659.25, offset: 0.1, type: 'sine', volume: 0.09 },
+    { duration: 0.16, frequency: 783.99, offset: 0.2, type: 'sine', volume: 0.095 },
+    { duration: 0.28, frequency: 1046.5, offset: 0.3, type: 'sine', volume: 0.1 },
+  ],
+}
+
+let audioContext: AudioContext | undefined
+
+export function playMemorySound(sound: MemorySound, enabled: boolean): void {
+  if (!enabled) return
+
+  audioContext ??= new AudioContext()
+  if (audioContext.state === 'suspended') void audioContext.resume()
+
+  const now = audioContext.currentTime
+  for (const tone of sounds[sound]) {
+    const oscillator = audioContext.createOscillator()
+    const gain = audioContext.createGain()
+    const start = now + tone.offset
+    const end = start + tone.duration
+
+    oscillator.type = tone.type
+    oscillator.frequency.setValueAtTime(tone.frequency, start)
+    gain.gain.setValueAtTime(0.0001, start)
+    gain.gain.exponentialRampToValueAtTime(tone.volume, start + 0.012)
+    gain.gain.exponentialRampToValueAtTime(0.0001, end)
+    oscillator.connect(gain)
+    gain.connect(audioContext.destination)
+    oscillator.start(start)
+    oscillator.stop(end)
+  }
+}
diff --git a/frontend/src/features/games/memory/engine.test.ts b/frontend/src/features/games/memory/engine.test.ts
new file mode 100644
index 0000000..899d1a5
--- /dev/null
+++ b/frontend/src/features/games/memory/engine.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createMemoryGame,
+  flipMemoryCard,
+  MEMORY_PAIR_COUNTS,
+  resolveMemoryMismatch,
+} from './engine'
+
+describe('Memory engine', () => {
+  it.each(['small', 'medium', 'large'] as const)(
+    'creates exactly two cards per symbol for %s',
+    (difficulty) => {
+      const game = createMemoryGame(difficulty, () => 0.5)
+      const counts = game.cards.reduce<Record<string, number>>((result, card) => {
+        result[card.symbol] = (result[card.symbol] ?? 0) + 1
+        return result
+      }, {})
+
+      expect(game.cards).toHaveLength(MEMORY_PAIR_COUNTS[difficulty] * 2)
+      expect(Object.values(counts).every((count) => count === 2)).toBe(true)
+    },
+  )
+
+  it('does not count the same card twice', () => {
+    const game = createMemoryGame('small', () => 0)
+    const once = flipMemoryCard(game, game.cards[0].id)
+
+    expect(flipMemoryCard(once, game.cards[0].id)).toBe(once)
+    expect(once.moves).toBe(0)
+  })
+
+  it('matches equal cards and counts one move', () => {
+    const game = createMemoryGame('small', () => 0)
+    const pair = game.cards.filter((card) => card.symbol === game.cards[0].symbol)
+    const first = flipMemoryCard(game, pair[0].id)
+    const second = flipMemoryCard(first, pair[1].id)
+
+    expect(second.moves).toBe(1)
+    expect(second.matchedPairs).toBe(1)
+    expect(second.selectedIds).toEqual([])
+    expect(second.cards.filter((card) => card.state === 'matched')).toHaveLength(2)
+  })
+
+  it('blocks a third card until a mismatch is resolved', () => {
+    const game = createMemoryGame('small', () => 0)
+    const firstCard = game.cards[0]
+    const secondCard = game.cards.find((card) => card.symbol !== firstCard.symbol)!
+    const thirdCard = game.cards.find(
+      (card) => card.symbol !== firstCard.symbol && card.id !== secondCard.id,
+    )!
+    const first = flipMemoryCard(game, firstCard.id)
+    const mismatch = flipMemoryCard(first, secondCard.id)
+
+    expect(mismatch.status).toBe('resolving')
+    expect(flipMemoryCard(mismatch, thirdCard.id)).toBe(mismatch)
+    expect(resolveMemoryMismatch(mismatch).selectedIds).toEqual([])
+  })
+
+  it('marks the completed round as won exactly on the final pair', () => {
+    let game = createMemoryGame('small', () => 0)
+    const symbols = [...new Set(game.cards.map((card) => card.symbol))]
+
+    for (const symbol of symbols) {
+      const pair = game.cards.filter((card) => card.symbol === symbol)
+      game = flipMemoryCard(game, pair[0].id)
+      game = flipMemoryCard(game, pair[1].id)
+    }
+
+    expect(game.status).toBe('won')
+    expect(game.moves).toBe(MEMORY_PAIR_COUNTS.small)
+    expect(flipMemoryCard(game, game.cards[0].id)).toBe(game)
+  })
+})
diff --git a/frontend/src/features/games/memory/engine.ts b/frontend/src/features/games/memory/engine.ts
new file mode 100644
index 0000000..ffc10fe
--- /dev/null
+++ b/frontend/src/features/games/memory/engine.ts
@@ -0,0 +1,114 @@
+import type {
+  MemoryCard,
+  MemoryDifficulty,
+  MemoryGameState,
+} from './types'
+
+export const MEMORY_PAIR_COUNTS: Record<MemoryDifficulty, number> = {
+  small: 6,
+  medium: 8,
+  large: 10,
+}
+
+const MEMORY_SYMBOLS = [
+  'star',
+  'heart',
+  'moon',
+  'sun',
+  'cloud',
+  'bolt',
+  'diamond',
+  'circle',
+  'triangle',
+  'flower',
+]
+
+function shuffleCards(cards: MemoryCard[], random: () => number): MemoryCard[] {
+  const shuffled = [...cards]
+
+  for (let index = shuffled.length - 1; index > 0; index -= 1) {
+    const target = Math.min(index, Math.floor(Math.max(0, random()) * (index + 1)))
+    const current = shuffled[index]
+    shuffled[index] = shuffled[target]
+    shuffled[target] = current
+  }
+
+  return shuffled
+}
+
+export function createMemoryGame(
+  difficulty: MemoryDifficulty,
+  random: () => number = Math.random,
+): MemoryGameState {
+  const symbols = MEMORY_SYMBOLS.slice(0, MEMORY_PAIR_COUNTS[difficulty])
+  const cards = symbols.flatMap((symbol) => [
+    { id: `${symbol}-a`, state: 'hidden' as const, symbol },
+    { id: `${symbol}-b`, state: 'hidden' as const, symbol },
+  ])
+
+  return {
+    cards: shuffleCards(cards, random),
+    difficulty,
+    matchedPairs: 0,
+    moves: 0,
+    selectedIds: [],
+    status: 'playing',
+  }
+}
+
+export function flipMemoryCard(
+  state: MemoryGameState,
+  cardId: string,
+): MemoryGameState {
+  if (state.status !== 'playing') return state
+
+  const selected = state.cards.find((card) => card.id === cardId)
+  if (!selected || selected.state !== 'hidden') return state
+
+  const cards = state.cards.map((card) =>
+    card.id === cardId ? { ...card, state: 'revealed' as const } : card,
+  )
+  const selectedIds = [...state.selectedIds, cardId]
+  if (selectedIds.length === 1) return { ...state, cards, selectedIds }
+
+  const first = cards.find((card) => card.id === selectedIds[0])
+  const second = cards.find((card) => card.id === selectedIds[1])
+  const moves = state.moves + 1
+
+  if (first?.symbol === second?.symbol) {
+    const matchedCards = cards.map((card) =>
+      selectedIds.includes(card.id)
+        ? { ...card, state: 'matched' as const }
+        : card,
+    )
+    const matchedPairs = state.matchedPairs + 1
+    return {
+      ...state,
+      cards: matchedCards,
+      matchedPairs,
+      moves,
+      selectedIds: [],
+      status:
+        matchedPairs === MEMORY_PAIR_COUNTS[state.difficulty]
+          ? 'won'
+          : 'playing',
+    }
+  }
+
+  return { ...state, cards, moves, selectedIds, status: 'resolving' }
+}
+
+export function resolveMemoryMismatch(state: MemoryGameState): MemoryGameState {
+  if (state.status !== 'resolving') return state
+
+  return {
+    ...state,
+    cards: state.cards.map((card) =>
+      state.selectedIds.includes(card.id)
+        ? { ...card, state: 'hidden' as const }
+        : card,
+    ),
+    selectedIds: [],
+    status: 'playing',
+  }
+}
diff --git a/frontend/src/features/games/memory/store.ts b/frontend/src/features/games/memory/store.ts
new file mode 100644
index 0000000..3324d83
--- /dev/null
+++ b/frontend/src/features/games/memory/store.ts
@@ -0,0 +1,113 @@
+import { defineStore } from 'pinia'
+
+import { useGamesStore } from '@/features/games/store'
+
+import {
+  createMemoryGame,
+  flipMemoryCard,
+  resolveMemoryMismatch,
+} from './engine'
+import type {
+  MemoryBest,
+  MemoryDifficulty,
+  MemoryGameState,
+} from './types'
+
+type MemorySave = {
+  best: Partial<Record<MemoryDifficulty, MemoryBest>>
+  soundEnabled: boolean
+}
+
+function isMemoryBest(value: unknown): value is MemoryBest {
+  if (!value || typeof value !== 'object') return false
+  const best = value as Partial<MemoryBest>
+  return (
+    typeof best.moves === 'number' &&
+    best.moves > 0 &&
+    typeof best.timeMs === 'number' &&
+    best.timeMs >= 0
+  )
+}
+
+export const useMemoryStore = defineStore('memory', {
+  state: () => ({
+    best: {} as Partial<Record<MemoryDifficulty, MemoryBest>>,
+    elapsedMs: 0,
+    game: null as MemoryGameState | null,
+    hydrated: false,
+    soundEnabled: true,
+    startedAt: null as number | null,
+  }),
+  actions: {
+    hydrate(): void {
+      if (this.hydrated) return
+
+      const saved = useGamesStore().readGame<Partial<MemorySave>>('memory')
+      for (const difficulty of ['small', 'medium', 'large'] as const) {
+        const candidate = saved?.best?.[difficulty]
+        if (isMemoryBest(candidate)) this.best[difficulty] = candidate
+      }
+      if (typeof saved?.soundEnabled === 'boolean') {
+        this.soundEnabled = saved.soundEnabled
+      }
+      this.hydrated = true
+    },
+    persist(): void {
+      useGamesStore().saveGame('memory', {
+        best: this.best,
+        soundEnabled: this.soundEnabled,
+      } satisfies MemorySave)
+    },
+    setSoundEnabled(enabled: boolean): void {
+      this.soundEnabled = enabled
+      this.persist()
+    },
+    start(difficulty: MemoryDifficulty): void {
+      this.game = createMemoryGame(difficulty)
+      this.elapsedMs = 0
+      this.startedAt = Date.now()
+    },
+    updateElapsed(now = Date.now()): void {
+      if (this.startedAt === null) return
+      this.elapsedMs += now - this.startedAt
+      this.startedAt = now
+    },
+    pause(): void {
+      this.updateElapsed()
+      this.startedAt = null
+    },
+    resume(): void {
+      if (this.game?.status === 'playing' && this.startedAt === null) {
+        this.startedAt = Date.now()
+      }
+    },
+    flip(cardId: string): void {
+      if (!this.game) return
+
+      const previousStatus = this.game.status
+      this.game = flipMemoryCard(this.game, cardId)
+      if (previousStatus !== 'won' && this.game.status === 'won') {
+        this.updateElapsed()
+        this.startedAt = null
+        const result = { moves: this.game.moves, timeMs: this.elapsedMs }
+        const current = this.best[this.game.difficulty]
+        if (
+          !current ||
+          result.moves < current.moves ||
+          (result.moves === current.moves && result.timeMs < current.timeMs)
+        ) {
+          this.best[this.game.difficulty] = result
+          this.persist()
+        }
+      }
+    },
+    resolveMismatch(): void {
+      if (this.game) this.game = resolveMemoryMismatch(this.game)
+    },
+    showMenu(): void {
+      this.pause()
+      this.game = null
+      this.elapsedMs = 0
+    },
+  },
+})
diff --git a/frontend/src/features/games/memory/types.ts b/frontend/src/features/games/memory/types.ts
new file mode 100644
index 0000000..092c265
--- /dev/null
+++ b/frontend/src/features/games/memory/types.ts
@@ -0,0 +1,25 @@
+export type MemoryDifficulty = 'small' | 'medium' | 'large'
+
+export type MemoryCardState = 'hidden' | 'revealed' | 'matched'
+
+export type MemoryCard = {
+  id: string
+  state: MemoryCardState
+  symbol: string
+}
+
+export type MemoryGameStatus = 'playing' | 'resolving' | 'won'
+
+export type MemoryGameState = {
+  cards: MemoryCard[]
+  difficulty: MemoryDifficulty
+  matchedPairs: number
+  moves: number
+  selectedIds: string[]
+  status: MemoryGameStatus
+}
+
+export type MemoryBest = {
+  moves: number
+  timeMs: number
+}
diff --git a/frontend/src/features/games/snake/engine.test.ts b/frontend/src/features/games/snake/engine.test.ts
new file mode 100644
index 0000000..5bfd8ff
--- /dev/null
+++ b/frontend/src/features/games/snake/engine.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createSnakeGame,
+  SNAKE_BOARD_WIDTH,
+  stepSnake,
+  turnSnake,
+} from './engine'
+import type { SnakeGameState } from './types'
+
+describe('Snake engine', () => {
+  it('moves one cell without changing its length', () => {
+    const game = createSnakeGame(() => 0)
+    const next = stepSnake(game, () => 0)
+
+    expect(next.body[0]).toEqual({ x: game.body[0].x + 1, y: game.body[0].y })
+    expect(next.body).toHaveLength(game.body.length)
+  })
+
+  it('grows, scores, and places fruit outside the body', () => {
+    const game = createSnakeGame(() => 0)
+    game.fruit = { x: game.body[0].x + 1, y: game.body[0].y }
+    const next = stepSnake(game, () => 0)
+
+    expect(next.score).toBe(1)
+    expect(next.body).toHaveLength(game.body.length + 1)
+    expect(next.body).not.toContainEqual(next.fruit)
+  })
+
+  it('ignores an immediate reverse direction', () => {
+    const game = createSnakeGame(() => 0)
+
+    expect(turnSnake(game, 'left')).toBe(game)
+    expect(turnSnake(game, 'up').pendingDirection).toBe('up')
+  })
+
+  it('ends the game on wall collision', () => {
+    const game: SnakeGameState = {
+      ...createSnakeGame(() => 0),
+      body: [
+        { x: SNAKE_BOARD_WIDTH - 1, y: 4 },
+        { x: SNAKE_BOARD_WIDTH - 2, y: 4 },
+      ],
+    }
+
+    expect(stepSnake(game).status).toBe('game-over')
+  })
+
+  it('ends the game on body collision', () => {
+    const game: SnakeGameState = {
+      body: [
+        { x: 4, y: 4 },
+        { x: 4, y: 3 },
+        { x: 3, y: 3 },
+        { x: 3, y: 4 },
+        { x: 3, y: 5 },
+      ],
+      direction: 'up',
+      fruit: { x: 10, y: 10 },
+      pendingDirection: 'left',
+      score: 0,
+      status: 'playing',
+    }
+
+    expect(stepSnake(game).status).toBe('game-over')
+  })
+
+  it('does not advance a paused game', () => {
+    const game: SnakeGameState = {
+      ...createSnakeGame(() => 0),
+      status: 'paused',
+    }
+
+    expect(stepSnake(game)).toBe(game)
+  })
+})
diff --git a/frontend/src/features/games/snake/engine.ts b/frontend/src/features/games/snake/engine.ts
new file mode 100644
index 0000000..2a3ec80
--- /dev/null
+++ b/frontend/src/features/games/snake/engine.ts
@@ -0,0 +1,118 @@
+import type {
+  SnakeDirection,
+  SnakeGameState,
+  SnakePoint,
+} from './types'
+
+export const SNAKE_BOARD_WIDTH = 16
+export const SNAKE_BOARD_HEIGHT = 18
+
+const DIRECTION_VECTORS: Record<SnakeDirection, SnakePoint> = {
+  up: { x: 0, y: -1 },
+  right: { x: 1, y: 0 },
+  down: { x: 0, y: 1 },
+  left: { x: -1, y: 0 },
+}
+
+const OPPOSITE_DIRECTIONS: Record<SnakeDirection, SnakeDirection> = {
+  up: 'down',
+  right: 'left',
+  down: 'up',
+  left: 'right',
+}
+
+function pointsMatch(first: SnakePoint, second: SnakePoint): boolean {
+  return first.x === second.x && first.y === second.y
+}
+
+function placeFruit(
+  body: SnakePoint[],
+  random: () => number,
+): SnakePoint {
+  const openCells: SnakePoint[] = []
+
+  for (let y = 0; y < SNAKE_BOARD_HEIGHT; y += 1) {
+    for (let x = 0; x < SNAKE_BOARD_WIDTH; x += 1) {
+      const point = { x, y }
+      if (!body.some((segment) => pointsMatch(segment, point))) {
+        openCells.push(point)
+      }
+    }
+  }
+
+  const index = Math.min(
+    openCells.length - 1,
+    Math.floor(Math.max(0, random()) * openCells.length),
+  )
+  return openCells[index] ?? body[0]
+}
+
+export function createSnakeGame(random: () => number = Math.random): SnakeGameState {
+  const centerX = Math.floor(SNAKE_BOARD_WIDTH / 2)
+  const centerY = Math.floor(SNAKE_BOARD_HEIGHT / 2)
+  const body = [
+    { x: centerX, y: centerY },
+    { x: centerX - 1, y: centerY },
+    { x: centerX - 2, y: centerY },
+  ]
+
+  return {
+    body,
+    direction: 'right',
+    fruit: placeFruit(body, random),
+    pendingDirection: 'right',
+    score: 0,
+    status: 'playing',
+  }
+}
+
+export function turnSnake(
+  state: SnakeGameState,
+  direction: SnakeDirection,
+): SnakeGameState {
+  if (
+    state.status !== 'playing' ||
+    direction === OPPOSITE_DIRECTIONS[state.direction]
+  ) {
+    return state
+  }
+
+  return { ...state, pendingDirection: direction }
+}
+
+export function stepSnake(
+  state: SnakeGameState,
+  random: () => number = Math.random,
+): SnakeGameState {
+  if (state.status !== 'playing') return state
+
+  const direction = state.pendingDirection
+  const vector = DIRECTION_VECTORS[direction]
+  const head = state.body[0]
+  const nextHead = { x: head.x + vector.x, y: head.y + vector.y }
+  const ateFruit = pointsMatch(nextHead, state.fruit)
+  const collisionBody = ateFruit ? state.body : state.body.slice(0, -1)
+  const hitWall =
+    nextHead.x < 0 ||
+    nextHead.x >= SNAKE_BOARD_WIDTH ||
+    nextHead.y < 0 ||
+    nextHead.y >= SNAKE_BOARD_HEIGHT
+  const hitBody = collisionBody.some((segment) =>
+    pointsMatch(segment, nextHead),
+  )
+
+  if (hitWall || hitBody) {
+    return { ...state, direction, status: 'game-over' }
+  }
+
+  const body = [nextHead, ...state.body]
+  if (!ateFruit) body.pop()
+
+  return {
+    ...state,
+    body,
+    direction,
+    fruit: ateFruit ? placeFruit(body, random) : state.fruit,
+    score: state.score + (ateFruit ? 1 : 0),
+  }
+}
diff --git a/frontend/src/features/games/snake/store.ts b/frontend/src/features/games/snake/store.ts
new file mode 100644
index 0000000..db3ce58
--- /dev/null
+++ b/frontend/src/features/games/snake/store.ts
@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia'
+
+import { useGamesStore } from '@/features/games/store'
+
+import { createSnakeGame, stepSnake, turnSnake } from './engine'
+import type { SnakeDirection, SnakeGameState, SnakeSpeed } from './types'
+
+type SnakeSave = {
+  highScore: number
+  speed: SnakeSpeed
+}
+
+const SPEED_TICK_MS: Record<SnakeSpeed, number> = {
+  relaxed: 210,
+  normal: 155,
+  fast: 110,
+}
+
+function isSnakeSpeed(value: unknown): value is SnakeSpeed {
+  return value === 'relaxed' || value === 'normal' || value === 'fast'
+}
+
+export const useSnakeStore = defineStore('snake', {
+  state: () => ({
+    game: null as SnakeGameState | null,
+    highScore: 0,
+    hydrated: false,
+    speed: 'normal' as SnakeSpeed,
+  }),
+  getters: {
+    tickMilliseconds: (state) => SPEED_TICK_MS[state.speed],
+  },
+  actions: {
+    hydrate(): void {
+      if (this.hydrated) return
+
+      const saved = useGamesStore().readGame<Partial<SnakeSave>>('snake')
+      this.highScore =
+        typeof saved?.highScore === 'number' && saved.highScore >= 0
+          ? Math.floor(saved.highScore)
+          : 0
+      this.speed = isSnakeSpeed(saved?.speed) ? saved.speed : 'normal'
+      this.hydrated = true
+    },
+    persist(): void {
+      useGamesStore().saveGame('snake', {
+        highScore: this.highScore,
+        speed: this.speed,
+      } satisfies SnakeSave)
+    },
+    setSpeed(speed: SnakeSpeed): void {
+      this.speed = speed
+      this.persist()
+    },
+    start(): void {
+      this.game = createSnakeGame()
+    },
+    pause(): void {
+      if (this.game?.status === 'playing') {
+        this.game = { ...this.game, status: 'paused' }
+      }
+    },
+    resume(): void {
+      if (this.game?.status === 'paused') {
+        this.game = { ...this.game, status: 'playing' }
+      }
+    },
+    turn(direction: SnakeDirection): void {
+      if (this.game) this.game = turnSnake(this.game, direction)
+    },
+    tick(): void {
+      if (!this.game) return
+
+      this.game = stepSnake(this.game)
+      if (this.game.status === 'game-over' && this.game.score > this.highScore) {
+        this.highScore = this.game.score
+        this.persist()
+      }
+    },
+    showMenu(): void {
+      this.game = null
+    },
+  },
+})
diff --git a/frontend/src/features/games/snake/types.ts b/frontend/src/features/games/snake/types.ts
new file mode 100644
index 0000000..aeeca50
--- /dev/null
+++ b/frontend/src/features/games/snake/types.ts
@@ -0,0 +1,19 @@
+export type SnakeDirection = 'up' | 'right' | 'down' | 'left'
+
+export type SnakePoint = {
+  x: number
+  y: number
+}
+
+export type SnakeSpeed = 'relaxed' | 'normal' | 'fast'
+
+export type SnakeGameStatus = 'playing' | 'paused' | 'game-over'
+
+export type SnakeGameState = {
+  body: SnakePoint[]
+  direction: SnakeDirection
+  fruit: SnakePoint
+  pendingDirection: SnakeDirection
+  score: number
+  status: SnakeGameStatus
+}
diff --git a/frontend/src/features/games/store.ts b/frontend/src/features/games/store.ts
new file mode 100644
index 0000000..816216b
--- /dev/null
+++ b/frontend/src/features/games/store.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+
+import { usePhoneStore } from '@/stores/phone'
+
+export const useGamesStore = defineStore('games', {
+  state: () => ({
+    games: {} as Record<string, unknown>,
+  }),
+  actions: {
+    hydrate(payload: unknown): void {
+      this.games =
+        payload && typeof payload === 'object'
+          ? structuredClone(payload as Record<string, unknown>)
+          : {}
+    },
+    readGame<T>(gameId: string): T | undefined {
+      return this.games[gameId] as T | undefined
+    },
+    saveGame(gameId: string, payload: unknown): void {
+      this.games[gameId] = structuredClone(payload)
+      usePhoneStore().saveDeviceNamespace('games', this.games)
+    },
+  },
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 0d0f8b5..efd8629 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -128,6 +128,52 @@ const defaultLocales: LocaleTree = {
       },
     },
     calculator: { name: 'Calculator' },
+    snake: {
+      name: 'Snake',
+      board: 'Snake game board',
+      controls: 'Direction controls',
+      directions: {
+        down: 'Move down',
+        left: 'Move left',
+        right: 'Move right',
+        up: 'Move up',
+      },
+      gameOver: 'Game Over',
+      highScore: 'High Score',
+      menu: 'Main Menu',
+      pause: 'Pause game',
+      paused: 'Paused',
+      readyBody: 'Collect fruit, grow longer, and stay clear of every wall.',
+      readyTitle: 'Ready to play?',
+      restart: 'Play Again',
+      resume: 'Resume game',
+      score: 'Score',
+      speed: 'Speed',
+      speeds: { fast: 'Fast', normal: 'Normal', relaxed: 'Relaxed' },
+      start: 'Start Game',
+      swipeHint: 'Swipe, tap the controls, or use arrow keys / WASD',
+    },
+    memory: {
+      name: 'Memory',
+      backToMenu: 'Back to board selection',
+      board: 'Memory card board',
+      chooseBody: 'Find every matching pair with as few moves as possible.',
+      chooseTitle: 'Choose a board',
+      completeEyebrow: 'Board cleared',
+      completeTitle: 'Great memory!',
+      difficulties: { large: 'Expert', medium: 'Classic', small: 'Quick' },
+      eyebrow: 'Matching game',
+      hiddenCard: 'Hidden card',
+      menu: 'Board Selection',
+      moves: 'Moves',
+      mute: 'Mute game sounds',
+      noBest: 'No best score yet',
+      playAgain: 'Play Again',
+      restart: 'Restart',
+      revealedCard: 'Revealed card',
+      time: 'Time',
+      unmute: 'Turn on game sounds',
+    },
     map: {
       name: 'Map',
       controls: 'Map controls',
diff --git a/frontend/src/types/apps.ts b/frontend/src/types/apps.ts
index f41235b..da632a2 100644
--- a/frontend/src/types/apps.ts
+++ b/frontend/src/types/apps.ts
@@ -12,6 +12,8 @@ export type PhoneAppId =
   | 'photos'
   | 'app-store'
   | 'settings'
+  | 'snake'
+  | 'memory'
 
 export type AppLaunchOrigin = {
   borderRadius: number
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 5acd580..bfaa523 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -50,6 +50,8 @@ const DEFAULT_APP_NOTIFICATIONS: Record<
   phone: { enabled: true, sounds: true },
   'app-store': { enabled: true, sounds: true },
   calculator: { enabled: true, sounds: true },
+  snake: { enabled: true, sounds: true },
+  memory: { enabled: true, sounds: true },
   camera: { enabled: true, sounds: true },
   clock: { enabled: true, sounds: true },
   weather: { enabled: true, sounds: true },
diff --git a/frontend/src/views/apps/MemoryApp.vue b/frontend/src/views/apps/MemoryApp.vue
new file mode 100644
index 0000000..42d3a96
--- /dev/null
+++ b/frontend/src/views/apps/MemoryApp.vue
@@ -0,0 +1,588 @@
+<script setup lang="ts">
+import {
+  ChevronLeft,
+  Circle,
+  Cloud,
+  Diamond,
+  Flower2,
+  Heart,
+  Moon,
+  Play,
+  Sparkles,
+  Star,
+  Sun,
+  Triangle,
+  Volume2,
+  VolumeX,
+  Zap,
+} from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+
+import { playMemorySound } from '@/features/games/memory/audio'
+import { useMemoryStore } from '@/features/games/memory/store'
+import type {
+  MemoryDifficulty,
+} from '@/features/games/memory/types'
+import { usePhoneStore } from '@/stores/phone'
+
+const phone = usePhoneStore()
+const memory = useMemoryStore()
+const difficulties: Array<{
+  columns: number
+  difficulty: MemoryDifficulty
+  pairs: number
+  rows: number
+}> = [
+  { columns: 3, difficulty: 'small', pairs: 6, rows: 4 },
+  { columns: 4, difficulty: 'medium', pairs: 8, rows: 4 },
+  { columns: 4, difficulty: 'large', pairs: 10, rows: 5 },
+]
+const symbols = {
+  star: { color: '#f6b93b', icon: Star },
+  heart: { color: '#ff6b81', icon: Heart },
+  moon: { color: '#9b8afb', icon: Moon },
+  sun: { color: '#ff9f43', icon: Sun },
+  cloud: { color: '#67b7dc', icon: Cloud },
+  bolt: { color: '#f5ca4d', icon: Zap },
+  diamond: { color: '#52c6b8', icon: Diamond },
+  circle: { color: '#ef7eb5', icon: Circle },
+  triangle: { color: '#7c9cf5', icon: Triangle },
+  flower: { color: '#a6d96a', icon: Flower2 },
+}
+const game = computed(() => memory.game)
+let clockTimer: ReturnType<typeof setInterval> | undefined
+let mismatchTimer: ReturnType<typeof setTimeout> | undefined
+
+function formatTime(milliseconds: number): string {
+  const totalSeconds = Math.floor(milliseconds / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+function bestLabel(difficulty: MemoryDifficulty): string {
+  const best = memory.best[difficulty]
+  if (!best) return phone.t('Apps.memory.noBest')
+  return `${best.moves} ${phone.t('Apps.memory.moves')} · ${formatTime(best.timeMs)}`
+}
+
+function selectCard(cardId: string): void {
+  const previous = memory.game
+  if (!previous) return
+
+  memory.flip(cardId)
+  const current = memory.game
+  if (!current || current === previous) return
+
+  if (current.status === 'won') {
+    playMemorySound('win', memory.soundEnabled)
+  } else if (current.matchedPairs > previous.matchedPairs) {
+    playMemorySound('match', memory.soundEnabled)
+  } else if (current.status === 'resolving') {
+    playMemorySound('mismatch', memory.soundEnabled)
+  } else {
+    playMemorySound('flip', memory.soundEnabled)
+  }
+
+  if (current.status === 'resolving') {
+    if (mismatchTimer) clearTimeout(mismatchTimer)
+    mismatchTimer = setTimeout(() => memory.resolveMismatch(), 720)
+  }
+}
+
+function toggleSound(): void {
+  const enabled = !memory.soundEnabled
+  memory.setSoundEnabled(enabled)
+  if (enabled) playMemorySound('flip', true)
+}
+
+function restart(): void {
+  const difficulty = memory.game?.difficulty
+  if (difficulty) memory.start(difficulty)
+}
+
+function returnToMenu(): void {
+  if (mismatchTimer) {
+    clearTimeout(mismatchTimer)
+    mismatchTimer = undefined
+  }
+  memory.showMenu()
+}
+
+memory.hydrate()
+onMounted(() => {
+  memory.resume()
+  clockTimer = setInterval(() => memory.updateElapsed(), 100)
+})
+onBeforeUnmount(() => {
+  if (clockTimer) clearInterval(clockTimer)
+  if (mismatchTimer) clearTimeout(mismatchTimer)
+  memory.resolveMismatch()
+  memory.pause()
+})
+</script>
+
+<template>
+  <main class="memory-app" :aria-label="phone.t('Apps.memory.name')">
+    <header class="memory-header">
+      <div>
+        <span>{{ phone.t('Apps.memory.eyebrow') }}</span>
+        <h1>{{ phone.t('Apps.memory.name') }}</h1>
+      </div>
+      <div class="memory-header__actions">
+        <Sparkles :size="23" aria-hidden="true" />
+        <button
+          type="button"
+          :aria-label="phone.t(memory.soundEnabled ? 'Apps.memory.mute' : 'Apps.memory.unmute')"
+          :title="phone.t(memory.soundEnabled ? 'Apps.memory.mute' : 'Apps.memory.unmute')"
+          @click="toggleSound"
+        >
+          <Volume2 v-if="memory.soundEnabled" :size="18" aria-hidden="true" />
+          <VolumeX v-else :size="18" aria-hidden="true" />
+        </button>
+      </div>
+    </header>
+
+    <section v-if="!game" class="memory-menu">
+      <div class="memory-hero" aria-hidden="true">
+        <span class="memory-hero__card memory-hero__card--back"></span>
+        <span class="memory-hero__card memory-hero__card--front">
+          <Star :size="34" fill="currentColor" />
+        </span>
+      </div>
+      <div class="memory-intro">
+        <h2>{{ phone.t('Apps.memory.chooseTitle') }}</h2>
+        <p>{{ phone.t('Apps.memory.chooseBody') }}</p>
+      </div>
+
+      <div class="memory-difficulties">
+        <button
+          v-for="option in difficulties"
+          :key="option.difficulty"
+          type="button"
+          @click="memory.start(option.difficulty)"
+        >
+          <span class="memory-difficulty__size">
+            {{ option.columns }}×{{ option.rows }}
+          </span>
+          <span class="memory-difficulty__name">
+            {{ phone.t(`Apps.memory.difficulties.${option.difficulty}`) }}
+          </span>
+          <span class="memory-difficulty__best">
+            {{ bestLabel(option.difficulty) }}
+          </span>
+          <Play :size="16" fill="currentColor" />
+        </button>
+      </div>
+    </section>
+
+    <section v-else class="memory-game">
+      <div class="memory-stats">
+        <button
+          type="button"
+          class="memory-menu-button"
+          :aria-label="phone.t('Apps.memory.backToMenu')"
+          :title="phone.t('Apps.memory.backToMenu')"
+          @click="returnToMenu"
+        >
+          <ChevronLeft :size="18" :stroke-width="2.6" aria-hidden="true" />
+        </button>
+        <div>
+          <span>{{ phone.t('Apps.memory.time') }}</span>
+          <strong>{{ formatTime(memory.elapsedMs) }}</strong>
+        </div>
+        <div>
+          <span>{{ phone.t('Apps.memory.moves') }}</span>
+          <strong>{{ game.moves }}</strong>
+        </div>
+        <button type="button" @click="restart">
+          {{ phone.t('Apps.memory.restart') }}
+        </button>
+      </div>
+
+      <div
+        class="memory-board"
+        :class="`memory-board--${game.difficulty}`"
+        :aria-label="phone.t('Apps.memory.board')"
+      >
+        <button
+          v-for="card in game.cards"
+          :key="card.id"
+          type="button"
+          class="memory-game-card"
+          :class="{
+            'memory-game-card--flipped': card.state !== 'hidden',
+            'memory-game-card--matched': card.state === 'matched',
+            'memory-game-card--mismatch':
+              game.status === 'resolving' && game.selectedIds.includes(card.id),
+          }"
+          :disabled="card.state !== 'hidden' || game.status !== 'playing'"
+          :aria-label="
+            phone.t(
+              card.state === 'hidden'
+                ? 'Apps.memory.hiddenCard'
+                : 'Apps.memory.revealedCard',
+            )
+          "
+          @click="selectCard(card.id)"
+        >
+          <span class="memory-game-card__inner">
+            <span class="memory-game-card__face memory-game-card__back">
+              <i></i><i></i><i></i><i></i>
+            </span>
+            <span
+              class="memory-game-card__face memory-game-card__front"
+              :style="{ color: symbols[card.symbol as keyof typeof symbols].color }"
+            >
+              <component
+                :is="symbols[card.symbol as keyof typeof symbols].icon"
+                :size="game.difficulty === 'small' ? 30 : 24"
+                :stroke-width="2.2"
+                fill="currentColor"
+              />
+            </span>
+          </span>
+        </button>
+
+        <div v-if="game.status === 'won'" class="memory-complete">
+          <div class="memory-complete__burst"><Star :size="35" fill="currentColor" /></div>
+          <span>{{ phone.t('Apps.memory.completeEyebrow') }}</span>
+          <h2>{{ phone.t('Apps.memory.completeTitle') }}</h2>
+          <p>
+            {{ game.moves }} {{ phone.t('Apps.memory.moves') }} ·
+            {{ formatTime(memory.elapsedMs) }}
+          </p>
+          <button type="button" class="memory-primary" @click="restart">
+            {{ phone.t('Apps.memory.playAgain') }}
+          </button>
+          <button type="button" class="memory-secondary" @click="returnToMenu">
+            {{ phone.t('Apps.memory.menu') }}
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.memory-app {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 52px 17px 27px;
+  color: #302a48;
+  background:
+    radial-gradient(circle at 88% 8%, rgb(255 255 255 / 72%), transparent 28%),
+    linear-gradient(155deg, #f4efff 0%, #e7ddff 55%, #d9cdf7 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  user-select: none;
+}
+
+.memory-header {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.memory-header span {
+  display: block;
+  color: #8175a2;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+}
+
+.memory-header h1 {
+  margin: 1px 0 0;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: -0.7px;
+}
+
+.memory-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.memory-header__actions > svg,
+.memory-header__actions button {
+  box-sizing: content-box;
+  padding: 9px;
+  border: 0;
+  border-radius: 13px;
+  color: #7658c7;
+  background: rgb(255 255 255 / 54%);
+}
+
+.memory-header__actions button {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.memory-menu {
+  height: calc(100% - 52px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 17px;
+}
+
+.memory-hero {
+  position: relative;
+  width: 130px;
+  height: 108px;
+  margin: 0 auto;
+}
+
+.memory-hero__card {
+  position: absolute;
+  width: 70px;
+  height: 88px;
+  display: grid;
+  place-items: center;
+  border: 4px solid rgb(255 255 255 / 75%);
+  border-radius: 17px;
+  box-shadow: 0 12px 22px rgb(72 52 118 / 18%);
+}
+
+.memory-hero__card--back {
+  left: 9px;
+  top: 4px;
+  background: repeating-linear-gradient(45deg, #8e72db 0 7px, #9f83e6 7px 14px);
+  transform: rotate(-12deg);
+}
+
+.memory-hero__card--front {
+  right: 9px;
+  bottom: 0;
+  color: #f4b83f;
+  background: #fffaf0;
+  transform: rotate(10deg);
+}
+
+.memory-intro { text-align: center; }
+.memory-intro h2 { margin: 0; font-size: 23px; letter-spacing: -0.6px; }
+.memory-intro p { margin: 6px 25px 0; color: #7d7397; font-size: 12px; line-height: 1.4; }
+
+.memory-difficulties {
+  display: grid;
+  gap: 7px;
+}
+
+.memory-difficulties button {
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 48px 1fr auto;
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  column-gap: 10px;
+  padding: 8px 12px;
+  border: 1px solid rgb(91 67 143 / 8%);
+  border-radius: 16px;
+  color: #342d4c;
+  background: rgb(255 255 255 / 62%);
+  box-shadow: 0 5px 14px rgb(80 58 129 / 8%);
+  text-align: left;
+}
+
+.memory-difficulty__size {
+  grid-row: 1 / 3;
+  display: grid;
+  place-items: center;
+  height: 39px;
+  border-radius: 11px;
+  color: #fff;
+  background: linear-gradient(135deg, #9a7be1, #7558c4);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.memory-difficulty__name { align-self: end; font-size: 13px; font-weight: 800; }
+.memory-difficulty__best { align-self: start; color: #8b819f; font-size: 9px; }
+.memory-difficulties svg { grid-column: 3; grid-row: 1 / 3; color: #7658c7; }
+
+.memory-game { padding-top: 5px; }
+
+.memory-stats {
+  height: 50px;
+  display: grid;
+  grid-template-columns: 30px auto auto 1fr;
+  align-items: center;
+  gap: 11px;
+}
+
+.memory-stats div { display: grid; }
+.memory-stats span { color: #81769c; font-size: 8px; font-weight: 800; text-transform: uppercase; }
+.memory-stats strong { font-size: 18px; line-height: 1.05; }
+.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 11px; font-weight: 800; }
+.memory-stats .memory-menu-button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  justify-self: start;
+  padding: 0;
+  border: 1px solid rgb(105 79 160 / 10%);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 48%);
+  box-shadow: 0 3px 8px rgb(75 52 121 / 8%);
+  cursor: pointer;
+}
+
+.memory-board {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  padding: 9px;
+  border: 1px solid rgb(101 77 153 / 9%);
+  border-radius: 20px;
+  background: rgb(255 255 255 / 31%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%);
+  perspective: 900px;
+}
+
+.memory-board--small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.memory-board--medium,
+.memory-board--large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.memory-board--large { gap: 6px; padding: 7px; }
+
+.memory-game-card {
+  aspect-ratio: 0.82;
+  padding: 0;
+  border: 0;
+  border-radius: 13px;
+  background: transparent;
+  cursor: pointer;
+  perspective: 500px;
+}
+
+.memory-game-card:disabled { cursor: default; }
+
+.memory-game-card__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+  transform-style: preserve-3d;
+  transition: transform 360ms cubic-bezier(0.22, 0.68, 0.3, 1);
+}
+
+.memory-game-card--flipped .memory-game-card__inner { transform: rotateY(180deg); }
+
+.memory-game-card__face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border: 2px solid rgb(255 255 255 / 75%);
+  border-radius: 13px;
+  backface-visibility: hidden;
+  box-shadow: 0 5px 10px rgb(73 52 117 / 13%);
+}
+
+.memory-game-card__back {
+  position: absolute;
+  grid-template-columns: repeat(2, 6px);
+  grid-template-rows: repeat(2, 6px);
+  gap: 6px;
+  background: linear-gradient(145deg, #9d82e1, #7558bf);
+}
+
+.memory-game-card__back::before {
+  position: absolute;
+  inset: 5px;
+  border: 1px solid rgb(255 255 255 / 15%);
+  border-radius: 9px;
+  background: radial-gradient(circle at 24% 18%, rgb(255 255 255 / 12%), transparent 42%);
+  content: "";
+}
+
+.memory-game-card__back i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 30%); }
+
+.memory-game-card__front {
+  background: radial-gradient(circle at 50% 42%, #fff 0 25%, #fffaf1 72%, #f8f1e7 100%);
+  transform: rotateY(180deg);
+}
+
+.memory-game-card--matched .memory-game-card__front {
+  background: #f7fff2;
+  box-shadow: 0 0 0 2px rgb(121 199 107 / 32%), 0 6px 12px rgb(71 143 65 / 14%);
+}
+
+.memory-game-card--matched {
+  animation: memory-match-pop 520ms cubic-bezier(0.2, 0.9, 0.25, 1.25);
+}
+
+.memory-game-card--mismatch {
+  animation: memory-mismatch-shake 420ms ease-in-out;
+}
+
+@keyframes memory-match-pop {
+  0% { transform: scale(1) translateY(0); }
+  38% { transform: scale(1.12) translateY(-4px); }
+  68% { transform: scale(0.97) translateY(1px); }
+  100% { transform: scale(1) translateY(0); }
+}
+
+@keyframes memory-mismatch-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px) rotate(-1.5deg); }
+  50% { transform: translateX(3px) rotate(1.5deg); }
+  75% { transform: translateX(-2px) rotate(-1deg); }
+}
+
+.memory-complete {
+  position: absolute;
+  z-index: 5;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 20px;
+  background: rgb(244 239 255 / 90%);
+  backdrop-filter: blur(6px);
+  text-align: center;
+}
+
+.memory-complete__burst {
+  width: 68px;
+  height: 68px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  color: #f3b63e;
+  background: #fff9e8;
+  box-shadow: 0 9px 22px rgb(100 75 151 / 17%);
+}
+
+.memory-complete > span { color: #8175a2; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
+.memory-complete h2 { margin: 0; font-size: 27px; }
+.memory-complete p { margin: -4px 0 4px; color: #756b8e; font-size: 13px; }
+
+.memory-primary,
+.memory-secondary {
+  min-width: 155px;
+  min-height: 42px;
+  border-radius: 14px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.memory-primary { border: 0; color: #fff; background: linear-gradient(135deg, #9a7be1, #7051bf); box-shadow: 0 8px 17px rgb(91 61 164 / 22%); }
+.memory-secondary { border: 1px solid rgb(92 72 134 / 14%); color: #6e6091; background: rgb(255 255 255 / 48%); }
+
+button:active { transform: scale(0.97); }
+
+@media (prefers-reduced-motion: reduce) {
+  .memory-game-card__inner { transition-duration: 1ms; }
+  .memory-game-card--matched,
+  .memory-game-card--mismatch { animation: none; }
+}
+</style>
diff --git a/frontend/src/views/apps/SnakeApp.vue b/frontend/src/views/apps/SnakeApp.vue
new file mode 100644
index 0000000..b987b07
--- /dev/null
+++ b/frontend/src/views/apps/SnakeApp.vue
@@ -0,0 +1,667 @@
+<script setup lang="ts">
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Pause,
+  Play,
+} from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import {
+  SNAKE_BOARD_HEIGHT,
+  SNAKE_BOARD_WIDTH,
+} from '@/features/games/snake/engine'
+import { useSnakeStore } from '@/features/games/snake/store'
+import type {
+  SnakeDirection,
+  SnakePoint,
+  SnakeSpeed,
+} from '@/features/games/snake/types'
+import { usePhoneStore } from '@/stores/phone'
+
+const phone = usePhoneStore()
+const snake = useSnakeStore()
+const touchStart = ref<SnakePoint | null>(null)
+const speedOptions: SnakeSpeed[] = ['relaxed', 'normal', 'fast']
+const directionButtons: Array<{
+  direction: SnakeDirection
+  icon: typeof ChevronUp
+}> = [
+  { direction: 'up', icon: ChevronUp },
+  { direction: 'left', icon: ChevronLeft },
+  { direction: 'down', icon: ChevronDown },
+  { direction: 'right', icon: ChevronRight },
+]
+const game = computed(() => snake.game)
+const boardMotionStyle = computed(() => ({
+  '--snake-motion-duration': `${Math.min(
+    110,
+    Math.round(snake.tickMilliseconds * 0.7),
+  )}ms`,
+}))
+let gameTimer: ReturnType<typeof setInterval> | undefined
+
+function cellStyle(point: SnakePoint): Record<string, string> {
+  return {
+    height: `${100 / SNAKE_BOARD_HEIGHT}%`,
+    left: `${(point.x / SNAKE_BOARD_WIDTH) * 100}%`,
+    top: `${(point.y / SNAKE_BOARD_HEIGHT) * 100}%`,
+    width: `${100 / SNAKE_BOARD_WIDTH}%`,
+  }
+}
+
+function bodySegmentStyle(point: SnakePoint): Record<string, string> {
+  return {
+    height: `${(0.72 / SNAKE_BOARD_HEIGHT) * 100}%`,
+    left: `${((point.x + 0.14) / SNAKE_BOARD_WIDTH) * 100}%`,
+    top: `${((point.y + 0.14) / SNAKE_BOARD_HEIGHT) * 100}%`,
+    width: `${(0.72 / SNAKE_BOARD_WIDTH) * 100}%`,
+  }
+}
+
+function connectorStyle(
+  first: SnakePoint,
+  second: SnakePoint,
+): Record<string, string> {
+  if (first.y === second.y) {
+    return {
+      height: `${(0.62 / SNAKE_BOARD_HEIGHT) * 100}%`,
+      left: `${((Math.min(first.x, second.x) + 0.5) / SNAKE_BOARD_WIDTH) * 100}%`,
+      top: `${((first.y + 0.19) / SNAKE_BOARD_HEIGHT) * 100}%`,
+      width: `${(Math.abs(first.x - second.x) / SNAKE_BOARD_WIDTH) * 100}%`,
+    }
+  }
+
+  return {
+    height: `${(Math.abs(first.y - second.y) / SNAKE_BOARD_HEIGHT) * 100}%`,
+    left: `${((first.x + 0.19) / SNAKE_BOARD_WIDTH) * 100}%`,
+    top: `${((Math.min(first.y, second.y) + 0.5) / SNAKE_BOARD_HEIGHT) * 100}%`,
+    width: `${(0.62 / SNAKE_BOARD_WIDTH) * 100}%`,
+  }
+}
+
+function stopGameTimer(): void {
+  if (gameTimer) clearInterval(gameTimer)
+  gameTimer = undefined
+}
+
+function syncGameTimer(): void {
+  stopGameTimer()
+  if (snake.game?.status === 'playing') {
+    gameTimer = setInterval(() => snake.tick(), snake.tickMilliseconds)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  const directionByKey: Partial<Record<string, SnakeDirection>> = {
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'up',
+    a: 'left',
+    d: 'right',
+    s: 'down',
+    w: 'up',
+  }
+  const direction = directionByKey[event.key]
+
+  if (direction) {
+    event.preventDefault()
+    snake.turn(direction)
+  } else if (event.key === ' ' && snake.game) {
+    event.preventDefault()
+    if (snake.game.status === 'paused') {
+      snake.resume()
+    } else {
+      snake.pause()
+    }
+  }
+}
+
+function beginSwipe(event: TouchEvent): void {
+  const touch = event.changedTouches[0]
+  touchStart.value = touch ? { x: touch.clientX, y: touch.clientY } : null
+}
+
+function endSwipe(event: TouchEvent): void {
+  const start = touchStart.value
+  const touch = event.changedTouches[0]
+  touchStart.value = null
+  if (!start || !touch) return
+
+  const deltaX = touch.clientX - start.x
+  const deltaY = touch.clientY - start.y
+  if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < 18) return
+
+  if (Math.abs(deltaX) > Math.abs(deltaY)) {
+    snake.turn(deltaX > 0 ? 'right' : 'left')
+  } else {
+    snake.turn(deltaY > 0 ? 'down' : 'up')
+  }
+}
+
+snake.hydrate()
+watch(
+  () => [snake.game?.status, snake.tickMilliseconds],
+  syncGameTimer,
+  { immediate: true },
+)
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onBeforeUnmount(() => {
+  stopGameTimer()
+  snake.pause()
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <main class="snake-app" :aria-label="phone.t('Apps.snake.name')">
+    <header class="snake-header">
+      <span class="snake-brand">{{ phone.t('Apps.snake.name') }}</span>
+      <div class="snake-score-card">
+        <span>{{ phone.t('Apps.snake.highScore') }}</span>
+        <strong>{{ snake.highScore }}</strong>
+      </div>
+    </header>
+
+    <section v-if="!game" class="snake-menu">
+      <div class="snake-mark" aria-hidden="true">
+        <span class="snake-mark__eye"></span>
+        <span class="snake-mark__fruit"></span>
+      </div>
+      <div>
+        <h1>{{ phone.t('Apps.snake.readyTitle') }}</h1>
+        <p>{{ phone.t('Apps.snake.readyBody') }}</p>
+      </div>
+      <fieldset class="snake-speed-picker">
+        <legend>{{ phone.t('Apps.snake.speed') }}</legend>
+        <button
+          v-for="speed in speedOptions"
+          :key="speed"
+          type="button"
+          :class="{ active: snake.speed === speed }"
+          @click="snake.setSpeed(speed)"
+        >
+          {{ phone.t(`Apps.snake.speeds.${speed}`) }}
+        </button>
+      </fieldset>
+      <button type="button" class="snake-primary" @click="snake.start">
+        <Play :size="18" fill="currentColor" />
+        {{ phone.t('Apps.snake.start') }}
+      </button>
+    </section>
+
+    <section v-else class="snake-game">
+      <div class="snake-game__meta">
+        <span>{{ phone.t('Apps.snake.score') }}</span>
+        <strong>{{ game.score }}</strong>
+        <button
+          v-if="game.status !== 'game-over'"
+          type="button"
+          :aria-label="
+            phone.t(
+              game.status === 'paused'
+                ? 'Apps.snake.resume'
+                : 'Apps.snake.pause',
+            )
+          "
+          @click="game.status === 'paused' ? snake.resume() : snake.pause()"
+        >
+          <Play v-if="game.status === 'paused'" :size="18" fill="currentColor" />
+          <Pause v-else :size="18" fill="currentColor" />
+        </button>
+      </div>
+
+      <div
+        class="snake-board"
+        :style="boardMotionStyle"
+        :aria-label="phone.t('Apps.snake.board')"
+        @touchstart.passive="beginSwipe"
+        @touchend.passive="endSwipe"
+      >
+        <span
+          v-for="(_, index) in game.body.slice(1)"
+          :key="`connector-${index}`"
+          class="snake-body-connector"
+          :style="connectorStyle(game.body[index], game.body[index + 1])"
+        ></span>
+        <span
+          v-for="(segment, index) in game.body"
+          :key="`body-${index}`"
+          class="snake-body-segment"
+          :class="{ 'snake-body-segment--tail': index === game.body.length - 1 }"
+          :style="bodySegmentStyle(segment)"
+        ></span>
+        <span
+          class="snake-head"
+          :class="`snake-head--${game.direction}`"
+          :style="cellStyle(game.body[0])"
+        >
+          <i class="snake-head__eye snake-head__eye--top"></i>
+          <i class="snake-head__eye snake-head__eye--bottom"></i>
+        </span>
+        <span class="snake-fruit" :style="cellStyle(game.fruit)">
+          <i></i>
+        </span>
+
+        <div v-if="game.status !== 'playing'" class="snake-overlay">
+          <template v-if="game.status === 'paused'">
+            <h2>{{ phone.t('Apps.snake.paused') }}</h2>
+            <button type="button" class="snake-primary" @click="snake.resume">
+              <Play :size="17" fill="currentColor" />
+              {{ phone.t('Apps.snake.resume') }}
+            </button>
+          </template>
+          <template v-else>
+            <span class="snake-overline">{{ phone.t('Apps.snake.score') }} {{ game.score }}</span>
+            <h2>{{ phone.t('Apps.snake.gameOver') }}</h2>
+            <button type="button" class="snake-primary" @click="snake.start">
+              {{ phone.t('Apps.snake.restart') }}
+            </button>
+            <button type="button" class="snake-secondary" @click="snake.showMenu">
+              {{ phone.t('Apps.snake.menu') }}
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <p class="snake-hint">{{ phone.t('Apps.snake.swipeHint') }}</p>
+      <div class="snake-controls" :aria-label="phone.t('Apps.snake.controls')">
+        <button
+          v-for="control in directionButtons"
+          :key="control.direction"
+          type="button"
+          :class="`snake-control--${control.direction}`"
+          :aria-label="phone.t(`Apps.snake.directions.${control.direction}`)"
+          @click="snake.turn(control.direction)"
+        >
+          <component :is="control.icon" :size="24" :stroke-width="2.6" />
+        </button>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.snake-app {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 52px 18px 28px;
+  color: #eef7ec;
+  background:
+    radial-gradient(circle at 85% 8%, rgb(100 211 91 / 22%), transparent 30%),
+    linear-gradient(165deg, #142b25 0%, #0c1715 62%, #08100f 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  user-select: none;
+  touch-action: none;
+}
+
+.snake-header,
+.snake-game__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.snake-brand {
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.7px;
+}
+
+.snake-score-card {
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  gap: 2px 9px;
+  padding: 7px 11px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 13px;
+  background: rgb(255 255 255 / 7%);
+}
+
+.snake-score-card span {
+  grid-row: 1 / 3;
+  max-width: 50px;
+  color: #9db3a8;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1.05;
+  text-transform: uppercase;
+}
+
+.snake-score-card strong {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.snake-menu {
+  height: calc(100% - 56px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 25px;
+  text-align: center;
+}
+
+.snake-mark {
+  position: relative;
+  width: 118px;
+  height: 118px;
+  border: 22px solid #65c85d;
+  border-top-color: #84df6d;
+  border-radius: 50%;
+  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 26%));
+}
+
+.snake-mark::after {
+  content: "";
+  position: absolute;
+  right: -25px;
+  top: -20px;
+  width: 39px;
+  height: 29px;
+  border-radius: 55% 60% 55% 45%;
+  background: #85df6e;
+  transform: rotate(13deg);
+}
+
+.snake-mark__eye {
+  position: absolute;
+  z-index: 2;
+  right: -13px;
+  top: -10px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #142b25;
+}
+
+.snake-mark__fruit {
+  position: absolute;
+  right: -43px;
+  bottom: -17px;
+  width: 25px;
+  height: 25px;
+  border-radius: 48% 52% 55% 45%;
+  background: #ff5f52;
+  box-shadow: inset -4px -4px 0 rgb(139 21 22 / 22%);
+}
+
+.snake-menu h1,
+.snake-overlay h2 {
+  margin: 0;
+  font-size: 28px;
+  letter-spacing: -0.8px;
+}
+
+.snake-menu p {
+  max-width: 265px;
+  margin: 7px 0 0;
+  color: #a6bbb0;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.snake-speed-picker {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 5px;
+  padding: 5px;
+  border: 0;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 7%);
+}
+
+.snake-speed-picker legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+.snake-speed-picker button,
+.snake-secondary {
+  min-height: 38px;
+  border: 0;
+  border-radius: 10px;
+  color: #9fb3a9;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.snake-speed-picker button.active {
+  color: #10241e;
+  background: #dff6d9;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+}
+
+.snake-primary {
+  min-width: 170px;
+  min-height: 47px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 22px;
+  border: 0;
+  border-radius: 16px;
+  color: #10241e;
+  background: linear-gradient(135deg, #8ae276, #61c95c);
+  box-shadow: 0 9px 22px rgb(63 176 78 / 25%);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.snake-game {
+  padding-top: 8px;
+}
+
+.snake-game__meta {
+  height: 43px;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.snake-game__meta span {
+  color: #9fb3a9;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.snake-game__meta strong {
+  font-size: 22px;
+}
+
+.snake-game__meta button {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  margin-left: auto;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 50%;
+  color: #dff6d9;
+  background: rgb(255 255 255 / 7%);
+}
+
+.snake-board {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 18;
+  overflow: hidden;
+  border: 1px solid rgb(167 231 157 / 16%);
+  border-radius: 18px;
+  background-color: #162d26;
+  background-image:
+    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
+  background-size: calc(100% / 16) calc(100% / 18);
+  box-shadow: inset 0 0 35px rgb(0 0 0 / 20%), 0 17px 35px rgb(0 0 0 / 20%);
+}
+
+.snake-head,
+.snake-fruit {
+  position: absolute;
+  display: block;
+}
+
+.snake-body-connector,
+.snake-body-segment {
+  position: absolute;
+  z-index: 1;
+  background: #6dcc62;
+  transition-duration: var(--snake-motion-duration);
+  transition-timing-function: cubic-bezier(0.22, 0.68, 0.3, 1);
+  will-change: left, top, width, height;
+}
+
+.snake-body-connector {
+  border-radius: 999px;
+  transition-property: left, top, width, height;
+}
+
+.snake-body-segment {
+  border-radius: 50%;
+  transition-property: left, top;
+}
+
+.snake-body-segment--tail {
+  background: #62be5c;
+  transform: scale(0.86);
+}
+
+.snake-head {
+  z-index: 3;
+  border: 1px solid #438f48;
+  border-radius: 45% 55% 55% 45%;
+  background: #86dc6b;
+  box-shadow:
+    inset -2px -2px 0 rgb(35 112 51 / 14%),
+    0 2px 3px rgb(2 15 8 / 24%);
+  transform-origin: center;
+  transition-duration: var(--snake-motion-duration);
+  transition-property: left, top;
+  transition-timing-function: cubic-bezier(0.22, 0.68, 0.3, 1);
+  will-change: left, top;
+}
+
+.snake-head--right { transform: scale(0.92) rotate(0deg); }
+.snake-head--down { transform: scale(0.92) rotate(90deg); }
+.snake-head--left { transform: scale(0.92) rotate(180deg); }
+.snake-head--up { transform: scale(0.92) rotate(-90deg); }
+
+.snake-head__eye {
+  position: absolute;
+  right: 18%;
+  width: 4px;
+  height: 4px;
+  border: 1px solid #f5ffe9;
+  border-radius: 50%;
+  background: #10241e;
+}
+
+.snake-head__eye--top { top: 17%; }
+.snake-head__eye--bottom { bottom: 17%; }
+
+.snake-fruit {
+  z-index: 2;
+  padding: 3px;
+  border-radius: 50%;
+  background-color: #ff5c50;
+  box-shadow:
+    inset -2px -3px 0 rgb(130 17 21 / 27%),
+    0 0 0 3px rgb(255 92 80 / 10%),
+    0 3px 5px rgb(0 0 0 / 25%);
+  animation: snake-fruit-pulse 1.35s ease-in-out infinite;
+}
+
+.snake-fruit i {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2px;
+  height: 5px;
+  border-radius: 2px;
+  background: #9ee07a;
+  transform: rotate(25deg);
+}
+
+@keyframes snake-fruit-pulse {
+  0%, 100% { transform: scale(0.88); }
+  50% { transform: scale(1.06); }
+}
+
+.snake-overlay {
+  position: absolute;
+  z-index: 5;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 13px;
+  background: rgb(6 16 13 / 82%);
+  backdrop-filter: blur(4px);
+}
+
+.snake-overlay .snake-primary {
+  min-height: 43px;
+}
+
+.snake-overline {
+  color: #91e475;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.snake-secondary {
+  min-width: 140px;
+  color: #c0d0c8;
+  border: 1px solid rgb(255 255 255 / 10%);
+}
+
+.snake-hint {
+  margin: 9px 0 6px;
+  color: #71867c;
+  font-size: 10px;
+  text-align: center;
+}
+
+.snake-controls {
+  position: relative;
+  width: 132px;
+  height: 91px;
+  margin: 0 auto;
+}
+
+.snake-controls button {
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 13px;
+  color: #cae6d1;
+  background: rgb(255 255 255 / 7%);
+}
+
+.snake-control--up { left: 45px; top: 0; }
+.snake-control--left { left: 0; top: 45px; }
+.snake-control--down { left: 45px; top: 45px; }
+.snake-control--right { right: 0; top: 45px; }
+
+button:active {
+  transform: scale(0.96);
+}
+</style>
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 55f86e2..35d21e5 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -61,6 +61,24 @@ Locales["en"] = {
                 },
             },
             calculator = { name = "Calculator" },
+            snake = {
+                name = "Snake", board = "Snake game board", controls = "Direction controls",
+                directions = { down = "Move down", left = "Move left", right = "Move right", up = "Move up" },
+                gameOver = "Game Over", highScore = "High Score", menu = "Main Menu", pause = "Pause game", paused = "Paused",
+                readyBody = "Collect fruit, grow longer, and stay clear of every wall.", readyTitle = "Ready to play?",
+                restart = "Play Again", resume = "Resume game", score = "Score", speed = "Speed",
+                speeds = { fast = "Fast", normal = "Normal", relaxed = "Relaxed" }, start = "Start Game",
+                swipeHint = "Swipe, tap the controls, or use arrow keys / WASD",
+            },
+            memory = {
+                name = "Memory", backToMenu = "Back to board selection", board = "Memory card board",
+                chooseBody = "Find every matching pair with as few moves as possible.",
+                chooseTitle = "Choose a board", completeEyebrow = "Board cleared", completeTitle = "Great memory!",
+                difficulties = { large = "Expert", medium = "Classic", small = "Quick" }, eyebrow = "Matching game",
+                hiddenCard = "Hidden card", menu = "Board Selection", moves = "Moves", mute = "Mute game sounds",
+                noBest = "No best score yet", playAgain = "Play Again", restart = "Restart",
+                revealedCard = "Revealed card", time = "Time", unmute = "Turn on game sounds",
+            },
             camera = {
                 name = "Camera", shutter = "Take photo", flip = "Flip camera", flash = "Toggle flash", controls = "Camera controls",
                 modes = { timelapse = "Timelapse", slowMo = "Slow-Mo", cinematic = "Cinematic", video = "Video", photo = "Photo", portrait = "Portrait", pano = "Pano" },
diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html
index 2d66aff..cb39de7 100644
--- a/sky_phone/source/html/index.html
+++ b/sky_phone/source/html/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-D2k1S7R7.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-G8JTwQWl.css">
+    <script type="module" crossorigin src="./assets/sky-index-CweS_ic7.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-yBie1g9x.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index b8ed000..4094fc6 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -14,6 +14,7 @@ local allowed_device_namespaces = {
     alarms = true,
     media = true,
     apps = true,
+    games = true,
 }
 
 local function trim(value)