diff --git a/website/app/components/hero/hero.tsx b/website/app/components/hero/hero.tsx
index 82feba6..b9e4b90 100644
--- a/website/app/components/hero/hero.tsx
+++ b/website/app/components/hero/hero.tsx
@@ -3,41 +3,40 @@ import ImportantDates, { Workshops } from '../page-components/important-dates'
 import { HomepageHeroPanel } from './hero-panel'
 
 export function Hero() {
-    return (
-        <Box overflowX="hidden">
-            <HomepageHeroPanel />
-            <Flex flexDirection="column" width="fit" mx="auto" maxWidth={800} gap={12}>
-                <Flex
-                    className={`paragraph-wrapper`}
-                    direction="column"
-                    fontSize="2xl"
-                    fontWeight="medium"
-                    color="white"
-                    gap={6}
-                    mx={{ base: 8, md: 6, lg: 'auto' }}
-                >
-                    <p>
-                        DDD Perth is Perth’s largest community run conference for the tech community. Our goal is to
-                        create an approachable event that appeals to the whole community, especially people that don’t
-                        normally get to attend or speak at conferences. The conference is run on a Saturday, and strives
-                        to be inclusive of everyone in the Perth tech community.
-                    </p>
-                    <p>
-                        DDD Perth started out its life as part of the Developer! Developer! Developer! series of events
-                        and while our heritage is as a developer-focussed conference, DDD Perth is not just for
-                        developers, but for all professionals in the software industry. These days we don’t expand DDD -
-                        it’s not an acronym for us anymore, but if people insist then we might say Designer, Developer
-                        and Data Scientist, or is it DevOps, Data architect, distributed tester?
-                    </p>
-                    <p>
-                        Check out the agenda and talks from previous years , or hear more about how we do what we do on
-                        our blog.
-                    </p>
-                </Flex>
+  return (
+    <Box overflowX="hidden">
+      <HomepageHeroPanel />
+      <Flex flexDirection="column" width="fit" mx="auto" maxWidth={800} gap={12}>
+        <Flex
+          className={`paragraph-wrapper`}
+          direction="column"
+          fontSize={{ base: 'lg', md: '2xl' }}
+          fontWeight="medium"
+          color="white"
+          gap={6}
+          mx={{ base: 8, md: 6, lg: 'auto' }}
+        >
+          <p>
+            DDD Perth is Perth’s largest community run conference for the tech community. Our goal is to create an
+            approachable event that appeals to the whole community, especially people that don’t normally get to attend
+            or speak at conferences. The conference is run on a Saturday, and strives to be inclusive of everyone in the
+            Perth tech community.
+          </p>
+          <p>
+            DDD Perth started out its life as part of the Developer! Developer! Developer! series of events and while
+            our heritage is as a developer-focussed conference, DDD Perth is not just for developers, but for all
+            professionals in the software industry. These days we don’t expand DDD - it’s not an acronym for us anymore,
+            but if people insist then we might say Designer, Developer and Data Scientist, or is it DevOps, Data
+            architect, distributed tester?
+          </p>
+          <p>
+            Check out the agenda and talks from previous years , or hear more about how we do what we do on our blog.
+          </p>
+        </Flex>
 
-                <ImportantDates />
-                <Workshops />
-            </Flex>
-        </Box>
-    )
+        <ImportantDates />
+        <Workshops />
+      </Flex>
+    </Box>
+  )
 }
