diff --git a/app/components/code-mirror.hbs b/app/components/code-mirror.hbs
index e243f23ef5..43cff566cc 100644
--- a/app/components/code-mirror.hbs
+++ b/app/components/code-mirror.hbs
@@ -22,6 +22,7 @@
   {{did-update this.optionDidChange "indentWithTab" @indentWithTab}}
   {{did-update this.optionDidChange "languageOrFilename" @filename}}
   {{did-update this.optionDidChange "languageOrFilename" @language}}
+  {{did-update this.optionDidChange "lineCommentsOrLineData" (array @lineComments @lineData)}}
   {{did-update this.optionDidChange "lineNumbers" @lineNumbers}}
   {{did-update this.optionDidChange "lineSeparator" @lineSeparator}}
   {{did-update this.optionDidChange "lineWrapping" @lineWrapping}}
diff --git a/app/components/code-mirror.ts b/app/components/code-mirror.ts
index f6e5f91f1b..c16b773335 100644
--- a/app/components/code-mirror.ts
+++ b/app/components/code-mirror.ts
@@ -39,6 +39,7 @@ import { markdown } from '@codemirror/lang-markdown';
 import { highlightNewlines } from 'codecrafters-frontend/utils/code-mirror-highlight-newlines';
 import { collapseUnchangedGutter } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged-gutter';
 import { highlightActiveLineGutter as highlightActiveLineGutterRS } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
