diff --git a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
index 72b1b32..56ef1bd 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
@@ -29,11 +29,11 @@ function NamedRangeActive(properties: NamedRangeProperties) {
   const [newScope, setNewScope] = useState(scope);
   const [newFormula, setNewFormula] = useState(formula);
 
-  // todo: add error messages for validations
+  // TODO: add error messages for validations
   const [nameError, setNameError] = useState(false);
   const [formulaError, setFormulaError] = useState(false);
 
-  //todo: move logic to NameManagerDialog
+  // TODO: move logic to NameManagerDialog
   const handleSaveUpdate = () => {
     const definedNamesModel = model.getDefinedNameList();
 
@@ -85,7 +85,9 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           }}
         >
           <MenuItem value={"global"}>
-            {`${t("name_manager_dialog.workbook")} ${t("name_manager_dialog.global")}`}
+            {`${t("name_manager_dialog.workbook")} ${t(
+              "name_manager_dialog.global",
+            )}`}
           </MenuItem>
           {worksheets.map((option, index) => (
             <MenuItem key={option.name} value={index}>
@@ -122,9 +124,9 @@ function NamedRangeActive(properties: NamedRangeProperties) {
 }
 
 const StyledBox = styled(Box)`
-display: flex;
-gap: 12px;
-width: 577px;
+  display: flex;
+  gap: 12px;
+  width: 577px;
 `;
 
 const StyledTextField = styled(TextField)(() => ({
diff --git a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
index c8f8feb..355fd37 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
@@ -26,7 +26,7 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
     showOptions,
   } = properties;
 
-  //todo: move logic to NameManagerDialog
+  // TODO: move logic to NameManagerDialog
   const handleDelete = () => {
     try {
       model.deleteDefinedName(name, scope);
@@ -36,7 +36,7 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
     onDelete();
   };
 
-  //todo: pass the name, avoid logic
+  // TODO: pass the name, avoid logic
   const scopeName =
     worksheets.find((sheet, index) => index === scope)?.name ||
     `${t("name_manager_dialog.workbook")} ${t("name_manager_dialog.global")}`;