diff --git a/next.config.js b/next.config.js
index 18d1af8..69fb737 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,9 @@ import "./src/env.js";
 /** @type {import("next").NextConfig} */
 const config = {
   experimental: {
-    reactCompiler: true,
+    serverActions: {
+      bodySizeLimit: "2mb",
+    },
   },
 };
 
diff --git a/package.json b/package.json
index dd4d451..5358375 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,10 @@
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^1.7.2",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^4.1.3",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.3",
@@ -43,17 +40,13 @@
     "@tanstack/react-query": "^5.50.0",
     "@tanstack/react-table": "^8.21.2",
     "@tiptap/core": "^2.11.5",
-    "@tiptap/extension-color": "^2.11.5",
-    "@tiptap/extension-image": "^2.11.5",
-    "@tiptap/extension-list-item": "^2.11.5",
-    "@tiptap/extension-text-style": "^2.11.5",
-    "@tiptap/pm": "^2.11.5",
+    "@tiptap/extension-heading": "^2.11.5",
     "@tiptap/react": "^2.11.5",
-    "@tiptap/starter-kit": "^2.11.5",
     "@trpc/client": "^11.0.0-rc.446",
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
     "babel-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
+    "cheerio": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
@@ -63,11 +56,9 @@
     "next": "^15.0.1",
     "next-auth": "5.0.0-beta.25",
     "next-themes": "^0.4.4",
+    "novel": "^1.0.2",
     "postgres": "^3.4.4",
-    "prosemirror-state": "^1.4.3",
     "react": "^18.3.1",
-    "react-colorful": "^5.6.1",
-    "react-dnd": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-textarea-autosize": "^8.5.7",
@@ -76,7 +67,7 @@
     "superjson": "^2.2.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
-    "tiptap-extension-global-drag-handle": "^0.1.18",
+    "use-debounce": "^10.0.4",
     "zod": "^3.24.2"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac33a1d..f5f25fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,18 +11,6 @@ importers:
       '@auth/drizzle-adapter':
         specifier: ^1.7.2
         version: 1.8.0
-      '@dnd-kit/core':
-        specifier: ^6.3.1
-        version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@dnd-kit/modifiers':
-        specifier: ^9.0.0
-        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
-      '@dnd-kit/sortable':
-        specifier: ^10.0.0
-        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
-      '@dnd-kit/utilities':
-        specifier: ^3.2.2
-        version: 3.2.2(react@18.3.1)
       '@hookform/resolvers':
         specifier: ^4.1.3
         version: 4.1.3(react-hook-form@7.54.2(react@18.3.1))
@@ -32,6 +20,9 @@ importers:
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.6
         version: 1.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-aspect-ratio':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -77,27 +68,12 @@ importers:
       '@tiptap/core':
         specifier: ^2.11.5
         version: 2.11.5(@tiptap/pm@2.11.5)
-      '@tiptap/extension-color':
-        specifier: ^2.11.5
-        version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5)))
-      '@tiptap/extension-image':
+      '@tiptap/extension-heading':
         specifier: ^2.11.5
         version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
-      '@tiptap/extension-list-item':
-        specifier: ^2.11.5
-        version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
-      '@tiptap/extension-text-style':
-        specifier: ^2.11.5
-        version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
-      '@tiptap/pm':
-        specifier: ^2.11.5
-        version: 2.11.5
       '@tiptap/react':
         specifier: ^2.11.5
         version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tiptap/starter-kit':
-        specifier: ^2.11.5
-        version: 2.11.5
       '@trpc/client':
         specifier: ^11.0.0-rc.446
         version: 11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)
@@ -110,6 +86,9 @@ importers:
       babel-plugin-react-compiler:
         specifier: 19.0.0-beta-40c6c23-20250301
         version: 19.0.0-beta-40c6c23-20250301
+      cheerio:
+        specifier: ^1.0.0
+        version: 1.0.0
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -137,21 +116,15 @@ importers:
       next-themes:
         specifier: ^0.4.4
         version: 0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      novel:
+        specifier: ^1.0.2
+        version: 1.0.2(@tiptap/extension-code-block@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       postgres:
         specifier: ^3.4.4
         version: 3.4.5
-      prosemirror-state:
-        specifier: ^1.4.3
-        version: 1.4.3
       react:
         specifier: ^18.3.1
         version: 18.3.1
-      react-colorful:
-        specifier: ^5.6.1
-        version: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-dnd:
-        specifier: ^16.0.1
-        version: 16.0.1(@types/node@20.17.23)(@types/react@18.3.18)(react@18.3.1)
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
@@ -176,9 +149,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2)))
-      tiptap-extension-global-drag-handle:
-        specifier: ^0.1.18
-        version: 0.1.18
+      use-debounce:
+        specifier: ^10.0.4
+        version: 10.0.4(react@18.3.1)
       zod:
         specifier: ^3.24.2
         version: 3.24.2
@@ -291,41 +264,31 @@ packages:
     resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
     engines: {node: '>=6.9.0'}
 
+  '@cfcs/core@0.0.6':
+    resolution: {integrity: sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==}
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
-  '@dnd-kit/accessibility@3.1.1':
-    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@dnd-kit/core@6.3.1':
-    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@dnd-kit/modifiers@9.0.0':
-    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
-    peerDependencies:
-      '@dnd-kit/core': ^6.3.0
-      react: '>=16.8.0'
-
-  '@dnd-kit/sortable@10.0.0':
-    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
-    peerDependencies:
-      '@dnd-kit/core': ^6.3.0
-      react: '>=16.8.0'
-
-  '@dnd-kit/utilities@3.2.2':
-    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
-    peerDependencies:
-      react: '>=16.8.0'
+  '@daybrush/utils@1.13.0':
+    resolution: {integrity: sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==}
 
   '@drizzle-team/brocli@0.10.2':
     resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
 
+  '@egjs/agent@2.4.4':
+    resolution: {integrity: sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==}
+
+  '@egjs/children-differ@1.0.1':
+    resolution: {integrity: sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==}
+
+  '@egjs/component@3.0.5':
+    resolution: {integrity: sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==}
+
+  '@egjs/list-differ@1.0.1':
+    resolution: {integrity: sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==}
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -1060,6 +1023,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-aspect-ratio@1.1.2':
+    resolution: {integrity: sha512-TaJxYoCpxJ7vfEkv2PTNox/6zzmpKXT6ewvCuf2tTOIVN45/Jahhlld29Yw4pciOXS2Xq91/rSGEdmEnUWZCqA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-avatar@1.1.3':
     resolution: {integrity: sha512-Paen00T4P8L8gd9bNsRMw7Cbaz85oxiv+hzomsRZgFm2byltPFDtfcoqlWJ8GyZlIBWgLssJlzLCnKU0G0302g==}
     peerDependencies:
@@ -1573,15 +1549,6 @@ packages:
   '@radix-ui/rect@1.1.0':
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
-  '@react-dnd/asap@5.0.2':
-    resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==}
-
-  '@react-dnd/invariant@4.0.2':
-    resolution: {integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==}
-
-  '@react-dnd/shallowequal@4.0.2':
-    resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}
-
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
@@ -1591,6 +1558,15 @@ packages:
   '@rushstack/eslint-patch@1.10.5':
     resolution: {integrity: sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==}
 
