diff --git a/package-lock.json b/package-lock.json
index d9e2d54..fd0a6ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3600,6 +3600,9 @@
       "peer": true
     },
     "node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
@@ -3621,6 +3624,16 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "dev": true,
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -5205,6 +5218,16 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -5497,6 +5520,13 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/globals": {
       "version": "13.22.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz",
@@ -7136,6 +7166,16 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@@ -7505,6 +7545,9 @@
       }
     },
     "node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
diff --git a/public/images/donateOrcasound/orcasound.jpg b/public/images/donateOrcasound/orcasound.jpg
new file mode 100644
index 0000000..74f9fd7
Binary files /dev/null and b/public/images/donateOrcasound/orcasound.jpg differ
diff --git a/public/images/donateOrcasound/volunteers.jpg b/public/images/donateOrcasound/volunteers.jpg
new file mode 100644
index 0000000..911c0ae
Binary files /dev/null and b/public/images/donateOrcasound/volunteers.jpg differ
diff --git a/src/components/Donate/DonateOrcasound.tsx b/src/components/Donate/DonateOrcasound.tsx
new file mode 100644
index 0000000..1c085cb
--- /dev/null
+++ b/src/components/Donate/DonateOrcasound.tsx
@@ -0,0 +1,138 @@
+import { Box, Button, Typography } from '@mui/material'
+import { styled } from '@mui/material'
+import Image from 'next/image'
+
+import theme from '../../styles/theme'
+
+interface DonateOrcasoundProps {
+  donateOrcasoundImage: string
+  donateOrcasoundTitle: string
+  donateOrcasoundMessage?: string
+  donateVolunteersImage: string
+  donateVolunteersTitle: string
+  donateVolunteersMessage?: string
+}
+
+const DonateContainer = styled(Box)(({ theme }) => ({
+  margin: '2vw 0',
+  flex: 1,
+  borderRadius: '15px',
+  padding: '2vw',
+  border: '1px solid black',
+  boxShadow: '0 4px 8px 0 rgba(185, 210, 225, 1)',
+  display: 'flex',
+  flexDirection: 'column',
+}))
+
+const ImageContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '1em',
+  overflow: 'hidden',
+  margin: '0 10px',
+}))
+
+const DonateOrcasound = (props: DonateOrcasoundProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        /** Uncheck this two lines if donate cards are too large in */
+        // margin: '0 auto',  wide screen
+        // maxWidth: '1000px',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'stretch',
+        gap: '2vw',
+        flexWrap: 'wrap',
+        [theme.breakpoints.down('sm')]: {
+          flexDirection: 'column',
+        },
+      }}
+    >
+      <DonateContainer>
+        <Typography
+          fontSize={'1.5rem'}
+          textAlign="center"
+          sx={{ marginBottom: '2vw' }}
+        >
+          {props.donateOrcasoundTitle}
+        </Typography>
+        <ImageContainer>
+          <Image
+            src={props.donateOrcasoundImage}
+            alt="Picture of Donate to Orcasound"
+            quality={100}
+            layout="responsive"
+            objectFit="contain"
+          />
+        </ImageContainer>
+        <Typography sx={{ margin: '10px' }}>
+          {props.donateOrcasoundMessage}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: 'auto',
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              backgroundColor: '#1B2B7B',
+              borderRadius: '20px',
+              margin: '10px',
+              // width is not necessary here since the Box is already centering the button
+            }}
+          >
+            Donate
+          </Button>
+        </Box>
+      </DonateContainer>
+      <DonateContainer>
+        <Typography
+          fontSize={'1.5rem'}
+          textAlign="center"
+          sx={{ marginBottom: '2vw' }}
+        >
+          {props.donateVolunteersTitle}
+        </Typography>
+        <ImageContainer>
+          <Image
+            src={props.donateVolunteersImage}
+            alt="Picture of Donate to Volunteers"
+            quality={100}
+            layout="responsive"
+            objectFit="contain"
+          />
+        </ImageContainer>
+        <Typography sx={{ margin: '10px' }}>
+          {props.donateVolunteersMessage}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: 'auto',
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              backgroundColor: '#1B2B7B',
+              borderRadius: '20px',
+              margin: '10px',
+              width: 'fit-content',
+            }}
+          >
+            {' '}
+            Support
+          </Button>
+        </Box>
+      </DonateContainer>
+    </Box>
+  )
+}
+
+export default DonateOrcasound
diff --git a/src/components/DonatePartners/DonatePartners.jsx b/src/components/Donate/DonatePartners.jsx
similarity index 100%
rename from src/components/DonatePartners/DonatePartners.jsx
rename to src/components/Donate/DonatePartners.jsx
diff --git a/src/components/TopBanner.jsx b/src/components/TopBanner.jsx
index 61a063e..d3d1c66 100644
--- a/src/components/TopBanner.jsx
+++ b/src/components/TopBanner.jsx
@@ -1,5 +1,6 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Box, IconButton, Slide, Typography } from '@mui/material'
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined'
+import { Box, IconButton, Slide } from '@mui/material'
 import { styled } from '@mui/material'
 import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
