diff --git a/frontend/src/components/generic/PageHeader/index.js b/frontend/src/components/generic/PageHeader/index.js
index 6b93855a..28f71c22 100644
--- a/frontend/src/components/generic/PageHeader/index.js
+++ b/frontend/src/components/generic/PageHeader/index.js
@@ -1,6 +1,5 @@
 import React from 'react'
-
-import { Link, Typography } from '@mui/material'
+import { Link, Typography, Box } from '@mui/material'
 
 const PageHeader = ({
     heading,
@@ -9,32 +8,45 @@ const PageHeader = ({
     link = null,
     alignment = 'center',
 }) => {
-    const styling = {
-        center: 'tw-items-center tw-text-center',
-        left: 'tw-items-start tw-text-left',
-        right: 'tw-items-end tw-text-right',
+    const alignmentMap = {
+        center: 'center',
+        left: 'flex-start',
+        right: 'flex-end',
     }
 
     return (
-        <div className={`tw-flex tw-flex-col tw-gap-2 ${styling[alignment]}`}>
+        <Box
+            display="flex"
+            flexDirection="column"
+            gap={2}
+            alignItems={alignmentMap[alignment]}
+            textAlign={alignment}
+        >
             <Typography
-                className="tw-font-bold tw-tracking-tight"
                 variant="h3"
                 component="h3"
+                fontWeight="bold"
+                sx={{ letterSpacing: '-0.5px' }}
             >
                 {heading}
             </Typography>
-            <div className="tw-flex tw-gap-2">
-                <Typography
-                    className="tw-tracking-tight tw-font-medium"
-                    variant="h6"
-                    component="h6"
-                >
-                    {subheading}
-                </Typography>
-                <Typography variant="body1" color="secondary" component="p">
-                    {details}
-                </Typography>
+
+            <Box display="flex" flexDirection="column" gap={1}>
+                {subheading && (
+                    <Typography
+                        variant="h6"
+                        component="h6"
+                        fontWeight="medium"
+                        sx={{ letterSpacing: '-0.25px' }}
+                    >
+                        {subheading}
+                    </Typography>
+                )}
+                {details && (
+                    <Typography variant="body1" color="secondary">
+                        {details}
+                    </Typography>
+                )}
                 {!!link && (
                     <Link
                         component="a"
@@ -45,8 +57,8 @@ const PageHeader = ({
                         Open in new tab
                     </Link>
                 )}
-            </div>
-        </div>
+            </Box>
+        </Box>
     )
 }
 
diff --git a/frontend/src/pages/_hackerpack/index.js b/frontend/src/pages/_hackerpack/index.js
index 819b4544..929a4664 100644
--- a/frontend/src/pages/_hackerpack/index.js
+++ b/frontend/src/pages/_hackerpack/index.js
@@ -1,37 +1,20 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Typography, Divider, Button } from '@mui/material'
-
 import { useNavigate, useParams } from 'react-router'
 import HackerpackDetail from 'components/hackerpack/HackerpackDetail'
-import PageHeader from 'components/generic/PageHeader'
 import Footer from 'components/layouts/Footer'
 import PageWrapper from 'components/layouts/PageWrapper'
 import GlobalNavBar from 'components/navbars/GlobalNavBar'
 import Container from 'components/generic/Container'
-
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { Helmet } from 'react-helmet'
 import config from 'constants/config'
 import * as DashboardSelectors from 'reducers/dashboard/selectors'
 import { useSelector } from 'react-redux'
-
-// const useStyles = styled(theme => ({
-//     wrapper: {
-//         height: '100%',
-//         display: 'flex',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         padding: theme.spacing(3),
-//         background: 'black',
-//         color: 'white',
-//     },
-// }))
+import PageHeader from 'components/generic/PageHeader'
 
 export default () => {
     const navigate = useNavigate()
-    // const classes = useStyles()
-
     const { slug } = useParams()
     const event = useSelector(DashboardSelectors.event)
 
@@ -42,7 +25,6 @@ export default () => {
             setHackerpacks(event.hackerpacks)
         }
     }, [event, slug])
-    console.log(event)
 
     return (
         <PageWrapper
@@ -61,7 +43,6 @@ export default () => {
                     property="og:title"
                     content="Junction App || Hackerpack"
                 />
-
                 <meta
                     name="twitter:title"
                     content="Junction App || Hackerpack"
@@ -78,7 +59,6 @@ export default () => {
                     name="twitter:description"
                     content="Login to redeem our awesome hackerpack offers!"
                 />
-
                 <meta name="og:type" content="website" />
                 <meta property="og:image" content={config.SEO_IMAGE_URL} />
                 <meta name="twitter:image" content={config.SEO_IMAGE_URL} />
@@ -91,6 +71,7 @@ export default () => {
                     content={config.SEO_TWITTER_HANDLE}
                 />
             </Helmet>
+
             <Container center wrapperClass={'classes.backButtonWrapper'}>
                 <Button onClick={() => navigate('/')}>
                     <ArrowBackIosIcon style={{ color: 'black' }} />
@@ -99,6 +80,7 @@ export default () => {
                     </Typography>
                 </Button>
             </Container>
+
             <Container center>
                 <PageHeader
                     heading="Hackerpack"
@@ -106,13 +88,19 @@ export default () => {
                 />
                 <Divider variant="middle" />
                 {hackerpacks.map(hackerpack => (
-                    <HackerpackDetail hackerpack={hackerpack} />
+                    <HackerpackDetail
+                        key={hackerpack.id}
+                        hackerpack={hackerpack}
+                    />
                 ))}
                 <Box p={2}>
                     <Typography color="textSecondary" variant="subtitle1">
                         Anything you would like to see here in the future?
-                        Contact us at partnerships@hackjunction.com with your
-                        suggestion.
+                        Contact us at{' '}
+                        <a href="mailto:partnerships@hackjunction.com">
+                            partnerships@hackjunction.com
+                        </a>{' '}
+                        with your suggestion.
                     </Typography>
                 </Box>
             </Container>
diff --git a/frontend/src/pages/_home/index.js b/frontend/src/pages/_home/index.js
index 9c05de25..cba8b4a7 100644
--- a/frontend/src/pages/_home/index.js
+++ b/frontend/src/pages/_home/index.js
@@ -105,20 +105,36 @@ export default () => {
                 </Container>
                 <Divider size={20} />
                 <Container center small>
-                    <Grid>
+                    {/* Logo Centered */}
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            mb: 2,
+                        }}
+                    >
                         <Image
                             defaultImage={require('assets/logos/emblem_black.png')}
-                            transformation={{
-                                width: 150,
-                            }}
+                            transformation={{ width: 150 }}
                         />
-                        <Typography variant="h4" align="center">
-                            {t('Platform_organise_hack_', {
-                                owner: config.PLATFORM_OWNER_NAME,
-                            })}
-                        </Typography>
-                    </Grid>
-                    <Grid container justifyContent="center" alignItems="center">
+                    </Box>
+
+                    {/* Heading Centered */}
+                    <Typography variant="h4" align="center" sx={{ mb: 3 }}>
+                        {t('Platform_organise_hack_', {
+                            owner: config.PLATFORM_OWNER_NAME,
+                        })}
+                    </Typography>
+
+                    {/* Buttons Centered Horizontally with Spacing */}
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            gap: 2,
+                            mb: 4,
+                        }}
+                    >
                         <Button
                             color="theme_lightgray"
                             variant="outlinedNew"
@@ -135,52 +151,50 @@ export default () => {
                         >
                             {t('Pricing_')}
                         </Button>
-                    </Grid>
+                    </Box>
+
                     <Divider size={4} />
                 </Container>
+
                 <Divider size={20} />
-                <Container center small>
-                    <Divider size={1} />
-                    <Typography variant="h3" align="center">
+
+                <Container maxWidth="sm" sx={{ textAlign: 'center', py: 8 }}>
+                    <Typography variant="h3" gutterBottom>
                         {t('New_to_', {
                             owner: config.PLATFORM_OWNER_NAME_CAPS,
                         })}
                     </Typography>
-                    <Divider size={3} />
 
                     <Typography
                         variant="body1"
-                        align="center"
-                        style={{ fontSize: '24px' }}
+                        sx={{ fontSize: '20px', mb: 3 }}
                     >
                         {t('Junction_info_', {
                             owner: config.PLATFORM_OWNER_NAME,
                         })}
                     </Typography>
-                    <Divider size={3} />
+
                     <Typography
                         variant="body1"
-                        align="center"
-                        style={{ fontSize: '24px' }}
+                        sx={{ fontSize: '20px', mb: 5 }}
                     >
                         {t('More_info_', {
                             owner: config.PLATFORM_OWNER_NAME,
-                        })}
+                        })}{' '}
                         <ExternalLink href={config.PLATFORM_OWNER_WEBSITE}>
                             {t('More_info_link_')}
                         </ExternalLink>
                     </Typography>
-                </Container>
 
-                <Divider size={20} />
-                <Container center>
-                    <Typography variant="h4" align="center">
+                    <Typography variant="h4" sx={{ mb: 3 }}>
                         {t('Join_hackerpack_')}
                     </Typography>
+
                     <Button
                         color="theme_lightgray"
                         variant="outlinedNew"
                         strong
+                        size="large"
                         onClick={() => navigate('/hackerpack')}
                     >
                         {t('To_hackerpack_')}
diff --git a/package-lock.json b/package-lock.json
index d28ae04f..07424327 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2181,9 +2181,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001692",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz",
-            "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==",
+            "version": "1.0.30001722",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001722.tgz",
+            "integrity": "sha512-DCQHBBZtiK6JVkAGw7drvAMK0Q0POD/xZvEmDp6baiMMP6QXXk9HpD6mNYBZWhOPG6LvIDb82ITqtWjhDckHCA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -2197,7 +2197,8 @@
                     "type": "github",
                     "url": "https://github.com/sponsors/ai"
                 }
-            ]
+            ],
+            "license": "CC-BY-4.0"
         },
         "node_modules/canvas": {
             "version": "3.0.1",
@@ -6814,15 +6815,6 @@
             "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-3.2.0.tgz",
             "integrity": "sha512-EqX4pwDPrt3MuOAAUBMU0Tk5kR/YcCM5fNPEzgCO2zJ5HfX0vbiH9HbJglnyeQsN96Kznae6MWD47pZB5avTrg=="
         },
-        "node_modules/pkginfo": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.4.1.tgz",
-            "integrity": "sha512-8xCNE/aT/EXKenuMDZ+xTVwkT8gsoHN2z/Q29l80u0ppGEXVvsKRzNMbtKhg8LS8k1tJLAHHylf6p4VFmP6XUQ==",
-            "extraneous": true,
-            "engines": {
-                "node": ">= 0.4.0"
-            }
-        },
         "node_modules/posix-character-classes": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",