diff --git a/frontend/src/assets/img/app-icons/citywarn.webp b/frontend/src/assets/img/app-icons/citywarn.webp
new file mode 100644
index 0000000..d15f7c6
Binary files /dev/null and b/frontend/src/assets/img/app-icons/citywarn.webp differ
diff --git a/frontend/src/config/apps.test.ts b/frontend/src/config/apps.test.ts
index 0eefc08..ad9117c 100644
--- a/frontend/src/config/apps.test.ts
+++ b/frontend/src/config/apps.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { Newspaper } from 'lucide-vue-next'
+import { Newspaper, Siren } from 'lucide-vue-next'
 
 import { isPhoneAppId, PHONE_APPS } from './apps'
 describe('app registry', () => {
@@ -84,6 +84,14 @@ describe('app registry', () => {
     expect(PHONE_APPS.find((app) => app.id === 'weazel-news')?.icon).toBe(
       Newspaper,
     )
+    expect(PHONE_APPS.find((app) => app.id === 'citywarn')).toMatchObject({
+      category: 'utilities',
+      gridOrder: 30,
+      labelKey: 'Apps.citywarn.name',
+      route: '/apps/citywarn',
+    })
+    expect(PHONE_APPS.find((app) => app.id === 'citywarn')?.icon).toBe(Siren)
+    expect(isPhoneAppId('citywarn')).toBe(true)
     expect(PHONE_APPS.find((app) => app.id === 'music')).toMatchObject({
       category: 'utilities',
       gridOrder: 26,
diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
index 6dbeeae..b3a4ee8 100644
--- a/frontend/src/config/apps.ts
+++ b/frontend/src/config/apps.ts
@@ -35,6 +35,7 @@ import {
   UsersRound,
   Building2,
   Newspaper,
+  Siren,
   HeartPulse,
   ChartCandlestick,
 } from 'lucide-vue-next'
@@ -80,6 +81,7 @@ import featherIcon from '@/assets/img/app-icons/feather.svg'
 import crewLinkIcon from '@/assets/img/app-icons/crewlink.svg'
 import companiesIcon from '@/assets/img/app-icons/companies.svg'
 import weazelNewsIcon from '@/assets/img/app-icons/weazel-news.svg'
+import cityWarnIcon from '@/assets/img/app-icons/citywarn.webp'
 import type {
   BuiltinPhoneAppDefinition,
   BuiltinPhoneAppId,
@@ -91,6 +93,20 @@ import type {
 } from '@/types/apps'
 
 export const PHONE_APPS = shallowReactive<PhoneAppDefinition[]>([
+  {
+    category: 'utilities',
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/CityWarnApp.vue')),
+    ),
+    dockOrder: null,
+    gridOrder: 30,
+    icon: markRaw(Siren),
+    iconClass: 'app-icon--citywarn',
+    iconImage: cityWarnIcon,
+    id: 'citywarn',
+    labelKey: 'Apps.citywarn.name',
+    route: '/apps/citywarn',
+  },
   {
     category: 'utilities',
     component: markRaw(
@@ -676,6 +692,7 @@ export const DEFAULT_INSTALLED_PHONE_APP_IDS: ReadonlySet<BuiltinPhoneAppId> =
     'map',
     'calendar',
     'health',
+    'citywarn',
   ])
 
 export const NON_REMOVABLE_PHONE_APP_IDS: ReadonlySet<LaunchablePhoneAppId> =
@@ -688,6 +705,7 @@ export const NON_REMOVABLE_PHONE_APP_IDS: ReadonlySet<LaunchablePhoneAppId> =
     'messages',
     'mail',
     'health',
+    'citywarn',
   ])
 
 export const PHONE_APP_IDS = PHONE_APPS.map((app) => app.id)
diff --git a/frontend/src/stores/app-store.test.ts b/frontend/src/stores/app-store.test.ts
index 45129df..f65e70f 100644
--- a/frontend/src/stores/app-store.test.ts
+++ b/frontend/src/stores/app-store.test.ts
@@ -33,7 +33,7 @@ describe('app store', () => {
     vi.useRealTimers()
   })
 
-  it('installs the fifteen system apps by default', () => {
+  it('installs the sixteen system apps by default', () => {
     const apps = useAppStoreStore()
 
     apps.hydrate(null)
@@ -54,6 +54,7 @@ describe('app store', () => {
       'map',
       'calendar',
       'health',
+      'citywarn',
     ])
     for (const appId of DEFAULT_INSTALLED_PHONE_APP_IDS) {
       expect(apps.isInstalled(appId)).toBe(true)
@@ -62,6 +63,7 @@ describe('app store', () => {
     expect(apps.isInstalled('feather')).toBe(false)
     expect(apps.isInstalled('snake')).toBe(false)
     expect(apps.isInstalled('health')).toBe(true)
+    expect(apps.isInstalled('citywarn')).toBe(true)
   })
 
   it('removes old automatic apps unless the player installed them', () => {
diff --git a/frontend/src/types/apps.ts b/frontend/src/types/apps.ts
index 388590c..f0cae91 100644
--- a/frontend/src/types/apps.ts
+++ b/frontend/src/types/apps.ts
@@ -41,6 +41,7 @@ export type BuiltinPhoneAppId =
   | 'crewlink'
   | 'companies'
   | 'weazel-news'
+  | 'citywarn'
 
 declare const externalPhoneAppId: unique symbol
 
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 5a4c3af..48b0358 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -113,6 +113,7 @@ const DEFAULT_APP_NOTIFICATIONS: Record<
   'sky-flappy': { enabled: true, sounds: true },
   'neon-drop': { enabled: true, sounds: true },
   citymarkt: { enabled: true, sounds: true },
+  citywarn: { enabled: true, sounds: true },
   companies: { enabled: true, sounds: true },
   'weazel-news': { enabled: true, sounds: true },
   'local-pages': { enabled: true, sounds: true },