diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx
index c7c7be2..652c942 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -25,6 +25,9 @@ const App = () => {
 				<button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0 }}>{isDark ? 'dark' : 'light'}</button>
 				<Global
 					styles={theme => ({
+						html: {
+							scrollBehavior: 'smooth',
+						},
 						body: {
 							backgroundColor: theme.background,
 							color: theme.text,
diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts
index 7786925..47293a5 100644
--- a/crabfit-frontend/src/components/Button/buttonStyle.ts
+++ b/crabfit-frontend/src/components/Button/buttonStyle.ts
@@ -20,7 +20,7 @@ export const Top = styled.button`
 	color: #FFF;
 	font-weight: 600;
 	text-shadow: 0 -1.5px .5px ${props => props.theme.primaryDark};
-	padding: ${props => props.padding || '10px 14px'};
+	padding: 0;
 	border-radius: 3px;
 	height: var(--btn-height);
 	width: var(--btn-width);
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 46e6006..e8cbe8c 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -112,7 +112,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Previous month"
 					type="button"
 					onClick={() => {
@@ -128,7 +127,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Next month"
 					type="button"
 					onClick={() => {
diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx
new file mode 100644
index 0000000..6555e62
--- /dev/null
+++ b/crabfit-frontend/src/components/Donate/Donate.tsx
@@ -0,0 +1,14 @@
+import { Button } from 'components';
+
+const Donate = () => (
+	<div style={{ marginTop: 6, marginLeft: 12 }}>
+		<a href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">
+			<Button
+				buttonHeight="30px"
+				buttonWidth="90px"
+			>Donate</Button>
+		</a>
+	</div>
+);
+
+export default Donate;
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index 1d51137..021f481 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -2,5 +2,8 @@ export { default as TextField } from './TextField/TextField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as CalendarField } from './CalendarField/CalendarField';
 export { default as TimeRangeField } from './TimeRangeField/TimeRangeField';
+
 export { default as Button } from './Button/Button';
+
 export { default as Center } from './Center/Center';
+export { default as Donate } from './Donate/Donate';
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx
index e28421b..ea9cf0a 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@@ -7,6 +7,7 @@ import {
 	SelectField,
 	Button,
 	Center,
+	Donate,
 } from 'components';
 
 import {
@@ -15,6 +16,10 @@ import {
 	TitleSmall,
 	TitleLarge,
 	Logo,
+	Links,
+	AboutSection,
+	Footer,
+	P,
 } from './homeStyle';
 
 import logo from 'res/logo.svg';
@@ -30,53 +35,73 @@ const Home = () => {
 	const onSubmit = data => console.log('submit', data);
 
 	return (
-		<StyledMain>
-			<Center>
-				<Logo src={logo} alt="" />
-			</Center>
-			<TitleSmall>Create a</TitleSmall>
-			<TitleLarge>CRAB FIT</TitleLarge>
-
-			<CreateForm onSubmit={handleSubmit(onSubmit)}>
-				<TextField
-					label="Give your event a name!"
-					subLabel="Or leave blank to generate one"
-					type="text"
-					name="name"
-					id="name"
-					register={register}
-				/>
-
-				<CalendarField
-					label="What dates might work?"
-					subLabel="Click and drag to select"
-					name="dates"
-					id="dates"
-					register={register}
-				/>
-
-				<TimeRangeField
-					label="What times might work?"
-					subLabel="Click and drag to select a time range"
-					name="times"
-					id="times"
-					register={register}
-				/>
-
-				<SelectField
-					label="And the timezone"
-					name="timezone"
-					id="timezone"
-					register={register}
-					options={timezones}
-					required
-				/>
-
+		<>
+			<StyledMain>
 				<Center>
-					<Button type="submit">Create</Button>
+					<Logo src={logo} alt="" />
 				</Center>
-			</CreateForm>
-		</StyledMain>
+				<TitleSmall>Create a</TitleSmall>
+				<TitleLarge>CRAB FIT</TitleLarge>
+				<Links>
+					<a href="#about">About</a> / <a href="#donate">Donate</a>
+				</Links>
+
+				<CreateForm onSubmit={handleSubmit(onSubmit)} id="create">
+					<TextField
+						label="Give your event a name!"
+						subLabel="Or leave blank to generate one"
+						type="text"
+						name="name"
+						id="name"
+						register={register}
+					/>
+
+					<CalendarField
+						label="What dates might work?"
+						subLabel="Click and drag to select"
+						name="dates"
+						id="dates"
+						register={register}
+					/>
+
+					<TimeRangeField
+						label="What times might work?"
+						subLabel="Click and drag to select a time range"
+						name="times"
+						id="times"
+						register={register}
+					/>
+
+					<SelectField
+						label="And the timezone"
+						name="timezone"
+						id="timezone"
+						register={register}
+						options={timezones}
+						required
+					/>
+
+					<Center>
+						<Button type="submit">Create</Button>
+					</Center>
+				</CreateForm>
+			</StyledMain>
+
+			<AboutSection id="about">
+				<StyledMain>
+					<h2>About Crab Fit</h2>
+					<P>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.</P>
+					{/* eslint-disable-next-line */}
+					<P>Create by <a href="https://bengrant.dev" target="_blank">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</P>
+					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>.</P>
+				</StyledMain>
+			</AboutSection>
+
+			<Footer id="donate">
+				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
+				<Donate />
+			</Footer>
+		</>
 	);
 };
 
diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts
index ac3f3a0..16244bb 100644
--- a/crabfit-frontend/src/pages/Home/homeStyle.ts
+++ b/crabfit-frontend/src/pages/Home/homeStyle.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const StyledMain = styled.main`
+export const StyledMain = styled.div`
 	width: 600px;
 	margin: 20px auto;
 	max-width: calc(100% - 60px);
@@ -21,7 +21,7 @@ export const TitleSmall = styled.span`
 `;
 
 export const TitleLarge = styled.h1`
-	margin: 0 0 40px;
+	margin: 0;
 	font-size: 4rem;
 	text-align: center;
 	color: ${props => props.theme.primary};
@@ -38,3 +38,28 @@ export const TitleLarge = styled.h1`
 export const Logo = styled.img`
 	width: 80px;
 `;
+
+export const Links = styled.nav`
+	text-align: center;
+	margin: 20px 0;
+`;
+
+export const AboutSection = styled.section`
+	margin: 60px 0 0;
+	background-color: ${props => props.theme.primaryBackground};
+	padding: 20px 0;
+`;
+
+export const Footer = styled.footer`
+	width: 600px;
+	margin: 20px auto;
+	max-width: calc(100% - 60px);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+
+export const P = styled.p`
+	font-weight: 500;
+	line-height: 1.6em;
+`;