diff --git a/client/package-lock.json b/client/package-lock.json
index c1a193a..c2e41ff 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "fabric": "^7.0.0-beta1",
         "lucide-react": "^0.542.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -60,6 +61,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -352,6 +374,121 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
@@ -2408,6 +2545,16 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2545,6 +2692,27 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.19.tgz",
@@ -2567,6 +2735,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2624,6 +2804,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2677,6 +2882,21 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.0.tgz",
+      "integrity": "sha512-jk0GxrLtUEmW/TmFsk2WghvgHe8B0pxGilqCL21y8lHkPUGa6FTsnCNtHPOzT8O3y+N+m3espawV80bbBlgfTA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2730,6 +2950,13 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -2839,6 +3066,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2855,11 +3096,25 @@
         "url": "https://github.com/saadeghi/daisyui?sponsor=1"
       }
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2873,6 +3128,39 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2889,6 +3177,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2934,6 +3232,16 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/engine.io-client": {
       "version": "6.6.3",
       "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
@@ -2973,6 +3281,19 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3260,6 +3581,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fabric": {
+      "version": "7.0.0-beta1",
+      "resolved": "https://registry.npmjs.org/fabric/-/fabric-7.0.0-beta1.tgz",
+      "integrity": "sha512-OkrqoN3jv/YgQliF2Qmg23Tz+t7fU4EgHWef2lgjU3LTE+aGRc7QQPXm9ydzOuLd7iYlTMRTdQH07ztTAN9Q5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "canvas": "^3.1.2",
+        "jsdom": "^26.1.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3447,6 +3791,13 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3517,6 +3868,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -3673,38 +4031,113 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
       "engines": {
-        "node": ">= 4"
+        "node": ">=18"
       }
     },
