diff --git a/crabfit-backend/package.json b/crabfit-backend/package.json
index caf6b3e..cb16624 100644
--- a/crabfit-backend/package.json
+++ b/crabfit-backend/package.json
@@ -4,7 +4,7 @@
   "description": "API for Crabfit",
   "main": "index.js",
   "author": "Ben Grant",
-  "license": "MIT",
+  "license": "GPL-3.0-only",
   "private": true,
   "engines": {
     "node": ">=10.0.0"
diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json
index 13c1904..597ca0c 100644
--- a/crabfit-frontend/package.json
+++ b/crabfit-frontend/package.json
@@ -2,6 +2,7 @@
   "name": "crabfit-frontend",
   "version": "1.0.0",
   "private": true,
+  "license": "GPL-3.0-only",
   "dependencies": {
     "@azure/msal-browser": "^2.14.2",
     "@emotion/react": "^11.1.5",
diff --git a/crabfit-frontend/public/i18n/en/common.json b/crabfit-frontend/public/i18n/en/common.json
index 4012234..367fd74 100644
--- a/crabfit-frontend/public/i18n/en/common.json
+++ b/crabfit-frontend/public/i18n/en/common.json
@@ -62,5 +62,9 @@
       "close": "Close",
       "reload": "Reload"
     }
+  },
+  "video": {
+    "title": "Crab Fit Promotional Video",
+    "button": "Watch the video"
   }
 }
diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx
index b8817a7..b33f03e 100644
--- a/crabfit-frontend/src/pages/Help/Help.tsx
+++ b/crabfit-frontend/src/pages/Help/Help.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -14,6 +14,8 @@ import {
   StyledMain,
   AboutSection,
   P,
+  VideoWrapper,
+  VideoLink,
 } from '../Home/homeStyle';
 
 import {
@@ -23,9 +25,12 @@ import {
   ButtonArea,
 } from './helpStyle';
 
+import video_thumb from 'res/video_thumb.jpg';
+
 const Help = () => {
   const { push } = useHistory();
   const { t } = useTranslation(['common', 'help']);
+  const [videoPlay, setVideoPlay] = useState(false);
 
   useEffect(() => {
     document.title = t('help:name');
@@ -39,6 +44,22 @@ const Help = () => {
 
       <StyledMain>
         <h1>{t('help:name')}</h1>
+        {videoPlay ? (
+          <VideoWrapper>
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          </VideoWrapper>
+        ) : (
+          <VideoLink
+            href="https://www.youtube.com/watch?v=yXGd4VXZzcY"
+            onClick={e => {
+              e.preventDefault();
+              setVideoPlay(true);
+            }}
+          >
+            <img src={video_thumb} alt={t('common:video.button')} />
+            <span>{t('common:video.button')}</span>
+          </VideoLink>
+        )}
         <P>{t('help:p1')}</P>
         <P>{t('help:p2')}</P>
 
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx
index 5cdcd21..517b0cf 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@@ -35,6 +35,8 @@ import {
   StatLabel,
   OfflineMessage,
   ButtonArea,
+  VideoWrapper,
+  VideoLink,
 } from './homeStyle';
 
 import api from 'services';
@@ -42,6 +44,7 @@ import { detect_browser } from 'utils';
 import { useTWAStore } from 'stores';
 
 import logo from 'res/logo.svg';
+import video_thumb from 'res/video_thumb.jpg';
 import timezones from 'res/timezones.json';
 
 dayjs.extend(utc);
@@ -62,6 +65,7 @@ const Home = ({ offline }) => {
     version: 'loading...',
   });
   const [browser, setBrowser] = useState(undefined);
+  const [videoPlay, setVideoPlay] = useState(false);
   const { push } = useHistory();
   const { t } = useTranslation(['common', 'home']);
   const isTWA = useTWAStore(state => state.TWA);
@@ -233,6 +237,24 @@ const Home = ({ offline }) => {
             </Stat>
           </Stats>
           <P><Trans i18nKey="home:about.content.p1">Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<br /><Link to="/how-to" rel="help">Learn more about how to Crab Fit</Link>.</Trans></P>
+
+          {videoPlay ? (
+            <VideoWrapper>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </VideoWrapper>
+          ) : (
+            <VideoLink
+              href="https://www.youtube.com/watch?v=yXGd4VXZzcY"
+              onClick={e => {
+                e.preventDefault();
+                setVideoPlay(true);
+              }}
+            >
+              <img src={video_thumb} alt={t('common:video.button')} />
+              <span>{t('common:video.button')}</span>
+            </VideoLink>
+          )}
+
           {isTWA !== true && (
             <ButtonArea>
               {['chrome', 'firefox', 'safari'].includes(browser) && (
diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts
index 54e8cd7..3fab52a 100644
--- a/crabfit-frontend/src/pages/Home/homeStyle.ts
+++ b/crabfit-frontend/src/pages/Home/homeStyle.ts
@@ -138,3 +138,68 @@ export const ButtonArea = styled.div`
   gap: 12px;
   margin: 30px 0;
 `;
+
+export const VideoWrapper = styled.div`
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 56.4%;
+  width: 100%;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+  }
+`;
+
+export const VideoLink = styled.a`
+  display: block;
+  text-decoration: none;
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  transition: transform .15s;
+
+  :hover, :focus {
+    transform: translateY(-2px);
+  }
+  :active {
+    transform: translateY(-1px);
+  }
+
+  img {
+    width: 100%;
+    display: block;
+    border-radius: 10px;
+    background-color: #CCC;
+  }
+  span {
+    color: #FFFFFF;
+    position: absolute;
+    top: 50%;
+    font-size: 1.5rem;
+    text-align: center;
+    width: 100%;
+    display: block;
+    transform: translateY(-50%);
+    text-shadow: 0 0 20px rgba(0,0,0,.8);
+    user-select: none;
+
+    ::before {
+      content: '';
+      display: block;
+      height: 2em;
+      width: 2em;
+      background: currentColor;
+      border-radius: 100%;
+      margin: 0 auto .4em;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='${props => encodeURIComponent(props.theme.primaryDark)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 1em;
+      box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
+    }
+  }
+`;
diff --git a/crabfit-frontend/src/res/video_thumb.jpg b/crabfit-frontend/src/res/video_thumb.jpg
new file mode 100644
index 0000000..8e1eb1f
Binary files /dev/null and b/crabfit-frontend/src/res/video_thumb.jpg differ