diff --git a/backend/alembic/versions/0017_rom_notes.py b/backend/alembic/versions/0017_rom_notes.py
new file mode 100644
index 000000000..79365c86b
--- /dev/null
+++ b/backend/alembic/versions/0017_rom_notes.py
@@ -0,0 +1,39 @@
+"""empty message
+
+Revision ID: 0017_rom_notes
+Revises: 0016_user_last_login_active
+Create Date: 2024-04-28 11:58:18.927734
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '0017_rom_notes'
+down_revision = '0016_user_last_login_active'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('rom_notes',
+    sa.Column('id', sa.Integer(), autoincrement=True, nullable=False),
+    sa.Column('last_edited_at', sa.DateTime(timezone=True), server_default=sa.text('now()'), nullable=False),
+    sa.Column('raw_markdown', sa.Text(), nullable=False),
+    sa.Column('is_public', sa.Boolean(), nullable=True),
+    sa.Column('rom_id', sa.Integer(), nullable=False),
+    sa.Column('user_id', sa.Integer(), nullable=False),
+    sa.ForeignKeyConstraint(['rom_id'], ['roms.id'], ondelete='CASCADE'),
+    sa.ForeignKeyConstraint(['user_id'], ['users.id'], ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('rom_id', 'user_id', name='unique_rom_user_note')
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('rom_notes')
+    # ### end Alembic commands ###
diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index 3c1151bb3..be411dd01 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -1,11 +1,12 @@
 import re
+from datetime import datetime
 from typing import Optional, get_type_hints
 from typing_extensions import TypedDict, NotRequired
 
 from endpoints.responses.assets import SaveSchema, ScreenshotSchema, StateSchema
 from fastapi import Request
 from fastapi.responses import StreamingResponse
-from handler import socket_handler
+from handler import socket_handler, db_user_handler
 from handler.metadata_handler.igdb_handler import IGDBMetadata
 from handler.metadata_handler.moby_handler import MobyMetadata
 from pydantic import BaseModel, computed_field, Field
@@ -25,6 +26,30 @@
     total=False,
 )
 
+class RomNoteSchema(BaseModel):
+    id: int
+    user_id: int
+    rom_id: int
+    last_edited_at: datetime
+    raw_markdown: str
+    is_public: bool
+
+    class Config:
+        from_attributes = True
+
+    @computed_field
+    @property
+    def user__username(self) -> str:
+        return db_user_handler.get_user(self.user_id).username
+
+    @classmethod
+    def for_user(cls, db_rom: Rom, user_id: int) -> list["RomNoteSchema"]:
+        return [
+            cls.model_validate(n)
+            for n in db_rom.notes
+            # This is what filters out private notes
+            if n.user_id == user_id or n.is_public
+        ]
 
 class RomSchema(BaseModel):
     id: int
@@ -78,6 +103,7 @@ class RomSchema(BaseModel):
     user_saves: list[SaveSchema] = Field(default_factory=list)
     user_states: list[StateSchema] = Field(default_factory=list)
     user_screenshots: list[ScreenshotSchema] = Field(default_factory=list)
+    user_notes: list[RomNoteSchema] = Field(default_factory=list)
 
     class Config:
         from_attributes = True
@@ -114,10 +140,10 @@ def from_orm_with_request(cls, db_rom: Rom, request: Request) -> "RomSchema":
             for s in db_rom.screenshots
             if s.user_id == user_id
         ]
+        rom.user_notes = RomNoteSchema.for_user(db_rom, user_id)
 
         return rom
 
-
 class AddRomsResponse(TypedDict):
     uploaded_roms: list[str]
     skipped_roms: list[str]
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 6c660c761..9a6b61013 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -10,6 +10,7 @@
     AddRomsResponse,
     CustomStreamingResponse,
     RomSchema,
+    RomNoteSchema,
 )
 from exceptions.fs_exceptions import RomAlreadyExistsException
 from fastapi import APIRouter, File, HTTPException, Query, Request, UploadFile, status
@@ -425,3 +426,22 @@ async def delete_roms(
                 raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=error)
 
     return {"msg": f"{len(roms_ids)} roms deleted successfully!"}
+
+@protected_route(router.put, "/roms/{id}/note", ["notes.write"])
+async def update_rom_note(request: Request, id: int) -> RomNoteSchema:
+    db_note = db_rom_handler.get_rom_note(id, request.user.id)
+    if not db_note:
+        db_note = db_rom_handler.add_rom_note(id, request.user.id)
+
+    data = await request.json()
+    db_rom_handler.update_rom_note(
+        db_note.id,
+        {
+            "last_edited_at": datetime.now(),
+            "raw_markdown": data.get("raw_markdown", db_note.raw_markdown),
+            "is_public": data.get("is_public", db_note.is_public),
+        }
+    )
+
+    db_note = db_rom_handler.get_rom_note(id, request.user.id)
+    return db_note
diff --git a/backend/handler/auth_handler/__init__.py b/backend/handler/auth_handler/__init__.py
index 3b1d56605..5e031300d 100644
--- a/backend/handler/auth_handler/__init__.py
+++ b/backend/handler/auth_handler/__init__.py
@@ -23,6 +23,8 @@
     "platforms.read": "View platforms",
     "assets.read": "View assets",
     "assets.write": "Modify assets",
+    "notes.read": "View notes",
+    "notes.write": "Modify notes",
 }
 
 WRITE_SCOPES_MAP: Final = {
diff --git a/backend/handler/db_handler/db_notes_handler.py b/backend/handler/db_handler/db_notes_handler.py
new file mode 100644
index 000000000..10a687bec
--- /dev/null
+++ b/backend/handler/db_handler/db_notes_handler.py
@@ -0,0 +1,5 @@
+from decorators.database import begin_session
+from handler.db_handler import DBHandler
+from models.rom import RomNote
+from sqlalchemy import and_, delete, select, update
+from sqlalchemy.orm import Session
diff --git a/backend/handler/db_handler/db_roms_handler.py b/backend/handler/db_handler/db_roms_handler.py
index d6e598a86..668035ff1 100644
--- a/backend/handler/db_handler/db_roms_handler.py
+++ b/backend/handler/db_handler/db_roms_handler.py
@@ -1,6 +1,6 @@
 from decorators.database import begin_session
 from handler.db_handler import DBHandler
-from models.rom import Rom
+from models.rom import Rom, RomNote
 from sqlalchemy import and_, delete, func, select, update, or_, Select
 from sqlalchemy.orm import Session
 
@@ -103,3 +103,28 @@ def purge_roms(self, platform_id: int, roms: list[str], session: Session = None)
             .where(and_(Rom.platform_id == platform_id, Rom.file_name.not_in(roms)))
             .execution_options(synchronize_session="evaluate")
         )
+    
+    @begin_session
+    def get_rom_note(
+        self, rom_id: int, user_id: int, session: Session = None
+    ):
+        return session.scalars(
+            select(RomNote).filter_by(rom_id=rom_id, user_id=user_id).limit(1)
+        ).first()
+    
+    @begin_session
+    def add_rom_note(
+        self, rom_id: int, user_id: int, session: Session = None
+    ):
+        return session.merge(RomNote(rom_id=rom_id, user_id=user_id))
+    
+    @begin_session
+    def update_rom_note(
+        self, id: int, data: dict, session: Session = None
+    ):
+        return session.execute(
+            update(RomNote)
+            .where(RomNote.id == id)
+            .values(**data)
+            .execution_options(synchronize_session="evaluate")
+        )
diff --git a/backend/models/rom.py b/backend/models/rom.py
index 0aacf6a3b..dae7e8743 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -1,4 +1,5 @@
 from functools import cached_property
+from datetime import datetime
 
 from config import FRONTEND_RESOURCES_PATH
 from models.assets import Save, Screenshot, State
@@ -13,6 +14,9 @@
     String,
     Text,
     BigInteger,
+    DateTime,
+    func,
+    UniqueConstraint,
 )
 from sqlalchemy.orm import Mapped, relationship
 
@@ -75,6 +79,9 @@ class Rom(BaseModel):
     screenshots: Mapped[list[Screenshot]] = relationship(
         "Screenshot", lazy="selectin", back_populates="rom"
     )
+    notes: Mapped[list["RomNote"]] = relationship(
+        "RomNote", lazy="selectin", back_populates="rom"
+    )
 
     @property
     def platform_slug(self) -> str:
@@ -156,3 +163,28 @@ def game_modes(self) -> list[str]:
 
     def __repr__(self) -> str:
         return self.file_name
+
+class RomNote(BaseModel):
+    __tablename__ = "rom_notes"
+    __table_args__ = (
+        UniqueConstraint("rom_id", "user_id", name="unique_rom_user_note"),
+    )
+
+    id: int = Column(Integer(), primary_key=True, autoincrement=True)
+    last_edited_at: datetime = Column(DateTime(timezone=True), server_default=func.now(), nullable=False)
+    raw_markdown: str = Column(Text, nullable=False, default="")
+    is_public: bool = Column(Boolean, default=False)
+
+    rom_id: int = Column(
+        Integer(),
+        ForeignKey("roms.id", ondelete="CASCADE"),
+        nullable=False,
+    )
+    user_id: int = Column(
+        Integer(),
+        ForeignKey("users.id", ondelete="CASCADE"),
+        nullable=False,
+    )
+
+    rom = relationship("Rom", back_populates="notes")
+    user = relationship("User", back_populates="notes")
diff --git a/backend/models/user.py b/backend/models/user.py
index 74a4354d3..04908f16f 100644
--- a/backend/models/user.py
+++ b/backend/models/user.py
@@ -15,6 +15,8 @@ class Role(enum.Enum):
 
 
 class User(BaseModel, SimpleUser):
+    from models.rom import RomNote
+
     __tablename__ = "users"
     __table_args__ = {"extend_existing": True}
 
@@ -39,6 +41,9 @@ class User(BaseModel, SimpleUser):
     screenshots: Mapped[list[Screenshot]] = relationship(
         "Screenshot", lazy="selectin", back_populates="user"
     )
+    notes: Mapped[list[RomNote]] = relationship(
+        "RomNote", lazy="selectin", back_populates="user"
+    )
 
     @property
     def oauth_scopes(self):
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e335482fd..c6f893bbb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "js-cookie": "^3.0.5",
         "jszip": "^3.10.1",
         "lodash": "^4.17.21",
+        "md-editor-v3": "^4.13.5",
         "mitt": "^3.0.1",
         "nanoid": "^5.0.4",
         "pinia": "^2.1.6",
@@ -1871,6 +1872,362 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.0.tgz",
+      "integrity": "sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.5.0.tgz",
+      "integrity": "sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-angular": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-angular/-/lang-angular-0.1.3.tgz",
+      "integrity": "sha512-xgeWGJQQl1LyStvndWtruUvb4SnBZDAu/gvFH/ZU+c0W25tQR8e5hq7WTwiIY2dNxnf+49mRiGI/9yxIwB6f5w==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.3"
+      }
+    },
+    "node_modules/@codemirror/lang-cpp": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz",
+      "integrity": "sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/cpp": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-go": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-go/-/lang-go-6.0.0.tgz",
+      "integrity": "sha512-mMT4YeYdKGjnffDBOhr1ur1glee4oV/rfMe28vzazNHZkSt7vSiuHiBcgr3L/79Cl2RIjFdpQ1XMD0/T8Rx64g==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/go": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-java": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.1.tgz",
+      "integrity": "sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/java": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-less": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-less/-/lang-less-6.0.2.tgz",
+      "integrity": "sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-liquid": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-liquid/-/lang-liquid-6.2.1.tgz",
+      "integrity": "sha512-J1Mratcm6JLNEiX+U2OlCDTysGuwbHD76XwuL5o5bo9soJtSbz2g6RU3vGHFyS5DC8rgVmFSzi7i6oBftm7tnA==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.2.5.tgz",
+      "integrity": "sha512-Hgke565YcO4fd9pe2uLYxnMufHO5rQwRr+AAhFq8ABuhkrjyX8R5p5s+hZUTdV60O0dMRjxKhBLxz8pu/MkUVA==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-php": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.1.tgz",
+      "integrity": "sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/php": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.1.5.tgz",
+      "integrity": "sha512-hCm+8X6wrnXJCGf+QhmFu1AXkdTVG7dHy0Ly6SI1N3SRPptaMvwX6oNQonOXOMPvmcjiB0xq342KAxX3BYpijw==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/lang-rust": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.1.tgz",
+      "integrity": "sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/rust": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sass": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sass/-/lang-sass-6.0.2.tgz",
+      "integrity": "sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/sass": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sql": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.6.3.tgz",
+      "integrity": "sha512-fo5i3OD/7TmmqMtKycC4OaqfPsRxk0sKOb35g8cOtyUyyI2hfP2qXkDc7Asb6h7BiJK+MU/DYVPnQm6iNB5ZTw==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-vue": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-vue/-/lang-vue-0.1.3.tgz",
+      "integrity": "sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-wast": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.2.tgz",
+      "integrity": "sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+      "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.1.tgz",
+      "integrity": "sha512-HV2NzbK9bbVnjWxwObuZh5FuPCowx51mEfoFT9y3y+M37fA3+pbxx4I7uePuygFzDsAmCTwQSc/kXh/flab4uw==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz",
+      "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/language-data": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.5.1.tgz",
+      "integrity": "sha512-0sWxeUSNlBr6OmkqybUTImADFUP0M3P0IiSde4nc24bz/6jIYzqYSgkOSLS+CBIoW1vU8Q9KUWXscBXeoMVC9w==",
+      "dependencies": {
+        "@codemirror/lang-angular": "^0.1.0",
+        "@codemirror/lang-cpp": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-go": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-java": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/lang-less": "^6.0.0",
+        "@codemirror/lang-liquid": "^6.0.0",
+        "@codemirror/lang-markdown": "^6.0.0",
+        "@codemirror/lang-php": "^6.0.0",
+        "@codemirror/lang-python": "^6.0.0",
+        "@codemirror/lang-rust": "^6.0.0",
+        "@codemirror/lang-sass": "^6.0.0",
+        "@codemirror/lang-sql": "^6.0.0",
+        "@codemirror/lang-vue": "^0.1.1",
+        "@codemirror/lang-wast": "^6.0.0",
+        "@codemirror/lang-xml": "^6.0.0",
+        "@codemirror/lang-yaml": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/legacy-modes": "^6.4.0"
+      }
+    },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.4.0.tgz",
+      "integrity": "sha512-5m/K+1A6gYR0e+h/dEde7LoGimMjRtWXZFg4Lo70cc8HzjSdHe3fLwjWMR0VRl5KFT1SxalSap7uMgPKF28wBA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.5.0.tgz",
+      "integrity": "sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.26.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz",
+      "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -2373,6 +2730,166 @@
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
       "dev": true
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.2.tgz",
+      "integrity": "sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz",
+      "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/go": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.0.tgz",
+      "integrity": "sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz",
+      "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.9.tgz",
+      "integrity": "sha512-MXxeCMPyrcemSLGaTQEZx0dBUH0i+RPl8RN5GwMAzo53nTsd/Unc/t5ZxACeQoyPUM5/GkPLRUs2WliOImzkRA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/java": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.2.tgz",
+      "integrity": "sha512-3j8X70JvYf0BZt8iSRLXLkt0Ry1hVUgH6wT32yBxH/Xi55nW2VMhc1Az4SKwu4YGSmxCm1fsqDDcHTuFjC8pmg==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.15.tgz",
+      "integrity": "sha512-B082ZdjI0vo2AgLqD834GlRTE9gwRX8NzHzKq5uDwEnQ9Dq+A/CEhd3nf68tiNA2f9O+8jS1NeSTUYT9IAqcTw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
+      "integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.0.tgz",
+      "integrity": "sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.3.0.tgz",
+      "integrity": "sha512-ErbEQ15eowmJUyT095e9NJc3BI9yZ894fjSDtHftD0InkfUBGgnKSU6dvan9jqsZuNHg2+ag/1oyDRxNsENupQ==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/php": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.2.tgz",
+      "integrity": "sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.1.0"
+      }
+    },
+    "node_modules/@lezer/python": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.13.tgz",
+      "integrity": "sha512-AdbRAtdQq94PfTNd4kqMEJhH2fqa2JdoyyqqVewY6w34w2Gi6dg2JuOtOgR21Bi0zP9r0KjSSHOUq/tP7FVT8A==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/sass": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lezer/sass/-/sass-1.0.6.tgz",
+      "integrity": "sha512-w/RCO2dIzZH1To8p+xjs8cE+yfgGus8NZ/dXeWl/QzHyr+TeBs71qiE70KPImEwvTsmEjoWh0A5SxMzKd5BWBQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/xml": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.5.tgz",
+      "integrity": "sha512-VFouqOzmUWfIg+tfmpcdV33ewtK+NSwd4ngSe1aG7HFb4BN0ExyY1b8msp+ndFrnlG4V4iC8yXacjFtrwERnaw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.2.tgz",
+      "integrity": "sha512-XCkwuxe+eumJ28nA9e1S6XKsXz9W7V/AG+WBiWOtiIuUpKcZ/bHuvN8bLxSDREIcybSRpEd/jvphh4vgm6Ed2g==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
     "node_modules/@mdi/font": {
       "version": "7.0.96",
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.0.96.tgz",
@@ -2610,12 +3127,31 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
+      "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw=="
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.202",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
       "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
+    "node_modules/@types/markdown-it": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.0.1.tgz",
+      "integrity": "sha512-6WfOG3jXR78DW8L5cTYCVVGAsIFZskRHCDo5tbqa+qtKVt4oDRVH7hyIWu1SpDQJlmIoEivNQZ5h+AGAOrgOtQ==",
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
+      "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA=="
+    },
     "node_modules/@types/node": {
       "version": "20.10.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz",
@@ -2646,6 +3182,11 @@
       "integrity": "sha512-kUaF72Fv202suFx6yBrwXqeVRMx7hGtJTesyESZgn9sEPCUeDXm2p0SiyS1MTqW74nQP4p7JyrOCwZ7pNFns4w==",
       "dev": true
     },
+    "node_modules/@vavt/util": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@vavt/util/-/util-1.5.1.tgz",
+      "integrity": "sha512-/q/ilzRwZZJlnDAl6DGZ8pinOSAjR91dcck79bi1ujrqYlPaFVHnbmkDeGPuLub6A821rXvtPXVRXULrfMN03Q=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -2961,8 +3502,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.0",
@@ -3286,6 +3826,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3316,8 +3870,7 @@
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "node_modules/common-tags": {
       "version": "1.8.2",
@@ -3361,6 +3914,14 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.29.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.0.tgz",
@@ -3397,6 +3958,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cronstrue": {
       "version": "2.31.0",
       "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.31.0.tgz",
@@ -3440,6 +4006,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -3584,6 +4155,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.21.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
@@ -5385,6 +5967,14 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5468,6 +6058,87 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it-image-figures": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
+      "integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
+    },
+    "node_modules/markdown-it-xss": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it-xss/-/markdown-it-xss-1.0.2.tgz",
+      "integrity": "sha512-D52im1+e394EckqhK0AuyqxQ/WCuo09wJWInuCh6j1O2d6LqImJOu36lA6KZqImhWJeYIQnGeryaH3wXcro5MQ==",
+      "dependencies": {
+        "xss": "^1.0.6"
+      }
+    },
+    "node_modules/md-editor-v3": {
+      "version": "4.13.5",
+      "resolved": "https://registry.npmjs.org/md-editor-v3/-/md-editor-v3-4.13.5.tgz",
+      "integrity": "sha512-HHFvuEP8puUK430QfKGoqHDIOrw0MHK26MgWKd/+k6VRadDNy40i7Gw3NmSd+rvEzIvHwu0NRm99KEj4qNb0Gw==",
+      "dependencies": {
+        "@codemirror/lang-markdown": "^6.2.5",
+        "@codemirror/language-data": "^6.5.1",
+        "@types/markdown-it": "^14.0.1",
+        "@vavt/util": "^1.5.1",
+        "codemirror": "^6.0.1",
+        "copy-to-clipboard": "^3.3.3",
+        "lru-cache": "^10.2.0",
+        "markdown-it": "^14.0.0",
+        "markdown-it-image-figures": "^2.1.1",
+        "markdown-it-task-lists": "^2.1.1",
+        "markdown-it-xss": "^1.0.2",
+        "medium-zoom": "^1.1.0",
+        "punycode": "^2.3.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.47"
+      }
+    },
+    "node_modules/md-editor-v3/node_modules/lru-cache": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
+      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6081,10 +6752,17 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "dev": true,
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
       "engines": {
         "node": ">=6"
       }
@@ -6690,6 +7368,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6797,6 +7480,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -6863,6 +7551,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -7358,6 +8051,11 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/webfontloader": {
       "version": "1.6.28",
       "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
@@ -7806,6 +8504,21 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
+      "integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1c3ba06ae..c4027bb67 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
+    "md-editor-v3": "^4.13.5",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.4",
     "pinia": "^2.1.6",
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index dae98fd15..e7893a5a8 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -24,6 +24,7 @@ export type { PlatformSchema } from './models/PlatformSchema';
 export type { Role } from './models/Role';
 export type { RomIGDBMetadata } from './models/RomIGDBMetadata';
 export type { RomMobyMetadata } from './models/RomMobyMetadata';
+export type { RomNoteSchema } from './models/RomNoteSchema';
 export type { RomSchema } from './models/RomSchema';
 export type { SaveSchema } from './models/SaveSchema';
 export type { SchedulerDict } from './models/SchedulerDict';
diff --git a/frontend/src/__generated__/models/RomNoteSchema.ts b/frontend/src/__generated__/models/RomNoteSchema.ts
new file mode 100644
index 000000000..4f8077def
--- /dev/null
+++ b/frontend/src/__generated__/models/RomNoteSchema.ts
@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type RomNoteSchema = {
+    id: number;
+    user_id: number;
+    rom_id: number;
+    last_edited_at: string;
+    raw_markdown: string;
+    is_public: boolean;
+    readonly user__username: string;
+};
+
diff --git a/frontend/src/__generated__/models/RomSchema.ts b/frontend/src/__generated__/models/RomSchema.ts
index b41e6f297..789275eba 100644
--- a/frontend/src/__generated__/models/RomSchema.ts
+++ b/frontend/src/__generated__/models/RomSchema.ts
@@ -5,6 +5,7 @@
 
 import type { RomIGDBMetadata } from './RomIGDBMetadata';
 import type { RomMobyMetadata } from './RomMobyMetadata';
+import type { RomNoteSchema } from './RomNoteSchema';
 import type { SaveSchema } from './SaveSchema';
 import type { ScreenshotSchema } from './ScreenshotSchema';
 import type { StateSchema } from './StateSchema';
@@ -52,6 +53,7 @@ export type RomSchema = {
     user_saves?: Array<SaveSchema>;
     user_states?: Array<StateSchema>;
     user_screenshots?: Array<ScreenshotSchema>;
+    user_notes?: Array<RomNoteSchema>;
     readonly sort_comparator: string;
 };
 
diff --git a/frontend/src/components/Details/Notes.vue b/frontend/src/components/Details/Notes.vue
new file mode 100644
index 000000000..511131503
--- /dev/null
+++ b/frontend/src/components/Details/Notes.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+
+import { type Rom } from "@/stores/roms";
+import storeAuth from "@/stores/auth";
+import romApi from "@/services/api/rom";
+import { MdEditor, MdPreview } from "md-editor-v3";
+import "md-editor-v3/lib/style.css";
+
+const props = defineProps<{ rom: Rom }>();
+const auth = storeAuth();
+const theme = useTheme();
+
+const editingNote = ref(false);
+const ownNote = ref(
+  props.rom.user_notes?.find((note) => note.user_id === auth.user?.id) ?? {
+    id: null,
+    user_id: auth.user?.id,
+    rom_id: props.rom.id,
+    last_edited_at: new Date(),
+    raw_markdown: "",
+    is_public: false,
+  }
+);
+const publicNotes =
+  props.rom.user_notes?.filter((note) => note.user_id !== auth.user?.id) ?? [];
+
+function togglePublic() {
+  ownNote.value.is_public = !ownNote.value.is_public;
+  romApi.updateRomNote({
+    romId: props.rom.id,
+    rawMarkdown: ownNote.value.raw_markdown,
+    isPublic: ownNote.value.is_public,
+  });
+}
+
+function onEditNote() {
+  if (editingNote.value) {
+    romApi.updateRomNote({
+      romId: props.rom.id,
+      rawMarkdown: ownNote.value.raw_markdown,
+      isPublic: ownNote.value.is_public,
+    });
+  }
+  editingNote.value = !editingNote.value;
+}
+</script>
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row class="px-2 pt-1">
+        <v-col cols="10" class="d-flex align-center">
+          <h3>My notes</h3>
+        </v-col>
+        <v-col cols="2" class="text-right">
+          <v-btn
+            icon
+            @click="togglePublic"
+            size="small"
+            :title="ownNote.is_public ? 'Make private' : 'Make public'"
+            class="mr-2"
+          >
+            <v-icon>
+              {{ ownNote.is_public ? "mdi-eye" : "mdi-eye-off" }}
+            </v-icon>
+          </v-btn>
+          <v-btn icon @click="onEditNote" size="small" title="Edit note">
+            <v-icon>
+              {{ editingNote ? "mdi-check" : "mdi-pencil" }}
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-card-text>
+      <MdEditor
+        v-if="editingNote"
+        v-model="ownNote.raw_markdown"
+        :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
+        language="en-US"
+        :preview="false"
+        :noUploadImg="true"
+        class="editor-preview"
+      />
+      <MdPreview
+        v-else
+        :modelValue="ownNote.raw_markdown"
+        :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
+        previewTheme="vuepress"
+        codeTheme="github"
+      />
+    </v-card-text>
+  </v-card>
+  <v-card v-if="publicNotes.length > 0" class="mt-3">
+    <v-card-title class="px-6 pt-4">
+      <h3>Public notes</h3>
+    </v-card-title>
+    <v-card-text>
+      <v-list>
+        <v-list-item v-for="note in publicNotes" :key="note.id">
+          <v-list-item-content>
+            <v-list-item-title>{{ note.user__username }}</v-list-item-title>
+            <MdPreview
+              :modelValue="note.raw_markdown"
+              :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
+              previewTheme="vuepress"
+              codeTheme="github"
+            />
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style>
+.md-editor-dark {
+  --md-bk-color: #161b22 !important;
+}
+.md-editor,
+.md-editor-preview {
+  word-break: break-word !important;
+  line-height: 1.25 !important;
+}
+.vuepress-theme pre code {
+  background-color: #0D1117;
+}
+</style>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 0c85372b9..e700f0ae0 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -164,6 +164,21 @@ async function deleteRoms({
   });
 }
 
+async function updateRomNote({
+  romId,
+  rawMarkdown,
+  isPublic,
+}: {
+  romId: number;
+  rawMarkdown: string;
+  isPublic: boolean;
+}): Promise<{ data: RomSchema }> {
+  return api.put(`/roms/${romId}/note`, {
+    raw_markdown: rawMarkdown,
+    is_public: isPublic,
+  });
+}
+
 export default {
   uploadRoms,
   getRoms,
@@ -173,4 +188,5 @@ export default {
   searchRom,
   updateRom,
   deleteRoms,
+  updateRomNote,
 };
diff --git a/frontend/src/views/Details/Base.vue b/frontend/src/views/Details/Base.vue
index 03b0ce890..afd3701c0 100644
--- a/frontend/src/views/Details/Base.vue
+++ b/frontend/src/views/Details/Base.vue
@@ -9,6 +9,7 @@ import Info from "@/components/Details/Info/Base.vue";
 import RelatedGames from "@/components/Details/RelatedGames.vue";
 import Saves from "@/components/Details/Saves.vue";
 import States from "@/components/Details/States.vue";
+import Notes from "@/components/Details/Notes.vue";
 import TitleInfo from "@/components/Details/Title.vue";
 import platformApi from "@/services/api/platform";
 import romApi from "@/services/api/rom";
@@ -27,6 +28,7 @@ const tab = ref<
   | "details"
   | "saves"
   | "states"
+  | "notes"
   | "additionalcontent"
   | "screenshots"
   | "relatedgames"
@@ -177,6 +179,7 @@ watch(
             <v-tab value="details" rounded="0">Details</v-tab>
             <v-tab value="saves" rounded="0">Saves</v-tab>
             <v-tab value="states" rounded="0">States</v-tab>
+            <v-tab value="notes" rounded="0">Notes</v-tab>
             <v-tab
               v-if="
                 mdAndDown &&
@@ -222,6 +225,9 @@ watch(
               <v-window-item value="states">
                 <states :rom="rom" />
               </v-window-item>
+              <v-window-item value="notes">
+                <notes :rom="rom" />
+              </v-window-item>
               <v-window-item
                 v-if="
                   mdAndDown &&