diff --git a/client/src/pages/canvas.tsx b/client/src/pages/canvas.tsx
index 664e663..b7a7db8 100644
--- a/client/src/pages/canvas.tsx
+++ b/client/src/pages/canvas.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { queryClient } from "@/lib/queryClient";
-import { Canvas } from "@/components/canvas";
+import { OptimizedCanvas } from "@/components/optimized-canvas";
 import { ColorPalette } from "@/components/color-palette";
 
 import { Button } from "@/components/ui/button";
@@ -31,7 +31,7 @@ export default function CanvasPage() {
 
   const { data: recentPlacements = [] } = useQuery<Pixel[]>({
     queryKey: ['/api/recent'],
-    refetchInterval: 5000, // Refresh every 5 seconds
+    refetchInterval: 10000, // Refresh every 10 seconds instead of 5
   });
 
   // WebSocket handling
@@ -42,11 +42,11 @@ export default function CanvasPage() {
         queryClient.invalidateQueries({ queryKey: ['/api/pixels'] });
         queryClient.invalidateQueries({ queryKey: ['/api/recent'] });
         
-        toast({
-          title: "Pixel placed",
-          description: `${message.data.username} placed a pixel at (${message.data.x}, ${message.data.y})`,
-        });
-        break;
+        //toast({
+        //  title: "Pixel placed",
+        //  description: `${message.data.username} placed a pixel at (${message.data.x}, ${message.data.y})`,
+        //  });
+        //break;
       
 
         
@@ -172,12 +172,11 @@ export default function CanvasPage() {
 
       {/* Main Canvas Area */}
       <div className="flex-1 flex overflow-hidden">
-        <Canvas
+        <OptimizedCanvas
           pixels={pixels}
           selectedColor={selectedColor}
           canvasWidth={config.canvasWidth}
           canvasHeight={config.canvasHeight}
-
           onPixelClick={handlePixelClick}
           cooldownActive={cooldownSeconds > 0}
         />