diff --git a/components/replit/form.js b/components/replit/form.js
index 093e3287..d465c9a8 100644
--- a/components/replit/form.js
+++ b/components/replit/form.js
@@ -113,8 +113,8 @@ const ReplitForm = ({ cssDark }) => {
     '/stickers/orphmoji_peefest.png',
     '/stickers/skullpup_boba.png',
     '/stickers/hackers,_assemble!.png',
-    '/stickers/orphmoji_yippee.png',
-    '/replit/replit-fire.png'
+    '/stickers/orphmoji_yippee.png'
+    // '/replit/replit-fire.png'
   ]
 
   const fieldStyle = ({ disabled }) => ({
diff --git a/components/replit/progress.js b/components/replit/progress.js
index 4fd3adab..0ba160a0 100644
--- a/components/replit/progress.js
+++ b/components/replit/progress.js
@@ -14,15 +14,13 @@ const ProgressComponent = ({ progress }) => {
   }
 
   return (
-    <Box sx={{ marginBottom: '1rem' }}>
-      {progress.completed ? (
-        <Text>Export complete! Check your email.</Text>
-      ) : (
-        <Text>
-          {processedCount} of {progress.repl_count} repls processed!
-          {title ? <Text>{title}</Text> : null}
-        </Text>
-      )}
+    <Box sx={{ marginBottom: '1rem', textAlign: 'center' }}>
+      <Text sx={{ fontSize: '1.2rem' }}>
+        {progress.completed
+          ? 'Export complete! Check your email.'
+          : `${processedCount} of ${progress.repl_count} repls processed!
+          ${title ? <Text>{title}</Text> : ''}`}
+      </Text>
 
       <Progress
         sx={{ color: 'hsl(23, 94%, 32%)', backgroundColor: 'smoke' }}
diff --git a/components/replit/token-instructions.js b/components/replit/token-instructions.js
new file mode 100644
index 00000000..254c66d0
--- /dev/null
+++ b/components/replit/token-instructions.js
@@ -0,0 +1,93 @@
+'use client'
+
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
+import { Box, Card, Text, Image, Heading, Button } from 'theme-ui'
+
+const TokenInstructions = () => {
+  const [currentStep, setCurrentStep] = useState(0)
+
+  const tokenSteps = [
+    {
+      image: '/replit/aarc1.gif',
+      desc: "Open your browser's developer tools. You can do this by right-clicking on the page and selecting 'Inspect' or by pressing F12 on your keyboard."
+    },
+    {
+      image: '/replit/aarc2.gif',
+      desc: 'Select the application tab in the devtools'
+    },
+    {
+      image: '/replit/aarc3.gif',
+      desc: "Make sure replit.com cookies are selected, then scroll down to find 'connect.sid'. Copy the entire token & paste it in the form at the top of this page."
+    }
+  ]
+
+  return (
+    <Card sx={{ maxWidth: '100%', mx: 'auto', p: 4 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          // justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: '2rem',
+          mb: 3,
+          marginX: 'auto',
+          width: 'fit-content'
+        }}
+      >
+        <Button
+          onClick={() => {
+            setCurrentStep(prev => Math.max(prev - 1, 0))
+          }}
+          sx={{
+            bg: 'hsl(23, 94%, 32%)',
+            opacity: currentStep === 0 ? 0.5 : 1,
+            pointerEvents: currentStep === 0 ? 'none' : 'auto'
+          }}
+        >
+          <Box sx={{ lineHeight: 0, marginRight: '-8px' }}>
+            <Icon glyph="view-back" />
+          </Box>
+        </Button>
+
+        <Heading as="h3">
+          Step {currentStep + 1} of {tokenSteps.length}
+        </Heading>
+
+        <Button
+          onClick={() => setCurrentStep(prev => Math.min(prev + 1, 2))}
+          sx={{
+            bg: 'hsl(23, 94%, 32%)',
+            opacity: currentStep === 2 ? 0.5 : 1,
+            pointerEvents: currentStep === 2 ? 'none' : 'auto'
+          }}
+        >
+          <Box sx={{ rotate: '180deg', lineHeight: 0, marginLeft: '-8px' }}>
+            <Icon glyph="view-back" />
+          </Box>
+        </Button>
+      </Box>
+
+      <Box>
+        <Text
+          as="p"
+          sx={{
+            marginY: '1rem',
+            fontSize: '1.2rem',
+            textAlign: 'center',
+            textWrap: 'balance'
+          }}
+        >
+          {tokenSteps[currentStep].desc}
+        </Text>
+        <Image
+          src={tokenSteps[currentStep].image}
+          alt={`Step ${currentStep + 1}`}
+          sx={{ width: '100%', height: 'auto', borderRadius: '0.25rem' }}
+        />
+      </Box>
+    </Card>
+  )
+}
+
+export default TokenInstructions
diff --git a/pages/replit.js b/pages/replit.js
index 47785eec..76d800a9 100644
--- a/pages/replit.js
+++ b/pages/replit.js
@@ -6,6 +6,7 @@ import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
 import ReplitForm from '../components/replit/form'
 import Progress from '../components/replit/progress'
+import TokenInstructions from '../components/replit/token-instructions'
 import { useEffect, useState } from 'react'
 
 const ReplitPage = () => {
@@ -36,28 +37,13 @@ const ReplitPage = () => {
     'Get free stickers'
   ]
 
-  const tokenSteps = [
-    {
-      image: '/replit/aarc1.gif',
-      desc: "Open your browser's developer tools. You can do this by right-clicking on the page and selecting 'Inspect' or by pressing F12 on your keyboard."
-    },
-    {
-      image: '/replit/aarc2.gif',
-      desc: 'Select the application tab in the devtools'
-    },
-    {
-      image: '/replit/aarc3.gif',
-      desc: "Make sure replit.com cookies are selected, then scroll down to find 'connect.sid'. Copy the entire token & paste it in the form at the top of this page."
-    }
-  ]
-
   const cssDark = 'hsl(23, 94%, 32%)'
 
   return (
     <>
       <Meta
         as={Head}
-        title="Export your Repls"
+        title="Export your repls"
         description="Replit free has shut down. Export with Hack Club to GitHub Education's new free codespaces offering"
       />
       <style>{`html { scroll-behavior: smooth; } body { background-color: hsl(23, 94%, 96%); }`}</style>
@@ -76,19 +62,82 @@ const ReplitPage = () => {
           color: 'white'
         }}
       >
+        <Heading as="h1" sx={{ position: 'relative', marginBottom: '1rem' }}>
+          Replit Lifeboat:{' '}
+          <Text
+            as="span"
+            sx={{ display: 'inline-flex', flexDirection: 'column' }}
+          >
+            Save Our Ships
+            <Image
+              src="/replit/sos-morse.svg"
+              alt="SOS in morse code"
+              sx={{ opacity: 0.5 }}
+            />
+          </Text>
+          <Text
+            sx={{
+              position: 'absolute',
+              left: '-2.5rem',
+              bottom: '-1rem',
+              rotate: '-30deg',
+              fontSize: '3rem'
+            }}
+          >
+            🛟
+          </Text>
+          <Text
+            sx={{
+              position: 'absolute',
+              left: '2rem',
+              top: '-3rem',
+              rotate: '15deg',
+              fontSize: '2.5rem'
+            }}
+          >
+            🛳️
+          </Text>
+          <Text
+            sx={{
+              position: 'absolute',
+              right: '-2rem',
+              top: '-2.5rem',
+              rotate: '30deg',
+              fontSize: '3rem'
+            }}
+          >
+            🚤
+          </Text>
+          <Text
+            sx={{
+              position: 'absolute',
+              right: '-5rem',
+              bottom: '-1.5rem',
+              rotate: '20deg',
+              fontSize: '3rem'
+            }}
+          >
+            🌊
+          </Text>
+          <Text
+            sx={{
+              position: 'absolute',
+              right: '12rem',
+              bottom: '-2.5rem',
+              rotate: '-15deg',
+              fontSize: '3rem',
+              zIndex: 10
+            }}
+          >
+            ⛵
+          </Text>
+        </Heading>
+
         <Heading
-          as="h1"
+          as="h2"
           sx={{
             fontSize: '4em'
           }}
-          onMouseOver={() => {
-            document.getElementById('og-replit').style.opacity = '0'
-            document.getElementById('fire-replit').style.opacity = '1'
-          }}
-          onMouseOut={() => {
-            document.getElementById('og-replit').style.opacity = '1'
-            document.getElementById('fire-replit').style.opacity = '0'
-          }}
         >
           Export your{' '}
           <Text
@@ -98,6 +147,16 @@ const ReplitPage = () => {
               alignItems: 'center',
               position: 'relative'
             }}
+            /*
+            onMouseOver={() => {
+              document.getElementById('og-replit').style.opacity = '0'
+              document.getElementById('fire-replit').style.opacity = '1'
+            }}
+            onMouseOut={() => {
+              document.getElementById('og-replit').style.opacity = '1'
+              document.getElementById('fire-replit').style.opacity = '0'
+              }}
+              */
           >
             Replit <style>{`.replit-fire {transition: opacity 0.1s;`}</style>
             <Image
@@ -107,6 +166,7 @@ const ReplitPage = () => {
               id="og-replit"
               className="replit-fire"
             />
+            {/*
             <Image
               src="/replit/replit-fire-nooutline.png"
               alt="replit"
@@ -119,18 +179,26 @@ const ReplitPage = () => {
               }}
               id="fire-replit"
               className="replit-fire"
-            />
+            />*/}
           </Text>{' '}
           repls
         </Heading>
 
-        <Text sx={{ maxWidth: '80ch', fontSize: '1.2em', marginY: '1em' }}>
-          On 25th August, Replit cut down its free plan - it's now unusable.
+        <Text
+          sx={{
+            maxWidth: '80ch',
+            fontSize: '1.2em',
+            marginY: '1em',
+            marginTop: '1em',
+            textWrap: 'pretty'
+          }}
+        >
+          On 25th August, Replit cut down its free plan - many students won't be
+          able to afford to keep using it.
           <br />
-          Previously, you got unlimited repls for free, for as long as you
-          wanted.
-          <br />
-          Now you get three repls, for 600 minutes per month (20 mins/day).
+          We quickly built this tool in response - plug in your email and Replit
+          token and get a zip file containing all your Repls, with full Git
+          history constructed from Replit's files' history.
         </Text>
       </Box>
 
@@ -216,36 +284,11 @@ const ReplitPage = () => {
         </Box>
 
         <Box sx={{ paddingTop: '5rem' }} id="instructions">
-          <Heading as="h2" sx={{ marginBottom: '0.5em' }}>
+          <Heading as="h2" sx={{ marginBottom: '0.5em', textAlign: 'center' }}>
             How to get your Replit <code>connect.sid</code> token
           </Heading>
 
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '1rem'
-            }}
-          >
-            {tokenSteps.map((step, idx) => (
-              <Card
-                key={idx}
-                sx={{
-                  lineHeight: 0
-                }}
-              >
-                <Heading as="h3" sx={{ lineHeight: 1.5 }}>
-                  Step {idx + 1}
-                </Heading>
-                <Text sx={{ lineHeight: 1.5 }}>{step.desc}</Text>
-                <Image
-                  src={step.image}
-                  alt=""
-                  sx={{ borderRadius: '0.25rem', marginTop: '1em' }}
-                />
-              </Card>
-            ))}
-          </Box>
+          <TokenInstructions />
 
           <Link href="#">
             <Button
diff --git a/public/replit/sos-morse.svg b/public/replit/sos-morse.svg
new file mode 100644
index 00000000..3ca03cdf
--- /dev/null
+++ b/public/replit/sos-morse.svg
@@ -0,0 +1,11 @@
+<svg width="199" height="11" viewBox="0 0 199 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91237 6.5969C4.91237 8.47854 2.72016 8.47621 2.07891 6.83302C1.36636 5.00711 3.28587 1.25278 5.46333 3.21249C7.19711 4.77289 2.69571 3.89383 4.91237 3.76344C6.89582 3.64676 7.42028 5.88853 4.91237 5.88853" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M20.3883 5.12509C20.2172 5.12509 20.3371 7.34741 17.7123 7.25019C12.7207 7.06532 20.2309 2.0624 20.2309 4.06255C20.2309 4.68126 16.326 3.70837 20.3883 3.70837C22.4736 3.70837 19.68 5.44704 19.68 3" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M35.6903 4.80359C35.6903 6.62578 34.8151 9.05657 32.3059 8.188C28.6805 6.93307 33.4542 1.74896 36.3199 2.00948C37.8207 2.14592 39.8906 5.12017 37.776 5.4726C36.1842 5.7379 34.8457 4.09522 37.107 4.09522" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M56 6H80.0844" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M90 6H110" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M121 6H145.084" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M180.655 8.60957C177.817 11.1329 176.207 4.05727 180.931 5.1071C182.811 5.52491 179.809 7.99404 179.239 8.21603C177.745 8.79677 175.905 8.04001 177.822 9.31794" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M164.221 4C166.071 4 166.202 6.74775 165.323 8.09278C164.415 9.48126 161.139 8.79943 162.214 7.18764C163.373 5.44905 166.954 6.71039 166.661 6.79411C164.977 7.2753 164.87 4.58876 165.638 6.12509" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M192.629 8.01366C190.508 8.01366 189.839 6.40456 192.354 5.96728C192.769 5.89506 198.219 5.46896 196.407 6.95112C195.528 7.67057 191.664 8.01366 194.203 8.01366C196.546 8.01366 197.756 8.72203 194.754 8.72203" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>