diff --git a/frontend/src/components/layouts/model-creation-layout.tsx b/frontend/src/components/layouts/model-creation-layout.tsx
index b04fb84e..c70a8f60 100644
--- a/frontend/src/components/layouts/model-creation-layout.tsx
+++ b/frontend/src/components/layouts/model-creation-layout.tsx
@@ -26,43 +26,43 @@ const pages: {
   icon: React.ElementType;
   path: string;
 }[] = [
-    {
-      id: 1,
-      title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
-      icon: TagsIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
-    },
-    {
-      id: 2,
-      title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
-      icon: DatabaseIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
-    },
-    {
-      id: 3,
-      title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
-      icon: SquareShadowIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
-    },
-    {
-      id: 4,
-      title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
-      icon: SettingsIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
-    },
-    {
-      id: 5,
-      title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
-      icon: CloudIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
-    },
-    {
-      id: 6,
-      title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
-      icon: StarIcon,
-      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
-    },
-  ];
+  {
+    id: 1,
+    title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
+    icon: TagsIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
+  },
+  {
+    id: 2,
+    title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
+    icon: DatabaseIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
+  },
+  {
+    id: 3,
+    title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
+    icon: SquareShadowIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
+  },
+  {
+    id: 4,
+    title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
+    icon: SettingsIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
+  },
+  {
+    id: 5,
+    title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
+    icon: CloudIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
+  },
+  {
+    id: 6,
+    title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
+    icon: StarIcon,
+    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
+  },
+];
 
 const ModelCreationLayout = () => {
   const { pathname } = useLocation();
diff --git a/frontend/src/features/model-creation/api/update-models.ts b/frontend/src/features/model-creation/api/update-models.ts
new file mode 100644
index 00000000..43417ef6
--- /dev/null
+++ b/frontend/src/features/model-creation/api/update-models.ts
@@ -0,0 +1,21 @@
+import { API_ENDPOINTS, apiClient } from "@/services";
+import { TModel } from "@/types";
+
+export type TUpdateModelArgs = {
+  description: string;
+  name: string;
+  modelId: string;
+};
+
+export const updateModel = async ({
+  name,
+  description,
+  modelId,
+}: TUpdateModelArgs): Promise<TModel> => {
+  return await (
+    await apiClient.patch(`${API_ENDPOINTS.UPDATE_MODEL(modelId)}`, {
+      name,
+      description,
+    })
+  ).data;
+};
diff --git a/frontend/src/features/model-creation/components/creation-success-confirmation.tsx b/frontend/src/features/model-creation/components/creation-success-confirmation.tsx
index 509ce7f8..0eea6097 100644
--- a/frontend/src/features/model-creation/components/creation-success-confirmation.tsx
+++ b/frontend/src/features/model-creation/components/creation-success-confirmation.tsx
@@ -30,10 +30,17 @@ const ModelCreationSuccessConfirmation = () => {
           title={MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
           nativeAnchor={false}
         >
-          <Button>{MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}</Button>
+          <Button>
+            {MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
+          </Button>
         </Link>
-        <Link href={`${APPLICATION_ROUTES.MODELS}`} title={MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}>
-          <Button variant="dark">{MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}</Button>
+        <Link
+          href={`${APPLICATION_ROUTES.MODELS}`}
+          title={MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
+        >
+          <Button variant="dark">
+            {MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
+          </Button>
         </Link>
       </div>
     </div>
diff --git a/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx b/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx
index 2f487e1e..3cd9bda6 100644
--- a/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx
+++ b/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx
@@ -190,8 +190,18 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
             <p>Drop the files here ...</p>
           ) : (
             <>
-              <p>{MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog.mainInstruction}</p>
-              <small>{MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog.subInstruction}</small>
+              <p>
+                {
+                  MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog
+                    .mainInstruction
+                }
+              </p>
+              <small>
+                {
+                  MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog
+                    .subInstruction
+                }
+              </small>
             </>
           )}
         </div>
diff --git a/frontend/src/features/model-creation/components/index.ts b/frontend/src/features/model-creation/components/index.ts
index e1e87a2d..3c397149 100644
--- a/frontend/src/features/model-creation/components/index.ts
+++ b/frontend/src/features/model-creation/components/index.ts
@@ -1,6 +1,6 @@
 export { default as ProgressBar } from "./progress-bar";
 export { default as StepHeading } from "./step-heading";
-export { default as ModelDetailsForm } from "./model-details";
+export { default as ModelDetailsForm } from "./model-details/model-details";
 export { default as TrainingDatasetForm } from "./training-dataset/training-dataset";
 export { default as TrainingAreaForm } from "./training-area/training-area";
 export { default as TrainingSettingsStep } from "./training-settings/training-settings";
diff --git a/frontend/src/features/model-creation/components/model-details.tsx b/frontend/src/features/model-creation/components/model-details.tsx
deleted file mode 100644
index bf150b75..00000000
--- a/frontend/src/features/model-creation/components/model-details.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  FORM_VALIDATION_CONFIG,
-  MODEL_CREATION_FORM_NAME,
-  useModelFormContext,
-} from "@/app/providers/model-creation-provider";
-import { Input, Select, TextArea } from "@/components/ui/form";
-import { BASE_MODELS } from "@/enums";
-import { StepHeading } from "@/features/model-creation/components/";
-import { MODEL_CREATION_CONTENT } from "@/utils";
-
-const baseModelOptions = [
-  {
-    name: BASE_MODELS.RAMP,
-    value: "RAMP",
-  },
-  {
-    name: BASE_MODELS.YOLOV8_V1,
-    value: "YOLO_V8_V1",
-  },
-  {
-    name: BASE_MODELS.YOLOV8_V2,
-    value: "YOLO_V8_V2",
-  },
-];
-
-const ModelDetailsForm = () => {
-  const { formData, handleChange } = useModelFormContext();
-  return (
-    <div className="flex flex-col gap-y-6">
-      <StepHeading
-        heading={MODEL_CREATION_CONTENT.modelDetails.pageTitle}
-        description={MODEL_CREATION_CONTENT.modelDetails.pageDescription}
-      />
-      <div className="flex flex-col gap-y-10">
-        <Input
-          handleInput={(e) =>
-            handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, e.target.value)
-          }
-          value={formData.modelName}
-          toolTipContent={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelName.toolTip
-          }
-          label={MODEL_CREATION_CONTENT.modelDetails.form.modelName.label}
-          labelWithTooltip
-          placeholder={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelName.placeholder
-          }
-          showBorder
-          helpText={MODEL_CREATION_CONTENT.modelDetails.form.modelName.helpText}
-          required
-          maxLength={
-            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME]
-              .maxLength
-          }
-          minLength={
-            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME]
-              .minLength
-          }
-        />
-        <TextArea
-          handleChange={(e) =>
-            handleChange(
-              MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION,
-              e.target.value,
-            )
-          }
-          label={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.label
-          }
-          helpText={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.helpText
-          }
-          labelWithTooltip
-          toolTipContent={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.toolTip
-          }
-          placeholder={
-            MODEL_CREATION_CONTENT.modelDetails.form.modelDescription
-              .placeholder
-          }
-          value={formData.modelDescription}
-          required
-          maxLength={
-            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
-              .maxLength
-          }
-          minLength={
-            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
-              .minLength
-          }
-        />
-        <Select
-          label={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.label}
-          helpText={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.helpText}
-          labelWithTooltip
-          toolTipContent={
-            MODEL_CREATION_CONTENT.modelDetails.form.baseModel.toolTip
-          }
-          defaultValue={formData.baseModel}
-          options={baseModelOptions}
-          handleChange={(e) =>
-            handleChange(MODEL_CREATION_FORM_NAME.BASE_MODELS, e.target.value)
-          }
-          required
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ModelDetailsForm;
diff --git a/frontend/src/features/model-creation/components/model-details/model-description-input.tsx b/frontend/src/features/model-creation/components/model-details/model-description-input.tsx
new file mode 100644
index 00000000..e106dc62
--- /dev/null
+++ b/frontend/src/features/model-creation/components/model-details/model-description-input.tsx
@@ -0,0 +1,43 @@
+import {
+  FORM_VALIDATION_CONFIG,
+  MODEL_CREATION_FORM_NAME,
+} from "@/app/providers/model-creation-provider";
+import { TextArea } from "@/components/ui/form";
+import { MODEL_CREATION_CONTENT } from "@/utils";
+
+const ModelDescriptionFormInput = ({
+  handleChange,
+  value,
+}: {
+  value: string;
+  handleChange: (value: string) => void;
+}) => {
+  return (
+    <TextArea
+      handleChange={(e) => handleChange(e.target.value)}
+      label={MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.label}
+      helpText={
+        MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.helpText
+      }
+      labelWithTooltip
+      toolTipContent={
+        MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.toolTip
+      }
+      placeholder={
+        MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.placeholder
+      }
+      value={value}
+      required
+      maxLength={
+        FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
+          .maxLength
+      }
+      minLength={
+        FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
+          .minLength
+      }
+    />
+  );
+};
+
+export default ModelDescriptionFormInput;
diff --git a/frontend/src/features/model-creation/components/model-details/model-details.tsx b/frontend/src/features/model-creation/components/model-details/model-details.tsx
new file mode 100644
index 00000000..8c624a44
--- /dev/null
+++ b/frontend/src/features/model-creation/components/model-details/model-details.tsx
@@ -0,0 +1,67 @@
+import {
+  MODEL_CREATION_FORM_NAME,
+  useModelFormContext,
+} from "@/app/providers/model-creation-provider";
+import { Select } from "@/components/ui/form";
+import { BASE_MODELS } from "@/enums";
+import { StepHeading } from "@/features/model-creation/components/";
+import { MODEL_CREATION_CONTENT } from "@/utils";
+import ModelNameFormInput from "@/features/model-creation/components/model-details/model-name-input";
+import ModelDescriptionFormInput from "./model-description-input";
+
+const baseModelOptions = [
+  {
+    name: BASE_MODELS.RAMP,
+    value: "RAMP",
+  },
+  {
+    name: BASE_MODELS.YOLOV8_V1,
+    value: "YOLO_V8_V1",
+  },
+  {
+    name: BASE_MODELS.YOLOV8_V2,
+    value: "YOLO_V8_V2",
+  },
+];
+
+const ModelDetailsForm = () => {
+  const { formData, handleChange } = useModelFormContext();
+  return (
+    <div className="flex flex-col gap-y-6">
+      <StepHeading
+        heading={MODEL_CREATION_CONTENT.modelDetails.pageTitle}
+        description={MODEL_CREATION_CONTENT.modelDetails.pageDescription}
+      />
+      <div className="flex flex-col gap-y-10">
+        <ModelNameFormInput
+          value={formData.modelName}
+          handleChange={(value) =>
+            handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, value)
+          }
+        />
+        <ModelDescriptionFormInput
+          value={formData.modelDescription}
+          handleChange={(value) =>
+            handleChange(MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION, value)
+          }
+        />
+        <Select
+          label={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.label}
+          helpText={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.helpText}
+          labelWithTooltip
+          toolTipContent={
+            MODEL_CREATION_CONTENT.modelDetails.form.baseModel.toolTip
+          }
+          defaultValue={formData.baseModel}
+          options={baseModelOptions}
+          handleChange={(e) =>
+            handleChange(MODEL_CREATION_FORM_NAME.BASE_MODELS, e.target.value)
+          }
+          required
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ModelDetailsForm;
diff --git a/frontend/src/features/model-creation/components/model-details/model-name-input.tsx b/frontend/src/features/model-creation/components/model-details/model-name-input.tsx
new file mode 100644
index 00000000..dff40e0d
--- /dev/null
+++ b/frontend/src/features/model-creation/components/model-details/model-name-input.tsx
@@ -0,0 +1,40 @@
+import {
+  FORM_VALIDATION_CONFIG,
+  MODEL_CREATION_FORM_NAME,
+} from "@/app/providers/model-creation-provider";
+import { Input } from "@/components/ui/form";
+import { MODEL_CREATION_CONTENT } from "@/utils";
+
+const ModelNameFormInput = ({
+  handleChange,
+  value,
+}: {
+  value: string;
+  handleChange: (value: string) => void;
+}) => {
+  return (
+    <Input
+      handleInput={(e) => handleChange(e.target.value)}
+      value={value}
+      toolTipContent={
+        MODEL_CREATION_CONTENT.modelDetails.form.modelName.toolTip
+      }
+      label={MODEL_CREATION_CONTENT.modelDetails.form.modelName.label}
+      labelWithTooltip
+      placeholder={
+        MODEL_CREATION_CONTENT.modelDetails.form.modelName.placeholder
+      }
+      showBorder
+      helpText={MODEL_CREATION_CONTENT.modelDetails.form.modelName.helpText}
+      required
+      maxLength={
+        FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME].maxLength
+      }
+      minLength={
+        FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME].minLength
+      }
+    />
+  );
+};
+
+export default ModelNameFormInput;
diff --git a/frontend/src/features/model-creation/components/training-area/open-area-map.tsx b/frontend/src/features/model-creation/components/training-area/open-area-map.tsx
index a3830caa..debe6e61 100644
--- a/frontend/src/features/model-creation/components/training-area/open-area-map.tsx
+++ b/frontend/src/features/model-creation/components/training-area/open-area-map.tsx
@@ -32,7 +32,9 @@ const OpenAerialMap = ({ tileJSONURL }: { tileJSONURL: string }) => {
 
   return (
     <div className="flex  flex-col  gap-y-2 w-full border-b-8 border-off-white px-4 pb-4">
-      <p className="text-body-1">{MODEL_CREATION_CONTENT.trainingArea.form.openAerialMap}</p>
+      <p className="text-body-1">
+        {MODEL_CREATION_CONTENT.trainingArea.form.openAerialMap}
+      </p>
       <div className="flex flex-col w-full items-center justify-between gap-y-4">
         {isError ? (
           <p>
@@ -61,8 +63,14 @@ const OpenAerialMap = ({ tileJSONURL }: { tileJSONURL: string }) => {
               </ToolTip>
             </div>
             <div className="flex items-center justify-between w-full gap-x-4">
-              <p className="text-body-4">{MODEL_CREATION_CONTENT.trainingArea.form.maxZoom} {data?.maxzoom ?? 0}</p>
-              <p className="text-body-4">{MODEL_CREATION_CONTENT.trainingArea.form.minZoom} {data?.minzoom ?? 0}</p>
+              <p className="text-body-4">
+                {MODEL_CREATION_CONTENT.trainingArea.form.maxZoom}{" "}
+                {data?.maxzoom ?? 0}
+              </p>
+              <p className="text-body-4">
+                {MODEL_CREATION_CONTENT.trainingArea.form.minZoom}{" "}
+                {data?.minzoom ?? 0}
+              </p>
             </div>
           </>
         )}
diff --git a/frontend/src/features/model-creation/components/training-area/training-area-list.tsx b/frontend/src/features/model-creation/components/training-area/training-area-list.tsx
index 9f07107e..9075d876 100644
--- a/frontend/src/features/model-creation/components/training-area/training-area-list.tsx
+++ b/frontend/src/features/model-creation/components/training-area/training-area-list.tsx
@@ -23,7 +23,8 @@ const TrainingAreaList = ({
     <div className="flex h-[60%] flex-col gap-y-4 justify-between  p-4 ">
       <div className="flex flex-col gap-y-4">
         <p className="text-body-1">
-          {MODEL_CREATION_CONTENT.trainingArea.form.trainingArea}{`${data?.count > 1 ? "s" : ""}`}{" "}
+          {MODEL_CREATION_CONTENT.trainingArea.form.trainingArea}
+          {`${data?.count > 1 ? "s" : ""}`}{" "}
           <span className="text-white bg-primary text-body-1 rounded-xl px-3 py-1">
             {data?.count ?? 0}
           </span>
diff --git a/frontend/src/features/model-creation/components/training-area/training-area.tsx b/frontend/src/features/model-creation/components/training-area/training-area.tsx
index 1e191d53..879a4bce 100644
--- a/frontend/src/features/model-creation/components/training-area/training-area.tsx
+++ b/frontend/src/features/model-creation/components/training-area/training-area.tsx
@@ -59,10 +59,12 @@ const TrainingAreaForm = () => {
           </div>
           <div className="flex flex-col items-end gap-y-4 ">
             <p className="flex items-center gap-x-2">
-              <YouTubePlayIcon className="icon-lg" />{MODEL_CREATION_CONTENT.trainingArea.tutorialText}
+              <YouTubePlayIcon className="icon-lg" />
+              {MODEL_CREATION_CONTENT.trainingArea.tutorialText}
             </p>
             <p className="text-dark">
-              {MODEL_CREATION_CONTENT.trainingArea.datasetID} {formData.selectedTrainingDatasetId}
+              {MODEL_CREATION_CONTENT.trainingArea.datasetID}{" "}
+              {formData.selectedTrainingDatasetId}
             </p>
           </div>
         </div>
diff --git a/frontend/src/features/model-creation/components/training-dataset/create-new.tsx b/frontend/src/features/model-creation/components/training-dataset/create-new.tsx
index 05914621..a61b00b6 100644
--- a/frontend/src/features/model-creation/components/training-dataset/create-new.tsx
+++ b/frontend/src/features/model-creation/components/training-dataset/create-new.tsx
@@ -12,7 +12,8 @@ const CreateNewTrainingDatasetForm = () => {
   const { formData, handleChange } = useModelFormContext();
 
   const tmsURLHelpText = useMemo(() => {
-    const helpText = MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.helpText;
+    const helpText =
+      MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.helpText;
     return formData.tmsURLValidation.message.length > 0
       ? formData.tmsURLValidation.message
       : helpText;
@@ -32,19 +33,28 @@ const CreateNewTrainingDatasetForm = () => {
   return (
     <div className="flex flex-col gap-y-10">
       <p className="font-semibold text-body-1 mb-2">
-        {MODEL_CREATION_CONTENT.trainingDataset.form.newTrainingDatasetSectionHeading}
+        {
+          MODEL_CREATION_CONTENT.trainingDataset.form
+            .newTrainingDatasetSectionHeading
+        }
       </p>
       <Input
         handleInput={(e) =>
           handleChange(MODEL_CREATION_FORM_NAME.DATASET_NAME, e.target.value)
         }
         value={formData.datasetName}
-        toolTipContent={MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.toolTip}
+        toolTipContent={
+          MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.toolTip
+        }
         label={MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.label}
         labelWithTooltip
-        placeholder={MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.placeholder}
+        placeholder={
+          MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.placeholder
+        }
         showBorder
-        helpText={MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.helpText}
+        helpText={
+          MODEL_CREATION_CONTENT.trainingDataset.form.datasetName.helpText
+        }
         required
         maxLength={
           FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.DATASET_NAME]
@@ -59,9 +69,13 @@ const CreateNewTrainingDatasetForm = () => {
       <Input
         value={formData.tmsURL}
         labelWithTooltip
-        toolTipContent={MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.toolTip}
+        toolTipContent={
+          MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.toolTip
+        }
         label={MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.label}
-        placeholder={MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.placeholder}
+        placeholder={
+          MODEL_CREATION_CONTENT.trainingDataset.form.tmsURL.placeholder
+        }
         showBorder
         helpText={tmsURLHelpText}
         required
diff --git a/frontend/src/features/model-creation/components/training-dataset/select-existing.tsx b/frontend/src/features/model-creation/components/training-dataset/select-existing.tsx
index 1ee1f123..b247f35f 100644
--- a/frontend/src/features/model-creation/components/training-dataset/select-existing.tsx
+++ b/frontend/src/features/model-creation/components/training-dataset/select-existing.tsx
@@ -20,7 +20,10 @@ const SelectExistingTrainingDatasetForm = () => {
   return (
     <div className="flex flex-col gap-y-10">
       <p className="font-semibold text-body-1 mb-2">
-        {MODEL_CREATION_CONTENT.trainingDataset.form.existingTrainingDatasetSectionHeading}
+        {
+          MODEL_CREATION_CONTENT.trainingDataset.form
+            .existingTrainingDatasetSectionHeading
+        }
       </p>
       <div className={`flex  items-center border border-gray-border`}>
         <SearchIcon className={`ml-2 icon-lg text-dark`} />
@@ -29,7 +32,9 @@ const SelectExistingTrainingDatasetForm = () => {
             setSearchQuery(e.target.value);
           }}
           value={searchQuery}
-          placeholder={MODEL_CREATION_CONTENT.trainingDataset.form.searchBar.placeholder}
+          placeholder={
+            MODEL_CREATION_CONTENT.trainingDataset.form.searchBar.placeholder
+          }
           disabled={isError}
         />
       </div>
diff --git a/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx b/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx
index 3a3e9b07..1c0a8bc2 100644
--- a/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx
+++ b/frontend/src/features/model-creation/components/training-dataset/training-dataset.tsx
@@ -35,7 +35,9 @@ const TrainingDatasetForm = () => {
             }
           ></ButtonWithIcon>
           <ButtonWithIcon
-            label={MODEL_CREATION_CONTENT.trainingDataset.buttons.selectExisting}
+            label={
+              MODEL_CREATION_CONTENT.trainingDataset.buttons.selectExisting
+            }
             suffixIcon={ChevronDownIcon}
             iconClassName="-rotate-90"
             capitalizeText={false}
diff --git a/frontend/src/features/model-creation/components/training-settings/training-settings-form.tsx b/frontend/src/features/model-creation/components/training-settings/training-settings-form.tsx
index 84403274..b4b1039f 100644
--- a/frontend/src/features/model-creation/components/training-settings/training-settings-form.tsx
+++ b/frontend/src/features/model-creation/components/training-settings/training-settings-form.tsx
@@ -51,7 +51,8 @@ const advancedSettings = [
   {
     label: MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label,
     value: MODEL_CREATION_FORM_NAME.CONTACT_SPACING,
-    toolTip: MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.toolTip,
+    toolTip:
+      MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.toolTip,
   },
   {
     label: MODEL_CREATION_CONTENT.trainingSettings.form.batchSize.label,
@@ -96,7 +97,9 @@ const TrainingSettingsForm = () => {
         <FormLabel
           label={MODEL_CREATION_CONTENT.trainingSettings.form.zoomLevel.label}
           withTooltip
-          toolTipContent={MODEL_CREATION_CONTENT.trainingSettings.form.zoomLevel.toolTip}
+          toolTipContent={
+            MODEL_CREATION_CONTENT.trainingSettings.form.zoomLevel.toolTip
+          }
           required
         />
         <CheckboxGroup
@@ -120,9 +123,13 @@ const TrainingSettingsForm = () => {
 
       <div className="flex flex-col gap-y-6">
         <FormLabel
-          label={MODEL_CREATION_CONTENT.trainingSettings.form.trainingType.label}
+          label={
+            MODEL_CREATION_CONTENT.trainingSettings.form.trainingType.label
+          }
           withTooltip
-          toolTipContent={MODEL_CREATION_CONTENT.trainingSettings.form.trainingType.toolTip}
+          toolTipContent={
+            MODEL_CREATION_CONTENT.trainingSettings.form.trainingType.toolTip
+          }
           required
         />
         <div className="flex items-center gap-x-4 w-full justify-between">
@@ -147,9 +154,15 @@ const TrainingSettingsForm = () => {
       <div className="flex flex-col gap-y-6">
         <div className="flex items-center gap-x-4 w-full">
           <FormLabel
-            label={MODEL_CREATION_CONTENT.trainingSettings.form.advancedSettings.label}
+            label={
+              MODEL_CREATION_CONTENT.trainingSettings.form.advancedSettings
+                .label
+            }
             withTooltip
-            toolTipContent={MODEL_CREATION_CONTENT.trainingSettings.form.advancedSettings.toolTip}
+            toolTipContent={
+              MODEL_CREATION_CONTENT.trainingSettings.form.advancedSettings
+                .toolTip
+            }
           />
           <button
             onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
diff --git a/frontend/src/features/model-creation/hooks/use-models.ts b/frontend/src/features/model-creation/hooks/use-models.ts
index 4c5e455b..232abaa6 100644
--- a/frontend/src/features/model-creation/hooks/use-models.ts
+++ b/frontend/src/features/model-creation/hooks/use-models.ts
@@ -1,13 +1,18 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   createModel,
   TCreateModelArgs,
 } from "@/features/model-creation/api/create-models";
-import { MutationConfig } from "@/services";
+import { MutationConfig, queryKeys } from "@/services";
 import {
   createTrainingRequest,
   TCreateTrainingRequestArgs,
 } from "@/features/model-creation/api/create-trainings";
+import { useModelDetails } from "@/features/models/hooks/use-models";
+import {
+  TUpdateModelArgs,
+  updateModel,
+} from "@/features/model-creation/api/update-models";
 
 type useCreateModelOptions = {
   mutationConfig?: MutationConfig<typeof createModel>;
@@ -43,3 +48,29 @@ export const useCreateModelTrainingRequest = ({
     ...restConfig,
   });
 };
+
+type useUpdateModelOptions = {
+  mutationConfig?: MutationConfig<typeof updateModel>;
+  modelId: string;
+};
+
+export const useUpdateModel = ({
+  mutationConfig,
+  modelId,
+}: useUpdateModelOptions) => {
+  const { refetch: refetchModelDetails } = useModelDetails(modelId);
+  const queryClient = useQueryClient(); // Get the query client instance
+  const { onSuccess, ...restConfig } = mutationConfig || {};
+
+  return useMutation({
+    mutationFn: (args: TUpdateModelArgs) => updateModel(args),
+    onSuccess: (...args) => {
+      queryClient.invalidateQueries({
+        queryKey: [queryKeys.MODEL_DETAILS(modelId)],
+      });
+      refetchModelDetails();
+      onSuccess?.(...args);
+    },
+    ...restConfig,
+  });
+};
diff --git a/frontend/src/features/models/api/factory.ts b/frontend/src/features/models/api/factory.ts
index 15b81e67..9efcc43d 100644
--- a/frontend/src/features/models/api/factory.ts
+++ b/frontend/src/features/models/api/factory.ts
@@ -11,6 +11,7 @@ import {
   getTrainingStatus,
   getTrainingWorkspace,
 } from "@/features/models/api/get-trainings";
+import { queryKeys } from "@/services";
 
 // Models
 
@@ -46,7 +47,7 @@ export const getModelsQueryOptions = ({
 
 export const getModelDetailsQueryOptions = (id: string) => {
   return queryOptions({
-    queryKey: ["model-details", id],
+    queryKey: [queryKeys.MODEL_DETAILS(id)],
     queryFn: () => getModelDetails(id),
     refetchInterval: 10000,
   });
diff --git a/frontend/src/features/models/components/dialogs/model-details-update-dialog.tsx b/frontend/src/features/models/components/dialogs/model-details-update-dialog.tsx
new file mode 100644
index 00000000..143abfde
--- /dev/null
+++ b/frontend/src/features/models/components/dialogs/model-details-update-dialog.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import ModelDescriptionFormInput from "@/features/model-creation/components/model-details/model-description-input";
+import ModelNameFormInput from "@/features/model-creation/components/model-details/model-name-input";
+import { useUpdateModel } from "@/features/model-creation/hooks/use-models";
+import { TModel } from "@/types";
+import { showErrorToast, showSuccessToast, TOAST_NOTIFICATIONS } from "@/utils";
+import { useState } from "react";
+
+type ModelDetailsUpdateDialogProps = {
+  isOpened: boolean;
+  closeDialog: () => void;
+  data: TModel;
+};
+const ModelDetailsUpdateDialog: React.FC<ModelDetailsUpdateDialogProps> = ({
+  isOpened,
+  closeDialog,
+  data,
+}) => {
+  const [modelName, setModelName] = useState(data.name ?? "");
+  const [modelDescription, setModelDescription] = useState(
+    data.description ?? "",
+  );
+  const updateModelMutation = useUpdateModel({
+    modelId: data.id,
+    mutationConfig: {
+      onSuccess: () => {
+        closeDialog();
+        showSuccessToast(TOAST_NOTIFICATIONS.modelUpdateSuccess);
+      },
+      onError: (error) => {
+        showErrorToast(error);
+      },
+    },
+  });
+  const handleSubmit = async () => {
+    await updateModelMutation.mutateAsync({
+      modelId: data.id,
+      name: modelName,
+      description: modelDescription,
+    });
+  };
+
+  return (
+    <Dialog
+      isOpened={isOpened}
+      closeDialog={closeDialog}
+      label="Edit Model Details"
+    >
+      <div className="flex flex-col gap-y-4">
+        <ModelNameFormInput
+          value={modelName}
+          handleChange={(value) => setModelName(value)}
+        />
+        <ModelDescriptionFormInput
+          value={modelDescription}
+          handleChange={(value) => setModelDescription(value)}
+        />
+        <div className="self-end">
+          <Button
+            disabled={modelDescription.length === 0 && modelName.length === 0}
+            onClick={handleSubmit}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default ModelDetailsUpdateDialog;
diff --git a/frontend/src/features/models/components/model-details-info.tsx b/frontend/src/features/models/components/model-details-info.tsx
index 9535b708..4a8872cc 100644
--- a/frontend/src/features/models/components/model-details-info.tsx
+++ b/frontend/src/features/models/components/model-details-info.tsx
@@ -7,6 +7,9 @@ import ChevronDownIcon from "@/components/ui/icons/chevron-down-icon";
 import { Divider } from "@/components/ui/divider";
 import ModelFeedbacks from "@/features/models/components/model-feedbacks";
 import ModelFilesButton from "./model-files-button";
+import ModelDetailsUpdateDialog from "./dialogs/model-details-update-dialog";
+import { useDialog } from "@/hooks/use-dialog";
+import { useAuth } from "@/app/providers/auth-provider";
 
 const ModelDetailsInfo = ({
   data,
@@ -17,8 +20,16 @@ const ModelDetailsInfo = ({
   openModelFilesDialog: () => void;
   openTrainingAreaDialog: () => void;
 }) => {
+  const { isOpened, openDialog, closeDialog } = useDialog();
+  const { user, isAuthenticated } = useAuth();
+
   return (
     <>
+      <ModelDetailsUpdateDialog
+        isOpened={isOpened}
+        closeDialog={closeDialog}
+        data={data}
+      />
       <ModelDetailsSection title="">
         <div className="flex flex-col gap-y-8">
           <div className="inline-flex flex-col gap-y-4">
@@ -28,12 +39,12 @@ const ModelDetailsInfo = ({
             <div className="w-full flex flex-col md:flex-row md:items-center md:justify-between gap-y-8">
               <div className="flex flex-col gap-y-4">
                 <h1
-                  className="font-semibold text-dark text-title-2 md:text-large-title"
+                  className="font-semibold text-dark text-title-2 md:text-large-title text-wrap"
                   title={data?.name}
                 >
-                  {truncateString(data?.name, 20)}
+                  {truncateString(data?.name, 40)}
                 </h1>
-                <p className="text-body-3 text-gray md:text-body-2">
+                <p className="text-body-3 text-gray md:text-body-2 text-wrap max-w-lg md:max-w-xl xl:max-w-4xl">
                   {data?.description ??
                     APP_CONTENT.models.modelsDetailsCard
                       .modelDescriptionNotAvailable}
@@ -91,9 +102,16 @@ const ModelDetailsInfo = ({
             />
           </div>
           <div className="col-span-1 flex flex-col md:items-end md:justify-between gap-y-4">
-            <button className="flex items-center gap-x-4">
-              <PenIcon className="icon" /> <span>Edit Model Details</span>
-            </button>
+            <div>
+              {isAuthenticated && user.osm_id === data.user.osm_id && (
+                <button
+                  className="flex items-center gap-x-4"
+                  onClick={openDialog}
+                >
+                  <PenIcon className="icon" /> <span>Edit Model Details</span>
+                </button>
+              )}
+            </div>
             <ModelFeedbacks trainingId={data?.published_training as number} />
           </div>
         </div>
diff --git a/frontend/src/services/api-routes.ts b/frontend/src/services/api-routes.ts
index 6b47228e..8275e2b1 100644
--- a/frontend/src/services/api-routes.ts
+++ b/frontend/src/services/api-routes.ts
@@ -16,6 +16,7 @@ export const API_ENDPOINTS = {
   //Models
   GET_MODELS: "model/",
   CREATE_MODELS: "model/",
+  UPDATE_MODEL: (modelId: string) => `model/${modelId}/`,
   GET_MODEL_DETAILS: (id: string) => `model/${id}`,
   GET_MODELS_CENTROIDS: "models/centroid",
 
diff --git a/frontend/src/services/react-query.ts b/frontend/src/services/react-query.ts
index 111aad14..5169a5af 100644
--- a/frontend/src/services/react-query.ts
+++ b/frontend/src/services/react-query.ts
@@ -23,3 +23,7 @@ export type MutationConfig<
   Error,
   Parameters<MutationFnType>[0]
 >;
+
+export const queryKeys = {
+  MODEL_DETAILS: (modelId: string) => `model-details-${modelId}`,
+};
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index 1aeb62bc..9e082f1d 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -44,6 +44,7 @@ export type TModel = {
   user: TOSMUser;
   thumbnail_url: string;
   base_model: string;
+  description: string;
 };
 
 export type PaginatedModels = {
diff --git a/frontend/src/utils/content.ts b/frontend/src/utils/content.ts
index 0898d828..d4eb7be5 100644
--- a/frontend/src/utils/content.ts
+++ b/frontend/src/utils/content.ts
@@ -10,6 +10,7 @@ export const TOAST_NOTIFICATIONS = {
   trainingRequestSubmittedSuccess: "Training request submitted successfully.",
   trainingDatasetCreationSuccess: "Dataset created successfully.",
   modelCreationSuccess: "Model created successfully.",
+  modelUpdateSuccess: "Model updated successfully.",
   aoiWithoutGeometryWarning: "This training area does not have a geometry.",
   aoiLabelsDownloadSuccess: "AOI labels downloaded successfully.",
   josmOpenSuccess: "Map view opened in JOSM successfully!",
@@ -24,7 +25,6 @@ export const TOAST_NOTIFICATIONS = {
   logoutSuccess: "Logout successful.",
 };
 
-
 export const MODEL_CREATION_CONTENT = {
   modelDetails: {
     pageTitle: "Create New Local AI Model",
@@ -64,7 +64,7 @@ export const MODEL_CREATION_CONTENT = {
         helpText:
           "Dataset name should be at least 10 characters and at most 40 characters.",
         placeholder: "Enter the datatset name",
-        toolTip: "Dataset Name"
+        toolTip: "Dataset Name",
       },
       tmsURL: {
         label: "TMS URL",
@@ -88,7 +88,7 @@ export const MODEL_CREATION_CONTENT = {
     tutorialText: "Tutorial",
     layerControl: {
       tmsLayerName: "TMS Layer",
-      trainingAreaLayerName: 'Training Areas'
+      trainingAreaLayerName: "Training Areas",
     },
     form: {
       openAerialMap: "Open Aerial Map",
@@ -100,8 +100,9 @@ export const MODEL_CREATION_CONTENT = {
     },
     fileUploadDialog: {
       title: "Upload Training Area(s)",
-      mainInstruction: "Drag 'n' drop some files here, or click to select files",
-      subInstruction: "Supports only GeoJSON (.geojson) files. (5MB max.)"
+      mainInstruction:
+        "Drag 'n' drop some files here, or click to select files",
+      subInstruction: "Supports only GeoJSON (.geojson) files. (5MB max.)",
     },
     pageDescription:
       "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id fugit ducimus harum debitis deserunt cum quod quam rerum aliquid. Quibusdam sequi incidunt quasi delectus laudantium accusamus modi omnis maiores. Incidunt!",
@@ -425,7 +426,8 @@ export const APP_CONTENT = {
           tooltip: "",
           href: {
             RAMP: "https://rampml.global/",
-            YOLOv8: "https://yolov8.com/ ",
+            YOLO_V8_V2: "https://yolov8.com/ ",
+            YOLO_V8_V1: "https://yolov8.com/ ",
           },
         },
         sourceImage: {
diff --git a/frontend/src/utils/general-utils.ts b/frontend/src/utils/general-utils.ts
index 0d2744ac..120dfec1 100644
--- a/frontend/src/utils/general-utils.ts
+++ b/frontend/src/utils/general-utils.ts
@@ -1,12 +1,13 @@
 import { API_ENDPOINTS, BASE_API_URL } from "@/services";
 import { Feature, FeatureCollection } from "@/types";
 import { calculateGeoJSONArea } from "./geometry-utils";
-import { FAIR_VERSION, MAX_TRAINING_AREA_SIZE, MIN_TRAINING_AREA_SIZE } from "./constants";
+import {
+  FAIR_VERSION,
+  MAX_TRAINING_AREA_SIZE,
+  MIN_TRAINING_AREA_SIZE,
+} from "./constants";
 import { useToastNotification } from "@/hooks/use-toast-notification";
 
-
-
-
 /**
  * Open the AOI (Training Area) in ID Editor.
  *
@@ -61,7 +62,6 @@ export const geoJSONDowloader = (
   return;
 };
 
-
 /**
  * Validates whether the area of a GeoJSON feature falls outside the acceptable range.
  *
@@ -79,7 +79,6 @@ export const validateGeoJSONArea = (geojsonFeature: Feature) => {
   return area < MIN_TRAINING_AREA_SIZE || area > MAX_TRAINING_AREA_SIZE;
 };
 
-
 /**
  * Displays an error message as a toast notification.
  *
@@ -117,7 +116,6 @@ export const showErrorToast = (
   toast(message, "danger");
 };
 
-
 /**
  * Displays a success message as a toast notification.
  *
@@ -128,7 +126,6 @@ export const showSuccessToast = (message: string = "") => {
   toast(message, "success");
 };
 
-
 /**
  * Displays a warning message as a toast notification.
  *
diff --git a/frontend/src/utils/geometry-utils.ts b/frontend/src/utils/geometry-utils.ts
index c894fbee..e675a1ed 100644
--- a/frontend/src/utils/geometry-utils.ts
+++ b/frontend/src/utils/geometry-utils.ts
@@ -4,7 +4,6 @@ import bboxPolygon from "@turf/bbox";
 import area from "@turf/area";
 import { LngLatBoundsLike, Map } from "maplibre-gl";
 
-
 /**
  * Calculates the area of a GeoJSON Feature or FeatureCollection.
  *
@@ -14,7 +13,7 @@ import { LngLatBoundsLike, Map } from "maplibre-gl";
  *
  * @param {Feature | FeatureCollection} geojsonFeature - The GeoJSON object
  * representing a single Feature or a collection of Features.
- * 
+ *
  * @returns {number} The calculated area of the GeoJSON feature in square meters.
  */
 export const calculateGeoJSONArea = (
@@ -23,7 +22,6 @@ export const calculateGeoJSONArea = (
   return area(geojsonFeature);
 };
 
-
 /**
  * Computes the bounding box of a GeoJSON Feature.
  *
@@ -32,8 +30,8 @@ export const calculateGeoJSONArea = (
  * of an array with four values representing [west, south, east, north] coordinates.
  *
  * @param {Feature} geojsonFeature - The GeoJSON feature for which to calculate the bounding box.
- * 
- * @returns {LngLatBoundsLike} The bounding box as an array of coordinates 
+ *
+ * @returns {LngLatBoundsLike} The bounding box as an array of coordinates
  * in the format [west, south, east, north].
  */
 
@@ -51,7 +49,7 @@ export const getGeoJSONFeatureBounds = (
  *
  * This function takes an angle in degrees and converts it to radians.
  * @param {number} degrees - The angle in degrees to be converted.
- * 
+ *
  * @returns {number} The angle in radians.
  */
 const degrees_to_radians = (degrees: number): number => {
@@ -66,7 +64,7 @@ const degrees_to_radians = (degrees: number): number => {
  * @param {number} lat_deg - The latitude in degrees.
  * @param {number} lon_deg - The longitude in degrees.
  * @param {number} zoom - The zoom level to determine the tile numbers.
- * 
+ *
  * @returns {Object} An object containing:
  *  - `xtile` {number}: The tile number on the x-axis.
  *  - `ytile` {number}: The tile number on the y-axis.
@@ -87,13 +85,12 @@ const deg2num = (
   return { xtile, ytile };
 };
 
-
 /**
  * Converts radians to degrees.
  *
  * This function takes an angle in radians and converts it to degress.
  * @param {number} radians - The angle in radians to be converted.
- * 
+ *
  * @returns {number} The angle in degress.
  */
 const radians_to_degrees = (radians: number): number => {
@@ -107,7 +104,7 @@ const radians_to_degrees = (radians: number): number => {
  * @param {number} xtile - The x-axis tile number.
  * @param {number} ytile - The y-axis tile number.
  * @param {number} zoom - The zoom level used for the tile coordinates.
- * 
+ *
  * @returns {Object} An object containing:
  *  - `lat_deg` {number}: The latitude in degrees.
  *  - `lon_deg` {number}: The longitude in degrees.
@@ -172,7 +169,6 @@ export const distance = (
   }
 };
 
-
 /**
  * Finds the geographic coordinates of the closest tile corner to a given latitude and longitude
  * at a specified zoom level.
@@ -207,14 +203,13 @@ const getClosestCorner = (
   return closestGeo;
 };
 
-
 /**
  * Approximates the given set of coordinates to the nearest corner tiles at a specified zoom level.
  *
  * @param {Array<[number, number]>} coordinates - An array of coordinate pairs [longitude, latitude] to approximate.
  * @param {number} [zoom=19] - The zoom level used to calculate the closest tile corners (default is 19).
  *
- * @returns {Array<[number, number]>} - An array of the approximated coordinates, where each point is replaced by 
+ * @returns {Array<[number, number]>} - An array of the approximated coordinates, where each point is replaced by
  * the closest tile corner at the specified zoom level.
  */
 export const approximateGeom = (
@@ -227,15 +222,14 @@ export const approximateGeom = (
   });
 };
 
-
 /**
- * Generates a GeoJSON FeatureCollection representing the boundaries of map tiles 
+ * Generates a GeoJSON FeatureCollection representing the boundaries of map tiles
  * within the current visible bounds at a specified zoom level.
  *
  * @param {Map} map - The Map instance representing the map where the tiles are located.
  * @param {number} zoom - The zoom level to calculate the tile boundaries.
  *
- * @returns {FeatureCollection} - A GeoJSON FeatureCollection containing polygons that define the boundaries 
+ * @returns {FeatureCollection} - A GeoJSON FeatureCollection containing polygons that define the boundaries
  * of each tile within the visible map bounds at the given zoom level.
  */
 export const getTileBoundariesGeoJSON = (
@@ -278,15 +272,14 @@ export const getTileBoundariesGeoJSON = (
   };
 };
 
-
 /**
- * Snaps the coordinates of a GeoJSON geometry to the closest map tile boundaries 
- * based on the current zoom level, by approximating each coordinate to the nearest 
+ * Snaps the coordinates of a GeoJSON geometry to the closest map tile boundaries
+ * based on the current zoom level, by approximating each coordinate to the nearest
  * corner of a map tile.
  *
  * @param {Geometry} geometry - The GeoJSON geometry whose coordinates need to be snapped.
- * 
- * @returns {Geometry} - The updated GeoJSON geometry with its coordinates snapped 
+ *
+ * @returns {Geometry} - The updated GeoJSON geometry with its coordinates snapped
  * to the closest tile boundaries.
  */
 export const snapGeoJSONGeometryToClosestTile = (geometry: Geometry) => {