+import { lineComments, type LineDataCollection } from 'codecrafters-frontend/utils/code-mirror-line-comments';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -54,7 +55,7 @@ enum FoldGutterIcon {
 
 type DocumentUpdateCallback = (newValue: string) => void;
 
-type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback;
+type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback | LineDataCollection;
 
 type OptionHandler = (args: Signature['Args']['Named']) => Extension[] | Promise<Extension[]>;
 
@@ -78,6 +79,7 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
   indentOnInput: ({ indentOnInput: enabled }) => (enabled ? [indentOnInput()] : []),
   indentUnit: ({ indentUnit: indentUnitText }) => (indentUnitText !== undefined ? [indentUnit.of(indentUnitText)] : []),
   indentWithTab: ({ indentWithTab: enabled }) => (enabled ? [keymap.of([indentWithTab])] : []),
+  lineCommentsOrLineData: ({ lineData, lineComments: enabled }) => (enabled && lineData ? [lineComments(lineData)] : []),
   lineNumbers: ({ lineNumbers: enabled }) => (enabled ? [lineNumbers()] : []),
   foldGutter: ({ foldGutter: enabled }) =>
     enabled
@@ -266,6 +268,14 @@ export interface Signature {
        * Enable indentation of lines or selection using TAB and Shift+TAB keys, otherwise editor loses focus when TAB is pressed
        */
       indentWithTab?: boolean;
+      /**
+       * Enable line comments
+       */
+      lineComments?: boolean;
+      /**
+       * Line data containing comments counts or other line-related metadata
+       */
+      lineData?: LineDataCollection;
       /**
        * Enable the line numbers gutter
        */
diff --git a/app/controllers/demo/code-mirror.ts b/app/controllers/demo/code-mirror.ts
index 10b4b981f5..9df380cf04 100644
--- a/app/controllers/demo/code-mirror.ts
+++ b/app/controllers/demo/code-mirror.ts
@@ -6,6 +6,36 @@ import { type Extension } from '@codemirror/state';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
 import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
 import EXAMPLE_DOCUMENTS, { ExampleDocument } from 'codecrafters-frontend/utils/code-mirror-documents';
+import { LineData, LineDataCollection } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+function generateRandomLineData(linesCount = 0) {
+  function getRandomInt(inclusiveMin: number, exclusiveMax: number) {
+    const minCeiled = Math.ceil(inclusiveMin);
+    const maxFloored = Math.floor(exclusiveMax);
+
+    return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
+  }
+
+  const lineData = Array.from({ length: linesCount }).map(function (_v, lineNumber) {
+    const rnd = Math.random();
+
+    let commentsCount;
+
+    if (rnd < 0.05) {
+      commentsCount = getRandomInt(100, 1000);
+    } else if (rnd < 0.1) {
+      commentsCount = getRandomInt(10, 100);
+    } else if (rnd < 0.8) {
+      commentsCount = 0;
+    } else {
+      commentsCount = getRandomInt(1, 10);
+    }
+
+    return new LineData({ commentsCount, lineNumber });
+  });
+
+  return new LineDataCollection(lineData);
+}
 
 const THEME_EXTENSIONS: {
   [key: string]: Extension;
@@ -54,6 +84,7 @@ const OPTION_DEFAULTS = {
   indentWithTab: true,
   language: true,
   lineNumbers: true,
+  lineComments: false,
   lineSeparator: true,
   lineWrapping: true,
   maxHeight: true,
@@ -108,6 +139,7 @@ export default class DemoCodeMirrorController extends Controller {
     'indentUnit',
     'indentWithTab',
     'language',
+    'lineComments',
     'lineNumbers',
     'lineSeparator',
     'lineWrapping',
@@ -160,6 +192,7 @@ export default class DemoCodeMirrorController extends Controller {
   @tracked indentUnits = INDENT_UNITS;
   @tracked indentWithTab = OPTION_DEFAULTS.indentWithTab;
   @tracked language = OPTION_DEFAULTS.language;
+  @tracked lineComments = OPTION_DEFAULTS.lineComments;
   @tracked lineNumbers = OPTION_DEFAULTS.lineNumbers;
   @tracked lineSeparator = OPTION_DEFAULTS.lineSeparator;
   @tracked lineSeparators = LINE_SEPARATORS;
@@ -197,6 +230,10 @@ export default class DemoCodeMirrorController extends Controller {
     return this.documents[this.selectedDocumentIndex] || ExampleDocument.createEmpty();
   }
 
+  get selectedDocumentLineData() {
+    return generateRandomLineData(this.selectedDocument.document.split(/$/gm).length);
+  }
+
   get selectedIndentUnit() {
     return this.indentUnits[this.selectedIndentUnitIndex];
   }
diff --git a/app/routes/demo/code-mirror.ts b/app/routes/demo/code-mirror.ts
index 76caf6fa7d..55536ec0f1 100644
--- a/app/routes/demo/code-mirror.ts
+++ b/app/routes/demo/code-mirror.ts
@@ -25,6 +25,7 @@ const QUERY_PARAMS = [
   'indentUnit',
   'indentWithTab',
   'language',
+  'lineComments',
   'lineNumbers',
   'lineSeparator',
   'lineWrapping',
diff --git a/app/templates/demo/code-mirror.hbs b/app/templates/demo/code-mirror.hbs
index 5696def426..ff08ce1e7d 100644
--- a/app/templates/demo/code-mirror.hbs
+++ b/app/templates/demo/code-mirror.hbs
@@ -167,6 +167,12 @@
         <Input @type="checkbox" @checked={{this.foldGutter}} />
         <span class="ml-2">foldGutter</span>
       </label>
+      <label class="{{labelClasses}}" title="Enable line comments">
+        <Input @type="checkbox" @checked={{this.lineComments}} />
+        <span class="ml-2">lineComments</span>
+      </label>
+    </codemirror-options-left>
+    <codemirror-options-right class="flex flex-wrap">
       <label class="{{labelClasses}}" title="Enable visual line wrapping for lines exceeding editor width">
         <Input @type="checkbox" @checked={{this.lineWrapping}} />
         <span class="ml-2">lineWrapping</span>
@@ -175,8 +181,6 @@
         <Input @type="checkbox" @checked={{this.scrollPastEnd}} />
         <span class="ml-2">scrollPastEnd</span>
       </label>
-    </codemirror-options-left>
-    <codemirror-options-right class="flex flex-wrap">
       <label class="{{labelClasses}}" title="Limit maximum height of the component's element">
         <Input @type="checkbox" @checked={{this.maxHeight}} />
         <span class="ml-2">maxHeight</span>
@@ -340,6 +344,8 @@
   @history={{this.history}}
   @indentOnInput={{this.indentOnInput}}
   @indentWithTab={{this.indentWithTab}}
+  @lineComments={{this.lineComments}}
+  @lineData={{if this.lineComments this.selectedDocumentLineData}}
   @lineNumbers={{this.lineNumbers}}
   @lineWrapping={{this.lineWrapping}}
   @mergeControls={{this.mergeControls}}
diff --git a/app/utils/code-mirror-line-comments-expanded-plugin.ts b/app/utils/code-mirror-line-comments-expanded-plugin.ts
new file mode 100644
index 0000000000..bfafb2c53f
--- /dev/null
+++ b/app/utils/code-mirror-line-comments-expanded-plugin.ts
@@ -0,0 +1,54 @@
+import { Decoration, EditorView, ViewPlugin, ViewUpdate, type DecorationSet } from '@codemirror/view';
+import { RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { expandedLineNumbersCompartment, expandedLineNumbersFacet } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+const lineCommentsExpandedDecoration = Decoration.line({
+  attributes: { class: 'cm-lineCommentsExpanded' },
+});
+
+function lineCommentsExpandedDecorations(view: EditorView) {
+  const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
+  const builder = new RangeSetBuilder<Decoration>();
+
+  for (const { from, to } of view.visibleRanges) {
+    for (let pos = from; pos <= to; ) {
+      const line = view.state.doc.lineAt(pos);
+
+      if (expandedLines.includes(line.number)) {
+        builder.add(line.from, line.from, lineCommentsExpandedDecoration);
+      }
+
+      pos = line.to + 1;
+    }
+  }
+
+  return builder.finish();
+}
+
+export function lineCommentsExpandedPlugin() {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = lineCommentsExpandedDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.transactions) {
+          for (const tr of update.transactions) {
+            for (const effect of tr.effects) {
+              if (effect instanceof StateEffect && effect.value?.compartment === expandedLineNumbersCompartment) {
+                this.decorations = lineCommentsExpandedDecorations(update.view);
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}
diff --git a/app/utils/code-mirror-line-comments-gutter.ts b/app/utils/code-mirror-line-comments-gutter.ts
new file mode 100644
index 0000000000..1c5b14647d
--- /dev/null
+++ b/app/utils/code-mirror-line-comments-gutter.ts
@@ -0,0 +1,118 @@
+import { BlockInfo, EditorView } from '@codemirror/view';
+import { gutter as gutterRS, GutterMarker as GutterMarkerRS } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
+import { expandedLineNumbersCompartment, expandedLineNumbersFacet, lineDataFacet } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+class CommentsCountGutterMarker extends GutterMarkerRS {
+  line: BlockInfo;
+
+  constructor(line: BlockInfo) {
+    super();
+    this.line = line;
+  }
+
+  toDOM(view: EditorView) {
+    const lineNumber = view.state.doc.lineAt(this.line.from).number;
+    const commentsCount = view.state.facet(lineDataFacet)[0]?.dataForLine(lineNumber)?.commentsCount || 0;
+    const elem = document.createElement('div');
+    const classNames = ['cm-commentsCount'];
+
+    if (commentsCount > 99) {
+      classNames.push('cm-commentsCountOver99');
+    }
+
+    elem.className = classNames.join(' ');
+    elem.innerText = `${commentsCount > 99 ? '99+' : commentsCount}`;
+
+    return elem;
+  }
+}
+
+class CommentButtonGutterMarker extends GutterMarkerRS {
+  line: BlockInfo;
+
+  constructor(line: BlockInfo) {
+    super();
+    this.line = line;
+  }
+
+  toDOM() {
+    const elem = document.createElement('div');
+    elem.className = 'cm-commentButton';
+
+    elem.innerText = `💬`;
+
+    return elem;
+  }
+}
+
+function lineCommentsGutterLineMarker(view: EditorView, line: BlockInfo) {
+  const lineNumber = view.state.doc.lineAt(line.from).number;
+  const commentsCount = view.state.facet(lineDataFacet)[0]?.dataForLine(lineNumber)?.commentsCount || 0;
+
+  return new (commentsCount === 0 ? CommentButtonGutterMarker : CommentsCountGutterMarker)(line);
+}
+
+function lineCommentsGutterClickHandler(view: EditorView, line: BlockInfo) {
+  const lineNumber = view.state.doc.lineAt(line.from).number;
+  const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
+  const newExpandedLines = expandedLines.includes(lineNumber) ? expandedLines.without(lineNumber) : [...expandedLines, lineNumber];
+
+  view.dispatch({
+    effects: [expandedLineNumbersCompartment.reconfigure(expandedLineNumbersFacet.of(newExpandedLines))],
+  });
+
+  return true;
+}
+
+const lineCommentsGutterBaseTheme = EditorView.baseTheme({
+  '.cm-lineCommentsGutter': {
+    minWidth: '24px',
+    textAlign: 'center',
+    userSelect: 'none',
+
+    '& .cm-gutterElement': {
+      cursor: 'pointer',
+
+      '& .cm-commentButton': {
+        opacity: '0.15',
+      },
+
+      '& .cm-commentsCount': {
+        display: 'block',
+        backgroundColor: '#ffcd72c0',
+        borderRadius: '50%',
+        color: '#24292e',
+        transform: 'scale(0.75)',
+        fontWeight: '500',
+        fontSize: '12px',
+
+        '&.cm-commentsCountOver99': {
+          fontSize: '9.5px',
+        },
+      },
+
+      '&:hover': {
+        '& .cm-commentButton': {
+          opacity: '1',
+        },
+
+        '& .cm-commentsCount': {
+          backgroundColor: '#ffa500',
+        },
+      },
+    },
+  },
+});
+
+export function lineCommentsGutter() {
+  return [
+    gutterRS({
+      class: 'cm-lineCommentsGutter',
+      lineMarker: lineCommentsGutterLineMarker,
+      domEventHandlers: {
+        click: lineCommentsGutterClickHandler,
+      },
+    }),
+    lineCommentsGutterBaseTheme,
+  ];
+}
diff --git a/app/utils/code-mirror-line-comments-widget.ts b/app/utils/code-mirror-line-comments-widget.ts
new file mode 100644
index 0000000000..d78613f147
--- /dev/null
+++ b/app/utils/code-mirror-line-comments-widget.ts
@@ -0,0 +1,106 @@
+import { Decoration, EditorView, WidgetType, type DecorationSet } from '@codemirror/view';
+import { Line, /* StateEffect, */ StateField } from '@codemirror/state';
+import { lineDataFacet /*, expandedLineNumbersFacet, expandedLineNumbersCompartment */ } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+class LineCommentsWidget extends WidgetType {
+  line: Line;
+  // isExpanded: boolean;
+
+  constructor(line: Line /* , isExpanded: boolean = false */) {
+    super();
+    this.line = line;
+    // this.isExpanded = isExpanded;
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    // const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
+    const commentsCount = view.state.facet(lineDataFacet)[0]?.dataForLine(this.line.number)?.commentsCount || 0;
+    const classNames = ['cm-lineCommentsWidget'];
+
+    // if (expandedLines.includes(this.line.number) || this.isExpanded) {
+    //   classNames.push('cm-lineCommentsWidgetExpanded');
+    // }
+
+    const elem = document.createElement('div');
+    elem.className = classNames.join(' ');
+
+    if (commentsCount) {
+      elem.innerText = `💬 COMMENTS FOR LINE #${this.line.number} (COUNT: ${commentsCount})`;
+    } else {
+      elem.innerText = `💬 ADD COMMENT FOR LINE #${this.line.number}`;
+    }
+
+    return elem;
+  }
+}
+
+function lineCommentsWidgetDecoration(line: Line) {
+  return Decoration.widget({
+    widget: new LineCommentsWidget(line),
+    side: 10,
+    // inlineOrder: true,
+    // block: true,
+  }).range(line.to);
+}
+
+const lineCommentsWidgetStateField = StateField.define<DecorationSet>({
+  create(state) {
+    return Decoration.set(Array.from({ length: state.doc.lines }, (_, i) => lineCommentsWidgetDecoration(state.doc.line(i + 1))));
+  },
+
+  update(decorations, transaction) {
+    if (transaction.docChanged) {
+      return this.create(transaction.state);
+    }
+
+    // let newDecorations = decorations.map(transaction.changes);
+
+    // for (const effect of transaction.effects) {
+    //   if (effect instanceof StateEffect && effect.value?.compartment === expandedLineNumbersCompartment) {
+    //     // return this.create(transaction.state);
+
+    //     newDecorations = newDecorations.update({ filter: (pos) => pos !== effect.value.pos }).update({
+    //       add: [lineCommentsWidgetDecoration(transaction.state.doc.lineAt(effect.value.pos))],
+    //     });
+    //   }
+    // }
+
+    // return newDecorations;
+
+    return decorations;
+  },
+
+  provide(field) {
+    return EditorView.decorations.from(field);
+  },
+});
+
+const lineCommentsWidgetBaseTheme = EditorView.baseTheme({
+  '.cm-line': {
+    '& .cm-lineCommentsWidget': {
+      display: 'none',
+      backgroundColor: '#009bff40',
+      paddingLeft: '1rem',
+      marginRight: '-1rem',
+    },
+
+    '&.cm-lineCommentsExpanded': {
+      '& .cm-lineCommentsWidget': {
+        display: 'block',
+        backgroundColor: '#009bff80',
+      },
+    },
+
+    '& .cm-lineCommentsWidget + br': {
+      display: 'none',
+    },
+
+    '& .cm-insertedLine + br': {
+      display: 'none',
+    },
+  },
+});
+
+export function lineCommentsWidget() {
+  return [lineCommentsWidgetStateField, lineCommentsWidgetBaseTheme];
+}
diff --git a/app/utils/code-mirror-line-comments.ts b/app/utils/code-mirror-line-comments.ts
new file mode 100644
index 0000000000..57e7c22a4f
--- /dev/null
+++ b/app/utils/code-mirror-line-comments.ts
@@ -0,0 +1,46 @@
+import { Compartment, Facet } from '@codemirror/state';
+import { lineCommentsWidget } from 'codecrafters-frontend/utils/code-mirror-line-comments-widget';
+import { lineCommentsGutter } from 'codecrafters-frontend/utils/code-mirror-line-comments-gutter';
+import { lineCommentsExpandedPlugin } from 'codecrafters-frontend/utils/code-mirror-line-comments-expanded-plugin';
+
+export class LineData {
+  commentsCount: number;
+  lineNumber: number;
+
+  constructor({ commentsCount, lineNumber }: { commentsCount: number; lineNumber: number }) {
+    this.commentsCount = commentsCount;
+    this.lineNumber = lineNumber;
+  }
+}
+
+export class LineDataCollection {
+  #lineData: LineData[];
+
+  constructor(lineData: LineData[] = []) {
+    this.#lineData = lineData;
+  }
+
+  dataForLine(lineNumber: number) {
+    return this.#lineData.find((c) => c.lineNumber === lineNumber);
+  }
+}
+
+export const lineDataFacet = Facet.define<LineDataCollection>();
+
+export const expandedLineNumbersFacet = Facet.define<number[]>();
+
+export const expandedLineNumbersCompartment = new Compartment();
+
+// export const toggleLineCommentsEffect = StateEffect.define<{ pos: number; isExpanded: boolean }>({
+//   map: (value, mapping) => ({ pos: mapping.mapPos(value.pos), isExpanded: value.isExpanded }),
+// });
+
+export function lineComments(lineData: LineDataCollection) {
+  return [
+    lineDataFacet.of(lineData),
+    expandedLineNumbersCompartment.of(expandedLineNumbersFacet.of([])),
+    lineCommentsWidget(),
+    lineCommentsGutter(),
+    lineCommentsExpandedPlugin(),
+  ];
+}
diff --git a/app/utils/code-mirror-themes.ts b/app/utils/code-mirror-themes.ts
index fcc6d43b16..a28b7ff42f 100644
--- a/app/utils/code-mirror-themes.ts
+++ b/app/utils/code-mirror-themes.ts
@@ -7,6 +7,10 @@ const BASE_STYLE = {
   // Container for all gutters
   '.cm-gutters': {
     borderRight: 'none',
+
+    '&.cm-gutters-rs': {
+      backgroundColor: '#ffffff20', // '#ff000070', // 'transparent',
+    },
   },
 
   // All gutter elements
@@ -18,7 +22,7 @@ const BASE_STYLE = {
   '.cm-lineNumbers': {
     '& .cm-gutterElement': {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       justifyContent: 'flex-end',
       padding: '0 0.5rem 0 1rem',
       fontSize: '0.875em',
@@ -30,11 +34,15 @@ const BASE_STYLE = {
   '.cm-foldGutter': {
     '& .cm-gutterElement': {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       justifyContent: 'center',
       fontSize: '0.875em',
       minWidth: '1.2rem',
       color: '#94a3b8',
+
+      '& svg': {
+        marginTop: '0.3rem',
+      },
     },
   },
 
diff --git a/tests/integration/components/code-mirror-test.js b/tests/integration/components/code-mirror-test.js
index 7110065550..6a165afe00 100644
--- a/tests/integration/components/code-mirror-test.js
+++ b/tests/integration/components/code-mirror-test.js
@@ -350,6 +350,18 @@ module('Integration | Component | code-mirror', function (hooks) {
       skip('it does something useful with the editor');
     });
 
+    module('lineComments', function () {
+      test("it doesn't break the editor when passed", async function (assert) {
+        this.set('lineComments', true);
+        await render(hbs`<CodeMirror @lineComments={{this.lineComments}} />`);
+        assert.ok(codeMirror.hasRendered);
+        this.set('lineComments', false);
+        assert.ok(codeMirror.hasRendered);
+      });
+
+      skip('it does something useful with the editor');
+    });
+
     module('lineNumbers', function () {
       test("it doesn't break the editor when passed", async function (assert) {
         this.set('lineNumbers', true);