diff --git a/.gitignore b/.gitignore
index 517252d..19e4fc2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+ -Raw) -replace
diff --git a/THEMES.md b/THEMES.md
index 5ca6b53..ce7827c 100644
--- a/THEMES.md
+++ b/THEMES.md
@@ -4,7 +4,7 @@ This gallery showcases all available themes for the CommitPulse streak card.
 
 ---
 
-## 🌑 Neon
+## 🌌 Neon
 
 ![Neon](assets/themes/neon.png)
 
@@ -28,7 +28,7 @@ Usage: `/api/streak?user=yourusername&theme=dark`
 
 ---
 
-## 🤍 Light
+## 🌕 Light
 
 ![Light](assets/themes/light.png)
 
@@ -68,7 +68,7 @@ Usage: `/api/streak?user=yourusername&theme=forest`
 
 ---
 
-## 🌹 Rose
+## 🌸 Rose
 
 ![Rose](assets/themes/rose.png)
 
@@ -81,3 +81,4 @@ Usage: `/api/streak?user=yourusername&theme=rose`
 ![Nord](assets/themes/nord.png)
 
 Usage: `/api/streak?user=yourusername&theme=nord`
+'@
diff --git a/app/customize/page.tsx b/app/customize/page.tsx
index b2d7caa..d1c227d 100644
--- a/app/customize/page.tsx
+++ b/app/customize/page.tsx
@@ -1,11 +1,13 @@
-'use client';
+'use client';
 
 import { useState, useCallback } from 'react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { themes } from '../../lib/svg/themes';
+import { FONT_OPTIONS } from '../../lib/svg/generator';
+const FONT_KEYS = Object.keys(FONT_OPTIONS);
 
-// ─── Types ────────────────────────────────────────────────────────────────────
+// ─── Types ────────────────────────────────────────────────────────────────────
 
 type Scale = 'linear' | 'log';
 
@@ -19,13 +21,13 @@ const SPEEDS = [
   { value: '20s', label: 'Ultra-slow (20s)' },
 ] as const;
 