@@ -7,39 +8,37 @@ import { Link as ScrollElement } from 'react-scroll'
 
 const TopScreen = styled(Box)(({ theme }) => ({
   position: 'relative',
-  overflow: 'hidden',
-  height: '90vh',
+  overflow: 'clip',
+  aspectRatio: '2.9',
+  width: '100%',
   [theme.breakpoints.down('sm')]: {
-    height: '68vh',
+    minHeight: '26vh',
+    aspectRatio: '2.03',
   },
 }))
 
 const TitleScreen = styled(Box)(({ theme }) => ({
   position: 'relative',
-  minHeight: '85vh',
-  maxHeight: '85vh',
+  height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   color: '#fff',
-  paddingBottom: '100px',
-  [theme.breakpoints.down('sm')]: {
-    minHeight: '68vh',
-    maxHeight: '68vh',
-    paddingBottom: '200px',
-  },
 }))
 
 const ScrollDownButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
-  bottom: '0',
-  padding: '0',
+  margin: '0 auto',
+  left: 0,
+  right: 0,
+  height: '15px',
+  width: '15px',
   display: 'flex',
+  bottom: '0',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  height: '15px',
   transition: 'all 0.5s ease-in-out',
   '&:hover': {
     transform: 'translateY(5px)',
@@ -51,19 +50,37 @@ const ScrollDownButton = styled(IconButton)(({ theme }) => ({
 
 const PageDesc = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  bottom: '0',
-  left: '10px',
-  backgroundColor: '#080d26',
+  borderRadius: '10px',
+  marginBottom: '10%',
+  fontSize: '1.25em',
+  right: '0px',
+  backgroundColor: '#1b2b7bcf',
   width: '40vw',
   maxWidth: '450px',
-  margin: '10px 25px',
-  padding: '20px',
+  padding: '1em',
   letterSpacing: '0.75px',
   [theme.breakpoints.down('sm')]: {
-    left: '0',
-    margin: '0',
-    width: '100%',
-    maxWidth: '100vw',
+    right: '0',
+    width: '68vw',
+    maxWidth: '70vw',
+    maxHeight: '230px',
+    fontSize: '1em',
+  },
+}))
+
+const ImageContainer = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  marginLeft: '0',
+  marginRight: '0',
+  left: 0,
+  right: 0,
+  width: '100%',
+  height: '150%',
+  minHeight: '250px',
+  top: '-50%',
+  [theme.breakpoints.down('sm')]: {
+    top: '-60%',
+    height: '180%',
   },
 }))
 