-    "node_modules/immer": {
-      "version": "10.1.3",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.3.tgz",
-      "integrity": "sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==",
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
       }
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
+        "agent-base": "^7.1.2",
+        "debug": "4"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.3.tgz",
+      "integrity": "sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -3720,6 +4153,20 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3786,6 +4233,13 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3836,6 +4290,68 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -4019,6 +4535,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4032,6 +4561,16 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -4041,6 +4580,13 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4076,6 +4622,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -4083,6 +4636,39 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-abi": {
+      "version": "3.78.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.78.0.tgz",
+      "integrity": "sha512-E2wEyrgX/CqvicaQYU3Ze1PFGjc4QYPGsjUrlYkqAE0WjHEZwgOsGMPMzkMse4LjJbDmaEuDX3CM036j5K2DSQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.26",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz",
@@ -4109,6 +4695,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.22",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.22.tgz",
+      "integrity": "sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4127,6 +4720,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4196,6 +4799,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4435,6 +5051,33 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4451,11 +5094,22 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4481,6 +5135,32 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -4615,6 +5295,21 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4739,6 +5434,13 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4762,6 +5464,47 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -4817,6 +5560,53 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
@@ -4898,6 +5688,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -5054,6 +5854,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -5110,6 +5917,36 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
+      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -5179,6 +6016,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5191,6 +6048,32 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -5210,6 +6093,19 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5430,6 +6326,66 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5543,6 +6499,13 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/ws": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
@@ -5564,6 +6527,23 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/xmlhttprequest-ssl": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
diff --git a/client/package.json b/client/package.json
index ddf1096..b582207 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "fabric": "^7.0.0-beta1",
     "lucide-react": "^0.542.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/client/src/components/Main/MainContent.tsx b/client/src/components/Main/MainContent.tsx
index 3653447..9649817 100644
--- a/client/src/components/Main/MainContent.tsx
+++ b/client/src/components/Main/MainContent.tsx
@@ -1,17 +1,14 @@
-import React, { useState, useEffect } from "react";
-import {
-  Info,
-  MessageSquare,
-  Settings,
-  BookOpen,
-  LayoutGrid,
-} from "lucide-react";
+import { useState, useEffect } from "react";
+import { BookOpen } from "lucide-react";
 import type { StudyRoom } from "@/config/schema/StudyRoom";
 import { RoomInfoPanel } from "@/components/Room/RoomInfoPanel";
 import { WelcomePlaceholder } from "@/components/common/WelcomePlaceHolder";
 import { PublicRoomPreview } from "../Room/PublicRoomPreview";
 import { EditRoomPanel } from "../Room/EditRoomModal";
 import ChatPanel from "../chat/ChatPanel";
+import { MainContentHeader } from "./MainContentHeader";
+import Whiteboard from "../whiteboard/Whiteboard";
+import { useSocketMessages } from "@/hooks/useSocketMessages";
 
 interface MainContentProps {
   selectedRoom: StudyRoom | null;
@@ -32,6 +29,8 @@ export function MainContent({
     "chat" | "info" | "whiteboard" | "resourceHub" | "settings"
   >("chat");
 
+  useSocketMessages();
+
   useEffect(() => {
     setMainContentTab("chat");
   }, [selectedRoom?._id]);
@@ -69,19 +68,15 @@ export function MainContent({
         canEdit={canEdit}
       />
 
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-hidden">
         {mainContentTab === "chat" && <ChatPanel />}
         {mainContentTab === "info" && userData && (
           <RoomInfoPanel room={selectedRoom} userId={userData._id} />
         )}
         {mainContentTab === "whiteboard" && (
-          <Placeholder
-            icon={
-              <LayoutGrid className="mx-auto size-10 text-emerald-500 mb-3" />
-            }
-            title="Whiteboard Space"
-            description="Collaborative workspace area will appear here soon."
-          />
+          <div className="w-full h-full">
+            <Whiteboard roomId={selectedRoom._id} />
+          </div>
         )}
         {mainContentTab === "resourceHub" && (
           <Placeholder
@@ -102,108 +97,6 @@ export function MainContent({
   );
 }
 
-function MainContentHeader({
-  roomName,
-  roomImage,
-  mainContentTab,
-  setMainContentTab,
-  canEdit,
-}: {
-  roomName: string;
-  roomImage?: string;
-  mainContentTab: "chat" | "info" | "whiteboard" | "resourceHub" | "settings";
-  setMainContentTab: (
-    tab: "chat" | "info" | "whiteboard" | "resourceHub" | "settings"
-  ) => void;
-  canEdit: boolean;
-}) {
-  const tabs = [
-    { key: "chat", label: "Chat", icon: <MessageSquare className="size-4" /> },
-    {
-      key: "whiteboard",
-      label: "Whiteboard",
-      icon: <LayoutGrid className="size-4" />,
-    },
-    {
-      key: "resourceHub",
-      label: "Resources",
-      icon: <BookOpen className="size-4" />,
-    },
-    { key: "info", label: "Info", icon: <Info className="size-4" /> },
-  ];
-
-  if (canEdit) {
-    tabs.push({
-      key: "settings",
-      label: "Settings",
-      icon: <Settings className="size-4" />,
-    });
-  }
-
-  return (
-    <div className="px-6 py-4 bg-neutral-900 border-b border-emerald-900/40 flex justify-between items-center shadow-sm sticky top-0 z-20">
-      <div
-        className="flex items-center gap-4 flex-1 min-w-0"
-        onClick={() => {
-          if (mainContentTab === "info") {
-            setMainContentTab("chat");
-          } else {
-            setMainContentTab("info");
-          }
-        }}
-      >
-        <div className="avatar">
-          <div className="w-10 h-10 rounded-xl overflow-hidden bg-emerald-950 ring-1 ring-emerald-700/40">
-            {roomImage ? (
-              <img
-                src={roomImage}
-                alt={roomName}
-                className="object-cover w-full h-full"
-              />
-            ) : (
-              <div className="flex items-center justify-center h-full w-full text-emerald-400 font-semibold">
-                {roomName.substring(0, 2).toUpperCase()}
-              </div>
-            )}
-          </div>
-        </div>
-        <h2 className="font-bold text-lg truncate text-emerald-100">
-          {roomName}
-        </h2>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <div className="inline-flex items-center gap-1 p-1 bg-neutral-800 rounded-xl border border-emerald-800/40 shadow-inner">
-          {tabs.map((tab) => (
-            <button
-              key={tab.key}
-              type="button"
-              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
-                mainContentTab === tab.key
-                  ? "bg-emerald-600 text-white shadow-md"
-                  : "text-emerald-300 hover:text-white hover:bg-emerald-800/40"
-              }`}
-              onClick={() =>
-                setMainContentTab(
-                  tab.key as
-                    | "chat"
-                    | "info"
-                    | "whiteboard"
-                    | "resourceHub"
-                    | "settings"
-                )
-              }
-            >
-              {tab.icon}
-              <span>{tab.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function Placeholder({
   icon,
   title,
diff --git a/client/src/components/Main/MainContentHeader.tsx b/client/src/components/Main/MainContentHeader.tsx
new file mode 100644
index 0000000..699f028
--- /dev/null
+++ b/client/src/components/Main/MainContentHeader.tsx
@@ -0,0 +1,103 @@
+import { BookOpen, Info, LayoutGrid, MessageSquare, Settings } from "lucide-react";
+
+export function MainContentHeader({
+  roomName,
+  roomImage,
+  mainContentTab,
+  setMainContentTab,
+  canEdit,
+}: {
+  roomName: string;
+  roomImage?: string;
+  mainContentTab: "chat" | "info" | "whiteboard" | "resourceHub" | "settings";
+  setMainContentTab: (
+    tab: "chat" | "info" | "whiteboard" | "resourceHub" | "settings"
+  ) => void;
+  canEdit: boolean;
+}) {
+  const tabs = [
+    { key: "chat", label: "Chat", icon: <MessageSquare className="size-4" /> },
+    {
+      key: "whiteboard",
+      label: "Whiteboard",
+      icon: <LayoutGrid className="size-4" />,
+    },
+    {
+      key: "resourceHub",
+      label: "Resources",
+      icon: <BookOpen className="size-4" />,
+    },
+    { key: "info", label: "Info", icon: <Info className="size-4" /> },
+  ];
+
+  if (canEdit) {
+    tabs.push({
+      key: "settings",
+      label: "Settings",
+      icon: <Settings className="size-4" />,
+    });
+  }
+
+  return (
+    <div className="px-6 py-4 bg-neutral-900 border-b border-emerald-900/40 flex justify-between items-center shadow-sm sticky top-0 z-20">
+      <div
+        className="flex items-center gap-4 flex-1 min-w-0"
+        onClick={() => {
+          if (mainContentTab === "info") {
+            setMainContentTab("chat");
+          } else {
+            setMainContentTab("info");
+          }
+        }}
+      >
+        <div className="avatar">
+          <div className="w-10 h-10 rounded-xl overflow-hidden bg-emerald-950 ring-1 ring-emerald-700/40">
+            {roomImage ? (
+              <img
+                src={roomImage}
+                alt={roomName}
+                className="object-cover w-full h-full"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full w-full text-emerald-400 font-semibold">
+                {roomName.substring(0, 2).toUpperCase()}
+              </div>
+            )}
+          </div>
+        </div>
+        <h2 className="font-bold text-lg truncate text-emerald-100">
+          {roomName}
+        </h2>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <div className="inline-flex items-center gap-1 p-1 bg-neutral-800 rounded-xl border border-emerald-800/40 shadow-inner">
+          {tabs.map((tab) => (
+            <button
+              key={tab.key}
+              type="button"
+              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                mainContentTab === tab.key
+                  ? "bg-emerald-600 text-white shadow-md"
+                  : "text-emerald-300 hover:text-white hover:bg-emerald-800/40"
+              }`}
+              onClick={() =>
+                setMainContentTab(
+                  tab.key as
+                    | "chat"
+                    | "info"
+                    | "whiteboard"
+                    | "resourceHub"
+                    | "settings"
+                )
+              }
+            >
+              {tab.icon}
+              <span>{tab.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/chat/ChatPanel.tsx b/client/src/components/chat/ChatPanel.tsx
index 08b5177..dacf2f1 100644
--- a/client/src/components/chat/ChatPanel.tsx
+++ b/client/src/components/chat/ChatPanel.tsx
@@ -2,25 +2,26 @@ import React, { useEffect, useRef, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import MessageBubble from "./MessageBubble";
 import type { RootState } from "@/redux/store";
-import { useSocketMessages } from "@/hooks/useSocketMessages";
 import { getMessagesOfRoom } from "@/api/message";
 import type { Message } from "@/config/schema/Message";
 import { setInitialMessages } from "@/redux/slices/roomSlice";
 import ChatInput from "./ChatInput";
 
+const EMPTY_MESSAGES: Message[] = [];
+
 const ChatPanel: React.FC = () => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  useSocketMessages();
-
   const selectedRoom = useSelector(
     (state: RootState) => state.room.selectedRoom
   );
   const messages: Message[] = useSelector((state: RootState) =>
-    selectedRoom ? state.room.messages[selectedRoom._id] || [] : []
+    selectedRoom
+      ? state.room.messages[selectedRoom._id] || EMPTY_MESSAGES
+      : EMPTY_MESSAGES
   );
   const { userData } = useSelector((state: RootState) => state.user);
 
@@ -38,7 +39,6 @@ const ChatPanel: React.FC = () => {
             })
           );
         } catch (err) {
-          console.error("Failed to fetch initial messages:", err);
           setError("Failed to load messages.");
         } finally {
           setIsLoading(false);
diff --git a/client/src/components/whiteboard/Whiteboard.tsx b/client/src/components/whiteboard/Whiteboard.tsx
new file mode 100644
index 0000000..d3134a7
--- /dev/null
+++ b/client/src/components/whiteboard/Whiteboard.tsx
@@ -0,0 +1,262 @@
+import React, { useRef, useEffect, useState } from "react";
+import * as fabric from "fabric";
+import { socket } from "@/config/socket";
+import { Minus, Plus, Trash2, MousePointer, Pencil } from "lucide-react";
+import toast from "react-hot-toast";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/redux/store";
+
+interface WhiteboardProps {
+  roomId: string;
+}
+
+const Whiteboard: React.FC<WhiteboardProps> = ({ roomId }) => {
+  const { selectedRoom } = useSelector((state: RootState) => state.room);
+  const { userData } = useSelector((state: RootState) => state.user);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fabricCanvasRef = useRef<fabric.Canvas | null>(null);
+  const pendingStateRef = useRef<string | null>(null);
+  const [isDrawingMode, setIsDrawingMode] = useState(true);
+  const [brushColor, setBrushColor] = useState("#000000");
+  const [brushWidth, setBrushWidth] = useState(3);
+
+  useEffect(() => {
+    const handleDrawing = async (data: any) => {
+      const payload = data.payload || data;
+      const incomingRoomId = data.roomId;
+
+      if (incomingRoomId && incomingRoomId !== roomId) return;
+
+      const canvas = fabricCanvasRef.current;
+      if (!canvas) return;
+
+      try {
+        const objects = await fabric.util.enlivenObjects([payload]);
+
+        if (objects && objects[0]) {
+          const obj = objects[0] as fabric.FabricObject;
+          obj.selectable = false;
+          obj.evented = false;
+          canvas.add(obj);
+          canvas.renderAll();
+        }
+      } catch (error) {
+        toast.error("Canvas rendering failed. Please reload");
+      }
+    };
+
+    const handleLoadState = async (stateJson: string) => {
+      const canvas = fabricCanvasRef.current;
+
+      if (!canvas) {
+        pendingStateRef.current = stateJson;
+        return;
+      }
+
+      try {
+        if (!stateJson || stateJson.trim() === "") {
+          return;
+        }
+
+        const stateObj = JSON.parse(stateJson);
+
+        canvas.clear();
+        await canvas.loadFromJSON(stateObj);
+        canvas.renderAll();
+      } catch (error) {
+        toast.error("Failed to load whiteboard state");
+      }
+    };
+
+    const handleClearWhiteboard = () => {
+      const canvas = fabricCanvasRef.current;
+      if (canvas) {
+        canvas.clear();
+        canvas.backgroundColor = "#ffffff";
+        canvas.renderAll();
+      }
+    };
+
+    socket.on("drawing", handleDrawing);
+    socket.on("load-whiteboard-state", handleLoadState);
+    socket.on("clear-whiteboard", handleClearWhiteboard);
+    socket.emit("get-whiteboard-state", { roomId: roomId });
+
+    return () => {
+      socket.off("drawing", handleDrawing);
+      socket.off("load-whiteboard-state", handleLoadState);
+      socket.off("clear-whiteboard", handleClearWhiteboard);
+    };
+  }, [roomId]);
+
+  useEffect(() => {
+    if (!canvasRef.current || !canvasRef.current.parentElement) return;
+
+    const parent = canvasRef.current.parentElement;
+    const width = parent.clientWidth;
+    const height = parent.clientHeight;
+
+    const canvas = new fabric.Canvas(canvasRef.current, {
+      isDrawingMode: true,
+      width: width,
+      height: height,
+      backgroundColor: "#ffffff",
+    });
+    fabricCanvasRef.current = canvas;
+
+    const brush = new fabric.PencilBrush(canvas);
+    brush.color = brushColor;
+    brush.width = brushWidth;
+    canvas.freeDrawingBrush = brush;
+
+    const handlePathCreated = (e: any) => {
+      const pathObject = e.path;
+      if (!pathObject) return;
+
+      const pathData = pathObject.toObject();
+      socket.emit("drawing", {
+        roomId: roomId,
+        payload: pathData,
+      });
+    };
+
+    canvas.on("path:created", handlePathCreated);
+
+    if (pendingStateRef.current) {
+      (async () => {
+        try {
+          const stateObj = JSON.parse(pendingStateRef.current!);
+          await canvas.loadFromJSON(stateObj);
+          canvas.renderAll();
+          pendingStateRef.current = null;
+        } catch (error) {
+          toast.error("Error loading pending state");
+        }
+      })();
+    }
+
+    return () => {
+      canvas.off("path:created", handlePathCreated);
+      canvas.dispose();
+      fabricCanvasRef.current = null;
+    };
+  }, [roomId]);
+
+  useEffect(() => {
+    const canvas = fabricCanvasRef.current;
+    if (canvas) {
+      canvas.isDrawingMode = isDrawingMode;
+      if (canvas.freeDrawingBrush) {
+        canvas.freeDrawingBrush.color = brushColor;
+        canvas.freeDrawingBrush.width = brushWidth;
+      }
+    }
+  }, [isDrawingMode, brushColor, brushWidth]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const canvas = fabricCanvasRef.current;
+      const parent = canvasRef.current?.parentElement;
+      if (canvas && parent) {
+        canvas.setDimensions({
+          width: parent.clientWidth,
+          height: parent.clientHeight,
+        });
+        canvas.renderAll();
+      }
+    };
+
+    let resizeTimeout: NodeJS.Timeout;
+    const debouncedResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(handleResize, 100);
+    };
+
+    window.addEventListener("resize", debouncedResize);
+    handleResize();
+
+    return () => window.removeEventListener("resize", debouncedResize);
+  }, []);
+
+  const handleClearCanvas = () => {
+    const canvas = fabricCanvasRef.current;
+    if (canvas) {
+      canvas.clear();
+      canvas.backgroundColor = "#ffffff";
+      canvas.renderAll();
+      socket.emit("clear-whiteboard", { roomId, userId: userData?._id });
+    }
+  };
+
+  return (
+    <div className="relative w-full h-full bg-gray-100 overflow-hidden">
+      <div className="absolute top-2 left-2 z-10 bg-base-100 p-2 rounded-lg shadow-md flex gap-1 items-center flex-wrap">
+        <button
+          className={`btn btn-sm btn-square ${
+            isDrawingMode ? "btn-active btn-primary" : "btn-ghost"
+          }`}
+          onClick={() => setIsDrawingMode(true)}
+          title="Pencil"
+        >
+          <Pencil size={16} />
+        </button>
+        <button
+          className={`btn btn-sm btn-square ${
+            !isDrawingMode ? "btn-active btn-primary" : "btn-ghost"
+          }`}
+          onClick={() => setIsDrawingMode(false)}
+          title="Select/Move"
+        >
+          <MousePointer size={16} />
+        </button>
+        <div className="divider divider-horizontal mx-0"></div>
+        <input
+          type="color"
+          value={brushColor}
+          onChange={(e) => setBrushColor(e.target.value)}
+          className="w-8 h-8 p-0 border border-base-300 rounded cursor-pointer"
+          title="Brush Color"
+        />
+        <div className="flex items-center gap-1">
+          <button
+            className="btn btn-xs btn-ghost btn-circle"
+            onClick={() => setBrushWidth(Math.max(1, brushWidth - 1))}
+            title="Decrease Size"
+          >
+            <Minus size={12} />
+          </button>
+          <input
+            type="range"
+            min="1"
+            max="30"
+            value={brushWidth}
+            onChange={(e) => setBrushWidth(parseInt(e.target.value, 10))}
+            className="range range-xs w-20 mx-1"
+            title={`Brush Size: ${brushWidth}`}
+          />
+          <button
+            className="btn btn-xs btn-ghost btn-circle"
+            onClick={() => setBrushWidth(Math.min(50, brushWidth + 1))}
+            title="Increase Size"
+          >
+            <Plus size={12} />
+          </button>
+          <span className="text-xs w-4 text-center">{brushWidth}</span>
+        </div>
+        <div className="divider divider-horizontal mx-0"></div>
+        {selectedRoom?.owner._id === userData?._id && (
+          <button
+            className="btn btn-sm btn-ghost text-error"
+            onClick={handleClearCanvas}
+            title="Clear Canvas"
+          >
+            <Trash2 size={16} /> Clear
+          </button>
+        )}
+      </div>
+      <canvas ref={canvasRef} />
+    </div>
+  );
+};
+
+export default Whiteboard;
diff --git a/client/src/config/axiosConfig.ts b/client/src/config/axiosConfig.ts
index f232b17..c7643f0 100644
--- a/client/src/config/axiosConfig.ts
+++ b/client/src/config/axiosConfig.ts
@@ -3,8 +3,7 @@ import axios, {
   type InternalAxiosRequestConfig,
 } from "axios";
 
-const API_BASE_URL =
-  import.meta.env.API_BASE_URL || "https://studi-io-5w1z.onrender.com";
+const API_BASE_URL = "http://localhost:8000";
 
 const api: AxiosInstance = axios.create({
   baseURL: API_BASE_URL,
diff --git a/client/src/config/socket.ts b/client/src/config/socket.ts
index 6f379c5..dda6aea 100644
--- a/client/src/config/socket.ts
+++ b/client/src/config/socket.ts
@@ -1,6 +1,6 @@
 import { io, Socket } from "socket.io-client";
 
-const SOCKET_URL = import.meta.env.API_BASE_URL || "https://studi-io-5w1z.onrender.com";
+const SOCKET_URL = "http://localhost:8000";
 
 export const socket: Socket = io(SOCKET_URL, {
   autoConnect: false,
diff --git a/client/src/hooks/useSocketMessages.tsx b/client/src/hooks/useSocketMessages.tsx
index 7643b7c..ee1eda1 100644
--- a/client/src/hooks/useSocketMessages.tsx
+++ b/client/src/hooks/useSocketMessages.tsx
@@ -1,12 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { addMessage } from "@/redux/slices/roomSlice";
 import { socket } from "@/config/socket";
 import type { RootState } from "@/redux/store";
 import type { Message } from "@/config/schema/Message";
+import toast from "react-hot-toast";
 
 export const useSocketMessages = () => {
   const dispatch = useDispatch();
+  const currentRoomIdRef = useRef<string | null>(null);
 
   const { userData } = useSelector((state: RootState) => state.user);
   const selectedRoom = useSelector(
@@ -22,16 +24,16 @@ export const useSocketMessages = () => {
         })
       );
     };
-    socket.on("newMessage", handleNewMessage);
 
     const handleMessageError = (error: { message: string }) => {
-      console.error("Message error:", error.message);
+      toast.error(error.message);
     };
 
     const handleUserJoined = () => {};
 
     const handleUserLeft = () => {};
 
+    socket.on("newMessage", handleNewMessage);
     socket.on("messageError", handleMessageError);
     socket.on("user-joined", handleUserJoined);
     socket.on("user-left", handleUserLeft);
@@ -42,15 +44,31 @@ export const useSocketMessages = () => {
       socket.off("user-joined", handleUserJoined);
       socket.off("user-left", handleUserLeft);
     };
-  }, [dispatch]);
+  }, [dispatch, userData?._id]);
 
   useEffect(() => {
-    if (selectedRoom) {
-      socket.emit("join-room", selectedRoom._id);
+    const newRoomId = selectedRoom?._id;
 
-      return () => {
-        socket.emit("leave-room", selectedRoom._id);
-      };
+    if (newRoomId !== currentRoomIdRef.current) {
+      if (currentRoomIdRef.current) {
+        socket.emit("leave-room", currentRoomIdRef.current);
+      }
+
+      if (newRoomId) {
+        socket.emit("join-room", newRoomId);
+        currentRoomIdRef.current = newRoomId;
+      } else {
+        currentRoomIdRef.current = null;
+      }
     }
-  }, [selectedRoom]);
+  }, [selectedRoom?._id]);
+
+  useEffect(() => {
+    return () => {
+      if (currentRoomIdRef.current) {
+        socket.emit("leave-room", currentRoomIdRef.current);
+        currentRoomIdRef.current = null;
+      }
+    };
+  }, []);
 };
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
index c74c05c..ca1d856 100644
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -8,7 +8,7 @@ import {
   MessageSquare,
   LayoutDashboard,
 } from "lucide-react";
-import logoImage from "../assets/logo.png"; 
+import logoImage from "../assets/logo.png";
 import heroImage from "../assets/study-collabaration.png";
 import { signIn } from "@/api/auth";
 import { useDispatch } from "react-redux";
@@ -53,12 +53,16 @@ export default function LoginPage() {
 
       if (error instanceof AxiosError) {
         if (
-          error.response?.status === 409 &&
+          error.response?.status === 403 &&
           error.response?.data?.message === "Please verify your email first"
         ) {
           errorMessage = "Please verify your email first.";
           toast.error(errorMessage, { id: loadingToastId });
-          navigate("/verify-email");
+          navigate("/verify-email", {
+            state: {
+              email: isEmail(loginData.identifier) ? loginData.identifier : "",
+            },
+          });
           return;
         } else if (error.response?.data?.message) {
           errorMessage = error.response.data.message;
@@ -69,6 +73,23 @@ export default function LoginPage() {
     }
   };
 
+  const isEmail = (email: string): boolean => {
+    if (!email || typeof email !== "string") {
+      return false;
+    }
+
+    const trimmedEmail = email.trim();
+
+    if (trimmedEmail.length === 0 || trimmedEmail.length > 254) {
+      return false;
+    }
+
+    const emailRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+    return emailRegex.test(trimmedEmail);
+  };
+
   const features = [
     { text: "Dynamic Shared Whiteboards", icon: Lightbulb },
     { text: "Real-time Collaborative Chat", icon: MessageSquare },
@@ -86,7 +107,7 @@ export default function LoginPage() {
               src={logoImage}
               alt="Studi.io Logo"
               className="object-contain"
-              style={{ width: "200px", height: "auto" }} 
+              style={{ width: "200px", height: "auto" }}
             />
           </div>
 
diff --git a/server/handler/socketHandler.js b/server/handler/socketHandler.js
index 1c2695b..608eba6 100644
--- a/server/handler/socketHandler.js
+++ b/server/handler/socketHandler.js
@@ -16,7 +16,9 @@ const setupSocketHandlers = (io) => {
           return;
         }
 
-        const room = await StudyRoom.findById(roomId).select("members");
+        const room = await StudyRoom.findById(roomId).select(
+          "members whiteboardState"
+        );
 
         if (!room) {
           socket.emit("error", { message: "Room not found" });
@@ -42,12 +44,82 @@ const setupSocketHandlers = (io) => {
           userProfileImage: socket.user.profileImage,
           roomId: roomId,
         });
+
+        if (room.whiteboardState && room.whiteboardState.trim() !== "") {
+          socket.emit("load-whiteboard-state", room.whiteboardState);
+        }
       } catch (error) {
         console.error("Error joining room:", error);
         socket.emit("error", { message: "Failed to join room" });
       }
     });
 
+    socket.on("get-whiteboard-state", async (data) => {
+      try {
+        const { roomId } = data;
+        if (!roomId) return;
+        const room = await StudyRoom.findById(roomId);
+        if (room && room.whiteboardState) {
+          socket.emit("load-whiteboard-state", room.whiteboardState);
+        } else {
+          socket.emit("load-whiteboard-state", "");
+        }
+      } catch (error) {
+        console.error("Failed to get whiteboard state:", error);
+      }
+    });
+    socket.on("drawing", async (data) => {
+      const { roomId, payload } = data;
+      if (!roomId || !payload) return;
+
+      try {
+        socket.to(roomId).emit("drawing", { roomId: roomId, payload: payload });
+
+        const room = await StudyRoom.findById(roomId);
+        if (!room) return;
+
+        let canvasState;
+        if (room.whiteboardState && room.whiteboardState.trim() !== "") {
+          try {
+            canvasState = JSON.parse(room.whiteboardState);
+          } catch {
+            canvasState = { version: "6.7.1", objects: [] };
+          }
+        } else {
+          canvasState = { version: "6.7.1", objects: [] };
+        }
+
+        if (!canvasState.objects) {
+          canvasState.objects = [];
+        }
+
+        canvasState.objects.push(payload);
+
+        room.whiteboardState = JSON.stringify(canvasState);
+        await room.save();
+
+      } catch (error) {
+        console.error("Error saving drawing:", error);
+      }
+    });
+
+    socket.on("clear-whiteboard", async (data) => {
+      const { roomId } = data;
+      if (!roomId) return;
+
+      try {
+        const room = await StudyRoom.findById(roomId);
+        if (!room) return;
+
+        room.whiteboardState = "";
+        await room.save();
+
+        io.to(roomId).emit("clear-whiteboard");
+      } catch (error) {
+        console.error("Error clearing whiteboard:", error);
+      }
+    });
+
     socket.on("sendMessage", async (data) => {
       const { roomId, content } = data;
       const senderId = socket.user._id;
@@ -91,7 +163,6 @@ const setupSocketHandlers = (io) => {
 
         await newMessage.save();
         await newMessage.populate("sender", "name profileImage username");
-
         io.to(roomId).emit("newMessage", newMessage);
       } catch (error) {
         console.error("Error saving/sending message:", error);