diff --git a/package-lock.json b/package-lock.json
index 073b3337..499bfb9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11246,21 +11246,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz",
-      "integrity": "sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/public/locales/en/confirmationPage.json b/public/locales/en/confirmationPage.json
index 58cad01e..92e20f47 100644
--- a/public/locales/en/confirmationPage.json
+++ b/public/locales/en/confirmationPage.json
@@ -42,6 +42,10 @@
     "nutrients": "Nutrients",
     "recordKeeping": "Record Keeping"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Add a note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "English",
diff --git a/public/locales/fr/confirmationPage.json b/public/locales/fr/confirmationPage.json
index 69dbe504..719ef282 100644
--- a/public/locales/fr/confirmationPage.json
+++ b/public/locales/fr/confirmationPage.json
@@ -42,6 +42,10 @@
     "nutrients": "Nutriments",
     "recordKeeping": "Tenue de registres"
   },
+  "notes": {
+    "sectionTitle": "Notes",
+    "placeholder": "Ajouter une note"
+  },
   "bilingualTable": {
     "tableHeaders": {
       "english": "Anglais",
diff --git a/src/app/__tests__/HomePage.test.tsx b/src/app/__tests__/HomePage.test.tsx
index 916505ed..27d8ca9d 100644
--- a/src/app/__tests__/HomePage.test.tsx
+++ b/src/app/__tests__/HomePage.test.tsx
@@ -1,6 +1,9 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react-hooks/rules-of-hooks */
+import FileUploaded from "@/classe/File";
 import useUploadedFilesStore from "@/stores/fileStore";
+import useLabelDataStore from "@/stores/labelDataStore";
+import { VERIFIED_LABEL_DATA } from "@/utils/client/constants";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useTranslation } from "react-i18next";
@@ -85,15 +88,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
-
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("should allow file uploads via drag and drop", async () => {
@@ -152,14 +155,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("should allow file upload via input and keep hover effect until delete button is clicked", async () => {
@@ -182,14 +186,15 @@ describe("HomePage Component", () => {
     fireEvent.mouseEnter(fileElement);
 
     await waitFor(() => {
-
-    // Find and click the delete button
-    const deleteButton = screen.getByTestId("delete-hello.png");
-    fireEvent.click(deleteButton);
+      // Find and click the delete button
+      const deleteButton = screen.getByTestId("delete-hello.png");
+      fireEvent.click(deleteButton);
     });
 
     // Check that the file was removed
-    expect(screen.queryByTestId("file-element-hello.png")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("file-element-hello.png"),
+    ).not.toBeInTheDocument();
   });
 
   it("The button submit should be visible when a file is uploaded", async () => {
@@ -248,7 +253,7 @@ describe("HomePage Component", () => {
     userEvent.upload(input, [file, file2]);
 
     // Check that the file was uploaded and appears in the list.
-    const fileElement =  await screen.findByTestId("file-element-hello.png");
+    const fileElement = await screen.findByTestId("file-element-hello.png");
     expect(fileElement).toBeInTheDocument();
 
     // Check that the file was uploaded and appears in the list.
@@ -303,4 +308,22 @@ describe("HomePage Component", () => {
 
     expect(mockedRouterPush).toHaveBeenCalledWith("/label-data-validation");
   });
+
+  it("should clear uploaded files and reset label data on mount", () => {
+    useUploadedFilesStore.getState().addUploadedFile(
+      FileUploaded.newFile(
+        { username: "testUser" },
+        "/uploads/test1.png",
+        new File(["dummy content"], "test1.png", {
+          type: "image/png",
+        }),
+      ),
+    );
+    useLabelDataStore.getState().setLabelData(VERIFIED_LABEL_DATA);
+    expect(useUploadedFilesStore.getState().uploadedFiles.length).toBe(1);
+    expect(useLabelDataStore.getState().labelData).not.toBeNull();
+    render(<HomePage />);
+    expect(useUploadedFilesStore.getState().uploadedFiles.length).toBe(0);
+    expect(useLabelDataStore.getState().labelData).toBe(null);
+  });
 });
diff --git a/src/app/label-data-confirmation/__tests__/ConfirmationPage.test.tsx b/src/app/label-data-confirmation/__tests__/ConfirmationPage.test.tsx
index 8b0ecbdf..20e1b737 100644
--- a/src/app/label-data-confirmation/__tests__/ConfirmationPage.test.tsx
+++ b/src/app/label-data-confirmation/__tests__/ConfirmationPage.test.tsx
@@ -1,14 +1,15 @@
 import FileUploaded from "@/classe/File";
 import useUploadedFilesStore from "@/stores/fileStore";
 import useLabelDataStore from "@/stores/labelDataStore";
-import { Quantity } from "@/types/types";
 import {
   VERIFIED_LABEL_DATA,
   VERIFIED_LABEL_DATA_WITH_ID,
 } from "@/utils/client/constants";
 import { fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
-import LabelDataConfirmationPage, { QuantityChips } from "../page";
+import LabelDataConfirmationPage from "../page";
+import { QuantityChips } from "@/components/QuantityChip";
+import { Quantity } from "@/types/types";
 
 const mockedRouterPush = jest.fn();
 jest.mock("next/navigation", () => ({
@@ -222,3 +223,43 @@ describe("QuantityChips", () => {
     expect(screen.queryByText("g")).not.toBeInTheDocument();
   });
 });
+
+describe("Notes Section Tests", () => {
+  it("should render the notes section with a textbox", () => {
+    render(<LabelDataConfirmationPage />);
+    const notesSection = screen.getByTestId("notes-section");
+    const notesTextbox = screen.getByTestId("notes-textbox");
+    expect(notesSection).toBeInTheDocument();
+    expect(notesTextbox).toBeInTheDocument();
+  });
+
+  it("should update the comment value when text is entered", () => {
+    useLabelDataStore.getState().setLabelData(VERIFIED_LABEL_DATA);
+    expect(useLabelDataStore.getState().labelData?.comment).toBe("Compliant with regulations.");
+    render(<LabelDataConfirmationPage />);
+    const notesTextbox = screen
+      .getByTestId("notes-textbox")
+      .querySelector("textarea");
+    expect(notesTextbox).toBeInTheDocument();
+    fireEvent.change(notesTextbox!, { target: { value: "New note" } });
+    expect(useLabelDataStore.getState().labelData?.comment).toBe("New note");
+    expect(notesTextbox).toHaveValue("New note");
+  });
+
+  it("should toggle the notes textbox disabled state when the checkbox is clicked", () => {
+    render(<LabelDataConfirmationPage />);
+    const notesTextbox = screen
+      .getByTestId("notes-textbox")
+      .querySelector("textarea");
+    const checkboxInput = screen
+      .getByTestId("confirmation-checkbox")
+      .querySelector("input");
+    expect(notesTextbox).toBeInTheDocument();
+    expect(checkboxInput).toBeInTheDocument();
+    expect(notesTextbox).not.toBeDisabled();
+    fireEvent.click(checkboxInput!);
+    expect(notesTextbox).toBeDisabled();
+    fireEvent.click(checkboxInput!);
+    expect(notesTextbox).not.toBeDisabled();
+  });
+});
diff --git a/src/app/label-data-confirmation/page.tsx b/src/app/label-data-confirmation/page.tsx
index b33d1077..084e65d7 100644
--- a/src/app/label-data-confirmation/page.tsx
+++ b/src/app/label-data-confirmation/page.tsx
@@ -1,18 +1,17 @@
 "use client";
 import ImageViewer from "@/components/ImageViewer";
+import LoadingButton from "@/components/LoadingButton";
+import { QuantityChips } from "@/components/QuantityChip";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
 import useLabelDataStore from "@/stores/labelDataStore";
-import { BilingualField, LabelData, Quantity } from "@/types/types";
+import { BilingualField, LabelData } from "@/types/types";
 import { processAxiosError } from "@/utils/client/apiErrors";
 import { isAllVerified } from "@/utils/client/fieldValidation";
 import useBreakpoints from "@/utils/client/useBreakpoints";
 import {
   Box,
-  Button,
   Checkbox,
-  Chip,
-  CircularProgress,
   Container,
   FormControlLabel,
   FormGroup,
@@ -25,6 +24,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  TextField,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -37,14 +37,20 @@ import { useTranslation } from "react-i18next";
 const LabelDataConfirmationPage = () => {
   const labelData = useLabelDataStore((state) => state.labelData);
   const setLabelData = useLabelDataStore((state) => state.setLabelData);
+  const resetLabelData = useLabelDataStore((state) => state.resetLabelData);
+  const setComment = useLabelDataStore((state) => state.setComment);
   const uploadedFiles = useUploadedFilesStore((state) => state.uploadedFiles);
+  const clearUploadedFiles = useUploadedFilesStore(
+    (state) => state.clearUploadedFiles,
+  );
   const imageFiles = uploadedFiles.map((file) => file.getFile());
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [editLoading, setEditLoading] = useState(false);
   const showAlert = useAlertStore((state) => state.showAlert);
   const [confirmed, setConfirmed] = useState(false);
   const { t } = useTranslation("confirmationPage");
-  const [isRetractedView, setIsRetractedView] = useState(false);
+  const [isRetractedView, setIsRetractedView] = useState(true);
 
   const getAuthHeader = () => {
     return "Basic " + btoa(`${atob(Cookies.get("token") ?? "")}:`);
@@ -52,7 +58,7 @@ const LabelDataConfirmationPage = () => {
 
   const putLabelData = (labelData: LabelData, signal: AbortSignal) => {
     const confirmedLabelData = { ...labelData, confirmed: true };
-    setLoading(true);
+    setConfirmLoading(true);
     axios
       .put(
         `/api-next/inspections/${confirmedLabelData.inspectionId}`,
@@ -64,6 +70,8 @@ const LabelDataConfirmationPage = () => {
       )
       .then(() => {
         showAlert("Label data saved successfully.", "success");
+        resetLabelData();
+        clearUploadedFiles();
         router.push("/");
       })
       .catch((error) => {
@@ -73,7 +81,7 @@ const LabelDataConfirmationPage = () => {
         );
       })
       .finally(() => {
-        setLoading(false);
+        setConfirmLoading(false);
       });
   };
 
@@ -84,7 +92,7 @@ const LabelDataConfirmationPage = () => {
       formData.append("files", file);
     });
     formData.append("labelData", JSON.stringify(labelData));
-    setLoading(true);
+    setConfirmLoading(true);
     axios
       .post("/api-next/inspections", formData, {
         headers: { Authorization: getAuthHeader() },
@@ -94,7 +102,10 @@ const LabelDataConfirmationPage = () => {
         if (!response.data.inspectionId) {
           throw new Error("ID missing in initial label data saving response.");
         }
-        const _labelData = { ...labelData, inspectionId: response.data.inspectionId };
+        const _labelData = {
+          ...labelData,
+          inspectionId: response.data.inspectionId,
+        };
         setLabelData(_labelData);
         putLabelData(_labelData, signal);
       })
@@ -105,11 +116,12 @@ const LabelDataConfirmationPage = () => {
         );
       })
       .finally(() => {
-        setLoading(false);
+        setConfirmLoading(false);
       });
   };
 
   const handleEditClick = () => {
+    setEditLoading(true);
     if (labelData?.inspectionId) {
       router.push(`/label-data-validation/${labelData.inspectionId}`);
     } else {
@@ -157,10 +169,6 @@ const LabelDataConfirmationPage = () => {
     }
   }, [imageFiles, labelData, router, showAlert]);
 
-  useEffect(() => {
-    console.debug("Label data:", labelData);
-  }, [labelData, confirmed]);
-
   const { isDownXs, isBetweenXsSm, isBetweenSmMd, isBetweenMdLg } =
     useBreakpoints();
   const isLgOrBelow =
@@ -168,7 +176,7 @@ const LabelDataConfirmationPage = () => {
 
   return (
     <Container
-      className="flex flex-col max-w-[1920px] bg-gray-100 text-black h-[calc(100vh-65px)]"
+      className="flex flex-col max-w-[1920px] bg-gray-100 text-black h-min-[calc(100vh-65px)]"
       maxWidth={false}
       data-testid="label-data-validator-container"
     >
@@ -176,7 +184,7 @@ const LabelDataConfirmationPage = () => {
         className="flex flex-col lg:flex-row gap-4 my-4 lg:h-[85vh] lg:min-h-[500px] "
         data-testid="main-content"
       >
-        {!isRetractedView && (
+        {isRetractedView && (
           <Box
             className="flex h-[500px] md:h-[720px] lg:size-full justify-center min-w-0"
             data-testid="image-viewer-container"
@@ -185,7 +193,7 @@ const LabelDataConfirmationPage = () => {
           </Box>
         )}
         <Box
-          className="flex flex-col size-full min-w-0 mb-0  pb-6 text-center bg-white border border-black"
+          className="flex flex-col size-full min-w-0 mb-0 pb-6 text-center bg-white border border-black"
           sx={{ minWidth: "500px" }}
         >
           <IconButton
@@ -194,7 +202,7 @@ const LabelDataConfirmationPage = () => {
             data-testid="retract-button"
           >
             <SvgIcon aria-hidden>
-              {isRetractedView ? (
+              {!isRetractedView ? (
                 isLgOrBelow ? (
                   <Tooltip title={t("expandRetractButton.retractButton")}>
                     <image
@@ -219,714 +227,411 @@ const LabelDataConfirmationPage = () => {
               )}
             </SvgIcon>
           </IconButton>
-          {!isRetractedView && (
-            <Box className="flex flex-col size-full min-w-0 p-4 pt-0 border-t-0 text-center gap-4 content-end ">
-              <Box className="flex flex-col gap-4 p-4">
-                {/* Title */}
+
+          <Box className="flex flex-col size-full min-w-0 p-4 pt-0 text-center gap-4 content-end ">
+            <Box className="flex flex-col">
+              {/* Title */}
+              <Typography
+                variant="h5"
+                className="text-center !font-bold"
+                data-testid="page-title"
+              >
+                {t("pageTitle")}
+              </Typography>
+            </Box>
+
+            {/* Label section */}
+            <div className="grid gap-4 flex-1 border overflow-y-auto sm:px-8 py-4 grid-cols-1">
+              {/* Base Information */}
+              <Box data-testid="base-information-section">
                 <Typography
-                  variant="h4"
-                  className="text-center !font-bold"
-                  data-testid="page-title"
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
                 >
-                  {t("pageTitle")}
+                  {t("baseInformation.sectionTitle")}
                 </Typography>
+                <TableContainer data-testid="base-information-table-container">
+                  <Table size="small" data-testid="base-information-table">
+                    <TableHead>
+                      <TableRow className="bg-gray-100">
+                        <TableCell className="min-w-60">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.name")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-48">
+                          <Typography className="!font-bold">
+                            {t(
+                              "baseInformation.tableHeaders.registrationNumber",
+                            )}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-32">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.lotNumber")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-32">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.npk")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-32">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.weight")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-32">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.density")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-32">
+                          <Typography className="!font-bold">
+                            {t("baseInformation.tableHeaders.volume")}
+                          </Typography>
+                        </TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      <TableRow data-testid="base-information-data-row">
+                        <TableCell data-testid="base-information-name">
+                          <Typography>
+                            {labelData?.baseInformation.name.value}
+                          </Typography>
+                        </TableCell>
+                        <TableCell data-testid="base-information-registration-number">
+                          <Typography>
+                            {
+                              labelData?.baseInformation.registrationNumber
+                                .value
+                            }
+                          </Typography>
+                        </TableCell>
+                        <TableCell data-testid="base-information-lot-number">
+                          <Typography>
+                            {labelData?.baseInformation.lotNumber.value}
+                          </Typography>
+                        </TableCell>
+                        <TableCell data-testid="base-information-npk">
+                          <Typography>
+                            {labelData?.baseInformation.npk.value}
+                          </Typography>
+                        </TableCell>
+                        <TableCell data-testid="base-information-weight">
+                          <QuantityChips
+                            quantities={
+                              labelData?.baseInformation.weight.quantities
+                            }
+                          />
+                        </TableCell>
+                        <TableCell data-testid="base-information-density">
+                          <QuantityChips
+                            quantities={
+                              labelData?.baseInformation.density.quantities
+                            }
+                          />
+                        </TableCell>
+                        <TableCell data-testid="base-information-volume">
+                          <QuantityChips
+                            quantities={
+                              labelData?.baseInformation.volume.quantities
+                            }
+                          />
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </TableContainer>
               </Box>
 
-              <Box
-                className="flex flex-col gap-4 flex-1 border overflow-y-auto sm:px-8 py-4"
-                data-testid="form-container"
-              >
-                {/* Base Information */}
-                <Box data-testid="base-information-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("baseInformation.sectionTitle")}
-                  </Typography>
-                  <TableContainer data-testid="base-information-table-container">
-                    <Table size="small" data-testid="base-information-table">
-                      <TableHead>
-                        <TableRow className="bg-gray-100">
-                          <TableCell className="min-w-60">
-                            <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.name")}
-                            </Typography>
+              {/* Organizations Table */}
+              <Box data-testid="organizations-section">
+                <Typography
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
+                >
+                  {t("organizations.sectionTitle")}
+                </Typography>
+                <TableContainer data-testid="organizations-table-container">
+                  <Table size="small" data-testid="organizations-table">
+                    <TableHead>
+                      <TableRow className="bg-gray-100">
+                        <TableCell className="min-w-60">
+                          <Typography className="!font-bold">
+                            {t("organizations.tableHeaders.name")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-60">
+                          <Typography className="!font-bold">
+                            {t("organizations.tableHeaders.address")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography className="!font-bold">
+                            {t("organizations.tableHeaders.website")}
+                          </Typography>
+                        </TableCell>
+                        <TableCell className="min-w-44">
+                          <Typography className="!font-bold">
+                            {t("organizations.tableHeaders.phoneNumber")}
+                          </Typography>
+                        </TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {labelData?.organizations?.map((org, index) => (
+                        <TableRow
+                          key={index}
+                          data-testid={`organizations-row-${index}`}
+                        >
+                          <TableCell
+                            data-testid={`organizations-row-${index}-name`}
+                          >
+                            <Typography>{org.name.value}</Typography>
                           </TableCell>
-                          <TableCell className="min-w-48">
-                            <Typography className="!font-bold">
-                              {t(
-                                "baseInformation.tableHeaders.registrationNumber",
-                              )}
-                            </Typography>
+                          <TableCell
+                            data-testid={`organizations-row-${index}-address`}
+                          >
+                            <Typography>{org.address.value}</Typography>
                           </TableCell>
-                          <TableCell className="min-w-32">
-                            <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.lotNumber")}
+                          <TableCell
+                            data-testid={`organizations-row-${index}-website`}
+                          >
+                            <Typography>
+                              <Link
+                                href={`http://${org.website.value}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                {org.website.value}
+                              </Link>
                             </Typography>
                           </TableCell>
-                          <TableCell className="min-w-32">
-                            <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.npk")}
+                          <TableCell
+                            data-testid={`organizations-row-${index}-phone-number`}
+                          >
+                            <Typography>
+                              <Link href={`tel:${org.phoneNumber.value}`}>
+                                {org.phoneNumber.value}
+                              </Link>
                             </Typography>
                           </TableCell>
-                          <TableCell className="min-w-32">
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Box>
+
+              {/* Cautions */}
+              <Box data-testid="cautions-section">
+                <Typography
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
+                >
+                  {t("cautions.sectionTitle")}
+                </Typography>
+                <BilingualTable
+                  data={labelData?.cautions ?? []}
+                  data-testid="cautions-bilingual-table"
+                />
+              </Box>
+
+              {/* Instructions */}
+              <Box data-testid="instructions-section">
+                <Typography
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
+                >
+                  {t("instructions.sectionTitle")}
+                </Typography>
+                <BilingualTable
+                  data={labelData?.instructions ?? []}
+                  data-testid="instructions-bilingual-table"
+                />
+              </Box>
+
+              {/* Guaranteed Analysis */}
+              <Box data-testid="guaranteed-analysis-section">
+                <Typography
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
+                >
+                  {t("guaranteedAnalysis.sectionTitle")}
+                </Typography>
+
+                {/* Title Section */}
+                <Box
+                  className="mb-4"
+                  data-testid="guaranteed-analysis-title-section"
+                >
+                  <Typography className="!font-bold mb-2 text-left">
+                    {t("guaranteedAnalysis.title")}
+                  </Typography>
+                  <TableContainer data-testid="guaranteed-analysis-title-table-container">
+                    <Table
+                      size="small"
+                      data-testid="guaranteed-analysis-title-table"
+                    >
+                      <TableHead>
+                        <TableRow className="bg-gray-100">
+                          <TableCell>
                             <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.weight")}
+                              {t("guaranteedAnalysis.tableHeaders.english")}
                             </Typography>
                           </TableCell>
-                          <TableCell className="min-w-32">
+                          <TableCell>
                             <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.density")}
+                              {t("guaranteedAnalysis.tableHeaders.french")}
                             </Typography>
                           </TableCell>
-                          <TableCell className="min-w-32">
+                          <TableCell>
                             <Typography className="!font-bold">
-                              {t("baseInformation.tableHeaders.volume")}
+                              {t("guaranteedAnalysis.tableHeaders.isMinimal")}
                             </Typography>
                           </TableCell>
                         </TableRow>
                       </TableHead>
                       <TableBody>
-                        <TableRow data-testid="base-information-data-row">
-                          <TableCell data-testid="base-information-name">
-                            <Typography>
-                              {labelData?.baseInformation.name.value}
-                            </Typography>
-                          </TableCell>
-                          <TableCell data-testid="base-information-registration-number">
+                        <TableRow data-testid="guaranteed-analysis-title-row">
+                          <TableCell data-testid="guaranteed-analysis-title-english">
                             <Typography>
-                              {
-                                labelData?.baseInformation.registrationNumber
-                                  .value
-                              }
+                              {labelData?.guaranteedAnalysis.titleEn.value}
                             </Typography>
                           </TableCell>
-                          <TableCell data-testid="base-information-lot-number">
+                          <TableCell data-testid="guaranteed-analysis-title-french">
                             <Typography>
-                              {labelData?.baseInformation.lotNumber.value}
+                              {labelData?.guaranteedAnalysis.titleFr.value}
                             </Typography>
                           </TableCell>
-                          <TableCell data-testid="base-information-npk">
+                          <TableCell data-testid="guaranteed-analysis-is-minimal">
                             <Typography>
-                              {labelData?.baseInformation.npk.value}
+                              {labelData?.guaranteedAnalysis.isMinimal.value
+                                ? t("yes")
+                                : t("no")}
                             </Typography>
                           </TableCell>
-                          <TableCell data-testid="base-information-weight">
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.weight.quantities
-                              }
-                            />
-                          </TableCell>
-                          <TableCell data-testid="base-information-density">
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.density.quantities
-                              }
-                            />
-                          </TableCell>
-                          <TableCell data-testid="base-information-volume">
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.volume.quantities
-                              }
-                            />
-                          </TableCell>
                         </TableRow>
                       </TableBody>
                     </Table>
                   </TableContainer>
                 </Box>
 
-                {/* Organizations Table */}
-                <Box data-testid="organizations-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("organizations.sectionTitle")}
-                  </Typography>
-                  <TableContainer data-testid="organizations-table-container">
-                    <Table size="small" data-testid="organizations-table">
-                      <TableHead>
-                        <TableRow className="bg-gray-100">
-                          <TableCell className="min-w-60">
-                            <Typography className="!font-bold">
-                              {t("organizations.tableHeaders.name")}
-                            </Typography>
-                          </TableCell>
-                          <TableCell className="min-w-60">
-                            <Typography className="!font-bold">
-                              {t("organizations.tableHeaders.address")}
-                            </Typography>
-                          </TableCell>
-                          <TableCell>
-                            <Typography className="!font-bold">
-                              {t("organizations.tableHeaders.website")}
-                            </Typography>
-                          </TableCell>
-                          <TableCell className="min-w-44">
-                            <Typography className="!font-bold">
-                              {t("organizations.tableHeaders.phoneNumber")}
-                            </Typography>
-                          </TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {labelData?.organizations?.map((org, index) => (
-                          <TableRow
-                            key={index}
-                            data-testid={`organizations-row-${index}`}
-                          >
-                            <TableCell
-                              data-testid={`organizations-row-${index}-name`}
-                            >
-                              <Typography>{org.name.value}</Typography>
-                            </TableCell>
-                            <TableCell
-                              data-testid={`organizations-row-${index}-address`}
-                            >
-                              <Typography>{org.address.value}</Typography>
-                            </TableCell>
-                            <TableCell
-                              data-testid={`organizations-row-${index}-website`}
-                            >
-                              <Typography>
-                                <Link
-                                  href={`http://${org.website.value}`}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                >
-                                  {org.website.value}
-                                </Link>
-                              </Typography>
-                            </TableCell>
-                            <TableCell
-                              data-testid={`organizations-row-${index}-phone-number`}
-                            >
-                              <Typography>
-                                <Link href={`tel:${org.phoneNumber.value}`}>
-                                  {org.phoneNumber.value}
-                                </Link>
-                              </Typography>
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                </Box>
-
-                {/* Cautions */}
-                <Box data-testid="cautions-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("cautions.sectionTitle")}
+                {/* Nutrients Section */}
+                <Box data-testid="guaranteed-analysis-nutrients-section">
+                  <Typography className="!font-bold mb-2 text-left">
+                    {t("guaranteedAnalysis.nutrients")}
                   </Typography>
                   <BilingualTable
-                    data={labelData?.cautions ?? []}
-                    data-testid="cautions-bilingual-table"
+                    data={labelData?.guaranteedAnalysis.nutrients ?? []}
+                    data-testid="guaranteed-analysis-nutrients-table"
                   />
                 </Box>
+              </Box>
 
-                {/* Instructions */}
-                <Box data-testid="instructions-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("instructions.sectionTitle")}
-                  </Typography>
-                  <BilingualTable
-                    data={labelData?.instructions ?? []}
-                    data-testid="instructions-bilingual-table"
-                  />
-                </Box>
-
-                {/* Guaranteed Analysis */}
-                <Box data-testid="guaranteed-analysis-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("guaranteedAnalysis.sectionTitle")}
-                  </Typography>
-
-                  {/* Title Section */}
-                  <Box
-                    className="mb-4"
-                    data-testid="guaranteed-analysis-title-section"
-                  >
-                    <Typography className="!font-bold mb-2 text-left">
-                      {t("guaranteedAnalysis.title")}
-                    </Typography>
-                    <TableContainer data-testid="guaranteed-analysis-title-table-container">
-                      <Table
-                        size="small"
-                        data-testid="guaranteed-analysis-title-table"
-                      >
-                        <TableHead>
-                          <TableRow className="bg-gray-100">
-                            <TableCell>
-                              <Typography className="!font-bold">
-                                {t("guaranteedAnalysis.tableHeaders.english")}
-                              </Typography>
-                            </TableCell>
-                            <TableCell>
-                              <Typography className="!font-bold">
-                                {t("guaranteedAnalysis.tableHeaders.french")}
-                              </Typography>
-                            </TableCell>
-                            <TableCell>
-                              <Typography className="!font-bold">
-                                {t("guaranteedAnalysis.tableHeaders.isMinimal")}
-                              </Typography>
-                            </TableCell>
-                          </TableRow>
-                        </TableHead>
-                        <TableBody>
-                          <TableRow data-testid="guaranteed-analysis-title-row">
-                            <TableCell data-testid="guaranteed-analysis-title-english">
-                              <Typography>
-                                {labelData?.guaranteedAnalysis.titleEn.value}
-                              </Typography>
-                            </TableCell>
-                            <TableCell data-testid="guaranteed-analysis-title-french">
-                              <Typography>
-                                {labelData?.guaranteedAnalysis.titleFr.value}
-                              </Typography>
-                            </TableCell>
-                            <TableCell data-testid="guaranteed-analysis-is-minimal">
-                              <Typography>
-                                {labelData?.guaranteedAnalysis.isMinimal.value
-                                  ? t("yes")
-                                  : t("no")}
-                              </Typography>
-                            </TableCell>
-                          </TableRow>
-                        </TableBody>
-                      </Table>
-                    </TableContainer>
-                  </Box>
-
-                  {/* Nutrients Section */}
-                  <Box data-testid="guaranteed-analysis-nutrients-section">
+              {/* Ingredients */}
+              <Box data-testid="ingredients-section">
+                <Typography
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
+                >
+                  {t("ingredients.sectionTitle")}
+                </Typography>
+                {!labelData?.ingredients?.recordKeeping?.value ? (
+                  <Box>
                     <Typography className="!font-bold mb-2 text-left">
-                      {t("guaranteedAnalysis.nutrients")}
+                      {t("ingredients.nutrients")}
                     </Typography>
                     <BilingualTable
-                      data={labelData?.guaranteedAnalysis.nutrients ?? []}
-                      data-testid="guaranteed-analysis-nutrients-table"
+                      data={labelData?.ingredients.nutrients ?? []}
+                      data-testid="ingredients-nutrients-table"
                     />
                   </Box>
-                </Box>
-
-                {/* Ingredients */}
-                <Box data-testid="ingredients-section">
-                  <Typography
-                    variant="h5"
-                    className="text-left !font-bold"
-                    gutterBottom
-                  >
-                    {t("ingredients.sectionTitle")}
+                ) : (
+                  <Typography className="!font-bold mb-2 text-left">
+                    {t("ingredients.recordKeeping")}
                   </Typography>
-                  {!labelData?.ingredients?.recordKeeping?.value ? (
-                    <Box>
-                      <Typography className="!font-bold mb-2 text-left">
-                        {t("ingredients.nutrients")}
-                      </Typography>
-                      <BilingualTable
-                        data={labelData?.ingredients.nutrients ?? []}
-                        data-testid="ingredients-nutrients-table"
-                      />
-                    </Box>
-                  ) : (
-                    <Typography className="!font-bold mb-2 text-left">
-                      {t("ingredients.recordKeeping")}
-                    </Typography>
-                  )}
-                </Box>
+                )}
               </Box>
 
-              {/* Confirmation Section */}
-              <Box
-                className="p-4 flex flex-col gap-1 text-center"
-                data-testid="confirmation-section"
-              >
-                <Typography>{t("confirmationSection.prompt")}</Typography>
-                {/* Acknowledgment Checkbox */}
-                <FormGroup className="flex items-center justify-center gap-2 w-[100%]">
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={confirmed}
-                        onChange={(event) => setConfirmed(event.target.checked)}
-                        disabled={loading}
-                        data-testid="confirmation-checkbox"
-                      />
-                    }
-                    label={
-                      <Typography variant="body2" className="!font-bold">
-                        {t("confirmationSection.acknowledgment")}
-                      </Typography>
-                    }
-                  />
-                </FormGroup>
-
-                {/* Confirm and Edit Buttons */}
-                <Box className="flex justify-center gap-4 pt-2">
-                  <Button
-                    variant="contained"
-                    color="success"
-                    className="px-4 py-2 font-bold hover:bg-green-700"
-                    disabled={!confirmed || loading}
-                    onClick={handleConfirmClick}
-                    data-testid="confirm-button"
-                  >
-                    {loading ? (
-                      <>
-                        <CircularProgress
-                          size={16}
-                          color="inherit"
-                          data-testid="loading-spinner"
-                        />
-                        <span className="ml-2">
-                          {t("confirmationSection.confirmingButton")}
-                        </span>
-                      </>
-                    ) : (
-                      <span>{t("confirmationSection.confirmButton")}</span>
-                    )}
-                  </Button>
-                  <Button
-                    variant="contained"
-                    className="px-4 py-2 bg-gray-300 text-black font-bold hover:bg-gray-400"
-                    disabled={loading}
-                    onClick={handleEditClick}
-                    data-testid="edit-button"
-                  >
-                    <span>{t("confirmationSection.editButton")}</span>
-                  </Button>
-                </Box>
-              </Box>
-            </Box>
-          )}
-          {isRetractedView && (
-            <>
-              <Box className="flex flex-col pb-2 ">
-                {/* Title */}
+              {/* Notes */}
+              <Box data-testid="notes-section">
                 <Typography
-                  variant="h4"
-                  className="text-center !font-bold"
-                  data-testid="page-title"
+                  variant="h6"
+                  className="text-left !font-bold"
+                  gutterBottom
                 >
-                  {t("pageTitle")}
+                  {t("notes.sectionTitle")}
                 </Typography>
+                <TextField
+                  multiline
+                  rows={3}
+                  variant="outlined"
+                  fullWidth
+                  placeholder={t("notes.placeholder")}
+                  data-testid="notes-textbox"
+                  value={labelData?.comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  disabled={confirmed}
+                />
               </Box>
-              <Box className="flex flex-row justify-between size-full min-w-0 p-x-4 pb-1 pt-0 border-t-0 text-left gap-4 content-end overflow-auto ">
-                {/* Left Column: Base Information */}
-                <Box className="flex flex-col gap-4 flex-1 border-r overflow-y-auto sm:px-8 py-4 max-w-[50%] h-fit min-w-[250px]">
-                  {/* Title */}
-                  <Typography variant="h5" className="!font-bold mb-2">
-                    {t("baseInformation.sectionTitle")}
-                  </Typography>
-                  <TableContainer>
-                    <Table size="small">
-                      <TableBody>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.name")}
-                          </TableCell>
-                          <TableCell>
-                            {labelData?.baseInformation.name.value}
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t(
-                              "baseInformation.tableHeaders.registrationNumber",
-                            )}
-                          </TableCell>
-                          <TableCell>
-                            {
-                              labelData?.baseInformation.registrationNumber
-                                .value
-                            }
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.lotNumber")}
-                          </TableCell>
-                          <TableCell>
-                            {labelData?.baseInformation.lotNumber.value}
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.npk")}
-                          </TableCell>
-                          <TableCell>
-                            {labelData?.baseInformation.npk.value}
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.weight")}
-                          </TableCell>
-                          <TableCell>
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.weight.quantities
-                              }
-                            />
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.density")}
-                          </TableCell>
-                          <TableCell>
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.density.quantities
-                              }
-                            />
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-bold">
-                            {t("baseInformation.tableHeaders.volume")}
-                          </TableCell>
-                          <TableCell>
-                            <QuantityChips
-                              quantities={
-                                labelData?.baseInformation.volume.quantities
-                              }
-                            />
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-
-                  {/* Cautions */}
-                  <Box>
-                    <Typography variant="h5" className="!font-bold mb-2">
-                      {t("cautions.sectionTitle")}
-                    </Typography>
-                    <BilingualTable data={labelData?.cautions ?? []} />
-                  </Box>
-
-                  {/* Instructions */}
-                  <Box>
-                    <Typography variant="h5" className="!font-bold mb-2">
-                      {t("instructions.sectionTitle")}
-                    </Typography>
-                    <BilingualTable data={labelData?.instructions ?? []} />
-                  </Box>
-
-                  {/* Guaranteed Analysis */}
-                  <Box data-testid="guaranteed-analysis-section">
-                    <Typography
-                      variant="h5"
-                      className="text-left !font-bold mb-4"
-                      gutterBottom
-                    >
-                      {t("guaranteedAnalysis.sectionTitle")}
-                    </Typography>
-
-                    {/* Nutrients Section with Clear Headers */}
-                    <Box data-testid="guaranteed-analysis-nutrients-section">
-                      <Typography className="!font-bold mb-2 text-left">
-                        {t("guaranteedAnalysis.nutrients")}
-                      </Typography>
-                      <TableContainer>
-                        <Table
-                          size="small"
-                          data-testid="guaranteed-analysis-nutrients-table"
-                        >
-                          <TableHead>
-                            <TableRow className="bg-gray-100">
-                              <TableCell>
-                                <Typography className="!font-bold">
-                                  {t("bilingualTable.tableHeaders.english")}
-                                </Typography>
-                              </TableCell>
-                              <TableCell>
-                                <Typography className="!font-bold">
-                                  {t("bilingualTable.tableHeaders.french")}
-                                </Typography>
-                              </TableCell>
-                              <TableCell>
-                                <Typography className="!font-bold">
-                                  {t("bilingualTable.tableHeaders.value")}
-                                </Typography>
-                              </TableCell>
-                              <TableCell>
-                                <Typography className="!font-bold">
-                                  {t("bilingualTable.tableHeaders.unit")}
-                                </Typography>
-                              </TableCell>
-                            </TableRow>
-                          </TableHead>
-                          <TableBody>
-                            {labelData?.guaranteedAnalysis.nutrients.map(
-                              (nutrient, index) => (
-                                <TableRow
-                                  key={index}
-                                  data-testid={`guaranteed-nutrient-row-${index}`}
-                                >
-                                  <TableCell>
-                                    <Typography>{nutrient.en}</Typography>
-                                  </TableCell>
-                                  <TableCell>
-                                    <Typography>{nutrient.fr}</Typography>
-                                  </TableCell>
-                                  <TableCell>
-                                    <Typography>{nutrient.value}</Typography>
-                                  </TableCell>
-                                  <TableCell>
-                                    <Typography>{nutrient.unit}</Typography>
-                                  </TableCell>
-                                </TableRow>
-                              ),
-                            )}
-                          </TableBody>
-                        </Table>
-                      </TableContainer>
-                    </Box>
-                  </Box>
-                </Box>
-
-                {/* Right Column: Organizations */}
-                <Box className="flex flex-col gap-4 flex-1 sm:px-8 py-4 max-w-[50%] h-fit min-w-[250px]">
-                  {labelData?.organizations?.map((org, index) => (
-                    <Box key={index} className="mb-4">
-                      <Typography variant="h5" className="!font-bold mb-2">
-                        {t("organizations.sectionTitle") + " " + (index + 1)}
-                      </Typography>
-                      <TableContainer>
-                        <Table size="small">
-                          <TableBody>
-                            <TableRow>
-                              <TableCell className="font-bold">
-                                {t("organizations.tableHeaders.name")}
-                              </TableCell>
-                              <TableCell>{org.name.value}</TableCell>
-                            </TableRow>
-                            <TableRow>
-                              <TableCell className="font-bold">
-                                {t("organizations.tableHeaders.address")}
-                              </TableCell>
-                              <TableCell>{org.address.value}</TableCell>
-                            </TableRow>
-                            <TableRow>
-                              <TableCell className="font-bold">
-                                {t("organizations.tableHeaders.website")}
-                              </TableCell>
-                              <TableCell>
-                                <Link
-                                  href={`http://${org.website.value}`}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                >
-                                  {org.website.value}
-                                </Link>
-                              </TableCell>
-                            </TableRow>
-                            <TableRow>
-                              <TableCell className="font-bold">
-                                {t("organizations.tableHeaders.phoneNumber")}
-                              </TableCell>
-                              <TableCell>
-                                <Link href={`tel:${org.phoneNumber.value}`}>
-                                  {org.phoneNumber.value}
-                                </Link>
-                              </TableCell>
-                            </TableRow>
-                          </TableBody>
-                        </Table>
-                      </TableContainer>
-                    </Box>
-                  ))}
-                </Box>
-              </Box>
-              <Box
-                className="flex justify-center gap-4 pr-6"
-                sx={{ marginBottom: "-10px" }}
-              >
-                <Box
-                  className="flex flex-col gap-1 items-center"
-                  data-testid="confirmation-section"
-                >
-                  <Typography>{t("confirmationSection.prompt")}</Typography>
-                  {/* Acknowledgment Checkbox */}
-                  <FormGroup className="flex items-center justify-center gap-2 w-[100%]">
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          checked={confirmed}
-                          onChange={(event) =>
-                            setConfirmed(event.target.checked)
-                          }
-                          disabled={loading}
-                          data-testid="confirmation-checkbox"
-                        />
-                      }
-                      label={
-                        <Typography variant="body2" className="!font-bold">
-                          {t("confirmationSection.acknowledgment")}
-                        </Typography>
-                      }
+            </div>
+
+            {/* Confirmation Section */}
+            <Box
+              className="p-4 flex flex-col gap-1 text-center"
+              data-testid="confirmation-section"
+            >
+              <Typography>{t("confirmationSection.prompt")}</Typography>
+              {/* Acknowledgment Checkbox */}
+              <FormGroup className="flex items-center justify-center gap-2 w-[100%]">
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={confirmed}
+                      onChange={(event) => setConfirmed(event.target.checked)}
+                      disabled={confirmLoading}
+                      data-testid="confirmation-checkbox"
                     />
-                  </FormGroup>
-                  <Box className="flex justify-center gap-4 pt-2">
-                    <Button
-                      variant="contained"
-                      color="success"
-                      className="px-4 py-2 font-bold hover:bg-green-700"
-                      disabled={!confirmed || loading}
-                      onClick={handleConfirmClick}
-                      data-testid="confirm-button"
-                    >
-                      {loading ? (
-                        <>
-                          <CircularProgress
-                            size={16}
-                            color="inherit"
-                            data-testid="loading-spinner"
-                          />
-                          <span className="ml-2">
-                            {t("confirmationSection.confirmingButton")}
-                          </span>
-                        </>
-                      ) : (
-                        <span>{t("confirmationSection.confirmButton")}</span>
-                      )}
-                    </Button>
-                    <Button
-                      variant="contained"
-                      className="px-4 py-2 bg-gray-300 text-black font-bold hover:bg-gray-400"
-                      disabled={loading}
-                      onClick={handleEditClick}
-                      data-testid="edit-button"
-                    >
-                      <span>{t("confirmationSection.editButton")}</span>
-                    </Button>
-                  </Box>
-                </Box>
+                  }
+                  label={
+                    <Typography variant="body2" className="!font-bold">
+                      {t("confirmationSection.acknowledgment")}
+                    </Typography>
+                  }
+                />
+              </FormGroup>
+
+              {/* Confirm and Edit Buttons */}
+              <Box className="flex justify-center gap-4 pt-2">
+                <LoadingButton
+                  variant="contained"
+                  className="px-4 py-2 bg-gray-300 text-black font-bold hover:bg-gray-400"
+                  onClick={handleEditClick}
+                  data-testid="edit-button"
+                  loading={editLoading}
+                  text={t("confirmationSection.editButton")}
+                />
+                <LoadingButton
+                  className="px-4 py-2 font-bold hover:bg-green-700"
+                  variant="contained"
+                  color="success"
+                  disabled={!confirmed}
+                  onClick={handleConfirmClick}
+                  data-testid="confirm-button"
+                  loading={confirmLoading}
+                  text={t("confirmationSection.confirmButton")}
+                />
               </Box>
-            </>
-          )}
+            </Box>
+          </Box>
         </Box>
       </Box>
     </Container>
@@ -935,31 +640,6 @@ const LabelDataConfirmationPage = () => {
 
 export default LabelDataConfirmationPage;
 
-export interface QuantityChipsProps extends React.ComponentProps<typeof Box> {
-  quantities: Quantity[] | undefined;
-}
-
-export const QuantityChips = React.forwardRef<
-  HTMLDivElement,
-  QuantityChipsProps
->(({ quantities, ...rest }, ref) => {
-  return (
-    <Box
-      {...rest}
-      ref={ref}
-      className={`flex flex-wrap gap-1 ${rest.className || ""}`}
-    >
-      {quantities
-        ?.filter((q) => q.value)
-        .map((q, i) => (
-          <Chip key={i} label={`${q.value} ${q.unit}`} variant="outlined" />
-        ))}
-    </Box>
-  );
-});
-
-QuantityChips.displayName = "QuantityChips";
-
 interface BilingualTableProps {
   data: BilingualField[];
 }
diff --git a/src/app/label-data-validation/page.tsx b/src/app/label-data-validation/page.tsx
index d14ea730..d30ef25c 100644
--- a/src/app/label-data-validation/page.tsx
+++ b/src/app/label-data-validation/page.tsx
@@ -20,7 +20,7 @@ function LabelDataValidationPage() {
 
   useEffect(() => {
     if (uploadedFiles.length === 0) {
-      showAlert("No files uploaded.", "error");
+      showAlert("No files uploaded.", "warning");
       router.push("/");
       return;
     }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 10f53823..3f99419d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,23 +1,41 @@
 "use client";
 import Dropzone from "@/components/Dropzone";
+import LoadingButton from "@/components/LoadingButton";
 import FileList from "@/components/FileList";
 import useUploadedFilesStore from "@/stores/fileStore";
+import useLabelDataStore from "@/stores/labelDataStore";
 import type { DropzoneState } from "@/types/types";
-import { Box, Button, Grid2, Tooltip } from "@mui/material";
+import { Box, Grid2, Tooltip } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { Suspense, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 function HomePage() {
   const { t } = useTranslation("homePage");
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
 
   const [dropzoneState, setDropzoneState] = useState<DropzoneState>({
     visible: false,
     imageUrl: null,
     fillPercentage: 0,
   });
-  const { uploadedFiles } = useUploadedFilesStore();
+
+  const uploadedFiles = useUploadedFilesStore((state) => state.uploadedFiles);
+  const clearUploadedFiles = useUploadedFilesStore(
+    (state) => state.clearUploadedFiles,
+  );
+  const resetLabelData = useLabelDataStore((state) => state.resetLabelData);
+
+  useEffect(() => {
+    clearUploadedFiles();
+    resetLabelData();
+  }, [clearUploadedFiles, resetLabelData]);
+
+  const handleSubmission = () => {
+    setLoading(true);
+    router.push("/label-data-validation");
+  };
 
   return (
     <Suspense fallback="loading">
@@ -61,17 +79,17 @@ function HomePage() {
               className="w-[90%] max-w-full min-w-[133.44px]"
             >
               <span className="flex justify-center w-full">
-                <Button
-                  className={`xs:w-[90%] md:w-[100%] min-w-[133.44px] max-h-[40px] md:max-w-[470px]`} // do not modify md:max-w-[470px] so that the button keeps the same width as the FileList
+                <LoadingButton
+                  className="xs:w-[90%] md:w-[100%] min-w-[133.44px] max-h-[40px] md:max-w-[470px]" // do not modify md:max-w-[470px] so that the button keeps the same width as the FileList
                   data-testid="submit-button"
                   variant="contained"
                   color="secondary"
                   disabled={uploadedFiles.length === 0}
                   fullWidth
-                  onClick={() => router.push("/label-data-validation")}
-                >
-                  {t("submitButton")}
-                </Button>
+                  onClick={handleSubmission}
+                  loading={loading}
+                  text={t("submitButton")}
+                />
               </span>
             </Tooltip>
           </Grid2>
diff --git a/src/components/AuthComponents/LoginModal.tsx b/src/components/AuthComponents/LoginModal.tsx
index 4384179e..8d2a89b9 100644
--- a/src/components/AuthComponents/LoginModal.tsx
+++ b/src/components/AuthComponents/LoginModal.tsx
@@ -1,10 +1,11 @@
-import { Box, Button, Modal, Typography } from "@mui/material";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import LockIcon from "@mui/icons-material/Lock";
 import theme from "@/app/theme";
 import IconInput from "@/components/IconInput";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import LockIcon from "@mui/icons-material/Lock";
+import { Box, Modal, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import LoadingButton from "../LoadingButton";
 
 interface LoginProps {
   isOpen: boolean;
@@ -17,11 +18,14 @@ const LoginModal = ({ isOpen, login, onChangeMode }: LoginProps) => {
   const [password, setPassword] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const { t } = useTranslation("authentication");
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = () => {
+    setLoading(true);
     login(username, password).then((message) => {
       console.log(message);
       setErrorMessage(message);
+      setLoading(false);
     });
   };
 
@@ -104,18 +108,14 @@ const LoginModal = ({ isOpen, login, onChangeMode }: LoginProps) => {
           >
             {errorMessage}
           </Typography>
-          <Button
-            data-testid={"modal-submit"}
-            disabled={username === "" || password === ""}
-            className={`
-              !bg-white
-              !pointer-events-auto
-              ${username === "" || password === "" ? "!cursor-not-allowed !text-gray-400" : "!cursor-pointer !text-black"}
-            `}
+          <LoadingButton
             onClick={handleSubmit}
-          >
-            {t("login.title")}
-          </Button>
+            disabled={username === "" || password === ""}
+            loading={loading}
+            text={t("login.title")}
+            className="!bg-white !pointer-events-auto"
+            data-testid="modal-submit"
+          />
         </form>
         <Typography
           data-testid={"modal-change"}
diff --git a/src/components/AuthComponents/SignUpModal.tsx b/src/components/AuthComponents/SignUpModal.tsx
index 98adbe69..f7a21a45 100644
--- a/src/components/AuthComponents/SignUpModal.tsx
+++ b/src/components/AuthComponents/SignUpModal.tsx
@@ -1,18 +1,18 @@
+import theme from "@/app/theme";
+import IconInput from "@/components/IconInput";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import LockIcon from "@mui/icons-material/Lock";
 import {
   Box,
-  Button,
   Checkbox,
   FormControlLabel,
   FormGroup,
   Modal,
   Typography,
 } from "@mui/material";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import LockIcon from "@mui/icons-material/Lock";
-import IconInput from "@/components/IconInput";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import theme from "@/app/theme";
+import LoadingButton from "../LoadingButton";
 
 interface SignUpProps {
   isOpen: boolean;
@@ -31,10 +31,13 @@ const SignUpModal = ({ isOpen, signup, onChangeMode }: SignUpProps) => {
   const [checkedReminder, setReminderChecked] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const { t } = useTranslation("authentication");
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = () => {
+    setLoading(true);
     signup(username, password, confirmPassword).then((message) => {
       setErrorMessage(message);
+      setLoading(false);
     });
   };
 
@@ -146,23 +149,19 @@ const SignUpModal = ({ isOpen, signup, onChangeMode }: SignUpProps) => {
           >
             {errorMessage}
           </Typography>
-          <Button
-            data-testid={"modal-submit"}
+          <LoadingButton
+            onClick={handleSubmit}
             disabled={
               username === "" ||
               password === "" ||
               confirmPassword === "" ||
               !checkedReminder
             }
-            className={`
-                !bg-white
-                !pointer-events-auto
-                ${username === "" || password === "" || confirmPassword === "" || !checkedReminder ? "!cursor-not-allowed !text-gray-400" : "!cursor-pointer !text-black"}
-              `}
-            onClick={handleSubmit}
-          >
-            {t("signup.title")}
-          </Button>
+            loading={loading}
+            text={t("signup.title")}
+            className="!bg-white !pointer-events-auto"
+            data-testid="modal-submit"
+          />
         </form>
         <Typography
           data-testid={"modal-change"}
diff --git a/src/components/LoadingButton.tsx b/src/components/LoadingButton.tsx
new file mode 100644
index 00000000..962eecf2
--- /dev/null
+++ b/src/components/LoadingButton.tsx
@@ -0,0 +1,33 @@
+import { Button, ButtonProps, CircularProgress } from "@mui/material";
+
+interface LoadingButtonProps extends ButtonProps {
+  loading: boolean;
+  text: string;
+}
+
+const LoadingButton: React.FC<LoadingButtonProps> = ({
+  loading,
+  text,
+  disabled,
+  children,
+  ...props
+}) => {
+  return (
+    <Button disabled={disabled || loading} {...props}>
+      {loading ? (
+        <>
+          <CircularProgress
+            size={16}
+            color="inherit"
+            data-testid="loading-spinner"
+          />
+          <span className="ml-2">{text}</span>
+        </>
+      ) : (
+        children || <span>{text}</span>
+      )}
+    </Button>
+  );
+};
+
+export default LoadingButton;
diff --git a/src/components/QuantityChip.tsx b/src/components/QuantityChip.tsx
new file mode 100644
index 00000000..edc6c9f6
--- /dev/null
+++ b/src/components/QuantityChip.tsx
@@ -0,0 +1,28 @@
+import { Quantity } from "@/types/types";
+import { Box, Chip } from "@mui/material";
+import React from "react";
+
+export interface QuantityChipsProps extends React.ComponentProps<typeof Box> {
+  quantities: Quantity[] | undefined;
+}
+
+export const QuantityChips = React.forwardRef<
+  HTMLDivElement,
+  QuantityChipsProps
+>(({ quantities, ...rest }, ref) => {
+  return (
+    <Box
+      {...rest}
+      ref={ref}
+      className={`flex flex-wrap gap-1 ${rest.className || ""}`}
+    >
+      {quantities
+        ?.filter((q) => q.value)
+        .map((q, i) => (
+          <Chip key={i} label={`${q.value} ${q.unit}`} variant="outlined" />
+        ))}
+    </Box>
+  );
+});
+
+QuantityChips.displayName = "QuantityChips";
diff --git a/src/components/Sidenav.tsx b/src/components/Sidenav.tsx
index eb0e0a62..9884496e 100644
--- a/src/components/Sidenav.tsx
+++ b/src/components/Sidenav.tsx
@@ -1,4 +1,3 @@
-import useUploadedFilesStore from "@/stores/fileStore";
 import BugReportIcon from "@mui/icons-material/BugReport";
 import HomeIcon from "@mui/icons-material/Home";
 import SearchIcon from "@mui/icons-material/Search";
@@ -16,6 +15,7 @@ import {
 } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 
 interface DrawerMenuProps {
@@ -24,8 +24,9 @@ interface DrawerMenuProps {
 }
 
 const SideNav = ({ open, onClose }: DrawerMenuProps) => {
+  const router = useRouter();
   const { t } = useTranslation("header");
-  const { clearUploadedFiles } = useUploadedFilesStore();
+
   return (
     <Drawer
       className="darkContainer w-[240px] flex-shrink-0"
@@ -68,7 +69,7 @@ const SideNav = ({ open, onClose }: DrawerMenuProps) => {
               href="/"
               passHref
               data-testid="new-inspection-button"
-              onClick={clearUploadedFiles}
+              onClick={() => router.push("/")}
             >
               <ListItemButton>
                 <ListItemIcon
diff --git a/src/components/__tests__/HorizontalNonLinearStepper.test.tsx b/src/components/__tests__/HorizontalNonLinearStepper.test.tsx
index 7c4a8176..7a62bb1e 100644
--- a/src/components/__tests__/HorizontalNonLinearStepper.test.tsx
+++ b/src/components/__tests__/HorizontalNonLinearStepper.test.tsx
@@ -159,7 +159,9 @@ describe("HorizontalNonLinearStepper with StepperControls", () => {
       />,
     );
     const submitButton = screen.getByText("stepper.submit");
-    expect(submitButton).toBeDisabled();
+    setTimeout(() => {
+      expect(submitButton).toBeDisabled();
+    }, 350);
   });
 
   it("enables 'Submit' button when all steps are completed", () => {
diff --git a/src/components/__tests__/LoadingButton.test.tsx b/src/components/__tests__/LoadingButton.test.tsx
new file mode 100644
index 00000000..5d3b9a0a
--- /dev/null
+++ b/src/components/__tests__/LoadingButton.test.tsx
@@ -0,0 +1,52 @@
+import { ButtonProps } from "@mui/material";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import LoadingButton from "../LoadingButton";
+
+describe("LoadingButton", () => {
+  const defaultProps: ButtonProps & { loading: boolean; text: string } = {
+    loading: false,
+    text: "Click me",
+  };
+
+  it("renders the button with provided text", () => {
+    render(<LoadingButton {...defaultProps} />);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("renders children if provided", () => {
+    render(
+      <LoadingButton {...defaultProps}>
+        <span>Custom Child</span>
+      </LoadingButton>,
+    );
+    expect(screen.getByText("Custom Child")).toBeInTheDocument();
+  });
+
+  it("disables button when loading is true", () => {
+    render(<LoadingButton {...defaultProps} loading />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables button when disabled prop is true", () => {
+    render(<LoadingButton {...defaultProps} disabled />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("shows loading spinner when loading is true", () => {
+    render(<LoadingButton {...defaultProps} loading />);
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+  });
+
+  it("does not show spinner when loading is false", () => {
+    render(<LoadingButton {...defaultProps} />);
+    expect(screen.queryByTestId("loading-spinner")).not.toBeInTheDocument();
+  });
+
+  it("fires onClick when clicked", async () => {
+    const onClick = jest.fn();
+    render(<LoadingButton {...defaultProps} onClick={onClick} />);
+    await userEvent.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/__tests__/QuantityChip.test.tsx b/src/components/__tests__/QuantityChip.test.tsx
new file mode 100644
index 00000000..2f089320
--- /dev/null
+++ b/src/components/__tests__/QuantityChip.test.tsx
@@ -0,0 +1,19 @@
+import { Quantity } from "@/types/types";
+import { render, screen } from "@testing-library/react";
+import { QuantityChips } from "../QuantityChip";
+
+describe("QuantityChips", () => {
+  it("renders valid quantities, filters out invalid values", () => {
+    const quantities: Quantity[] = [
+      { value: "5", unit: "kg" },
+      { value: "", unit: "g" },
+      { value: "0", unit: "kg" },
+    ];
+
+    render(<QuantityChips quantities={quantities} />);
+
+    expect(screen.getByText("5 kg")).toBeInTheDocument();
+    expect(screen.getByText("0 kg")).toBeInTheDocument();
+    expect(screen.queryByText("g")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/__tests__/Sidenav.test.tsx b/src/components/__tests__/Sidenav.test.tsx
index 264d87b7..f3f2876c 100644
--- a/src/components/__tests__/Sidenav.test.tsx
+++ b/src/components/__tests__/Sidenav.test.tsx
@@ -1,13 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import SideNav from "../Sidenav";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { useRouter } from "next/router";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import useUploadedFilesStore from "@/stores/fileStore";
-jest.mock("next/router", () => ({
+import SideNav from "../Sidenav";
+jest.mock("next/navigation", () => ({
   useRouter: jest.fn(),
 }));
 jest.mock("react-i18next", () => ({
@@ -88,15 +86,11 @@ describe("SideNav Component", () => {
     ).toHaveAttribute("href", "/SearchPage");
     expect(
       screen.getByText(t("sideNav.repportIssue")).closest("a"),
-    ).toHaveAttribute(
-      "href",
-      );
+    ).toHaveAttribute("href");
   });
-  
-  it("should call clearUploadedFiles when 'new inspection' is clicked", () => {
-    const store = useUploadedFilesStore;
-    const clearUploadedFilesSpy = jest.spyOn(store.getState(), "clearUploadedFiles");
 
+  it("should navigate to '/' when 'new inspection' is clicked", () => {
+    const router = useRouter();
     render(
       <ThemeProvider theme={theme}>
         <SideNav open={true} onClose={onClose} />
@@ -106,7 +100,6 @@ describe("SideNav Component", () => {
     const newInspectionButton = screen.getByTestId("new-inspection-button");
     fireEvent.click(newInspectionButton);
 
-    expect(clearUploadedFilesSpy).toHaveBeenCalled();
+    expect(router.push).toHaveBeenCalledWith("/");
   });
-
 });
diff --git a/src/components/stepper.tsx b/src/components/stepper.tsx
index 85d6610b..5c8ed530 100644
--- a/src/components/stepper.tsx
+++ b/src/components/stepper.tsx
@@ -4,8 +4,9 @@ import Step from "@mui/material/Step";
 import StepButton from "@mui/material/StepButton";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import LoadingButton from "./LoadingButton";
 
 export enum StepStatus {
   Incomplete = "incomplete",
@@ -76,6 +77,12 @@ export const StepperControls: React.FC<StepperProps> = ({
 }) => {
   const { t } = useTranslation("labelDataValidator");
   const stepsTotal = stepTitles.length;
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmission = () => {
+    setLoading(true);
+    submit();
+  };
 
   return (
     <Box className="flex flex-col gap-2 content-center">
@@ -88,16 +95,16 @@ export const StepperControls: React.FC<StepperProps> = ({
         >
           {t("stepper.back")}
         </Button>
-        <Button
-          onClick={submit}
+        <LoadingButton
+          onClick={handleSubmission}
           disabled={stepStatuses.some(
             (value) => value !== StepStatus.Completed,
           )}
+          loading={loading}
+          text={t("stepper.submit")}
           variant="contained"
           color="secondary"
-        >
-          {t("stepper.submit")}
-        </Button>
+        />
         <Button
           onClick={() =>
             setActiveStep((prev) => Math.min(prev + 1, stepsTotal - 1))
diff --git a/src/stores/alertStore.ts b/src/stores/alertStore.ts
index 628b7e5d..d83a1c14 100644
--- a/src/stores/alertStore.ts
+++ b/src/stores/alertStore.ts
@@ -10,7 +10,7 @@ interface AlertState {
 const useAlertStore = create<AlertState>((set) => ({
   alert: null,
   showAlert: (message, type = "info") => {
-    console.log(`Alert: ${message} | Type: ${type}`);
+    console.debug(`Alert: ${message} | Type: ${type}`);
     set({ alert: { message, type } });
   },
   hideAlert: () => set({ alert: null }),
diff --git a/src/stores/fileStore.ts b/src/stores/fileStore.ts
index 2db3c8cf..85cc3eac 100644
--- a/src/stores/fileStore.ts
+++ b/src/stores/fileStore.ts
@@ -13,12 +13,12 @@ const useUploadedFilesStore = create<UploadedFilesState>((set) => ({
   uploadedFiles: [],
 
   addUploadedFile: (file) => {
-    console.log(`[File Store] Added: ${file.getInfo().path}`);
+    console.debug(`[File Store] Added: ${file.getInfo().path}`);
     set((state) => ({ uploadedFiles: [...state.uploadedFiles, file] }));
   },
 
   removeUploadedFile: (path) => {
-    console.log(`[File Store] Removed: ${path}`);
+    console.debug(`[File Store] Removed: ${path}`);
     set((state) => ({
       uploadedFiles: state.uploadedFiles.filter(
         (file) => file.getInfo().path !== path,
@@ -32,7 +32,7 @@ const useUploadedFilesStore = create<UploadedFilesState>((set) => ({
   },
 
   renameUploadedFile: (path, newName) => {
-    console.log(`[File Store] Renamed: ${path} -> ${newName}`);
+    console.debug(`[File Store] Renamed: ${path} -> ${newName}`);
     set((state) => ({
       uploadedFiles: state.uploadedFiles.map((file) =>
         file.getInfo().path === path
diff --git a/src/stores/labelDataStore.ts b/src/stores/labelDataStore.ts
index 097d06d8..d9d75e2a 100644
--- a/src/stores/labelDataStore.ts
+++ b/src/stores/labelDataStore.ts
@@ -4,6 +4,7 @@ import { create } from "zustand";
 interface LabelDataState {
   labelData: LabelData | null;
   setLabelData: (newData: LabelData) => void;
+  setComment: (comment: string) => void;
   resetLabelData: () => void;
 }
 
@@ -11,12 +12,19 @@ const useLabelDataStore = create<LabelDataState>((set) => ({
   labelData: null,
 
   setLabelData: (newData) => {
-    console.log(`[Label Store] Set label data:`, newData);
+    console.debug(`[Label Store] Set label data:`, newData);
     set({ labelData: newData });
   },
 
+  setComment: (comment) => {
+    console.debug(`[Label Store] Set comment:`, comment);
+    set((state) => ({
+      labelData: state.labelData ? { ...state.labelData, comment } : null,
+    }));
+  },
+
   resetLabelData: () => {
-    console.log(`[Label Store] Reset label data`);
+    console.debug(`[Label Store] Reset label data`);
     set({ labelData: null });
   },
 }));
diff --git a/src/utils/client/constants.ts b/src/utils/client/constants.ts
index b172bc3a..e04ca266 100644
--- a/src/utils/client/constants.ts
+++ b/src/utils/client/constants.ts
@@ -99,7 +99,7 @@ export const VERIFIED_LABEL_DATA: LabelData = {
     ],
   },
   confirmed: false,
-  comment: "",
+  comment: "Compliant with regulations.",
 };
 
 export const VERIFIED_LABEL_DATA_WITH_ID = {