diff --git a/package.json b/package.json
index ed50cce..4fae2a6 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "firebase": "firebase emulators:start",
+    "emu": "firebase emulators:start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index 4baec18..bd4eb5b 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -18,7 +18,7 @@ $mint-bright: #e5faf3;
 // Taffy
 $taffy: #7e66cd;
 $taffy-light: #a594dc;
-$taffy-bright: #efecf9;
+$taffy-bright: #f4f1ff;
 
 $sun: #fff250;
 $sun-light: #fff8a2;
@@ -28,7 +28,7 @@ $sun-bright: #fffdea;
 $gray-dark: #4c547c;
 $gray: #6f738b;
 $gray-light: #b5b8cc;
-$gray-bright: #ebebff;
+$gray-bright: #fafaff;
 
 // Feedback
 $success: $mint;
diff --git a/src/components/AdminNavigation/AdminNavigation.jsx b/src/components/AdminNavigation/AdminNavigation.jsx
index 8f8ae55..0aec670 100644
--- a/src/components/AdminNavigation/AdminNavigation.jsx
+++ b/src/components/AdminNavigation/AdminNavigation.jsx
@@ -12,6 +12,9 @@ const AdminNavigation = () => {
 			<li>
 				<NavLink to="/admin/dashboard">Dashboard</NavLink>
 			</li>
+			<li>
+				<NavLink to="/help">Help</NavLink>
+			</li>
 			<li>
 				<NavLink to="/admin/kids">Kids</NavLink>
 			</li>
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 1a04b5c..97ee37c 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -19,6 +19,9 @@ const Footer = () => {
 							<li>
 								<Link to="/about">About</Link>
 							</li>
+							<li>
+								<Link to="/help">Help</Link>
+							</li>
 							<li>
 								<Link to="/terms">Terms & Conditions</Link>
 							</li>
diff --git a/src/components/HeaderNav/HeaderNav.jsx b/src/components/HeaderNav/HeaderNav.jsx
index 7859d9e..49ddbf6 100644
--- a/src/components/HeaderNav/HeaderNav.jsx
+++ b/src/components/HeaderNav/HeaderNav.jsx
@@ -48,6 +48,9 @@ const HeaderNav = ({ variant }) => {
 												How It Works
 											</NavLink>
 										</li>
+										<li>
+											<NavLink to="/help">Help</NavLink>
+										</li>
 										<li>
 											<NavLink exact to="/feedback">
 												Feedback
diff --git a/src/components/HelpCard/HelpCard.jsx b/src/components/HelpCard/HelpCard.jsx
new file mode 100644
index 0000000..cde0f34
--- /dev/null
+++ b/src/components/HelpCard/HelpCard.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './HelpCard.scss';
+
+const HelpCard = ({ className, children, ...rest }) => {
+	return (
+		<div className={`HelpCard ${className || ''}`} {...rest}>
+			{children}
+		</div>
+	);
+};
+
+export default HelpCard;
+
+HelpCard.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpCard.defaultProps = {
+	className: '',
+};
diff --git a/src/components/HelpCard/HelpCard.scss b/src/components/HelpCard/HelpCard.scss
new file mode 100644
index 0000000..7af4e5c
--- /dev/null
+++ b/src/components/HelpCard/HelpCard.scss
@@ -0,0 +1,16 @@
+
+@import '../../assets/styles/colors';
+.HelpCard {
+    padding: 2rem;
+    border-radius: 0.5rem;
+    background-color: $primary-bright;
+    transition: 0.3s;
+    text-align: center;
+    h2 {
+        color: $gray;
+    }
+    &:hover {
+        background-color: $primary-hover;
+        color: $primary-bright;
+    }
+}
\ No newline at end of file
diff --git a/src/components/HelpCard/index.js b/src/components/HelpCard/index.js
new file mode 100644
index 0000000..0148472
--- /dev/null
+++ b/src/components/HelpCard/index.js
@@ -0,0 +1 @@
+export { default } from './HelpCard';
diff --git a/src/components/HelpContentPage/HelpContentPage.jsx b/src/components/HelpContentPage/HelpContentPage.jsx
new file mode 100644
index 0000000..4e6e75b
--- /dev/null
+++ b/src/components/HelpContentPage/HelpContentPage.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import './HelpContentPage.scss';
+
+const HelpContentPage = ({
+	className,
+	title,
+	description,
+	children,
+	...rest
+}) => {
+	return (
+		<main className={`HelpContentPage ${className || ''}`} {...rest}>
+			<h1 className="text-center">{title}</h1>
+			<p className="text-center">{description}</p>
+			<Button size="small" variant="secondary-ghosted" href="/help">
+				Go Back
+			</Button>
+			{children}
+			<Button size="small" variant="secondary-ghosted" href="/help">
+				Go Back
+			</Button>
+		</main>
+	);
+};
+
+export default HelpContentPage;
+
+HelpContentPage.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpContentPage.defaultProps = {
+	className: '',
+};
diff --git a/src/components/HelpContentPage/HelpContentPage.scss b/src/components/HelpContentPage/HelpContentPage.scss
new file mode 100644
index 0000000..e381f3d
--- /dev/null
+++ b/src/components/HelpContentPage/HelpContentPage.scss
@@ -0,0 +1,6 @@
+.HelpContentPage {
+    .Button {
+        display: table;
+        margin: 1rem auto;
+    }
+}
\ No newline at end of file
diff --git a/src/components/HelpContentPage/index.js b/src/components/HelpContentPage/index.js
new file mode 100644
index 0000000..1574632
--- /dev/null
+++ b/src/components/HelpContentPage/index.js
@@ -0,0 +1 @@
+export { default } from './HelpContentPage';
diff --git a/src/components/HelpMessage/HelpMessage.jsx b/src/components/HelpMessage/HelpMessage.jsx
new file mode 100644
index 0000000..f6af297
--- /dev/null
+++ b/src/components/HelpMessage/HelpMessage.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { AiOutlineQuestionCircle } from 'react-icons/ai';
+import PropTypes from 'prop-types';
+import './HelpMessage.scss';
+
+const HelpMessage = ({ className, children, ...rest }) => {
+	return (
+		<div className="HelpMessage">
+			<hr />
+			<div
+				className={`HelpMessageBox text-center mt-4 ${className || ''}`}
+				{...rest}
+			>
+				<AiOutlineQuestionCircle size="24" />
+				{children}
+			</div>
+		</div>
+	);
+};
+
+export default HelpMessage;
+
+HelpMessage.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpMessage.defaultProps = {
+	className: '',
+};
diff --git a/src/components/HelpMessage/HelpMessage.scss b/src/components/HelpMessage/HelpMessage.scss
new file mode 100644
index 0000000..3dc2c5c
--- /dev/null
+++ b/src/components/HelpMessage/HelpMessage.scss
@@ -0,0 +1,20 @@
+@import '../../assets/styles/colors';
+.HelpMessage {
+    hr {
+        margin: 1.5rem 0;
+        border-color: $primary-bright;
+    }
+    .HelpMessageBox {
+        border-radius: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        svg {
+            fill: $primary;
+        }
+        p {
+            color: $gray;
+        }
+    }
+}
diff --git a/src/components/HelpMessage/index.js b/src/components/HelpMessage/index.js
new file mode 100644
index 0000000..ecc7072
--- /dev/null
+++ b/src/components/HelpMessage/index.js
@@ -0,0 +1 @@
+export { default } from './HelpMessage';
diff --git a/src/components/LoomVideo/LoomVideo.jsx b/src/components/LoomVideo/LoomVideo.jsx
new file mode 100644
index 0000000..fb75a30
--- /dev/null
+++ b/src/components/LoomVideo/LoomVideo.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { string } from 'prop-types';
+import './LoomVideo.scss';
+
+const LoomVideo = ({ className, title, embedUrl, ...rest }) => {
+	return (
+		<div className={`LoomVideo ${className}`} {...rest}>
+			<iframe
+				title={title}
+				src={embedUrl}
+				frameBorder="0"
+				webkitallowfullscreen
+				mozallowfullscreen
+				allowFullScreen
+			/>
+		</div>
+	);
+};
+
+export default LoomVideo;
+
+LoomVideo.propTypes = {
+	className: string,
+	title: string.isRequired,
+	embedUrl: string.isRequired,
+};
+
+LoomVideo.defaultProps = {
+	className: '',
+};
diff --git a/src/components/LoomVideo/LoomVideo.scss b/src/components/LoomVideo/LoomVideo.scss
new file mode 100644
index 0000000..5d2b26c
--- /dev/null
+++ b/src/components/LoomVideo/LoomVideo.scss
@@ -0,0 +1,12 @@
+.LoomVideo {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/components/LoomVideo/index.js b/src/components/LoomVideo/index.js
new file mode 100644
index 0000000..6fabb5e
--- /dev/null
+++ b/src/components/LoomVideo/index.js
@@ -0,0 +1 @@
+export { default } from './LoomVideo';
diff --git a/src/components/MarketingMain/MarketingMain.jsx b/src/components/MarketingMain/MarketingMain.jsx
index d4e1401..370f062 100644
--- a/src/components/MarketingMain/MarketingMain.jsx
+++ b/src/components/MarketingMain/MarketingMain.jsx
@@ -20,6 +20,7 @@ import { UserContext } from '../../providers/UserProvider';
 import { ChildContext } from '../../providers/ChildProvider';
 import ContactThankYou from '../../pages/ContactThankYou';
 import './MarketingMain.scss';
+import Help from '../../pages/Help';
 
 const MarketingMain = () => {
 	const { user } = useContext(UserContext);
@@ -38,6 +39,7 @@ const MarketingMain = () => {
 			<Switch>
 				<Route exact path="/" component={Home} />
 				<Route path="/how-it-works" component={HowItWorks} />
+				<Route path="/help" component={Help} />
 				<Route path="/feedback" component={Feedback} />
 				<Route path="/feedback-thanks" component={FeedbackThankYou} />
 				<Route path="/terms" component={Terms} />
diff --git a/src/index.scss b/src/index.scss
index eb5b3b9..12ef955 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,6 @@
-@import '~bootstrap/scss/bootstrap';
+
 @import './assets/styles/colors';
+@import '~bootstrap/scss/bootstrap';
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
 
 body {
@@ -80,8 +81,11 @@ h5,
 a,
 .LINK {
 	transition: 0.3s;
-	color: var(--prime);
+	color: $primary;
 	text-decoration: none;
+	&:hover {
+		text-decoration: none;
+	}
 }
 p,
 li {
@@ -119,3 +123,4 @@ li {
 .fw-bold {
 	font-weight: bold;
 }
+
diff --git a/src/pages/AdminKids/AdminKids.jsx b/src/pages/AdminKids/AdminKids.jsx
index c0c6846..0b9812f 100644
--- a/src/pages/AdminKids/AdminKids.jsx
+++ b/src/pages/AdminKids/AdminKids.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { Row, Col } from 'react-bootstrap';
 import { UserContext } from '../../providers/UserProvider';
 import KidCard from '../../components/KidCard';
@@ -12,6 +12,7 @@ import pendingKids from '../../assets/images/bird_pending_data.svg';
 import addChildIcon from '../../assets/images/add_child_white.svg';
 import './AdminKids.scss';
 import { ToastContext } from '../../providers/ToastProvider';
+import HelpMessage from '../../components/HelpMessage';
 
 const AdminKids = () => {
 	const { user } = useContext(UserContext);
@@ -56,6 +57,17 @@ const AdminKids = () => {
 							</p>
 						</div>
 					)}
+					<HelpMessage className="text-primary">
+						<p className="m-0">
+							Need help logging your child(ren) in?{' '}
+							<Link
+								className="LINK"
+								to="/help/logging-children-in"
+							>
+								Learn More
+							</Link>
+						</p>
+					</HelpMessage>
 				</Col>
 				<Col sm={4} className="text-center d-none d-md-block">
 					<DashSideForm>
diff --git a/src/pages/AdminSetupFamily/AdminSetupFamily.jsx b/src/pages/AdminSetupFamily/AdminSetupFamily.jsx
index 0bc5681..c186c14 100644
--- a/src/pages/AdminSetupFamily/AdminSetupFamily.jsx
+++ b/src/pages/AdminSetupFamily/AdminSetupFamily.jsx
@@ -1,12 +1,13 @@
 import React, { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { firestore } from '../../config/firebaseConfig';
 import { UserContext } from '../../providers/UserProvider';
 import Section from '../../components/Section';
 import Button from '../../components/Button';
 import Input from '../../components/Input';
-import './AdminSetupFamily.scss';
+import HelpMessage from '../../components/HelpMessage';
 import { ToastContext } from '../../providers/ToastProvider';
+import './AdminSetupFamily.scss';
 
 const AdminSetupFamily = () => {
 	const history = useHistory();
@@ -104,6 +105,14 @@ const AdminSetupFamily = () => {
 				{feedback ? <p className="uk-text-danger">{feedback}</p> : null}
 				<Button type="submit">Setup Family</Button>
 			</form>
+			<HelpMessage>
+				<p className="m-0">
+					Need help logging your child(ren) in?{' '}
+					<Link className="LINK" to="/help/family-setup">
+						Learn More
+					</Link>
+				</p>
+			</HelpMessage>
 		</Section>
 	);
 };
diff --git a/src/pages/Help/Help.jsx b/src/pages/Help/Help.jsx
new file mode 100644
index 0000000..7a57591
--- /dev/null
+++ b/src/pages/Help/Help.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Switch, Link, Route } from 'react-router-dom';
+import HelpFamilySetup from './HelpFamilySetup';
+import HelpChildLogin from './HelpChildLogin';
+import Section from '../../components/Section';
+import './Help.scss';
+import HelpCard from '../../components/HelpCard';
+
+const Help = () => {
+	const helpDocs = [
+		{
+			path: '/help/family-setup',
+			title: 'How Do I Setup my Family',
+			component: HelpFamilySetup,
+		},
+		{
+			path: '/help/child-login',
+			title: 'How Does My Child Login?',
+			component: HelpChildLogin,
+		},
+	];
+	return (
+		<Section className="Help">
+			<Switch>
+				{helpDocs.map((doc, index) => {
+					return (
+						<Route
+							key={index}
+							exact
+							path={doc.path}
+							component={doc.component}
+						/>
+					);
+				})}
+				<Route exact path="/help">
+					<h1 className="text-center">Help</h1>
+					<p className="text-center">
+						Browse all of help docs to better assist you with
+						navigating throughout the app!
+					</p>
+					<div className="help-docs d-flex justify-content-center align-items-center">
+						{helpDocs.map((doc, index) => {
+							return (
+								<Link key={index} to={doc.path}>
+									<HelpCard>{doc.title}</HelpCard>
+								</Link>
+							);
+						})}
+					</div>
+				</Route>
+			</Switch>
+			{/* TODO: List all of the help doc links here */}
+			{/* TODO: Create routes for help docs */}
+		</Section>
+	);
+};
+
+export default Help;
diff --git a/src/pages/Help/Help.scss b/src/pages/Help/Help.scss
new file mode 100644
index 0000000..2ee486d
--- /dev/null
+++ b/src/pages/Help/Help.scss
@@ -0,0 +1,13 @@
+.Help {
+    .container {
+        min-height: calc(100vh - 15rem);
+    }
+    .help-docs {
+        margin-top: 2rem;
+        flex-wrap: wrap;
+        gap: 2rem;
+        a {
+            flex-grow: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Help/HelpChildLogin/HelpChildLogin.jsx b/src/pages/Help/HelpChildLogin/HelpChildLogin.jsx
new file mode 100644
index 0000000..260c648
--- /dev/null
+++ b/src/pages/Help/HelpChildLogin/HelpChildLogin.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import LoomVideo from '../../../components/LoomVideo';
+import './HelpChildLogin.scss';
+import HelpContentPage from '../../../components/HelpContentPage';
+
+const HelpChildLogin = () => {
+	return (
+		<HelpContentPage
+			className="HelpChildLogin"
+			title="How Does My Child Login?"
+			description="Logging into Inthisorder with a child account is super simple."
+		>
+			<LoomVideo
+				title="How Does My Child Login with Inthisorder"
+				embedUrl="https://www.loom.com/embed/6e6e2f1177aa4c6086659cdb1f0c77e1"
+			/>
+		</HelpContentPage>
+	);
+};
+
+export default HelpChildLogin;
diff --git a/src/pages/Help/HelpChildLogin/HelpChildLogin.scss b/src/pages/Help/HelpChildLogin/HelpChildLogin.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Help/HelpChildLogin/index.js b/src/pages/Help/HelpChildLogin/index.js
new file mode 100644
index 0000000..1c770e7
--- /dev/null
+++ b/src/pages/Help/HelpChildLogin/index.js
@@ -0,0 +1 @@
+export { default } from './HelpChildLogin';
diff --git a/src/pages/Help/HelpFamilySetup/HelpFamilySetup.jsx b/src/pages/Help/HelpFamilySetup/HelpFamilySetup.jsx
new file mode 100644
index 0000000..c092d9b
--- /dev/null
+++ b/src/pages/Help/HelpFamilySetup/HelpFamilySetup.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import LoomVideo from '../../../components/LoomVideo';
+import HelpContentPage from '../../../components/HelpContentPage';
+import './HelpFamilySetup.scss';
+
+const HelpFamilySetup = () => {
+	return (
+		<HelpContentPage
+			className="HelpFamilySetup"
+			title="How Do I Setup My Family"
+			description="Setting up a family is very simple with Inthisorder and it
+        consists of 3 easy steps."
+		>
+			<LoomVideo
+				title="How Do I Setup My Family with Inthisorder"
+				embedUrl="https://www.loom.com/embed/52d3163b81994cae88b68e46a77a8c85"
+			/>
+		</HelpContentPage>
+	);
+};
+
+export default HelpFamilySetup;
diff --git a/src/pages/Help/HelpFamilySetup/HelpFamilySetup.scss b/src/pages/Help/HelpFamilySetup/HelpFamilySetup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Help/HelpFamilySetup/index.js b/src/pages/Help/HelpFamilySetup/index.js
new file mode 100644
index 0000000..21835b1
--- /dev/null
+++ b/src/pages/Help/HelpFamilySetup/index.js
@@ -0,0 +1 @@
+export { default } from './HelpFamilySetup';
diff --git a/src/pages/Help/index.js b/src/pages/Help/index.js
new file mode 100644
index 0000000..a5f8285
--- /dev/null
+++ b/src/pages/Help/index.js
@@ -0,0 +1 @@
+export { default } from './Help';