diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 7201113e..4af7dfee 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -11,6 +11,7 @@ export default function Buttons({
   link,
   primary,
   overrideColor,
+  zIndex,
   ...props
 }) {
   let fontWeight = primary ? '700' : '400'
@@ -18,8 +19,9 @@ export default function Buttons({
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: 'transparent', border: 'none', color: 'white', zIndex: zIndex ||0 }}
       py={1}
+
     >
       <Button
         data-place="right"
@@ -40,7 +42,8 @@ export default function Buttons({
           fontWeight: '400',
           fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
           backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          zIndex: 999,
         }}
         as="a"
         href={link || '/'}
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index f3c0cb7e..a0834c87 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -10,6 +10,7 @@ const CardModel = ({
   background,
   children,
   image,
+  image_fit,
   link,
   highlight,
   github_link,
@@ -141,7 +142,7 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
+          objectFit: image_fit ? image_fit : 'cover',
           position: 'absolute',
           width: '100%',
           height: '100%',
diff --git a/components/index/cards/counterspell.js b/components/index/cards/counterspell.js
new file mode 100644
index 00000000..adaecdf5
--- /dev/null
+++ b/components/index/cards/counterspell.js
@@ -0,0 +1,161 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import { Global } from '@emotion/react'
+
+/** @jsxImportSource theme-ui */
+
+export default function Counterspell() {
+  return (
+
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#90A8E1',
+        fontFamily: "Fraunces",
+        objectFit: "contain"
+      }}
+      position={[null, 'bottom', 'bottom']}
+
+    >
+        <Global
+        styles={`
+          @font-face {
+            font-family: 'NeueBit';
+            src: url('https://counterspell.hackclub.com/_next/static/media/retro.1fb39db6.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+          }
+        `}
+      />
+      <Grid columns={[1, 1, 1]} sx={{ position: 'relative', zIndex: 2 }}>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            position: 'relative',
+            alignItems: 'center',
+          }}
+        >
+          <Image
+            src="https://counterspell.hackclub.com/title.png"
+            sx={{
+              width: ['200px', '300px', '350px'],
+              mt: ['30px', '40px', '45px'],
+              mb: ['30px', '30px', '30px'],
+              position: 'relative',
+              zIndex: 3,
+              ml: '0px',
+              mr: '30px',
+              fontSize: ['36px', 4, 5],
+              color: 'white',
+            //   mx: 'auto'
+            }}
+            alt="Counterspell"
+          />
+            <Image
+            src="https://counterspell.hackclub.com/billboard.png"
+            sx={{
+              width: ['400px', '500px', '600px'],
+              position: 'absolute',
+              zIndex: 2,
+              fontSize: ['36px', 4, 5],
+              color: 'white',
+              
+              mx: 'auto'
+            }}
+            alt="Counterspell"
+          />
+           
+
+          <Flex
+            sx={{
+              flexDirection: ['row', 'row', 'column'],
+              justifyContent: 'space-between'
+              
+            }}
+          >
+            <Text
+              as="p"
+              variant="subheadline"
+              sx={{
+                ml: ['-8px', '0px', '-15px'],
+                mt: ['-30px', '0px', '-10px'],
+                mb: ['0px', '0px', '20px'],
+                zIndex: 2,
+                textAlign: 'center',
+                fontFamily: 'NeueBit, sans-serif', // Apply the custom font
+
+                color: '#FFFFFFF',
+
+                fontSize: ['10px !important','10px !important','16px !important'],
+
+              }}
+            >
+                HACK CLUB'S BEGINNER FRIENDLY GAME JAM
+
+              <br />
+              100+ CITIES NOV 23-24
+            </Text>
+
+  
+          </Flex>
+        </Flex>
+   
+            <Buttons
+              href="https://counterspell.hackclub.com/"
+              target="_blank"
+             
+              rel="noopener"
+              primary="#24479C"
+              icon = "door-enter"
+              id="43"
+              zIndex={999}
+              sx = {{zIndex: 9999999, left: ["50%", "50%", "0%"]}}
+            >
+                
+              Learn More
+            </Buttons>
+        
+    
+      </Grid>
+      <Image
+            src="https://counterspell.hackclub.com/hero/bg1.png"
+            sx={{
+              width: ['100%', '100%', '100%'],
+              mb: ['0px', '0px', '0px'],
+              mr: ['0px', '0px', '0px'],
+              ml: ['0px', '0px', '0px'],
+              position: 'absolute',
+              zIndex: 1,
+              left: 0,
+              bottom: 0,
+              fontSize: ['36px', 4, 5],
+              color: 'white',
+              
+              mx: 0
+            }}
+            alt="Buildings"
+          />
+           <Image
+            src="https://counterspell.hackclub.com/hero/bg2.png"
+            sx={{
+              width: ['100%', '100%', '100%'],
+              mb: ['0px', '0px', '0px'],
+              mr: ['0px', '0px', '0px'],
+              ml: ['0px', '0px', '0px'],
+              position: 'absolute',
+              zIndex: 0,
+              left: 0,
+              bottom: 0,
+              fontSize: ['36px', 4, 5],
+              color: 'white',
+              
+              mx: 0
+            }}
+            alt="Buildings"
+          />
+    </CardModel>
+  )
+}
diff --git a/components/index/cards/highseas.js b/components/index/cards/highseas.js
new file mode 100644
index 00000000..b1a5c438
--- /dev/null
+++ b/components/index/cards/highseas.js
@@ -0,0 +1,119 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import { Global } from '@emotion/react'
+
+/** @jsxImportSource theme-ui */
+
+export default function HighSeas() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        display: 'flex',
+        backgroundSize: 'cover',
+        backgroundColor: '#FFF5D8',
+        
+        fontFamily: "Fraunces"
+      }}
+      position={[null, 'bottom', 'bottom']}
+      image={"https://cloud-lyjdp3j9h-hack-club-bot.vercel.app/0image.svg"}
+    >
+        <Global
+        styles={`
+          @font-face {
+            font-family: 'HighSeas1';
+
+            src: url('https://highseas.hackclub.com/_next/static/media/0fc6f5e9d9c3e206-s.p.ttf') format('woff');
+            font-weight: normal;
+            font-style: normal;
+          }
+        `}
+      />
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 , gridGap: 0}}>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Image
+            src="https://cloud-5tm6hh4kb-hack-club-bot.vercel.app/0image__1_.svg"
+            sx={{
+              width: ['200px', '250px', '300px'],
+              mt: ['-5px', '-5px', '-5px'],
+              mb: ['30px', '30px', '30px'],
+              display: 'flex',
+              position: 'relative',
+              zIndex: 2,
+              fontSize: ['36px', 4, 5],
+              color: 'white'
+            }}
+            alt="HighSeas"
+          />
+
+          <Flex
+            sx={{
+              flexDirection: ['column', 'column', 'column'],
+              justifyContent: 'space-between',
+              display: 'flex',
+            }}
+          >
+            <Text
+              as="p"
+              variant="subheadline"
+              sx={{
+                ml: ['0px', '0px', '10px'],
+                mt: ['0px', '0px', '-10px'],
+                mb: ['0px', '0px', '20px'],
+                zIndex: 2,
+                color: '#FFFFFFF',
+                fontSize: ['24px !important'],
+                fontFamily: 'HighSeas1, sans-serif', // Apply the custom font
+
+
+              }}
+            >
+                Build personal projects. Get free stuff.
+
+              <br />
+              Oct 30 - Jan 31
+            </Text>
+
+            <Buttons
+              href="https://highseas.hackclub.com/"
+              target="_blank"
+              rel="noopener"
+              sx = {{
+                mt: [30, 30, 30],
+                mb:[0,0,15]
+              }}
+              primary="#24479C"
+              id="43"
+            >
+                
+              Join Now!
+            </Buttons>
+          </Flex>
+        </Flex>
+        <Box style={{display: "flex", alignItems: "center" }}>
+        <Image
+            src="	https://highseas.hackclub.com/_next/image?url=%2Fchest.png&w=828&q=75"
+            sx={{
+              width: ['0', '0', '300px'],
+              mt: ['0px', '0px', '-5px'],
+              mb: ['0px', '0px', '30px'],
+              ml: ['0px', '0px', '50px'],
+              position: 'relative',
+              zIndex: 2,
+              fontSize: ['0px', 4, 5],
+              color: 'white'
+            }}
+            alt="HighSeas"
+          />
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}
diff --git a/pages/index.js b/pages/index.js
index f459c0e4..5573d97e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -41,7 +41,8 @@ import Comma from '../components/comma'
 import Haxidraw from '../components/index/cards/haxidraw'
 import Onboard from '../components/index/cards/onboard'
 import Trail from '../components/index/cards/trail'
-
+import HighSeas from '../components/index/cards/highseas'
+import Counterspell from '../components/index/cards/counterspell'
 /** @jsxImportSource theme-ui */
 
 function Page({
@@ -675,6 +676,8 @@ function Page({
                 and make things together!
               </Text>
             </Box>
+            <HighSeas />
+            <Counterspell />
             <Pizza />
             <Trail />
             <Slack slackKey={slackKey} data={slackData} events={events} />