diff --git a/app/layout.tsx b/app/layout.tsx
index daddbb0..ff07502 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -17,6 +17,13 @@ export const metadata: Metadata = {
   description: "Daily music guessing game - Guess the song from short audio clips",
 };
 
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
diff --git a/app/manifest.ts b/app/manifest.ts
new file mode 100644
index 0000000..0c3af1d
--- /dev/null
+++ b/app/manifest.ts
@@ -0,0 +1,20 @@
+import type { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        name: 'Hördle',
+        short_name: 'Hördle',
+        description: 'Daily music guessing game - Guess the song from short audio clips',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#ffffff',
+        theme_color: '#000000',
+        icons: [
+            {
+                src: '/favicon.ico',
+                sizes: 'any',
+                type: 'image/x-icon',
+            },
+        ],
+    }
+}