diff --git a/src/components/Contacts/ContactListTable.jsx b/src/components/Contacts/ContactListTable.jsx
index 9ca771d02..dbe234acb 100644
--- a/src/components/Contacts/ContactListTable.jsx
+++ b/src/components/Contacts/ContactListTable.jsx
@@ -35,6 +35,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
   const contactWebIds = contacts.map(({ webId }) => webId);
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   const handleSendMessage = (contactId) => {
     setShowMessageModal(!showMessageModal);
@@ -55,7 +56,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
         minHeight: '500px'
       }}
     >
-      {isSmallScreen ? (
+      {isSmallScreen || isSmallScreenHeight ? (
         <ContactListTableMobile
           data-testid="ContactListTableMobile"
           contacts={contacts}
diff --git a/src/components/Documents/DocumentTable.jsx b/src/components/Documents/DocumentTable.jsx
index 658db4254..01c01adc7 100644
--- a/src/components/Documents/DocumentTable.jsx
+++ b/src/components/Documents/DocumentTable.jsx
@@ -37,6 +37,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
   const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
 
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   /**
    * Handles the local display of a document by opening it in a new window.
@@ -98,7 +99,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
       }}
       data-testid="document-table"
     >
-      {isMobile ? (
+      {isMobile || isSmallScreenHeight ? (
         <DocumentsMobile documents={documents} handlers={handlers} data-testid="documents-mobile" />
       ) : (
         <DocumentsDesktop
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 7d6f69576..52823bbb6 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -21,6 +21,7 @@ import RenderCopyrightAndLinksSection from './RenderCopyrightAndLinksSection';
 const Footer = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   return (
     <Box
@@ -38,14 +39,18 @@ const Footer = () => {
     >
       <Stack
         alignItems="center"
-        direction={isReallySmallScreen ? 'column' : 'row'}
-        spacing={isReallySmallScreen ? 1 : 4}
+        direction={isReallySmallScreen || isSmallScreenHeight ? 'column' : 'row'}
+        spacing={isReallySmallScreen || isSmallScreenHeight ? 1 : 4}
         divider={
           <Divider
-            orientation={isReallySmallScreen ? 'horizontal' : 'vertical'}
-            flexItem={isReallySmallScreen ? null : true}
+            orientation={isReallySmallScreen || isSmallScreenHeight ? 'horizontal' : 'vertical'}
+            flexItem={isReallySmallScreen || isSmallScreenHeight ? null : true}
             color={theme.palette.primary.main}
-            sx={isReallySmallScreen ? { height: '3px', width: 3 / 4 } : { width: '3px' }}
+            sx={
+              isReallySmallScreen || isSmallScreenHeight
+                ? { height: '3px', width: 3 / 4 }
+                : { width: '3px' }
+            }
           />
         }
       >
diff --git a/src/layouts/Breadcrumbs.jsx b/src/layouts/Breadcrumbs.jsx
index 853196c46..95fea1b8f 100644
--- a/src/layouts/Breadcrumbs.jsx
+++ b/src/layouts/Breadcrumbs.jsx
@@ -36,7 +36,11 @@ const Breadcrumbs = () => {
     <MUIBreadcrumbs
       aria-label="breadcrumb"
       separator={<NavigateNextIcon fontSize="small" />}
-      sx={{ margin: { xs: '20px', sm: '20px 80px' } }}
+      sx={{
+        margin: { xs: '20px', sm: '20px 80px' },
+        wordWrap: 'break-word',
+        overflowWrap: 'break-word'
+      }}
     >
       {crumbs.map((crumb, index) =>
         index !== crumbs.length - 1 ? (
@@ -47,11 +51,20 @@ const Breadcrumbs = () => {
               .replaceAll(' ', '-')
               .toLowerCase()}`}
             key={crumb}
+            style={{
+              wordBreak: 'break-word'
+            }}
           >
             {crumb}
           </Link>
         ) : (
-          <Typography component="h2" key={crumb}>
+          <Typography
+            component="h2"
+            key={crumb}
+            sx={{
+              wordBreak: 'break-word'
+            }}
+          >
             {crumb}
           </Typography>
         )
diff --git a/src/pages/Documents.jsx b/src/pages/Documents.jsx
index dcce47543..c67d7e969 100644
--- a/src/pages/Documents.jsx
+++ b/src/pages/Documents.jsx
@@ -28,6 +28,7 @@ const Documents = () => {
   const { setContact } = useContext(DocumentListContext);
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   // Documents related states
   const { session } = useSession();
@@ -107,7 +108,7 @@ const Documents = () => {
           size="small"
           onClick={() => handleAclPermissionsModal('container')}
           sx={{
-            width: isSmallScreen ? '165px' : '200px',
+            width: isSmallScreen || isSmallScreenHeight ? '165px' : '200px',
             borderColor: 'primary.main',
             padding: '6px 12px'
           }}
@@ -119,7 +120,10 @@ const Documents = () => {
           color="primary"
           size="small"
           onClick={() => setShowAddDocModal(true)}
-          sx={{ width: isSmallScreen ? '140px' : '180px', padding: '6px 12px' }}
+          sx={{
+            width: isSmallScreen || isSmallScreenHeight ? '140px' : '180px',
+            padding: '6px 12px'
+          }}
         >
           Add Document
         </Button>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 1635d1332..d30e4291a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -27,7 +27,8 @@ import { HomeSection, KeyFeatures } from '@components/Home';
 const Home = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const iconSize = isReallySmallScreen ? 'medium' : 'large';
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
+  const iconSize = isReallySmallScreen || isSmallScreenHeight ? 'medium' : 'large';
   const aboutRef = useRef(null);
 
   const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -45,64 +46,70 @@ const Home = () => {
   );
   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
-          color="primary.text"
-          variant="h1"
-          component="span"
-          fontWeight="500"
-          fontSize="72px"
-        >
-          {heading}
-        </Typography>
-        <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
-        <Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
-          {subheading}
-        </Typography>
-      </Stack>
-    </Typography>
-  ) : (
-    <Typography component="h1" color="primary.text">
-      <Stack
-        justifyContent="center"
-        alignItems="center"
-        spacing={4}
-        mb={18}
-        data-testid="testStack"
-      >
+  const logoSection =
+    isReallySmallScreen || isSmallScreenHeight ? (
+      <Typography component="h1" color="primary">
         <Stack
           component="span"
-          direction="row"
           justifyContent="center"
           alignItems="center"
-          spacing={4}
+          spacing={2}
+          mb={2}
+          data-testid="testStack"
         >
-          <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
           <Typography
             color="primary.text"
             variant="h1"
             component="span"
             fontWeight="500"
-            fontSize="144px"
+            fontSize="72px"
           >
             {heading}
           </Typography>
+          <Box
+            component="img"
+            src="/assets/PASSLogolightmode.png"
+            alt=""
+            width={isSmallScreenHeight ? '20%' : '50%'}
+          />
+          <Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
+            {subheading}
+          </Typography>
         </Stack>
-        <Typography color="primary.text" variant="h3" component="span" fontWeight="600">
-          {subheading}
-        </Typography>
-      </Stack>
-    </Typography>
-  );
+      </Typography>
+    ) : (
+      <Typography component="h1" color="primary.text">
+        <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
+              color="primary.text"
+              variant="h1"
+              component="span"
+              fontWeight="500"
+              fontSize="144px"
+            >
+              {heading}
+            </Typography>
+          </Stack>
+          <Typography color="primary.text" variant="h3" component="span" fontWeight="600">
+            {subheading}
+          </Typography>
+        </Stack>
+      </Typography>
+    );
 
   return (
     <Container sx={{ width: '100vw' }}>
@@ -135,7 +142,7 @@ const Home = () => {
             </Box>
             <div ref={aboutRef}>
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/web-security-blue.webp"
                 componentImageAlt=""
                 title="Keep Your Documents Safe and Secure Using Decentralized Technology"
@@ -145,7 +152,7 @@ const Home = () => {
                 hasMargin
               />
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/app-blue.webp"
                 componentImageAlt=""
                 title="An App for Caseworkers"
@@ -153,25 +160,25 @@ const Home = () => {
                 hasMargin
               />
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/key-features-blue.webp"
                 componentImageAlt=""
                 title="Key Features"
               />
               <KeyFeatures
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 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}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 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}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 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."
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index 77cf6a34d..fa899646f 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -135,6 +135,7 @@ const Profile = () => {
         alignItems: 'center',
         width: '100%',
         height: isSmallScreen ? 'auto' : '60dvh',
+        minHeight: '500px',
         margin: '20px auto',
         justifyContent: 'center'
       }}