diff --git a/NewLogo2.png b/NewLogo2.png
new file mode 100644
index 0000000..ef5badc
Binary files /dev/null and b/NewLogo2.png differ
diff --git a/Notemark/Components/App.razor b/Notemark/Components/App.razor
index ab414e3..405c956 100644
--- a/Notemark/Components/App.razor
+++ b/Notemark/Components/App.razor
@@ -10,7 +10,17 @@
     <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["Notemark.styles.css"]" />
     <ImportMap />
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <!-- Favicon and App Icons -->
+    <link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="msapplication-TileColor" content="#4f46e5" />
+    <meta name="theme-color" content="#4f46e5" />
+    <meta name="application-name" content="Notemark" />
+    <meta name="apple-mobile-web-app-title" content="Notemark" />
+    <meta name="description" content="Beautiful markdown editor with live preview and sharing" />
     <HeadOutlet />
 </head>
 
diff --git a/Notemark/wwwroot/apple-touch-icon.png b/Notemark/wwwroot/apple-touch-icon.png
new file mode 100644
index 0000000..dbcba09
Binary files /dev/null and b/Notemark/wwwroot/apple-touch-icon.png differ
diff --git a/Notemark/wwwroot/favicon-16x16.png b/Notemark/wwwroot/favicon-16x16.png
new file mode 100644
index 0000000..77f9d78
Binary files /dev/null and b/Notemark/wwwroot/favicon-16x16.png differ
diff --git a/Notemark/wwwroot/favicon-64x64.png b/Notemark/wwwroot/favicon-64x64.png
new file mode 100644
index 0000000..a4e4e6e
Binary files /dev/null and b/Notemark/wwwroot/favicon-64x64.png differ
diff --git a/Notemark/wwwroot/favicon.png b/Notemark/wwwroot/favicon.png
index 8422b59..f3c75c6 100644
Binary files a/Notemark/wwwroot/favicon.png and b/Notemark/wwwroot/favicon.png differ
diff --git a/Notemark/wwwroot/icon-192x192.png b/Notemark/wwwroot/icon-192x192.png
new file mode 100644
index 0000000..e95dfd0
Binary files /dev/null and b/Notemark/wwwroot/icon-192x192.png differ
diff --git a/Notemark/wwwroot/icon-512x512.png b/Notemark/wwwroot/icon-512x512.png
new file mode 100644
index 0000000..ae43667
Binary files /dev/null and b/Notemark/wwwroot/icon-512x512.png differ
diff --git a/Notemark/wwwroot/icon-generator.html b/Notemark/wwwroot/icon-generator.html
new file mode 100644
index 0000000..710b72e
--- /dev/null
+++ b/Notemark/wwwroot/icon-generator.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Notemark Icon Generator</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
+        .icon-container { display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
+        .icon-size { text-align: center; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+        .icon-size h3 { margin: 0 0 10px 0; color: #333; }
+        .instructions { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
+        canvas { border: 1px solid #ddd; }
+    </style>
+</head>
+<body>
+    <h1>🎨 Notemark Icon Generator</h1>
+    
+    <div class="instructions">
+        <h3>Instructions:</h3>
+        <p>1. Right-click on any icon below and select "Save image as..."</p>
+        <p>2. Save as the corresponding filename (e.g., favicon-16x16.png)</p>
+        <p>3. Replace the files in your wwwroot folder</p>
+    </div>
+
+    <div class="icon-container">
+        <div class="icon-size">
+            <h3>16x16 (Favicon)</h3>
+            <canvas id="icon16" width="16" height="16"></canvas>
+        </div>
+        
+        <div class="icon-size">
+            <h3>32x32 (Favicon)</h3>
+            <canvas id="icon32" width="32" height="32"></canvas>
+        </div>
+        
+        <div class="icon-size">
+            <h3>64x64 (Standard)</h3>
+            <canvas id="icon64" width="64" height="64"></canvas>
+        </div>
+        
+        <div class="icon-size">
+            <h3>128x128 (High-DPI)</h3>
+            <canvas id="icon128" width="128" height="128"></canvas>
+        </div>
+        
+        <div class="icon-size">
+            <h3>256x256 (Apple Touch)</h3>
+            <canvas id="icon256" width="256" height="256"></canvas>
+        </div>
+        
+        <div class="icon-size">
+            <h3>512x512 (Large)</h3>
+            <canvas id="icon512" width="512" height="512"></canvas>
+        </div>
+    </div>
+
+    <script>
+        const svgString = `<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle with gradient -->
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <circle cx="32" cy="32" r="30" fill="url(#bg)" stroke="#e5e7eb" stroke-width="2"/>
+  
+  <!-- Document representation -->
+  <rect x="16" y="12" width="32" height="40" rx="3" fill="white" opacity="0.95"/>
+  
+  <!-- Markdown symbols -->
+  <!-- Header # -->
+  <text x="20" y="25" font-family="JetBrains Mono, Monaco, monospace" font-size="8" font-weight="bold" fill="#4f46e5">#</text>
+  
+  <!-- Bold text representation -->
+  <rect x="28" y="22" width="12" height="2" fill="#6b7280"/>
+  
+  <!-- List bullets -->
+  <circle cx="21" cy="32" r="1.5" fill="#4f46e5"/>
+  <rect x="25" y="31" width="8" height="2" fill="#6b7280"/>
+  
+  <circle cx="21" cy="38" r="1.5" fill="#4f46e5"/>
+  <rect x="25" y="37" width="10" height="2" fill="#6b7280"/>
+  
+  <!-- Link/code representation -->
+  <rect x="20" y="43" width="20" height="2" rx="1" fill="#e5e7eb"/>
+  <rect x="21" y="44" width="6" height="1" fill="#4f46e5"/>
+  
+  <!-- Pen/edit indicator -->
+  <path d="M42 16 L46 20 L40 26 L36 22 Z" fill="#f59e0b"/>
+  <circle cx="44" cy="18" r="1" fill="#fbbf24"/>
+</svg>`;
+
+        function drawIcon(canvasId, size) {
+            const canvas = document.getElementById(canvasId);
+            const ctx = canvas.getContext('2d');
+            
+            // Create image from SVG
+            const img = new Image();
+            const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
+            const url = URL.createObjectURL(svgBlob);
+            
+            img.onload = function() {
+                ctx.clearRect(0, 0, size, size);
+                ctx.drawImage(img, 0, 0, size, size);
+                URL.revokeObjectURL(url);
+            };
+            
+            img.src = url;
+        }
+
+        // Generate all icon sizes
+        drawIcon('icon16', 16);
+        drawIcon('icon32', 32);
+        drawIcon('icon64', 64);
+        drawIcon('icon128', 128);
+        drawIcon('icon256', 256);
+        drawIcon('icon512', 512);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Notemark/wwwroot/icon.svg b/Notemark/wwwroot/icon.svg
new file mode 100644
index 0000000..5a6baf0
--- /dev/null
+++ b/Notemark/wwwroot/icon.svg
@@ -0,0 +1,37 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle with gradient -->
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <circle cx="32" cy="32" r="30" fill="url(#bg)" stroke="#e5e7eb" stroke-width="2"/>
+  
+  <!-- Document representation -->
+  <rect x="16" y="12" width="32" height="40" rx="3" fill="white" opacity="0.95"/>
+  
+  <!-- Markdown symbols -->
+  <!-- Header # -->
+  <text x="20" y="25" font-family="JetBrains Mono, Monaco, monospace" font-size="8" font-weight="bold" fill="#4f46e5">#</text>
+  
+  <!-- Bold text representation -->
+  <rect x="28" y="22" width="12" height="2" fill="#6b7280"/>
+  
+  <!-- List bullets -->
+  <circle cx="21" cy="32" r="1.5" fill="#4f46e5"/>
+  <rect x="25" y="31" width="8" height="2" fill="#6b7280"/>
+  
+  <circle cx="21" cy="38" r="1.5" fill="#4f46e5"/>
+  <rect x="25" y="37" width="10" height="2" fill="#6b7280"/>
+  
+  <!-- Link/code representation -->
+  <rect x="20" y="43" width="20" height="2" rx="1" fill="#e5e7eb"/>
+  <rect x="21" y="44" width="6" height="1" fill="#4f46e5"/>
+  
+  <!-- Pen/edit indicator -->
+  <path d="M42 16 L46 20 L40 26 L36 22 Z" fill="#f59e0b"/>
+  <circle cx="44" cy="18" r="1" fill="#fbbf24"/>
+</svg>
\ No newline at end of file
diff --git a/Notemark/wwwroot/manifest.json b/Notemark/wwwroot/manifest.json
new file mode 100644
index 0000000..8d50f42
--- /dev/null
+++ b/Notemark/wwwroot/manifest.json
@@ -0,0 +1,43 @@
+{
+  "name": "Notemark",
+  "short_name": "Notemark",
+  "description": "Beautiful markdown editor with live preview and sharing",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4f46e5",
+  "icons": [
+    {
+      "src": "favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "apple-touch-icon.png", 
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icon-512x512.png",
+      "sizes": "512x512", 
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..192237d
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..d9008bd
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..5eb124b
Binary files /dev/null and b/favicon.png differ