diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 094abe83..7917e0c1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,9 +9,8 @@ import { useEffect } from 'react'
 import { RootState } from '@/app/store'
 import CircularProgress from '@mui/material/CircularProgress'
 import Snackbar from '@mui/material/Snackbar'
-import Alert from '@mui/material/Alert'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css' // Import Leaflet CSS
+import 'leaflet/dist/leaflet.css'
+
 export default function App() {
   const status: string = useSelector((state: RootState) => state.omrr.status)
   const dispatch = useDispatch()
@@ -20,11 +19,11 @@ export default function App() {
     dispatch(fetchOMRRData())
   }, [dispatch])
   return (
-    <Grid container spacing={0}>
+    <Grid container sx={{ flexGrow: 1 }}>
       <Grid item xs={12}>
         <Header />
       </Grid>
-      <Grid item style={{ flexGrow: 1, minHeight: '93vh' }} xs={12}>
+      <Grid item xs={12}>
         {status === 'loading' ? (
           <CircularProgress />
         ) : status === 'failed' ? (
diff --git a/frontend/src/components/AuthorizationDetails.tsx b/frontend/src/components/AuthorizationDetails.tsx
index ecb81514..723042a9 100644
--- a/frontend/src/components/AuthorizationDetails.tsx
+++ b/frontend/src/components/AuthorizationDetails.tsx
@@ -1,56 +1,87 @@
 import React from 'react'
 import { useLocation } from 'react-router-dom'
-import { Button, Card, Grid, Stack,Chip } from '@mui/material'
+import { Button, Card, Chip, Grid } from '@mui/material'
 import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 import { useNavigate } from 'react-router'
 import L, { LatLngLiteral } from 'leaflet'
-// @ts-ignore
 import pin from '../assets/marker-icon-2x-red.png'
-// @ts-ignore
 import shadow from '../assets/marker-shadow.png'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import OmrrData from '@/interfaces/omrr'
 
-export default function AuthorizationDetails() {
-  //define red icon
-  const redIcon = new L.Icon({
-    //read from assets
-    iconUrl: pin,
-    shadowUrl: shadow,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowSize: [41, 41],
-  })
-  const navigate = useNavigate()
-  const buttonClicked = (route: any) => {
-    navigate(route) // reset the state
-  }
-  const location = useLocation()
-  const data = location?.state?.data
-  const facilityLocation: LatLngLiteral = { lat: data.Latitude, lng: data.Longitude }
-  return (
-
-      <Grid container spacing={1} sx={{marginTop:'6em', marginLeft:'2em', maxWidth:'95%' }}>
-        <Grid item  xs={3} sm={6} md={12}>
-          <Button sx={{
-            background: '#8D8D8D',
-            padding: '8px 16px',
-            borderRadius: '6px;',
-            color:'#000000',
-            textTransform: 'none',
-          }} onClick={() => buttonClicked('/search')}>Back To Search</Button>
-        </Grid>
-        <Grid item xs={3} sm={6} md={12} >
-          <Stack direction="row" justifyContent="space-between">
-            <span style={{
-              color:'#000000',
-              fontFamily: 'BCSans',
-              fontStyle: 'bold',
-              fontSize: '2em',
-              lineHeight: '3em',
-            }}>{data['Regulated Party']}</span>
-          </Stack>
-          <Grid container direction="row" spacing={1}>
-              <Grid item xs={3}>
+function authorizationSection(mdMatches: boolean, data: OmrrData) {
+  return <>
+    {mdMatches && <>
+      <Grid container direction="row" sx={{ marginTop: '2em' }} spacing={1}>
+        <Grid item xs={3}>
+                 <span style={{
+                   color: '#000000',
+                   fontFamily: 'BCSans',
+                   fontStyle: 'normal',
+                   fontWeight: 'bold',
+                   fontSize: '1em',
+                   lineHeight: '1em',
+                 }}>Authorization Status</span>
+        </Grid>
+        <Grid item xs={3}>
+                 <span style={{
+                   color: '#000000',
+                   fontFamily: 'BCSans',
+                   fontStyle: 'normal',
+                   fontWeight: 'bold',
+                   fontSize: '1em',
+                   lineHeight: '1em',
+                 }}>Authorization Number</span>
+        </Grid>
+        <Grid item xs={3}>
+                 <span style={{
+                   color: '#000000',
+                   fontFamily: 'BCSans',
+                   fontStyle: 'normal',
+                   fontWeight: 'bold',
+                   fontSize: '1em',
+                   lineHeight: '1em',
+                 }}>Effective/Issue Date</span>
+        </Grid>
+        <Grid item xs={3}>
+                 <span style={{
+                   color: '#000000',
+                   fontFamily: 'BCSans',
+                   fontStyle: 'normal',
+                   fontWeight: 'bold',
+                   fontSize: '1em',
+                   lineHeight: '1em',
+                 }}>Last Amendment Date</span>
+        </Grid>
+      </Grid>
+      <Grid container direction="row" spacing={1} sx={{ marginTop: '0.2em' }}>
+        <Grid item xs={3}>
+          <Chip
+            sx={{
+              background:
+                data['Authorization Status'] === 'Active'
+                  ? '#353433'
+                  : '#605E5C',
+              color: '#ffffff',
+            }}
+            label={data['Authorization Status']}
+          />
+        </Grid>
+        <Grid item xs={3}>
+          <span>{data['Authorization Number']}</span>
+        </Grid>
+        <Grid item xs={3}>
+          <span>{data['Effective/Issue Date']?.toString()}</span>
+        </Grid>
+        <Grid item xs={3}>
+          <span>{data['Last Amendment Date']?.toString()}</span>
+        </Grid>
+      </Grid></>
+    }
+    {!mdMatches && <>
+      <Grid container direction="row" sx={{ marginTop: '2em' }} spacing={0}>
+        <Grid item xs={6}>
                  <span style={{
                    color: '#000000',
                    fontFamily: 'BCSans',
@@ -59,8 +90,8 @@ export default function AuthorizationDetails() {
                    fontSize: '1em',
                    lineHeight: '1em',
                  }}>Authorization Status</span>
-              </Grid>
-              <Grid item xs={3}>
+        </Grid>
+        <Grid item xs={6}>
                  <span style={{
                    color: '#000000',
                    fontFamily: 'BCSans',
@@ -69,8 +100,27 @@ export default function AuthorizationDetails() {
                    fontSize: '1em',
                    lineHeight: '1em',
                  }}>Authorization Number</span>
-              </Grid>
-              <Grid item xs={3}>
+        </Grid>
+      </Grid>
+      <Grid container direction="row" sx={{ marginTop: '.2em' }} spacing={0}>
+        <Grid item xs={6}>
+          <Chip
+            sx={{
+              background:
+                data['Authorization Status'] === 'Active'
+                  ? '#353433'
+                  : '#605E5C',
+              color: '#ffffff',
+            }}
+            label={data['Authorization Status']}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <span>{data['Authorization Number']}</span>
+        </Grid>
+      </Grid>
+      <Grid container direction="row" sx={{ marginTop: '2em' }} spacing={0}>
+        <Grid item xs={6}>
                  <span style={{
                    color: '#000000',
                    fontFamily: 'BCSans',
@@ -79,8 +129,8 @@ export default function AuthorizationDetails() {
                    fontSize: '1em',
                    lineHeight: '1em',
                  }}>Effective/Issue Date</span>
-              </Grid>
-              <Grid item xs={3}>
+        </Grid>
+        <Grid item xs={6}>
                  <span style={{
                    color: '#000000',
                    fontFamily: 'BCSans',
@@ -89,51 +139,98 @@ export default function AuthorizationDetails() {
                    fontSize: '1em',
                    lineHeight: '1em',
                  }}>Last Amendment Date</span>
-            </Grid>
+        </Grid>
+      </Grid>
+
+      <Grid container direction="row" sx={{ marginTop: '.2em' }} spacing={0}>
+        <Grid item xs={6}>
+          <span>{data['Effective/Issue Date']?.toString()}</span>
+        </Grid>
+        <Grid item xs={6}>
+          <span>{data['Last Amendment Date']?.toString()}</span>
+        </Grid>
+      </Grid></>
+    }
+  </>
+}
+
+export default function AuthorizationDetails() {
+  const theme = useTheme()
+  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
+  //define red icon
+  const redIcon = new L.Icon({
+    //read from assets
+    iconUrl: pin,
+    shadowUrl: shadow,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+  })
+  const navigate = useNavigate()
+  const buttonClicked = (route: any) => {
+    navigate(route) // reset the state
+  }
+  const location = useLocation()
+  const data = location?.state?.data
+  const facilityLocation: LatLngLiteral = { lat: data.Latitude, lng: data.Longitude }
+  return (
+    <Grid container spacing={1} sx={{ marginTop: '6em', marginLeft: '2em', maxWidth: '95%' }}>
+      <Grid item xs={12}>
+        <Button sx={{
+          background: '#053662',
+          color: '#ffffff',
+          borderRadius: '4px',
+          textTransform: 'none',
+          order: 1,
+          '&:hover': {
+            background: '#053662',
+            color: '#ffffff',
+            boxShadow: 'none',
+          },
+        }} onClick={() => buttonClicked('/search')}>Back To Search</Button>
+      </Grid>
+      <Grid item xs={12} sx={{ marginTop: '2em' }}>
+        <Grid container direction={{ xs: 'column', lg: 'row' }}>
+          <Grid item xs={12}>
+              <span style={{
+                color: '#000000',
+                fontFamily: 'BCSans-Bold',
+                fontSize: '1.5em',
+              }}>{data['Regulated Party']}</span>
           </Grid>
-          <Grid container direction="row" spacing={1}>
-            <Grid item xs={3}>
-              <Chip
-                sx={{
-                  background:
-                    data['Authorization Status'] === 'Active'
-                      ? '#353433'
-                      : '#605E5C',
-                  color: '#ffffff',
-                }}
-                label={data['Authorization Status']}
+        </Grid>
+        {authorizationSection(mdMatches, data)}
+
+      </Grid>
+      <Grid item xs={12} sx={{ marginTop: '2em' }}>
+        <Grid container direction="row" spacing={1}>
+          <Grid item xs={6}>
+
+          </Grid>
+          <Grid item xs={6}>
+            <MapContainer
+              id="map"
+              center={facilityLocation}
+              scrollWheelZoom={false}
+              zoom={12}
+              style={{ height: '60em' }}
+              className="map-container"
+            >
+              <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               />
-            </Grid>
-            <Grid item xs={3}>
-              <span>{data['Authorization Number']}</span>
-            </Grid>
-            <Grid item xs={3}>
-              <span>{data['Effective/Issue Date']}</span>
-            </Grid>
-            <Grid item xs={3}>
-              <span>{data['Last Amendment Date']}</span>
-            </Grid>
+              <Marker key={data['Authorization Number']} position={facilityLocation} icon={redIcon} />
+            </MapContainer>
           </Grid>
+
         </Grid>
-        <Grid item xs={12} sx={{marginTop:'2em'}}>
-          <MapContainer
-            id="map"
-            center={facilityLocation}
-            scrollWheelZoom={false}
-            zoom={12}
-            style={{ height: '60em' }}
-            className="map-container"
-          >
-            <TileLayer
-              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <Marker key={data['Authorization Number']} position={facilityLocation} icon={redIcon} />
-          </MapContainer>
-        </Grid>
-        <Grid item xs={4}>
-          <Card>{/* Content of the third card */}</Card>
-        </Grid>
+
+      </Grid>
+      <Grid item xs={4}>
+        <Card>{/* Content of the third card */}</Card>
       </Grid>
+    </Grid>
   )
 }
diff --git a/frontend/src/components/AuthorizationList.tsx b/frontend/src/components/AuthorizationList.tsx
index 99653e94..a5b935cb 100644
--- a/frontend/src/components/AuthorizationList.tsx
+++ b/frontend/src/components/AuthorizationList.tsx
@@ -60,12 +60,11 @@ export default function AuthorizationList() {
   const [location, setLocation] = useState<Location | null>(null)*/
   const pagination = (
     <Grid item xs={12}>
-      <Box
+      <Grid container spacing={0} direction={{ xs: 'column', md: 'row' }}
         sx={{
           display: 'flex',
           width: '90vw', // Make the Box take full width
           justifyContent: 'space-between',
-          alignItems: 'center',
         }}
       >
         <Pagination
@@ -91,7 +90,7 @@ export default function AuthorizationList() {
           {Math.min(page * 10, filteredValue.length)} of {filteredValue.length}{' '}
           results
         </Typography>
-      </Box>
+      </Grid>
     </Grid>
   )
   const handleLocation = () => {
@@ -145,6 +144,7 @@ export default function AuthorizationList() {
         <Grid
           container
           spacing={2}
+          direction={{ xs: 'column', md: 'row' }}
           sx={{ paddingTop: '8vh', paddingLeft: '4vw', paddingBottom: '4vw' }}
         >
           <Grid item xs={12}>
@@ -179,20 +179,22 @@ export default function AuthorizationList() {
             ></TextField>
           </Grid>
           <Grid item xs={12}>
+            <Grid container sx={{maxWidth: '90vw',}} justifyContent="space-between" spacing={0} direction={{ xs: 'column', md: 'row' }}>
             <Stack
               sx={{
                 display: 'flex',
-                alignItems: 'left' /* Frame 1186 */,
+                alignItems: 'left',
                 flexDirection: 'row',
-                maxWidth: '90vw',
-                justifyContent: 'space-between', // Add this line
+
+                justifyContent: 'left',
               }}
-              direction="row"
+              direction={{ xs: 'column', md: 'row' }}
             >
-              <Box display="flex" alignItems="center">
+              <Box display="flex" alignItems="center" sx={{marginRight:'2em'}}>
                 <span>Search by: </span>
+              </Box>
+              <Box display="flex" alignItems="left">
                 <RadioGroup
-                  sx={{ marginLeft: '2em' }}
                   row
                   name="searchBy"
                   defaultValue="all"
@@ -218,7 +220,7 @@ export default function AuthorizationList() {
                   />
                 </RadioGroup>
               </Box>
-
+            </Stack>
               <Button
                 sx={{
                   background: '#053662',
@@ -237,12 +239,13 @@ export default function AuthorizationList() {
                 Filter by Facility Type{' '}
                 {expand ? <ArrowDropUp /> : <ArrowDropDown />}
               </Button>
-            </Stack>
+            </Grid>
+
           </Grid>
           {expand && (
             <Grid item xs={12}>
               <Grid item xs={12}>
-                <Grid container spacing={2} direction="row">
+                <Grid container spacing={2} direction={{ xs: 'column', md: 'row' }}>
                   <Grid item xs={3}>
                     <FormControlLabel
                       checked={omrrFilter}
@@ -279,8 +282,8 @@ export default function AuthorizationList() {
                   </Grid>
                 </Grid>
               </Grid>
-              <Grid item xs={12}>
-                <Grid container spacing={2} direction="row">
+              <Grid sx={{marginTop:'1em'}} item xs={12}>
+                <Grid container spacing={2} direction={{ xs: 'column', md: 'row' }}>
                   <Grid item xs={3}>
                     <FormControlLabel
                       checked={compostFacilityFilter}
@@ -308,7 +311,7 @@ export default function AuthorizationList() {
                   direction="row"
                   sx={{ marginTop: '0.1em' }}
                 >
-                  <Grid item xs={3}>
+                  <Grid item xs={12}>
                     <Button
                       sx={{
                         border: '1px solid #353433',
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index 2a61dd83..dac3302d 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -1,13 +1,5 @@
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Grid,
-  Link,
-  Typography,
-  CardHeader,
-} from '@mui/material'
+import { Card, CardActions, CardContent, CardHeader, CardMedia, Grid,
+  Link, Typography } from '@mui/material'
 import Button from '@mui/material/Button'
 import { Stack } from '@mui/system'
 import { useNavigate } from 'react-router'
@@ -16,8 +8,79 @@ import bcEarthImage from '@/assets/BC.svg'
 import identity from '@/assets/font-awesome-identity.svg'
 import govSvg from '@/assets/font-awesome-government.svg'
 import verification from '@/assets/font-awesome-verification.svg'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+function informationTypography() {
+  return <>
+    <Grid container direction={{ xs: 'column', lg: 'row' }}>
+      <Grid item xs={12}>
+        <Typography
+          sx={{
+            fontFamily: 'BCSans',
+            fontWeight: 400,
+            fontSize: 28,
+            color: '#000000',
+          }}
+          component="div"
+        >
+          Organic Recycling in B.C.
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Typography component="div">
+          <Link
+            sx={{ color: '#000000' }}
+            href={
+              'https://www2.gov.bc.ca/gov/content/environment/waste-management/food-and-organic-waste/regulations-guidelines'
+            }
+            target={'_blank'}
+          >
+            {' '}
+            <span style={{ textDecoration: 'underline' }}>
+              British Columbia's Organic Matter Recycling Regulation (OMRR):
+            </span>
+          </Link>
+          <ul>
+            <li>
+              Governs the construction and operation of compost facilities
+            </li>
+            {' '}
+            <li>
+              Regulates the production, distribution, storage, sale and use of
+              biosolids and compost
+            </li>
+            {' '}
+            <li>Controls how compost facilities are built and operated</li>
+            {' '}
+          </ul>
+          The B.C. government has a plan to update the regulation to:
+          <ul>
+            <li>Better protect of human and environment health</li>
+            <li>Increase engagement with Indigenous communities</li>
+            <li> Improve transparency around organic matter management</li>
+          </ul>{' '}
+          Learn about the planned changes in the{' '}
+          <Link
+            sx={{ color: '#000000' }}
+            href={
+              'https://www2.gov.bc.ca/assets/gov/environment/waste-management/organic-waste/reports-and-papers/omrr-public-update-june-2022.pdf'
+            }
+            target={'_blank'}
+          >
+            <span style={{ textDecoration: 'underline' }}>
+              project update report
+            </span>
+          </Link>
+        </Typography>
+      </Grid>
+    </Grid>
+  </>
+}
 
 export default function Dashboard() {
+  const theme = useTheme()
+  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
   const navigate = useNavigate()
   const buttonClicked = (route: string) => {
     navigate(route)
@@ -74,7 +137,7 @@ export default function Dashboard() {
           </Typography>
         </CardContent>
         <CardActions>
-          <Button
+          {/*<Button
             size="large"
             sx={{
               margin: '1em 0em 3em 3em',
@@ -89,7 +152,7 @@ export default function Dashboard() {
             }}
           >
             Search on a map
-          </Button>
+          </Button>*/}
           <Button
             size="large"
             sx={{
@@ -111,84 +174,41 @@ export default function Dashboard() {
     </Card>
   )
   const infoCard = (
-    <Card
-      sx={{
-        padding: '1em 0.475em 0.5em',
-        backgroundColor: '#FCC85D',
-        borderRadius: '0px',
-      }}
+    <Grid container direction={{ xs: 'column', lg: 'row' }}
+          sx={{
+            margin: '0em 0em 0em 0em',
+            padding: '1em 3em 0.475em 3em',
+            backgroundColor: '#FCC85D',
+            borderRadius: '0px',
+          }}
     >
-      <CardMedia
-        component="div"
-        sx={{
-          position: 'absolute',
-          width: '80%',
-          height: '30%',
-          backgroundImage: `url(${bcEarthImage})`,
-          backgroundSize: 'contain',
-          backgroundPosition: 'right',
-        }}
-      />
-      <CardContent
-        sx={{
-          margin: '0em 0em 0em 2em',
-        }}
-      >
-        <Typography
+      {mdMatches &&
+        <><CardMedia
+          image={bcEarthImage}
           sx={{
-            fontFamily: 'BC Sans',
-            fontWeight: 400,
-            fontSize: 28,
-            color: '#000000',
+            position: 'absolute',
+            width: '80%',
+            height: '30%',
+            backgroundSize: 'contain',
+            backgroundPosition: 'right',
           }}
-          component="div"
-        >
-          Organic Recycling in B.C.
-        </Typography>
-        <Typography component="div">
-          <Link
-            sx={{ color: '#000000' }}
-            href={
-              'https://www2.gov.bc.ca/gov/content/environment/waste-management/food-and-organic-waste/regulations-guidelines'
-            }
-            target={'_blank'}
-          >
-            {' '}
-            <span style={{ textDecoration: 'underline' }}>
-              British Columbia's Organic Matter Recycling Regulation (OMRR):
-            </span>
-          </Link>
-          <ul>
-            <li>
-              Governs the construction and operation of compost facilities
-            </li>{' '}
-            <li>
-              Regulates the production, distribution, storage, sale and use of
-              biosolids and compost
-            </li>{' '}
-            <li>Controls how compost facilities are built and operated</li>{' '}
-          </ul>
-          The B.C. government has a plan to update the regulation to:
-          <ul>
-            <li>Better protect of human and environment health</li>
-            <li>Increase engagement with Indigenous communities</li>
-            <li> Improve transparency around organic matter management</li>
-          </ul>{' '}
-          Learn about the planned changes in the{' '}
-          <Link
-            sx={{ color: '#000000' }}
-            href={
-              'https://www2.gov.bc.ca/assets/gov/environment/waste-management/organic-waste/reports-and-papers/omrr-public-update-june-2022.pdf'
-            }
-            target={'_blank'}
-          >
-            <span style={{ textDecoration: 'underline' }}>
-              project update report
-            </span>
-          </Link>
-        </Typography>
-      </CardContent>
-    </Card>
+        />
+          {informationTypography()}
+        </>
+      }
+      {!mdMatches &&
+        <><Grid item xs={12}>
+         <img
+           src={bcEarthImage}  alt="BC Earth"/>
+        </Grid>
+          <Grid item xs={12}>
+            {informationTypography()}
+          </Grid>
+        </>
+      }
+
+
+    </Grid>
   )
 
   return (
@@ -196,7 +216,7 @@ export default function Dashboard() {
       {headerCard}
       {infoCard}
       <Grid container spacing={3}>
-        <Grid item xs={3} sx={{ margin: '3em 0em 0em 3em' }}>
+        <Grid item xs={12} sx={{ margin: '3em 0em 0em 3em' }}>
           <Typography
             sx={{
               fontSize: 28,
@@ -207,8 +227,8 @@ export default function Dashboard() {
             Learn more
           </Typography>
         </Grid>
-        <Grid item xs={11.3} sx={{ margin: '1em 0em 3em 3em' }}>
-          <Grid container spacing={2} direction={{ xs: 'column', md: 'row' }}>
+        <Grid item xs={12} sx={{ margin: '1em 2em 3em 3em' }}>
+          <Grid container spacing={1} direction={{ xs: 'column', md: 'row' }}>
             <Grid item xs={12} md={4}>
               <Card elevation={0}>
                 <CardHeader
@@ -261,7 +281,6 @@ export default function Dashboard() {
                       target={'_blank'}
                       href="https://www2.gov.bc.ca/gov/content/environment/waste-management/waste-discharge-authorization"
                     >
-                      {' '}
                       Process and procedures {'>'}
                     </Link>
                   }
@@ -305,7 +324,6 @@ export default function Dashboard() {
                       target={'_blank'}
                       href="https://www2.gov.bc.ca/gov/content/environment/natural-resource-stewardship/natural-resource-law-enforcement/environmental-compliance"
                     >
-                      {' '}
                       Compliance and enforcement {'>'}
                     </Link>
                   }
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index cb722ac8..20c06163 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -3,6 +3,8 @@ import Button from '@mui/material/Button'
 import { ArrowUpward } from '@mui/icons-material'
 import Divider from '@mui/material/Divider'
 import Stack from '@mui/material/Stack'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 const styles = {
   appBar: {
@@ -21,16 +23,18 @@ const styles = {
 }
 
 export default function Footer() {
+  const theme = useTheme()
+  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
   return (
     <AppBar position="relative" sx={styles.appBar} color="default">
       <Toolbar>
-        <Grid container spacing={1} justifyContent="center">
+        <Grid container direction={{ xs: 'column', lg: 'row' }} justifyContent="center">
           <Grid item xs={10}>
             <Stack
-              direction="row"
+              direction={{ xs: 'column', lg: 'row' }}
               alignItems={'center'}
               justifyContent="center"
-              divider={<Divider sx={{
+              divider={mdMatches && <Divider sx={{
                 height: '1em', color: '#ffffff', borderColor: '#ffffff', alignContent: 'center'
                 , alignItems: 'center', alignSelf: 'center', justifyItems: 'center', justifyContent: 'center',
               }} orientation="vertical" flexItem />}
@@ -44,16 +48,15 @@ export default function Footer() {
               >
                 Home
               </Link>
-
               <Link
                 sx={styles.footerButton}
-                id="footer-about"
+                color="primary"
+                id="footer-copyright"
                 target="_blank"
-                href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca"
+                href="https://gov.bc.ca/copyright"
               >
-                About gov.bc.ca
+                Copyright
               </Link>
-
               <Link
                 sx={styles.footerButton}
                 id="footer-disclaimer"
@@ -81,27 +84,6 @@ export default function Footer() {
               >
                 Accessibility
               </Link>
-
-              <Link
-                sx={styles.footerButton}
-                color="primary"
-                id="footer-copyright"
-                target="_blank"
-                href="https://gov.bc.ca/copyright"
-              >
-                Copyright
-              </Link>
-
-              <Link
-                sx={styles.footerButton}
-                color="primary"
-                id="footer-contact"
-                target="_blank"
-                href="https://www2.gov.bc.ca/gov/content/home/contact-us"
-              >
-                Contact Us
-              </Link>
-
             </Stack>
           </Grid>
           <Grid item xs={1} justifyContent="end">
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index a42aab4e..540d81a6 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore
 import BCGovLogo from '@/assets/gov-bc-logo-horiz.png'
 import { AppBar, IconButton, Toolbar } from '@mui/material'
 import Typography from '@mui/material/Typography'
@@ -9,17 +8,6 @@ const styles = {
     backgroundColor: '#053662',
     borderBottom: '0.1em solid rgb(252, 186, 25) !important',
   },
-  toolbar: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  footerButton: {
-    margin: '0.2em',
-    padding: '0.2em',
-    color: '#ffffff',
-    backgroundColor: '#ffffff',
-  },
 }
 export default function Header() {
   return (
@@ -27,23 +15,12 @@ export default function Header() {
       <Toolbar sx={{ justifyContent: 'space-between' }} id="back-to-top-anchor">
         <img  alt="Logo" src={BCGovLogo} />
         <Typography sx={{
-          /* Application Name */
-
-          width: '9.5em',
-          height: '2.25em',
-
-          /* regular/H4 */
-          fontFamily: 'BC Sans',
+          fontFamily: 'BCSans',
           fontStyle: 'normal',
           fontWeight: 400,
           fontSize: '1.5em',
           lineHeight: '2.25em',
-          /* identical to box height, or 150% */
-
           color:' #FFFFFF'
-
-
-
         }}>
           Organics Info
         </Typography>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 7c5c88ac..d5c5084f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { ThemeProvider } from '@emotion/react'
-import { CssBaseline } from '@mui/material'
+import { Container, CssBaseline } from '@mui/material'
 import theme from './theme'
 import App from './App'
 import { store } from './app/store'