diff --git a/packages/frontend/index.html b/packages/frontend/index.html
index c3c0c9b..4194f2c 100644
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@@ -2,9 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Rekordbox Reader - Music Library Manager</title>
+    <meta name="description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
+    <meta name="keywords" content="rekordbox, music, library, manager, s3, storage, dj, playlist" />
+    <meta name="author" content="Rekordbox Reader" />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Rekordbox Reader - Music Library Manager" />
+    <meta property="og:description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
+    <meta property="og:image" content="/favicon.svg" />
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="Rekordbox Reader - Music Library Manager" />
+    <meta property="twitter:description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
+    <meta property="twitter:image" content="/favicon.svg" />
+    
+    <!-- App manifest -->
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#1a202c" />
+    
     <script>
       // Insert this script in your index.html right after the <body> tag.
       // This will help to prevent a flash if dark mode is the default.
diff --git a/packages/frontend/public/favicon.svg b/packages/frontend/public/favicon.svg
new file mode 100644
index 0000000..141d566
--- /dev/null
+++ b/packages/frontend/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle -->
+  <circle cx="16" cy="16" r="15" fill="#1a202c" stroke="#3182ce" stroke-width="2"/>
+  
+  <!-- Music note -->
+  <path d="M12 8L12 20C12 21.1046 11.1046 22 10 22C8.89543 22 8 21.1046 8 20C8 18.8954 8.89543 18 10 18C10.3506 18 10.6872 18.0602 11 18.1708L11 10L18 12L18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C16.3506 22 16.6872 22.0602 17 22.1708L17 10L12 8Z" fill="#3182ce"/>
+  
+  <!-- Small accent dots -->
+  <circle cx="10" cy="20" r="1.5" fill="#63b3ed"/>
+  <circle cx="16" cy="24" r="1.5" fill="#63b3ed"/>
+</svg> 
\ No newline at end of file
diff --git a/packages/frontend/public/manifest.json b/packages/frontend/public/manifest.json
new file mode 100644
index 0000000..a653acd
--- /dev/null
+++ b/packages/frontend/public/manifest.json
@@ -0,0 +1,26 @@
+{
+  "name": "Rekordbox Reader",
+  "short_name": "Rekordbox Reader",
+  "description": "Music Library Manager with S3 storage integration",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a202c",
+  "theme_color": "#1a202c",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "32x32",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml"
+    }
+  ]
+} 
\ No newline at end of file