@@ -76,33 +93,42 @@ const TopBanner = ({ bannerImg, pageTitle, pageDesc, scrollToId }) => {
 
   return (
     <TopScreen>
-      <Image
-        alt={pageTitle ?? ''}
-        src={bannerImg}
-        layout="fill"
-        objectFit="cover"
-        quality={100}
-      />
+      <ImageContainer>
+        <Image
+          alt={pageTitle ?? ''}
+          src={bannerImg}
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+        />
+      </ImageContainer>
       <Slide
         in={checked}
         direction="up"
         {...(checked ? { timeout: 1000 } : {})}
       >
         <TitleScreen>
-          <Typography
-            variant="h1"
-            sx={{ fontSize: '10vw', marginBottom: '2vw', fontWeight: '500' }}
-          >
-            {pageTitle}
-          </Typography>
           <ScrollElement to={scrollToId} smooth={true} spy={true}>
             <ScrollDownButton>
-              <ExpandMoreIcon sx={{ fontSize: '5vw', color: '#ffffff' }} />
+              <ExpandMoreOutlinedIcon
+                sx={{
+                  fontSize: '5vw',
+                  '& path': {
+                    stroke: 'black',
+                    strokeWidth: '0.3',
+                    fill: 'white',
+                  },
+                }}
+              />
               <ExpandMoreIcon
                 sx={{
                   fontSize: '5vw',
-                  color: '#ffffff',
                   transform: 'translateY(-3.5vw)',
+                  '& path': {
+                    stroke: 'black',
+                    strokeWidth: '0.3',
+                    fill: 'white',
+                  },
                 }}
               />
             </ScrollDownButton>
diff --git a/src/pages/donate.jsx b/src/pages/donate.jsx
index 3cb9c79..7953807 100644
--- a/src/pages/donate.jsx
+++ b/src/pages/donate.jsx
@@ -1,9 +1,12 @@
-import { Box, Button } from '@mui/material'
+import { Box } from '@mui/material'
 import Head from 'next/head'
 import React from 'react'
 
+import donateOrcasoundImage from '../../public/images/donateOrcasound/orcasound.jpg'
+import donateVolunteersImage from '../../public/images/donateOrcasound/volunteers.jpg'
 import topbanner from '../../public/images/srkw2-17.jpg'
-import DonatePartners from '../components/DonatePartners/DonatePartners'
+import DonateOrcasound from '../components/Donate/DonateOrcasound'
+import DonatePartners from '../components/Donate/DonatePartners'
 import TopBanner from '../components/TopBanner'
 
 export const Donate = () => {
@@ -15,9 +18,7 @@ export const Donate = () => {
       <TopBanner
         bannerImg={topbanner}
         pageTitle={`Donate`}
-        pageDesc={`There are many ways to help in the recovering of marine life, 
-        especially for the Souther Resident Killer Whales that call the Salish Sea home. 
-        Check out the ways you can help below!`}
+        pageDesc={`Help protect marine life like the Southern Resident Killer whales by donating today`}
         scrollToId={`donate`}
       />
       <br />
@@ -27,32 +28,17 @@ export const Donate = () => {
           display: 'flex',
           flexDirection: 'column',
           padding: 'max(3vw, 15px)',
+          paddingTop: '0',
         }}
       >
-        <Box>
-          {`The only way you can donate to Orcasound is through our parner-organizations. 
-            Help us and our Orcasound network members by making a charitable contribution to our partners, many of whom are 501(c)3 organizations. 
-            Check out the links below to help strengthen and grow our network, while supporting our on-going conservation, research, and educational efforts.`}
-        </Box>
-        <br />
-        <br />
-        <Box>
-          {`You can also directly support the many dedicated volunteers who help make Orcasound keep running and improve over time. 
-           Take a look at our “Hacker Hall of Fame” and/or our Github repositories and consider sponsoring the work of our most-dedicated contributors.`}
-        </Box>
-        <br />
-        <br />
-        <Button
-          variant="contained"
-          sx={{
-            backgroundColor: '#1B2B7B',
-            borderRadius: '20px',
-            width: 'fit-content',
-          }}
-        >
-          {' '}
-          Donate Now
-        </Button>
+        <DonateOrcasound
+          donateOrcasoundImage={donateOrcasoundImage}
+          donateOrcasoundTitle="Donate to Orcasound"
+          donateOrcasoundMessage="Help us build and matain the technology to listen to orcas in the world."
+          donateVolunteersImage={donateVolunteersImage}
+          donateVolunteersTitle="Donate to Volunteers"
+          donateVolunteersMessage="Support those who keep the orcasound website and hydrophone nodes running."
+        />
         <br />
         <DonatePartners />
       </Box>