diff --git a/frontend/src/app/providers/auth-provider.tsx b/frontend/src/app/providers/auth-provider.tsx
index d6e9ccb3..1a1a30f4 100644
--- a/frontend/src/app/providers/auth-provider.tsx
+++ b/frontend/src/app/providers/auth-provider.tsx
@@ -97,7 +97,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       const user = await authService.getUser();
       setUser(user);
     } catch (error) {
-      showErrorToast(error)
+      showErrorToast(error);
     }
   };
 
diff --git a/frontend/src/app/providers/map-provider.tsx b/frontend/src/app/providers/map-provider.tsx
index a70dc512..b4267a75 100644
--- a/frontend/src/app/providers/map-provider.tsx
+++ b/frontend/src/app/providers/map-provider.tsx
@@ -1,4 +1,11 @@
-import { createContext, useContext, ReactNode, useState, useMemo, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useMemo,
+  useEffect,
+} from "react";
 import { Map } from "maplibre-gl";
 import { TerraDraw } from "terra-draw";
 import { setupTerraDraw } from "@/components/map/setup-terra-draw";
@@ -8,14 +15,14 @@ const MapContext = createContext<{
   map: Map | null;
   setMap: React.Dispatch<React.SetStateAction<Map | null>>;
   terraDraw: TerraDraw | undefined;
-  drawingMode: DrawingModes,
+  drawingMode: DrawingModes;
   setDrawingMode: React.Dispatch<React.SetStateAction<DrawingModes>>;
 }>({
   map: null,
-  setMap: () => { },
+  setMap: () => {},
   terraDraw: undefined,
   drawingMode: DrawingModes.STATIC,
-  setDrawingMode: () => DrawingModes
+  setDrawingMode: () => DrawingModes,
 });
 
 export const MapProvider = ({ children }: { children: ReactNode }) => {
@@ -29,14 +36,18 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [map]);
 
-  const [drawingMode, setDrawingMode] = useState<DrawingModes>(DrawingModes.STATIC);
+  const [drawingMode, setDrawingMode] = useState<DrawingModes>(
+    DrawingModes.STATIC,
+  );
 
   // sync the modes
   useEffect(() => {
     terraDraw?.setMode(drawingMode);
-  }, [terraDraw, drawingMode])
+  }, [terraDraw, drawingMode]);
   return (
-    <MapContext.Provider value={{ map, setMap, terraDraw, drawingMode, setDrawingMode }}>
+    <MapContext.Provider
+      value={{ map, setMap, terraDraw, drawingMode, setDrawingMode }}
+    >
       {children}
     </MapContext.Provider>
   );
diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
index cb37ff3a..0f3de6c0 100644
--- a/frontend/src/app/providers/models-provider.tsx
+++ b/frontend/src/app/providers/models-provider.tsx
@@ -5,7 +5,6 @@ import { useSessionStorage } from "@/hooks/use-storage";
 import {
   APPLICATION_ROUTES,
   HOT_FAIR_MODEL_CREATION_LOCAL_STORAGE_KEY,
-  MODEL_CREATION_CONTENT,
   showErrorToast,
   showSuccessToast,
   TMS_URL_REGEX_PATTERN,
@@ -52,9 +51,7 @@ export enum MODEL_CREATION_FORM_NAME {
   OAM_TIME_NAME = "oamTileName",
   OAM_BOUNDS = "oamBounds",
   TRAINING_AREAS = "trainingAreas",
-  TRAINING_REQUEST_SUCCESS = 'trainingRequestIsSuccessful',
-  TRAINING_REQUEST_MESSAGE = 'trainingRequestMessage',
-  TRAINING_SETTINGS_IS_VALID = 'trainingSettingsIsValid'
+  TRAINING_SETTINGS_IS_VALID = "trainingSettingsIsValid",
 }
 
 export const FORM_VALIDATION_CONFIG = {
@@ -129,8 +126,7 @@ export const FORM_VALIDATION_CONFIG = {
       max: 8,
       min: 1,
     },
-  }
-
+  },
 };
 
 type FormData = {
@@ -154,9 +150,9 @@ type FormData = {
   batchSize: number;
   boundaryWidth: number;
   zoomLevels: number[];
-  trainingRequestIsSuccessful: boolean
-  trainingRequestMessage: string
-  trainingSettingsIsValid: boolean
+  trainingRequestIsSuccessful: boolean;
+  trainingRequestMessage: string;
+  trainingSettingsIsValid: boolean;
 };
 
 const initialFormState: FormData = {
@@ -185,9 +181,6 @@ const initialFormState: FormData = {
   boundaryWidth: 3,
   zoomLevels: [19, 20, 21],
   trainingSettingsIsValid: true,
-  // Training requests response
-  trainingRequestIsSuccessful: true,
-  trainingRequestMessage: ""
 };
 
 const ModelsContext = createContext<{
@@ -217,11 +210,11 @@ const ModelsContext = createContext<{
   >;
   hasLabeledTrainingAreas: boolean;
   hasAOIsWithGeometry: boolean;
-  resetState: () => void
+  resetState: () => void;
 }>({
   formData: initialFormState,
-  setFormData: () => { },
-  handleChange: () => { },
+  setFormData: () => {},
+  handleChange: () => {},
   createNewTrainingDatasetMutation: {} as UseMutationResult<
     TTrainingDataset,
     Error,
@@ -236,7 +229,7 @@ const ModelsContext = createContext<{
   >,
   hasLabeledTrainingAreas: false,
   hasAOIsWithGeometry: false,
-  resetState: () => { }
+  resetState: () => {},
 });
 
 export const ModelsProvider: React.FC<{
@@ -278,47 +271,13 @@ export const ModelsProvider: React.FC<{
     mutationConfig: {
       onSuccess: () => {
         showSuccessToast(TOAST_NOTIFICATIONS.trainingRequestSubmittedSuccess);
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_SUCCESS,
-          true
-        );
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_MESSAGE,
-          MODEL_CREATION_CONTENT.confirmation.trainingRequestSuccess
-        );
-        // delay for a few seconds before resetting the state
         timeOutRef.current = setTimeout(() => {
-          setFormData((prevFormData) => ({
-            ...initialFormState,
-            // Preserve the training requests information because it's needed in the confirmation page.
-            trainingRequestMessage: prevFormData.trainingRequestMessage,
-            trainingRequestIsSuccessful: prevFormData.trainingRequestIsSuccessful,
-          }));
+          setFormData(initialFormState);
         }, 2000);
       },
 
       onError: (error) => {
         showErrorToast(error);
-        // delay for a few seconds before resetting the state, but keep the data that will be needed for submitting training
-        // request incase the user wants to do that.
-        timeOutRef.current = setTimeout(() => {
-          setFormData((prevFormData) => ({
-            ...initialFormState,
-            // Preserve the training requests information because it's needed in the confirmation page.
-            trainingRequestMessage: prevFormData.trainingRequestMessage,
-            trainingRequestIsSuccessful: prevFormData.trainingRequestIsSuccessful,
-          }));
-        }, 2000);
-
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_SUCCESS,
-          false
-        );
-        handleChange(
-          MODEL_CREATION_FORM_NAME.TRAINING_REQUEST_MESSAGE,
-          // @ts-expect-error bad type definition 
-          `Your created model could not be trained because ${String(error?.response?.data[0]).toLocaleLowerCase()}. Click on the enhance button below to retrain your model.`
-        );
       },
     },
   });
@@ -372,7 +331,6 @@ export const ModelsProvider: React.FC<{
     );
   }, [formData]);
 
