diff --git a/package-lock.json b/package-lock.json
index 7db2c043d..2792c032d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@mui/material": "^5.12.2",
         "@mui/styled-engine-sc": "^5.12.0",
         "@mui/system": "^5.12.1",
+        "@mui/utils": "^5.14.18",
         "@mui/x-data-grid": "^6.16.2",
         "@mui/x-date-pickers": "^6.5.0",
         "@tanstack/react-query": "^4.32.0",
@@ -3627,11 +3628,12 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.14.16",
-      "license": "MIT",
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
+      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
       "dependencies": {
         "@babel/runtime": "^7.23.2",
-        "@types/prop-types": "^15.7.9",
+        "@types/prop-types": "^15.7.10",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -4561,8 +4563,9 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.9",
-      "license": "MIT"
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/proper-lockfile": {
       "version": "4.1.3",
@@ -17233,10 +17236,12 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.14.16",
+      "version": "5.14.18",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
+      "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
       "requires": {
         "@babel/runtime": "^7.23.2",
-        "@types/prop-types": "^15.7.9",
+        "@types/prop-types": "^15.7.10",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       }
@@ -17882,7 +17887,9 @@
       "version": "4.0.1"
     },
     "@types/prop-types": {
-      "version": "15.7.9"
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "@types/proper-lockfile": {
       "version": "4.1.3",
diff --git a/package.json b/package.json
index 7eb904907..8d4994950 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@mui/material": "^5.12.2",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/system": "^5.12.1",
+    "@mui/utils": "^5.14.18",
     "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.5.0",
     "@tanstack/react-query": "^4.32.0",
diff --git a/src/components/Home/HomeSection.jsx b/src/components/Home/HomeSection.jsx
index 1b98cf41c..a8eeff803 100644
--- a/src/components/Home/HomeSection.jsx
+++ b/src/components/Home/HomeSection.jsx
@@ -2,14 +2,15 @@
 import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 /**
  * Represents a home section component
  *
  * @memberof Home
- * @name HomeSecton
+ * @name HomeSection
  * @param {object} Props - the component props
  * @param {string} Props.componentImageSrc - image src
  * @param {string} Props.componentImageAlt - image alt
@@ -19,6 +20,7 @@ import Button from '@mui/material/Button';
  * @param {string} Props.href - section button href
  * @param {string} Props.label - section button aria-label
  * @param {boolean} Props.isReallySmallScreen - screen size
+ * @param {boolean} Props.hasMargin - gives marginBottom
  * @returns {React.JSX.Element} - the home section component
  */
 const HomeSection = ({
@@ -29,9 +31,10 @@ const HomeSection = ({
   button,
   href,
   label,
-  isReallySmallScreen
+  isReallySmallScreen,
+  hasMargin
 }) => (
-  <>
+  <Stack mb={hasMargin ? 8 : null} alignItems="center">
     <Box
       component="img"
       src={componentImageSrc}
@@ -42,25 +45,26 @@ const HomeSection = ({
     />
     <Typography
       variant="h2"
+      mb="24px"
       sx={{
         color: 'primary.main',
-        textAlign: 'center',
-        marginBottom: '24px',
         fontSize: '28px'
       }}
     >
       <strong>{title}</strong>
     </Typography>
-    <Typography
-      sx={{
-        color: 'primary.dark',
-        width: isReallySmallScreen ? '100%' : '85%',
-        marginBottom: '24px',
-        textAlign: 'center'
-      }}
-    >
-      {description}
-    </Typography>
+    {description && (
+      <Typography
+        data-testid="testDescription"
+        sx={{
+          color: 'primary.dark',
+          width: isReallySmallScreen ? '100%' : '85%',
+          marginBottom: '24px'
+        }}
+      >
+        {description}
+      </Typography>
+    )}
     {button && (
       <Button
         variant="contained"
@@ -75,7 +79,7 @@ const HomeSection = ({
         {button}
       </Button>
     )}
-  </>
+  </Stack>
 );
 
 export default HomeSection;
diff --git a/src/components/Home/KeyFeatures.jsx b/src/components/Home/KeyFeatures.jsx
index c8f3a74af..3824ba75f 100644
--- a/src/components/Home/KeyFeatures.jsx
+++ b/src/components/Home/KeyFeatures.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 /**
@@ -17,23 +18,33 @@ import Typography from '@mui/material/Typography';
  * @returns {React.JSX.Element} the KeyFeatures section component
  */
 const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => (
-  <>
+  <Stack alignItems="center">
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
         gap: '10px',
         marginBottom: '14px',
         color: 'primary.main'
       }}
     >
       {icon}
-      <strong>{title}</strong>
+      <Typography
+        variant="h6"
+        component="h3"
+        sx={{
+          color: 'primary.main',
+          textAlign: 'center'
+        }}
+      >
+        <strong>{title}</strong>
+      </Typography>
     </Box>
     <Typography
       variant="body1"
       sx={{
-        width: isReallySmallScreen ? 1 : '67%',
+        width: isReallySmallScreen ? 1 : '85%',
         textAlign: 'center',
         color: 'primary.dark',
         marginBottom: '50px'
@@ -41,7 +52,7 @@ const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => (
     >
       {description}
     </Typography>
-  </>
+  </Stack>
 );
 
 export default KeyFeatures;
diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx
index ffdc545a2..d359ea6d6 100644
--- a/src/layouts/Layout.jsx
+++ b/src/layouts/Layout.jsx
@@ -35,7 +35,7 @@ const Layout = ({ ariaLabel, children }) => {
     >
       <NavBar />
       {session.info.isLoggedIn && <Breadcrumbs />}
-      {children}
+      <main>{children}</main>
       {session.info.isLoggedIn && <InactivityMessage />}
       <Footer />
       <NotificationContainer notifications={state.notifications} />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 85074881b..17c2f2545 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,20 +1,24 @@
 // React Imports
-import React from 'react';
+import React, { useRef } from 'react';
 // Material UI Imports
+import ArrowCircleDownOutlinedIcon from '@mui/icons-material/ArrowCircleDownOutlined';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Diversity1Icon from '@mui/icons-material/Diversity1';
+import IconButton from '@mui/material/IconButton';
 import SecurityIcon from '@mui/icons-material/Security';
 import Stack from '@mui/material/Stack';
 import SupportIcon from '@mui/icons-material/Support';
+import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
+import { visuallyHidden } from '@mui/utils';
 // Components Import
 import { HomeSection, KeyFeatures } from '@components/Home';
 
 /**
  * Home - First Page you encounter in PASS before login.
- * Should not display if you are already logged in
+ * Should not display if you are already logged in.
  *
  * @memberof Pages
  * @name Home
@@ -23,9 +27,73 @@ import { HomeSection, KeyFeatures } from '@components/Home';
 const Home = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const iconSize = isReallySmallScreen ? 'medium' : 'large';
+  const aboutRef = useRef(null);
+
+  const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });
+
+  // Logo section elements
+  const heading = (
+    <>
+      PASS
+      {/* This is added for better screen reader experience by adding a pause
+          between the acronym and the expanded acronym. */}
+      <Box component="span" sx={visuallyHidden}>
+        :
+      </Box>
+    </>
+  );
+  const subheading = 'Personal Access System for Services';
+
+  const logoSection = isReallySmallScreen ? (
+    <Typography component="h1" color="primary">
+      <Stack
+        component="span"
+        justifyContent="center"
+        alignItems="center"
+        spacing={2}
+        mb={2}
+        data-testid="testStack"
+      >
+        <Typography variant="h1" component="span" fontWeight="500" fontSize="72px">
+          {heading}
+        </Typography>
+        <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
+        <Typography variant="h4" component="span" fontWeight="600" mb={8}>
+          {subheading}
+        </Typography>
+      </Stack>
+    </Typography>
+  ) : (
+    <Typography component="h1" color="primary">
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        spacing={4}
+        mb={18}
+        data-testid="testStack"
+      >
+        <Stack
+          component="span"
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          spacing={4}
+        >
+          <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
+          <Typography variant="h1" component="span" fontWeight="500" fontSize="144px">
+            {heading}
+          </Typography>
+        </Stack>
+        <Typography variant="h3" component="span" fontWeight="600">
+          {subheading}
+        </Typography>
+      </Stack>
+    </Typography>
+  );
 
   return (
-    <Container component="main" sx={{ width: '100vw' }}>
+    <Container sx={{ width: '100vw' }}>
       <Box
         sx={{
           margin: '18px 0',
@@ -36,48 +104,67 @@ const Home = () => {
           padding: '20px'
         }}
       >
-        <section id="home">
+        <section id="home" data-testid="testHomeSection">
           <Stack alignItems="center" justifyContent="center">
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/web-security-green.png"
-              componentImageAlt=""
-              title="Keep Your Documents Safe and Secure Using Decentralized Technology"
-              description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process."
-              button="Request a Demo"
-              href="mailto:hugh@codeforpdx.org"
-            />
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/app-green.png"
-              componentImageAlt=""
-              title="An App for Caseworkers"
-              description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
-            />
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/key-features-green.png"
-              componentImageAlt=""
-              title="Key Features"
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<SecurityIcon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Secure Storage"
-              description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<Diversity1Icon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Nonprofit-Caseworker Integration"
-              description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<SupportIcon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Support Service"
-              description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."
-            />
+            <Box
+              height="calc(100vh - 64px)"
+              display="flex"
+              flexDirection="column"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {logoSection}
+              <Typography color="secondary.main" sx={{ fontSize: '24px' }}>
+                Learn More
+              </Typography>
+              <IconButton aria-label="Scroll down" color="secondary" onClick={handleClick}>
+                <ArrowCircleDownOutlinedIcon sx={{ fontSize: '32px' }} />
+              </IconButton>
+            </Box>
+            <div ref={aboutRef}>
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/web-security-green.png"
+                componentImageAlt=""
+                title="Keep Your Documents Safe and Secure Using Decentralized Technology"
+                description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process."
+                button="Request a Demo"
+                href="mailto:hugh@codeforpdx.org"
+                hasMargin
+              />
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/app-green.png"
+                componentImageAlt=""
+                title="An App for Caseworkers"
+                description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
+                hasMargin
+              />
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/key-features-green.png"
+                componentImageAlt=""
+                title="Key Features"
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<SecurityIcon fontSize={iconSize} />}
+                title="Secure Storage"
+                description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<Diversity1Icon fontSize={iconSize} />}
+                title="Nonprofit-Caseworker Integration"
+                description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<SupportIcon fontSize={iconSize} />}
+                title="Support Service"
+                description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."
+              />
+            </div>
           </Stack>
         </section>
       </Box>
diff --git a/test/components/Home/HomeSection.test.jsx b/test/components/Home/HomeSection.test.jsx
index 7ae668707..b2723ded6 100644
--- a/test/components/Home/HomeSection.test.jsx
+++ b/test/components/Home/HomeSection.test.jsx
@@ -4,70 +4,81 @@ import { expect, it, describe } from 'vitest';
 import { HomeSection } from '@components/Home';
 import createMatchMedia from '../../helpers/createMatchMedia';
 
-const MockFormSectionDefault = () => <HomeSection description="Example Text" />;
-const MockFormSectionMobile = () => <HomeSection isReallySmallScreen description="Example Text" />;
-const MockFormSectionButton = () => <HomeSection button="button" />;
-const MockFormSectionButtonMobile = () => <HomeSection isReallySmallScreen button="button" />;
+const MockSection = () => <HomeSection />;
+const MockSectionDescription = () => <HomeSection description="Example Text" />;
+const MockSectionDescriptionMobile = () => (
+  <HomeSection isReallySmallScreen description="Example Text" />
+);
+const MockSectionButton = () => <HomeSection button="button" />;
+const MockSectionButtonMobile = () => <HomeSection isReallySmallScreen button="button" />;
 
 describe('Button rendering', () => {
   it('renders no button', () => {
-    const { queryByRole } = render(<MockFormSectionDefault />);
+    const { queryByRole } = render(<MockSection />);
     const button = queryByRole('button');
 
     expect(button).toBeNull();
   });
 
   it('renders button', () => {
-    const { queryByRole } = render(<MockFormSectionButton />);
+    const { queryByRole } = render(<MockSectionButton />);
     const button = queryByRole('button');
-    const cssProperties = getComputedStyle(button);
+    const buttonStyles = getComputedStyle(button);
 
     expect(button).not.toBeNull();
-    expect(cssProperties.width).toBe('25%');
+    expect(buttonStyles.width).not.toBe('100%');
   });
 
-  it('renders buttons mobile', () => {
+  it('renders button mobile', () => {
     window.matchMedia = createMatchMedia(599);
-    const { queryByRole } = render(<MockFormSectionButtonMobile />);
+    const { queryByRole } = render(<MockSectionButtonMobile />);
     const button = queryByRole('button');
-    const cssProperties = getComputedStyle(button);
+    const buttonStyles = getComputedStyle(button);
 
     expect(button).not.toBeNull();
-    expect(cssProperties.width).toBe('100%');
+    expect(buttonStyles.width).toBe('100%');
   });
 });
 
-describe('Default screen', () => {
-  it('renders 300px padding by default', () => {
-    const component = render(<MockFormSectionDefault />);
-    const adjustableBox = getComputedStyle(component.container.firstChild);
+describe('Description rendering', () => {
+  it('renders no description', () => {
+    const { queryByText } = render(<MockSection />);
+    const description = queryByText('Example Text');
 
-    expect(adjustableBox.width).toBe('300px');
+    expect(description).toBeNull();
   });
 
-  it('renders 85% padding by default', () => {
-    const { getByText } = render(<MockFormSectionDefault />);
-    const descriptionElement = getByText('Example Text');
-    const cssProperties = getComputedStyle(descriptionElement);
+  it('renders description', () => {
+    const { queryByText } = render(<MockSectionDescription />);
+    const description = queryByText('Example Text');
+    const descriptionStyles = getComputedStyle(description);
 
-    expect(cssProperties.width).toBe('85%');
+    expect(descriptionStyles.width).not.toBe('100%');
+  });
+
+  it('renders description mobile', () => {
+    window.matchMedia = createMatchMedia(599);
+    const { queryByText } = render(<MockSectionDescriptionMobile />);
+    const description = queryByText('Example Text');
+    const descriptionStyles = getComputedStyle(description);
+
+    expect(descriptionStyles.width).toBe('100%');
   });
 });
 
-describe('Mobile screen', () => {
-  window.matchMedia = createMatchMedia(599);
-  it('renders 80% padding by default', () => {
-    const component = render(<MockFormSectionMobile />);
-    const adjustableBox = getComputedStyle(component.container.firstChild);
+describe('Image rendering', () => {
+  it('renders image at 300px width on desktop', () => {
+    const { queryByRole } = render(<MockSectionDescription />);
+    const image = getComputedStyle(queryByRole('img'));
 
-    expect(adjustableBox.width).toBe('80%');
+    expect(image.width).toBe('300px');
   });
 
-  it('renders 100% padding by default', () => {
-    const { getByText } = render(<MockFormSectionMobile />);
-    const descriptionElement = getByText('Example Text');
-    const cssProperties = getComputedStyle(descriptionElement);
+  it('renders image at 80% width on mobile', () => {
+    window.matchMedia = createMatchMedia(599);
+    const { queryByRole } = render(<MockSectionDescriptionMobile />);
+    const image = getComputedStyle(queryByRole('img'));
 
-    expect(cssProperties.width).toBe('100%');
+    expect(image.width).toBe('80%');
   });
 });
diff --git a/test/components/Home/KeyFeatures.test.jsx b/test/components/Home/KeyFeatures.test.jsx
index 888066189..b83a5e2c0 100644
--- a/test/components/Home/KeyFeatures.test.jsx
+++ b/test/components/Home/KeyFeatures.test.jsx
@@ -7,19 +7,19 @@ import createMatchMedia from '../../helpers/createMatchMedia';
 const MockKeyFeaturesDefault = () => <KeyFeatures description="Example Text" />;
 const MockKeyFeaturesMobile = () => <KeyFeatures isReallySmallScreen description="Example Text" />;
 
-it('renders 67% width default', () => {
+it('renders less width by default', () => {
   const { getByText } = render(<MockKeyFeaturesDefault />);
-  const component = getByText('Example Text');
-  const cssProperty = getComputedStyle(component);
+  const description = getByText('Example Text');
+  const descriptionStyles = getComputedStyle(description);
 
-  expect(cssProperty.width).toBe('67%');
+  expect(descriptionStyles.width).not.toBe('100%');
 });
 
 it('renders 100% width mobile', () => {
   window.matchMedia = createMatchMedia(599);
   const { getByText } = render(<MockKeyFeaturesMobile />);
-  const component = getByText('Example Text');
-  const cssProperty = getComputedStyle(component);
+  const description = getByText('Example Text');
+  const descriptionStyles = getComputedStyle(description);
 
-  expect(cssProperty.width).toBe('100%');
+  expect(descriptionStyles.width).toBe('100%');
 });
diff --git a/test/pages/Home.test.jsx b/test/pages/Home.test.jsx
index d1903c243..042ea2ec9 100644
--- a/test/pages/Home.test.jsx
+++ b/test/pages/Home.test.jsx
@@ -1,24 +1,32 @@
-import { render, cleanup } from '@testing-library/react';
 import React from 'react';
-import { expect, it, afterEach, describe } from 'vitest';
-import { ThemeProvider } from '@mui/material/styles';
+import { render, cleanup, screen } from '@testing-library/react';
+import { expect, describe, it, afterEach } from 'vitest';
+import { Home } from '@pages';
+import createMatchMedia from '../helpers/createMatchMedia';
 
-import Home from '../../src/pages/Home';
-import theme from '../../src/theme';
+describe('Home Page', () => {
+  afterEach(cleanup);
 
-const HomeWithContexts = () => (
-  <ThemeProvider theme={theme}>
-    <Home />
-  </ThemeProvider>
-);
+  it('renders with correct order of logoSection on mobile', () => {
+    window.matchMedia = createMatchMedia(599);
+    render(<Home />);
+    const h1 = screen.getByTestId('testStack');
+    const children = Array.from(h1.children);
 
-describe('Home Page', () => {
-  afterEach(() => {
-    cleanup();
+    expect(children.length).toBe(3);
+    expect(children[0].tagName.toLowerCase()).toBe('span');
+    expect(children[1].tagName.toLowerCase()).toBe('img');
+    expect(children[2].tagName.toLowerCase()).toBe('span');
   });
 
-  it('renders', () => {
-    const { container } = render(<HomeWithContexts />);
-    expect(container).toMatchSnapshot();
+  it('rrenders with correct order of logoSection on desktop', () => {
+    window.matchMedia = createMatchMedia(1200);
+    render(<Home />);
+    const h1 = screen.getByTestId('testStack');
+    const children = Array.from(h1.children);
+
+    expect(children.length).toBe(2);
+    expect(children[0].tagName.toLowerCase()).toBe('span');
+    expect(children[1].tagName.toLowerCase()).toBe('span');
   });
 });
diff --git a/test/pages/__snapshots__/Home.test.jsx.snap b/test/pages/__snapshots__/Home.test.jsx.snap
deleted file mode 100644
index 2aa8c98cf..000000000
--- a/test/pages/__snapshots__/Home.test.jsx.snap
+++ /dev/null
@@ -1,166 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Home Page > renders 1`] = `
-<div>
-  <main
-    class="MuiContainer-root MuiContainer-maxWidthLg css-1sj9by6-MuiContainer-root"
-  >
-    <div
-      class="MuiBox-root css-1gqbj6n"
-    >
-      <section
-        id="home"
-      >
-        <div
-          class="MuiStack-root css-1z0rh7t-MuiStack-root"
-        >
-          <img
-            alt=""
-            class="MuiBox-root css-1v5z18m"
-            src="/assets/web-security-green.png"
-          />
-          <h2
-            class="MuiTypography-root MuiTypography-h2 css-1loew7y-MuiTypography-root"
-          >
-            <strong>
-              Keep Your Documents Safe and Secure Using Decentralized Technology
-            </strong>
-          </h2>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-acfnqh-MuiTypography-root"
-          >
-            Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process.
-          </p>
-          <a
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1fdjaxb-MuiButtonBase-root-MuiButton-root"
-            href="mailto:hugh@codeforpdx.org"
-            tabindex="0"
-          >
-            Request a Demo
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </a>
-          <img
-            alt=""
-            class="MuiBox-root css-1v5z18m"
-            src="/assets/app-green.png"
-          />
-          <h2
-            class="MuiTypography-root MuiTypography-h2 css-1loew7y-MuiTypography-root"
-          >
-            <strong>
-              An App for Caseworkers
-            </strong>
-          </h2>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-acfnqh-MuiTypography-root"
-          >
-            PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them.
-          </p>
-          <img
-            alt=""
-            class="MuiBox-root css-1v5z18m"
-            src="/assets/key-features-green.png"
-          />
-          <h2
-            class="MuiTypography-root MuiTypography-h2 css-1loew7y-MuiTypography-root"
-          >
-            <strong>
-              Key Features
-            </strong>
-          </h2>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-acfnqh-MuiTypography-root"
-          />
-          <div
-            class="MuiBox-root css-1tohi9w"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
-              data-testid="SecurityIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"
-              />
-            </svg>
-            <strong>
-              Secure Storage
-            </strong>
-          </div>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-lfz6e5-MuiTypography-root"
-          >
-            Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format.
-          </p>
-          <div
-            class="MuiBox-root css-1tohi9w"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
-              data-testid="Diversity1Icon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                cx="4"
-                cy="14"
-                r="2"
-              />
-              <path
-                d="M1.22 17.58C.48 17.9 0 18.62 0 19.43V21h4.5v-1.61c0-.83.23-1.61.63-2.29-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58z"
-              />
-              <circle
-                cx="20"
-                cy="14"
-                r="2"
-              />
-              <path
-                d="M22.78 17.58c-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V21H24v-1.57c0-.81-.48-1.53-1.22-1.85zm-6.54-.93c-1.17-.52-2.61-.9-4.24-.9-1.63 0-3.07.39-4.24.9C6.68 17.13 6 18.21 6 19.39V21h12v-1.61c0-1.18-.68-2.26-1.76-2.74zM9 12c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
-              />
-              <path
-                d="M2.48 10.86C2.17 10.1 2 9.36 2 8.6 2 6.02 4.02 4 6.6 4c2.68 0 3.82 1.74 5.4 3.59C13.57 5.76 14.7 4 17.4 4 19.98 4 22 6.02 22 8.6c0 .76-.17 1.5-.48 2.26.65.31 1.18.82 1.53 1.44.6-1.2.95-2.42.95-3.7C24 4.9 21.1 2 17.4 2c-2.09 0-4.09.97-5.4 2.51C10.69 2.97 8.69 2 6.6 2 2.9 2 0 4.9 0 8.6c0 1.28.35 2.5.96 3.7.35-.62.88-1.13 1.52-1.44z"
-              />
-            </svg>
-            <strong>
-              Nonprofit-Caseworker Integration
-            </strong>
-          </div>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-lfz6e5-MuiTypography-root"
-          >
-            The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely.
-          </p>
-          <div
-            class="MuiBox-root css-1tohi9w"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
-              data-testid="SupportIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm7.46 7.12-2.78 1.15c-.51-1.36-1.58-2.44-2.95-2.94l1.15-2.78c2.1.8 3.77 2.47 4.58 4.57zM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zM9.13 4.54l1.17 2.78c-1.38.5-2.47 1.59-2.98 2.97L4.54 9.13c.81-2.11 2.48-3.78 4.59-4.59zM4.54 14.87l2.78-1.15c.51 1.38 1.59 2.46 2.97 2.96l-1.17 2.78c-2.1-.81-3.77-2.48-4.58-4.59zm10.34 4.59-1.15-2.78c1.37-.51 2.45-1.59 2.95-2.97l2.78 1.17c-.81 2.1-2.48 3.77-4.58 4.58z"
-              />
-            </svg>
-            <strong>
-              Support Service
-            </strong>
-          </div>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-lfz6e5-MuiTypography-root"
-          >
-            Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services.
-          </p>
-        </div>
-      </section>
-    </div>
-  </main>
-</div>
-`;