diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index cb194793f..306ce9ceb 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,199 +1,219 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
-import MailCard from "../../mail-card";
-import BGImg from "../../background-image";
+import Icon from '@hackclub/icons'
+import {useRef, useState} from 'react'
+import { Box, Input, Button, Text, Card, Flex, Grid, Link } from 'theme-ui'
+import MailCard from '../../mail-card'
+import BGImg from '../../background-image'
 
-import background from "../../../public/home/footer.png";
+import background from '../../../public/home/footer.png'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "16px",
-      height: "16px",
-      animation: "spin 2s linear infinite",
-      mr: "5px",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '16px',
+      height: '16px',
+      animation: 'spin 2s linear infinite',
+      mr: '5px',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' },
       },
     }}
   ></Box>
-);
+)
 
 const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+    const [letters, setLetters] = useState([])
+  const formRef = useRef(null)
 
   const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+    e.preventDefault()
+    setSubmitting(true)
 
-    let res = await fetch("/api/mailing-list", {
-      method: "POST",
+    let res = await fetch('/api/mailing-list', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         name: e.target.name.value,
         email: e.target.email.value,
       }),
-    });
+    })
 
-    formRef.current.reset();
+    formRef.current.reset()
 
     if (res.ok) {
-      setSubmitted(true);
+      setSubmitted(true)
     }
-    setSubmitting(false);
-  };
+    setSubmitting(false)
+  }
+
+ /* useEffect(() => {
+      const newsletters = async () => {
+          const res = await fetch('https://api.github.com/repositories/313119644/contents/updates', {
+              headers: {
+                  'Content-Type': 'application/json',
+              }
+          })
+
+            const data = await res.json()
+            setLetters(data)
+      }
+
+      newsletters()
+  }, [])*/
+
 
   return (
-    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
+    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
       <Card
         sx={{
-          maxWidth: "1050px",
-          mx: "auto",
+          maxWidth: '1050px',
+          mx: 'auto',
           // mt: [3, 4],
-          background: "rgb(255,255,255, 0.45)",
-          position: "relative",
+          background: 'rgb(255,255,255, 0.45)',
+          position: 'relative',
           zIndex: 2,
-          backdropFilter: "blur(8px)",
+          backdropFilter: 'blur(8px)',
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+        <Flex sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}>
           <Flex
             sx={{
-              placeItems: "center",
-              justifyContent: "center",
-              alignItems: ["left", "left", "center"],
-              flexDirection: "column",
-              gap: "10px",
-              width: ["100%", "75%"],
+              placeItems: 'center',
+              justifyContent: 'center',
+              alignItems: ['left', 'left', 'center'],
+              flexDirection: 'column',
+              gap: '10px',
+              width: ['100%', '100%', '75%'],
             }}
           >
             <Box>
               <Text
-                variant="title"
+                variant='title'
                 sx={{
-                  fontSize: [4, "36px", "42px", 6],
+                  fontSize: [4, '36px', '42px', 6],
                   zIndex: 2,
-                  textAlign: "left",
+                  textAlign: 'left',
                 }}
               >
                 Join the newsletter
               </Text>
               <Text
                 sx={{
-                  color: "darkless",
+                  color: 'darkless',
                   mt: 2,
                   fontSize: 3,
-                  textAlign: "left",
+                  textAlign: 'left',
                 }}
-                as="p"
+                as='p'
               >
-                We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out our{" "}
-                <Link href="/leader-newsletters/">previous issues</Link>.
+                We&apos;ll send you an email no more than once a month, when we work
+                on something cool for you. Check out our{' '}
+                <Link href='/leader-newsletters/'>previous issues</Link>.
               </Text>
             </Box>
             <Grid
-              as="form"
+              as='form'
               ref={formRef}
               onSubmit={handleSubmit}
               gap={[2, 3]}
               sx={{
-                textAlign: "center",
-                alignItems: "end",
-                input: { bg: "sunken" },
-                width: "100%",
+                textAlign: 'center',
+                alignItems: 'end',
+                input: { bg: 'sunken' },
+                width: '100%',
               }}
             >
-              <Box sx={{ width: "100%" }}>
+              <Box sx={{ width: '100%' }}>
                 <Input
-                  autofillBackgroundColor="highlight"
-                  type="text"
-                  name="name"
-                  id="name"
-                  placeholder="Your Name"
+                  autofillBackgroundColor='highlight'
+                  type='text'
+                  name='name'
+                  id='name'
+                  placeholder='Your Name'
                   required
                   sx={{
-                    width: "100%",
-                    textAlign: "center",
+                    width: '100%',
+                    textAlign: 'center',
                     fontSize: 2,
                   }}
                 />
               </Box>
               <div>
                 <Input
-                  autofillBackgroundColor="highlight"
-                  type="email"
-                  name="email"
-                  id="email"
-                  placeholder="Your Email"
+                  autofillBackgroundColor='highlight'
+                  type='email'
+                  name='email'
+                  id='email'
+                  placeholder='Your Email'
                   required
                   sx={{
-                    width: "100%",
-                    textAlign: "center",
+                    width: '100%',
+                    textAlign: 'center',
                     fontSize: 2,
                   }}
                 />
               </div>
-              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              <Button type='submit' sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
                   <>
                     <Loading /> Subscribe
                   </>
                 ) : submitted ? (
                   <>
-                    <Icon glyph="send" /> You're on the list!
+                    <Icon glyph='send' /> You're on the list!
                   </>
                 ) : (
-                  "Subscribe"
+                  'Subscribe'
                 )}
               </Button>
             </Grid>
           </Flex>
           <Box
             sx={{
-              display: "grid",
+              display: 'grid',
               gridGap: 4,
               mt: [4, 0],
-              width: "100%",
+              width: '100%',
             }}
           >
             <MailCard
