diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx
index 8362f62..329d340 100644
--- a/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx
+++ b/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useControls } from 'react-zoom-pan-pinch';
 
 import { CloseRounded } from '@mui/icons-material';
 import CheckIcon from '@mui/icons-material/Check';
@@ -28,6 +29,9 @@ const AddLabelForm = ({
   const theme = useTheme();
   const { deleteLabel } = useContext(LabelsContext);
 
+  const { instance } = useControls();
+
+  const { scale } = instance.transformState;
   return (
     <Stack
       sx={{
@@ -35,69 +39,76 @@ const AddLabelForm = ({
         zIndex: 500,
         top: position.y,
         left: position.x,
-        background: 'black',
-        padding: 1,
       }}
       gap={1}
     >
-      <Box sx={{ position: 'relative' }}>
-        <IconButton
-          color="primary"
-          sx={{
-            position: 'absolute',
-            top: -26,
-            right: -8,
-            padding: '2px',
-            borderRadius: '50%',
-            color: 'white',
-            background: 'black',
-            '&:hover': {
-              background: 'black',
-              color: 'white',
-            },
-          }}
-          onClick={onClose}
-        >
-          <CloseRounded />
-        </IconButton>
-        <Box
-          display="flex"
-          alignItems="center"
-          sx={{ border: `1px solid ${theme.palette.primary.main}` }}
-        >
-          <TextField
-            autoFocus
-            size="small"
-            value={value}
-            onChange={onChange}
-            sx={{
-              background: 'white',
-              opacity: 1,
-              border: 0,
-              width: '15ch',
-            }}
-            multiline
-          />
+      <Box
+        sx={{
+          background: 'black',
+          padding: 1,
+          transformOrigin: 'top left',
+          transform: `translate(0px, 0px) scale(${1 / scale})`, // keeping the form size the same despite zooming in/out
+        }}
+      >
+        <Box sx={{ position: 'relative' }}>
           <IconButton
-            onClick={onSubmit}
+            color="primary"
             sx={{
-              background: theme.palette.primary.main,
-              borderRadius: 0,
+              position: 'absolute',
+              top: -26,
+              right: -8,
+              padding: '2px',
+              borderRadius: '50%',
+              color: 'white',
+              background: 'black',
+              '&:hover': {
+                background: 'black',
+                color: 'white',
+              },
             }}
+            onClick={onClose}
           >
-            <CheckIcon sx={{ color: 'white' }} />
+            <CloseRounded />
           </IconButton>
-          {labelToDelete && (
+          <Box
+            display="flex"
+            alignItems="center"
+            sx={{ border: `1px solid ${theme.palette.primary.main}` }}
+          >
+            <TextField
+              autoFocus
+              size="small"
+              value={value}
+              onChange={onChange}
+              sx={{
+                background: 'white',
+                opacity: 1,
+                border: 0,
+                width: '15ch',
+              }}
+              multiline
+            />
             <IconButton
-              onClick={() => {
-                deleteLabel(labelToDelete.id);
-                onClose();
+              onClick={onSubmit}
+              sx={{
+                background: theme.palette.primary.main,
+                borderRadius: 0,
               }}
-              sx={{ borderRadius: 0 }}
             >
-              <DeleteIcon color="primary" sx={{ color: 'white' }} />
+              <CheckIcon sx={{ color: 'white' }} />
             </IconButton>
-          )}
+            {labelToDelete && (
+              <IconButton
+                onClick={() => {
+                  deleteLabel(labelToDelete.id);
+                  onClose();
+                }}
+                sx={{ borderRadius: 0 }}
+              >
+                <DeleteIcon color="primary" sx={{ color: 'white' }} />
+              </IconButton>
+            )}
+          </Box>
         </Box>
       </Box>
     </Stack>
diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
index c81d592..ab44fcd 100644
--- a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
+++ b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
@@ -1,9 +1,5 @@
 import { useContext, useState } from 'react';
-import {
-  TransformComponent,
-  TransformWrapper,
-  useControls,
-} from 'react-zoom-pan-pinch';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
 import { Alert, Box, styled } from '@mui/material';
 
@@ -12,7 +8,7 @@ import { PermissionLevel } from '@graasp/sdk';
 
 import { v4 } from 'uuid';
 
-import { Label, Position } from '@/@types';
+import { Label } from '@/@types';
 import {
   ADD_LABEL_FRAME_HEIGHT,
   ADD_LABEL_FRAME_WIDTH,
@@ -40,21 +36,48 @@ const Container = styled('div')(() => ({
   left: '0px',
 }));
 
-type Props = {
-  setFormPosition: (p: Position) => void;
-  setContent: (s: string) => void;
-  setLabelToEdit: (l: Label | null) => void;
-};
-const AddLabelWithinFrame = ({
-  setFormPosition,
-  setContent,
-  setLabelToEdit,
-}: Props): JSX.Element => {
-  const { labels, isDragging, setOpenForm } = useContext(LabelsContext);
+const AddLabelWithinFrame = (): JSX.Element => {
+  const { labels, isDragging, setOpenForm, saveLabelsChanges, openForm } =
+    useContext(LabelsContext);
+
+  const { permission } = useLocalContext();
+  const [content, setContent] = useState('');
+  const [labelToEdit, setLabelToEdit] = useState<Label | null>(null);
+  const [formPosition, setFormPosition] = useState({
+    y: 0,
+    x: 0,
+  });
+
+  const handleFormInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setContent(event.target.value);
+  };
 
-  const { instance } = useControls();
+  const handleShowLabelForm = (show: boolean): void => {
+    setOpenForm(show);
+    setContent('');
+    setLabelToEdit(null);
+  };
 
-  const { scale, positionX, positionY } = instance.transformState;
+  const handleFormSubmit = (): void => {
+    if (labelToEdit) {
+      const newLabel = {
+        ...labelToEdit,
+        content,
+      };
+      saveLabelsChanges(newLabel);
+    } else {
+      const id = v4();
+      const p = {
+        y: formPosition.y,
+        x: formPosition.x,
+      };
+      const newLabel = { ...p, id, content };
+      saveLabelsChanges(newLabel);
+    }
+    handleShowLabelForm(false);
+  };
 
   const showLabelForm = (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
@@ -62,10 +85,9 @@ const AddLabelWithinFrame = ({
     if (!isDragging) {
       const { offsetX, offsetY } = event.nativeEvent;
       setFormPosition({
-        y: offsetY * scale + positionY,
-        x: offsetX * scale + positionX,
+        y: offsetY,
+        x: offsetX,
       });
-
       setOpenForm(true);
       setLabelToEdit(null);
       setContent('');
@@ -76,8 +98,8 @@ const AddLabelWithinFrame = ({
     setLabelToEdit(label);
     const { x, y, content: c } = label;
     setFormPosition({
-      y: y * scale + positionY,
-      x: x * scale + positionX,
+      y,
+      x,
     });
 
     setOpenForm(true);
@@ -91,6 +113,16 @@ const AddLabelWithinFrame = ({
         width: ADD_LABEL_FRAME_WIDTH,
       }}
     >
+      {permission === PermissionLevel.Admin && openForm && !isDragging && (
+        <AddLabelForm
+          value={content}
+          position={formPosition}
+          onChange={handleFormInputChange}
+          onSubmit={handleFormSubmit}
+          onClose={() => setOpenForm(false)}
+          labelToDelete={labelToEdit}
+        />
+      )}
       <ImageFrame />
       <Container onClick={showLabelForm} sx={{ cursor: 'crosshair' }}>
         {labels.map((ele) => (
@@ -108,64 +140,15 @@ const AddLabelWithinFrame = ({
 const AddLabelWithinFrameWrapper = (): JSX.Element => {
   const { t } = useAppTranslation();
 
-  const { isDragging, openForm, setOpenForm, saveLabelsChanges, labels } =
-    useContext(LabelsContext);
+  const { isDragging, openForm, labels } = useContext(LabelsContext);
   const disabled = isDragging || openForm;
 
-  const { permission } = useLocalContext();
-  const [content, setContent] = useState('');
-  const [labelToEdit, setLabelToEdit] = useState<Label | null>(null);
-  const [formPosition, setFormPosition] = useState({
-    y: 0,
-    x: 0,
-  });
-
-  const handleFormInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ): void => {
-    setContent(event.target.value);
-  };
-
-  const handleShowLabelForm = (show: boolean): void => {
-    setOpenForm(show);
-    setContent('');
-    setLabelToEdit(null);
-  };
-
-  const handleFormSubmit = (): void => {
-    if (labelToEdit) {
-      const newLabel = {
-        ...labelToEdit,
-        content,
-      };
-      saveLabelsChanges(newLabel);
-    } else {
-      const id = v4();
-      const p = {
-        y: formPosition.y,
-        x: formPosition.x,
-      };
-      const newLabel = { ...p, id, content };
-      saveLabelsChanges(newLabel);
-    }
-    handleShowLabelForm(false);
-  };
-
   return (
     <Box sx={{ position: 'relative' }}>
       {labels.length === 0 && (
         <Alert severity="info">{t(APP.START_ADDING_LABEL_HELPER_TEXT)}</Alert>
       )}
-      {permission === PermissionLevel.Admin && openForm && !isDragging && (
-        <AddLabelForm
-          value={content}
-          position={formPosition}
-          onChange={handleFormInputChange}
-          onSubmit={handleFormSubmit}
-          onClose={() => setOpenForm(false)}
-          labelToDelete={labelToEdit}
-        />
-      )}
+
       <TransformContainer
         doubleClick={{ disabled: true }}
         centerOnInit
@@ -182,11 +165,7 @@ const AddLabelWithinFrameWrapper = (): JSX.Element => {
             maxHeight: '100%',
           }}
         >
-          <AddLabelWithinFrame
-            setContent={setContent}
-            setFormPosition={setFormPosition}
-            setLabelToEdit={setLabelToEdit}
-          />
+          <AddLabelWithinFrame />
         </TransformComponent>
       </TransformContainer>
     </Box>