diff --git a/components/homepage/hero/Hero.tsx b/components/homepage/hero/Hero.tsx
index 55cfea1e..9c4233d7 100644
--- a/components/homepage/hero/Hero.tsx
+++ b/components/homepage/hero/Hero.tsx
@@ -1,6 +1,60 @@
+import { useState, useRef } from 'react'
+import { useInterval } from 'usehooks-ts'
+import { motion, useAnimation, useInView } from 'framer-motion'
 import { Container, Stack, Heading, Text } from '@chakra-ui/react'
 
+const word = {
+  hidden: {
+    opacity: 1,
+    transition: {
+      duration: 3.0,
+    },
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      delay: 0.5,
+      staggerChildren: 0.05,
+    },
+  },
+}
+
+const letter = {
+  hidden: {
+    opacity: 0,
+    y: 50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+}
+
+const wordsToDisplay = [
+  'Celebrating',
+  'Encouraging',
+  'Galvanising',
+  'Uplifting',
+]
+
 export default function Hero() {
+  const [wordIndex, setWordIndex] = useState(0)
+  const controls = useAnimation()
+  const ref = useRef(null)
+  const isInView = useInView(ref)
+
+  useInterval(() => {
+    const nextIndex =
+      wordIndex === wordsToDisplay.length - 1 ? 0 : wordIndex + 1
+    setWordIndex(nextIndex)
+
+    if (isInView) {
+      controls.start('visible')
+    } else {
+      controls.start('hidden')
+    }
+  }, 5000)
+
   return (
     <>
       <Container maxW="7xl" mt="1rem">
@@ -23,7 +77,22 @@ export default function Hero() {
               wordBreak="break-word"
               textAlign={{ base: 'left', md: 'center' }}
             >
-              Celebrating place-based community{' '}
+              <motion.span
+                variants={word}
+                initial="hidden"
+                animate="visible"
+                ref={ref}
+                key={wordsToDisplay[wordIndex]}
+              >
+                {wordsToDisplay[wordIndex].split('').map((char, index) => {
+                  return (
+                    <motion.span key={`${char}-${index}`} variants={letter}>
+                      {char}
+                    </motion.span>
+                  )
+                })}
+              </motion.span>{' '}
+              <span>place-based community </span>
               <Text
                 as="span"
                 fontWeight={600}
diff --git a/components/homepage/web-cards/WebCards.tsx b/components/homepage/web-cards/WebCards.tsx
index 2a7bf0ef..a4dbc7f9 100644
--- a/components/homepage/web-cards/WebCards.tsx
+++ b/components/homepage/web-cards/WebCards.tsx
@@ -59,7 +59,7 @@ const Card = ({ web }) => {
             alt={`Image representing ${web.title} web`}
             src={web.image}
             fill={true}
-            style={{ objectFit: 'cover' }}
+            style={{ objectFit: 'cover', objectPosition: 'bottom' }}
           />
         </Box>
         <Stack>
@@ -77,3 +77,8 @@ const Card = ({ web }) => {
   )
 }
 
+
+
+
+
+
diff --git a/components/layout/Layout.module.scss b/components/layout/Layout.module.scss
index 174d403c..7740cec7 100644
--- a/components/layout/Layout.module.scss
+++ b/components/layout/Layout.module.scss
@@ -1,4 +1,5 @@
 .root {
+  margin-top: 1rem;
   p {
     font-size: 1.125rem;
     line-height: 1.6;
diff --git a/components/nav/Nav.module.scss b/components/nav/Nav.module.scss
index daef302e..4b896ae4 100644
--- a/components/nav/Nav.module.scss
+++ b/components/nav/Nav.module.scss
@@ -4,7 +4,7 @@
 
   &:hover {
     text-decoration: none;
-    color: rgb(93, 106, 126);
+    color: #4A5568;
   }
 
   &.active {
diff --git a/components/nav/Nav.tsx b/components/nav/Nav.tsx
index e757c5a0..f377de44 100644
--- a/components/nav/Nav.tsx
+++ b/components/nav/Nav.tsx
@@ -212,14 +212,14 @@ const DesktopNav = ({ currentPathname, navItems }) => {
             {navItem.children && (
               <PopoverContent
                 border={0}
-                boxShadow={'xl'}
+                boxShadow="2xl"
                 bg="white"
                 p={2}
-                rounded={'xl'}
+                rounded="xl"
               >
                 <Stack>
                   {navItem.children.map((child) => (
-                    <DesktopSubNav key={child.label} {...child} />
+                    <DesktopSubNavItem key={child.label} {...child} />
                   ))}
                 </Stack>
               </PopoverContent>
@@ -231,7 +231,7 @@ const DesktopNav = ({ currentPathname, navItems }) => {
   )
 }
 
-const DesktopSubNav = ({ label, href }) => {
+const DesktopSubNavItem = ({ label, href }) => {
   return (
     <Link
       href={href}
diff --git a/package-lock.json b/package-lock.json
index ac7532ae..1dfeeb7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "tinymce": "6.7.0",
         "use-debounce": "9.0.4",
         "use-local-storage": "3.0.0",
+        "usehooks-ts": "2.9.1",
         "vis-network-react": "github:DinerIsmail/vis-network-react"
       },
       "devDependencies": {
@@ -12441,6 +12442,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@@ -21733,6 +21747,12 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
+    "usehooks-ts": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "requires": {}
+    },
     "util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
diff --git a/package.json b/package.json
index 3270cd2d..7c29c157 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "tinymce": "6.7.0",
     "use-debounce": "9.0.4",
     "use-local-storage": "3.0.0",
+    "usehooks-ts": "2.9.1",
     "vis-network-react": "github:DinerIsmail/vis-network-react"
   },
   "devDependencies": {