diff --git a/frontend/src/components/annotation/AnnotationImage.tsx b/frontend/src/components/annotation/AnnotationImage.tsx
index 3abd525..2508186 100644
--- a/frontend/src/components/annotation/AnnotationImage.tsx
+++ b/frontend/src/components/annotation/AnnotationImage.tsx
@@ -4,27 +4,25 @@ import AnnotationImageDisplay from "./AnnotationImageDisplay";
 import AnnotationImageNavigation from "./AnnotationImageNavigation";
 import { useMainContext } from "../../contexts/mainContext";
 
+export default function AnnotationImage() {
+  const { t } = useTranslation();
+  const { image } = useMainContext();
 
-export default function AnnotationImage () {
-    const { t } = useTranslation();
-    const { image } = useMainContext();
-
-    return (
-        <>
-            { image() ? (
-                <Grid 
-                    container 
-                    direction="column"
-                    className="pageContainer"
-                >
-                    <AnnotationImageDisplay />
-                    <AnnotationImageNavigation />
-                </Grid>
-            ) : (
-                <p>
-                    { capitalize(t("annotations.unknown_image")) }
-                </p>
-            )}
-        </>
-    );
-};
\ No newline at end of file
+  return (
+    <>
+      {image() ? (
+        <Grid
+          container
+          direction="column"
+          className="pageContainer"
+          sx={{ overflow: "auto" }}
+        >
+          <AnnotationImageDisplay />
+          <AnnotationImageNavigation />
+        </Grid>
+      ) : (
+        <p>{capitalize(t("annotations.unknown_image"))}</p>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/annotation/AnnotationImageDisplay.tsx b/frontend/src/components/annotation/AnnotationImageDisplay.tsx
index c22e35f..c817384 100644
--- a/frontend/src/components/annotation/AnnotationImageDisplay.tsx
+++ b/frontend/src/components/annotation/AnnotationImageDisplay.tsx
@@ -1,76 +1,61 @@
-import { useState, useEffect } from "react";
 import { Grid } from "@mui/material";
 import { useMainContext } from "../../contexts/mainContext";
 import { useAnnotationContext } from "../../contexts/annotationContext";
 
 const AnnotationImageDisplay = () => {
+  const { image } = useMainContext();
+  const { annotated } = useAnnotationContext();
 
-    const [isAnnotatedColor, setIsAnnotatedColor] = useState<string>("");
-    const { image } = useMainContext();
-    const { annotated } = useAnnotationContext();
+  const mediaDisplayStyle = {
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+    width: "100%",
+    height: "100%",
+    "object-fit": "contain",
+    display: "block",
+  };
 
-    const mediaDisplayStyle = {
-        borderBottomLeftRadius: 4,
-        borderBottomRightRadius: 4,
-        maxWidth: "99.5%",
-        maxHeight: "670px",
-        border: "3px solid",
-        borderRadius: "5px",
-        borderColor: isAnnotatedColor,
-    };
-    
-    const displayMedia = (image) => {
-        if (image.extension.includes("image")) {
-            return (
-                <img
-                    src={ image.url }
-                    alt={ image.name }
-                    loading="lazy"
-                    style={ mediaDisplayStyle }
-                />
-            )
-        }
-        else {
-            return (
-                <video
-                    src={ image.url }
-                    style={ mediaDisplayStyle }
-                    controls
-                    autoPlay={ false }
-                >
-                    <source 
-                        type="video/mp4"
-                    />
-                    { image.name }
-                </video>
-            )
-        }
-    };
+  const displayMedia = (image) => {
+    if (image.extension.includes("image")) {
+      return (
+        <img
+          src={image.url}
+          alt={image.name}
+          loading="lazy"
+          style={mediaDisplayStyle}
+        />
+      );
+    } else {
+      return (
+        <video
+          src={image.url}
+          style={mediaDisplayStyle}
+          controls
+          autoPlay={false}
+        >
+          <source type="video/mp4" />
+          {image.name}
+        </video>
+      );
+    }
+  };
 
-    useEffect(() => {
-        (async () => {
-            image()?.treated
-            ? setIsAnnotatedColor("green") 
-            : (annotated 
-                ? setIsAnnotatedColor("orange") 
-                : setIsAnnotatedColor("red"))
-        })();
-    }, [image()?.annotations, annotated]);
-
-    return (
-        <>
-            <Grid item
-                alignItems="center"
-                justifyContent="center"
-                className="boxImage"
-                style={{ 
-                    backgroundColor: "#D9D9D9",
-                }}
-            >
-                { displayMedia(image()) }
-            </Grid>
-        </>
-    );
+  return (
+    <>
+      <Grid
+        item
+        alignItems="center"
+        justifyContent="center"
+        className="boxImage"
+        style={{
+          backgroundColor: "#D9D9D9",
+          overflow: "auto",
+        }}
+      >
+        {displayMedia(image())}
+      </Grid>
+    </>
+  );
 };
 
-export default AnnotationImageDisplay;
\ No newline at end of file
+export default AnnotationImageDisplay;
diff --git a/frontend/src/components/annotation/AnnotationMain.tsx b/frontend/src/components/annotation/AnnotationMain.tsx
index 4794418..51a99db 100644
--- a/frontend/src/components/annotation/AnnotationMain.tsx
+++ b/frontend/src/components/annotation/AnnotationMain.tsx
@@ -4,22 +4,23 @@ import AnnotationSaveError from "./AnnotationSaveError";
 import "../../css/annotation.css";
 import AnnotationImage from "./AnnotationImage";
 
-
-
 const LayoutAnnotationContainer = styled("div")({
   flexGrow: 1,
   display: "grid",
   gridTemplateColumns: "repeat(12, 1fr)",
   columnGap: "1rem",
   rowGap: "1rem",
+  overflowY: "auto",
 });
 
 const LayoutAnnotationImage = styled("div")(({ theme }) => ({
   gridColumn: "1/8",
+  height: "100%",
+  overflow: "auto",
   [theme.breakpoints.down("md")]: {
     gridColumn: "1/13",
     gridRow: "1/5",
-  }
+  },
 }));
 
 const LayoutAnnotationForm = styled("div")(({ theme }) => ({
@@ -32,20 +33,18 @@ const LayoutAnnotationForm = styled("div")(({ theme }) => ({
 }));
 
 const AnnotationMain = () => {
-  
-    return (
-        <LayoutAnnotationContainer className="page">
-
-            <LayoutAnnotationImage>
-                <AnnotationImage />
-            </LayoutAnnotationImage >
-
-            <LayoutAnnotationForm className="annotations">
-                <AnnotationForm />
-            </LayoutAnnotationForm >
-
-            <AnnotationSaveError />
-        </LayoutAnnotationContainer>
-    );
+  return (
+    <LayoutAnnotationContainer className="page">
+      <LayoutAnnotationImage>
+        <AnnotationImage />
+      </LayoutAnnotationImage>
+
+      <LayoutAnnotationForm className="annotations">
+        <AnnotationForm />
+      </LayoutAnnotationForm>
+
+      <AnnotationSaveError />
+    </LayoutAnnotationContainer>
+  );
 };
-export default AnnotationMain;
\ No newline at end of file
+export default AnnotationMain;
diff --git a/frontend/src/components/navigationPath.tsx b/frontend/src/components/navigationPath.tsx
index 8fc8220..939a398 100644
--- a/frontend/src/components/navigationPath.tsx
+++ b/frontend/src/components/navigationPath.tsx
@@ -2,24 +2,42 @@ import { Breadcrumbs, capitalize, Stack } from "@mui/material";
 import { useMainContext } from "../contexts/mainContext";
 import { FC, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import BreadcrumbElement from './breadcrumbElement';
+import BreadcrumbElement from "./breadcrumbElement";
 import { useTranslation } from "react-i18next";
 
 const NavigationPath: FC<{}> = () => {
-  const { project, projects, deploymentData, currentImage, device, devices, site, sites, setCurrentImage, setCurrentProject, setDeploymentData, setCurrentDevice, setCurrentSite, files, image } = useMainContext();
-  const { t } = useTranslation()
+  const {
+    project,
+    projects,
+    deploymentData,
+    currentImage,
+    device,
+    devices,
+    site,
+    sites,
+    setCurrentImage,
+    setCurrentProject,
+    setDeploymentData,
+    setCurrentDevice,
+    setCurrentSite,
+    files,
+    image,
+  } = useMainContext();
+  const { t } = useTranslation();
   const location = useLocation();
 
   const homeBreadcrumb = (isActive: boolean = false) => {
     return (
-      !isActive &&
-        <BreadcrumbElement 
-            key="home"
-            current_option={capitalize(t("main.home"))}
-            link="/"
-            isActive={isActive}
-        />)
-  }
+      !isActive && (
+        <BreadcrumbElement
+          key="home"
+          current_option={capitalize(t("main.home"))}
+          link="/"
+          isActive={isActive}
+        />
+      )
+    );
+  };
 
   const projectBreadcrumb = (isActive: boolean = false) => {
     return (
@@ -30,33 +48,42 @@ const NavigationPath: FC<{}> = () => {
         parentlink="/project"
         options={projects}
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
 
   const deploymentBreadcrumb = (isActive: boolean = false) => {
     return (
       <BreadcrumbElement
         key="deployment"
         current_option={deploymentData.name}
-        link={`/project/${project().id}/deployment/${deploymentData.id}/details`}
+        link={`/project/${project().id}/deployment/${
+          deploymentData.id
+        }/details`}
         parentlink={`/project/${project().id}/deployment`}
         options={projects.find((p) => p.id === project().id).deployments}
         linkSuffix="details"
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
 
   const imageBreadcrumb = (isActive: boolean = false) => {
     return (
       <BreadcrumbElement
         key="image"
-        current_option={ image()?.name }
-        link={ `/project/${project().id}/deployment/${deploymentData.id}/details/${currentImage}` }
-        parentlink={ `/project/${ project().id }/deployment/${deploymentData.id}/details` }
-        options={ files }
-        isActive={ isActive }
-      />)
-  }
+        current_option={image()?.name}
+        link={`/project/${project().id}/deployment/${
+          deploymentData.id
+        }/details/${currentImage}`}
+        parentlink={`/project/${project().id}/deployment/${
+          deploymentData.id
+        }/details`}
+        options={files}
+        isActive={isActive}
+      />
+    );
+  };
 
   const devicesBreadcrumb = (isActive: boolean = false) => {
     return (
@@ -65,8 +92,9 @@ const NavigationPath: FC<{}> = () => {
         current_option={capitalize(t("devices.devices"))}
         link="/devices/"
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
 
   const deviceBreadcrumb = (isActive: boolean = false) => {
     return (
@@ -77,8 +105,9 @@ const NavigationPath: FC<{}> = () => {
         parentlink={`/devices`}
         options={devices}
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
   const sitesBreadcrumb = (isActive: boolean = false) => {
     return (
       <BreadcrumbElement
@@ -86,8 +115,9 @@ const NavigationPath: FC<{}> = () => {
         current_option={capitalize(t("sites.sites"))}
         link="/sites/"
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
   const siteBreadcrumb = (isActive: boolean = false) => {
     return (
       <BreadcrumbElement
@@ -97,20 +127,21 @@ const NavigationPath: FC<{}> = () => {
         parentlink={`/sites`}
         options={sites}
         isActive={isActive}
-      />)
-  }
+      />
+    );
+  };
 
   // workeround for breadcrumbs issue
 
   useEffect(() => {
     if (location.pathname === "/") {
-      setCurrentImage(null)
-      setCurrentProject(null)
-      setDeploymentData(null)
-      setCurrentDevice(null)
-      setCurrentSite(null)
+      setCurrentImage(null);
+      setCurrentProject(null);
+      setDeploymentData(null);
+      setCurrentDevice(null);
+      setCurrentSite(null);
     }
-  }, [location])
+  }, [location]);
 
   const breadcrumbs = () => {
     if (currentImage && project() && deploymentData) {
@@ -118,71 +149,36 @@ const NavigationPath: FC<{}> = () => {
         homeBreadcrumb(),
         projectBreadcrumb(),
         deploymentBreadcrumb(),
-        imageBreadcrumb(true)
+        imageBreadcrumb(true),
       ];
-    }
-    else if (deploymentData) {
+    } else if (deploymentData) {
       return [
         homeBreadcrumb(),
         projectBreadcrumb(),
-        deploymentBreadcrumb(true)
-      ];
-    }
-    else if (project()) {
-      return [
-        homeBreadcrumb(),
-        projectBreadcrumb(true),
-      ];
-    }
-    else if (device()) {
-      return [
-        homeBreadcrumb(),
-        devicesBreadcrumb(),
-        deviceBreadcrumb(true)
-      ];
-    }
-    else if (site()) {
-      return [
-        homeBreadcrumb(),
-        sitesBreadcrumb(),
-        siteBreadcrumb(true)
-      ];
-    }
-    else if (location.pathname == '/devices/') {
-      return [
-        homeBreadcrumb(),
-        devicesBreadcrumb(true)
-      ];
-    }
-    else if (location.pathname == '/sites/') {
-      return [
-        homeBreadcrumb(),
-        sitesBreadcrumb(true)
-      ];
-    }
-    else if (location.pathname == '/') {
-      return [
-        homeBreadcrumb(true)
-      ];
-    }
-    else {
-      return [
-        homeBreadcrumb(true)
+        deploymentBreadcrumb(true),
       ];
+    } else if (project()) {
+      return [homeBreadcrumb(), projectBreadcrumb(true)];
+    } else if (device()) {
+      return [homeBreadcrumb(), devicesBreadcrumb(), deviceBreadcrumb(true)];
+    } else if (site()) {
+      return [homeBreadcrumb(), sitesBreadcrumb(), siteBreadcrumb(true)];
+    } else if (location.pathname == "/devices/") {
+      return [homeBreadcrumb(), devicesBreadcrumb(true)];
+    } else if (location.pathname == "/sites/") {
+      return [homeBreadcrumb(), sitesBreadcrumb(true)];
+    } else if (location.pathname == "/") {
+      return [homeBreadcrumb(true)];
+    } else {
+      return [homeBreadcrumb(true)];
     }
   };
 
   return (
-    <div style={{ height: '5vh' }}>
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={0}
-        height="100%"
-      >
+    <div>
+      <Stack direction="row" alignItems="center" spacing={0} height="100%">
         <Breadcrumbs separator="›" aria-label="breadcrumb">
           {breadcrumbs()}
-
         </Breadcrumbs>
       </Stack>
     </div>
diff --git a/frontend/src/components/siteMenu/siteTable.tsx b/frontend/src/components/siteMenu/siteTable.tsx
index 02e7316..035da95 100644
--- a/frontend/src/components/siteMenu/siteTable.tsx
+++ b/frontend/src/components/siteMenu/siteTable.tsx
@@ -120,7 +120,7 @@ const SitesTable = () => {
       </Dialog>
     </Stack> : 
       <Alert severity="warning" >
-        <AlertTitle>{t('main.warning')}</AlertTitle>
+        <AlertTitle>{capitalize(t('main.warning'))}</AlertTitle>
         {`${capitalize(t('main.zero'))} ${t('sites.site')}`}
       </Alert>
 );
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d13113a..4ec6610 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import AuthContextProvider from "./contexts/AuthContextProvider";
+import { CssBaseline } from "@mui/material";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -12,6 +13,7 @@ root.render(
   <AuthContextProvider>
     <React.StrictMode>
       <App />
+      <CssBaseline />
     </React.StrictMode>
   </AuthContextProvider>
 );
diff --git a/frontend/src/layouts/mainLayout.tsx b/frontend/src/layouts/mainLayout.tsx
index 6ddc9ba..3739acb 100644
--- a/frontend/src/layouts/mainLayout.tsx
+++ b/frontend/src/layouts/mainLayout.tsx
@@ -1,4 +1,5 @@
 import { Box, Grid } from "@mui/material";
+import { calculateNewValue } from "@testing-library/user-event/dist/utils";
 
 type MainLayoutProps = {
   Header?: JSX.Element;
@@ -16,11 +17,18 @@ export const MainLayout = ({
 }: MainLayoutProps) => (
   <Box>
     {Header}
-    <Grid container 
-      sx={{ height: "87vh" }} 
+    <Grid
+      container
+      sx={{ height: "calc(100vh - 72px)" }}
       justifyContent="center"
     >
-      <Grid item sx={{ height: "100%" }} xs={12} md={11} lg={11}>
+      <Grid
+        item
+        sx={{ height: "100%", display: "flex", flexDirection: "column" }}
+        xs={12}
+        md={11}
+        lg={11}
+      >
         {Navigation}
         {Main}
       </Grid>