diff --git a/website/app/components/page-components/important-dates.tsx b/website/app/components/page-components/important-dates.tsx
index 08f6952..03e9ec3 100644
--- a/website/app/components/page-components/important-dates.tsx
+++ b/website/app/components/page-components/important-dates.tsx
@@ -2,242 +2,250 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { Flex, styled } from 'styled-system/jsx'
 
 interface ImportantDateBoxProps {
-    datetime: string
-    day: string
-    date: string
-    time: string
-    event: string
-    eventCloseTitle?: string
-    eventCloseHref?: string
-    eventLive?: boolean
-    smallSidebar?: boolean // New prop for small sidebar
-    showOnlyLive?: boolean // New prop to filter only live events
+  datetime: string
+  day: string
+  date: string
+  time: string
+  event: string
+  eventCloseTitle?: string
+  eventCloseHref?: string
+  eventLive?: boolean
+  smallSidebar?: boolean // New prop for small sidebar
+  showOnlyLive?: boolean // New prop to filter only live events
 }
 
 const importantDatesData: ImportantDateBoxProps[] = [
-    {
-        datetime: '2024-06-14T00:00:00.000Z',
-        day: 'Friday',
-        date: 'Jun 14',
-        time: '8:00am',
-        event: 'Call for presentations open',
-        eventCloseTitle: 'CFP Closed',
-    },
-    {
-        datetime: '2024-06-21T00:00:00.000Z',
-        day: 'Friday',
-        date: 'Jun 21',
-        time: '8:00am',
-        event: 'Ticket sales open',
-        eventCloseTitle: 'Buy Tickets ↗',
-        eventCloseHref: '/tickets',
-        eventLive: true,
-    },
-    {
-        datetime: '2024-07-12T15:59:59.000Z',
-        day: 'Friday',
-        date: 'Jul 12',
-        time: '11:59pm',
-        event: 'Call for presentations close',
-        eventCloseTitle: 'CFP Closed',
-    },
-    {
-        datetime: '2024-07-22T16:00:00.000Z',
-        day: 'Tuesday',
-        date: 'Jul 23',
-        time: '12:00am',
-        event: 'Voting open',
-        eventCloseTitle: 'Voting Closed',
-    },
-    {
-        datetime: '2024-08-06T15:59:59.000Z',
-        day: 'Tuesday',
-        date: 'Aug 6',
-        time: '11:59pm',
-        event: 'Voting close',
-        eventCloseTitle: 'Voting Closed',
-    },
-    {
-        datetime: '2024-08-20T09:00:00.000Z',
-        day: 'Tuesday',
-        date: 'Aug 20',
-        time: '5:00pm',
-        event: 'Agenda published',
-        eventCloseTitle: 'View Agenda',
-        eventCloseHref: '/agenda',
-        eventLive: true,
-    },
-    {
-        datetime: '2024-11-15T09:15:00.000Z',
-        day: 'Friday',
-        date: 'Nov 15',
-        time: '05:15pm',
-        event: 'Ticket sales close',
-        eventLive: true,
-    },
-    {
-        datetime: '2024-11-16T00:00:00.000Z',
-        day: 'Saturday',
-        date: 'Nov 16',
-        time: '8:00am',
-        event: 'Conference day',
-        eventCloseTitle: 'Get Directions!',
-        eventLive: true,
-    },
+  {
+    datetime: '2024-06-14T00:00:00.000Z',
+    day: 'Friday',
+    date: 'Jun 14',
+    time: '8:00am',
+    event: 'Call for presentations open',
+    eventCloseTitle: 'CFP Closed',
+  },
+  {
+    datetime: '2024-06-21T00:00:00.000Z',
+    day: 'Friday',
+    date: 'Jun 21',
+    time: '8:00am',
+    event: 'Ticket sales open',
+    eventCloseTitle: 'Buy Tickets ↗',
+    eventCloseHref: '/tickets',
+    eventLive: true,
+  },
+  {
+    datetime: '2024-07-12T15:59:59.000Z',
+    day: 'Friday',
+    date: 'Jul 12',
+    time: '11:59pm',
+    event: 'Call for presentations close',
+    eventCloseTitle: 'CFP Closed',
+  },
+  {
+    datetime: '2024-07-22T16:00:00.000Z',
+    day: 'Tuesday',
+    date: 'Jul 23',
+    time: '12:00am',
+    event: 'Voting open',
+    eventCloseTitle: 'Voting Closed',
+  },
+  {
+    datetime: '2024-08-06T15:59:59.000Z',
+    day: 'Tuesday',
+    date: 'Aug 6',
+    time: '11:59pm',
+    event: 'Voting close',
+    eventCloseTitle: 'Voting Closed',
+  },
+  {
+    datetime: '2024-08-20T09:00:00.000Z',
+    day: 'Tuesday',
+    date: 'Aug 20',
+    time: '5:00pm',
+    event: 'Agenda published',
+    eventCloseTitle: 'View Agenda',
+    eventCloseHref: '/agenda',
+    eventLive: true,
+  },
+  {
+    datetime: '2024-11-15T09:15:00.000Z',
+    day: 'Friday',
+    date: 'Nov 15',
+    time: '05:15pm',
+    event: 'Ticket sales close',
+    eventLive: true,
+  },
+  {
+    datetime: '2024-11-16T00:00:00.000Z',
+    day: 'Saturday',
+    date: 'Nov 16',
+    time: '8:00am',
+    event: 'Conference day',
+    eventCloseTitle: 'Get Directions!',
+    eventLive: true,
+  },
 ]
 
 const ImportantDateBox: FC<ImportantDateBoxProps> = ({
-    datetime,
-    day,
-    date,
-    time,
-    event,
-    eventCloseTitle,
-    eventCloseHref,
-    eventLive,
-    smallSidebar,
-    showOnlyLive,
+  datetime,
+  day,
+  date,
+  time,
+  event,
+  eventCloseTitle,
+  eventCloseHref,
+  eventLive,
+  smallSidebar,
+  showOnlyLive,
 }) => {
-    if (showOnlyLive && !eventLive) {
-        return null
-    }
+  if (showOnlyLive && !eventLive) {
+    return null
+  }
 
-    const eventDate = useMemo(() => new Date(datetime), [datetime])
-    const currentDate = new Date()
-    const isPast = currentDate > eventDate
+  const eventDate = useMemo(() => new Date(datetime), [datetime])
+  const currentDate = new Date()
+  const isPast = currentDate > eventDate
 
-    const calculateDaysLeft = useCallback(() => {
-        const difference = +eventDate - +new Date()
-        return Math.ceil(difference / (1000 * 60 * 60 * 24))
-    }, [eventDate])
+  const calculateDaysLeft = useCallback(() => {
+    const difference = +eventDate - +new Date()
+    return Math.ceil(difference / (1000 * 60 * 60 * 24))
+  }, [eventDate])
 
-    const [daysLeft, setDaysLeft] = useState(calculateDaysLeft())
+  const [daysLeft, setDaysLeft] = useState(calculateDaysLeft())
 
-    useEffect(() => {
-        if (!isPast) {
-            const timer = setTimeout(
-                () => {
-                    setDaysLeft(calculateDaysLeft())
-                },
-                1000 * 60 * 60 * 24,
-            )
+  useEffect(() => {
+    if (!isPast) {
+      const timer = setTimeout(
+        () => {
+          setDaysLeft(calculateDaysLeft())
+        },
+        1000 * 60 * 60 * 24,
+      )
 
-            return () => clearTimeout(timer)
-        }
-    }, [calculateDaysLeft, daysLeft, isPast])
+      return () => clearTimeout(timer)
+    }
+  }, [calculateDaysLeft, daysLeft, isPast])
 
-    return (
-        <Flex
-            flexDirection="row"
-            justifyContent="space-between"
-            rounded="lg"
-            color={isPast ? '#C2C2FF' : '#FFF'}
-            shadow="sm"
-            bgGradient="to-r"
-            gradientFrom={isPast ? '#1F1F4E' : '#00BA8D4A'}
-            gradientTo={isPast ? '#151544' : '#FF00E91A'}
-            borderTop={isPast ? 'none' : '1px solid #FFFFFF2A'}
-            p={smallSidebar ? 2 : 4}
+  return (
+    <Flex
+      flexDirection="row"
+      justifyContent="space-between"
+      rounded="lg"
+      color={isPast ? '#C2C2FF' : '#FFF'}
+      shadow="sm"
+      bgGradient="to-r"
+      gradientFrom={isPast ? '#1F1F4E' : '#00BA8D4A'}
+      gradientTo={isPast ? '#151544' : '#FF00E91A'}
+      borderTop={isPast ? 'none' : '1px solid #FFFFFF2A'}
+      p={smallSidebar ? 2 : 4}
+    >
+      <Flex flexDirection="column">
+        <time dateTime={datetime} />
+        <styled.p fontSize={smallSidebar ? 'xs' : 'sm'} color="#C2C2FF">
+          {day} {date}, {time}
+        </styled.p>
+        <styled.h3
+          fontSize={{ base: smallSidebar ? 'md' : 'md', md: smallSidebar ? 'md' : 'lg' }}
+          fontWeight="semibold"
         >
-            <Flex flexDirection="column">
-                <time dateTime={datetime} />
-                <styled.p fontSize={smallSidebar ? 'xs' : 'sm'} color="#C2C2FF">
-                    {day} {date}, {time}
-                </styled.p>
-                <styled.h3 fontSize={smallSidebar ? 'sm' : 'lg'} fontWeight="semibold">
-                    {event}
-                </styled.h3>
-            </Flex>
+          {event}
+        </styled.h3>
+      </Flex>
 
-            {eventLive ? (
-                <styled.a
-                    href={eventCloseHref ? eventCloseHref : '#'}
-                    display="flex"
-                    flexDirection="column"
-                    alignItems="center"
-                    justifyContent="center"
-                    borderRightRadius={100}
-                    width={smallSidebar ? 100 : 150}
-                    fontSize={smallSidebar ? 'xs' : 'md'}
-                    paddingY={1}
-                    ml={smallSidebar ? 6 : 0}
-                    fontWeight="semibold"
-                    color={isPast ? '#520030' : '#FFF'}
-                    cursor="pointer"
-                    _hover={{ gradientTo: isPast ? '#FF52B7' : 'white/10' }}
-                    bgGradient="to-r"
-                    gradientFrom={isPast ? '#FF52B7' : 'white/10'}
-                    gradientTo={isPast ? '#FF8273' : 'white/5'}
-                >
-                    {!isPast && daysLeft > 0 ? (
-                        <div className="countdown">
-                            <span>{daysLeft} days left</span>
-                        </div>
-                    ) : (
-                        eventCloseTitle
-                    )}
-                </styled.a>
-            ) : !isPast && daysLeft > 0 ? (
-                <div className="countdown">
-                    <span>{daysLeft} days left</span>
-                </div>
-            ) : (
-                <styled.button
-                    disabled
-                    display="flex"
-                    flexDirection="column"
-                    alignItems="center"
-                    justifyContent="center"
-                    rounded="lg"
-                    width={smallSidebar ? 100 : 150}
-                    paddingY={1}
-                    color="#9c9cd7"
-                    bgGradient="to-r"
-                    gradientFrom="white/5"
-                    gradientTo="transparent"
-                >
-                    {eventCloseTitle}
-                </styled.button>
-            )}
-        </Flex>
-    )
+      {eventLive ? (
+        <styled.a
+          href={eventCloseHref ? eventCloseHref : '#'}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          borderRightRadius={100}
+          width={smallSidebar ? 100 : 150}
+          fontSize={smallSidebar ? 'xs' : 'md'}
+          paddingY={1}
+          ml={smallSidebar ? 6 : 0}
+          fontWeight="semibold"
+          color={isPast ? '#520030' : '#FFF'}
+          cursor="pointer"
+          _hover={{ gradientTo: isPast ? '#FF52B7' : 'white/10' }}
+          bgGradient="to-r"
+          gradientFrom={isPast ? '#FF52B7' : 'white/10'}
+          gradientTo={isPast ? '#FF8273' : 'white/5'}
+        >
+          {!isPast && daysLeft > 0 ? (
+            <div className="countdown">
+              <span>{daysLeft} days left</span>
+            </div>
+          ) : (
+            eventCloseTitle
+          )}
+        </styled.a>
+      ) : !isPast && daysLeft > 0 ? (
+        <div className="countdown">
+          <span>{daysLeft} days left</span>
+        </div>
+      ) : (
+        <styled.button
+          disabled
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          rounded="lg"
+          width={smallSidebar ? 100 : 150}
+          paddingY={1}
+          color="#9c9cd7"
+          bgGradient="to-r"
+          gradientFrom="white/5"
+          gradientTo="transparent"
+        >
+          {eventCloseTitle}
+        </styled.button>
+      )}
+    </Flex>
+  )
 }
 
 export const ImportantDates: React.FC<{ smallSidebar?: boolean; showOnlyLive?: boolean }> = ({
-    smallSidebar,
-    showOnlyLive,
+  smallSidebar,
+  showOnlyLive,
 }) => (
-    <Flex flexDirection="column" gap={2}>
-        <styled.h2 fontSize={smallSidebar ? 'md' : '4xl'} color="white" fontWeight="semibold" width="fit-content">
-            Important Dates
-        </styled.h2>
-        {importantDatesData.map((dateInfo, index) => (
-            <ImportantDateBox key={index} {...dateInfo} smallSidebar={smallSidebar} showOnlyLive={showOnlyLive} />
-        ))}
-    </Flex>
+  <Flex flexDirection="column" gap={2} mx={smallSidebar ? 0 : 4}>
+    <styled.h2
+      fontSize={{ base: smallSidebar ? 'lg' : 'lg', md: smallSidebar ? 'lg' : '3xl' }}
+      color="white"
+      fontWeight="semibold"
+      width="fit-content"
+    >
+      Important Dates
+    </styled.h2>
+    {importantDatesData.map((dateInfo, index) => (
+      <ImportantDateBox key={index} {...dateInfo} smallSidebar={smallSidebar} showOnlyLive={showOnlyLive} />
+    ))}
+  </Flex>
 )
 
 export const Workshops: React.FC = () => (
-    <Flex flexDirection="column" gap={2}>
-        <styled.h2 fontSize="4xl" color="white" fontWeight="semibold" width="fit-content">
-            Workshops
-        </styled.h2>
-        <styled.p fontSize="md" color="#C2C2FF" mb={4}>
-            DDD runs a bunch of workshops to help you come up with some amazing talks to submit to our CFP and a great
-            Bio to go with it.
-        </styled.p>
+  <Flex flexDirection="column" gap={2} mx={4}>
+    <styled.h2 fontSize={{ base: 'lg', md: '3xl' }} color="white" fontWeight="semibold" width="fit-content">
+      Workshops
+    </styled.h2>
+    <styled.p fontSize="md" color="#C2C2FF" mb={4}>
+      DDD runs a bunch of workshops to help you come up with some amazing talks to submit to our CFP and a great Bio to
+      go with it.
+    </styled.p>
 
-        <ImportantDateBox
-            datetime="2024-06-25T09:30:00.000Z"
-            day="Tuesday"
-            date="Jun 25"
-            time="05:30PM"
-            event="CFP & Bio Workshop - (In Person)"
-            eventCloseTitle="Book Now"
-            eventCloseHref="https://ti.to/dddperth/f2f-cfp-workshop-2024"
-            eventLive={false}
-        />
-    </Flex>
+    <ImportantDateBox
+      datetime="2024-06-25T09:30:00.000Z"
+      day="Tuesday"
+      date="Jun 25"
+      time="05:30PM"
+      event="CFP & Bio Workshop - (In Person)"
+      eventCloseTitle="Book Now"
+      eventCloseHref="https://ti.to/dddperth/f2f-cfp-workshop-2024"
+      eventLive={false}
+    />
+  </Flex>
 )
 
 export default ImportantDates