diff --git a/client/features/collab-editor.tsx b/client/features/collab-editor.tsx
index fda35e4..d475014 100644
--- a/client/features/collab-editor.tsx
+++ b/client/features/collab-editor.tsx
@@ -1,11 +1,14 @@
 import { HocuspocusProvider } from '@hocuspocus/provider'
-import Editor from '@monaco-editor/react'
+import Editor, { loader } from '@monaco-editor/react'
 import './collab-editor.css'
 
+import * as monaco from 'monaco-editor'
 import { IndexeddbPersistence } from 'y-indexeddb'
 import { MonacoBinding } from 'y-monaco'
 import * as Y from 'yjs'
 
+loader.config({ monaco })
+
 const DOC_NAME = 'collab-editor'
 const getRandomColor = () => Math.floor(Math.random() * 16777215).toString(16)
 const invertHex = (hex: string) => {
@@ -16,7 +19,7 @@ const createCssClass = (className: string, definition: string) => {
     return
   }
   const style = document.createElement('style')
-  style.type = 'text/css'
+
   style.innerHTML = `.${className} { ${definition} }`
   style.id = className
 
diff --git a/package.json b/package.json
index 8da5284..6767f18 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "fast-jwt": "^3.1.1",
     "fastify": "^4.18.0",
     "fastify-print-routes": "^2.1.0",
+    "monaco-editor": "^0.39.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d04de08..9056e0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ dependencies:
   fastify-print-routes:
     specifier: ^2.1.0
     version: 2.1.0
+  monaco-editor:
+    specifier: ^0.39.0
+    version: 0.39.0
   prettier:
     specifier: ^2.8.8
     version: 2.8.8