+  '@scena/dragscroll@1.4.0':
+    resolution: {integrity: sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==}
+
+  '@scena/event-emitter@1.0.5':
+    resolution: {integrity: sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==}
+
+  '@scena/matrix@1.1.1':
+    resolution: {integrity: sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==}
+
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
@@ -1663,6 +1639,21 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-character-count@2.11.5':
+    resolution: {integrity: sha512-Da2VGb7ClmKwXdQdQC2735qylYD8/MQAPA0skPEcHxcDTDuI8ibyIDnMPnczgS/hR5g0TYE2DQp/dkhJXeovkQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code-block-lowlight@2.11.5':
+    resolution: {integrity: sha512-EIE+mAGsp8C69dI0Yyg+VH1x36rgyPJc93SfA7h4xFF6Oth18z4YhJtiLaZcwCMyOOVs2efApZ0R3/Fnz2VlqA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/extension-code-block': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      highlight.js: ^11
+      lowlight: ^2 || ^3
+
   '@tiptap/extension-code-block@2.11.5':
     resolution: {integrity: sha512-ksxMMvqLDlC+ftcQLynqZMdlJT1iHYZorXsXw/n+wuRd7YElkRkd6YWUX/Pq/njFY6lDjKiqFLEXBJB8nrzzBA==}
     peerDependencies:
@@ -1713,6 +1704,11 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-highlight@2.11.5':
+    resolution: {integrity: sha512-VBZfT869L9CiTLF8qr+3FBUtJcmlyUTECORNo0ceEiNDg4H6V9uNPwaROMXrWiQCc+DYVCOkx541QrXwNMzxlg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
   '@tiptap/extension-history@2.11.5':
     resolution: {integrity: sha512-b+wOS33Dz1azw6F1i9LFTEIJ/gUui0Jwz5ZvmVDpL2ZHBhq1Ui0/spTT+tuZOXq7Y/uCbKL8Liu4WoedIvhboQ==}
     peerDependencies:
@@ -1735,6 +1731,12 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-link@2.11.5':
+    resolution: {integrity: sha512-4Iu/aPzevbYpe50xDI0ZkqRa6nkZ9eF270Ue2qaF3Ab47nehj+9Jl78XXzo8+LTyFMnrETI73TAs1aC/IGySeQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
   '@tiptap/extension-list-item@2.11.5':
     resolution: {integrity: sha512-Mp5RD/pbkfW1vdc6xMVxXYcta73FOwLmblQlFNn/l/E5/X1DUSA4iGhgDDH4EWO3swbs03x2f7Zka/Xoj3+WLg==}
     peerDependencies:
@@ -1750,11 +1752,28 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-placeholder@2.11.5':
+    resolution: {integrity: sha512-Pr+0Ju/l2ZvXMd9VQxtaoSZbs0BBp1jbBDqwms88ctpyvQFRfLSfSkqudQcSHyw2ROOz2E31p/7I7fpI8Y0CLA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
   '@tiptap/extension-strike@2.11.5':
     resolution: {integrity: sha512-PVfUiCqrjvsLpbIoVlegSY8RlkR64F1Rr2RYmiybQfGbg+AkSZXDeO0eIrc03//4gua7D9DfIozHmAKv1KN3ow==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-task-item@2.11.5':
+    resolution: {integrity: sha512-Xvvww8cleM6fcNejP916vzhL31yJnAmuBvABsOV0kHGtAqkqUVCSDcN/1qjI4ihVNeIWEJBHDczjDfZzvLy1xA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-task-list@2.11.5':
+    resolution: {integrity: sha512-DJpIrBu/bjXYmyYoWQDH2GkpvRmizT9Fvbx5MscFYyfmSsYryD3vRBtCDz08gviwoRII+pFBrG4Ynb0XuQ7DsA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
   '@tiptap/extension-text-style@2.11.5':
     resolution: {integrity: sha512-YUmYl0gILSd/u/ZkOmNxjNXVw+mu8fpC2f8G4I4tLODm0zCx09j9DDEJXSrM5XX72nxJQqtSQsCpNKnL0hfeEQ==}
     peerDependencies:
@@ -1765,6 +1784,16 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
+  '@tiptap/extension-underline@2.11.5':
+    resolution: {integrity: sha512-YpWHXNIkSoRSuzT2cvgKpyJ2tTz3LzqkTM64uC+uTJ8cUkvXIWUWejJR42q8ma/mTlQe4lHff4IQ0Sf58Digtw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-youtube@2.11.5':
+    resolution: {integrity: sha512-9XEH/zx/FlL/liJsncstcze98C73iupCbWlhAfC8+9O0wDmHEwaFyLSj+5LDqozWwzFnJmFOy7uZXfOY90kWGg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
   '@tiptap/pm@2.11.5':
     resolution: {integrity: sha512-z9JFtqc5ZOsdQLd9vRnXfTCQ8v5ADAfRt9Nm7SqP6FUHII8E1hs38ACzf5xursmth/VonJYb5+73Pqxk1hGIPw==}
 
@@ -1779,6 +1808,12 @@ packages:
   '@tiptap/starter-kit@2.11.5':
     resolution: {integrity: sha512-SLI7Aj2ruU1t//6Mk8f+fqW+18uTqpdfLUJYgwu0CkqBckrkRZYZh6GVLk/02k3H2ki7QkFxiFbZrdbZdng0JA==}
 
+  '@tiptap/suggestion@2.11.5':
+    resolution: {integrity: sha512-uafwGgB5YuKX/xLRjnt2H5eA21I8HcNXpdbH4Du2gg3KM71RpUbkyjaV7KEMA/5qwCEo+sddlpuErj4wBycZ5Q==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
   '@trpc/client@11.0.0-rc.824':
     resolution: {integrity: sha512-3JMsgiMrCEeblrzu7ScTjipYaeEmegbnM5ZPmqqkPIbXcnth/TwH5tRr+nQbLSU/NGkWJWsjgEq7bM0BV17sJw==}
     peerDependencies:
@@ -1815,12 +1850,21 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1833,12 +1877,21 @@ packages:
   '@types/markdown-it@14.1.2':
     resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node@20.17.23':
     resolution: {integrity: sha512-8PCGZ1ZJbEZuYNTMqywO+Sj4vSKjSjT6Ua+6RFOYlEvIvKQABPtrNkoVSLSKDb4obYcMhspVKmsw8Cm10NFRUg==}
 
+  '@types/node@22.13.10':
+    resolution: {integrity: sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==}
+
   '@types/prop-types@15.7.14':
     resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
 
@@ -1850,6 +1903,12 @@ packages:
   '@types/react@18.3.18':
     resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/use-sync-external-store@0.0.6':
     resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
 
@@ -2014,6 +2073,9 @@ packages:
   babel-plugin-react-compiler@19.0.0-beta-40c6c23-20250301:
     resolution: {integrity: sha512-himtjPafvMbA7PYnV2L+jprpB3h4rhx/n5s4L3gC654FOUsmsv5n4p8d6ufvK2zqUQs4kTOjgT2b4wnuDU32CA==}
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2021,6 +2083,9 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -2061,10 +2126,32 @@ packages:
   caniuse-lite@1.0.30001702:
     resolution: {integrity: sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+
+  cheerio@1.0.0:
+    resolution: {integrity: sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==}
+    engines: {node: '>=18.17'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2085,6 +2172,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2099,10 +2192,17 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -2124,6 +2224,19 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+
+  css-styled@1.0.8:
+    resolution: {integrity: sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==}
+
+  css-to-mat@1.1.1:
+    resolution: {integrity: sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==}
+
+  css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2164,6 +2277,9 @@ packages:
       supports-color:
         optional: true
 
+  decode-named-character-reference@1.1.0:
+    resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -2175,6 +2291,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
@@ -2182,6 +2302,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -2192,9 +2315,6 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  dnd-core@16.0.1:
-    resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -2203,6 +2323,19 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv@16.4.7:
     resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
@@ -2313,6 +2446,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  encoding-sniffer@0.2.0:
+    resolution: {integrity: sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==}
+
   enhanced-resolve@5.18.1:
     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
@@ -2490,10 +2626,16 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2549,6 +2691,9 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  framework-utils@1.1.0:
+    resolution: {integrity: sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -2572,6 +2717,9 @@ packages:
     peerDependencies:
       next: '>=13.2.0'
 
+  gesto@1.19.4:
+    resolution: {integrity: sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -2652,8 +2800,25 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  htmlparser2@9.1.0:
+    resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
 
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
@@ -2674,10 +2839,19 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -2720,6 +2894,9 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2740,6 +2917,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -2756,6 +2936,10 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -2819,6 +3003,18 @@ packages:
   jose@6.0.8:
     resolution: {integrity: sha512-EyUPtOKyTYq+iMOszO42eobQllaIjJnwkZ2U93aJzNyPibCy7CEvT9UQnaCVB51IAd49gbNdCew1c0LcLTCB2g==}
 
+  jotai@2.12.2:
+    resolution: {integrity: sha512-oN8715y7MkjXlSrpyjlR887TOuc/NLZMs9gvgtfWH/JP47ChwO0lR2ijSwBvPMYyXRAPT+liIAhuBavluKGgtA==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=17.0.0'
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2843,6 +3039,16 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  katex@0.16.21:
+    resolution: {integrity: sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==}
+    hasBin: true
+
+  keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+
+  keycon@1.4.0:
+    resolution: {integrity: sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2867,6 +3073,9 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  linkifyjs@4.2.0:
+    resolution: {integrity: sha512-pCj3PrQyATaoTYKHrgWRF3SJwsm61udVh+vuls/Rl6SptiDhgE7ziUIudAedRY9QEfynmM7/RmLEfPUyw1HPCw==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2874,10 +3083,16 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -2897,6 +3112,30 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -2904,6 +3143,69 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -2983,6 +3285,14 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  novel@1.0.2:
+    resolution: {integrity: sha512-lyMtoBsRCqgrQaNhlc8Ngpp+npJEQjPoGBLcnYlEr8mEf+lXZV7/m6CbEpGRfma+HZQVlU3YJOs4gCmzbLG+ow==}
+    peerDependencies:
+      react: '>=18'
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
   oauth4webapi@3.3.0:
     resolution: {integrity: sha512-ZlozhPlFfobzh3hB72gnBFLjXpugl/dljz1fJSRdqaV2r3D5dmi5lg2QWI0LmUYuazmE+b5exsloEv6toUtw9g==}
 
@@ -3032,6 +3342,9 @@ packages:
   orderedmap@2.1.1:
     resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
 
+  overlap-area@1.1.0:
+    resolution: {integrity: sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -3051,6 +3364,18 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
+
+  parse5-parser-stream@7.1.2:
+    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
+
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3228,6 +3553,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
+
   prosemirror-changeset@2.2.1:
     resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==}
 
@@ -3297,26 +3625,8 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-colorful@5.6.1:
-    resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  react-dnd@16.0.1:
-    resolution: {integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==}
-    peerDependencies:
-      '@types/hoist-non-react-statics': '>= 3.3.1'
-      '@types/node': '>= 12'
-      '@types/react': '>= 16'
-      react: '>= 16.14'
-    peerDependenciesMeta:
-      '@types/hoist-non-react-statics':
-        optional: true
-      '@types/node':
-        optional: true
-      '@types/react':
-        optional: true
+  react-css-styled@1.1.9:
+    resolution: {integrity: sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==}
 
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
@@ -3332,6 +3642,15 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-markdown@9.1.0:
+    resolution: {integrity: sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-moveable@0.56.0:
+    resolution: {integrity: sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==}
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -3362,6 +3681,9 @@ packages:
       '@types/react':
         optional: true
 
+  react-selecto@1.26.3:
+    resolution: {integrity: sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==}
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -3378,6 +3700,12 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-tweet@3.2.2:
+    resolution: {integrity: sha512-hIkxAVPpN2RqWoDEbo3TTnN/pDcp9/Jb6pTgiA4EbXa9S+m2vHIvvZKHR+eS0PDIsYqe+zTmANRa5k6+/iwGog==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -3389,9 +3717,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  redux@4.2.1:
-    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
-
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -3403,6 +3728,12 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -3446,9 +3777,15 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  selecto@1.26.3:
+    resolution: {integrity: sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3525,6 +3862,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   stable-hash@0.0.4:
     resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
 
@@ -3563,6 +3903,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -3579,6 +3922,12 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-to-js@1.1.16:
+    resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
+
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -3609,6 +3958,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  swr@2.3.3:
+    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   tailwind-merge@3.0.2:
     resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
 
@@ -3650,6 +4004,12 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-api-utils@2.0.1:
     resolution: {integrity: sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==}
     engines: {node: '>=18.12'}
@@ -3684,6 +4044,9 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  tunnel-rat@0.1.2:
+    resolution: {integrity: sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3723,6 +4086,31 @@ packages:
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  undici@6.21.1:
+    resolution: {integrity: sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==}
+    engines: {node: '>=18.17'}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -3745,6 +4133,12 @@ packages:
       '@types/react':
         optional: true
 
+  use-debounce@10.0.4:
+    resolution: {integrity: sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      react: '*'
+
   use-isomorphic-layout-effect@1.2.0:
     resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
     peerDependencies:
@@ -3784,9 +4178,23 @@ packages:
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -3839,6 +4247,24 @@ packages:
   zod@3.24.2:
     resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
 
+  zustand@4.5.6:
+    resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -3882,44 +4308,28 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@cfcs/core@0.0.6':
+    dependencies:
+      '@egjs/component': 3.0.5
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-      tslib: 2.8.1
-
-  '@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@dnd-kit/accessibility': 3.1.1(react@18.3.1)
-      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tslib: 2.8.1
-
-  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
-      react: 18.3.1
-      tslib: 2.8.1
-
-  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
-      react: 18.3.1
-      tslib: 2.8.1
-
-  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-      tslib: 2.8.1
+  '@daybrush/utils@1.13.0': {}
 
   '@drizzle-team/brocli@0.10.2': {}
 
+  '@egjs/agent@2.4.4': {}
+
+  '@egjs/children-differ@1.0.1':
+    dependencies:
+      '@egjs/list-differ': 1.0.1
+
+  '@egjs/component@3.0.5': {}
+
+  '@egjs/list-differ@1.0.1': {}
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -4396,6 +4806,15 @@ snapshots:
       '@types/react': 18.3.18
       '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
+  '@radix-ui/react-aspect-ratio@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
   '@radix-ui/react-avatar@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
@@ -4892,18 +5311,25 @@ snapshots:
 
   '@radix-ui/rect@1.1.0': {}
 
-  '@react-dnd/asap@5.0.2': {}
-
-  '@react-dnd/invariant@4.0.2': {}
-
-  '@react-dnd/shallowequal@4.0.2': {}
-
   '@remirror/core-constants@3.0.0': {}
 
   '@rtsao/scc@1.1.0': {}
 
   '@rushstack/eslint-patch@1.10.5': {}
 
+  '@scena/dragscroll@1.4.0':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
+  '@scena/event-emitter@1.0.5':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  '@scena/matrix@1.1.1':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   '@standard-schema/utils@0.3.0': {}
 
   '@swc/counter@0.1.3': {}
@@ -4962,6 +5388,19 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-character-count@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+
+  '@tiptap/extension-code-block-lowlight@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-code-block@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)(highlight.js@11.11.1)(lowlight@3.3.0)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/extension-code-block': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+
   '@tiptap/extension-code-block@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
@@ -5004,6 +5443,10 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-highlight@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+
   '@tiptap/extension-history@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
@@ -5022,6 +5465,12 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-link@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+      linkifyjs: 4.2.0
+
   '@tiptap/extension-list-item@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
@@ -5034,10 +5483,24 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-placeholder@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+
   '@tiptap/extension-strike@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-task-item@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+
+  '@tiptap/extension-task-list@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+
   '@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
@@ -5046,6 +5509,14 @@ snapshots:
     dependencies:
       '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
 
+  '@tiptap/extension-underline@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+
+  '@tiptap/extension-youtube@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+
   '@tiptap/pm@2.11.5':
     dependencies:
       prosemirror-changeset: 2.2.1
@@ -5103,6 +5574,11 @@ snapshots:
       '@tiptap/extension-text-style': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
       '@tiptap/pm': 2.11.5
 
+  '@tiptap/suggestion@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)':
+    dependencies:
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/pm': 2.11.5
+
   '@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)':
     dependencies:
       '@trpc/server': 11.0.0-rc.824(typescript@5.8.2)
@@ -5131,13 +5607,25 @@ snapshots:
 
   '@types/cookie@0.6.0': {}
 
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
   '@types/eslint@8.56.12':
     dependencies:
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
 
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.6
+
   '@types/estree@1.0.6': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -5149,12 +5637,22 @@ snapshots:
       '@types/linkify-it': 5.0.0
       '@types/mdurl': 2.0.0
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/mdurl@2.0.0': {}
 
+  '@types/ms@2.1.0': {}
+
   '@types/node@20.17.23':
     dependencies:
       undici-types: 6.19.8
 
+  '@types/node@22.13.10':
+    dependencies:
+      undici-types: 6.20.0
+
   '@types/prop-types@15.7.14': {}
 
   '@types/react-dom@18.3.5(@types/react@18.3.18)':
@@ -5166,6 +5664,10 @@ snapshots:
       '@types/prop-types': 15.7.14
       csstype: 3.1.3
 
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
   '@types/use-sync-external-store@0.0.6': {}
 
   '@typescript-eslint/eslint-plugin@8.26.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)':
@@ -5373,10 +5875,14 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.9
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
 
+  boolbase@1.0.0: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -5419,11 +5925,44 @@ snapshots:
 
   caniuse-lite@1.0.30001702: {}
 
+  ccount@2.0.1: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.1.0
+      css-what: 6.1.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.0.0:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      encoding-sniffer: 0.2.0
+      htmlparser2: 9.1.0
+      parse5: 7.2.1
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      parse5-parser-stream: 7.1.2
+      undici: 6.21.1
+      whatwg-mimetype: 4.0.0
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -5454,6 +5993,18 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  cmdk@1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -5472,8 +6023,12 @@ snapshots:
       color-string: 1.9.1
     optional: true
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@4.1.1: {}
 
+  commander@8.3.0: {}
+
   concat-map@0.0.1: {}
 
   cookie@0.7.1: {}
@@ -5492,6 +6047,25 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-select@5.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-styled@1.0.8:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  css-to-mat@1.1.1:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/matrix': 1.1.1
+
+  css-what@6.1.0: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -5524,6 +6098,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decode-named-character-reference@1.1.0:
+    dependencies:
+      character-entities: 2.0.2
+
   deep-is@0.1.4: {}
 
   define-data-property@1.1.4:
@@ -5538,23 +6116,23 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  dequal@2.0.3: {}
+
   detect-libc@2.0.3:
     optional: true
 
   detect-node-es@1.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   didyoumean@1.2.2: {}
 
   diff@4.0.2: {}
 
   dlv@1.1.3: {}
 
-  dnd-core@16.0.1:
-    dependencies:
-      '@react-dnd/asap': 5.0.2
-      '@react-dnd/invariant': 4.0.2
-      redux: 4.2.1
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -5563,6 +6141,24 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@16.4.7: {}
 
   drizzle-kit@0.24.2:
@@ -5592,6 +6188,11 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  encoding-sniffer@0.2.0:
+    dependencies:
+      iconv-lite: 0.6.3
+      whatwg-encoding: 3.1.1
+
   enhanced-resolve@5.18.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -5985,8 +6586,12 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-util-is-identifier-name@3.0.0: {}
+
   esutils@2.0.3: {}
 
+  extend@3.0.2: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.1:
@@ -6047,6 +6652,8 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  framework-utils@1.1.0: {}
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -6069,6 +6676,11 @@ snapshots:
     dependencies:
       next: 15.2.1(babel-plugin-react-compiler@19.0.0-beta-40c6c23-20250301)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
+  gesto@1.19.4:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -6162,9 +6774,44 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hoist-non-react-statics@3.3.2:
+  hast-util-to-jsx-runtime@2.3.6:
     dependencies:
-      react-is: 16.13.1
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.16
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  highlight.js@11.11.1: {}
+
+  html-url-attributes@3.0.1: {}
+
+  htmlparser2@9.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
 
   ignore@5.3.2: {}
 
@@ -6182,12 +6829,21 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-parser@0.2.4: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -6239,6 +6895,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-decimal@2.0.1: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -6258,6 +6916,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
   is-map@2.0.3: {}
 
   is-number-object@1.1.1:
@@ -6269,6 +6929,8 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-plain-obj@4.1.0: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -6335,6 +6997,11 @@ snapshots:
 
   jose@6.0.8: {}
 
+  jotai@2.12.2(@types/react@18.3.18)(react@18.3.1):
+    optionalDependencies:
+      '@types/react': 18.3.18
+      react: 18.3.1
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -6358,6 +7025,19 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  katex@0.16.21:
+    dependencies:
+      commander: 8.3.0
+
+  keycode@2.2.1: {}
+
+  keycon@1.4.0:
+    dependencies:
+      '@cfcs/core': 0.0.6
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      keycode: 2.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -6381,16 +7061,26 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  linkifyjs@4.2.0: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
   lodash.merge@4.6.2: {}
 
+  longest-streak@3.1.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
   lru-cache@10.4.3: {}
 
   lucide-react@0.477.0(react@18.3.1):
@@ -6410,10 +7100,232 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   mdurl@2.0.0: {}
 
   merge2@1.4.1: {}
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.0
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -6482,6 +7394,52 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  novel@1.0.2(@tiptap/extension-code-block@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      '@tiptap/core': 2.11.5(@tiptap/pm@2.11.5)
+      '@tiptap/extension-character-count': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/extension-code-block-lowlight': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-code-block@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)(highlight.js@11.11.1)(lowlight@3.3.0)
+      '@tiptap/extension-color': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5)))
+      '@tiptap/extension-highlight': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/extension-horizontal-rule': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/extension-image': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/extension-link': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/extension-placeholder': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/extension-task-item': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@tiptap/extension-task-list': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/extension-text-style': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/extension-underline': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/extension-youtube': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))
+      '@tiptap/pm': 2.11.5
+      '@tiptap/react': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tiptap/starter-kit': 2.11.5
+      '@tiptap/suggestion': 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/pm@2.11.5)
+      '@types/node': 22.13.10
+      cmdk: 1.0.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      jotai: 2.12.2(@types/react@18.3.18)(react@18.3.1)
+      katex: 0.16.21
+      react: 18.3.1
+      react-markdown: 9.1.0(@types/react@18.3.18)(react@18.3.1)
+      react-moveable: 0.56.0
+      react-tweet: 3.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tippy.js: 6.3.7
+      tiptap-extension-global-drag-handle: 0.1.18
+      tunnel-rat: 0.1.2(@types/react@18.3.18)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@tiptap/extension-code-block'
+      - '@types/react'
+      - '@types/react-dom'
+      - highlight.js
+      - immer
+      - lowlight
+      - react-dom
+      - supports-color
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   oauth4webapi@3.3.0: {}
 
   object-assign@4.1.1: {}
@@ -6542,6 +7500,10 @@ snapshots:
 
   orderedmap@2.1.1: {}
 
+  overlap-area@1.1.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -6562,6 +7524,29 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.2.1
+
+  parse5-parser-stream@7.1.2:
+    dependencies:
+      parse5: 7.2.1
+
+  parse5@7.2.1:
+    dependencies:
+      entities: 4.5.0
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -6662,6 +7647,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@7.0.0: {}
+
   prosemirror-changeset@2.2.1:
     dependencies:
       prosemirror-transform: 1.10.3
@@ -6771,22 +7758,10 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-colorful@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-css-styled@1.1.9:
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  react-dnd@16.0.1(@types/node@20.17.23)(@types/react@18.3.18)(react@18.3.1):
-    dependencies:
-      '@react-dnd/invariant': 4.0.2
-      '@react-dnd/shallowequal': 4.0.2
-      dnd-core: 16.0.1
-      fast-deep-equal: 3.1.3
-      hoist-non-react-statics: 3.3.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/node': 20.17.23
-      '@types/react': 18.3.18
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
 
   react-dom@18.3.1(react@18.3.1):
     dependencies:
@@ -6800,6 +7775,40 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-markdown@9.1.0(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 18.3.18
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 18.3.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-moveable@0.56.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-selecto: 1.26.3
+
   react-remove-scroll-bar@2.3.8(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -6830,6 +7839,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
+  react-selecto@1.26.3:
+    dependencies:
+      selecto: 1.26.3
+
   react-style-singleton@2.2.3(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -6847,6 +7860,14 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  react-tweet@3.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      swr: 2.3.3(react@18.3.1)
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -6859,10 +7880,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  redux@4.2.1:
-    dependencies:
-      '@babel/runtime': 7.26.9
-
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -6885,6 +7902,23 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -6932,10 +7966,25 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2: {}
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
 
+  selecto@1.26.3:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/children-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      css-styled: 1.0.8
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      keycon: 1.4.0
+      overlap-area: 1.1.0
+
   semver@6.3.1: {}
 
   semver@7.7.1: {}
@@ -7046,6 +8095,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   stable-hash@0.0.4: {}
 
   streamsearch@1.1.0: {}
@@ -7112,6 +8163,11 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -7124,6 +8180,14 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-to-js@1.1.16:
+    dependencies:
+      style-to-object: 1.0.8
+
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   styled-jsx@5.1.6(react@18.3.1):
     dependencies:
       client-only: 0.0.1
@@ -7149,6 +8213,12 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  swr@2.3.3(react@18.3.1):
+    dependencies:
+      dequal: 2.0.3
+      react: 18.3.1
+      use-sync-external-store: 1.4.0(react@18.3.1)
+
   tailwind-merge@3.0.2: {}
 
   tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2))):
@@ -7209,6 +8279,10 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
   ts-api-utils@2.0.1(typescript@5.8.2):
     dependencies:
       typescript: 5.8.2
@@ -7249,6 +8323,14 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  tunnel-rat@0.1.2(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      zustand: 4.5.6(@types/react@18.3.18)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - react
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -7301,6 +8383,43 @@ snapshots:
 
   undici-types@6.19.8: {}
 
+  undici-types@6.20.0: {}
+
+  undici@6.21.1: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -7318,6 +8437,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
+  use-debounce@10.0.4(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   use-isomorphic-layout-effect@1.2.0(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -7347,8 +8470,24 @@ snapshots:
 
   v8-compile-cache-lib@3.0.1: {}
 
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
   w3c-keyname@2.2.8: {}
 
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -7416,3 +8555,12 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   zod@3.24.2: {}
+
+  zustand@4.5.6(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.4.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      react: 18.3.1
+
+  zwitch@2.0.4: {}
diff --git a/public/uploads/upload-1741879341639-pexels-rdne-8052216.jpg.png b/public/uploads/upload-1741879341639-pexels-rdne-8052216.jpg.png
new file mode 100644
index 0000000..f7aaa9e
Binary files /dev/null and b/public/uploads/upload-1741879341639-pexels-rdne-8052216.jpg.png differ
diff --git a/public/uploads/upload-1741879517853-pexels-italo-melo-881954-2379005.jpg.png b/public/uploads/upload-1741879517853-pexels-italo-melo-881954-2379005.jpg.png
new file mode 100644
index 0000000..029a58d
Binary files /dev/null and b/public/uploads/upload-1741879517853-pexels-italo-melo-881954-2379005.jpg.png differ
diff --git a/seed-data/fake-articles.json b/seed-data/fake-articles.json
new file mode 100644
index 0000000..ef83b34
--- /dev/null
+++ b/seed-data/fake-articles.json
@@ -0,0 +1,302 @@
+[
+  {
+    "title": "Account Executive"
+  },
+  {
+    "title": "Engineer II"
+  },
+  {
+    "title": "Data Coordinator"
+  },
+  {
+    "title": "Senior Editor"
+  },
+  {
+    "title": "Senior Quality Engineer"
+  },
+  {
+    "title": "Statistician III"
+  },
+  {
+    "title": "Programmer I"
+  },
+  {
+    "title": "Office Assistant II"
+  },
+  {
+    "title": "VP Marketing"
+  },
+  {
+    "title": "Senior Quality Engineer"
+  },
+  {
+    "title": "Business Systems Development Analyst"
+  },
+  {
+    "title": "Chemical Engineer"
+  },
+  {
+    "title": "Director of Sales"
+  },
+  {
+    "title": "Chief Design Engineer"
+  },
+  {
+    "title": "Editor"
+  },
+  {
+    "title": "Speech Pathologist"
+  },
+  {
+    "title": "Pharmacist"
+  },
+  {
+    "title": "Operator"
+  },
+  {
+    "title": "Human Resources Assistant III"
+  },
+  {
+    "title": "Computer Systems Analyst II"
+  },
+  {
+    "title": "Sales Associate"
+  },
+  {
+    "title": "Desktop Support Technician"
+  },
+  {
+    "title": "Executive Secretary"
+  },
+  {
+    "title": "Quality Control Specialist"
+  },
+  {
+    "title": "Research Associate"
+  },
+  {
+    "title": "Software Consultant"
+  },
+  {
+    "title": "Staff Scientist"
+  },
+  {
+    "title": "Senior Sales Associate"
+  },
+  {
+    "title": "Business Systems Development Analyst"
+  },
+  {
+    "title": "VP Sales"
+  },
+  {
+    "title": "Mechanical Systems Engineer"
+  },
+  {
+    "title": "Information Systems Manager"
+  },
+  {
+    "title": "Internal Auditor"
+  },
+  {
+    "title": "Product Engineer"
+  },
+  {
+    "title": "Legal Assistant"
+  },
+  {
+    "title": "GIS Technical Architect"
+  },
+  {
+    "title": "Software Consultant"
+  },
+  {
+    "title": "Paralegal"
+  },
+  {
+    "title": "Nurse"
+  },
+  {
+    "title": "Biostatistician II"
+  },
+  {
+    "title": "Web Designer I"
+  },
+  {
+    "title": "Financial Analyst"
+  },
+  {
+    "title": "Administrative Officer"
+  },
+  {
+    "title": "VP Accounting"
+  },
+  {
+    "title": "Biostatistician IV"
+  },
+  {
+    "title": "Data Coordinator"
+  },
+  {
+    "title": "Occupational Therapist"
+  },
+  {
+    "title": "Web Developer IV"
+  },
+  {
+    "title": "Quality Control Specialist"
+  },
+  {
+    "title": "General Manager"
+  },
+  {
+    "title": "Assistant Manager"
+  },
+  {
+    "title": "Sales Associate"
+  },
+  {
+    "title": "VP Marketing"
+  },
+  {
+    "title": "Graphic Designer"
+  },
+  {
+    "title": "Operator"
+  },
+  {
+    "title": "Senior Financial Analyst"
+  },
+  {
+    "title": "Information Systems Manager"
+  },
+  {
+    "title": "Tax Accountant"
+  },
+  {
+    "title": "Research Assistant II"
+  },
+  {
+    "title": "Quality Engineer"
+  },
+  {
+    "title": "Staff Scientist"
+  },
+  {
+    "title": "Account Representative I"
+  },
+  {
+    "title": "Clinical Specialist"
+  },
+  {
+    "title": "Web Developer II"
+  },
+  {
+    "title": "Desktop Support Technician"
+  },
+  {
+    "title": "Electrical Engineer"
+  },
+  {
+    "title": "Registered Nurse"
+  },
+  {
+    "title": "Paralegal"
+  },
+  {
+    "title": "Financial Advisor"
+  },
+  {
+    "title": "Senior Cost Accountant"
+  },
+  {
+    "title": "Senior Financial Analyst"
+  },
+  {
+    "title": "Safety Technician III"
+  },
+  {
+    "title": "Recruiting Manager"
+  },
+  {
+    "title": "Engineer III"
+  },
+  {
+    "title": "Social Worker"
+  },
+  {
+    "title": "Assistant Manager"
+  },
+  {
+    "title": "Financial Analyst"
+  },
+  {
+    "title": "Health Coach II"
+  },
+  {
+    "title": "Database Administrator III"
+  },
+  {
+    "title": "Senior Editor"
+  },
+  {
+    "title": "Research Nurse"
+  },
+  {
+    "title": "Graphic Designer"
+  },
+  {
+    "title": "Quality Engineer"
+  },
+  {
+    "title": "Media Manager II"
+  },
+  {
+    "title": "Payment Adjustment Coordinator"
+  },
+  {
+    "title": "Desktop Support Technician"
+  },
+  {
+    "title": "Legal Assistant"
+  },
+  {
+    "title": "Research Associate"
+  },
+  {
+    "title": "Operator"
+  },
+  {
+    "title": "Speech Pathologist"
+  },
+  {
+    "title": "Senior Editor"
+  },
+  {
+    "title": "Financial Analyst"
+  },
+  {
+    "title": "Professor"
+  },
+  {
+    "title": "Registered Nurse"
+  },
+  {
+    "title": "Electrical Engineer"
+  },
+  {
+    "title": "Actuary"
+  },
+  {
+    "title": "Nuclear Power Engineer"
+  },
+  {
+    "title": "Social Worker"
+  },
+  {
+    "title": "Safety Technician IV"
+  },
+  {
+    "title": "Web Developer I"
+  }
+]
diff --git a/seed-data/fake-categories.json b/seed-data/fake-categories.json
new file mode 100644
index 0000000..91a572a
--- /dev/null
+++ b/seed-data/fake-categories.json
@@ -0,0 +1,302 @@
+[
+  {
+    "name": "Green Sotol"
+  },
+  {
+    "name": "Mexican Prairie Clover"
+  },
+  {
+    "name": "Stipulate Leaf-flower"
+  },
+  {
+    "name": "Kawelu"
+  },
+  {
+    "name": "Spiked Crested Coralroot"
+  },
+  {
+    "name": "Texas Windmill Grass"
+  },
+  {
+    "name": "Mountain Alder"
+  },
+  {
+    "name": "Macdougal Verbena"
+  },
+  {
+    "name": "European Aspen"
+  },
+  {
+    "name": "Torrey's Willowherb"
+  },
+  {
+    "name": "Ailanthus"
+  },
+  {
+    "name": "Shortstalk Stinkweed"
+  },
+  {
+    "name": "Black Damar"
+  },
+  {
+    "name": "Canelillo"
+  },
+  {
+    "name": "Veatch's Island Broom"
+  },
+  {
+    "name": "Lewton's Milkwort"
+  },
+  {
+    "name": "Hungarian Milkvetch"
+  },
+  {
+    "name": "Palmer Evening Primrose"
+  },
+  {
+    "name": "Smooth Chastetree"
+  },
+  {
+    "name": "Jaeger's Joshua Tree"
+  },
+  {
+    "name": "Roughhairy Maiden Fern"
+  },
+  {
+    "name": "Florida Orchid"
+  },
+  {
+    "name": "Belonia Lichen"
+  },
+  {
+    "name": "Bigfruit Evening Primrose"
+  },
+  {
+    "name": "Fitch's Tarweed"
+  },
+  {
+    "name": "Coastal Plain Dawnflower"
+  },
+  {
+    "name": "Clokey's Gilia"
+  },
+  {
+    "name": "Indian Jointvetch"
+  },
+  {
+    "name": "Wreath Lichen"
+  },
+  {
+    "name": "Cumberland Xanthoparmelia Lichen"
+  },
+  {
+    "name": "Spectacular Flatsedge"
+  },
+  {
+    "name": "Pride Of California"
+  },
+  {
+    "name": "Feverfew"
+  },
+  {
+    "name": "Comb Wash Buckwheat"
+  },
+  {
+    "name": "Sweet Woodreed"
+  },
+  {
+    "name": "Delicate Violet Orchid"
+  },
+  {
+    "name": "Canadian Blacksnakeroot"
+  },
+  {
+    "name": "Wax Currant"
+  },
+  {
+    "name": "Western Mountain Ash"
+  },
+  {
+    "name": "Rhodomyrtus"
+  },
+  {
+    "name": "Johnston's Knotweed"
+  },
+  {
+    "name": "Kauai Bur Cucumber"
+  },
+  {
+    "name": "Cain's Reedgrass"
+  },
+  {
+    "name": "San Diego Pitchersage"
+  },
+  {
+    "name": "Rock Goldenrod"
+  },
+  {
+    "name": "Itchgrass"
+  },
+  {
+    "name": "Threadleaf Horsebrush"
+  },
+  {
+    "name": "Red Hills Vervain"
+  },
+  {
+    "name": "Louisiana Bluestar"
+  },
+  {
+    "name": "Utah Sweetvetch"
+  },
+  {
+    "name": "Kauila"
+  },
+  {
+    "name": "Sea Hibiscus"
+  },
+  {
+    "name": "Derris"
+  },
+  {
+    "name": "Florida Tasselflower"
+  },
+  {
+    "name": "Glossy Hawthorn"
+  },
+  {
+    "name": "Ahlner's Microcalicium Lichen"
+  },
+  {
+    "name": "Aster"
+  },
+  {
+    "name": "Elegant Hawthorn"
+  },
+  {
+    "name": "Pricklypear"
+  },
+  {
+    "name": "Parry's Sage"
+  },
+  {
+    "name": "Redberry Buckthorn"
+  },
+  {
+    "name": "Baden's Bluegrass"
+  },
+  {
+    "name": "Utah Columbine"
+  },
+  {
+    "name": "Obscure Shield Lichen"
+  },
+  {
+    "name": "Showy Orchid"
+  },
+  {
+    "name": "Silverleafed Princess Flower"
+  },
+  {
+    "name": "Oahu Stenogyne"
+  },
+  {
+    "name": "Hammond's Claytonia"
+  },
+  {
+    "name": "Owyhee River Stickseed"
+  },
+  {
+    "name": "Southwestern Cosmos"
+  },
+  {
+    "name": "Toothed Flatsedge"
+  },
+  {
+    "name": "Vegetable Fern"
+  },
+  {
+    "name": "Rose"
+  },
+  {
+    "name": "Desert Wishbone-bush"
+  },
+  {
+    "name": "Rocky Mountain Woodsia"
+  },
+  {
+    "name": "East Indian Lemongrass"
+  },
+  {
+    "name": "Coville's Erigeron"
+  },
+  {
+    "name": "Spiral Flag"
+  },
+  {
+    "name": "Nevada Milkvetch"
+  },
+  {
+    "name": "Douglas's Catchfly"
+  },
+  {
+    "name": "Silverleaf Phacelia"
+  },
+  {
+    "name": "Canadian Ricegrass"
+  },
+  {
+    "name": "Barrier Range Wattle"
+  },
+  {
+    "name": "Brooks' Alsophila"
+  },
+  {
+    "name": "Calder's Bladderpod"
+  },
+  {
+    "name": "Desert Brickellbush"
+  },
+  {
+    "name": "Echeveria"
+  },
+  {
+    "name": "Caruzo"
+  },
+  {
+    "name": "American Black Nightshade"
+  },
+  {
+    "name": "Whiteflower Goldenbush"
+  },
+  {
+    "name": "Littleleaf Milkwort"
+  },
+  {
+    "name": "Fir Mistletoe"
+  },
+  {
+    "name": "Disc Lichen"
+  },
+  {
+    "name": "Flagstaff Rockcress"
+  },
+  {
+    "name": "Golden Spiderflower"
+  },
+  {
+    "name": "Yellow Fumewort"
+  },
+  {
+    "name": "Dot Lichen"
+  },
+  {
+    "name": "Ross' Avens"
+  },
+  {
+    "name": "Sierra Bluecup"
+  },
+  {
+    "name": "Sausage Tree"
+  }
+]
diff --git a/seed-data/fake-users.json b/seed-data/fake-users.json
index 4d4e496..3e2dbf5 100644
--- a/seed-data/fake-users.json
+++ b/seed-data/fake-users.json
@@ -413,90 +413,5 @@
     "name": "Marie-josée",
     "email": "salford2a@hubpages.com",
     "image": "https://robohash.org/nihilestillo.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Maëlle",
-    "email": "lbaggs2b@deviantart.com",
-    "image": "https://robohash.org/blanditiisetvoluptate.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Publicité",
-    "email": "vpurdy2c@bravesites.com",
-    "image": "https://robohash.org/eumenimipsa.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Lén",
-    "email": "cstraun2d@youtube.com",
-    "image": "https://robohash.org/temporaquisofficia.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Maëline",
-    "email": "rcorney2e@blog.com",
-    "image": "https://robohash.org/nisimodimagnam.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Lucrèce",
-    "email": "florey2f@weather.com",
-    "image": "https://robohash.org/nequepariaturconsequatur.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Dorothée",
-    "email": "briddles2g@ucoz.ru",
-    "image": "https://robohash.org/voluptaserroriure.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Irène",
-    "email": "kscotsbrook2h@salon.com",
-    "image": "https://robohash.org/ullamutearum.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Håkan",
-    "email": "sshipp2i@cnbc.com",
-    "image": "https://robohash.org/etautillum.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Mylène",
-    "email": "bbanishevitz2j@biglobe.ne.jp",
-    "image": "https://robohash.org/consectetureosullam.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Styrbjörn",
-    "email": "mjeffries2k@wsj.com",
-    "image": "https://robohash.org/expeditaautemvoluptatum.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Sòng",
-    "email": "mpanks2l@tripadvisor.com",
-    "image": "https://robohash.org/eiussintnihil.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Faîtes",
-    "email": "nstewartson2m@themeforest.net",
-    "image": "https://robohash.org/errornumquamanimi.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Clémence",
-    "email": "bslany2n@naver.com",
-    "image": "https://robohash.org/laboriosamconsequaturdolore.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Maëlys",
-    "email": "dshubotham2o@who.int",
-    "image": "https://robohash.org/nobisnecessitatibusipsa.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Inès",
-    "email": "akeiling2p@ycombinator.com",
-    "image": "https://robohash.org/etvoluptatedeserunt.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Maëlla",
-    "email": "jfolonin2q@livejournal.com",
-    "image": "https://robohash.org/voluptatibusatqueut.png?size=50x50&set=set1"
-  },
-  {
-    "name": "Clémentine",
-    "email": "cstammirs2r@a8.net",
-    "image": "https://robohash.org/nihilquaesint.png?size=50x50&set=set1"
   }
 ]
diff --git a/seed-data/seed.ts b/seed-data/seed.ts
index 810b01d..b98183b 100644
--- a/seed-data/seed.ts
+++ b/seed-data/seed.ts
@@ -1,10 +1,22 @@
 import "dotenv/config";
-import { db } from "../src/server/db";
-import { users } from "../src/server/db/schema";
-import fakeUsers from "./fake-users.json";
+import { db, DBType } from "../src/server/db";
+import { articles, categories, users } from "../src/server/db/schema";
+import fakeArticles from "./fake-articles.json";
+import { generateSlug } from "@/lib/utils";
+import { createId } from "@paralleldrive/cuid2";
+import { eq, sql } from "drizzle-orm";
 
 async function seed() {
-  await db.insert(users).values(fakeUsers);
+  // await db.insert(users).values(fakeUsers);
+  // await db
+  //   .insert(categories)
+  //   .values(
+  //     fakeCategories.map(({ name }) => ({ name, slug: generateSlug(name) })),
+  //   );
+
+  await db
+    .insert(articles)
+    .values(fakeArticles.map(({ title }) => ({ title, slug: createId() })));
 }
 
 seed()
diff --git a/src/app/(PAGES)/_components/category/category-card.tsx b/src/app/(PAGES)/_components/category/category-card.tsx
deleted file mode 100644
index 92d2632..0000000
--- a/src/app/(PAGES)/_components/category/category-card.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { appRoutes } from "@/config";
-import { Category } from "@/server/db/schema";
-import Link from "next/link";
-import React from "react";
-
-function CategoryCard({
-  name,
-  slug,
-  createdAt,
-}: Pick<Category, "name" | "slug" | "createdAt">) {
-  return (
-    <Link href={appRoutes.category(slug)}>
-      <div className="rounded-md border p-4">{name}</div>
-    </Link>
-  );
-}
-
-export default CategoryCard;
diff --git a/src/app/(PAGES)/_components/main-page.tsx b/src/app/(PAGES)/_components/main-page.tsx
new file mode 100644
index 0000000..a24019e
--- /dev/null
+++ b/src/app/(PAGES)/_components/main-page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import React from "react";
+import CategoriesGrid, {
+  CategoriesGridSkeleton,
+} from "@/components/category/categories-grid";
+import ArticleGrid, {
+  ArticleGridSkeleton,
+} from "@/components/article/grid/article-grid";
+import { Article, Category } from "@/server/db/schema";
+import ArrowLink from "@/components/arrow-link";
+import { appRoutes } from "@/config";
+import GlobalSearchWidget from "@/components/global-search-widget";
+import { api } from "@/trpc/react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+const ITEMS_PER_PAGE = 10;
+
+function MainPage({
+  initialData,
+}: {
+  initialData: { categories: Array<Category>; articles: Array<Article> };
+}) {
+  // const [query, setQuery] = React.useState<string>("");
+
+  // // const {} = useInfiniteQuery();
+
+  // const { data: searchResults, isLoading } = api.app.searchContent.useQuery(
+  //   {
+  //     query,
+  //   },
+  //   {
+  //     enabled: !!query,
+  //   },
+  // );
+
+  // const data = query?.length ? searchResults : initialData;
+
+  return (
+    <>
+      main page xD
+      {/* <GlobalSearchWidget
+        onDebouncedSearch={
+          (q) => setQuery(q)
+          // q.length ? setQuery(q) : setQuery(undefined)
+        }
+        className="sticky top-0"
+      /> */}
+      {/* <div className="w-full space-y-1">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-medium">Kategorien</h2>
+          <ArrowLink href={appRoutes.allCategories}>Alle Kategorien</ArrowLink>
+        </div>
+        {isLoading ? (
+          <CategoriesGridSkeleton />
+        ) : data?.categories?.length ? (
+          <CategoriesGrid categories={data.categories} />
+        ) : (
+          <p>Keine Kategorien gefunden</p>
+        )}
+      </div>
+
+      <div className="min-h-screen w-full space-y-1">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-medium">Artikel</h2>
+          <ArrowLink href={appRoutes.allArticles}>Alle Artikel</ArrowLink>
+        </div>
+        {isLoading ? (
+          <ArticleGridSkeleton />
+        ) : data?.articles?.length ? (
+          <ArticleGrid articles={data.articles as Article[]} />
+        ) : (
+          <p>Keine Artikel gefunden</p>
+        )}
+      </div> */}
+    </>
+  );
+}
+
+export default MainPage;
diff --git a/src/app/(PAGES)/artikel/page.tsx b/src/app/(PAGES)/artikel/page.tsx
index f8dc919..31e4a93 100644
--- a/src/app/(PAGES)/artikel/page.tsx
+++ b/src/app/(PAGES)/artikel/page.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
+import React from "react";
+import InfiniteArticlesGrid from "@/components/article/grid/infinite-article-grid";
 
 function Page() {
-  return (
-    <div>Alle Artikel Page</div>
-  )
+  return <InfiniteArticlesGrid />;
 }
 
-export default Page
\ No newline at end of file
+export default Page;
diff --git a/src/app/(PAGES)/kategorie/[name]/page.tsx b/src/app/(PAGES)/kategorie/[name]/page.tsx
deleted file mode 100644
index bc39192..0000000
--- a/src/app/(PAGES)/kategorie/[name]/page.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import BreadNavigator from "@/components/bread-navigator";
-import { Button } from "@/components/ui/button";
-import { hasPermission, Role } from "@/lib/validation/permissions";
-import { auth } from "@/server/auth";
-import { api } from "@/trpc/server";
-import { Edit } from "lucide-react";
-import { notFound } from "next/navigation";
-import React from "react";
-import ArticleCard from "../../../../components/article/article-card";
-import { appRoutes } from "@/config";
-
-async function Page({ params }: { params: Promise<{ name: string }> }) {
-  const { name } = await params;
-  const category = await api.category.get({ slug: name });
-  if (!category) return notFound();
-  const articles = await api.article.getAll({ categoryId: category.id });
-  const session = await auth();
-  const isEditor = session?.user
-    ? hasPermission(session.user.role, Role.EDITOR)
-    : false;
-  return (
-    <>
-      <div className="flex items-center justify-between">
-        <BreadNavigator
-          links={[
-            { label: "Kategorie", href: appRoutes.allCategories },
-            {
-              label: name,
-              href: appRoutes.category(name),
-            },
-          ]}
-        />
-
-        {isEditor && (
-          <Button>
-            <Edit className="size-4" />
-            <span>Bearbeiten</span>
-          </Button>
-        )}
-      </div>
-      <h1 className="text-3xl font-bold capitalize">{name}</h1>
-      <p className="text-muted-foreground">keine Beschreibung</p>
-
-      <h3 className="text-2xl font-bold">Artikel</h3>
-      {articles.length ? (
-        <menu>
-          {articles.map((article) => (
-            <li key={article.slug}>
-              <ArticleCard {...article} />
-            </li>
-          ))}
-        </menu>
-      ) : (
-        <p className="text-muted-foreground">
-          Noch keine Artikel in dieser Kategorie.
-        </p>
-      )}
-    </>
-  );
-}
-
-export default Page;
diff --git a/src/app/(PAGES)/kategorie/[slug]/bearbeiten/page.tsx b/src/app/(PAGES)/kategorie/[slug]/bearbeiten/page.tsx
new file mode 100644
index 0000000..81491d8
--- /dev/null
+++ b/src/app/(PAGES)/kategorie/[slug]/bearbeiten/page.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { CategoryPageProps } from "../page";
+import { api } from "@/trpc/server";
+import { auth } from "@/server/auth";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { notFound } from "next/navigation";
+import CategoryForm from "@/components/category/category-form";
+import ImageUploadButton from "@/components/image-upload-form";
+
+async function Page({ params }: CategoryPageProps) {
+  const { slug } = await params;
+  const session = await auth();
+  const category = await api.category.get({
+    slug,
+  });
+  const isEditor = session?.user
+    ? hasPermission(session.user.role, Role.EDITOR)
+    : false;
+  if (!category || !isEditor) return notFound();
+  return (
+    <>
+      <CategoryForm server_category={category} />
+    </>
+  );
+}
+
+export default Page;
diff --git a/src/app/(PAGES)/kategorie/[slug]/page.tsx b/src/app/(PAGES)/kategorie/[slug]/page.tsx
new file mode 100644
index 0000000..8b0ffe3
--- /dev/null
+++ b/src/app/(PAGES)/kategorie/[slug]/page.tsx
@@ -0,0 +1,86 @@
+import BreadNavigator from "@/components/bread-navigator";
+import { Button } from "@/components/ui/button";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { auth } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { Edit } from "lucide-react";
+import { notFound } from "next/navigation";
+import React from "react";
+
+import { appRoutes } from "@/config";
+import Link from "next/link";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { CATEGORY_BANNER_ASPECT_RATIO } from "@/components/category/category-form";
+import Image from "next/image";
+import ArticleGrid from "@/components/article/grid/article-grid";
+
+export type CategoryPageProps = { params: Promise<{ slug: string }> };
+
+async function Page({ params }: CategoryPageProps) {
+  const { slug } = await params;
+  const category = await api.category.get({
+    slug,
+    with: {
+      articles: true,
+    },
+  });
+
+  if (!category) return notFound();
+
+  const session = await auth();
+  const isEditor = session?.user
+    ? hasPermission(session.user.role, Role.EDITOR)
+    : false;
+  return (
+    <>
+      <div className="flex w-full items-center justify-between">
+        <BreadNavigator
+          className="w-full"
+          links={[
+            { label: "Kategorie", href: appRoutes.allCategories },
+            {
+              label: category.name!,
+              href: appRoutes.category(category.name!),
+            },
+          ]}
+        />
+
+        {isEditor && (
+          <Button asChild>
+            <Link href={appRoutes.editCategory(slug)}>
+              <Edit className="size-4" />
+              <span>Bearbeiten</span>
+            </Link>
+          </Button>
+        )}
+      </div>
+      {category.image?.length ? (
+        <AspectRatio
+          ratio={CATEGORY_BANNER_ASPECT_RATIO}
+          className="w-full bg-muted"
+        >
+          <Image
+            src={category.image}
+            alt="Kategorie-bild"
+            fill
+            className="h-full w-full rounded-md object-cover"
+          />
+        </AspectRatio>
+      ) : null}
+      <h1 className="text-3xl font-bold capitalize">{category.name}</h1>
+      <p className="text-muted-foreground">
+        {category.description ?? "keine Beschreibung"}
+      </p>
+
+      {category?.articles?.length ? (
+        <ArticleGrid articles={category.articles} />
+      ) : (
+        <p className="text-muted-foreground">
+          Noch keine Artikel in dieser Kategorie.
+        </p>
+      )}
+    </>
+  );
+}
+
+export default Page;
diff --git a/src/app/(PAGES)/kategorie/page.tsx b/src/app/(PAGES)/kategorie/page.tsx
index 7ace8a8..c1899ea 100644
--- a/src/app/(PAGES)/kategorie/page.tsx
+++ b/src/app/(PAGES)/kategorie/page.tsx
@@ -1,7 +1,15 @@
+import CategoriesGrid from "@/components/category/categories-grid";
+import { api } from "@/trpc/server";
 import React from "react";
 
-function Page() {
-  return <div>Alle Kategorien</div>;
+async function Page() {
+  const categories = await api.category.getAll();
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Kategorien</h1>
+      <CategoriesGrid categories={categories} />
+    </>
+  );
 }
 
 export default Page;
diff --git a/src/app/(PAGES)/layout.tsx b/src/app/(PAGES)/layout.tsx
index 02b409e..1e1faab 100644
--- a/src/app/(PAGES)/layout.tsx
+++ b/src/app/(PAGES)/layout.tsx
@@ -1,4 +1,4 @@
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { WikiSidebar } from "@/components/layout/wiki-sidebar";
 import Navbar from "@/components/layout/navbar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import React from "react";
@@ -6,7 +6,7 @@ import React from "react";
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <WikiSidebar />
       <div className="w-full">
         <Navbar />
         <main className="space-y-4 p-4">{children}</main>
diff --git a/src/app/(PAGES)/page.tsx b/src/app/(PAGES)/page.tsx
index bf88e12..7764463 100644
--- a/src/app/(PAGES)/page.tsx
+++ b/src/app/(PAGES)/page.tsx
@@ -1,43 +1,13 @@
-import { auth } from "@/server/auth";
 import { api } from "@/trpc/server";
-import Link from "next/link";
-import GlobalStats from "./_components/global-stats";
-import ArticleCard from "../../components/article/article-card";
-import CategoryCard from "./_components/category/category-card";
+import MainPage from "./_components/main-page";
+import { Article } from "@/server/db/schema";
 
 export default async function Home() {
-  const session = await auth();
-  const articles = await api.article.getAllPreviews();
-  const categories = await api.category.getAll();
+  const articles = await api.article.getAll({ limit: 12 });
+  const categories = await api.category.getAll({ limit: 6 });
   return (
     <>
-      <div className="w-full space-y-1">
-        <h2 className="text-2xl font-medium">Kategorien</h2>
-        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
-          {categories.map((category) => (
-            <li key={category.slug}>
-              <CategoryCard {...category} />
-            </li>
-          ))}
-        </menu>
-      </div>
-      {/* <h1 className="text-4xl font-bold">Anti Rechts Wiki</h1> */}
-      <div className="flex h-64 w-full items-center justify-center rounded-md bg-muted">
-        <span>Artikel Suche</span>
-      </div>
-
-      {/* <GlobalStats /> */}
-
-      <div className="w-full space-y-1">
-        <h2 className="text-2xl font-medium">Artikel</h2>
-        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2">
-          {articles.map((article) => (
-            <li key={article.slug}>
-              <ArticleCard {...article} />
-            </li>
-          ))}
-        </menu>
-      </div>
+      <MainPage initialData={{ articles: articles as Article[], categories }} />
     </>
   );
 }
diff --git a/src/app/api/url-preview/route.ts b/src/app/api/url-preview/route.ts
new file mode 100644
index 0000000..bf070c3
--- /dev/null
+++ b/src/app/api/url-preview/route.ts
@@ -0,0 +1,56 @@
+import * as cheerio from "cheerio";
+import { NextApiRequest } from "next";
+import { NextResponse } from "next/server";
+
+export async function GET(req: NextApiRequest) {
+  if (req.method !== "GET") {
+    return NextResponse.json({ error: "Method not allowed" });
+  }
+  try {
+    const { searchParams } = new URL(req.url!);
+    const url = searchParams.get("url");
+
+    if (!url) {
+      return NextResponse.json({
+        success: false,
+        error: "URL parameter is required",
+      });
+    }
+
+    const response = await fetch(url, {
+      headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" },
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({
+        error: "Failed to fetch the URL",
+        success: false,
+      });
+    }
+
+    const html = await response.text();
+    const $ = cheerio.load(html);
+
+    // Extract metadata using cheerio
+    const title = $("title").text() || "No title found";
+    const description =
+      $('meta[name="description"]').attr("content") ||
+      $('meta[property="og:description"]').attr("content") ||
+      "No description available";
+    const image = $('meta[property="og:image"]').attr("content") || null;
+
+    console.log(title, description, image);
+
+    return NextResponse.json({
+      success: true,
+      url,
+      meta: { title, description, image },
+    });
+  } catch (error) {
+    console.error("Error fetching URL:", error);
+    return NextResponse.json({
+      error: "Failed to fetch URL metadata",
+      success: false,
+    });
+  }
+}
diff --git a/src/components/arrow-link.tsx b/src/components/arrow-link.tsx
new file mode 100644
index 0000000..18d9ac9
--- /dev/null
+++ b/src/components/arrow-link.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import React from "react";
+import { Button } from "./ui/button";
+import { ArrowRight, ChevronRight } from "lucide-react";
+
+function ArrowLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button
+      asChild
+      variant={"link"}
+      size={"sm"}
+      className="text-muted-foreground hover:text-foreground"
+    >
+      <Link href={href}>
+        <span>{children}</span>
+        <ChevronRight className="size-4" />
+      </Link>
+    </Button>
+  );
+}
+
+export default ArrowLink;
diff --git a/src/components/article/article-card.tsx b/src/components/article/article-card.tsx
index bc7d7b3..785194c 100644
--- a/src/components/article/article-card.tsx
+++ b/src/components/article/article-card.tsx
@@ -1,16 +1,49 @@
-import { appRoutes } from "@/config";
+import { appConfig, appRoutes } from "@/config";
 import { Article } from "@/server/db/schema";
 import Link from "next/link";
 import React from "react";
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Avatar from "../avatar";
+import { Icons } from "../icons";
+
 function ArticleCard({
   title,
   slug,
+  author,
   createdAt,
-}: Pick<Article, "title" | "slug" | "createdAt">) {
+}: Pick<Article, "title" | "slug" | "createdAt" | "author">) {
+  const authorName = author?.name ?? `${appConfig.name} Team`;
   return (
     <Link href={appRoutes.article(slug)}>
-      <div className="rounded-md border p-4">{title}</div>
+      <Card className="group flex h-full flex-col justify-between">
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+
+        <CardFooter className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            {author ? (
+              <Avatar className="size-6" src={author?.image} fb={authorName} />
+            ) : (
+              <Icons.logo className="size-6 text-muted-foreground transition-colors duration-150 group-hover:text-foreground" />
+            )}
+            <span className="text-sm text-muted-foreground">{authorName}</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {createdAt.toLocaleDateString("de-DE", {
+              dateStyle: "long",
+            })}
+          </p>
+        </CardFooter>
+      </Card>
     </Link>
   );
 }
diff --git a/src/components/article/article-form.tsx b/src/components/article/article-form.tsx
index b0a4051..9628b9c 100644
--- a/src/components/article/article-form.tsx
+++ b/src/components/article/article-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Article, Category } from "@/server/db/schema";
+import { Article } from "@/server/db/schema";
 
 import React from "react";
 
@@ -19,13 +19,13 @@ import {
 import { articleSchema } from "@/lib/validation/zod/article";
 import { cn, debounce } from "@/lib/utils";
 import { updateArticle } from "@/server/actions/article";
-import Editor from "../text-editor";
 import { Badge } from "@/components/ui/badge";
 import Link from "next/link";
 import CategorySelect from "@/components/category/category-select";
 import { CheckCircle, XCircle } from "lucide-react";
 import PublishArticleAlertDialog from "./publish-article-alert-dialog";
 import { Label } from "@/components/ui/label";
+import Editor from "../editor";
 
 export default ({ server_article }: { server_article: Article }) => {
   const [loading, setLoading] = React.useState(false);
@@ -46,7 +46,10 @@ export default ({ server_article }: { server_article: Article }) => {
     console.log("Content before save", values.content);
 
     setLoading(true);
-    await updateArticle(values, server_article.id);
+    await updateArticle(
+      { ...values, content: JSON.stringify(values.content) },
+      server_article.id,
+    );
     setLoading(false);
     form.reset(values);
   }
@@ -58,10 +61,14 @@ export default ({ server_article }: { server_article: Article }) => {
     [form],
   );
   const published = form.watch("published");
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <div>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full flex-col-reverse gap-4 space-y-4 xl:flex-row"
+      >
+        <div className="flex w-full max-w-3xl flex-col gap-2">
           <FormField
             control={form.control}
             name="title"
@@ -70,7 +77,7 @@ export default ({ server_article }: { server_article: Article }) => {
                 <FormControl>
                   <TextareaAutosize
                     cols={1}
-                    className="w-full resize-none text-4xl font-bold focus-visible:outline-none"
+                    className="h-max w-full resize-none text-4xl font-bold focus-visible:outline-none"
                     value={field.value}
                     onChange={(e) => {
                       field.onChange(e);
@@ -82,8 +89,6 @@ export default ({ server_article }: { server_article: Article }) => {
               </FormItem>
             )}
           />
-        </div>
-        <div className="flex w-full gap-4">
           <FormField
             control={form.control}
             name="content"
@@ -91,19 +96,10 @@ export default ({ server_article }: { server_article: Article }) => {
               <FormItem className="w-full">
                 <FormControl>
                   <Editor
-                    // content={field.value}
-                    editorProviderProps={{
-                      content: field.value,
-                      editorProps: { attributes: { class: "min-h-64" } },
-                      onUpdate: (value) => {
-                        const newContent = value.editor.getHTML();
-                        console.log(
-                          "Content :: form",
-                          JSON.stringify(newContent),
-                        );
-                        field.onChange(newContent);
-                        debouncedSubmit();
-                      },
+                    initialContent={field.value}
+                    onContentChange={(content) => {
+                      field.onChange(content);
+                      debouncedSubmit();
                     }}
                   />
                 </FormControl>
@@ -112,99 +108,97 @@ export default ({ server_article }: { server_article: Article }) => {
               </FormItem>
             )}
           />
-          <div
-            className={cn(
-              "sticky top-4 h-max w-full max-w-md",
-              // loading && "border-t-blue-600",
-            )}
-          >
-            <div className="relative w-full space-y-4 overflow-hidden rounded-md border-t-2 bg-muted p-4">
-              <div
-                className={cn(
-                  "saving absolute left-0 right-0 top-0 h-0.5 rounded-full bg-primary",
-                  !loading && "hidden",
-                )}
-              />
+        </div>
 
-              <div className="flex w-full items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Badge
-                    variant={"outline"}
-                    className="flex items-center gap-1"
-                  >
-                    {!form.formState.isDirty && !loading ? (
-                      <>
-                        <CheckCircle className="size-4 text-emerald-600" />
-                        <span>Gespeichert</span>
-                      </>
-                    ) : (
-                      <>
-                        <XCircle className="size-4 text-destructive" />
-                        <span>Nicht Gespeichert</span>
-                      </>
-                    )}
-                  </Badge>
-                  <span
-                    className={cn(
-                      "text-xs",
-                      published ? "text-emerald-700" : "text-muted-foreground",
-                    )}
-                  >
-                    {published
-                      ? "Veröffentlicht"
-                      : "Draft (nicht veröffentlicht)"}
-                  </span>
-                </div>
-                <Link
-                  href={"/editoren-hilfe"}
-                  target="_blank"
-                  className="size-max scale-90 p-0 text-xs text-muted-foreground"
+        <div
+          className={cn(
+            "top-4 h-max w-full max-w-xl xl:sticky xl:max-w-md",
+            // loading && "border-t-blue-600",
+          )}
+        >
+          <div className="relative w-full space-y-4 overflow-hidden rounded-md border-t-2 bg-muted p-4">
+            <div
+              className={cn(
+                "saving absolute left-0 right-0 top-0 h-0.5 rounded-full bg-primary",
+                !loading && "hidden",
+              )}
+            />
+
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Badge variant={"outline"} className="flex items-center gap-1">
+                  {!form.formState.isDirty && !loading ? (
+                    <>
+                      <CheckCircle className="size-4 text-emerald-600" />
+                      <span>Gespeichert</span>
+                    </>
+                  ) : (
+                    <>
+                      <XCircle className="size-4 text-destructive" />
+                      <span>Nicht Gespeichert</span>
+                    </>
+                  )}
+                </Badge>
+                <span
+                  className={cn(
+                    "text-xs",
+                    published ? "text-emerald-700" : "text-muted-foreground",
+                  )}
                 >
-                  <span>? Hilfe</span>
-                </Link>
+                  {published
+                    ? "Veröffentlicht"
+                    : "Draft (nicht veröffentlicht)"}
+                </span>
               </div>
-              <FormField
-                control={form.control}
-                name="published"
-                render={({ field }) => (
-                  <FormItem className="rounded-md border bg-background px-4 py-2">
-                    <FormControl>
-                      <div className="flex items-center gap-2">
-                        <Label>Veröffentlicht </Label>
-                        <PublishArticleAlertDialog
-                          published={field.value}
-                          setPublished={(value) => {
-                            field.onChange(value);
-                            form.handleSubmit(onSubmit)();
-                          }}
-                        />
-                      </div>
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="categoryId"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormControl>
-                      <CategorySelect
-                        initialValue={field.value}
-                        onSelect={(categoryId) => {
-                          field.onChange(categoryId);
+              <Link
+                href={"/editoren-hilfe"}
+                target="_blank"
+                className="size-max scale-90 p-0 text-xs text-muted-foreground"
+              >
+                <span>? Hilfe</span>
+              </Link>
+            </div>
+            <FormField
+              control={form.control}
+              name="published"
+              render={({ field }) => (
+                <FormItem className="rounded-md border bg-background px-4 py-2">
+                  <FormControl>
+                    <div className="flex items-center gap-2">
+                      <Label>Veröffentlicht </Label>
+                      <PublishArticleAlertDialog
+                        published={field.value}
+                        setPublished={(value) => {
+                          field.onChange(value);
                           form.handleSubmit(onSubmit)();
                         }}
                       />
-                    </FormControl>
+                    </div>
+                  </FormControl>
 
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="categoryId"
+              render={({ field }) => (
+                <FormItem className="w-full">
+                  <FormControl>
+                    <CategorySelect
+                      initialValue={field.value}
+                      onSelect={(categoryId) => {
+                        field.onChange(categoryId);
+                        form.handleSubmit(onSubmit)();
+                      }}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </div>
         </div>
       </form>
diff --git a/src/components/article/grid/article-grid.tsx b/src/components/article/grid/article-grid.tsx
new file mode 100644
index 0000000..0b279b3
--- /dev/null
+++ b/src/components/article/grid/article-grid.tsx
@@ -0,0 +1,33 @@
+import { Article } from "@/server/db/schema";
+import React from "react";
+import ArticleCard from "../article-card";
+import { Skeleton } from "../../ui/skeleton";
+
+export const ARTICLE_GRID_CLASS = "grid grid-cols-1 gap-4 lg:grid-cols-2";
+
+function ArticleGrid({ articles }: { articles: Article[] }) {
+  return (
+    <menu className={ARTICLE_GRID_CLASS}>
+      {articles.map((article) => (
+        <li key={article.slug} className="h-full">
+          <ArticleCard {...article} />
+        </li>
+      ))}
+    </menu>
+  );
+}
+
+export default ArticleGrid;
+
+export function ArticleGridSkeleton() {
+  const range = Array.from(new Array(6).keys());
+  return (
+    <ul className={ARTICLE_GRID_CLASS}>
+      {range.map((i) => (
+        <li key={i}>
+          <Skeleton className="h-12 w-full" />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/article/grid/infinite-article-grid.tsx b/src/components/article/grid/infinite-article-grid.tsx
new file mode 100644
index 0000000..b8dbece
--- /dev/null
+++ b/src/components/article/grid/infinite-article-grid.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { api } from "@/trpc/react";
+import React from "react";
+import { ARTICLE_GRID_CLASS } from "./article-grid";
+import ArticleCard from "../article-card";
+import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
+import { Skeleton } from "@/components/ui/skeleton";
+
+function InfiniteArticlesGrid() {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    api.article.getByPage.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    );
+  // Calculate all visible items across all loaded pages
+  const allItems = React.useMemo(() => {
+    return data?.pages.flatMap((page) => page.items) || [];
+  }, [data]);
+
+  // Ref for bottom observation
+  const bottomObserverRef = React.useRef(null);
+
+  useInfiniteItemsObserver({
+    bottomObserverRef,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  });
+
+  return (
+    <div className="relative">
+      <menu className={`${ARTICLE_GRID_CLASS} overflow-auto`}>
+        {data?.pages?.length
+          ? allItems.map((article, idx) => (
+              <li key={`article-${idx}`}>
+                <ArticleCard {...article} />
+              </li>
+            ))
+          : null}
+
+        {/* Loading indicator */}
+        {(isLoading || isFetchingNextPage) &&
+          Array.from(new Array(isLoading ? 16 : 4).keys()).map((idx) => (
+            <li key={idx}>
+              <Skeleton className="size-full min-h-20" />
+            </li>
+          ))}
+
+        {/* Bottom observer element */}
+        {hasNextPage && (
+          <li ref={bottomObserverRef} className="col-span-full h-12" />
+        )}
+      </menu>
+    </div>
+  );
+}
+
+export default InfiniteArticlesGrid;
diff --git a/src/components/article/render-article.tsx b/src/components/article/render-article.tsx
index ace1202..ddd76c3 100644
--- a/src/components/article/render-article.tsx
+++ b/src/components/article/render-article.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import Editor from "../text-editor";
 
 function RenderArticle({ content }: { content: string }) {
-  return <Editor readOnly editorProviderProps={{ content: content }} />;
+  return "render article: in work"; //<Editor readOnly editorProviderProps={{ content: content }} />;
 }
 
 export default RenderArticle;
diff --git a/src/components/bread-navigator.tsx b/src/components/bread-navigator.tsx
index 0c30841..3d70568 100644
--- a/src/components/bread-navigator.tsx
+++ b/src/components/bread-navigator.tsx
@@ -10,13 +10,15 @@ import {
 
 function BreadNavigator({
   links,
+  className,
 }: {
   links: { label: string; href: string }[];
+  className?: string;
 }) {
   const labelClass =
     "w-full max-w-52 overflow-hidden text-ellipsis whitespace-nowrap capitalize block";
   return (
-    <Breadcrumb>
+    <Breadcrumb className={className}>
       <BreadcrumbList>
         {links.map(({ label, href }, idx) => {
           if (idx < links.length - 1)
diff --git a/src/components/category/categories-grid.tsx b/src/components/category/categories-grid.tsx
new file mode 100644
index 0000000..f4085f4
--- /dev/null
+++ b/src/components/category/categories-grid.tsx
@@ -0,0 +1,33 @@
+import CategoryCard from "@/components/category/category-card";
+import { Category } from "@/server/db/schema";
+import React from "react";
+import { Skeleton } from "../ui/skeleton";
+
+const GRID_CLASS = "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3";
+
+function CategoriesGrid({ categories }: { categories: Category[] }) {
+  return (
+    <menu className={GRID_CLASS}>
+      {categories.map((category) => (
+        <li key={category.id}>
+          <CategoryCard {...category} />
+        </li>
+      ))}
+    </menu>
+  );
+}
+
+export default CategoriesGrid;
+
+export function CategoriesGridSkeleton() {
+  const range = Array.from(new Array(6).keys());
+  return (
+    <ul className={GRID_CLASS}>
+      {range.map((i) => (
+        <li key={i}>
+          <Skeleton className="h-12 w-full" />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/category/category-card.tsx b/src/components/category/category-card.tsx
new file mode 100644
index 0000000..ec0880a
--- /dev/null
+++ b/src/components/category/category-card.tsx
@@ -0,0 +1,50 @@
+import { appRoutes } from "@/config";
+import { Category } from "@/server/db/schema";
+import Link from "next/link";
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { AspectRatio } from "../ui/aspect-ratio";
+import { CATEGORY_BANNER_ASPECT_RATIO } from "./category-form";
+import Image from "next/image";
+import { Icons } from "../icons";
+
+function CategoryCard({
+  name,
+  slug,
+  createdAt,
+  image,
+}: Pick<Category, "name" | "slug" | "createdAt" | "image">) {
+  return (
+    <Link href={appRoutes.category(slug)}>
+      <Card className="overflow-hidden">
+        {/* <AspectRatio
+          className="flex items-center justify-center bg-muted text-muted-foreground"
+          ratio={CATEGORY_BANNER_ASPECT_RATIO}
+        >
+          {image?.length ? (
+            <Image
+              src={image}
+              alt="Kategorie-bild"
+              fill
+              className="object-cover"
+            />
+          ) : (
+            <Icons.logo />
+          )}
+        </AspectRatio> */}
+        <CardHeader>
+          <CardTitle>{name}</CardTitle>
+        </CardHeader>
+      </Card>
+    </Link>
+  );
+}
+
+export default CategoryCard;
diff --git a/src/components/category/category-form.tsx b/src/components/category/category-form.tsx
new file mode 100644
index 0000000..376ad1a
--- /dev/null
+++ b/src/components/category/category-form.tsx
@@ -0,0 +1,120 @@
+"use client";
+import React from "react";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { categorySchema } from "@/lib/validation/zod/category";
+import { Category } from "@/server/db/schema";
+import { Textarea } from "../ui/textarea";
+import { updateCategory } from "@/server/actions/category";
+import { toast } from "sonner";
+import ImageUploadButton from "../image-upload-form";
+import Image from "next/image";
+import { AspectRatio } from "../ui/aspect-ratio";
+
+export const CATEGORY_BANNER_ASPECT_RATIO = 20 / 3;
+
+function CategoryForm({ server_category }: { server_category: Category }) {
+  const form = useForm<z.infer<typeof categorySchema>>({
+    resolver: zodResolver(categorySchema),
+    defaultValues: {
+      name: server_category?.name ?? "",
+      description: server_category?.description ?? "",
+      image: server_category?.image ?? "",
+    },
+  });
+
+  // 2. Define a submit handler.
+  async function onSubmit(values: z.infer<typeof categorySchema>) {
+    const success = await updateCategory(values, server_category.id);
+    if (success) {
+      toast.success("Kategorie gespeichert.");
+      form.reset();
+    } else toast.error("Speichern fehlgeschlagen.");
+  }
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name der Kategorie</FormLabel>
+              <FormControl>
+                <Input placeholder="Name der Kategorie" {...field} />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Beschreibung der Kategorie</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Das ist eine kurze beschreibung"
+                  {...field}
+                />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="image"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Kategorie Banner</FormLabel>
+              <FormControl>
+                <ImageUploadButton
+                  onUploaded={(url) => {
+                    field.onChange(url);
+                    form.handleSubmit(onSubmit)();
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+
+              {field.value?.length ? (
+                <AspectRatio
+                  ratio={CATEGORY_BANNER_ASPECT_RATIO}
+                  className="w-full max-w-lg bg-muted"
+                >
+                  <Image
+                    src={field.value}
+                    alt="Kategorie-bild"
+                    fill
+                    className="h-full w-full rounded-md object-cover"
+                  />
+                </AspectRatio>
+              ) : null}
+            </FormItem>
+          )}
+        />
+        <Button type="submit" disabled={!form.formState.isDirty}>
+          Kategorie Speichern
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export default CategoryForm;
diff --git a/src/app/(PAGES)/_components/category/create-category-dialog.tsx b/src/components/category/create-category-dialog.tsx
similarity index 100%
rename from src/app/(PAGES)/_components/category/create-category-dialog.tsx
rename to src/components/category/create-category-dialog.tsx
diff --git a/src/components/data-table/index.tsx b/src/components/data-table/index.tsx
index 03a2343..92760f7 100644
--- a/src/components/data-table/index.tsx
+++ b/src/components/data-table/index.tsx
@@ -36,6 +36,7 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  "use no memo";
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageSize: 25,
     pageIndex: 0,
@@ -45,6 +46,7 @@ export function DataTable<TData, TValue>({
     [],
   );
   const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({});
+
   const table = useReactTable({
     data,
     columns,
@@ -65,6 +67,7 @@ export function DataTable<TData, TValue>({
   });
   return (
     <div className="space-y-4">
+      {JSON.stringify(sorting)}
       <div className="flex items-center">
         <Input
           placeholder="Email suchen..."
diff --git a/src/components/editor/extentions/index.tsx b/src/components/editor/extentions/index.tsx
new file mode 100644
index 0000000..77f04cf
--- /dev/null
+++ b/src/components/editor/extentions/index.tsx
@@ -0,0 +1,124 @@
+import {
+  CharacterCount,
+  Color,
+  CustomKeymap,
+  GlobalDragHandle,
+  HighlightExtension,
+  HorizontalRule,
+  Placeholder,
+  StarterKit,
+  TaskItem,
+  TaskList,
+  TextStyle,
+  TiptapImage,
+  TiptapLink,
+  TiptapUnderline,
+  UpdatedImage,
+  UploadImagesPlugin,
+  Youtube,
+} from "novel";
+import LinkPreview from "./link-preview";
+import { Heading } from "@tiptap/extension-heading";
+import { cx } from "class-variance-authority";
+import { slashCommand } from "./slash-commands";
+
+const placeholder = Placeholder;
+const tiptapLink = TiptapLink.configure({
+  HTMLAttributes: {
+    class: cx(
+      "text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
+    ),
+  },
+});
+
+const tiptapImage = TiptapImage.extend({
+  addProseMirrorPlugins() {
+    return [
+      UploadImagesPlugin({
+        imageClass: cx("opacity-40 rounded-lg border border-stone-200"),
+      }),
+    ];
+  },
+}).configure({
+  allowBase64: true,
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+});
+
+const updatedImage = UpdatedImage.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+});
+
+const taskList = TaskList.configure({
+  HTMLAttributes: {
+    class: cx("not-prose pl-2 "),
+  },
+});
+
+const taskItem = TaskItem.configure({
+  HTMLAttributes: {
+    class: cx("flex gap-2 items-start my-4"),
+  },
+  nested: true,
+});
+
+const horizontalRule = HorizontalRule.configure({
+  HTMLAttributes: {
+    class: cx("mt-4 mb-6 border-t border-muted-foreground"),
+  },
+});
+
+const starterKit = StarterKit.configure({
+  dropcursor: {
+    color: "#DBEAFE",
+    width: 4,
+  },
+  heading: {
+    levels: [2, 3, 4, 5, 6],
+  },
+  gapcursor: false,
+  horizontalRule: false,
+});
+
+const youtube = Youtube.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+  inline: false,
+});
+
+const linkPreview = LinkPreview.configure({
+  async fetchMetadata(url) {
+    const response = await fetch(`/api/url-preview?url=${url}`);
+    const metadata = await response.json();
+    console.log("metadata", metadata);
+
+    return metadata?.meta;
+  },
+});
+
+const characterCount = CharacterCount.configure();
+
+export const defaultExtensions = [
+  starterKit,
+  placeholder,
+  tiptapLink,
+  tiptapImage,
+  updatedImage,
+  taskList,
+  taskItem,
+  horizontalRule,
+  youtube,
+  characterCount,
+  TiptapUnderline,
+  HighlightExtension,
+  TextStyle,
+  Color,
+  CustomKeymap,
+  GlobalDragHandle,
+  slashCommand,
+  linkPreview,
+];
diff --git a/src/components/editor/extentions/link-preview/index.tsx b/src/components/editor/extentions/link-preview/index.tsx
new file mode 100644
index 0000000..adf0cf4
--- /dev/null
+++ b/src/components/editor/extentions/link-preview/index.tsx
@@ -0,0 +1,140 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { LinkPreviewComponent } from "./link-preview-component";
+
+export interface LinkPreviewOptions {
+  HTMLAttributes: {
+    [key: string]: any;
+  };
+  fetchMetadata?: (
+    url: string,
+  ) => Promise<{ title?: string; description?: string; cover?: string }>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    linkPreview: {
+      /**
+       * Add an linkPreview
+       */
+
+      createLinkPreview: () => ReturnType;
+    };
+  }
+}
+
+export default Node.create<LinkPreviewOptions>({
+  name: "linkPreview",
+
+  group: "block",
+
+  atom: true,
+
+  // content: "block+",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "link-preview-wrapper",
+      },
+      fetchMetadata: async (url) => {
+        // Default: Simple metadata fetch (Override this via `configure()`)
+        return {
+          title: "Placeholder Title",
+          description:
+            "You need to provide a custom `fetchMetadata` function You need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` functionYou need to provide a custom `fetchMetadata` function",
+          cover: "",
+        };
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML(element) {
+          return element.getAttribute("href");
+        },
+      },
+      title: {
+        default: null,
+        parseHTML(element) {
+          return element?.firstChild?.childNodes?.[0]?.childNodes?.[0]
+            ?.nodeValue;
+        },
+        renderHTML() {
+          return;
+        },
+      },
+      description: {
+        default: null,
+        parseHTML(element) {
+          return element?.firstChild?.childNodes?.[1]?.childNodes?.[0]
+            ?.nodeValue;
+        },
+        renderHTML() {
+          return;
+        },
+      },
+      image: {
+        default: null,
+        parseHTML(element) {
+          // @ts-ignore
+          return element.childNodes[1].src;
+        },
+        renderHTML() {
+          return;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+        priority: 1000,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-type": this.name }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(LinkPreviewComponent);
+  },
+  addPasteRules() {
+    return [
+      {
+        find: /(https?:\/\/[^\s]+)/g,
+        handler: ({ match, state, range }) => {
+          const url = match[0];
+
+          // Replace the pasted URL with the link preview node
+          state.tr.replaceWith(
+            range.from,
+            range.to,
+            this.type.create({ href: url }),
+          );
+        },
+      },
+    ];
+  },
+  addCommands() {
+    return {
+      createLinkPreview:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: "linkPreview",
+              attrs: {},
+            })
+            .focus()
+            .run();
+        },
+    };
+  },
+});
diff --git a/src/components/editor/extentions/link-preview/link-preview-component.tsx b/src/components/editor/extentions/link-preview/link-preview-component.tsx
new file mode 100644
index 0000000..5a639fe
--- /dev/null
+++ b/src/components/editor/extentions/link-preview/link-preview-component.tsx
@@ -0,0 +1,136 @@
+"use client";
+import React from "react";
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export type LinkPreviewData = {
+  href: string;
+  title: string;
+  description: string;
+  image: string;
+};
+
+const InputLink = ({ onSubmit }: { onSubmit: (link: string) => void }) => {
+  const [link, setLink] = React.useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault(); // Prevent page reload
+    if (link.trim()) {
+      onSubmit(link); // Pass link to parent function
+      setLink(""); // Clear input field after submission
+    }
+  };
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  React.useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2 " autoFocus>
+      <Input
+        ref={inputRef}
+        autoFocus
+        type="url"
+        placeholder="Enter a link"
+        value={link}
+        onChange={(e) => setLink(e.target.value)}
+        className="flex-1 focus-visible:ring-transparent border-0"
+      />
+      <Button
+        type="submit"
+        variant={"ghost"}
+        size={"icon"}
+        className="text-muted-foreground"
+      >
+        <ArrowRight />
+      </Button>
+    </form>
+  );
+};
+
+const Preview = ({
+  href,
+  title,
+  description: _description,
+  image,
+}: LinkPreviewData) => {
+  const description =
+    _description?.length > 100
+      ? `${_description?.slice(0, 150)}...`
+      : _description;
+  
+  return (
+    <a href={href} target="_blank">
+      <div className=" flex gap-4 flex-col-reverse md:flex-row">
+        <div className="w-full space-y-2">
+          <h2
+            className="text-xl"
+            style={{
+              margin: 0,
+              fontSize: "1.5rem",
+            }}
+          >
+            {title}
+          </h2>
+          <p className="text-sm mt-2">{description}</p>
+          <span className="text-xs text-muted-foreground ">{href}</span>
+        </div>
+
+        {image?.length ? (
+          <img
+            src={image}
+            alt={title}
+            className="w-full max-w-40 rounded-md object-cover  "
+          />
+        ) : (
+          <div className="size-20 rounded-md bg-muted" />
+        )}
+      </div>
+    </a>
+  );
+};
+
+export const LinkPreviewComponent: React.FC<NodeViewProps> = ({
+  node,
+  updateAttributes,
+  extension,
+}) => {
+  const [preview, setPreview] = React.useState<LinkPreviewData | undefined>(
+    (node.attrs?.href?.length && (node.attrs as LinkPreviewData)) ?? undefined
+  );
+
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <NodeViewWrapper as="div" className="p-4 rounded-md bg-background border ">
+      {loading ? (
+        <Skeleton className="h-8 w-full rounded" />
+      ) : preview ? (
+        <Preview {...preview} />
+      ) : (
+        <InputLink
+          onSubmit={async (url: string) => {
+            setLoading(true);
+            try {
+              const metadata = await extension.options.fetchMetadata(url);
+              const newAttrs = {
+                href: url,
+                title: metadata?.title,
+                description: metadata?.description,
+                image: metadata?.image,
+              };
+              updateAttributes(newAttrs);
+              setPreview(newAttrs);
+              setLoading(false);
+            } catch (error) {
+              console.error("Error fetching metadata:", error);
+              setLoading(false);
+            }
+          }}
+        />
+      )}
+    </NodeViewWrapper>
+  );
+};
diff --git a/src/components/editor/extentions/slash-commands/index.tsx b/src/components/editor/extentions/slash-commands/index.tsx
new file mode 100644
index 0000000..18b6450
--- /dev/null
+++ b/src/components/editor/extentions/slash-commands/index.tsx
@@ -0,0 +1,195 @@
+import {
+  CheckSquare,
+  Heading2,
+  Heading3,
+  Heading4,
+  ImageIcon,
+  Link2Icon,
+  List,
+  ListOrdered,
+  Text,
+  TextQuote,
+  Youtube,
+} from "lucide-react";
+
+import { Command, renderItems, createSuggestionItems } from "novel";
+import { selectionItems } from "../../selector/selection-items";
+
+// const items = selectionItems.filter((item) => !item.inline);
+// const defaultSuggestionItems = items.map((item) => (
+//   {
+//     title: item.name,
+//     description: item.name,
+//     searchTerms: [item.name],
+//     icon: item.icon,
+//     command: ({ editor, range }) => {
+//       editor.chain().focus().deleteRange(range).toggleNode(item.name).run();
+//     },
+//   }
+// ));
+
+export const suggestionItems = createSuggestionItems([
+  {
+    title: "Text",
+    description: "Just start typing with plain text.",
+    searchTerms: ["p", "paragraph"],
+    icon: <Text size={18} />,
+    command: ({ editor, range }) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleNode("paragraph", "paragraph")
+        .run();
+    },
+  },
+  {
+    title: "To-do List",
+    description: "Track tasks with a to-do list.",
+    searchTerms: ["todo", "task", "list", "check", "checkbox"],
+    icon: <CheckSquare size={18} />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleTaskList().run();
+    },
+  },
+  {
+    title: "Heading 2",
+    description: "Medium section heading.",
+    searchTerms: ["subtitle", "medium"],
+    icon: <Heading2 size={18} />,
+    command: ({ editor, range }) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode("heading", { level: 2 })
+        .run();
+    },
+  },
+  {
+    title: "Heading 3",
+    description: "Small section heading.",
+    searchTerms: ["subtitle", "small"],
+    icon: <Heading3 size={18} />,
+    command: ({ editor, range }) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode("heading", { level: 3 })
+        .run();
+    },
+  },
+  {
+    title: "Heading 4",
+    description: "Big section heading.",
+    searchTerms: ["title", "big", "large"],
+    icon: <Heading4 size={18} />,
+    command: ({ editor, range }) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode("heading", { level: 4 })
+        .run();
+    },
+  },
+  {
+    title: "Bullet List",
+    description: "Create a simple bullet list.",
+    searchTerms: ["unordered", "point"],
+    icon: <List size={18} />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    },
+  },
+  {
+    title: "Numbered List",
+    description: "Create a list with numbering.",
+    searchTerms: ["ordered"],
+    icon: <ListOrdered size={18} />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    },
+  },
+  {
+    title: "Quote",
+    description: "Capture a quote.",
+    searchTerms: ["blockquote"],
+    icon: <TextQuote size={18} />,
+    command: ({ editor, range }) =>
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleNode("paragraph", "paragraph")
+        .toggleBlockquote()
+        .run(),
+  },
+  {
+    title: "Link Preview",
+    description: "Embed a Link Preview.",
+    searchTerms: ["link"],
+    icon: <Link2Icon size={18} />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).createLinkPreview().run();
+    },
+  },
+
+  {
+    title: "Image",
+    description: "Upload an image from your computer.",
+    searchTerms: ["photo", "picture", "media"],
+    icon: <ImageIcon size={18} />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).run();
+      // upload image
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = async () => {
+        if (input.files?.length) {
+          const file = input.files[0];
+          const pos = editor.view.state.selection.from;
+          //   uploadFn(file, editor.view, pos);
+        }
+      };
+      input.click();
+    },
+  },
+  {
+    title: "Youtube",
+    description: "Embed a Youtube video.",
+    searchTerms: ["video", "youtube", "embed"],
+    icon: <Youtube size={18} />,
+    command: ({ editor, range }) => {
+      const videoLink = prompt("Please enter Youtube Video Link");
+      //From https://regexr.com/3dj5t
+      const ytregex = new RegExp(
+        /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/,
+      );
+
+      if (ytregex.test(String(videoLink))) {
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setYoutubeVideo({
+            src: String(videoLink),
+          })
+          .run();
+      } else {
+        if (videoLink !== null) {
+          alert("Please enter a correct Youtube Video Link");
+        }
+      }
+    },
+  },
+]);
+
+export const slashCommand = Command.configure({
+  suggestion: {
+    items: () => suggestionItems,
+    render: renderItems,
+  },
+});
diff --git a/src/components/editor/extentions/slash-commands/slash-command-component.tsx b/src/components/editor/extentions/slash-commands/slash-command-component.tsx
new file mode 100644
index 0000000..de57f12
--- /dev/null
+++ b/src/components/editor/extentions/slash-commands/slash-command-component.tsx
@@ -0,0 +1,38 @@
+"use client";
+import {
+  EditorCommand,
+  EditorCommandEmpty,
+  EditorCommandItem,
+  EditorCommandList,
+} from "novel";
+import { suggestionItems } from ".";
+
+export function SlashCommandComponent() {
+  return (
+    <EditorCommand className="z-50 h-auto max-h-[330px]  w-72 overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
+      <EditorCommandEmpty className="px-2 text-muted-foreground">
+        No results
+      </EditorCommandEmpty>
+      <EditorCommandList>
+        {suggestionItems.map((item) => (
+          <EditorCommandItem
+            value={item.title}
+            onCommand={(val) => item?.command?.(val)}
+            className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent `}
+            key={item.title}
+          >
+            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
+              {item.icon}
+            </div>
+            <div>
+              <p className="font-medium">{item.title}</p>
+              <p className="text-xs text-muted-foreground">
+                {item.description}
+              </p>
+            </div>
+          </EditorCommandItem>
+        ))}
+      </EditorCommandList>
+    </EditorCommand>
+  );
+}
diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
new file mode 100644
index 0000000..2d10db7
--- /dev/null
+++ b/src/components/editor/index.tsx
@@ -0,0 +1,43 @@
+"use client";
+import "./styles.css";
+import {
+  EditorContent,
+  EditorRoot,
+  handleCommandNavigation,
+  JSONContent,
+} from "novel";
+import { defaultExtensions } from "./extentions";
+import { SlashCommandComponent } from "./extentions/slash-commands/slash-command-component";
+import BubbleMenu from "./menu/bubble-menu";
+import { MenuBar } from "./menu/menu-bar";
+
+const Editor = ({
+  onContentChange,
+  initialContent,
+}: {
+  initialContent: JSONContent | null;
+  onContentChange: (content: JSONContent) => void;
+}) => {
+  return (
+    <EditorRoot>
+      <EditorContent
+        slotBefore={<MenuBar />}
+        extensions={defaultExtensions}
+        editorProps={{
+          handleDOMEvents: {
+            keydown: (_view, event) => handleCommandNavigation(event),
+          },
+        }}
+        initialContent={initialContent ?? { type: "doc" }}
+        onUpdate={({ editor }) => {
+          onContentChange(editor.getJSON());
+        }}
+      >
+        <SlashCommandComponent />
+
+        <BubbleMenu />
+      </EditorContent>
+    </EditorRoot>
+  );
+};
+export default Editor;
diff --git a/src/components/editor/menu/bubble-menu.tsx b/src/components/editor/menu/bubble-menu.tsx
new file mode 100644
index 0000000..13b9abb
--- /dev/null
+++ b/src/components/editor/menu/bubble-menu.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { EditorBubble, useEditor } from "novel";
+import { Fragment, useState } from "react";
+import { NodeSelector } from "../selector/node-selector";
+import { Separator } from "@/components/ui/separator";
+import { LinkSelector } from "../selector/link-selector";
+import { TextButtons } from "../selector/text-buttont";
+import { ColorSelector } from "../selector/color-selector";
+
+const BubbleMenu = () => {
+  const { editor } = useEditor();
+  const [openNode, setOpenNode] = useState(false);
+  const [openColor, setOpenColor] = useState(false);
+  const [openLink, setOpenLink] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <EditorBubble
+      tippyOptions={{
+        placement: open ? "bottom-start" : "top",
+        onHidden: () => {
+          setOpen(false);
+          editor?.chain().unsetHighlight().run();
+        },
+      }}
+      className="flex w-fit max-w-[90vw] overflow-hidden rounded-md border border-muted bg-background shadow-xl"
+    >
+      {!open && (
+        <Fragment>
+          <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+          <Separator orientation="vertical" />
+          <LinkSelector open={openLink} onOpenChange={setOpenLink} />
+          <Separator orientation="vertical" />
+          <TextButtons />
+          <Separator orientation="vertical" />
+          <ColorSelector open={openColor} onOpenChange={setOpenColor} />
+        </Fragment>
+      )}
+    </EditorBubble>
+  );
+};
+
+export default BubbleMenu;
diff --git a/src/components/editor/menu/menu-bar.tsx b/src/components/editor/menu/menu-bar.tsx
new file mode 100644
index 0000000..ec74b6b
--- /dev/null
+++ b/src/components/editor/menu/menu-bar.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/components/ui/button";
+import { useEditor } from "novel";
+import { RedoIcon, UndoIcon } from "lucide-react";
+import { selectionItems } from "../selector/selection-items";
+
+export const MenuBar = () => {
+  const { editor } = useEditor();
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="sticky top-0 z-50 flex justify-between gap-1 bg-background py-4">
+      <div className="flex flex-wrap gap-1">
+        {selectionItems.map((item) => (
+          <Button
+            key={item.name}
+            size={"icon"}
+            variant={"outline"}
+            onClick={() => item.command(editor)}
+            disabled={item?.canRun ? item.canRun(editor) : false}
+            className={item.isActive(editor) ? "border-foreground/75" : ""}
+          >
+            <item.icon />
+          </Button>
+        ))}
+      </div>
+      <div className="flex gap-1">
+        <Button
+          variant={"outline"}
+          size={"icon"}
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!editor.can().chain().focus().undo().run()}
+        >
+          <UndoIcon className="size-4" />
+        </Button>
+        <Button
+          variant={"outline"}
+          size={"icon"}
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!editor.can().chain().focus().redo().run()}
+        >
+          <RedoIcon className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/editor/selector/color-selector.tsx b/src/components/editor/selector/color-selector.tsx
new file mode 100644
index 0000000..cbce554
--- /dev/null
+++ b/src/components/editor/selector/color-selector.tsx
@@ -0,0 +1,196 @@
+import { Check, ChevronDown } from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+export interface BubbleColorMenuItem {
+  name: string;
+  color: string;
+}
+
+const TEXT_COLORS: BubbleColorMenuItem[] = [
+  {
+    name: "Default",
+    color: "var(--novel-black)",
+  },
+  {
+    name: "Purple",
+    color: "#9333EA",
+  },
+  {
+    name: "Red",
+    color: "#E00000",
+  },
+  {
+    name: "Yellow",
+    color: "#EAB308",
+  },
+  {
+    name: "Blue",
+    color: "#2563EB",
+  },
+  {
+    name: "Green",
+    color: "#008A00",
+  },
+  {
+    name: "Orange",
+    color: "#FFA500",
+  },
+  {
+    name: "Pink",
+    color: "#BA4081",
+  },
+  {
+    name: "Gray",
+    color: "#A8A29E",
+  },
+];
+
+const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
+  {
+    name: "Default",
+    color: "var(--novel-highlight-default)",
+  },
+  {
+    name: "Purple",
+    color: "var(--novel-highlight-purple)",
+  },
+  {
+    name: "Red",
+    color: "var(--novel-highlight-red)",
+  },
+  {
+    name: "Yellow",
+    color: "var(--novel-highlight-yellow)",
+  },
+  {
+    name: "Blue",
+    color: "var(--novel-highlight-blue)",
+  },
+  {
+    name: "Green",
+    color: "var(--novel-highlight-green)",
+  },
+  {
+    name: "Orange",
+    color: "var(--novel-highlight-orange)",
+  },
+  {
+    name: "Pink",
+    color: "var(--novel-highlight-pink)",
+  },
+  {
+    name: "Gray",
+    color: "var(--novel-highlight-gray)",
+  },
+];
+
+interface ColorSelectorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
+  const { editor } = useEditor();
+
+  if (!editor) return null;
+  const activeColorItem = TEXT_COLORS.find(({ color }) =>
+    editor.isActive("textStyle", { color })
+  );
+
+  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
+    editor.isActive("highlight", { color })
+  );
+
+  return (
+    <Popover modal={true} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button size="sm" className="gap-2 rounded-none" variant="ghost">
+          <span
+            className="rounded-sm px-1"
+            style={{
+              color: activeColorItem?.color,
+              backgroundColor: activeHighlightItem?.color,
+            }}
+          >
+            A
+          </span>
+          <ChevronDown className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        sideOffset={5}
+        className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl "
+        align="start"
+      >
+        <div className="flex flex-col">
+          <div className="my-1 px-2 text-sm font-semibold text-muted-foreground">
+            Color
+          </div>
+          {TEXT_COLORS.map(({ name, color }) => (
+            <EditorBubbleItem
+              key={name}
+              onSelect={() => {
+                editor.commands.unsetColor();
+                name !== "Default" &&
+                  editor
+                    .chain()
+                    .focus()
+                    .setColor(color || "")
+                    .run();
+                onOpenChange(false);
+              }}
+              className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
+            >
+              <div className="flex items-center gap-2">
+                <div
+                  className="rounded-sm border px-2 py-px font-medium"
+                  style={{ color }}
+                >
+                  A
+                </div>
+                <span>{name}</span>
+              </div>
+            </EditorBubbleItem>
+          ))}
+        </div>
+        <div>
+          <div className="my-1 px-2 text-sm font-semibold text-muted-foreground">
+            Background
+          </div>
+          {HIGHLIGHT_COLORS.map(({ name, color }) => (
+            <EditorBubbleItem
+              key={name}
+              onSelect={() => {
+                editor.commands.unsetHighlight();
+                name !== "Default" &&
+                  editor.chain().focus().setHighlight({ color }).run();
+                onOpenChange(false);
+              }}
+              className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
+            >
+              <div className="flex items-center gap-2">
+                <div
+                  className="rounded-sm border px-2 py-px font-medium"
+                  style={{ backgroundColor: color }}
+                >
+                  A
+                </div>
+                <span>{name}</span>
+              </div>
+              {editor.isActive("highlight", { color }) && (
+                <Check className="h-4 w-4" />
+              )}
+            </EditorBubbleItem>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/src/components/editor/selector/link-selector.tsx b/src/components/editor/selector/link-selector.tsx
new file mode 100644
index 0000000..0d175ff
--- /dev/null
+++ b/src/components/editor/selector/link-selector.tsx
@@ -0,0 +1,106 @@
+import { Button } from "@/components/ui/button";
+import { PopoverContent } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverTrigger } from "@radix-ui/react-popover";
+import { Check, Trash } from "lucide-react";
+import { useEditor } from "novel";
+import { useEffect, useRef } from "react";
+
+export function isValidUrl(url: string) {
+  try {
+    new URL(url);
+    return true;
+  } catch (_e) {
+    return false;
+  }
+}
+export function getUrlFromString(str: string) {
+  if (isValidUrl(str)) return str;
+  try {
+    if (str.includes(".") && !str.includes(" ")) {
+      return new URL(`https://${str}`).toString();
+    }
+  } catch (_e) {
+    return null;
+  }
+}
+interface LinkSelectorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { editor } = useEditor();
+
+  // Autofocus on input by default
+  useEffect(() => {
+    inputRef.current?.focus();
+  });
+  if (!editor) return null;
+
+  return (
+    <Popover modal={true} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="gap-2 rounded-none border-none"
+        >
+          <p className="text-base">↗</p>
+          <p
+            className={cn("underline decoration-stone-400 underline-offset-4", {
+              "text-blue-500": editor.isActive("link"),
+            })}
+          >
+            Link
+          </p>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-60 p-0" sideOffset={10}>
+        <form
+          onSubmit={(e) => {
+            const target = e.currentTarget as HTMLFormElement;
+            e.preventDefault();
+            const input = target[0] as HTMLInputElement;
+            const url = getUrlFromString(input.value);
+            if (url) {
+              editor.chain().focus().setLink({ href: url }).run();
+              onOpenChange(false);
+            }
+          }}
+          className="flex p-1"
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Paste a link"
+            className="flex-1 bg-background p-1 text-sm outline-none"
+            defaultValue={editor.getAttributes("link").href || ""}
+          />
+          {editor.getAttributes("link").href ? (
+            <Button
+              size="icon"
+              variant="outline"
+              type="button"
+              className="flex h-8 items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
+              onClick={() => {
+                editor.chain().focus().unsetLink().run();
+                if (inputRef?.current) {
+                  inputRef.current.value = "";
+                }
+                onOpenChange(false);
+              }}
+            >
+              <Trash className="h-4 w-4" />
+            </Button>
+          ) : (
+            <Button size="icon" className="h-8">
+              <Check className="h-4 w-4" />
+            </Button>
+          )}
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/src/components/editor/selector/node-selector.tsx b/src/components/editor/selector/node-selector.tsx
new file mode 100644
index 0000000..388c01b
--- /dev/null
+++ b/src/components/editor/selector/node-selector.tsx
@@ -0,0 +1,56 @@
+import { Check, ChevronDown } from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+
+import { Button } from "@/components/ui/button";
+import { PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover } from "@radix-ui/react-popover";
+import { selectionItems } from "./selection-items";
+
+interface NodeSelectorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+const items = selectionItems.filter((item) => !item.inline);
+
+export const NodeSelector = ({ open, onOpenChange }: NodeSelectorProps) => {
+  const { editor } = useEditor();
+  if (!editor) return null;
+  const activeList = items.filter((item) => item.isActive(editor));
+  const activeItem = activeList.pop() ?? {
+    name: "Multiple",
+  };
+
+  return (
+    <Popover modal={true} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        asChild
+        className="gap-2 rounded-none border-none hover:bg-accent focus:ring-0"
+      >
+        <Button size="sm" variant="ghost" className="gap-2">
+          <span className="whitespace-nowrap text-sm">{activeItem.name}</span>
+          <ChevronDown className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent sideOffset={5} align="start" className="w-48 p-1">
+        {items.map((item) => (
+          <EditorBubbleItem
+            key={item.name}
+            onSelect={(editor) => {
+              item.command(editor);
+              onOpenChange(false);
+            }}
+            className="flex cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent"
+          >
+            <div className="flex items-center space-x-2">
+              <div className="rounded-sm border p-1">
+                <item.icon className="h-3 w-3" />
+              </div>
+              <span>{item.name}</span>
+            </div>
+            {activeItem.name === item.name && <Check className="h-4 w-4" />}
+          </EditorBubbleItem>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/src/components/editor/selector/selection-items.tsx b/src/components/editor/selector/selection-items.tsx
new file mode 100644
index 0000000..d91acf9
--- /dev/null
+++ b/src/components/editor/selector/selection-items.tsx
@@ -0,0 +1,140 @@
+import {
+  BoldIcon,
+  ItalicIcon,
+  LucideIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  CheckSquare,
+  Heading2,
+  Heading3,
+  Heading4,
+  ListOrdered,
+  TextIcon,
+  TextQuote,
+  SeparatorHorizontalIcon,
+  Heading5,
+  Heading6,
+  QuoteIcon,
+} from "lucide-react";
+import { EditorInstance } from "novel";
+
+export type SelectorItem = {
+  name: string;
+  icon: LucideIcon;
+  inline?: boolean;
+  command: (editor: EditorInstance) => void;
+  isActive: (editor: EditorInstance) => boolean;
+  canRun?: (editor: EditorInstance) => boolean;
+};
+
+export const selectionItems: SelectorItem[] = [
+  {
+    name: "bold",
+    isActive: (editor) => editor.isActive("bold"),
+    command: (editor) => editor.chain().focus().toggleBold().run(),
+    icon: BoldIcon,
+    inline: true,
+    canRun: (editor) => !editor.can().chain().focus().toggleBold().run(),
+  },
+  {
+    name: "italic",
+    isActive: (editor) => editor.isActive("italic"),
+    command: (editor) => editor.chain().focus().toggleItalic().run(),
+    icon: ItalicIcon,
+    inline: true,
+    canRun: (editor) => !editor.can().chain().focus().toggleItalic().run(),
+  },
+  {
+    name: "underline",
+    isActive: (editor) => editor.isActive("underline"),
+    command: (editor) => editor.chain().focus().toggleUnderline().run(),
+    icon: UnderlineIcon,
+    inline: true,
+    canRun: (editor) => !editor.can().chain().focus().toggleUnderline().run(),
+  },
+  {
+    name: "strike",
+    isActive: (editor) => editor.isActive("strike"),
+    command: (editor) => editor.chain().focus().toggleStrike().run(),
+    icon: StrikethroughIcon,
+    inline: true,
+    canRun: (editor) => !editor.can().chain().focus().toggleStrike().run(),
+  },
+
+  // blocks
+  {
+    name: "Text",
+    icon: TextIcon,
+    command: (editor) => editor.chain().focus().clearNodes().run(),
+    isActive: (editor) => editor.isActive("paragraph"), //node?.type?.name === "paragraph",
+  },
+  {
+    name: "Überschrift",
+    icon: Heading2,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 2 }),
+  },
+  {
+    name: "Überschrift 3",
+    icon: Heading3,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 3 }),
+  },
+  {
+    name: "Überschrift 4",
+    icon: Heading4,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleHeading({ level: 4 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 4 }),
+  },
+  {
+    name: "Überschrift 5",
+    icon: Heading5,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleHeading({ level: 5 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 5 }),
+  },
+  {
+    name: "Überschrift 6",
+    icon: Heading6,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleHeading({ level: 6 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 6 }),
+  },
+  {
+    name: "To-do List",
+    icon: CheckSquare,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleTaskList().run(),
+    isActive: (editor) => editor.isActive("taskItem"),
+  },
+  {
+    name: "Bullet List",
+    icon: ListOrdered,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive("bulletList"),
+  },
+  {
+    name: "Numbered List",
+    icon: ListOrdered,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive("orderedList"),
+  },
+  {
+    name: "Quote",
+    icon: QuoteIcon,
+    command: (editor) =>
+      editor.chain().focus().clearNodes().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive("blockquote"),
+  },
+  {
+    name: "Seperator",
+    icon: SeparatorHorizontalIcon,
+    command: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: (editor) => editor.isActive("horizontalRule"),
+  },
+];
diff --git a/src/components/editor/selector/text-buttont.tsx b/src/components/editor/selector/text-buttont.tsx
new file mode 100644
index 0000000..1f1d469
--- /dev/null
+++ b/src/components/editor/selector/text-buttont.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { EditorBubbleItem, useEditor } from "novel";
+import { selectionItems } from "./selection-items";
+
+const items = selectionItems.filter((item) => item.inline);
+
+export const TextButtons = () => {
+  const { editor } = useEditor();
+  if (!editor) return null;
+  editor.on("selectionUpdate", () => {
+    editor.view.dispatch(editor.state.tr);
+  });
+
+  return (
+    <div className="flex">
+      {items.map((item) => (
+        <EditorBubbleItem
+          key={item.name}
+          onSelect={(editor) => {
+            item.command(editor);
+          }}
+        >
+          <Button
+            size="sm"
+            className="rounded-none"
+            variant="ghost"
+            type="button"
+          >
+            <item.icon
+              className={cn(
+                "h-4 w-4",
+                item.isActive(editor) && "text-blue-500",
+              )}
+            />
+          </Button>
+        </EditorBubbleItem>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/editor/styles.css b/src/components/editor/styles.css
new file mode 100644
index 0000000..2d09860
--- /dev/null
+++ b/src/components/editor/styles.css
@@ -0,0 +1,175 @@
+/* Basic editor styles */
+.tiptap > *:first-child {
+  margin-top: 0;
+}
+
+.ProseMirror {
+  min-height: 100vh;
+  width: 100%;
+}
+
+.ProseMirror:focus {
+  outline: none;
+}
+
+.tiptap ul li p,
+.tiptap ol li p {
+  margin: 0.75rem 0;
+}
+
+.tiptap ul,
+.tiptap ol {
+  margin-left: 1rem;
+  padding: 0.25rem;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+}
+
+/* Heading styles */
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  margin: 0.5rem 0;
+  line-height: 1.1;
+  text-wrap: pretty;
+}
+
+.tiptap h1,
+.tiptap h2 {
+  margin: 1rem 0;
+  font-size: 2.25rem; /* Equivalent to text-4xl */
+}
+
+.tiptap h3 {
+  font-size: 1.875rem; /* Equivalent to text-3xl */
+}
+
+.tiptap h4 {
+  font-size: 1.5rem; /* Equivalent to text-2xl */
+}
+
+.tiptap h5 {
+  font-size: 1.25rem; /* Equivalent to text-xl */
+}
+
+.tiptap h6 {
+  font-size: 1.125rem; /* Equivalent to text-lg */
+}
+
+.tiptap blockquote {
+  @apply m-4 border-l-4 border-border pl-4;
+  /* border-left: 1rem solid var(--primary);
+  padding-left: 1rem; */
+}
+
+.tiptap hr {
+  margin: 0.25rem 0;
+}
+
+::selection {
+  background-color: #5abbf7;
+
+  border-radius: 0.375rem;
+}
+
+.menu-bar button {
+  transition-duration: 0s;
+}
+
+.menu-bar .is-active {
+  border-color: var(--primary-color);
+}
+
+/* Task List */
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+
+  margin: 0;
+  cursor: pointer;
+  width: 1.2em;
+  height: 1.2em;
+  position: relative;
+  top: 5px;
+  border: 2px solid var(--border);
+  margin-right: 0.3rem;
+  display: grid;
+  border-radius: 0.25rem;
+  place-content: center;
+}
+/* ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
+  background-color: #000;
+}
+ul[data-type="taskList"] li > label input[type="checkbox"]:active {
+  background-color: #000;
+} */
+ul[data-type="taskList"] li > label input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em;
+  transform-origin: center;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: var(--muted-foreground);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  outline: none !important;
+  background-color: var(--novel-highlight-blue);
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+.drag-handle {
+  position: fixed;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1.2rem;
+  height: 1.5rem;
+  z-index: 50;
+  cursor: grab;
+}
+.drag-handle:hover {
+  background-color: var(--novel-stone-100);
+  transition: background-color 0.2s;
+}
+.drag-handle:active {
+  background-color: var(--novel-stone-200);
+  transition: background-color 0.2s;
+  cursor: grabbing;
+}
+.drag-handle.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+@media screen and (max-width: 600px) {
+  .drag-handle {
+    display: none;
+    pointer-events: none;
+  }
+}
+.dark .drag-handle {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+}
diff --git a/src/components/global-search-widget.tsx b/src/components/global-search-widget.tsx
new file mode 100644
index 0000000..41401f7
--- /dev/null
+++ b/src/components/global-search-widget.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { cn, debounce } from "@/lib/utils";
+import React from "react";
+import { Input } from "./ui/input";
+
+function GlobalSearchWidget({
+  className,
+  onDebouncedSearch,
+}: {
+  className?: string;
+  onDebouncedSearch: (query: string) => void;
+}) {
+  const [query, setQuery] = React.useState("");
+
+  const debouncedSearch = React.useMemo(
+    () =>
+      debounce((q: string) => {
+        onDebouncedSearch(q);
+      }, 300),
+    [],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-20 w-full items-center justify-center rounded-md bg-background p-4",
+        className,
+      )}
+    >
+      <Input
+        className="shadow-none"
+        value={query}
+        onChange={(e) => {
+          setQuery(e.currentTarget.value);
+          debouncedSearch(e.currentTarget.value);
+        }}
+        placeholder="Suche Artikel oder Kategorien..."
+      />
+    </div>
+  );
+}
+
+export default GlobalSearchWidget;
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
new file mode 100644
index 0000000..c1ee98f
--- /dev/null
+++ b/src/components/icons.tsx
@@ -0,0 +1,25 @@
+import { LucideProps } from "lucide-react";
+
+export const Icons = {
+  logo(props: LucideProps) {
+    return (
+      <svg
+        width="70"
+        height="40"
+        viewBox="0 0 70 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M37.2551 1.61586C38.1803 0.653384 39.4368 0.112671 40.7452 0.112671C46.6318 0.112671 52.1793 0.112674 57.6424 0.112685C68.6302 0.112708 74.1324 13.9329 66.3629 22.0156L49.4389 39.6217C48.662 40.43 47.3335 39.8575 47.3335 38.7144V23.2076L49.2893 21.1729C50.8432 19.5564 49.7427 16.7923 47.5451 16.7923H22.6667L37.2551 1.61586Z"
+          fill="currentColor"
+        />
+        <path
+          d="M32.7449 38.3842C31.8198 39.3467 30.5633 39.8874 29.2549 39.8874C23.3683 39.8874 17.8208 39.8874 12.3577 39.8874C1.36983 39.8873 -4.13236 26.0672 3.63721 17.9844L20.5612 0.378369C21.3381 -0.429908 22.6666 0.142547 22.6666 1.28562L22.6667 16.7923L20.7108 18.8271C19.1569 20.4437 20.2574 23.2077 22.455 23.2077L47.3335 23.2076L32.7449 38.3842Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  },
+};
diff --git a/src/components/image-upload-form.tsx b/src/components/image-upload-form.tsx
new file mode 100644
index 0000000..ac4cf26
--- /dev/null
+++ b/src/components/image-upload-form.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { uploadFile } from "@/server/actions/image";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { formatFileSize } from "@/lib/utils";
+
+export default function ImageUploadButton({
+  onUploaded,
+}: {
+  onUploaded: (url: string) => void;
+}) {
+  const [image, setImage] = useState<File | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > 1024 * 1024 * 2) return toast.error("Datei ist zu groß.");
+    if (file.type.startsWith("image/")) {
+      return toast.error("Nur Bilder können hochgeladen werden.");
+    }
+    setImage(file);
+  };
+
+  const handleUpload = async () => {
+    if (!image) return;
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("file", image); // Append file with a field name
+    try {
+      const url = await uploadFile(formData);
+      if (typeof url !== "string") toast.error("Etwas ist fehlgeschlagen");
+      else {
+        onUploaded(url);
+        toast.success("Upload erfolgreich");
+      }
+    } catch (e) {
+      console.error("Fehler aufgetreten: " + e);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="flex max-w-lg items-center gap-4">
+      <Button
+        disabled={loading || !image}
+        onClick={(e) => {
+          e.preventDefault();
+          handleUpload();
+        }}
+      >
+        {loading ? "laden..." : "Bild Hochladen"}
+      </Button>
+      <Input
+        id="file"
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+      />
+      {image && <p className="w-full">{formatFileSize(image.size)}</p>}
+    </div>
+  );
+}
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index ce8f028..fecb520 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -11,7 +11,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import CreateArticleDialog from "@/components/article/create-article-dialog";
-import CreateCategoryDialog from "@/app/(PAGES)/_components/category/create-category-dialog";
+import CreateCategoryDialog from "@/components/category/create-category-dialog";
 import { appRoutes } from "@/config";
 
 async function Navbar() {
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/wiki-sidebar.tsx
similarity index 94%
rename from src/components/layout/app-sidebar.tsx
rename to src/components/layout/wiki-sidebar.tsx
index 21bca26..44233e0 100644
--- a/src/components/layout/app-sidebar.tsx
+++ b/src/components/layout/wiki-sidebar.tsx
@@ -10,7 +10,6 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
-  SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar";
 import Link from "next/link";
@@ -26,7 +25,7 @@ import {
 import { appRoutes } from "@/config";
 import SidebarLink from "./sidebar-link";
 
-export async function AppSidebar({
+export async function WikiSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   const sidebarContent = await api.app.getSidebarContent();
@@ -49,7 +48,9 @@ export async function AppSidebar({
                 <SidebarMenuItem>
                   <CollapsibleTrigger asChild>
                     <SidebarMenuButton>
-                      {category.name}{" "}
+                      <Link href={appRoutes.category(category.slug)}>
+                        <span>{category.name}</span>
+                      </Link>
                       <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
                       <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                     </SidebarMenuButton>
diff --git a/src/components/text-editor/editor.tsx b/src/components/text-editor/editor.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/text-editor/extentions/block-drag.tsx b/src/components/text-editor/extentions/block-drag.tsx
deleted file mode 100644
index 17c8b44..0000000
--- a/src/components/text-editor/extentions/block-drag.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { useDrag, useDrop } from "react-dnd";
-
-const DRAG_TYPE = "TIPTAP_BLOCK";
-
-export const DraggableBlockView = (props) => {
-  const { node, getPos, editor } = props;
-  const [showDragHandle, setShowDragHandle] = useState(false);
-
-  // Get node position and ID
-  const nodePos = getPos();
-  const nodeId = `${node.type.name}-${nodePos}`;
-
-  // Set up drag
-  const [{ isDragging }, drag, dragPreview] = useDrag({
-    type: DRAG_TYPE,
-    item: { id: nodeId, pos: nodePos, type: node.type.name },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    begin: () => {
-      // Select the block on drag start
-      editor.commands.setNodeSelection(nodePos);
-      return { id: nodeId, pos: nodePos, type: node.type.name };
-    },
-  });
-
-  // Set up drop
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: DRAG_TYPE,
-    drop: (item) => {
-      if (item.pos !== nodePos) {
-        // Move the dragged node to this position
-        const tr = editor.state.tr;
-        const sourcePos = item.pos;
-        const targetPos = nodePos;
-
-        // Logic to move nodes in the document
-        // This is the complex part that requires careful handling of ProseMirror positions
-        const sourceNode = tr.doc.nodeAt(sourcePos);
-        if (sourceNode) {
-          tr.delete(sourcePos, sourcePos + sourceNode.nodeSize);
-          const newTargetPos =
-            targetPos > sourcePos ? targetPos - sourceNode.nodeSize : targetPos;
-          tr.insert(newTargetPos, sourceNode);
-          editor.view.dispatch(tr);
-        }
-      }
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-
-  // Reference for the drag preview (the whole block)
-  const dragRef = useRef(null);
-
-  return (
-    <NodeViewWrapper
-      ref={drop}
-      data-drag-handle={nodeId}
-      style={{
-        position: "relative",
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? "#f0f9ff" : "transparent",
-      }}
-      onMouseEnter={() => setShowDragHandle(true)}
-      onMouseLeave={() => setShowDragHandle(false)}
-    >
-      {showDragHandle && (
-        <div
-          ref={drag}
-          className="drag-handle"
-          style={{
-            position: "absolute",
-            left: "-24px",
-            top: "8px",
-            cursor: "grab",
-            color: "#aaa",
-          }}
-        >
-          ⋮⋮
-        </div>
-      )}
-      <div ref={dragPreview}>
-        <NodeViewContent />
-      </div>
-    </NodeViewWrapper>
-  );
-};
diff --git a/src/components/text-editor/extentions/index.ts b/src/components/text-editor/extentions/index.ts
deleted file mode 100644
index 23a9209..0000000
--- a/src/components/text-editor/extentions/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Color } from "@tiptap/extension-color";
-import ListItem from "@tiptap/extension-list-item";
-import TextStyle from "@tiptap/extension-text-style";
-import StarterKit from "@tiptap/starter-kit";
-import Image from "@tiptap/extension-image";
-import GlobalDragHandle from "tiptap-extension-global-drag-handle";
-import { Extension } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { DraggableBlockView } from "./block-drag";
-
-const DraggableBlocks = Extension.create({
-  name: "draggableBlocks",
-
-  addProseMirrorPlugins() {
-    return [];
-  },
-
-  // Apply this nodeview to all block nodes
-  addNodeView() {
-    return ReactNodeViewRenderer(DraggableBlockView);
-  },
-});
-
-export const extensions = [
-  Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  /* @ts-ignore */
-  TextStyle.configure({ types: [ListItem.name] }),
-  StarterKit.configure({
-    code: false,
-    codeBlock: false,
-    heading: {
-      levels: [1, 2, 3, 4, 5, 6],
-    },
-    bulletList: {
-      keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-    },
-    orderedList: {
-      keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-    },
-  }),
-  GlobalDragHandle,
-  Image,
-  DraggableBlocks.configure({
-    types: [
-      "paragraph",
-      "heading",
-      "blockquote",
-      "codeBlock",
-      "bulletList",
-      "orderedList",
-    ],
-  }),
-];
diff --git a/src/components/text-editor/index.tsx b/src/components/text-editor/index.tsx
deleted file mode 100644
index 0e433f4..0000000
--- a/src/components/text-editor/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import "./styles.css";
-import React from "react";
-import { EditorProvider, EditorProviderProps } from "@tiptap/react";
-import { MenuBar } from "./menu-bar";
-import { extensions } from "./extentions";
-import { cn } from "@/lib/utils";
-
-function Editor({
-  editorProviderProps,
-  readOnly,
-}: {
-  editorProviderProps: EditorProviderProps;
-  readOnly?: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        "rounded-md p-2",
-        !readOnly && "bg-gradient-to-b from-muted to-background",
-      )}
-    >
-      <EditorProvider
-        immediatelyRender={false}
-        extensions={extensions}
-        slotBefore={!readOnly && <MenuBar />}
-        {...editorProviderProps}
-        editable={!readOnly}
-      />
-
-      {JSON.stringify(editorProviderProps.content)}
-    </div>
-  );
-}
-export default Editor;
diff --git a/src/components/text-editor/menu-bar.tsx b/src/components/text-editor/menu-bar.tsx
deleted file mode 100644
index bedd927..0000000
--- a/src/components/text-editor/menu-bar.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import ColorPickerPopover from "@/components/color-picker/color-picker-popover";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { RGBAToHexA } from "@/lib/utils";
-import { useCurrentEditor } from "@tiptap/react";
-import {
-  BoldIcon,
-  CodeIcon,
-  CodeSquareIcon,
-  Heading2Icon,
-  Heading3Icon,
-  Heading4Icon,
-  Heading5Icon,
-  Heading6Icon,
-  ItalicIcon,
-  ListIcon,
-  ListOrderedIcon,
-  QuoteIcon,
-  RedoIcon,
-  SeparatorHorizontalIcon,
-  StrikethroughIcon,
-  TextIcon,
-  TypeIcon,
-  UndoIcon,
-} from "lucide-react";
-
-export const MenuBar = () => {
-  const { editor } = useCurrentEditor();
-
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <div className="menu-bar mb-4 flex items-center justify-between space-y-2">
-      {/* <div className="flex w-full items-center justify-between">
-       
-      </div> */}
-      <div className="Button-group flex items-center gap-1">
-        <Button
-          size={"icon"}
-          variant={"outline"}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          disabled={!editor.can().chain().focus().toggleBold().run()}
-          className={editor.isActive("bold") ? "is-active" : ""}
-        >
-          <BoldIcon className="size-4" />
-        </Button>
-        <Button
-          size={"icon"}
-          variant={"outline"}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          disabled={!editor.can().chain().focus().toggleItalic().run()}
-          className={
-            editor.isActive("italic") ? "bg-foreground text-background" : ""
-          }
-        >
-          <ItalicIcon className="size-4" />
-        </Button>
-        <Button
-          size={"icon"}
-          variant={"outline"}
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-          disabled={!editor.can().chain().focus().toggleStrike().run()}
-          className={editor.isActive("strike") ? "is-active" : ""}
-        >
-          <StrikethroughIcon className="size-4" />
-        </Button>
-        {/* <Button
-          size={"icon"}
-          variant={"outline"}
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          disabled={!editor.can().chain().focus().toggleCode().run()}
-          className={editor.isActive("code") ? "is-active" : ""}
-        >
-          <CodeIcon className="size-4" />
-        </Button> */}
-
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().setParagraph().run()}
-          className={editor.isActive("paragraph") ? "is-active" : ""}
-        >
-          <TypeIcon className="size-4" />
-        </Button>
-
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 2 }).run()
-          }
-          className={
-            editor.isActive("heading", { level: 2 }) ? "is-active" : ""
-          }
-        >
-          <Heading2Icon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 3 }).run()
-          }
-          className={
-            editor.isActive("heading", { level: 3 }) ? "is-active" : ""
-          }
-        >
-          <Heading3Icon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 4 }).run()
-          }
-          className={
-            editor.isActive("heading", { level: 4 }) ? "is-active" : ""
-          }
-        >
-          <Heading4Icon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 5 }).run()
-          }
-          className={
-            editor.isActive("heading", { level: 5 }) ? "is-active" : ""
-          }
-        >
-          <Heading5Icon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 6 }).run()
-          }
-          className={
-            editor.isActive("heading", { level: 6 }) ? "is-active" : ""
-          }
-        >
-          <Heading6Icon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          className={editor.isActive("bulletList") ? "is-active" : ""}
-        >
-          <ListIcon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          className={editor.isActive("orderedList") ? "is-active" : ""}
-        >
-          <ListOrderedIcon className="size-4" />
-        </Button>
-        {/* <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-          className={editor.isActive("codeBlock") ? "is-active" : ""}
-        >
-          <CodeSquareIcon className="size-4" />
-        </Button> */}
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          className={editor.isActive("blockquote") ? "is-active" : ""}
-        >
-          <QuoteIcon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().setHorizontalRule().run()}
-        >
-          <SeparatorHorizontalIcon className="size-4" />
-        </Button>
-        <ColorPickerPopover
-          // initialColor={editor.getAttributes("textStyle").color}
-          onInput={(color) => editor.chain().focus().setColor(color).run()}
-        />
-      </div>
-      <div className="flex items-center gap-1">
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().undo().run()}
-          disabled={!editor.can().chain().focus().undo().run()}
-        >
-          <UndoIcon className="size-4" />
-        </Button>
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={() => editor.chain().focus().redo().run()}
-          disabled={!editor.can().chain().focus().redo().run()}
-        >
-          <RedoIcon className="size-4" />
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/text-editor/plugins/draggable-node.tsx b/src/components/text-editor/plugins/draggable-node.tsx
deleted file mode 100644
index d47ad3b..0000000
--- a/src/components/text-editor/plugins/draggable-node.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { useDraggable } from "@dnd-kit/core";
-
-const DraggableBlock = ({ node }: any) => {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: node.attrs.id,
-  });
-
-  return (
-    <NodeViewWrapper
-      ref={setNodeRef}
-      style={{
-        transform: transform
-          ? `translate(${transform.x}px, ${transform.y}px)`
-          : "none",
-      }}
-      className="relative cursor-grab border bg-white p-2 shadow-md"
-    >
-      {/* Drag Handle */}
-      <div
-        {...listeners}
-        {...attributes}
-        className="absolute left-0 top-0 cursor-grab bg-gray-300 p-1"
-      >
-        ⠿
-      </div>
-
-      {/* Content */}
-      <NodeViewContent as="div" />
-    </NodeViewWrapper>
-  );
-};
-
-export default DraggableBlock;
diff --git a/src/components/text-editor/styles.css b/src/components/text-editor/styles.css
deleted file mode 100644
index a6d7d91..0000000
--- a/src/components/text-editor/styles.css
+++ /dev/null
@@ -1,135 +0,0 @@
-/* Basic editor styles */
-.tiptap > *:first-child {
-  margin-top: 0;
-}
-.ProseMirror:focus {
-  outline: none;
-}
-
-/* List styles */
-/* .tiptap ul,
-.tiptap ol {
-  padding: 0 1rem;
-  margin: 1.25rem 1rem 1.25rem 0.4rem;
-} */
-
-.tiptap ul li p,
-.tiptap ol li p {
-  @apply my-1;
-}
-
-.tiptap ul,
-ol {
-  @apply ml-4 p-1;
-}
-
-.tiptap ul {
-  @apply list-disc;
-}
-
-.tiptap ol {
-  @apply list-decimal;
-}
-
-/* Heading styles */
-.tiptap h1,
-.tiptap h2,
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-  @apply my-2;
-  line-height: 1.1;
-  text-wrap: pretty;
-}
-
-.tiptap h1,
-.tiptap h2 {
-  @apply my-4;
-}
-
-.tiptap h2 {
-  @apply text-4xl;
-}
-
-.tiptap h3 {
-  @apply text-3xl;
-}
-
-.tiptap h4 {
-  @apply text-2xl;
-}
-
-.tiptap h5 {
-  @apply text-xl;
-}
-.tiptap h6 {
-  @apply text-lg;
-}
-
-/* Code and preformatted text styles */
-/* .tiptap code {
-  @apply bg-foreground p-1 text-background;
-}
-
-.tiptap pre {
-  background: var(--black);
-  border-radius: 0.5rem;
-  color: var(--white);
-  font-family: "JetBrainsMono", monospace;
-  margin: 1.5rem 0;
-  padding: 0.75rem 1rem;
-}
-
-.tiptap pre code {
-  background: none;
-  color: inherit;
-  font-size: 0.8rem;
-  padding: 0;
-} */
-
-/* Blockquote styles */
-.tiptap blockquote {
-  @apply m-6 border-l-2 pl-4;
-  /* border-left: 3px solid var(--gray-3);
-  margin: 1.5rem 0;
-  padding-left: 1rem; */
-}
-
-/* Horizontal rule styles */
-.tiptap hr {
-  @apply my-1;
-}
-
-::selection {
-  @apply rounded-md bg-muted-foreground/25;
-}
-
-.menu-bar button {
-  @apply duration-0;
-}
-
-.menu-bar .is-active {
-  @apply border-primary;
-}
-
-.drag-handle {
-  @apply bg-red-500;
-}
-
-.block-drag-handle {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #aaa;
-  background: white;
-  border-radius: 4px;
-  z-index: 10;
-}
-
-.block-drag-handle:hover {
-  color: #333;
-  background: #f1f1f1;
-}
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..d6a5226
--- /dev/null
+++ b/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index cabfbfc..75a05d9 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      "rounded-lg border bg-card text-card-foreground shadow-none",
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLDivElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/lib/hooks/infinite-items-observer-hook.tsx b/src/lib/hooks/infinite-items-observer-hook.tsx
new file mode 100644
index 0000000..31eea56
--- /dev/null
+++ b/src/lib/hooks/infinite-items-observer-hook.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+
+export function useInfiniteItemsObserver({
+  bottomObserverRef,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+}: {
+  bottomObserverRef: React.RefObject<HTMLLIElement>;
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+}) {
+  const bottomObserver = React.useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries;
+      if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+    [fetchNextPage, hasNextPage, isFetchingNextPage],
+  );
+
+  // Setup bottom observer
+  React.useEffect(() => {
+    const bottomObserverElement = bottomObserverRef.current;
+
+    // Bottom observer
+    const observerBottom = new IntersectionObserver(bottomObserver, {
+      root: null,
+      rootMargin: "100px",
+      threshold: 0.1,
+    });
+
+    if (bottomObserverElement) observerBottom.observe(bottomObserverElement);
+
+    return () => {
+      if (bottomObserverElement)
+        observerBottom.unobserve(bottomObserverElement);
+    };
+  }, [bottomObserver, bottomObserverRef]);
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 3531240..696149b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -26,3 +26,9 @@ export function debounce<T extends (...args: any[]) => void>(
     timeoutId = setTimeout(() => func(...args), delay);
   };
 }
+
+export const formatFileSize = (size: number) => {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+};
diff --git a/src/lib/validation/zod/category.ts b/src/lib/validation/zod/category.ts
index f48b7ec..666529f 100644
--- a/src/lib/validation/zod/category.ts
+++ b/src/lib/validation/zod/category.ts
@@ -2,4 +2,6 @@ import { z } from "zod";
 
 export const categorySchema = z.object({
   name: z.string().min(1),
+  description: z.string().optional(),
+  image: z.string().optional(),
 });
diff --git a/src/server/actions/article.ts b/src/server/actions/article.ts
index b95a3ae..8243e0c 100644
--- a/src/server/actions/article.ts
+++ b/src/server/actions/article.ts
@@ -6,6 +6,7 @@ import {
   createArticleSchema,
 } from "@/lib/validation/zod/article";
 import { api } from "@/trpc/server";
+import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 
@@ -16,16 +17,15 @@ export async function createArticle(
     article,
   });
   if (!result[0]?.slug?.length) return false;
+  revalidatePath("/");
   return redirect(appRoutes.editArticle(result[0].slug));
 }
 export async function updateArticle(
   article: z.infer<typeof articleSchema>,
   articleId: string,
 ) {
-  console.log("Content :: action", JSON.stringify(article.content));
-
   const result = await api.article.update({
-    article,
+    article: { ...article, content: JSON.parse(article.content) },
     articleId,
   });
   //   if (!result[0]?.id?.length) return false;
diff --git a/src/server/actions/category.ts b/src/server/actions/category.ts
index 3ae3adf..1875ae2 100644
--- a/src/server/actions/category.ts
+++ b/src/server/actions/category.ts
@@ -16,12 +16,19 @@ export async function updateCategory(
   category: z.infer<typeof categorySchema>,
   categoryId: string,
 ) {
-  const result = await api.category.update({
-    category,
-    categoryId,
-  });
-  //   if (!result[0]?.id?.length) return false;
-  //   return revalidatePath(`/artikel/${result[0].id}/edit`);
+  try {
+    const result = await api.category.update({
+      category,
+      categoryId,
+    });
+
+    if (!result[0]?.id?.length) return false;
+    revalidatePath(`/artikel/${result[0].id}/edit`);
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
 }
 export async function deleteCategory(categoryId: string) {
   const result = await api.category.delete({
diff --git a/src/server/actions/image.ts b/src/server/actions/image.ts
new file mode 100644
index 0000000..f981f83
--- /dev/null
+++ b/src/server/actions/image.ts
@@ -0,0 +1,17 @@
+"use server";
+import fs from "node:fs/promises";
+import { revalidatePath } from "next/cache";
+
+export async function uploadFile(formData: FormData) {
+  const file = formData.get("file") as File;
+  const arrayBuffer = await file.arrayBuffer();
+  const buffer = new Uint8Array(arrayBuffer);
+  const filename = `upload-${Date.now()}-${file.name}.png`;
+  try {
+    await fs.writeFile(`./public/uploads/${filename}`, buffer);
+    revalidatePath("/");
+    return `/uploads/${filename}`;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/src/server/api/routers/app.ts b/src/server/api/routers/app.ts
index a026bff..26ffe5a 100644
--- a/src/server/api/routers/app.ts
+++ b/src/server/api/routers/app.ts
@@ -1,6 +1,29 @@
+import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "../trpc";
+import { desc, ilike, like } from "drizzle-orm";
+import {
+  articles as articlesTable,
+  categories as categoriesTable,
+  lower,
+} from "@/server/db/schema";
 
 export const appRouter = createTRPCRouter({
+  searchContent: publicProcedure
+    .input(
+      z.object({
+        query: z.string().optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const articles = await ctx.db.query.articles.findMany({
+        where: ilike(articlesTable.title, "%" + input.query + "%"),
+      });
+      const categories = await ctx.db.query.categories.findMany({
+        where: like(categoriesTable.name, "%" + input.query + "%"),
+      });
+      return { articles, categories };
+    }),
+
   getSidebarContent: publicProcedure.query(async ({ ctx }) => {
     return await ctx.db.query.categories.findMany({
       with: {
diff --git a/src/server/api/routers/article.ts b/src/server/api/routers/article.ts
index dd13728..1cf0c20 100644
--- a/src/server/api/routers/article.ts
+++ b/src/server/api/routers/article.ts
@@ -5,17 +5,25 @@ import {
   protectedProcedure,
   publicProcedure,
 } from "@/server/api/trpc";
-import { articles } from "@/server/db/schema";
+import { Article, articles } from "@/server/db/schema";
 import {
   articleSchema,
   createArticleSchema,
 } from "@/lib/validation/zod/article";
-import { count, eq } from "drizzle-orm";
+import { and, count, eq, gt, like, sql } from "drizzle-orm";
 import { hasPermission, Role } from "@/lib/validation/permissions";
 import { generateSlug } from "@/lib/utils";
 
 export const articleRouter = createTRPCRouter({
   // queries
+  search: publicProcedure
+    .input(z.object({ query: z.string() }))
+    .query(async ({ ctx, input }) => {
+      return (await ctx.db.query.articles.findMany({
+        where: like(articles.title, "%" + input.query + "%"),
+        with: { category: true },
+      })) as Article[];
+    }),
   get: publicProcedure
     .input(z.object({ slug: z.string() }))
     .query(async ({ ctx, input }) => {
@@ -24,23 +32,57 @@ export const articleRouter = createTRPCRouter({
         with: { category: true },
       });
     }),
-
-  getAll: publicProcedure
-    .input(z.object({ categoryId: z.string() }).optional())
+  getByPage: publicProcedure
+    .input(
+      z.object({
+        categoryId: z.string().optional(),
+        limit: z.number().optional(),
+        cursor: z.string().optional(),
+      }),
+    )
     .query(async ({ ctx, input }) => {
-      return await ctx.db.query.articles.findMany({
-        where: input?.categoryId
-          ? eq(articles.categoryId, input.categoryId)
-          : undefined,
+      const { categoryId, cursor } = input!;
+      const limit = input?.limit ?? 50;
+      const cursorArg = cursor ? gt(articles.slug, cursor) : undefined;
+      const categoryArg = categoryId
+        ? eq(articles.categoryId, categoryId)
+        : undefined;
+      const items = await ctx.db.query.articles.findMany({
+        where: and(cursorArg, categoryArg),
+        limit: limit + 1,
+        orderBy: articles.slug,
+        columns: {
+          title: true,
+          slug: true,
+          createdAt: true,
+        },
       });
+      let nextCursor: typeof cursor | undefined = undefined;
+      if (items.length > limit) {
+        const nextItem = items.pop();
+        nextCursor = nextItem!.slug;
+      }
+      return {
+        items,
+        nextCursor,
+        previousCursor: cursor,
+      };
     }),
-  getAllPreviews: publicProcedure
-    .input(z.object({ categoryId: z.string() }).optional())
+  getAll: publicProcedure
+    .input(
+      z
+        .object({
+          categoryId: z.string().optional(),
+          limit: z.number().optional(),
+        })
+        .optional(),
+    )
     .query(async ({ ctx, input }) => {
       return await ctx.db.query.articles.findMany({
         where: input?.categoryId
           ? eq(articles.categoryId, input.categoryId)
           : undefined,
+        limit: input?.limit,
         columns: {
           title: true,
           slug: true,
@@ -48,6 +90,7 @@ export const articleRouter = createTRPCRouter({
         },
       });
     }),
+
   getCount: publicProcedure
     .input(z.object({ categoryId: z.string() }).optional())
     .query(async ({ ctx, input }) => {
@@ -76,6 +119,12 @@ export const articleRouter = createTRPCRouter({
         .values({ ...input.article, slug })
         .returning({
           slug: articles.slug,
+        })
+        .onConflictDoUpdate({
+          target: articles.slug,
+          set: {
+            slug: sql`${slug} || '-' || (SELECT COUNT(*) FROM ${articles} WHERE slug LIKE ${slug + "-%"})`,
+          },
         });
     }),
   update: protectedProcedure
diff --git a/src/server/api/routers/category.ts b/src/server/api/routers/category.ts
index 3235dc5..af83b4b 100644
--- a/src/server/api/routers/category.ts
+++ b/src/server/api/routers/category.ts
@@ -4,25 +4,43 @@ import {
   protectedProcedure,
   publicProcedure,
 } from "@/server/api/trpc";
-import { categories } from "@/server/db/schema";
+import { categories, Category } from "@/server/db/schema";
 
-import { count, eq } from "drizzle-orm";
+import { count, eq, like } from "drizzle-orm";
 import { hasPermission, Role } from "@/lib/validation/permissions";
 import { categorySchema } from "@/lib/validation/zod/category";
 import { generateSlug } from "@/lib/utils";
 
 export const categoryRouter = createTRPCRouter({
-  get: publicProcedure
-    .input(z.object({ slug: z.string() }))
+  search: publicProcedure
+    .input(z.object({ query: z.string() }))
     .query(async ({ ctx, input }) => {
-      return await ctx.db.query.categories.findFirst({
-        where: eq(categories.slug, input.slug),
+      return await ctx.db.query.categories.findMany({
+        where: like(categories.name, "%" + input.query + "%"),
       });
     }),
+  get: publicProcedure
+    .input(z.object({ slug: z.string(), with: z.any() }))
+    .query(async ({ ctx, input }) => {
+      return (await ctx.db.query.categories.findFirst({
+        where: eq(categories.slug, input.slug),
+        with: input?.with,
+      })) as Category;
+    }),
 
-  getAll: publicProcedure.query(async ({ ctx }) => {
-    return await ctx.db.query.categories.findMany();
-  }),
+  getAll: publicProcedure
+    .input(
+      z
+        .object({
+          limit: z.number().optional(),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      return await ctx.db.query.categories.findMany({
+        limit: input?.limit,
+      });
+    }),
 
   getCount: publicProcedure.query(async ({ ctx }) => {
     return (await ctx.db.select({ count: count() }).from(categories))[0]?.count;
diff --git a/src/server/db/index.ts b/src/server/db/index.ts
index 011e0af..df399a4 100644
--- a/src/server/db/index.ts
+++ b/src/server/db/index.ts
@@ -16,3 +16,5 @@ const conn = globalForDb.conn ?? postgres(env.DATABASE_URL);
 if (env.NODE_ENV !== "production") globalForDb.conn = conn;
 
 export const db = drizzle(conn, { schema });
+
+export type DBType = typeof db;
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 9c20ca9..2b2d996 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -1,6 +1,7 @@
 import { createId } from "@paralleldrive/cuid2";
-import { relations, sql } from "drizzle-orm";
+import { relations, SQL, sql } from "drizzle-orm";
 import {
+  AnyPgColumn,
   boolean,
   index,
   integer,
@@ -11,15 +12,14 @@ import {
   timestamp,
   varchar,
 } from "drizzle-orm/pg-core";
+import { User } from "next-auth";
 import { type AdapterAccount } from "next-auth/adapters";
-import { type JSONContent } from "@tiptap/react";
+import { JSONContent } from "novel";
+
+export function lower(value: AnyPgColumn): SQL {
+  return sql`lower(${value})`;
+}
 
-/**
- * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
- * database instance for multiple projects.
- *
- * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
- */
 export const createTable = pgTableCreator((name) => `wiki-antifa_${name}`);
 
 export const articles = createTable(
@@ -32,7 +32,7 @@ export const articles = createTable(
     title: varchar("title", { length: 256 }),
     slug: varchar("slug", { length: 256 }).unique().notNull(),
     authorId: varchar("author_id", { length: 255 }),
-    content: text("content"), 
+    content: jsonb("content").$type<JSONContent>(),
     categoryId: varchar("category_id", { length: 255 }),
     published: boolean("published").default(false),
     createdAt: timestamp("created_at", { withTimezone: true })
@@ -46,12 +46,19 @@ export const articles = createTable(
     articleTitleIndex: index("article_title_idx").on(example.title),
   }),
 );
-export type Article = typeof articles.$inferSelect;
+export type Article = typeof articles.$inferSelect & {
+  author?: User;
+  category?: Category;
+};
 export const articleRelations = relations(articles, ({ one }) => ({
   category: one(categories, {
     fields: [articles.categoryId],
     references: [categories.id],
   }),
+  author: one(users, {
+    fields: [articles.authorId],
+    references: [users.id],
+  }),
 }));
 
 export const categories = createTable(
@@ -62,8 +69,10 @@ export const categories = createTable(
       .$defaultFn(() => createId())
       .notNull(),
     name: varchar("name", { length: 256 }),
+    description: text("description"),
     slug: varchar("slug", { length: 256 }).unique().notNull(),
 
+    image: varchar("image", { length: 255 }),
     createdAt: timestamp("created_at", { withTimezone: true })
       .default(sql`CURRENT_TIMESTAMP`)
       .notNull(),
@@ -75,7 +84,9 @@ export const categories = createTable(
     categoryNameIndex: index("category_name_idx").on(example.name),
   }),
 );
-export type Category = typeof categories.$inferSelect;
+export type Category = typeof categories.$inferSelect & {
+  articles?: Article[];
+};
 
 export const categoryRelations = relations(categories, ({ many }) => ({
   articles: many(articles),
diff --git a/src/trpc/react.tsx b/src/trpc/react.tsx
index c3772e5..75ede71 100644
--- a/src/trpc/react.tsx
+++ b/src/trpc/react.tsx
@@ -57,7 +57,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
           },
         }),
       ],
-    })
+    }),
   );
 
   return (
diff --git a/start-database.sh b/start-database.sh
index 33462f9..a0604a2 100755
--- a/start-database.sh
+++ b/start-database.sh
@@ -9,7 +9,7 @@
 
 # On Linux and macOS you can run this script directly - `./start-database.sh`
 
-DB_CONTAINER_NAME="wiki-antifa-postgres"
+DB_CONTAINER_NAME="logipedia-postgres"
 
 if ! [ -x "$(command -v docker)" ]; then
   echo -e "Docker is not installed. Please install docker and try again.\nDocker install guide: https://docs.docker.com/engine/install/"
@@ -55,6 +55,6 @@ docker run -d \
   --name $DB_CONTAINER_NAME \
   -e POSTGRES_USER="postgres" \
   -e POSTGRES_PASSWORD="$DB_PASSWORD" \
-  -e POSTGRES_DB=wiki-antifa \
+  -e POSTGRES_DB=logipedia \
   -p "$DB_PORT":5432 \
   docker.io/postgres && echo "Database container '$DB_CONTAINER_NAME' was successfully created"