diff --git a/CHANGELOG.md b/CHANGELOG.md
index e04a11bb..2e40099d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to
 
 ## Changed
 
+- 💄(frontend) code background darkened on editor #214
 - 🔥(frontend) hide markdown button if not text #213
 
 ## Removed
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 89c7ccda..59843ed4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -18,6 +18,20 @@ import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
+const cssEditor = `
+  &, & > .bn-container, & .ProseMirror {
+    height:100%
+  };
+  & .collaboration-cursor__caret.ProseMirror-widget{
+    word-wrap: initial;
+  }
+  & .bn-inline-content code {
+    background-color: gainsboro;
+    padding: 2px;
+    border-radius: 4px;
+  }
+`;
+
 interface BlockNoteEditorProps {
   doc: Doc;
   version?: Version;
@@ -103,16 +117,7 @@ export const BlockNoteContent = ({
   }, [setStore, storeId, editor]);
 
   return (
-    <Box
-      $css={`
-        &, & > .bn-container, & .ProseMirror {
-          height:100%
-        };
-        & .collaboration-cursor__caret.ProseMirror-widget{
-          word-wrap: initial;
-        }
-      `}
-    >
+    <Box $css={cssEditor}>
       {isErrorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
           <TextErrors causes={errorAttachment.cause} />