diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx
index 4e9d2c0..031cb9f 100644
--- a/src/AgreementHtml.tsx
+++ b/src/AgreementHtml.tsx
@@ -4,7 +4,7 @@ import { Spin } from "antd";
 import useAppStore from "./store/store";
 import FullScreenModal from "./components/FullScreenModal";
 
-function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean }) {
+function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boolean }) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
diff --git a/src/editors/ConcertoEditor.tsx b/src/editors/ConcertoEditor.tsx
index e5e0ce9..3fb2645 100644
--- a/src/editors/ConcertoEditor.tsx
+++ b/src/editors/ConcertoEditor.tsx
@@ -48,6 +48,26 @@ const handleEditorWillMount = (monacoInstance: typeof monaco) => {
     mimetypes: ["application/vnd.accordproject.concerto"],
   });
 
+  monacoInstance.languages.setLanguageConfiguration("concerto", {
+    brackets: [
+      ["{", "}"],
+      ["[", "]"],
+      ["(", ")"],
+    ],
+    autoClosingPairs: [
+      { open: "{", close: "}" },
+      { open: "[", close: "]" },
+      { open: "(", close: ")" },
+      { open: "\"", close: "\"" },
+    ],
+    surroundingPairs: [
+      { open: "{", close: "}" },
+      { open: "[", close: "]" },
+      { open: "(", close: ")" },
+      { open: "\"", close: "\"" },
+    ],
+  });
+
   monacoInstance.languages.setMonarchTokensProvider("concerto", {
     keywords: concertoKeywords,
     typeKeywords: concertoTypes,
@@ -125,6 +145,9 @@ export default function ConcertoEditor({
     wordWrap: "on",
     automaticLayout: true,
     scrollBeyondLastLine: false,
+    autoClosingBrackets: "languageDefined",
+    autoSurround: "languageDefined",
+    bracketPairColorization: { enabled: true },
   };
 
   const handleChange = useCallback(