diff --git a/src/utils/qrCodeUtils.js b/src/utils/qrCodeUtils.js
index e825b25..a974112 100644
--- a/src/utils/qrCodeUtils.js
+++ b/src/utils/qrCodeUtils.js
@@ -198,13 +198,19 @@ export const addImageToSVG = async (svgString, imageUrl, imageSize = 20) => {
       const svgElement = svgDoc.documentElement
       
       // Calculate image size and position with precise decimal coordinates
-      // The QR code uses a 33x33 coordinate system, so we need to scale accordingly
+      // The QR code uses a 33x33 coordinate system with a 2-unit margin
       const qrSize = 33 // QR code coordinate system size
-      const calculatedImageSize = qrSize * (imageSize / 100)
-      const margin = 2 // Smaller margin for the 33x33 coordinate system
+      const qrMargin = 2 // Margin in the QR coordinate system
+      const qrDataSize = qrSize - (qrMargin * 2) // Actual QR data area (29x29)
+      
+      // Calculate image size relative to the QR data area
+      const calculatedImageSize = qrDataSize * (imageSize / 100)
+      const margin = 1 // Small margin around the image in QR coordinates
       const boxSize = calculatedImageSize + (margin * 2)
-      const boxX = (qrSize - boxSize) / 2
-      const boxY = (qrSize - boxSize) / 2
+      
+      // Center the box in the QR data area (not the entire 33x33)
+      const boxX = qrMargin + (qrDataSize - boxSize) / 2
+      const boxY = qrMargin + (qrDataSize - boxSize) / 2
       const imageX = boxX + margin
       const imageY = boxY + margin
       
diff --git a/test-centering.html b/test-centering.html
new file mode 100644
index 0000000..0a27cb4
--- /dev/null
+++ b/test-centering.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Centering Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .test-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        .qr-display {
+            text-align: center;
+            margin-top: 15px;
+        }
+        .qr-display img {
+            max-width: 300px;
+            border: 1px solid #ccc;
+        }
+        button {
+            background-color: #007bff;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .info {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <h1>QR Code Centering Test</h1>
+    
+    <div class="test-section">
+        <h2>Test 1: Basic QR Code with Custom Image</h2>
+        <div class="info">
+            This test generates a QR code with a custom image to verify centering.
+        </div>
+        <button onclick="testBasicQR()">Generate QR Code with Image</button>
+        <button onclick="exportTestSVG()">Export as SVG</button>
+        <div class="qr-display" id="test1-display"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Test 2: Different Image Sizes</h2>
+        <div class="info">
+            Test different image sizes to ensure centering works at all sizes.
+        </div>
+        <button onclick="testSmallImage()">Small Image (10%)</button>
+        <button onclick="testMediumImage()">Medium Image (20%)</button>
+        <button onclick="testLargeImage()">Large Image (30%)</button>
+        <div class="qr-display" id="test2-display"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Test 3: Custom Colors</h2>
+        <div class="info">
+            Test with different colors to ensure visibility.
+        </div>
+        <button onclick="testCustomColors()">Generate with Custom Colors</button>
+        <div class="qr-display" id="test3-display"></div>
+    </div>
+
+    <!-- Load the standalone bundle -->
+    <script src="dist/qr-code-utils.iife.js"></script>
+    
+    <script>
+        // Create a simple test image (colored square)
+        function createTestImage() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 100;
+            canvas.height = 100;
+            const ctx = canvas.getContext('2d');
+            
+            // Create a gradient background
+            const gradient = ctx.createLinearGradient(0, 0, 100, 100);
+            gradient.addColorStop(0, '#ff6b6b');
+            gradient.addColorStop(0.5, '#4ecdc4');
+            gradient.addColorStop(1, '#45b7d1');
+            
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, 100, 100);
+            
+            // Add some text
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 16px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('TEST', 50, 50);
+            
+            return canvas.toDataURL('image/png');
+        }
+
+        const testImageUrl = createTestImage();
+
+        async function testBasicQR() {
+            const display = document.getElementById('test1-display');
+            display.innerHTML = '<p>Generating...</p>';
+            
+            try {
+                const qrCode = await window.QRCodeUtils.generateQRCode('https://example.com', '#000000', '#FFFFFF');
+                const qrWithImage = await window.QRCodeUtils.addImageToQRCode(qrCode, testImageUrl, 20);
+                
+                display.innerHTML = `
+                    <h3>QR Code with Custom Image (20% size):</h3>
+                    <img src="${qrWithImage}" alt="QR Code with Image">
+                `;
+            } catch (error) {
+                console.error('Error:', error);
+                display.innerHTML = '<p style="color: red;">Error generating QR code</p>';
+            }
+        }
+
+        async function exportTestSVG() {
+            try {
+                const svgContent = await window.QRCodeUtils.generateCompleteSVGQRCode(
+                    'https://example.com',
+                    testImageUrl,
+                    20,
+                    '#000000',
+                    '#FFFFFF'
+                );
+                
+                if (svgContent) {
+                    window.QRCodeUtils.downloadSVG(svgContent, 'test-qrcode.svg');
+                }
+            } catch (error) {
+                console.error('Error exporting SVG:', error);
+                alert('Error exporting SVG');
+            }
+        }
+
+        async function testSmallImage() {
+            await testImageSize(10, 'test2-display');
+        }
+
+        async function testMediumImage() {
+            await testImageSize(20, 'test2-display');
+        }
+
+        async function testLargeImage() {
+            await testImageSize(30, 'test2-display');
+        }
+
+        async function testImageSize(size, displayId) {
+            const display = document.getElementById(displayId);
+            display.innerHTML = '<p>Generating...</p>';
+            
+            try {
+                const qrCode = await window.QRCodeUtils.generateQRCode('https://example.com', '#000000', '#FFFFFF');
+                const qrWithImage = await window.QRCodeUtils.addImageToQRCode(qrCode, testImageUrl, size);
+                
+                display.innerHTML = `
+                    <h3>QR Code with ${size}% Image Size:</h3>
+                    <img src="${qrWithImage}" alt="QR Code with Image">
+                `;
+            } catch (error) {
+                console.error('Error:', error);
+                display.innerHTML = '<p style="color: red;">Error generating QR code</p>';
+            }
+        }
+
+        async function testCustomColors() {
+            const display = document.getElementById('test3-display');
+            display.innerHTML = '<p>Generating...</p>';
+            
+            try {
+                const qrCode = await window.QRCodeUtils.generateQRCode('https://example.com', '#1a1a1a', '#f0f0f0');
+                const qrWithImage = await window.QRCodeUtils.addImageToQRCode(qrCode, testImageUrl, 20);
+                
+                display.innerHTML = `
+                    <h3>QR Code with Custom Colors:</h3>
+                    <img src="${qrWithImage}" alt="QR Code with Image">
+                `;
+            } catch (error) {
+                console.error('Error:', error);
+                display.innerHTML = '<p style="color: red;">Error generating QR code</p>';
+            }
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('QRCodeUtils loaded:', window.QRCodeUtils);
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file