-              date="August 2023"
+              date='August 2023'
               issue={18}
-              body="Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!"
-              link="/leader-newsletters/2023-08-18"
+              body='Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!'
+              link='/leader-newsletters/2023-08-18'
             />
             <MailCard
-              date="September 2023"
+              date='September 2023'
               issue={20}
-              body="📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!"
-              link="/leader-newsletters/2023-09-29"
+              body='📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!'
+              link='/leader-newsletters/2023-09-29'
             />
+              {/*<Link href='/leader-newsletters/' sx={{ justifySelf: 'center', cursor: 'pointer',  }} as='h3'>
+                  Read more
+              </Link>*/}
           </Box>
         </Flex>
       </Card>
       <BGImg
         width={2544}
         height={2048}
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        gradient='linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))'
         src={background}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
+        placeholder='blur'
+        alt='Globe with hundreds of Hack Clubs'
       />
     </Box>
-  );
-};
+  )
+}
 
-export default MailingList;
+export default MailingList
diff --git a/components/mail-card.js b/components/mail-card.js
index 91756b757..b30167991 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,43 +1,54 @@
-import { Box, Card, Text } from "theme-ui";
-import Link from "next/link";
+import { Box, Card, Text } from 'theme-ui'
 
 export default function MailCard({ body, issue, date, link }) {
-  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
+  body = body.length > 80 ? body.substring(0, 80) + '...' : body
   return (
     <Card
-      variant="interactive"
+      variant='interactive'
       sx={{
-        borderRadius: 18,
-        display: "inline-block",
-        overflow: "hidden",
-        bg: "white",
-        maxWidth: "1500px",
-        cursor: "pointer",
-        padding: "0 !important",
+        cursor: 'pointer',
+        padding: '0 !important',
       }}
     >
-      <Link href={link || "/newsletter"}>
-        <div>
+      <Box sx={{ height: '90%' }}>
+        <Box
+          sx={{
+            width: '100%',
+            height: '10px',
+            backgroundRepeat: 'repeat-x',
+            backgroundSize: '100%',
+            backgroundImage: `url('/letter-pattern.svg')`,
+          }}
+        />
+        <Box
+          sx={{
+            placeItems: 'center',
+            display: 'grid',
+            height: '100%',
+          }}
+        >
           <Box
-            sx={{
-              width: "100%",
-              height: "12px",
-              backgroundImage: "url('/letter-pattern.svg')",
-              backgroundRepeat: "repeat-x",
-              backgroundSize: "100%",
-            }}
-          />
-          <Box sx={{ p: [3, 4] }}>
-            <Text as="h1" sx={{ textTransform: "uppercase" }}>
-              {date}
-            </Text>
-            <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
-            <Text as="h2" sx={{ fontWeight: "normal" }}>
-              {body}
-            </Text>
+            sx={{ px: [3, 4] }}
+          >
+            <Box>
+              <Text as='h1' sx={{ textTransform: 'uppercase' }}>
+                {date}
+              </Text>
+              <Text>Newsletter #{issue} — From Hack Club, To You</Text>
+              <Text as='h2' sx={{ fontWeight: 'normal' }}>
+                {body}
+              </Text>
+            </Box>
           </Box>
-        </div>
-      </Link>
+        </Box>
+      </Box>
     </Card>
-  );
+  )
 }
+
+/*
+        <Link href={link || '/newsletter'}>        </Link>
+
+
+
+       */