diff --git a/web/index.html b/web/index.html
index cd188970..7126104d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,7 +15,7 @@
         <!-- iOS PWA Meta Tags -->
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-        <meta name="apple-mobile-web-app-title" content="Happy" />
+        <meta name="apple-mobile-web-app-title" content="Hapi" />
         <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
 
         <!-- Favicon -->
@@ -25,7 +25,7 @@
         <!-- Safari Pinned Tab -->
         <link rel="mask-icon" href="/mask-icon.svg" color="#111827" />
 
-        <title>Happy Mini App</title>
+        <title>Hapi</title>
         <script type="importmap">
         {
             "imports": {
diff --git a/web/src/App.tsx b/web/src/App.tsx
index a1a11c3a..1d75fe82 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -457,7 +457,7 @@ export function App() {
         // Telegram auth failed
         return (
             <div className="p-4 space-y-3">
-                <div className="text-base font-semibold">Happy Mini App</div>
+                <div className="text-base font-semibold">Hapi</div>
                 <div className="text-sm text-red-600">
                     {authError ?? 'Not authorized'}
                 </div>
diff --git a/web/src/components/InstallPrompt.tsx b/web/src/components/InstallPrompt.tsx
index 7717d2ea..c3422bb4 100644
--- a/web/src/components/InstallPrompt.tsx
+++ b/web/src/components/InstallPrompt.tsx
@@ -1,11 +1,122 @@
+import { useState } from 'react'
 import { usePWAInstall } from '@/hooks/usePWAInstall'
 import { usePlatform } from '@/hooks/usePlatform'
+import { CloseIcon, ShareIcon, PlusCircleIcon } from '@/components/icons'
 
 export function InstallPrompt() {
-    const { canInstall, promptInstall, isStandalone } = usePWAInstall()
+    const { canInstall, canInstallIOS, promptInstall, dismissInstall, isStandalone } = usePWAInstall()
     const { isTelegram, haptic } = usePlatform()
+    const [showIOSGuide, setShowIOSGuide] = useState(false)
 
-    if (isTelegram || isStandalone || !canInstall) {
+    if (isTelegram || isStandalone) {
+        return null
+    }
+
+    // iOS Safari install guide
+    if (canInstallIOS) {
+        if (showIOSGuide) {
+            return (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-end justify-center">
+                    <div className="w-full max-w-lg bg-[var(--app-bg)] rounded-t-2xl p-5 pb-8 space-y-4 animate-slide-up">
+                        <div className="flex items-center justify-between">
+                            <h3 className="text-base font-semibold text-[var(--app-fg)]">
+                                Install Hapi
+                            </h3>
+                            <button
+                                onClick={() => setShowIOSGuide(false)}
+                                className="p-1 -mr-1 text-[var(--app-hint)] active:opacity-60"
+                                aria-label="Close"
+                            >
+                                <CloseIcon className="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        <div className="space-y-3">
+                            <div className="flex items-start gap-3">
+                                <div className="shrink-0 w-8 h-8 rounded-full bg-[var(--app-fg)] text-[var(--app-bg)] flex items-center justify-center text-sm font-medium">
+                                    1
+                                </div>
+                                <div className="flex-1 pt-1">
+                                    <p className="text-sm text-[var(--app-fg)]">
+                                        Tap the <ShareIcon className="inline w-5 h-5 align-text-bottom" /> Share button in the toolbar
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start gap-3">
+                                <div className="shrink-0 w-8 h-8 rounded-full bg-[var(--app-fg)] text-[var(--app-bg)] flex items-center justify-center text-sm font-medium">
+                                    2
+                                </div>
+                                <div className="flex-1 pt-1">
+                                    <p className="text-sm text-[var(--app-fg)]">
+                                        Scroll down and tap <PlusCircleIcon className="inline w-5 h-5 align-text-bottom" /> <strong>Add to Home Screen</strong>
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start gap-3">
+                                <div className="shrink-0 w-8 h-8 rounded-full bg-[var(--app-fg)] text-[var(--app-bg)] flex items-center justify-center text-sm font-medium">
+                                    3
+                                </div>
+                                <div className="flex-1 pt-1">
+                                    <p className="text-sm text-[var(--app-fg)]">
+                                        Tap <strong>Add</strong> in the top right corner
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <button
+                            onClick={() => {
+                                setShowIOSGuide(false)
+                                dismissInstall()
+                            }}
+                            className="w-full py-3 text-sm text-[var(--app-hint)] active:opacity-60"
+                        >
+                            Don't show again
+                        </button>
+                    </div>
+                </div>
+            )
+        }
+
+        return (
+            <div className="fixed bottom-4 left-4 right-4 bg-[var(--app-secondary-bg)] border border-[var(--app-border)] rounded-lg p-4 shadow-lg z-50">
+                <div className="flex items-center justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-[var(--app-fg)]">
+                            Install Hapi
+                        </p>
+                        <p className="text-xs text-[var(--app-hint)] mt-0.5">
+                            Add to home screen for the best experience
+                        </p>
+                    </div>
+                    <button
+                        onClick={() => {
+                            haptic.impact('light')
+                            setShowIOSGuide(true)
+                        }}
+                        className="shrink-0 px-4 py-2 bg-[var(--app-fg)] text-[var(--app-bg)] rounded-lg text-sm font-medium active:opacity-80"
+                    >
+                        Install
+                    </button>
+                    <button
+                        onClick={() => {
+                            haptic.impact('light')
+                            dismissInstall()
+                        }}
+                        className="shrink-0 p-2 text-[var(--app-hint)] active:opacity-60"
+                        aria-label="Dismiss"
+                    >
+                        <CloseIcon className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+        )
+    }
+
+    // Chrome/Edge install prompt
+    if (!canInstall) {
         return null
     }
 
@@ -22,7 +133,7 @@ export function InstallPrompt() {
             <div className="flex items-center justify-between gap-3">
                 <div className="flex-1 min-w-0">
                     <p className="text-sm font-medium text-[var(--app-fg)]">
-                        Install Happy App
+                        Install Hapi
                     </p>
                     <p className="text-xs text-[var(--app-hint)] mt-0.5">
                         Add to home screen for the best experience
@@ -30,7 +141,7 @@ export function InstallPrompt() {
                 </div>
                 <button
                     onClick={handleInstall}
-                    className="shrink-0 px-4 py-2 bg-[var(--app-button)] text-[var(--app-button-text)] rounded-lg text-sm font-medium active:opacity-80"
+                    className="shrink-0 px-4 py-2 bg-[var(--app-fg)] text-[var(--app-bg)] rounded-lg text-sm font-medium active:opacity-80"
                 >
                     Install
                 </button>
diff --git a/web/src/components/LoginPrompt.tsx b/web/src/components/LoginPrompt.tsx
index 0680ee34..bb4e5d1c 100644
--- a/web/src/components/LoginPrompt.tsx
+++ b/web/src/components/LoginPrompt.tsx
@@ -43,7 +43,7 @@ export function LoginPrompt(props: LoginPromptProps) {
             <div className="w-full max-w-sm space-y-6">
                 {/* Header */}
                 <div className="text-center space-y-2">
-                    <div className="text-2xl font-semibold">Happy</div>
+                    <div className="text-2xl font-semibold">Hapi</div>
                     <div className="text-sm text-[var(--app-hint)]">
                         Enter your access token to continue
                     </div>
diff --git a/web/src/components/icons.tsx b/web/src/components/icons.tsx
new file mode 100644
index 00000000..041ae55f
--- /dev/null
+++ b/web/src/components/icons.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+
+type IconProps = {
+    className?: string
+}
+
+function createIcon(paths: ReactNode, props: IconProps, strokeWidth = 1.5) {
+    return (
+        <svg
+            className={props.className ?? 'h-4 w-4'}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            {paths}
+        </svg>
+    )
+}
+
+export function CloseIcon(props: IconProps) {
+    return createIcon(
+        <path d="M6 18 18 6M6 6l12 12" />,
+        props,
+        2
+    )
+}
+
+export function ShareIcon(props: IconProps) {
+    return createIcon(
+        <path d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3v12" />,
+        props
+    )
+}
+
+export function PlusCircleIcon(props: IconProps) {
+    return createIcon(
+        <path d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />,
+        props
+    )
+}
diff --git a/web/src/hooks/usePWAInstall.ts b/web/src/hooks/usePWAInstall.ts
index 95176665..3b09d663 100644
--- a/web/src/hooks/usePWAInstall.ts
+++ b/web/src/hooks/usePWAInstall.ts
@@ -7,14 +7,49 @@ interface BeforeInstallPromptEvent extends Event {
 
 type InstallState = 'idle' | 'available' | 'installing' | 'installed'
 
+const INSTALL_DISMISSED_KEY = 'pwa_install_dismissed'
+
+function isIOSSafari(): boolean {
+    if (typeof window === 'undefined') return false
+    const ua = window.navigator.userAgent
+    const isIOS = /iPad|iPhone|iPod/.test(ua)
+    const isWebkit = /WebKit/.test(ua)
+    const isChrome = /CriOS/.test(ua)
+    const isFirefox = /FxiOS/.test(ua)
+    // iOS Safari is WebKit-based but not Chrome or Firefox
+    return isIOS && isWebkit && !isChrome && !isFirefox
+}
+
+function getInstallDismissed(): boolean {
+    try {
+        return localStorage.getItem(INSTALL_DISMISSED_KEY) === 'true'
+    } catch {
+        return false
+    }
+}
+
+function setInstallDismissed(): void {
+    try {
+        localStorage.setItem(INSTALL_DISMISSED_KEY, 'true')
+    } catch {
+        // Ignore storage errors
+    }
+}
+
 export function usePWAInstall(): {
     installState: InstallState
     canInstall: boolean
+    canInstallIOS: boolean
     isStandalone: boolean
+    isIOS: boolean
     promptInstall: () => Promise<boolean>
+    dismissInstall: () => void
 } {
     const [installState, setInstallState] = useState<InstallState>('idle')
     const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
+    const [dismissed, setDismissed] = useState(() => getInstallDismissed())
+
+    const isIOS = typeof window !== 'undefined' && isIOSSafari()
 
     const isStandalone =
         typeof window !== 'undefined' &&
@@ -75,10 +110,18 @@ export function usePWAInstall(): {
         }
     }, [deferredPrompt])
 
+    const dismissInstall = useCallback(() => {
+        setDismissed(true)
+        setInstallDismissed()
+    }, [])
+
     return {
         installState,
         canInstall: installState === 'available',
+        canInstallIOS: isIOS && !isStandalone && !dismissed,
         isStandalone,
-        promptInstall
+        isIOS,
+        promptInstall,
+        dismissInstall
     }
 }
diff --git a/web/src/hooks/usePlatform.ts b/web/src/hooks/usePlatform.ts
index 46fccabe..7b9fd510 100644
--- a/web/src/hooks/usePlatform.ts
+++ b/web/src/hooks/usePlatform.ts
@@ -68,8 +68,14 @@ function createHaptic(): PlatformHaptic {
 // Singleton haptic instance (functions are stable)
 const haptic = createHaptic()
 
+function checkIsTelegram(): boolean {
+    const tg = getTelegramWebApp()
+    // SDK is always loaded, but initData is only present in actual Telegram environment
+    return tg !== null && Boolean(tg.initData)
+}
+
 export function usePlatform(): Platform {
-    const isTelegram = useMemo(() => getTelegramWebApp() !== null, [])
+    const isTelegram = useMemo(() => checkIsTelegram(), [])
 
     return {
         isTelegram,
@@ -80,7 +86,7 @@ export function usePlatform(): Platform {
 // Non-hook version for use outside React components
 export function getPlatform(): Platform {
     return {
-        isTelegram: getTelegramWebApp() !== null,
+        isTelegram: checkIsTelegram(),
         haptic
     }
 }
diff --git a/web/src/index.css b/web/src/index.css
index ef0fc8a0..ecd308b1 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -145,3 +145,19 @@ html[data-theme="dark"] .shiki span {
   animation: rainbow-wave 2s linear infinite, sparkle-wave 2s ease-in-out infinite;
   font-weight: 600;
 }
+
+/* PWA install prompt animation */
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-up {
+  animation: slide-up 0.3s ease-out;
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index b4f5de3e..da7ce5bb 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -10,8 +10,8 @@ export default defineConfig({
             registerType: 'autoUpdate',
             includeAssets: ['favicon.ico', 'apple-touch-icon-180x180.png', 'mask-icon.svg'],
             manifest: {
-                name: 'Happy Mini App',
-                short_name: 'Happy',
+                name: 'Hapi',
+                short_name: 'Hapi',
                 description: 'AI-powered development assistant',
                 theme_color: '#ffffff',
                 background_color: '#ffffff',