diff --git a/src/components/MailingList.jsx b/src/components/MailingList.jsx
index e273957..a741e3e 100644
--- a/src/components/MailingList.jsx
+++ b/src/components/MailingList.jsx
@@ -104,6 +104,13 @@ const Button = styled.button`
   &:active {
     opacity: 0.7;
   }
+
+  &:disabled {
+    background-color: #d3d3d3;
+    color: #a8a8a8;
+    border-color: #c0c0c0;
+    cursor: not-allowed;
+  }
 `;
 
 export default function MailingList() {
@@ -111,6 +118,7 @@ export default function MailingList() {
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const api = 'https://api.dilanxd.com/wildhacks/subscribe';
   const form = useRef();
@@ -128,6 +136,7 @@ export default function MailingList() {
 
   const subscribe = (e) => {
     e.preventDefault();
+    setLoading(true);
 
     const requestOptions = {
       method: 'POST',
@@ -145,10 +154,12 @@ export default function MailingList() {
       .then((data) => {
         console.log(data);
         setSuccess(data.success);
+        setLoading(false);
       })
       .catch((error) => {
         console.log(error);
         setSuccess('error');
+        setLoading(false);
       });
   };
 
@@ -201,7 +212,7 @@ export default function MailingList() {
             required
           />
         </InputContainer>
-        <Button className="hide" type="submit" value="Send">
+        <Button className="hide" type="submit" value="Send" disabled={loading}>
           Join
         </Button>
       </Form>