diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ecbf40f62..2162bce24 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -732,7 +732,8 @@
     "note_type": "Note type",
     "editable": "Editable",
     "basic_properties": "Basic Properties",
-    "language": "Language"
+    "language": "Language",
+    "configure_code_notes": "Configure code notes..."
   },
   "book_properties": {
     "view_type": "View type",
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index 372a778c8..ea0ca6948 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -18,6 +18,8 @@ import sync from "../../services/sync";
 import appContext from "../../components/app_context";
 import HelpButton from "../react/HelpButton";
 import { TabContext } from "./ribbon-interface";
+import Modal from "../react/Modal";
+import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
 
 export default function BasicPropertiesTab({ note }: TabContext) {
     return (
@@ -41,6 +43,7 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
     
     const currentNoteType = useNoteProperty(note, "type") ?? undefined;
     const currentNoteMime = useNoteProperty(note, "mime");
+    const [ modalShown, setModalShown ] = useState(false);
 
     const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
         if (!note || (type === currentNoteType && mime === currentNoteMime)) {
@@ -111,7 +114,19 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
                         {title}
                     </FormListItem>
                 ))}
+
+                <FormDropdownDivider />
+                <FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
             </Dropdown>
+
+            <Modal
+                className="code-mime-types-modal"
+                title={t("code_mime_types.title")}
+                show={modalShown} onHidden={() => setModalShown(false)}
+                size="xl" scrollable
+            >
+                <CodeMimeTypesList />
+            </Modal>
         </div>
     )   
 }
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index cf951e3b2..1445671a5 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -123,6 +123,14 @@ function CodeNotePreview({ themeName, wordWrapping }: { themeName: string, wordW
 }
 
 function CodeMimeTypes() {
+    return (
+        <OptionsSection title={t("code_mime_types.title")}>
+            <CodeMimeTypesList />
+        </OptionsSection>
+    )
+}
+
+export function CodeMimeTypesList() {
     const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
     const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
     const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
@@ -148,20 +156,18 @@ function CodeMimeTypes() {
     }, [ codeNotesMimeTypes ]);  
 
     return (
-        <OptionsSection title={t("code_mime_types.title")}>
-            <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
-                {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
-                    <section style={sectionStyle}>
-                        { initial && <h5>{initial}</h5> }
-                        <CheckboxList
-                            values={mimeTypes}
-                            keyProperty="mime" titleProperty="title"
-                            currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
-                            columnWidth="inherit"
-                        />
-                    </section>
-                ))}
-            </ul>
-        </OptionsSection>
-    )
+        <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
+            {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
+                <section style={sectionStyle}>
+                    { initial && <h5>{initial}</h5> }
+                    <CheckboxList
+                        values={mimeTypes}
+                        keyProperty="mime" titleProperty="title"
+                        currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
+                        columnWidth="inherit"
+                    />
+                </section>
+            ))}
+        </ul>
+    );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
index 03df50550..ff78d8a33 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
@@ -11,7 +11,7 @@ interface OptionsSectionProps {
 
 export default function OptionsSection({ title, children, noCard, className, ...rest }: OptionsSectionProps) {
     return (
-        <div className={`options-section ${noCard && "tn-no-card"} ${className ?? ""}`} {...rest}>
+        <div className={`options-section ${noCard ? "tn-no-card" : ""} ${className ?? ""}`} {...rest}>
             {title && <h4>{title}</h4>}
             {children}
         </div>