removed the default padding from page container, and changed the prop from padding to spacing, this will add left and right padding and a top margin, also disable the page wide scroll bar in app.css

src/app/App.css

@@ -22,6 +22,7 @@ html, body, #root {
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow-y: hidden;
 }
 
 /* styles.css or a CSS module */

src/common/ResponsiveTable.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
 import classNames from "classnames";
+import { getThemeType } from "theme";
 
 const useStyles = makeStyles((theme: Theme) => {
   //const isMobile = useMobile()
@@ -58,6 +59,7 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     stickyHeader: {
       position: "sticky",
+      backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(40, 40, 40)",
       top: 0,
       zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
     }

src/pages/AviationMap.tsx

@@ -6,7 +6,7 @@ export default function AviationMap() {
   const location = useLocation();
 
   return (
-    <PageContainer padding={-1}>
+    <PageContainer>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&

src/pages/Bins.tsx

@@ -1477,5 +1477,5 @@ export default function Bins(props: Props) {
     );
   };
 
-  return !props.insert ? <PageContainer padding={-1}>{page()}</PageContainer> : page();
+  return !props.insert ? <PageContainer>{page()}</PageContainer> : page();
 }

src/pages/ConstructionSiteMap.tsx

@@ -6,7 +6,7 @@ export default function ConstructionSiteMap() {
   const location = useLocation();
 
   return (
-      <PageContainer padding={-1}>
+      <PageContainer>
         {location.state !== undefined &&
         location.state !== null &&
         location.state.long !== undefined &&

src/pages/Devices.tsx

@@ -704,7 +704,7 @@ export default function Devices() {
   }
 
   return(
-    <PageContainer padding={isMobile ? 0 : 2}>
+    <PageContainer spacing={2}>
       <Box 
         sx={{ 
           borderRadius: 1, 

src/pages/FieldMap.tsx

@@ -5,7 +5,7 @@ import { useLocation } from "react-router";
 export default function FieldMap() {
   const location = useLocation();
   return (
-    <PageContainer padding={-1}>
+    <PageContainer>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&

src/pages/PageContainer.tsx

@@ -39,7 +39,7 @@ interface Props extends PropsWithChildren{
   fullViewport?: boolean;
   isCenterCenter?: boolean;
   sx?: SxProps<Theme>;
-  padding?: number;
+  spacing?: number;
 }
 
 export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
@@ -48,7 +48,7 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
   const { children, fullViewport, isCenterCenter, sx } = props;
   // let fullViewport = false
   // let isCenterCenter = false
-  const padding = props.padding ? props.padding : isMobile ? 1 : 2;
+  const spacing = props.spacing;
   return (
     <Container
       className={classNames(
@@ -57,7 +57,9 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
       )}
       sx={{
         ...sx, // Spread existing sx
-        ...(padding !== undefined && { padding }), // Conditionally add padding
+        paddingX: spacing,
+        marginTop: spacing
+        // ...(padding !== undefined && { padding }), // Conditionally add padding
       }}
       disableGutters
       maxWidth={false}