-// ─── Helpers ──────────────────────────────────────────────────────────────────
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function stripHash(val: string) {
   return val.replace(/^#/, '');
 }
 
-// ─── Sub-components ───────────────────────────────────────────────────────────
+// ─── Sub-components ───────────────────────────────────────────────────────────
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
@@ -89,7 +91,7 @@ function HexInput({
     <div className="flex flex-col gap-1.5">
       <SectionLabel>{label}</SectionLabel>
       <div className="relative flex items-center gap-2">
-        {/* ── Color picker trigger ── */}
+        {/* ── Color picker trigger ── */}
         <label
           htmlFor={`${id}-picker`}
           title="Open color picker"
@@ -116,7 +118,7 @@ function HexInput({
           />
         </label>
 
-        {/* ── Text input ── */}
+        {/* ── Text input ── */}
         <div className="relative flex-1 flex items-center">
           <span className="absolute left-3 text-white/30 text-sm select-none pointer-events-none">
             #
@@ -136,7 +138,7 @@ function HexInput({
   );
 }
 
-// ─── Main Page ────────────────────────────────────────────────────────────────
+// ─── Main Page ────────────────────────────────────────────────────────────────
 
 export default function CustomizePage() {
   const [username, setUsername] = useState('jhasourav07');
@@ -146,9 +148,10 @@ export default function CustomizePage() {
   const [textHex, setTextHex] = useState('');
   const [scale, setScale] = useState<Scale>('linear');
   const [speed, setSpeed] = useState('8s');
+  const [font, setFont] = useState('default');
   const [copied, setCopied] = useState(false);
 
-  // ── buildQueryParams ──────────────────────────────────────────────────────
+  // ── buildQueryParams ──────────────────────────────────────────────────────
 
   const buildQueryParams = useCallback(() => {
     const params = new URLSearchParams();
@@ -167,9 +170,10 @@ export default function CustomizePage() {
 
     if (scale !== 'linear') params.set('scale', scale);
     if (speed !== '8s') params.set('speed', speed);
+    if (font !== 'default') params.set('font', font);
 
     return params.toString();
-  }, [username, theme, bgHex, accentHex, textHex, scale, speed]);
+  }, [username, theme, bgHex, accentHex, textHex, scale, speed, font]);
 
   const queryString = buildQueryParams();
   const previewSrc = `/api/streak?${queryString}`;
@@ -191,7 +195,7 @@ export default function CustomizePage() {
       </div>
 
       <div className="relative z-10 max-w-[1400px] mx-auto px-6 py-8">
-        {/* ── Top Bar ───────────────────────────────────────────────────────── */}
+        {/* ── Top Bar ───────────────────────────────────────────────────────── */}
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -228,7 +232,7 @@ export default function CustomizePage() {
           </div>
         </motion.div>
 
-        {/* ── Page heading ─────────────────────────────────────────────────── */}
+        {/* ── Page heading ─────────────────────────────────────────────────── */}
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
@@ -240,13 +244,13 @@ export default function CustomizePage() {
           </h1>
           <p className="text-gray-500 text-sm max-w-xl">
             Every change below updates the preview in real-time. Copy the Markdown snippet when
-            you&apos;re done — no extra steps required.
+            you&apos;re done — no extra steps required.
           </p>
         </motion.div>
 
-        {/* ── Split layout ─────────────────────────────────────────────────── */}
+        {/* ── Split layout ─────────────────────────────────────────────────── */}
         <div className="grid lg:grid-cols-[380px_1fr] gap-6 items-start">
-          {/* ════ LEFT: Control Panel ════════════════════════════════════════ */}
+          {/* ════ LEFT: Control Panel ════════════════════════════════════════ */}
           <motion.aside
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -284,7 +288,7 @@ export default function CustomizePage() {
                         </option>
                       ))}
                     </StyledSelect>
-                    {/* Theme color swatches — driven from the imported themes object */}
+                    {/* Theme color swatches — driven from the imported themes object */}
                     <div className="mt-2 flex gap-1.5">
                       {(['bg', 'accent', 'text'] as const).map((prop) => {
                         const color = themes[theme]?.[prop];
@@ -298,7 +302,7 @@ export default function CustomizePage() {
                         ) : null;
                       })}
                       <span className="text-[11px] text-white/25 ml-1 self-center">
-                        bg · accent · text
+                        bg · accent · text
                       </span>
                     </div>
                   </div>
@@ -347,7 +351,7 @@ export default function CustomizePage() {
                       }}
                       className="mt-3 text-[11px] text-red-400/60 hover:text-red-400 transition-colors"
                     >
-                      ✕ Clear overrides
+                      ✕ Clear overrides
                     </button>
                   )}
                 </div>
@@ -375,10 +379,25 @@ export default function CustomizePage() {
                   </div>
                   <p className="text-[11px] text-white/25 mt-1.5 leading-relaxed">
                     {scale === 'log'
-                      ? 'Log mode compresses extreme outliers — great for power committers.'
+                      ? 'Log mode compresses extreme outliers — great for power committers.'
                       : 'Linear mode shows raw commit counts as tower heights.'}
                   </p>
                 </ControlRow>
+                {/* Font Style */}
+                <ControlRow label="Font Style">
+                  <div className="relative">
+                    <StyledSelect id="font-select" value={font} onChange={setFont}>
+                      {FONT_KEYS.map((k) => (
+                        <option key={k} value={k}>
+                          {FONT_OPTIONS[k].title}
+                        </option>
+                      ))}
+                    </StyledSelect>
+                  </div>
+                </ControlRow>
+
+                {/* Divider */}
+                <div className="h-px bg-white/5" />
 
                 {/* Scan speed */}
                 <ControlRow label="Radar Scan Speed">
@@ -396,7 +415,7 @@ export default function CustomizePage() {
             </div>
           </motion.aside>
 
-          {/* ════ RIGHT: Preview + Export ════════════════════════════════════ */}
+          {/* ════ RIGHT: Preview + Export ════════════════════════════════════ */}
           <motion.div
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -430,7 +449,7 @@ export default function CustomizePage() {
               </div>
 
               <p className="mt-3 text-[11px] text-white/20 text-center">
-                Preview updates on every change · Hosted badge is cached at UTC midnight
+                Preview updates on every change · Hosted badge is cached at UTC midnight
               </p>
             </div>
 
@@ -496,8 +515,8 @@ export default function CustomizePage() {
 
               <p className="mt-4 text-[11px] text-white/20 leading-relaxed">
                 Paste this into your GitHub profile&apos;s{' '}
-                <code className="text-white/35">README.md</code> — the badge renders server-side, no
-                script required.
+                <code className="text-white/35">README.md</code> — the badge renders server-side,
+                no script required.
               </p>
             </div>
 
diff --git a/lib/svg/generator.ts b/lib/svg/generator.ts
index 1511723..a9ad785 100644
--- a/lib/svg/generator.ts
+++ b/lib/svg/generator.ts
@@ -1,11 +1,21 @@
+// lib/svg/generator.ts
 import type { BadgeParams, ContributionCalendar, StreakStats } from '../../types';
 
-const FONT_MAP: Record<string, string> = {
-  jetbrains: '"JetBrains Mono", monospace',
-  fira: '"Fira Code", monospace',
-  roboto: '"Roboto", sans-serif',
+export const FONT_OPTIONS: Record<string, { title: string; display: string; body: string }> = {
+  default: { title: 'Default', display: 'Syncopate', body: 'Space Grotesk' },
+  mono: { title: 'Mono', display: 'JetBrains Mono', body: 'JetBrains Mono' },
+  jetbrains: { title: 'JetBrains', display: 'JetBrains Mono', body: 'JetBrains Mono' },
+  elegant: { title: 'Elegant', display: 'Playfair Display', body: 'Lato' },
+  minimal: { title: 'Minimal', display: 'DM Sans', body: 'DM Sans' },
+  retro: { title: 'Retro', display: 'Press Start 2P', body: 'VT323' },
 };
 
+const SIZE_MAP = {
+  small: { width: 400, height: 280 },
+  medium: { width: 600, height: 420 },
+  large: { width: 800, height: 560 },
+} as const;
+
 function deterministicRandom(seed: string): number {
   let hash = 2166136261;
   for (let i = 0; i < seed.length; i++) {
@@ -32,17 +42,8 @@ function generateParticles(
 
     particles += `
       <circle cx="${x + offsetX}" cy="${y - height}" r="1.5" fill="${color}" opacity="1">
-        <animate attributeName="cy"
-          from="${y - height}"
-          to="${y - height - 20}"
-          dur="1.5s"
-          begin="${delay}s"
-          repeatCount="indefinite" />
-        <animate attributeName="opacity"
-          from="1" to="0"
-          dur="1.5s"
-          begin="${delay}s"
-          repeatCount="indefinite" />
+        <animate attributeName="cy" from="${y - height}" to="${y - height - 20}" dur="1.5s" begin="${delay}s" repeatCount="indefinite" />
+        <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="${delay}s" repeatCount="indefinite" />
       </circle>
     `;
   }
@@ -59,26 +60,24 @@ export function generateSVG(
   const accent = `#${(params.accent || '00ffaa').replace('#', '')}`;
   const text = `#${(params.text || 'ffffff').replace('#', '')}`;
 
-  const selectedFont = params.font
-    ? FONT_MAP[params.font.toLowerCase()] || '"JetBrains Mono", monospace'
-    : null;
-
-  const defaultTitleFont = '"Syncopate", sans-serif';
-  const defaultBodyFont = '"Space Grotesk", sans-serif';
+  const fontKey = params.font ? (FONT_OPTIONS[params.font] ? params.font : 'jetbrains') : 'default';
+  const { display: displayFont, body: bodyFont } = FONT_OPTIONS[fontKey];
 
-  const statsFont = selectedFont || defaultBodyFont;
-  const labelFont = '"Roboto", sans-serif';
+  const labelFont = 'Roboto';
 
   const parsedRadius = Number(params.radius);
   const radius = Math.max(0, Math.min(Number.isNaN(parsedRadius) ? 8 : parsedRadius, 50));
 
+  const sizeKey = (params.size as keyof typeof SIZE_MAP) ?? 'medium';
+  const { width, height } = SIZE_MAP[sizeKey] ?? SIZE_MAP.medium;
+  const scale = width / 600;
+
   const weeks = calendar.weeks.slice(-14);
   let towers = '';
 
   weeks.forEach((week, i) => {
     week.contributionDays.forEach((day, j) => {
       const isToday = i === weeks.length - 1 && j === week.contributionDays.length - 1;
-
       const hasCommits = day.contributionCount > 0;
       const isTodayWithCommits = isToday && hasCommits;
 
@@ -93,30 +92,17 @@ export function generateSVG(
 
       const x = 300 + (i - j) * 16;
       const y = 120 + (i + j) * 9;
-
       const color = hasCommits ? accent : text;
       const opacity = hasCommits ? 0.7 : 0.05;
 
       towers += `
         <g transform="translate(${x}, ${y - h})">
-          ${
-            isTodayWithCommits
-              ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />'
-              : ''
-          }
+          ${isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
           <title>${tooltip}</title>
-          <path d="M0 10 L0 ${10 + h} L-16 ${h} L-16 0 Z" fill="${color}" fill-opacity="${
-            opacity * 0.5
-          }" />
-          <path d="M0 10 L0 ${10 + h} L16 ${h} L16 0 Z" fill="${color}" fill-opacity="${
-            opacity * 0.3
-          }" />
+          <path d="M0 10 L0 ${10 + h} L-16 ${h} L-16 0 Z" fill="${color}" fill-opacity="${opacity * 0.5}" />
+          <path d="M0 10 L0 ${10 + h} L16 ${h} L16 0 Z" fill="${color}" fill-opacity="${opacity * 0.3}" />
           <path d="M0 0 L16 10 L0 20 L-16 10 Z" fill="${color}" fill-opacity="${opacity}" />
-          ${
-            day.contributionCount > 5
-              ? `<path d="M0 0 L16 10 L0 20 L-16 10 Z" fill="white" fill-opacity="0.2" />`
-              : ''
-          }
+          ${day.contributionCount > 5 ? `<path d="M0 0 L16 10 L0 20 L-16 10 Z" fill="white" fill-opacity="0.2" />` : ''}
         </g>`;
 
       if (day.contributionCount >= 10) {
@@ -125,82 +111,42 @@ export function generateSVG(
     });
   });
 
-  return `
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="420" viewBox="0 0 600 420" fill="none">
+  const importUrl = `https://fonts.googleapis.com/css2?family=${displayFont.replace(/ /g, '+')}:wght@700&amp;family=${bodyFont.replace(/ /g, '+')}:wght@300;500;700&amp;display=swap`;
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none">
   <defs>
     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
       <feGaussianBlur stdDeviation="5" result="blur" />
       <feComposite in="SourceGraphic" in2="blur" operator="over" />
     </filter>
   </defs>
-
   <style>
-  @import url('https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=JetBrains+Mono&amp;family=Roboto&amp;display=swap');
-
-  .title {
-    font-family: ${selectedFont || defaultTitleFont};
-    fill: ${text};
-    font-size: 18px;
-    letter-spacing: 6px;
-    font-weight: 400;
-    opacity: 0.8;
-  }
-
-  .stats {
-    font-family: ${statsFont};
-    fill: ${text};
-    font-size: 42px;
-    font-weight: 500;
-    letter-spacing: 0;
-  }
-
-  .total-val {
-    font-family: ${statsFont};
-    fill: ${accent};
-    font-size: 24px;
-    font-weight: 500;
-  }
-
-  .label {
-    font-family: ${labelFont};
-    fill: ${accent};
-    font-size: 11px;
-    font-weight: 400;
-    letter-spacing: 2px;
-    opacity: 0.7;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .heat-particles { display: none; }
-  }
+    @import url('${importUrl}');
+    .title { font-family: '${displayFont}', sans-serif; fill: ${text}; font-size: ${18 * scale}px; letter-spacing: 6px; opacity: 0.8; }
+    .stats { font-family: '${bodyFont}', sans-serif; fill: ${text}; font-size: ${42 * scale}px; font-weight: 700; }
+    .total-val { font-family: '${displayFont}', sans-serif; fill: ${accent}; font-size: ${24 * scale}px; font-weight: 700; }
+    .label { font-family: '${labelFont}', sans-serif; fill: ${accent}; font-size: ${11 * scale}px; font-weight: 700; letter-spacing: 2px; opacity: 0.7; }
+    @media (prefers-reduced-motion: reduce) { .heat-particles { display: none; } }
   </style>
-
-  <rect width="600" height="420" rx="${radius}" fill="${bg}" />
-
-  <g transform="translate(0, 20)">
+  <rect width="${width}" height="${height}" rx="${radius}" fill="${bg}" />
+  <g transform="translate(0, ${20 * scale}) scale(${scale})">
     ${towers}
   </g>
-
-  <g transform="translate(40, 340)">
+  <g transform="translate(${40 * scale}, ${340 * scale})">
     <text class="label">CURRENT_STREAK</text>
-    <text y="40" class="stats" filter="url(#glow)">${stats.currentStreak}</text>
+    <text y="${40 * scale}" class="stats" filter="url(#glow)">${stats.currentStreak}</text>
   </g>
-
-  <g transform="translate(300, 340)" text-anchor="middle">
+  <g transform="translate(${width / 2}, ${340 * scale})" text-anchor="middle">
     <text class="label">ANNUAL_SYNC_TOTAL</text>
-    <text y="40" class="total-val" filter="url(#glow)">${stats.totalContributions}</text>
+    <text y="${40 * scale}" class="total-val" filter="url(#glow)">${stats.totalContributions}</text>
   </g>
-
-  <g transform="translate(560, 340)" text-anchor="end">
+  <g transform="translate(${width - 40 * scale}, ${340 * scale})" text-anchor="end">
     <text class="label">PEAK_STREAK</text>
-    <text y="40" class="stats">${stats.longestStreak}</text>
+    <text y="${40 * scale}" class="stats">${stats.longestStreak}</text>
   </g>
-
-  <text x="300" y="50" text-anchor="middle" class="title">${params.user?.toUpperCase() || ''}</text>
-
-  <rect x="100" y="60" width="400" height="1" fill="${accent}" fill-opacity="0.3">
-    <animate attributeName="y" values="80;320;80" dur="${params.speed || '8s'}" repeatCount="indefinite" />
+  <text x="${width / 2}" y="${50 * scale}" text-anchor="middle" class="title">${params.user?.toUpperCase() || ''}</text>
+  <rect x="${100 * scale}" y="${60 * scale}" width="${400 * scale}" height="1" fill="${accent}" fill-opacity="0.3">
+    <animate attributeName="y" values="${80 * scale};${320 * scale};${80 * scale}" dur="${params.speed || '8s'}" repeatCount="indefinite" />
   </rect>
-</svg>
-`;
+</svg>`;
 }
diff --git a/types/index.ts b/types/index.ts
index 40bc2f8..7a435e3 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1,4 +1,4 @@
-export interface StreakStats {
+export interface StreakStats {
   currentStreak: number;
   longestStreak: number;
   totalContributions: number;
@@ -26,11 +26,12 @@ export interface ContributionCalendar {
 
 export interface BadgeParams {
   user: string;
-  bg: string;
-  text: string;
-  accent: string;
-  speed: string;
-  scale: 'linear' | 'log';
+  bg?: string;
+  text?: string;
+  accent?: string;
+  speed?: string;
+  scale?: 'linear' | 'log';
   font?: string;
   radius?: string;
+  size?: 'small' | 'medium' | 'large';
 }