diff --git a/.gitignore b/.gitignore
index a3179f5..0feade1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,8 +34,9 @@ direct-*.html
 *-test.svg
 test-output-*.svg
 test-results-*.md
-*.svg
+/*.svg
 svg-preview.html
+!public/*.svg
 
 # Lighthouse CI
 .lighthouseci/
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..71d6dcf
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#1a1a2e"/>
+  <text x="50" y="68" font-size="50" text-anchor="middle" font-family="system-ui, sans-serif">📊</text>
+</svg>
diff --git a/public/og-image.svg b/public/og-image.svg
new file mode 100644
index 0000000..6ff81f9
--- /dev/null
+++ b/public/og-image.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <!-- Background -->
+  <rect width="1200" height="630" fill="#0d1117"/>
+
+  <!-- Grid pattern -->
+  <defs>
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#21262d" stroke-width="1"/>
+    </pattern>
+  </defs>
+  <rect width="1200" height="630" fill="url(#grid)" opacity="0.5"/>
+
+  <!-- Card background -->
+  <rect x="100" y="115" width="1000" height="400" rx="24" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+
+  <!-- Icon -->
+  <text x="200" y="280" font-size="80">📊</text>
+
+  <!-- Title -->
+  <text x="320" y="270" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="bold" fill="#ffffff">DevCard</text>
+
+  <!-- Subtitle -->
+  <text x="320" y="340" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#8b949e">GitHub Readme Stats Generator</text>
+
+  <!-- Stats preview -->
+  <rect x="320" y="380" width="120" height="8" rx="4" fill="#238636"/>
+  <rect x="450" y="380" width="80" height="8" rx="4" fill="#1f6feb"/>
+  <rect x="540" y="380" width="60" height="8" rx="4" fill="#a371f7"/>
+  <rect x="610" y="380" width="40" height="8" rx="4" fill="#f0883e"/>
+
+  <!-- URL -->
+  <text x="600" y="580" font-family="system-ui, -apple-system, sans-serif" font-size="24" fill="#6e7681" text-anchor="middle">devcard.pavegy.workers.dev</text>
+</svg>
diff --git a/src/client/index.html b/src/client/index.html
index 3b0ff46..d74b190 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -19,7 +19,7 @@
     <meta property="og:url" content="https://devcard.pavegy.workers.dev/" />
     <meta property="og:title" content="DevCard - GitHub Readme Stats" />
     <meta property="og:description" content="Create stunning GitHub statistics cards for your profile README. Customize your GitHub stats, languages, and pinned repositories with minimal setup." />
-    <meta property="og:image" content="https://devcard.pavegy.workers.dev/og-image.png" />
+    <meta property="og:image" content="https://devcard.pavegy.workers.dev/og-image.svg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content="DevCard - GitHub Readme Stats Generator" />
@@ -32,7 +32,7 @@
     <meta name="twitter:url" content="https://devcard.pavegy.workers.dev/" />
     <meta name="twitter:title" content="DevCard - GitHub Readme Stats" />
     <meta name="twitter:description" content="Create stunning GitHub statistics cards for your profile README. Customize your GitHub stats, languages, and pinned repositories with minimal setup." />
-    <meta name="twitter:image" content="https://devcard.pavegy.workers.dev/og-image.png" />
+    <meta name="twitter:image" content="https://devcard.pavegy.workers.dev/og-image.svg" />
     <meta name="twitter:image:alt" content="DevCard - GitHub Readme Stats Generator" />
     <meta name="twitter:creator" content="@devcard" />
 
@@ -124,9 +124,18 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400&family=Noto+Sans+JP:wght@400;500;600;700&display=swap" />
     </noscript>
 
-    <!-- Critical CSS for initial render (prevents FOUT) -->
+    <!-- Critical CSS for initial render (prevents FOUT/CLS) -->
     <style>
-      body { font-family: 'Geist', system-ui, -apple-system, sans-serif; }
+      /* Fallback font metrics matched to Geist to minimize CLS */
+      @font-face {
+        font-family: 'Geist Fallback';
+        src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont');
+        size-adjust: 100%;
+        ascent-override: 90%;
+        descent-override: 20%;
+        line-gap-override: 0%;
+      }
+      body { font-family: 'Geist', 'Geist Fallback', system-ui, -apple-system, sans-serif; }
     </style>
 
     <!-- Additional SEO Meta Tags -->
diff --git a/vite.config.ts b/vite.config.ts
index be28eaa..4722a24 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@ import path from 'path';
 export default defineConfig({
   plugins: [react()],
   root: 'src/client',
-  publicDir: '../../public-static',
+  publicDir: '../../public',
   build: {
     outDir: '../../dist',
     emptyOutDir: true,