diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 5032ec1..1e800e8 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -261,8 +261,23 @@ const Layout = ({ children }) => {
 						yColors: themeConfig.login.yColors,
 					});
 
-					// Render to canvas
-					pattern.toCanvas(bgCanvasRef.current);
+					// Render to canvas using SVG (browser-compatible)
+					const svg = pattern.toSVG();
+					const ctx = bgCanvasRef.current.getContext("2d");
+					const img = new Image();
+					const blob = new Blob([svg], { type: "image/svg+xml" });
+					const url = URL.createObjectURL(blob);
+					img.onload = () => {
+						ctx.drawImage(
+							img,
+							0,
+							0,
+							bgCanvasRef.current.width,
+							bgCanvasRef.current.height,
+						);
+						URL.revokeObjectURL(url);
+					};
+					img.src = url;
 				}
 			} catch (error) {
 				// Canvas/trianglify not available, skip background generation
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 9979476..00705a1 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -77,8 +77,23 @@ const Login = () => {
 						yColors: themeConfig.login.yColors,
 					});
 
-					// Render to canvas
-					pattern.toCanvas(canvasRef.current);
+					// Render to canvas using SVG (browser-compatible)
+					const svg = pattern.toSVG();
+					const ctx = canvasRef.current.getContext("2d");
+					const img = new Image();
+					const blob = new Blob([svg], { type: "image/svg+xml" });
+					const url = URL.createObjectURL(blob);
+					img.onload = () => {
+						ctx.drawImage(
+							img,
+							0,
+							0,
+							canvasRef.current.width,
+							canvasRef.current.height,
+						);
+						URL.revokeObjectURL(url);
+					};
+					img.src = url;
 				}
 			} catch (error) {
 				// Canvas/trianglify not available, skip background generation