diff --git a/components/index/rotating-project.js b/components/index/rotating-project.js
new file mode 100644
index 000000000..fcdf0186d
--- /dev/null
+++ b/components/index/rotating-project.js
@@ -0,0 +1,199 @@
+import {
+  Box,
+  Card,
+  Heading,
+  Text,
+  Image,
+  Button,
+  Flex,
+  Badge,
+  Link
+} from 'theme-ui'
+import Icon from '../icon'
+import { useState, useEffect } from 'react'
+
+const RotatingProject = ({ project }) => {
+  const [views, setViews] = useState(null)
+  const [showBackstory, setShowBackstory] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/project-views', { method: 'POST' })
+      .then(r => r.json())
+      .then(data => setViews(data.views))
+  }, [])
+
+  if (!project) return null
+  return (
+    <Card
+      sx={{
+        p: 3,
+        background:
+          'linear-gradient(to bottom, rgba(255, 140, 55, 0.95) 0%, rgba(236, 55, 80, 0.95) 100%)',
+        borderRadius: 'extra',
+        // border: '1px solid rgba(255, 255, 255, 0.125)',
+        height: 'fit-content',
+        minHeight: '400px',
+        position: 'relative',
+        color: 'white',
+        transition: 'transform 0.2s ease-in-out',
+        ':hover': {
+          transform: 'scale(1.02)',
+          zIndex: 2
+        },
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      <Flex
+        sx={{ alignItems: 'center', mb: 2, justifyContent: 'space-between' }}
+      >
+        <Text
+          sx={{
+            px: 2,
+            backgroundColor: 'white',
+            borderRadius: 'default',
+            transform: 'rotate(-3deg)',
+            color: 'black',
+            // fontWeight: 'bold',
+            fontSize: 2,
+            userSelect: 'none'
+          }}
+        >
+          Project of the Week
+        </Text>
+        <Link
+          href={project.githubLink}
+          target="_blank"
+          sx={{ color: 'white', opacity: 0.8, ':hover': { opacity: 1 } }}
+        >
+          <Icon glyph="github" />
+        </Link>
+      </Flex>
+
+      {showBackstory ? (
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+          <Heading as="h3" variant="headline" mb={2}>
+            The Story
+          </Heading>
+          <Text
+            as="p"
+            sx={{ fontSize: 2, lineHeight: 'caption', mb: 3, flex: 1 }}
+          >
+            {project.backstory}
+          </Text>
+          <Button
+            onClick={() => setShowBackstory(false)}
+            variant="outline"
+            sx={{
+              width: '100%',
+              color: 'white',
+              borderColor: 'white',
+              ':hover': { bg: 'rgba(255,255,255,0.1)' }
+            }}
+          >
+            Back to Project
+          </Button>
+        </Box>
+      ) : (
+        <>
+          <Box
+            sx={{
+              position: 'relative',
+              mb: 3,
+              borderRadius: 'default',
+              overflow: project.layerUp ? 'visible' : 'hidden',
+              height: '150px'
+            }}
+          >
+            <Image
+              src={project.image}
+              alt={project.title}
+              sx={{
+                width: '100%',
+                height: '100%',
+                objectFit: project.layerUp ? 'contain' : 'cover',
+                bg: project.layerUp ? 'transparent' : 'sunken',
+                transform:
+                  'translateY(20px)' +
+                  (project.imageScale
+                    ? `scale(${project.imageScale})`
+                    : project.layerUp
+                      ? 'scale(1.5)'
+                      : 'none')
+              }}
+            />
+          </Box>
+
+          <Heading
+            as="h3"
+            variant="headline"
+            mb={1}
+            sx={{ fontSize: [2, 3], textShadow: '0 1px 2px rgba(0,0,0,0.375)' }}
+          >
+            {project.title}
+          </Heading>
+
+          <Text as="p" sx={{ fontSize: 1, opacity: 0.875, mb: 2 }}>
+            by {project.author}
+            {views && (
+              <>
+                {' '}
+                &bull; {views} view{views === 12345 ? '' : 's'}
+              </>
+            )}
+          </Text>
+
+          <Text
+            as="p"
+            mb={3}
+            sx={{
+              fontSize: 1,
+              lineHeight: 'caption',
+              textShadow: '0 1px 2px rgba(0,0,0,0.375)'
+            }}
+          >
+            {project.description}
+          </Text>
+
+          <Flex sx={{ gap: 2, mt: 'auto' }}>
+            {project.backstory && (
+              <Button
+                onClick={() => setShowBackstory(true)}
+                variant="outline"
+                sx={{
+                  flex: 1,
+                  color: 'white',
+                  borderColor: 'white',
+                  whiteSpace: 'nowrap',
+                  px: 2,
+                  ':hover': { bg: 'rgba(255,255,255,0.1)' }
+                }}
+              >
+                Read More
+              </Button>
+            )}
+            <Button
+              as="a"
+              href={project.demoLink}
+              target="_blank"
+              variant="outline"
+              sx={{
+                flex: 1,
+                color: 'white',
+                borderColor: 'white',
+                whiteSpace: 'nowrap',
+                px: 2,
+                display: !project.demoLink ? 'none' : '',
+                ':hover': { bg: 'rgba(255,255,255,0.1)' }
+              }}
+            >
+              Check it out
+            </Button>
+          </Flex>
+        </>
+      )}
+    </Card>
+  )
+}
+
+export default RotatingProject
diff --git a/lib/rotating-projects-data.js b/lib/rotating-projects-data.js
new file mode 100644
index 000000000..fbd8179c7
--- /dev/null
+++ b/lib/rotating-projects-data.js
@@ -0,0 +1,15 @@
+const featuredProject = {
+  title: 'Hydra',
+  description: 'A Nintendo Switch emulator for macOS',
+  backstory:
+    'Hydra is an in-development Nintendo Switch emulator for macOS. It was built by SamoZ256, a Hack Clubber, to explore the lorem ipsum dolor sit amet.',
+  image:
+    'https://raw.githubusercontent.com/SamoZ256/hydra/main/img/showcase.png',
+  demoLink: 'https://github.com/SamoZ256/hydra',
+  githubLink: 'https://github.com/SamoZ256/hydra',
+  author: 'SamoZ256',
+  layerUp: true,
+  imageScale: 1.2
+}
+
+export default featuredProject
diff --git a/pages/api/project-views.js b/pages/api/project-views.js
new file mode 100644
index 000000000..c40a771c6
--- /dev/null
+++ b/pages/api/project-views.js
@@ -0,0 +1,8 @@
+let views = 0
+
+export default function handler(req, res) {
+  if (req.method === 'POST') {
+    views++
+  }
+  res.status(200).json({ views })
+}
diff --git a/pages/index.js b/pages/index.js
index 64a9769c4..f50c84abd 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -48,6 +48,8 @@ import Aces from '../components/index/cards/aces'
 import Highway from '../components/index/cards/highway'
 import Shipwrecked from '../components/index/cards/shipwrecked'
 import CTAS from '../components/index/ctas'
+import RotatingProject from '../components/index/rotating-project'
+import featuredProject from '../lib/rotating-projects-data'
 /** @jsxImportSource theme-ui */
 
 function Page({
@@ -212,7 +214,7 @@ function Page({
           as="header"
           sx={{
             bg: 'dark',
-            pt: [5, 6],
+            pt: [4, 5],
             pb: [2, 3],
             textAlign: 'left',
             position: 'relative',
@@ -225,7 +227,7 @@ function Page({
             priority
             gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
           />
-          {announcementVariant === 'blueprint' ? (
+          {/* {announcementVariant === 'blueprint' ? (
             <Announcement
               width="90vw"
               copy="Get up to $400 to make a hardware project!"
@@ -241,7 +243,7 @@ function Page({
               href="https://moonshot.hackclub.com?t=webt"
               imgSrc="https://hc-cdn.hel1.your-objectstorage.com/s/v3/20dccaf98bc294f15d07534c407c56debcb6ec8d_favicon.png"
             />
-          )}
+          )} */}
           <Box
             sx={{
               width: '90vw',
@@ -265,160 +267,172 @@ function Page({
               Welcome to Hack&nbsp;Club
             </Text>
             <Heading>
-              <Text
-                as="p"
-                variant="title"
-                sx={{
-                  color: 'white',
-                  mb: [3, 4],
-                  zIndex: 1,
-                  textAlign: 'left',
-                  fontSize: ['42px', '52px', '64px'],
-                  lineHeight: 1.2,
-                  width: '100%'
-                }}
+              <Grid
+                columns={[1, 1, '1.5fr 1fr']}
+                gap={[4, 5]}
+                sx={{ alignItems: 'center' }}
               >
-                We are <Comma>{slackData.total_members_count}</Comma>{' '}
-                <Text
-                  sx={{
-                    color: 'transparent',
-                    ml: 2,
-                    mr: 3,
-                    whiteSpace: 'nowrap'
-                  }}
-                >
+                <Box>
                   <Text
-                    onClick={() => {
-                      !reveal ? setReveal(true) : setReveal(false)
-                    }}
+                    as="p"
+                    variant="title"
                     sx={{
-                      // lineHeight: 0.875,
-                      px: 2,
-                      backgroundColor: 'red',
-                      position: 'absolute',
-                      borderRadius: 10,
-                      transform: 'rotate(-3deg) translateY(-5px)',
                       color: 'white',
-                      whiteSpace: 'nowrap',
-                      textDecoration: 'none',
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      mb: [3, 4],
+                      zIndex: 1,
+                      textAlign: 'left',
+                      fontSize: ['42px', '52px', '64px'],
+                      lineHeight: 1.2,
+                      width: '100%'
                     }}
-                    aria-hidden="true"
                   >
-                    teen hackers
-                  </Text>
-                  teen hackers
-                </Text>
-                <br sx={{ display: ['inline', 'none', 'none'] }} /> from around
-                the world who code together
-              </Text>
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexWrap: 'nowrap',
-                  flexDirection: 'row',
-                  rowGap: 3
-                }}
-              >
-                {/* {ctaVariant === 'blueprint' ? (
-                  <Button
-                    variant="ctaLg"
-                    as="a"
-                    href="https://blueprint.hackclub.com/?utm_source=site-cta"
-                    mt={[3, 0, 0]}
-                    mr={3}
-                    sx={{
-                      transformOrigin: 'center',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      width: 'fit-content',
-                      backgroundColor: '#0e305b',
-                      backgroundImage:
-                        'linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)',
-                      backgroundSize: '50px 50px',
-                      border: '2px solid #dbe4ee',
-                      color: '#dbe4ee',
-                      '&:hover': {
-                        transform: 'scale(1.05)',
-                        boxShadow: '0 0 20px rgba(219, 228, 238, 0.4)'
-                      }
-                    }}
-                  >
-                    Sign Up for Blueprint
+                    We are <Comma>{slackData.total_members_count}</Comma>{' '}
                     <Text
-                      as="span"
                       sx={{
-                        fontSize: 0,
-                        opacity: 0.8,
-                        mt: 1,
-                        color: '#dbe4ee'
+                        color: 'transparent',
+                        ml: 2,
+                        mr: 3,
+                        whiteSpace: 'nowrap'
                       }}
                     >
-                      Get up to $400 to make Hardware
+                      <Text
+                        onClick={() => {
+                          !reveal ? setReveal(true) : setReveal(false)
+                        }}
+                        sx={{
+                          // lineHeight: 0.875,
+                          px: 2,
+                          backgroundColor: 'red',
+                          position: 'absolute',
+                          borderRadius: 10,
+                          transform: 'rotate(-3deg) translateY(-5px)',
+                          color: 'white',
+                          whiteSpace: 'nowrap',
+                          textDecoration: 'none',
+                          '&:hover': {
+                            cursor: 'pointer'
+                          }
+                        }}
+                        aria-hidden="true"
+                      >
+                        teen hackers
+                      </Text>
+                      teen hackers
                     </Text>
-                  </Button>
-                ) : (
-                  <>
+                    <br sx={{ display: ['inline', 'none', 'none'] }} /> from
+                    around the world who code together
+                  </Text>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexWrap: 'nowrap',
+                      flexDirection: 'row',
+                      rowGap: 3
+                    }}
+                  >
+                    {/* {ctaVariant === 'blueprint' ? (
+                      <Button
+                        variant="ctaLg"
+                        as="a"
+                        href="https://blueprint.hackclub.com/?utm_source=site-cta"
+                        mt={[3, 0, 0]}
+                        mr={3}
+                        sx={{
+                          transformOrigin: 'center',
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          width: 'fit-content',
+                          backgroundColor: '#0e305b',
+                          backgroundImage:
+                            'linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)',
+                          backgroundSize: '50px 50px',
+                          border: '2px solid #dbe4ee',
+                          color: '#dbe4ee',
+                          '&:hover': {
+                            transform: 'scale(1.05)',
+                            boxShadow: '0 0 20px rgba(219, 228, 238, 0.4)'
+                          }
+                        }}
+                      >
+                        Sign Up for Blueprint
+                        <Text
+                          as="span"
+                          sx={{
+                            fontSize: 0,
+                            opacity: 0.8,
+                            mt: 1,
+                            color: '#dbe4ee'
+                          }}
+                        >
+                          Get up to $400 to make Hardware
+                        </Text>
+                      </Button>
+                    ) : (
+                      <>
+                        <Button
+                          variant="ctaLg"
+                          as="a"
+                          href="https://moonshot.hackclub.com?t=webt"
+                          mt={[3, 0, 0]}
+                          mr={3}
+                          sx={{
+                            transformOrigin: 'center left',
+                            backgroundColor: 'black',
+                            color: 'white',
+                            border: '2px solid white',
+                            boxShadow: '0 0 10px rgba(255,255,255,0.25)',
+                            animation: 'moonshotPulse 2s ease-in-out infinite',
+                            textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+                            backgroundImage: 'none',
+                            '&:hover': {
+                              transform: 'scale(1.05)'
+                            }
+                          }}
+                        >
+                          RSVP for Moonshot!
+                        </Button>
+                        <style>{`
+                          @keyframes moonshotPulse {
+                            0% { box-shadow: 0 0 8px rgba(255,255,255,0.25), 0 0 0 rgba(255,255,255,0.15); }
+                            50% { box-shadow: 0 0 16px rgba(255,255,255,0.6), 0 0 24px rgba(255,255,255,0.35); }
+                            100% { box-shadow: 0 0 8px rgba(255,255,255,0.25), 0 0 0 rgba(255,255,255,0.15); }
+                          }
+                        `}</style>
+                      </>
+                    )} */}
                     <Button
                       variant="ctaLg"
                       as="a"
-                      href="https://moonshot.hackclub.com?t=webt"
+                      href="/slack"
                       mt={[3, 0, 0]}
                       mr={3}
+                      sx={{ transformOrigin: 'center left' }}
+                    >
+                      Join Slack
+                    </Button>
+                    <Text
+                      variant="eyebrow"
+                      as="h4"
                       sx={{
-                        transformOrigin: 'center left',
-                        backgroundColor: 'black',
+                        fontSize: ['16px', 2, 3],
+                        maxWidth: 'layout',
+                        marginTop: 'auto',
+                        marginBottom: 'auto',
+                        alignSelf: 'center',
                         color: 'white',
-                        border: '2px solid white',
-                        boxShadow: '0 0 10px rgba(255,255,255,0.25)',
-                        animation: 'moonshotPulse 2s ease-in-out infinite',
-                        textShadow: '0 1px 1px rgba(0,0,0,0.6)',
-                        backgroundImage: 'none',
-                        '&:hover': {
-                          transform: 'scale(1.05)'
-                        }
+                        textShadow:
+                          'rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 0.5) 0 0 10px'
                       }}
                     >
-                      RSVP for Moonshot!
-                    </Button>
-                    <style>{`
-                      @keyframes moonshotPulse {
-                        0% { box-shadow: 0 0 8px rgba(255,255,255,0.25), 0 0 0 rgba(255,255,255,0.15); }
-                        50% { box-shadow: 0 0 16px rgba(255,255,255,0.6), 0 0 24px rgba(255,255,255,0.35); }
-                        100% { box-shadow: 0 0 8px rgba(255,255,255,0.25), 0 0 0 rgba(255,255,255,0.15); }
-                      }
-                    `}</style>
-                  </>
-                )} */}
-                <Button
-                  variant="ctaLg"
-                  as="a"
-                  href="/slack"
-                  mt={[3, 0, 0]}
-                  mr={3}
-                  sx={{ transformOrigin: 'center left' }}
-                >
-                  Join Slack
-                </Button>
-                <Text
-                  variant="eyebrow"
-                  as="h4"
-                  sx={{
-                    fontSize: ['16px', 2, 3],
-                    maxWidth: 'layout',
-                    marginTop: 'auto',
-                    marginBottom: 'auto',
-                    alignSelf: 'center',
-                    color: 'white',
-                    textShadow: 'rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 0.5) 0 0 10px'
-                  }}
-                >
-                  Or, check out our programs:
-                </Text>
-              </Box>
+                      Or, check out our programs:
+                    </Text>
+                  </Box>
+                </Box>
+                <Box sx={{ display: ['block', 'block', 'block'] }}>
+                  <RotatingProject project={featuredProject} />
+                </Box>
+              </Grid>
               <CTAS cards={ctaCards} />
               <Button
                 sx={{
@@ -437,7 +451,7 @@ function Page({
                   fontSize: [1, '16px', '18px'],
                   backdropFilter: 'blur(2px)',
                   fontWeight: 'normal',
-                  zIndex: 999,
+                  zIndex: 999
                 }}
                 as="a"
                 href="#spotlight"