diff --git a/webapp/src/components/NameManager/NameManagerDialog.tsx b/webapp/src/components/NameManager/NameManagerDialog.tsx
index 265fd15..9da2d3c 100644
--- a/webapp/src/components/NameManager/NameManagerDialog.tsx
+++ b/webapp/src/components/NameManager/NameManagerDialog.tsx
@@ -1,4 +1,4 @@
-import type { DefinedName, Model } from "@ironcalc/wasm";
+import type { Model } from "@ironcalc/wasm";
 import {
   Box,
   Button,
@@ -18,44 +18,40 @@ import NamedRange from "./NamedRange";
 
 interface NameManagerDialogProperties {
   onClose: () => void;
+  onNamesChanged: () => void;
   open: boolean;
   model: Model;
 }
 
-function NameManagerDialog({
-  onClose,
-  open,
-  model,
-}: NameManagerDialogProperties) {
-  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+function NameManagerDialog(properties: NameManagerDialogProperties) {
+  const { onClose, open, model, onNamesChanged } = properties;
+
   const [showNewName, setShowNewName] = useState(false);
   const [showOptions, setShowOptions] = useState(true);
 
   useEffect(() => {
-    // render definedNames from model
-    if (open) {
-      const definedNamesModel = model.getDefinedNameList();
-      setDefinedNamesLocal(definedNamesModel);
-    }
     setShowNewName(false);
     setShowOptions(true);
-  }, [open, model]);
+  }, []);
 
   const handleNewName = () => {
-    setShowNewName(true);
-    setShowOptions(false);
+    toggleShowNewName();
+    toggleOptions();
+  };
+
+  const handleCreate = () => {
+    toggleShowNewName();
   };
 
   const handleDelete = () => {
-    // re-render modal
-    setDefinedNamesLocal(model.getDefinedNameList());
+    onNamesChanged();
   };
 
   const formatFormula = (): string => {
-    const worksheets = model.getWorksheetsProperties();
+    const worksheetNames = model.getWorksheetsProperties().map((s) => s.name);
     const selectedView = model.getSelectedView();
 
-    return getFullRangeToString(selectedView, worksheets);
+    return getFullRangeToString(selectedView, worksheetNames);
   };
 
   const toggleOptions = () => {
@@ -63,9 +59,12 @@ function NameManagerDialog({
   };
 
   const toggleShowNewName = () => {
-    setShowNewName(false);
+    setShowNewName(!showNewName);
   };
 
+  const worksheets = model.getWorksheetsProperties();
+  const definedNameList = model.getDefinedNameList();
+
   return (
     <StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
       <StyledDialogTitle>
@@ -76,14 +75,14 @@ function NameManagerDialog({
       </StyledDialogTitle>
       <StyledDialogContent dividers>
         <StyledRangesHeader>
-          <Box width="171px">{t("name_manager_dialog.name")}</Box>
-          <Box width="171px">{t("name_manager_dialog.range")}</Box>
-          <Box width="171px">{t("name_manager_dialog.scope")}</Box>
+          <StyledBox>{t("name_manager_dialog.name")}</StyledBox>
+          <StyledBox>{t("name_manager_dialog.range")}</StyledBox>
+          <StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
         </StyledRangesHeader>
-        {definedNamesLocal?.map((definedName) => (
+        {definedNameList.map((definedName) => (
           <NamedRange
             model={model}
-            worksheets={model.getWorksheetsProperties()}
+            worksheets={worksheets}
             name={definedName.name}
             scope={definedName.scope}
             formula={definedName.formula}
@@ -96,11 +95,13 @@ function NameManagerDialog({
         {showNewName && (
           <NamedRange
             model={model}
-            worksheets={model.getWorksheetsProperties()}
+            worksheets={worksheets}
+            name={""}
             formula={formatFormula()}
             showOptions={showOptions}
             toggleOptions={toggleOptions}
             toggleShowNewName={toggleShowNewName}
+            onCreate={handleCreate}
           />
         )}
       </StyledDialogContent>
@@ -117,7 +118,7 @@ function NameManagerDialog({
           disableElevation
           sx={{ textTransform: "none" }}
           startIcon={<Plus size={16} />}
-          disabled={!showOptions} // disable when editing
+          disabled={!showOptions}
         >
           {t("name_manager_dialog.new")}
         </Button>
@@ -142,6 +143,10 @@ align-items: center;
 justify-content: space-between;
 `;
 
+const StyledBox = styled(Box)`
+width: 171px;
+`;
+
 const StyledDialogContent = styled(DialogContent)`
 display: flex;
 flex-direction: column;
diff --git a/webapp/src/components/NameManager/NamedRange.tsx b/webapp/src/components/NameManager/NamedRange.tsx
index 76b591b..80dc30f 100644
--- a/webapp/src/components/NameManager/NamedRange.tsx
+++ b/webapp/src/components/NameManager/NamedRange.tsx
@@ -14,27 +14,31 @@ import { useEffect, useState } from "react";
 interface NamedRangeProperties {
   model: Model;
   worksheets: WorksheetProperties[];
-  name?: string;
+  name: string;
   scope?: number;
   formula: string;
+  onCreate?: () => void;
   onDelete?: () => void;
   toggleShowNewName?: () => void;
   toggleOptions: () => void;
   showOptions?: boolean;
 }
 
-function NamedRange({
-  model,
-  worksheets,
-  name,
-  scope,
-  formula,
-  onDelete,
-  toggleShowNewName,
-  toggleOptions,
-  showOptions,
-}: NamedRangeProperties) {
-  const [newName, setNewName] = useState(name || "");
+function NamedRange(properties: NamedRangeProperties) {
+  const {
+    model,
+    worksheets,
+    name,
+    scope,
+    formula,
+    onCreate,
+    onDelete,
+    toggleShowNewName,
+    toggleOptions,
+    showOptions,
+  } = properties;
+
+  const [newName, setNewName] = useState(name);
   const [newScope, setNewScope] = useState(scope);
   const [newFormula, setNewFormula] = useState(formula);
   const [readOnly, setReadOnly] = useState(true);
@@ -53,30 +57,24 @@ function NamedRange({
     }
   }, [newName, model]);
 
-  const handleSaveUpdate = () => {
+  const handleCreateUpdate = () => {
     const definedNamesModel = model.getDefinedNameList();
 
     if (definedNamesModel.find((n) => n.name === name)) {
-      // update name
+      // update
       try {
-        model.updateDefinedName(
-          name || "",
-          scope,
-          newName,
-          newScope,
-          newFormula,
-        );
+        model.updateDefinedName(name, scope, newName, newScope, newFormula);
       } catch (error) {
         console.log("DefinedName update failed", error);
       }
     } else {
-      // create name
+      // create
       try {
         model.newDefinedName(newName, newScope, newFormula);
       } catch (error) {
         console.log("DefinedName save failed", error);
       }
-      setReadOnly(true);
+      onCreate?.();
     }
     setShowEditDelete(false);
     toggleOptions();
@@ -86,11 +84,9 @@ function NamedRange({
     setReadOnly(true);
     setShowEditDelete(false);
     toggleOptions();
-    setNewName(name || "");
+    setNewName(name);
     setNewScope(scope);
-
-    // if it's newName remove it from modal
-    toggleShowNewName?.();
+    toggleShowNewName?.(); // if it's newName remove it from modal
   };
 
   const handleEdit = () => {
@@ -105,7 +101,7 @@ function NamedRange({
     } catch (error) {
       console.log("DefinedName delete failed", error);
     }
-    onDelete?.(); // refresh modal
+    onDelete?.();
   };
 
   return (
@@ -169,12 +165,18 @@ function NamedRange({
         {showEditDelete ? (
           // save cancel
           <>
-            <IconButton onClick={handleSaveUpdate}>
+            <IconButton
+              onClick={handleCreateUpdate}
+              sx={{ color: (theme) => theme.palette.success.main }}
+            >
               <Check size={12} />
             </IconButton>
-            <StyledIconButton onClick={handleCancel}>
+            <IconButton
+              onClick={handleCancel}
+              sx={{ color: (theme) => theme.palette.error.main }}
+            >
               <X size={12} />
-            </StyledIconButton>
+            </IconButton>
           </>
         ) : (
           // edit delete
diff --git a/webapp/src/components/NameManager/index.ts b/webapp/src/components/NameManager/index.ts
new file mode 100644
index 0000000..f4d8ea2
--- /dev/null
+++ b/webapp/src/components/NameManager/index.ts
@@ -0,0 +1 @@
+export { default } from "./NameManagerDialog";
diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx
index 30d265c..a32e79b 100644
--- a/webapp/src/components/toolbar.tsx
+++ b/webapp/src/components/toolbar.tsx
@@ -36,7 +36,7 @@ import {
   DecimalPlacesIncreaseIcon,
 } from "../icons";
 import { theme } from "../theme";
-import NameManagerDialog from "./NameManager/NameManagerDialog";
+import NameManagerDialog from "./NameManager";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -63,7 +63,7 @@ type ToolbarProperties = {
   onFillColorPicked: (hex: string) => void;
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
-  onNamedRangesUpdate: () => void;
+  onNamesChanged: () => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -398,6 +398,7 @@ function Toolbar(properties: ToolbarProperties) {
         onClose={() => {
           setNameManagerDialogOpen(false);
         }}
+        onNamesChanged={properties.onNamesChanged}
         model={properties.model}
       />
     </ToolbarContainer>
diff --git a/webapp/src/components/workbook.tsx b/webapp/src/components/workbook.tsx
index 484e927..07978d4 100644
--- a/webapp/src/components/workbook.tsx
+++ b/webapp/src/components/workbook.tsx
@@ -569,6 +569,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
+        onNamesChanged={() => setRedrawId((id) => id + 1)}
         model={model}
       />
       <FormulaBar