diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index ffa3f76d7..0815549e8 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -646,13 +646,13 @@ export default function Canvas() {
             x:
               prev.pan.x -
               (pointer.spaces.diagram.x - prev.pan.x) *
-                eagernessFactor *
-                Math.sign(e.deltaY),
+              eagernessFactor *
+              Math.sign(e.deltaY),
             y:
               prev.pan.y -
               (pointer.spaces.diagram.y - prev.pan.y) *
-                eagernessFactor *
-                Math.sign(e.deltaY),
+              eagernessFactor *
+              Math.sign(e.deltaY),
           },
           zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
         }));
@@ -740,8 +740,8 @@ export default function Canvas() {
               }}
             />
           ))}
-          {relationships.map((e, i) => (
-            <Relationship key={i} data={e} />
+          {relationships.map((e) => (
+            <Relationship key={e.id} data={e} />
           ))}
           {tables.map((table) => (
             <Table
diff --git a/src/components/EditorHeader/Modal/New.jsx b/src/components/EditorHeader/Modal/New.jsx
index 81ffcdb26..9967de031 100644
--- a/src/components/EditorHeader/Modal/New.jsx
+++ b/src/components/EditorHeader/Modal/New.jsx
@@ -13,22 +13,20 @@ export default function New({ selectedTemplateId, setSelectedTemplateId }) {
     <div className="grid grid-cols-3 gap-2 overflow-auto px-1">
       <div onClick={() => setSelectedTemplateId(0)}>
         <div
-          className={`rounded-md h-[180px] border-2 hover:border-dashed ${
-            selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-400"
-          }`}
+          className={`rounded-md h-[180px] border-2 hover:border-dashed ${selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-400"
+            }`}
         >
           <Thumbnail i={0} diagram={{}} zoom={0.24} theme={settings.mode} />
         </div>
         <div className="text-center mt-1">{t("blank")}</div>
       </div>
-      {templates?.map((temp, i) => (
-        <div key={i} onClick={() => setSelectedTemplateId(temp.id)}>
+      {templates?.map((temp) => (
+        <div key={temp.id} onClick={() => setSelectedTemplateId(temp.id)}>
           <div
-            className={`rounded-md h-[180px] border-2 hover:border-dashed ${
-              selectedTemplateId === temp.id
+            className={`rounded-md h-[180px] border-2 hover:border-dashed ${selectedTemplateId === temp.id
                 ? "border-blue-400"
                 : "border-zinc-400"
-            }`}
+              }`}
           >
             <Thumbnail
               i={temp.id}
diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx
index 5622d6df6..066ab6c68 100644
--- a/src/pages/Templates.jsx
+++ b/src/pages/Templates.jsx
@@ -71,7 +71,7 @@ export default function Templates() {
               <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-10 my-6">
                 {defaultTemplates?.map((t, i) => (
                   <div
-                    key={i}
+                    key={t.id}
                     className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
                   >
                     <div className="h-48">
@@ -108,7 +108,7 @@ export default function Templates() {
                 <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
                   {customTemplates?.map((c, i) => (
                     <div
-                      key={i}
+                      key={c.id}
                       className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
                     >
                       <div className="h-48">