-
   // Confirm that all the training areas labels has been retrieved
   const hasLabeledTrainingAreas = useMemo(() => {
     return (
@@ -389,8 +347,8 @@ export const ModelsProvider: React.FC<{
     );
   }, [formData]);
   const resetState = () => {
-    setFormData(initialFormState)
-  }
+    setFormData(initialFormState);
+  };
   const memoizedValues = useMemo(
     () => ({
       setFormData,
@@ -400,7 +358,7 @@ export const ModelsProvider: React.FC<{
       hasLabeledTrainingAreas,
       hasAOIsWithGeometry,
       formData,
-      resetState
+      resetState,
     }),
     [
       setFormData,
@@ -410,7 +368,7 @@ export const ModelsProvider: React.FC<{
       createNewModelMutation,
       hasLabeledTrainingAreas,
       hasAOIsWithGeometry,
-      resetState
+      resetState,
     ],
   );
 
diff --git a/frontend/src/app/routes/models/confirmation.tsx b/frontend/src/app/routes/models/confirmation.tsx
index f44a6c5c..1c94fc6c 100644
--- a/frontend/src/app/routes/models/confirmation.tsx
+++ b/frontend/src/app/routes/models/confirmation.tsx
@@ -1,59 +1,49 @@
-import { useModelsContext } from "@/app/providers/models-provider";
 import ModelFormConfirmation from "@/assets/images/model_creation_success.png";
 import { Button } from "@/components/ui/button";
 import { Image } from "@/components/ui/image";
 import { Link } from "@/components/ui/link";
-import ModelEnhancementDialog from "@/features/models/components/dialogs/model-enhancement-dialog";
-import { useDialog } from "@/hooks/use-dialog";
 import { APPLICATION_ROUTES, MODEL_CREATION_CONTENT } from "@/utils";
 import ConfettiExplosion from "react-confetti-explosion";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 export const ModelConfirmationPage = () => {
   const [searchParams] = useSearchParams();
-  const modelId = searchParams.get("id");
-  const { formData } = useModelsContext();
-  const { isOpened, openDialog, closeDialog } = useDialog();
-  const navigate = useNavigate();
 
-  const handleClick = () => {
-    if (formData.trainingRequestIsSuccessful) {
-      navigate(`${APPLICATION_ROUTES.MODELS}/${modelId}`)
-    } else {
-      openDialog()
-    }
-  }
+  const modelId = searchParams.get("id");
   return (
-    <>
-      <ModelEnhancementDialog isOpened={isOpened} closeDialog={closeDialog} modelId={modelId as string} />
-      <div className={"col-start-3 col-span-8 flex flex-col gap-y-10"}>
-        <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
-          <ConfettiExplosion
-            force={0.2}
-            duration={5000}
-            particleCount={250}
-            height={10000}
-          />
-          <Image src={ModelFormConfirmation} alt="Model Creation Success Icon" />
-          <p className="text-title-2">Model {modelId} is Created!</p>
-          <p className="text-gray">
-            {formData.trainingRequestMessage}
-          </p>
-          <div className="flex items-center justify-between gap-x-4">
-            <Button onClick={handleClick}>
-              {formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.enhanceModel}
+    <div className={"col-start-3 col-span-8 flex flex-col gap-y-10"}>
+      <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
+        <ConfettiExplosion
+          force={0.2}
+          duration={5000}
+          particleCount={250}
+          height={10000}
+        />
+        <Image src={ModelFormConfirmation} alt="Model Creation Success Icon" />
+        <p className="text-title-2">Model {modelId} is Created!</p>
+        <p className="text-gray">
+          {MODEL_CREATION_CONTENT.confirmation.description}
+        </p>
+        <div className="flex items-center justify-between gap-x-4">
+          <Link
+            href={`${APPLICATION_ROUTES.MODELS}/${modelId}`}
+            title={MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
+            nativeAnchor={false}
+          >
+            <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={!formData.trainingRequestIsSuccessful ? `${APPLICATION_ROUTES.MODELS}/${modelId}` : `${APPLICATION_ROUTES.MODELS}`}
-              title={!formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
-            >
-              <Button variant="dark">
-                {!formData.trainingRequestIsSuccessful ? MODEL_CREATION_CONTENT.confirmation.buttons.goToModel : MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
-              </Button>
-            </Link>
-          </div>
+          </Link>
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/app/routes/models/models-list.tsx b/frontend/src/app/routes/models/models-list.tsx
index 50db3d0d..eb1d3c9d 100644
--- a/frontend/src/app/routes/models/models-list.tsx
+++ b/frontend/src/app/routes/models/models-list.tsx
@@ -59,9 +59,9 @@ const ClearFilters = ({
 }) => {
   const canClearAllFilters = Boolean(
     query[SEARCH_PARAMS.searchQuery] ||
-    query[SEARCH_PARAMS.startDate] ||
-    query[SEARCH_PARAMS.endDate] ||
-    query[SEARCH_PARAMS.id],
+      query[SEARCH_PARAMS.startDate] ||
+      query[SEARCH_PARAMS.endDate] ||
+      query[SEARCH_PARAMS.id],
   );
 
   return (
diff --git a/frontend/src/components/map/draw-control.tsx b/frontend/src/components/map/draw-control.tsx
index b47b1230..4a66d051 100644
--- a/frontend/src/components/map/draw-control.tsx
+++ b/frontend/src/components/map/draw-control.tsx
@@ -4,11 +4,8 @@ import { ToolTip } from "@/components/ui/tooltip";
 import { PenIcon } from "@/components/ui/icons";
 import { useMap } from "@/app/providers/map-provider";
 
-
 const DrawControl = () => {
-
-  const { drawingMode, terraDraw, setDrawingMode } = useMap()
-
+  const { drawingMode, terraDraw, setDrawingMode } = useMap();
 
   const changeMode = useCallback(
     (newMode: DrawingModes) => {
@@ -50,8 +47,6 @@ const DrawControl = () => {
     </ToolTip>
   );
 
-
-
   return (
     <>
       {renderButton(
@@ -61,7 +56,7 @@ const DrawControl = () => {
         drawingMode === DrawingModes.RECTANGLE,
       )}
     </>
-  )
+  );
 };
 
 export default DrawControl;
diff --git a/frontend/src/components/map/index.ts b/frontend/src/components/map/index.ts
index 65c9f071..3a3aa324 100644
--- a/frontend/src/components/map/index.ts
+++ b/frontend/src/components/map/index.ts
@@ -3,4 +3,4 @@ export { default as ZoomControls } from "./zoom-controls";
 export { default as DrawControl } from "./draw-control";
 export { default as ZoomLevel } from "./zoom-level";
 export { default as LayerControl } from "./layer-control";
-export { default as MapCursorToolTip } from './map-cursor-tooltip'
\ No newline at end of file
+export { default as MapCursorToolTip } from "./map-cursor-tooltip";
diff --git a/frontend/src/components/map/layer-control.tsx b/frontend/src/components/map/layer-control.tsx
index 434e7774..fe34b4b6 100644
--- a/frontend/src/components/map/layer-control.tsx
+++ b/frontend/src/components/map/layer-control.tsx
@@ -17,7 +17,7 @@ const LayerControl = ({
 }: {
   map: Map | null;
   layers: TLayers;
-  basemaps: TBasemaps
+  basemaps: TBasemaps;
 }) => {
   const { dropdownIsOpened, onDropdownHide, onDropdownShow } =
     useDropdownMenu();
diff --git a/frontend/src/components/map/map-cursor-tooltip.tsx b/frontend/src/components/map/map-cursor-tooltip.tsx
index 55e5b6cc..91b37571 100644
--- a/frontend/src/components/map/map-cursor-tooltip.tsx
+++ b/frontend/src/components/map/map-cursor-tooltip.tsx
@@ -1,20 +1,30 @@
+import { Map } from "maplibre-gl";
 
-import { Map, } from "maplibre-gl";
+const MapCursorToolTip = ({
+  color,
+  tooltipVisible,
+  tooltipPosition,
+  children,
+}: {
+  map: Map | null;
+  color?: string;
+  tooltipPosition: Record<string, number>;
+  tooltipVisible: boolean;
+  children: React.ReactNode;
+}) => {
+  if (!tooltipVisible) return null;
 
-const MapCursorToolTip = ({ color, tooltipVisible, tooltipPosition, children }: { map: Map | null, color?: string, tooltipPosition: Record<string, number>, tooltipVisible: boolean, children: React.ReactNode }) => {
-    if (!tooltipVisible) return null
+  return (
+    <div
+      className={`absolute w-50 text-white px-2 rounded-sm pointer-events-none text-nowrap flex flex-col ${color}`}
+      style={{
+        left: `${tooltipPosition.x}px`,
+        top: `${tooltipPosition.y}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
 
-    return (
-        <div
-            className={`absolute w-50 text-white px-2 rounded-sm pointer-events-none text-nowrap flex flex-col ${color}`}
-            style={{
-                left: `${tooltipPosition.x}px`,
-                top: `${tooltipPosition.y}px`,
-            }}
-        >
-            {children}
-        </div>
-    )
-}
-
-export default MapCursorToolTip
\ No newline at end of file
+export default MapCursorToolTip;
diff --git a/frontend/src/components/map/map.tsx b/frontend/src/components/map/map.tsx
index cff71952..7a5530ed 100644
--- a/frontend/src/components/map/map.tsx
+++ b/frontend/src/components/map/map.tsx
@@ -24,7 +24,7 @@ type MapComponentProps = {
     value: string;
     subLayer: string;
   }[];
-  children?: React.ReactNode
+  children?: React.ReactNode;
 };
 
 const MapComponent: React.FC<MapComponentProps> = ({
@@ -35,7 +35,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
   layerControl = false,
   layerControlLayers = [],
   layerControlBasemaps = [],
-  children
+  children,
 }) => {
   const mapContainerRef = useRef(null);
   const { map, setMap, terraDraw } = useMap();
@@ -48,7 +48,6 @@ const MapComponent: React.FC<MapComponentProps> = ({
     maplibreMap.on("load", () => {
       setMap(maplibreMap);
     });
-
   }, []);
 
   return (
@@ -60,9 +59,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
           <>
             <ZoomControls map={map} />
             {geolocationControl && <GeolocationControl map={map} />}
-            {drawControl && terraDraw && (
-              <DrawControl />
-            )}
+            {drawControl && terraDraw && <DrawControl />}
           </>
         )}
       </div>
diff --git a/frontend/src/components/ui/dialog/dialog.css b/frontend/src/components/ui/dialog/dialog.css
index 82e86220..80bd3743 100644
--- a/frontend/src/components/ui/dialog/dialog.css
+++ b/frontend/src/components/ui/dialog/dialog.css
@@ -3,8 +3,6 @@ sl-dialog::part(title) {
   font-weight: var(--hot-fair-font-weight-semibold);
 }
 
-
-
 sl-dialog.primary::part(title) {
-  color:var(--hot-fair-color-primary) 
+  color: var(--hot-fair-color-primary);
 }
diff --git a/frontend/src/components/ui/dialog/dialog.tsx b/frontend/src/components/ui/dialog/dialog.tsx
index 2ff65a22..21e94186 100644
--- a/frontend/src/components/ui/dialog/dialog.tsx
+++ b/frontend/src/components/ui/dialog/dialog.tsx
@@ -9,7 +9,7 @@ type DialogProps = {
   children: React.ReactNode;
   size?: SHOELACE_SIZES;
   preventClose?: boolean;
-  labelColor?: 'default' | "primary"
+  labelColor?: "default" | "primary";
 };
 const Dialog: React.FC<DialogProps> = ({
   isOpened,
@@ -18,7 +18,7 @@ const Dialog: React.FC<DialogProps> = ({
   children,
   size = "medium",
   preventClose,
-  labelColor = "default"
+  labelColor = "default",
 }) => {
   // Prevent the dialog from closing when the user clicks on the overlay
   function handleRequestClose(event: any) {
diff --git a/frontend/src/components/ui/form/input/input.tsx b/frontend/src/components/ui/form/input/input.tsx
index ed05375c..b22881b2 100644
--- a/frontend/src/components/ui/form/input/input.tsx
+++ b/frontend/src/components/ui/form/input/input.tsx
@@ -63,7 +63,7 @@ const Input: React.FC<InputProps> = ({
   };
 
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const { isMobile } = useScreenSize();;
+  const { isMobile } = useScreenSize();
 
   return (
     <SlInput
@@ -90,7 +90,9 @@ const Input: React.FC<InputProps> = ({
       ref={inputRef}
       label={label}
       // @ts-expect-error bad type definition
-      size={size ? size : isMobile ? SHOELACE_SIZES.MEDIUM : SHOELACE_SIZES.LARGE}
+      size={
+        size ? size : isMobile ? SHOELACE_SIZES.MEDIUM : SHOELACE_SIZES.LARGE
+      }
       minlength={minLength}
       maxlength={maxLength}
       // @ts-expect-error bad type definition
diff --git a/frontend/src/components/ui/form/select/select.tsx b/frontend/src/components/ui/form/select/select.tsx
index 0ba1f2d6..877aec4e 100644
--- a/frontend/src/components/ui/form/select/select.tsx
+++ b/frontend/src/components/ui/form/select/select.tsx
@@ -12,7 +12,7 @@ type SelectProps = {
   options?: {
     name: string;
     value: string;
-    suffix?: string
+    suffix?: string;
   }[];
   defaultValue: string;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -30,7 +30,7 @@ const Select: React.FC<SelectProps> = ({
   handleChange,
   required,
 }) => {
-  const { isMobile } = useScreenSize();;
+  const { isMobile } = useScreenSize();
   return (
     <SlSelect
       placeholder={placeholder}
@@ -49,7 +49,11 @@ const Select: React.FC<SelectProps> = ({
       )}
       {helpText && <HelpText content={helpText} />}
       {options?.map((option, id) => (
-        <SlOption key={`select-option-${id}`} value={option.value} className="flex flex-col gap-y-1">
+        <SlOption
+          key={`select-option-${id}`}
+          value={option.value}
+          className="flex flex-col gap-y-1"
+        >
           <span>{option.name}</span>
           <small slot="suffix">{option.suffix}</small>
         </SlOption>
diff --git a/frontend/src/components/ui/tooltip/tooltip.tsx b/frontend/src/components/ui/tooltip/tooltip.tsx
index aeabb196..acc98f16 100644
--- a/frontend/src/components/ui/tooltip/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip/tooltip.tsx
@@ -8,9 +8,9 @@ type ToolTipProps = {
   content?: string;
   children?: React.ReactNode;
   placement?:
-  | ToolTipPlacement.RIGHT
-  | ToolTipPlacement.BOTTOM
-  | ToolTipPlacement.TOP;
+    | ToolTipPlacement.RIGHT
+    | ToolTipPlacement.BOTTOM
+    | ToolTipPlacement.TOP;
   open?: boolean;
 };
 const ToolTip: React.FC<ToolTipProps> = ({
diff --git a/frontend/src/enums/common.ts b/frontend/src/enums/common.ts
index a63cb473..529e6ab4 100644
--- a/frontend/src/enums/common.ts
+++ b/frontend/src/enums/common.ts
@@ -45,5 +45,5 @@ export enum SHOELACE_SIZES {
   SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",
-  EXTRA_LARGE = 'extra-large'
+  EXTRA_LARGE = "extra-large",
 }
diff --git a/frontend/src/features/model-creation/api/get-trainings.ts b/frontend/src/features/model-creation/api/get-trainings.ts
index 58618a13..47ca9b9a 100644
--- a/frontend/src/features/model-creation/api/get-trainings.ts
+++ b/frontend/src/features/model-creation/api/get-trainings.ts
@@ -7,7 +7,7 @@ import {
 
 export const getTrainingDatasets = async (
   searchQuery: string,
-  ordering: string = '-id'
+  ordering: string = "-id",
 ): Promise<TTrainingDataset[]> => {
   const res = await apiClient.get(
     API_ENDPOINTS.GET_TRAINING_DATASETS(searchQuery, ordering),
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 db4c23eb..de0d7e69 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
@@ -48,10 +48,12 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
   });
 
   const onDrop = useCallback((files: FileWithPath[]) => {
-
     const initialValidFiles = files.filter((file) => {
       if (!file.name.endsWith(".geojson") && !file.name.endsWith(".json")) {
-        showErrorToast(undefined, `File ${file.name} is not a supported format`);
+        showErrorToast(
+          undefined,
+          `File ${file.name} is not a supported format`,
+        );
         return false;
       }
       if (file.size > MAX_TRAINING_AREA_UPLOAD_FILE_SIZE) {
@@ -61,7 +63,6 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
       return true;
     });
 
-
     const validateFiles = async () => {
       const validFiles: { file: FileWithPath; id: string }[] = [];
 
@@ -70,7 +71,10 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
         try {
           const geojson: FeatureCollection | Feature = JSON.parse(text);
           if (validateGeoJSONArea(geojson as Feature)) {
-            showErrorToast(undefined, `File area for ${file.name} exceeds area limit.`);
+            showErrorToast(
+              undefined,
+              `File area for ${file.name} exceeds area limit.`,
+            );
           } else {
             validFiles.push({ file, id: generateUniqueId() });
           }
@@ -85,7 +89,6 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
     validateFiles();
   }, []);
 
-
   const clearAcceptedFiles = () => {
     setAcceptedFiles([]);
   };
@@ -192,7 +195,7 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
       </button>
     </li>
   ));
-  const { isMobile } = useScreenSize();;
+  const { isMobile } = useScreenSize();
   return (
     <Dialog
       isOpened={isOpened}
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
index 059e4a85..d45727bf 100644
--- a/frontend/src/features/model-creation/components/model-details/model-details.tsx
+++ b/frontend/src/features/model-creation/components/model-details/model-details.tsx
@@ -13,17 +13,26 @@ const baseModelOptions = [
   {
     name: BASE_MODELS.RAMP,
     value: BASE_MODELS.RAMP,
-    suffix: MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[BASE_MODELS.RAMP]
+    suffix:
+      MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[
+        BASE_MODELS.RAMP
+      ],
   },
   {
     name: BASE_MODELS.YOLOV8_V1,
     value: BASE_MODELS.YOLOV8_V1,
-    suffix: MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[BASE_MODELS.YOLOV8_V1]
+    suffix:
+      MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[
+        BASE_MODELS.YOLOV8_V1
+      ],
   },
   {
     name: BASE_MODELS.YOLOV8_V2,
     value: BASE_MODELS.YOLOV8_V2,
-    suffix: MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[BASE_MODELS.YOLOV8_V2]
+    suffix:
+      MODEL_CREATION_CONTENT.modelDetails.form.baseModel.suffixes[
+        BASE_MODELS.YOLOV8_V2
+      ],
   },
 ];
 
diff --git a/frontend/src/features/model-creation/components/progress-buttons.tsx b/frontend/src/features/model-creation/components/progress-buttons.tsx
index 37f5aa9b..4f8114b2 100644
--- a/frontend/src/features/model-creation/components/progress-buttons.tsx
+++ b/frontend/src/features/model-creation/components/progress-buttons.tsx
@@ -102,11 +102,11 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
       case APPLICATION_ROUTES.CREATE_NEW_MODEL:
         return (
           formData.modelName.length >=
-          FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME]
-            .minLength &&
+            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_NAME]
+              .minLength &&
           formData.modelDescription.length >=
-          FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
-            .minLength
+            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
+              .minLength
         );
 
       case APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET:
@@ -126,8 +126,8 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
           return (
             formData.tmsURLValidation.valid &&
             formData.datasetName.length >=
-            FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.DATASET_NAME]
-              .minLength
+              FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.DATASET_NAME]
+                .minLength
           );
         } else if (
           formData.trainingDatasetOption === TrainingDatasetOption.USE_EXISTING
@@ -139,7 +139,9 @@ const ProgressButtons: React.FC<ProgressButtonsProps> = ({
         }
       case APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS:
         // confirm that the user has selected at least an option
-        return formData.zoomLevels.length > 0 && formData.trainingSettingsIsValid;
+        return (
+          formData.zoomLevels.length > 0 && formData.trainingSettingsIsValid
+        );
       case APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA:
         return (
           hasLabeledTrainingAreas && hasAOIsWithGeometry && formData.oamBounds
diff --git a/frontend/src/features/model-creation/components/training-area/training-area-item.tsx b/frontend/src/features/model-creation/components/training-area/training-area-item.tsx
index 19a64259..2cd83001 100644
--- a/frontend/src/features/model-creation/components/training-area/training-area-item.tsx
+++ b/frontend/src/features/model-creation/components/training-area/training-area-item.tsx
@@ -55,9 +55,7 @@ const TrainingAreaItem: React.FC<
         showSuccessToast(TOAST_NOTIFICATIONS.trainingLabelsFetchSuccess);
       },
       onError: (error) => {
-        showErrorToast(
-          error
-        );
+        showErrorToast(error);
       },
     },
   });
@@ -200,9 +198,10 @@ const TrainingAreaItem: React.FC<
     return () => clearInterval(intervalId);
   }, [trainingArea?.properties?.label_fetched]);
 
-
   const trainingAreaSize = useMemo(() => {
-    return trainingArea.geometry ? formatAreaInAppropriateUnit(calculateGeoJSONArea(trainingArea)) : '0 m²'
+    return trainingArea.geometry
+      ? formatAreaInAppropriateUnit(calculateGeoJSONArea(trainingArea))
+      : "0 m²";
   }, [trainingArea]);
 
   return (
@@ -212,17 +211,19 @@ const TrainingAreaItem: React.FC<
           <p className="text-body-3 ">
             ID: <span className="font-semibold">{trainingArea.id}</span>
           </p>
-          <p
-            className="text-body-4 text-dark"
-            title={`${trainingAreaSize}`}
-          >
+          <p className="text-body-4 text-dark" title={`${trainingAreaSize}`}>
             {truncateString(trainingAreaSize, 15)}
           </p>
-          <p className={`text-body-4 text-dark ${trainingArea.properties.label_fetched === null && 'text-primary'}`}>
+          <p
+            className={`text-body-4 text-dark ${trainingArea.properties.label_fetched === null && "text-primary"}`}
+          >
             {trainingAreaLabelsMutation.isPending
               ? "Fetching labels..."
               : trainingArea.properties.label_fetched !== null
-                ? truncateString(`Fetched ${timeSinceLabelFetch === "0 sec" ? 'just now' : `${timeSinceLabelFetch} ago`}`, 20)
+                ? truncateString(
+                    `Fetched ${timeSinceLabelFetch === "0 sec" ? "just now" : `${timeSinceLabelFetch} ago`}`,
+                    20,
+                  )
                 : "No labels yet"}
           </p>
         </div>
diff --git a/frontend/src/features/model-creation/components/training-area/training-area-map.tsx b/frontend/src/features/model-creation/components/training-area/training-area-map.tsx
index 37ca5e72..390b2408 100644
--- a/frontend/src/features/model-creation/components/training-area/training-area-map.tsx
+++ b/frontend/src/features/model-creation/components/training-area/training-area-map.tsx
@@ -58,7 +58,10 @@ const TrainingAreaMap = ({
 
   const [featureArea, setFeatureArea] = useState<number>(0);
 
-  const { setTooltipVisible, tooltipPosition, } = useToolTipVisibility([drawingMode, currentZoom]);
+  const { setTooltipVisible, tooltipPosition } = useToolTipVisibility([
+    drawingMode,
+    currentZoom,
+  ]);
 
   const debouncedBbox = useDebounce(bbox, 300);
   const debouncedZoom = useDebounce(currentZoom.toString(), 300);
@@ -95,12 +98,16 @@ const TrainingAreaMap = ({
           "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
         ],
         attribution: "&copy; Google",
-        tileSize: 256
+        tileSize: 256,
       });
     }
 
     if (!map.getSource(TMSSourceId)) {
-      map.addSource(TMSSourceId, { type: "raster", url: tileJSONURL, tileSize: 256 });
+      map.addSource(TMSSourceId, {
+        type: "raster",
+        url: tileJSONURL,
+        tileSize: 256,
+      });
     }
 
     if (data?.results && !map.getSource(trainingAreasSourceId)) {
@@ -144,7 +151,6 @@ const TrainingAreaMap = ({
         layout: { visibility: "none" },
         minzoom: 0,
         maxzoom: 22,
-
       });
     }
 
@@ -154,7 +160,6 @@ const TrainingAreaMap = ({
         type: "raster",
         source: TMSSourceId,
         layout: { visibility: "visible" },
-
       });
     }
     if (data?.results && !map.getLayer(trainingAreasFillLayerId)) {
@@ -174,7 +179,10 @@ const TrainingAreaMap = ({
         id: trainingAreasLayerId,
         type: "line",
         source: trainingAreasSourceId,
-        paint: { "line-color": TRAINING_AREAS_AOI_OUTLINE_COLOR, "line-width": 4 },
+        paint: {
+          "line-color": TRAINING_AREAS_AOI_OUTLINE_COLOR,
+          "line-width": 4,
+        },
         layout: { visibility: "visible" },
       });
     }
@@ -216,7 +224,6 @@ const TrainingAreaMap = ({
           "line-width": 1,
         },
         layout: { visibility: "visible" },
-
       });
     }
   }, [map, tileJSONURL, data?.results, labels]);
@@ -319,7 +326,6 @@ const TrainingAreaMap = ({
     updateTrainingLabels();
   }, [labels]);
 
-
   // drawing events and tooltip
   useEffect(() => {
     if (!terraDraw || !map) return;
@@ -332,7 +338,7 @@ const TrainingAreaMap = ({
     const handleFinish = async () => {
       const snapshot = terraDraw.getSnapshot();
       setFeatureArea(0);
-      setDrawingMode(DrawingModes.STATIC)
+      setDrawingMode(DrawingModes.STATIC);
       setTooltipVisible(false);
       if (snapshot) {
         const drawnFeature = snapshot[snapshot.length - 1];
@@ -362,14 +368,13 @@ const TrainingAreaMap = ({
     };
   }, [terraDraw, drawingMode, setDrawingMode]);
 
-
   const showLabelsToolTip = currentZoom >= 14 && currentZoom < 18;
 
-  const showTooltip = Boolean(drawingMode === DrawingModes.RECTANGLE || showLabelsToolTip);
-
+  const showTooltip = Boolean(
+    drawingMode === DrawingModes.RECTANGLE || showLabelsToolTip,
+  );
 
   const getTooltipColor = () => {
-
     if (featureArea !== 0) {
       if (
         featureArea < MIN_TRAINING_AREA_SIZE ||
@@ -399,9 +404,7 @@ const TrainingAreaMap = ({
     return;
   };
 
-
   return (
-
     <MapComponent
       controlsLocation="top-left"
       drawControl
@@ -417,25 +420,42 @@ const TrainingAreaMap = ({
       layerControlLayers={[
         { value: "TMS Layer", subLayers: [TMSLayerId] },
         ...(data?.results?.features?.length
-          ? [{ value: "Training Areas", subLayers: [trainingAreasLayerId, trainingAreasFillLayerId] }]
+          ? [
+              {
+                value: "Training Areas",
+                subLayers: [trainingAreasLayerId, trainingAreasFillLayerId],
+              },
+            ]
           : []),
         ...(labels && labels?.features.length > 0
-          ? [{ value: "Training Labels", subLayers: [trainingDatasetLabelsLayerId, trainingDatasetLabelsOutlineLayerId] }]
+          ? [
+              {
+                value: "Training Labels",
+                subLayers: [
+                  trainingDatasetLabelsLayerId,
+                  trainingDatasetLabelsOutlineLayerId,
+                ],
+              },
+            ]
           : []),
       ]}
     >
-      <MapCursorToolTip tooltipVisible={showTooltip} color={getTooltipColor()} map={map} tooltipPosition={tooltipPosition}>
-        {!showLabelsToolTip && <p>
-          {drawingMode === DrawingModes.RECTANGLE && featureArea === 0
-            ? "Click and drag to draw a rectangle."
-            : `Current area: ${formatAreaInAppropriateUnit(featureArea)}`}
-        </p>
-        }
+      <MapCursorToolTip
+        tooltipVisible={showTooltip}
+        color={getTooltipColor()}
+        map={map}
+        tooltipPosition={tooltipPosition}
+      >
+        {!showLabelsToolTip && (
+          <p>
+            {drawingMode === DrawingModes.RECTANGLE && featureArea === 0
+              ? "Click and drag to draw a rectangle."
+              : `Current area: ${formatAreaInAppropriateUnit(featureArea)}`}
+          </p>
+        )}
         <p>{getFeedbackMessage()}</p>
       </MapCursorToolTip>
     </MapComponent>
-
-
   );
 };
 
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 44cab9b1..d0e028e0 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
@@ -21,13 +21,10 @@ const trainingTypes = [
   { label: TrainingType.ADVANCED, Icon: AdvancedGuageIcon },
 ];
 
-
-
-
 const TrainingSettingsForm = () => {
   const [showAdvancedSettings, setShowAdvancedSettings] =
     useState<boolean>(false);
-  const [validationMessage, setValidationMessage] = useState('Hellow')
+  const [validationMessage, setValidationMessage] = useState("Hellow");
   const { formData, handleChange } = useModelsContext();
 
   const advancedSettings = [
@@ -35,7 +32,7 @@ const TrainingSettingsForm = () => {
       label: MODEL_CREATION_CONTENT.trainingSettings.form.epoch.label,
       value: MODEL_CREATION_FORM_NAME.EPOCH,
       toolTip: MODEL_CREATION_CONTENT.trainingSettings.form.epoch.toolTip,
-      enabled: true
+      enabled: true,
     },
     {
       label: MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.label,
@@ -43,19 +40,19 @@ const TrainingSettingsForm = () => {
       toolTip:
         MODEL_CREATION_CONTENT.trainingSettings.form.contactSpacing.toolTip,
       enabled: formData.baseModel === BASE_MODELS.RAMP,
-
     },
     {
       label: MODEL_CREATION_CONTENT.trainingSettings.form.batchSize.label,
       value: MODEL_CREATION_FORM_NAME.BATCH_SIZE,
       toolTip: MODEL_CREATION_CONTENT.trainingSettings.form.batchSize.toolTip,
-      enabled: true
+      enabled: true,
     },
     {
       label: MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.label,
       value: MODEL_CREATION_FORM_NAME.BOUNDARY_WIDTH,
-      toolTip: MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.toolTip,
-      enabled: formData.baseModel === BASE_MODELS.RAMP
+      toolTip:
+        MODEL_CREATION_CONTENT.trainingSettings.form.boundaryWidth.toolTip,
+      enabled: formData.baseModel === BASE_MODELS.RAMP,
     },
   ];
 
@@ -80,7 +77,6 @@ const TrainingSettingsForm = () => {
     },
   };
 
-
   useEffect(() => {
     handleChange(
       MODEL_CREATION_FORM_NAME.EPOCH,
@@ -182,58 +178,74 @@ const TrainingSettingsForm = () => {
             />
           </button>
         </div>
-        {showAdvancedSettings && (<>
-          <div className="flex items-center justify-between gap-4 flex-wrap lg:flex-nowrap">
-            {advancedSettings.filter(setting => setting.enabled).map((setting, id) => (
-              <div key={`training-settings-${id}`} className="w-full">
-                <Input
-                  label={setting.label}
-                  labelWithTooltip
-                  type={INPUT_TYPES.NUMBER}
-                  className="text-nowrap"
-                  showBorder
-                  // @ts-expect-error bad type definition
-                  value={formData[setting.value]}
-                  min={
-                    // @ts-expect-error bad type definition
-                    FORM_VALIDATION_CONFIG[formData.baseModel][setting.value].min
-                  }
-                  max={
-                    // @ts-expect-error bad type definition
-                    FORM_VALIDATION_CONFIG[formData.baseModel][setting.value].max
-                  }
-                  handleInput={(e) => {
-                    const inputValue = Number(e.target.value);
-
-                    const min =
+        {showAdvancedSettings && (
+          <>
+            <div className="flex items-center justify-between gap-4 flex-wrap lg:flex-nowrap">
+              {advancedSettings
+                .filter((setting) => setting.enabled)
+                .map((setting, id) => (
+                  <div key={`training-settings-${id}`} className="w-full">
+                    <Input
+                      label={setting.label}
+                      labelWithTooltip
+                      type={INPUT_TYPES.NUMBER}
+                      className="text-nowrap"
+                      showBorder
                       // @ts-expect-error bad type definition
-                      FORM_VALIDATION_CONFIG[formData.baseModel][setting.value].min;
-                    const max =
-                      // @ts-expect-error bad type definition
-                      FORM_VALIDATION_CONFIG[formData.baseModel][setting.value].max;
-                    handleChange(setting.value, inputValue);
-                    if (inputValue < min || inputValue > max) {
-                      // Set validation message for out-of-range values
-                      setValidationMessage(
-                        `${setting.label} must be between ${min} and ${max}.`
-                      );
-                      handleChange(MODEL_CREATION_FORM_NAME.TRAINING_SETTINGS_IS_VALID, false)
-                    } else {
-                      // Clear the validation message if the value is valid
-                      setValidationMessage("");
-                      handleChange(setting.value, inputValue);
-                      handleChange(MODEL_CREATION_FORM_NAME.TRAINING_SETTINGS_IS_VALID, true)
-                    }
-                  }}
-                  toolTipContent={setting.toolTip}
-                />
-              </div>
-            ))}
-          </div>
-          <p>{validationMessage}</p>
-        </>
+                      value={formData[setting.value]}
+                      min={
+                        // @ts-expect-error bad type definition
+                        FORM_VALIDATION_CONFIG[formData.baseModel][
+                          setting.value
+                        ].min
+                      }
+                      max={
+                        // @ts-expect-error bad type definition
+                        FORM_VALIDATION_CONFIG[formData.baseModel][
+                          setting.value
+                        ].max
+                      }
+                      handleInput={(e) => {
+                        const inputValue = Number(e.target.value);
+
+                        const min =
+                          // @ts-expect-error bad type definition
+                          FORM_VALIDATION_CONFIG[formData.baseModel][
+                            setting.value
+                          ].min;
+                        const max =
+                          // @ts-expect-error bad type definition
+                          FORM_VALIDATION_CONFIG[formData.baseModel][
+                            setting.value
+                          ].max;
+                        handleChange(setting.value, inputValue);
+                        if (inputValue < min || inputValue > max) {
+                          // Set validation message for out-of-range values
+                          setValidationMessage(
+                            `${setting.label} must be between ${min} and ${max}.`,
+                          );
+                          handleChange(
+                            MODEL_CREATION_FORM_NAME.TRAINING_SETTINGS_IS_VALID,
+                            false,
+                          );
+                        } else {
+                          // Clear the validation message if the value is valid
+                          setValidationMessage("");
+                          handleChange(setting.value, inputValue);
+                          handleChange(
+                            MODEL_CREATION_FORM_NAME.TRAINING_SETTINGS_IS_VALID,
+                            true,
+                          );
+                        }
+                      }}
+                      toolTipContent={setting.toolTip}
+                    />
+                  </div>
+                ))}
+            </div>
+            <p>{validationMessage}</p>
+          </>
         )}
-
       </div>
     </div>
   );
diff --git a/frontend/src/features/models/api/factory.ts b/frontend/src/features/models/api/factory.ts
index a9c2cfc8..f0ea3d52 100644
--- a/frontend/src/features/models/api/factory.ts
+++ b/frontend/src/features/models/api/factory.ts
@@ -110,10 +110,9 @@ export const getTrainingHistoryQueryOptions = (
   });
 };
 
-
 export const getTrainingDatasetQueryOptions = (id: number) => {
   return queryOptions({
     queryKey: ["training-dataset", id],
     queryFn: () => getTrainingDataset(id),
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/features/models/api/get-trainings.ts b/frontend/src/features/models/api/get-trainings.ts
index 22780bb5..f9e4119f 100644
--- a/frontend/src/features/models/api/get-trainings.ts
+++ b/frontend/src/features/models/api/get-trainings.ts
@@ -61,12 +61,9 @@ export const getTrainingWorkspace = async (
   return res.data;
 };
 
-
 export const getTrainingDataset = async (
   id: number,
 ): Promise<TTrainingDataset> => {
-  const res = await apiClient.get(
-    API_ENDPOINTS.GET_TRAINING_DATASET(id),
-  );
-  return res.data
+  const res = await apiClient.get(API_ENDPOINTS.GET_TRAINING_DATASET(id));
+  return res.data;
 };
diff --git a/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx b/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx
index da1f2e53..eca6b938 100644
--- a/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx
@@ -36,7 +36,7 @@ const MobileModelFiltersDialog: React.FC<TrainingAreaDialogProps> = ({
   updateQuery,
   disabled,
 }) => {
-  const { isMobile } = useScreenSize();;
+  const { isMobile } = useScreenSize();
   return (
     <Dialog
       isOpened={isOpened}
diff --git a/frontend/src/features/models/components/dialogs/model-enhancement-dialog.tsx b/frontend/src/features/models/components/dialogs/model-enhancement-dialog.tsx
index b2ea83d1..1940a9e8 100644
--- a/frontend/src/features/models/components/dialogs/model-enhancement-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/model-enhancement-dialog.tsx
@@ -7,13 +7,18 @@ import ModelTrainingSettingsDialog from "./training-settings-dialog";
 type ModelEnhancementDialogProps = {
   isOpened: boolean;
   closeDialog: () => void;
-  modelId: string
+  modelId: string;
 };
 const ModelEnhancementDialog: React.FC<ModelEnhancementDialogProps> = ({
   isOpened,
-  closeDialog, modelId
+  closeDialog,
+  modelId,
 }) => {
-  const { isOpened: isTrainingSettingsDialogOpened, openDialog, closeDialog: closeTrainingSettingsDialog } = useDialog();
+  const {
+    isOpened: isTrainingSettingsDialogOpened,
+    openDialog,
+    closeDialog: closeTrainingSettingsDialog,
+  } = useDialog();
 
   const options = [
     {
@@ -22,7 +27,7 @@ const ModelEnhancementDialog: React.FC<ModelEnhancementDialogProps> = ({
       description:
         APP_CONTENT.models.modelsDetailsCard.modelEnhancement.newSettings
           .description,
-      onClick: openDialog
+      onClick: openDialog,
     },
     {
       name: APP_CONTENT.models.modelsDetailsCard.modelEnhancement.trainingData
@@ -34,9 +39,9 @@ const ModelEnhancementDialog: React.FC<ModelEnhancementDialogProps> = ({
   ];
 
   const handleClose = () => {
-    closeDialog()
-    closeTrainingSettingsDialog()
-  }
+    closeDialog();
+    closeTrainingSettingsDialog();
+  };
 
   return (
     <Dialog
@@ -44,14 +49,21 @@ const ModelEnhancementDialog: React.FC<ModelEnhancementDialogProps> = ({
       closeDialog={closeDialog}
       label={APP_CONTENT.models.modelsDetailsCard.modelUpdate.dialogHeading}
     >
-      <ModelTrainingSettingsDialog isOpened={isTrainingSettingsDialogOpened} closeDialog={handleClose} modelId={modelId} />
+      <ModelTrainingSettingsDialog
+        isOpened={isTrainingSettingsDialogOpened}
+        closeDialog={handleClose}
+        modelId={modelId}
+      />
       <ul className="flex flex-col gap-y-4 w-full">
         {options.map((option, id) => (
           <li
             key={`mode-enhancement-option-${id}`}
             className="border border-gray-border rounded-lg px-2 hover:border-primary flex items-center justify-between"
           >
-            <button className="text-start transition-colors p-6" onClick={option.onClick}>
+            <button
+              className="text-start transition-colors p-6"
+              onClick={option.onClick}
+            >
               <span className="flex flex-col gap-y-2">
                 <p className="text-dark text-body-1">{option.name}</p>
                 <p className="text-gray text-body-3">{option.description}</p>
diff --git a/frontend/src/features/models/components/dialogs/model-files-dialog.tsx b/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
index 305490b7..07cfe1ff 100644
--- a/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/model-files-dialog.tsx
@@ -16,15 +16,27 @@ const ModelFilesDialog: React.FC<TrainingAreaDialogProps> = ({
   datasetId,
   trainingId,
 }) => {
-  const { isMobile, isLaptop, isTablet } = useScreenSize();;
+  const { isMobile, isLaptop, isTablet } = useScreenSize();
   return (
     <Dialog
       isOpened={isOpened}
       closeDialog={closeDialog}
       label={APP_CONTENT.models.modelsDetailsCard.modelFilesDialog.dialogTitle}
-      size={isMobile || isTablet ? SHOELACE_SIZES.EXTRA_LARGE : isLaptop ? SHOELACE_SIZES.LARGE : SHOELACE_SIZES.MEDIUM}
+      size={
+        isMobile || isTablet
+          ? SHOELACE_SIZES.EXTRA_LARGE
+          : isLaptop
+            ? SHOELACE_SIZES.LARGE
+            : SHOELACE_SIZES.MEDIUM
+      }
     >
-      {isOpened && <DirectoryTree trainingId={trainingId} datasetId={datasetId} isOpened={isOpened} />}
+      {isOpened && (
+        <DirectoryTree
+          trainingId={trainingId}
+          datasetId={datasetId}
+          isOpened={isOpened}
+        />
+      )}
     </Dialog>
   );
 };
diff --git a/frontend/src/features/models/components/dialogs/training-area-dialog.tsx b/frontend/src/features/models/components/dialogs/training-area-dialog.tsx
index da497c15..b522096e 100644
--- a/frontend/src/features/models/components/dialogs/training-area-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/training-area-dialog.tsx
@@ -10,7 +10,7 @@ const TrainingAreaDialog: React.FC<TrainingAreaDialogProps> = ({
   isOpened,
   closeDialog,
 }) => {
-  const { isMobile } = useScreenSize();;
+  const { isMobile } = useScreenSize();
 
   return (
     <Dialog
diff --git a/frontend/src/features/models/components/dialogs/training-details-dialog.tsx b/frontend/src/features/models/components/dialogs/training-details-dialog.tsx
index db6d4486..0b15bad3 100644
--- a/frontend/src/features/models/components/dialogs/training-details-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/training-details-dialog.tsx
@@ -17,14 +17,20 @@ const TrainingDetailsDialog: React.FC<TrainingDetailsDialogProps> = ({
   datasetId,
   baseModel,
 }) => {
-  const { isMobile, isTablet, isLaptop } = useScreenSize();;
+  const { isMobile, isTablet, isLaptop } = useScreenSize();
 
   return (
     <Dialog
       isOpened={isOpened}
       closeDialog={closeDialog}
       label={`Training ${trainingId}`}
-      size={isMobile || isTablet ? SHOELACE_SIZES.EXTRA_LARGE : isLaptop ? SHOELACE_SIZES.LARGE : SHOELACE_SIZES.MEDIUM}
+      size={
+        isMobile || isTablet
+          ? SHOELACE_SIZES.EXTRA_LARGE
+          : isLaptop
+            ? SHOELACE_SIZES.LARGE
+            : SHOELACE_SIZES.MEDIUM
+      }
     >
       <ModelProperties
         trainingId={trainingId}
diff --git a/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx b/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx
index e17a09db..2acb2f25 100644
--- a/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx
+++ b/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx
@@ -10,55 +10,61 @@ import { useModelDetails } from "../../hooks/use-models";
 type ModelEnhancementDialogProps = {
   isOpened: boolean;
   closeDialog: () => void;
-  modelId: string
+  modelId: string;
 };
 
-
 const ModelTrainingSettingsDialog: React.FC<ModelEnhancementDialogProps> = ({
   isOpened,
   closeDialog,
-  modelId
+  modelId,
 }) => {
   const { isLaptop, isMobile, isTablet } = useScreenSize();
   // get model details with the id
   const { data, isPending, isError } = useModelDetails(modelId);
 
-  // Training enhancement can only happen in two places
-  // When the user is on the confirmation page or on the model card page.
-  // In either page, after successful enhancement, redirect the user to the model card page to see the training settings.
-  // If they're on the confirmation page, the redirection will be obvious, but it won't on the model card, since they're on the page already.
-  // If the training is not successful, they'll remain on their current page, so they can try again.
-
   return (
     <Dialog
       isOpened={isOpened}
       closeDialog={closeDialog}
       labelColor="primary"
-      label={APP_CONTENT.models.modelsDetailsCard.trainingSettings.dialogHeading}
-      size={isMobile || isTablet ? SHOELACE_SIZES.EXTRA_LARGE : isLaptop ? SHOELACE_SIZES.LARGE : SHOELACE_SIZES.MEDIUM}
-    >
-      {
-        isError ? <p>Error retrieving model details</p> :
-          isPending ? <div className="h-40 w-full animate-pulse bg-light-gray"></div> :
-            <div className="flex flex-col gap-y-6 w-full">
-              <p className="text-gray">{APP_CONTENT.models.modelsDetailsCard.trainingSettings.description}</p>
-              <h1 className="text-title-3 lg:text-title-1 font-semibold">{data.name}</h1>
-              <TrainingSettingsForm />
-              <div className="self-end">
-                <ButtonWithIcon
-                  variant="primary"
-                  suffixIcon={ChevronDownIcon}
-                  label={
-                    APP_CONTENT.models.modelsDetailsCard.trainingSettings.submitButtonText
-                  }
-                  iconClassName="-rotate-90"
-                />
-              </div>
-            </div>
+      label={
+        APP_CONTENT.models.modelsDetailsCard.trainingSettings.dialogHeading
       }
-
+      size={
+        isMobile || isTablet
+          ? SHOELACE_SIZES.EXTRA_LARGE
+          : isLaptop
+            ? SHOELACE_SIZES.LARGE
+            : SHOELACE_SIZES.MEDIUM
+      }
+    >
+      {isError ? (
+        <p>Error retrieving model details</p>
+      ) : isPending ? (
+        <div className="h-40 w-full animate-pulse bg-light-gray"></div>
+      ) : (
+        <div className="flex flex-col gap-y-6 w-full">
+          <p className="text-gray">
+            {APP_CONTENT.models.modelsDetailsCard.trainingSettings.description}
+          </p>
+          <h1 className="text-title-3 lg:text-title-1 font-semibold">
+            {data.name}
+          </h1>
+          <TrainingSettingsForm />
+          <div className="self-end">
+            <ButtonWithIcon
+              variant="primary"
+              suffixIcon={ChevronDownIcon}
+              label={
+                APP_CONTENT.models.modelsDetailsCard.trainingSettings
+                  .submitButtonText
+              }
+              iconClassName="-rotate-90"
+            />
+          </div>
+        </div>
+      )}
     </Dialog>
-
   );
 };
 
diff --git a/frontend/src/features/models/components/directory-tree.tsx b/frontend/src/features/models/components/directory-tree.tsx
index 8ec56775..b76a9a98 100644
--- a/frontend/src/features/models/components/directory-tree.tsx
+++ b/frontend/src/features/models/components/directory-tree.tsx
@@ -20,7 +20,7 @@ import { Spinner } from "@/components/ui/spinner";
 type DirectoryTreeProps = {
   datasetId: number;
   trainingId: number;
-  isOpened: boolean
+  isOpened: boolean;
 };
 
 const DirectoryLoadingSkeleton = () => (
@@ -97,7 +97,6 @@ const DirectoryItem = ({
 const DirectoryTree: React.FC<DirectoryTreeProps> = ({
   datasetId,
   trainingId,
-
 }) => {
   const [directoryTree, setDirectoryTree] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -128,20 +127,20 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
     const { dir, file } = data;
     const subdirectories = dir
       ? await Promise.all(
-        Object.keys(dir).map(async (key: string) => {
-          const fullPath = currentDirectory
-            ? `${currentDirectory}/${key}`
-            : key;
-          const subDirData = await fetchDirectoryRecursive(fullPath);
-          return {
-            [key]: {
-              ...subDirData,
-              size: dir[key]?.size || 0,
-              length: dir[key]?.len || 0,
-            },
-          };
-        }),
-      )
+          Object.keys(dir).map(async (key: string) => {
+            const fullPath = currentDirectory
+              ? `${currentDirectory}/${key}`
+              : key;
+            const subDirData = await fetchDirectoryRecursive(fullPath);
+            return {
+              [key]: {
+                ...subDirData,
+                size: dir[key]?.size || 0,
+                length: dir[key]?.len || 0,
+              },
+            };
+          }),
+        )
       : [];
 
     return {
@@ -150,9 +149,7 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
     };
   };
 
-
   useEffect(() => {
-
     const fetchAllDirectories = async () => {
       try {
         setIsLoading(true);
diff --git a/frontend/src/features/models/components/header.tsx b/frontend/src/features/models/components/header.tsx
index a279c3b3..51596349 100644
--- a/frontend/src/features/models/components/header.tsx
+++ b/frontend/src/features/models/components/header.tsx
@@ -7,11 +7,11 @@ import { useNavigate } from "react-router-dom";
 const PageHeader = () => {
   const { resetState } = useModelsContext();
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const handleClick = () => {
-    resetState()
-    navigate(APPLICATION_ROUTES.CREATE_NEW_MODEL)
-  }
+    resetState();
+    navigate(APPLICATION_ROUTES.CREATE_NEW_MODEL);
+  };
 
   return (
     <div className="flex flex-col gap-y-8 my-12">
diff --git a/frontend/src/features/models/components/model-details-info.tsx b/frontend/src/features/models/components/model-details-info.tsx
index c111b76a..71f1c823 100644
--- a/frontend/src/features/models/components/model-details-info.tsx
+++ b/frontend/src/features/models/components/model-details-info.tsx
@@ -24,7 +24,11 @@ const ModelDetailsInfo = ({
 }) => {
   const { isOpened, openDialog, closeDialog } = useDialog();
   const { user, isAuthenticated } = useAuth();
-  const { isPending, data: trainingDataset, isError } = useGetTrainingDataset(data.dataset);
+  const {
+    isPending,
+    data: trainingDataset,
+    isError,
+  } = useGetTrainingDataset(data.dataset);
 
   return (
     <>
@@ -97,7 +101,15 @@ const ModelDetailsInfo = ({
               <span className="text-gray">
                 {APP_CONTENT.models.modelsDetailsCard.datasetName}
               </span>
-              {isPending ? <p className="h-6 ml-2 w-20 animate-pulse bg-light-gray"></p> : isError ? <span>Error retrieving dataset info</span> : <p title={trainingDataset?.name}>{truncateString(trainingDataset?.name, 30)}</p>}
+              {isPending ? (
+                <p className="h-6 ml-2 w-20 animate-pulse bg-light-gray"></p>
+              ) : isError ? (
+                <span>Error retrieving dataset info</span>
+              ) : (
+                <p title={trainingDataset?.name}>
+                  {truncateString(trainingDataset?.name, 30)}
+                </p>
+              )}
             </div>
             <div className="text-dark text-body-2 flex gap-x-1">
               <span className="text-gray">
diff --git a/frontend/src/features/models/components/model-details-properties.tsx b/frontend/src/features/models/components/model-details-properties.tsx
index e882df3a..4736454f 100644
--- a/frontend/src/features/models/components/model-details-properties.tsx
+++ b/frontend/src/features/models/components/model-details-properties.tsx
@@ -127,7 +127,6 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
       return <ModelPropertiesSkeleton isTrainingDetailsDialog />;
     }
 
-
     return (
       <>
         <ModelFilesDialog
@@ -237,7 +236,7 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
               href={
                 // @ts-expect-error bad type definition
                 APP_CONTENT.models.modelsDetailsCard.properties.baseModel.href[
-                baseModel
+                  baseModel
                 ]
               }
             />
@@ -256,13 +255,13 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
             />
             <PropertyDisplay
               label={
-                APP_CONTENT.models.modelsDetailsCard.properties.trainingId
-                  .title
+                APP_CONTENT.models.modelsDetailsCard.properties.trainingId.title
               }
               tooltip={
-                APP_CONTENT.models.modelsDetailsCard.properties.trainingId.tooltip
+                APP_CONTENT.models.modelsDetailsCard.properties.trainingId
+                  .tooltip
               }
-              value={data?.id ? data?.id : 'N/A'}
+              value={data?.id ? data?.id : "N/A"}
             />
 
             {isTrainingDetailsDialog && (
@@ -286,7 +285,8 @@ const ModelProperties: React.FC<ModelPropertiesProps> = ({
 
           {/* Show logs only in modal and when status failed or running */}
           {isTrainingDetailsDialog &&
-            (data?.status === TrainingStatus.FAILED || data?.status === TrainingStatus.RUNNING) && (
+            (data?.status === TrainingStatus.FAILED ||
+              data?.status === TrainingStatus.RUNNING) && (
               <FailedTrainingTraceBack taskId={data?.task_id ?? ""} />
             )}
         </div>
diff --git a/frontend/src/features/models/components/training-history-table.tsx b/frontend/src/features/models/components/training-history-table.tsx
index fb5cea27..8c24c42e 100644
--- a/frontend/src/features/models/components/training-history-table.tsx
+++ b/frontend/src/features/models/components/training-history-table.tsx
@@ -41,121 +41,121 @@ const columnDefinitions = (
   handleTrainingModal: (trainingId: number) => void,
   publishTraining: (trainingId: number) => void,
 ): ColumnDef<TTrainingDetails>[] => [
-    {
-      accessorKey: "id",
-      header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
+  {
+    accessorKey: "id",
+    header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+        .epochAndBatchSize,
+    accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
+    cell: (row) => (
+      <span title={row.getValue() as string}>{row.getValue() as string}</span>
+    ),
+  },
+  {
+    accessorKey: "started_at",
+    accessorFn: (row) =>
+      row.started_at !== null ? formatDate(row.started_at) : "-",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
+    cell: (row) => {
+      return <span>{row.getValue() as string}</span>;
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-          .epochAndBatchSize,
-      accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
-      cell: (row) => (
-        <span title={row.getValue() as string}>{row.getValue() as string}</span>
-      ),
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
+    accessorFn: (row) =>
+      row.finished_at && row.started_at
+        ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
+        : "-",
+    cell: (row) => (
+      <span title={row.getValue() as string}>{row.getValue() as string}</span>
+    ),
+  },
+  {
+    accessorKey: "user.username",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+        .sumittedBy,
+    cell: ({ row }) => {
+      return <span>{truncateString(row.original.user.username)}</span>;
     },
-    {
-      accessorKey: "started_at",
-      accessorFn: (row) =>
-        row.started_at !== null ? formatDate(row.started_at) : "-",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
-      cell: (row) => {
-        return <span>{row.getValue() as string}</span>;
-      },
+  },
+  {
+    accessorKey: "chips_length",
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
+    cell: ({ row }) => {
+      return <span>{row.getValue("chips_length") ?? 0}</span>;
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
-      accessorFn: (row) =>
-        row.finished_at && row.started_at
-          ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
-          : "-",
-      cell: (row) => (
-        <span title={row.getValue() as string}>{row.getValue() as string}</span>
-      ),
-    },
-    {
-      accessorKey: "user.username",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-          .sumittedBy,
-      cell: ({ row }) => {
-        return <span>{truncateString(row.original.user.username)}</span>;
-      },
-    },
-    {
-      accessorKey: "chips_length",
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
-      cell: ({ row }) => {
-        return <span>{row.getValue("chips_length") ?? 0}</span>;
-      },
-    },
-    {
-      accessorKey: "accuracy",
-      header: ({ column }) => (
-        <SortableHeader
-          title={
-            APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-              .accuracy
-          }
-          column={column}
-        />
-      ),
-      cell: ({ row }) => {
-        return (
-          <span>
-            {Number(row.getValue("accuracy")) > 0
-              ? roundNumber(row.getValue("accuracy"))
-              : "-"}
-          </span>
-        );
-      },
+  },
+  {
+    accessorKey: "accuracy",
+    header: ({ column }) => (
+      <SortableHeader
+        title={
+          APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+            .accuracy
+        }
+        column={column}
+      />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span>
+          {Number(row.getValue("accuracy")) > 0
+            ? roundNumber(row.getValue("accuracy"))
+            : "-"}
+        </span>
+      );
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
-      accessorKey: "status",
-      cell: (row) => {
-        const statusToVariant: Record<string, TBadgeVariants> = {
-          finished: "green",
-          failed: "red",
-          submitted: "blue",
-          running: "yellow",
-        };
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
+    accessorKey: "status",
+    cell: (row) => {
+      const statusToVariant: Record<string, TBadgeVariants> = {
+        finished: "green",
+        failed: "red",
+        submitted: "blue",
+        running: "yellow",
+      };
 
-        return (
-          <Badge
-            variant={
-              statusToVariant[
+      return (
+        <Badge
+          variant={
+            statusToVariant[
               String(row.getValue()).toLocaleLowerCase() as TBadgeVariants
-              ]
-            }
-          >
-            {String(row.getValue()).toLocaleLowerCase() as string}
-          </Badge>
-        );
-      },
+            ]
+          }
+        >
+          {String(row.getValue()).toLocaleLowerCase() as string}
+        </Badge>
+      );
     },
-    {
-      header:
-        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
+  },
+  {
+    header:
+      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
 
-      cell: ({ row }) => {
-        return (
-          <span>
-            {row.getValue("id") === trainingId ? (
-              <Badge variant="green" rounded>
-                <CheckIcon className="icon" />
-              </Badge>
-            ) : null}
-          </span>
-        );
-      },
+    cell: ({ row }) => {
+      return (
+        <span>
+          {row.getValue("id") === trainingId ? (
+            <Badge variant="green" rounded>
+              <CheckIcon className="icon" />
+            </Badge>
+          ) : null}
+        </span>
+      );
     },
-    ...(modelOwner !== authUsername
-      ? [
+  },
+  ...(modelOwner !== authUsername
+    ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -174,9 +174,9 @@ const columnDefinitions = (
           },
         },
       ]
-      : []),
-    ...(modelOwner === authUsername && isAuthenticated
-      ? [
+    : []),
+  ...(modelOwner === authUsername && isAuthenticated
+    ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -225,8 +225,8 @@ const columnDefinitions = (
           },
         },
       ]
-      : []),
-  ];
+    : []),
+];
 
 const TrainingHistoryTable: React.FC<TrainingHistoryTableProps> = ({
   trainingId,
diff --git a/frontend/src/features/models/hooks/use-dataset.ts b/frontend/src/features/models/hooks/use-dataset.ts
index f1c23f72..a17d6206 100644
--- a/frontend/src/features/models/hooks/use-dataset.ts
+++ b/frontend/src/features/models/hooks/use-dataset.ts
@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import { getTrainingDatasetQueryOptions } from "../api/factory";
 
 export const useGetTrainingDataset = (id: number) => {
-    return useQuery({
-        ...getTrainingDatasetQueryOptions(id),
-        //@ts-expect-error bad type definition
-        throwOnError: (error) => error?.response?.status >= 500,
-        enabled: id !== undefined
-    });
-};
\ No newline at end of file
+  return useQuery({
+    ...getTrainingDatasetQueryOptions(id),
+    //@ts-expect-error bad type definition
+    throwOnError: (error) => error?.response?.status >= 500,
+    enabled: id !== undefined,
+  });
+};
diff --git a/frontend/src/hooks/use-screen-size.ts b/frontend/src/hooks/use-screen-size.ts
index f187b688..c5bdbef0 100644
--- a/frontend/src/hooks/use-screen-size.ts
+++ b/frontend/src/hooks/use-screen-size.ts
@@ -11,20 +11,20 @@ import { useEffect, useState } from "react";
  */
 const useScreenSize = () => {
   const [screenSize, setScreenSize] = useState<{
-    isMobile: boolean,
-    isTablet: boolean,
-    isLaptop: boolean
+    isMobile: boolean;
+    isTablet: boolean;
+    isLaptop: boolean;
   }>({
     isMobile: false,
     isTablet: false,
-    isLaptop: false
+    isLaptop: false,
   });
 
   const handleResize = () => {
     setScreenSize({
       isMobile: window.innerWidth < 640,
       isTablet: window.innerWidth > 640 && window.innerWidth < 768,
-      isLaptop: window.innerWidth > 768 && window.innerWidth < 1024
+      isLaptop: window.innerWidth > 768 && window.innerWidth < 1024,
     });
   };
 
diff --git a/frontend/src/hooks/use-tooltip-visibility.ts b/frontend/src/hooks/use-tooltip-visibility.ts
index df92bc8b..d4e07b0c 100644
--- a/frontend/src/hooks/use-tooltip-visibility.ts
+++ b/frontend/src/hooks/use-tooltip-visibility.ts
@@ -3,31 +3,32 @@ import { MapMouseEvent } from "maplibre-gl";
 import { useEffect, useState } from "react";
 
 export const useToolTipVisibility = (dependencies: any[] = []) => {
+  const [tooltipVisible, setTooltipVisible] = useState<boolean>(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const { map } = useMap();
+  const TOOLTIP_OFFSET = 10;
 
-    const [tooltipVisible, setTooltipVisible] = useState<boolean>(false);
-    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-    const { map } = useMap();
-    const TOOLTIP_OFFSET = 10;
+  useEffect(() => {
+    if (!map) return;
+    const handleMouseMove = (event: MapMouseEvent) => {
+      setTooltipPosition({
+        x: event.point.x + TOOLTIP_OFFSET,
+        y: event.point.y + TOOLTIP_OFFSET,
+      });
+      setTooltipVisible(true);
+    };
+    const handleMouseLeave = () => {
+      setTooltipVisible(false);
+    };
 
-    useEffect(() => {
-        if (!map) return;
-        const handleMouseMove = (event: MapMouseEvent) => {
-            setTooltipPosition({ x: event.point.x + TOOLTIP_OFFSET, y: event.point.y + TOOLTIP_OFFSET });
-            setTooltipVisible(true);
-        };
-        const handleMouseLeave = () => {
-            setTooltipVisible(false);
-        };
+    map.on("mousemove", handleMouseMove);
+    map.on("mouseout", handleMouseLeave);
 
-        map.on("mousemove", handleMouseMove);
-        map.on("mouseout", handleMouseLeave);
+    return () => {
+      map.off("mousemove", handleMouseMove);
+      map.off("mouseout", handleMouseLeave);
+    };
+  }, [map, ...dependencies]);
 
-        return () => {
-            map.off("mousemove", handleMouseMove);
-            map.off("mouseout", handleMouseLeave);
-        };
-    }, [map, ...dependencies]);
-
-    return { tooltipVisible, tooltipPosition, setTooltipVisible }
-
-}
\ No newline at end of file
+  return { tooltipVisible, tooltipPosition, setTooltipVisible };
+};
diff --git a/frontend/src/services/api-routes.ts b/frontend/src/services/api-routes.ts
index 0609827e..1c0f8393 100644
--- a/frontend/src/services/api-routes.ts
+++ b/frontend/src/services/api-routes.ts
@@ -23,8 +23,7 @@ export const API_ENDPOINTS = {
   GET_TRAINING_DATASETS: (searchQuery: string, ordering: string) =>
     `dataset/?search=${searchQuery}&ordering=${ordering}`,
 
-  GET_TRAINING_DATASET: (id: number) =>
-    `dataset/${id}`,
+  GET_TRAINING_DATASET: (id: number) => `dataset/${id}`,
 
   CREATE_TRAINING_DATASETS: "dataset/",
   GET_TRAINING_AREA_GPX: (aoiId: number) => `aoi/gpx/${aoiId}`,
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 37e7e6b7..c0979f15 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -70,34 +70,33 @@ sl-alert::part(base) {
 }
 
 sl-alert.danger::part(base) {
-  color: #721C24;
+  color: #721c24;
   border-color: var(--hot-fair-color-primary);
-  background-color: #F8D7DA;
+  background-color: #f8d7da;
 }
 
 sl-alert.primary::part(base) {
   color: #004085;
-  border-color: #7CBCFF;
-  background-color: #CCE5FF;
+  border-color: #7cbcff;
+  background-color: #cce5ff;
 }
 
-
 sl-alert.neutral::part(base) {
-  color: #383D41;
-  border-color: #C4C6CA;
-  background-color: #E2E3E5;
+  color: #383d41;
+  border-color: #c4c6ca;
+  background-color: #e2e3e5;
 }
 
 sl-alert.warning::part(base) {
   color: #856404;
-  border-color: #FFDC6E;
-  background-color: #FFF3CD;
+  border-color: #ffdc6e;
+  background-color: #fff3cd;
 }
 
 sl-alert.success::part(base) {
   color: #155724;
-  border-color: #9EDAAC;
-  background-color:#D4EDDA;
+  border-color: #9edaac;
+  background-color: #d4edda;
 }
 
 /* Overriding the toast design styles ends*/
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 7a447ed9..9b254b57 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -77,17 +77,15 @@ export const FAIR_VERSION = "v0.1";
  */
 export const MAX_ZOOM_LEVEL = 22;
 
-
 /**
  * The minimum zoom level to show the training area labels.
  */
 export const TRAINING_LABELS_MIN_ZOOM_LEVEL = 18;
 
-
 /**
  * Training area and labels colors in hex codes.
  */
 export const TRAINING_AREAS_AOI_FILL_COLOR = "#92B48766";
 export const TRAINING_AREAS_AOI_OUTLINE_COLOR = "#92B48766";
 export const TRAINING_AREAS_AOI_LABELS_FILL_COLOR = "#D73434";
-export const TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434";
\ No newline at end of file
+export const TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434";
diff --git a/frontend/src/utils/content.ts b/frontend/src/utils/content.ts
index dc3bb15c..a34759a9 100644
--- a/frontend/src/utils/content.ts
+++ b/frontend/src/utils/content.ts
@@ -1,5 +1,9 @@
 import { BASE_MODELS } from "@/enums";
-import { APPLICATION_ROUTES, MAX_TRAINING_AREA_SIZE, MIN_TRAINING_AREA_SIZE } from "./constants";
+import {
+  APPLICATION_ROUTES,
+  MAX_TRAINING_AREA_SIZE,
+  MIN_TRAINING_AREA_SIZE,
+} from "./constants";
 import { formatAreaInAppropriateUnit } from "./geometry-utils";
 
 export const TOAST_NOTIFICATIONS = {
@@ -11,7 +15,8 @@ export const TOAST_NOTIFICATIONS = {
   trainingDatasetCreationSuccess: "Dataset created successfully.",
   modelCreationSuccess: "Model created successfully.",
   modelUpdateSuccess: "Model updated successfully.",
-  aoiWithoutGeometryWarning: "This training area does not have a geometry. Delete it and redraw a new training area.",
+  aoiWithoutGeometryWarning:
+    "This training area does not have a geometry. Delete it and redraw a new training area.",
   aoiLabelsDownloadSuccess: "AOI labels downloaded successfully.",
   josmOpenSuccess: "Map view opened in JOSM successfully!",
   josmBBOXZoomFailed: "Failed to zoom to the bounding box in JOSM.",
@@ -43,8 +48,9 @@ export const MODEL_CREATION_CONTENT = {
         suffixes: {
           [BASE_MODELS.RAMP]: "Faster training time, with decent accuracy.",
           [BASE_MODELS.YOLOV8_V1]: "Good for major areas and more accurate.",
-          [BASE_MODELS.YOLOV8_V2]: "Our best model yet. Good for every type of area."
-        }
+          [BASE_MODELS.YOLOV8_V2]:
+            "Our best model yet. Good for every type of area.",
+        },
       },
       modelDescription: {
         label: "Model Description",
@@ -134,7 +140,8 @@ export const MODEL_CREATION_CONTENT = {
       goToModel: "go to model",
       exploreModels: "explore models",
     },
-    trainingRequestSuccess: "Your created model was succesfull, and it is now undergoing a training."
+    description:
+      "Your created model was succesfull, and it is now undergoing a training.",
   },
   trainingSettings: {
     form: {
@@ -445,8 +452,7 @@ export const APP_CONTENT = {
         },
         trainingId: {
           title: "Training Id",
-          tooltip:
-            "The training Id.",
+          tooltip: "The training Id.",
         },
 
         batchSize: {
@@ -495,7 +501,8 @@ export const APP_CONTENT = {
       },
       trainingSettings: {
         dialogHeading: "Model Training Settings",
-        description: "Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut",
+        description:
+          "Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut",
         submitButtonText: "Submit",
       },
       modelEnhancement: {
diff --git a/frontend/src/utils/geometry-utils.ts b/frontend/src/utils/geometry-utils.ts
index a3104a37..7bff6848 100644
--- a/frontend/src/utils/geometry-utils.ts
+++ b/frontend/src/utils/geometry-utils.ts
@@ -23,7 +23,6 @@ export const calculateGeoJSONArea = (
   return area(geojsonFeature);
 };
 
-
 /**
  * Format area into human readable string.
  *
@@ -36,10 +35,10 @@ export const calculateGeoJSONArea = (
 
 export const formatAreaInAppropriateUnit = (area: number): string => {
   if (area > 1000000) {
-    return roundNumber(area / 1000000, 1).toLocaleString() + 'km²'
+    return roundNumber(area / 1000000, 1).toLocaleString() + "km²";
   }
-  return roundNumber(area, 1).toLocaleString() + 'm²'
-}
+  return roundNumber(area, 1).toLocaleString() + "m²";
+};
 /**
  * Computes the bounding box of a GeoJSON Feature.
  *