diff --git a/src/App.tsx b/src/App.tsx
index aee69926..220d9387 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import {BrowserRouter, Redirect, useHistory} from "react-router-dom";
 import './theme/main.scss'
 import Splash from "./pages/Splash";
 import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
 
 
 interface StateProps {
@@ -33,6 +34,7 @@ const ReactApp: React.FC<AppProps> = ({tokenData}) => {
 				<AuthenticatedRoute path="/home*" render={() => <Home/>}/>
 				<Route exact path='/splash'><Splash/></Route>
 				<Route exact path='/sign-in'><SignIn/></Route>
+				<Route exact path='/sign-up'><SignUp/></Route>
 				<Route exact path='/'><Redirect to={'/splash'}/></Route>
 			</main>
 		</BrowserRouter>
diff --git a/src/components/BottomStickySection/index.scss b/src/components/BottomStickySection/index.scss
index d5c6ffb9..9df36620 100644
--- a/src/components/BottomStickySection/index.scss
+++ b/src/components/BottomStickySection/index.scss
@@ -8,7 +8,7 @@
     padding: 6px;
     margin: 0;
   }
-  ion-button {
+  button {
     margin: 0;
   }
 }
diff --git a/src/components/Errors/NetworkError/index.scss b/src/components/Errors/NetworkError/index.scss
index bd834cc3..b8fb8353 100644
--- a/src/components/Errors/NetworkError/index.scss
+++ b/src/components/Errors/NetworkError/index.scss
@@ -5,7 +5,7 @@
     height: 70%;
     text-align: center;
     padding: 0 10%;
-    ion-icon {
+    img {
         display: block;
         margin: 0 auto;
         font-size: 96px;
diff --git a/src/components/GeneralUIElements/BorderedInput/index.scss b/src/components/GeneralUIElements/BorderedInput/index.scss
index e2d503b3..6f267add 100644
--- a/src/components/GeneralUIElements/BorderedInput/index.scss
+++ b/src/components/GeneralUIElements/BorderedInput/index.scss
@@ -1,9 +1,7 @@
 .bordered-input {
   margin: 0 0 12px;
-  ion-datetime,
-  ion-textarea,
-  ion-input {
+  input, textarea {
     --padding-start: 12px;
-    border: 2px var(--ion-color-primary) solid;
+    border: 2px var(--color-primary) solid;
   }
 }
diff --git a/src/components/GeneralUIElements/ConfirmationPageContent/index.scss b/src/components/GeneralUIElements/ConfirmationPageContent/index.scss
index 5cd1d357..1fc2976b 100644
--- a/src/components/GeneralUIElements/ConfirmationPageContent/index.scss
+++ b/src/components/GeneralUIElements/ConfirmationPageContent/index.scss
@@ -9,11 +9,11 @@
     color: black;
   }
   h3 {
-    color: var(--ion-color-medium);
+    color: var(--color-medium);
     font-weight: bold;
   }
   hr {
-    background: var(--ion-color-light-shade);
+    background: var(--color-light-shade);
     height: 1px;
     max-width: 35vw;
     margin: 0 auto;
diff --git a/src/components/GeneralUIElements/GrayInput/index.scss b/src/components/GeneralUIElements/GrayInput/index.scss
index cf23a4eb..6858e3ee 100644
--- a/src/components/GeneralUIElements/GrayInput/index.scss
+++ b/src/components/GeneralUIElements/GrayInput/index.scss
@@ -1,9 +1,8 @@
 .gray-input {
-  ion-datetime,
-  ion-input {
+  input {
     --padding-start: 3.125vw;
     border: transparent;
-  	background: var(--ion-color-light);
+  	background: var(--color-light);
   	border-radius: 10px;
   }
 }
diff --git a/src/components/GeneralUIElements/GrayInput/responsive.scss b/src/components/GeneralUIElements/GrayInput/responsive.scss
index 14e85c9d..eaa84317 100644
--- a/src/components/GeneralUIElements/GrayInput/responsive.scss
+++ b/src/components/GeneralUIElements/GrayInput/responsive.scss
@@ -1,6 +1,5 @@
 .gray-input {
-  ion-datetime,
-  ion-input {
+  input {
     @media screen and (min-width: 576px) {
       --padding-start: 18px;
     }
diff --git a/src/components/GeneralUIElements/UnderlinedInput/index.scss b/src/components/GeneralUIElements/UnderlinedInput/index.scss
index 508e24a1..1c7baf3b 100644
--- a/src/components/GeneralUIElements/UnderlinedInput/index.scss
+++ b/src/components/GeneralUIElements/UnderlinedInput/index.scss
@@ -1,12 +1,10 @@
 .underlined-input {
-  ion-datetime,
-  ion-textarea,
-  ion-input {
+  input {
     --padding-start: 10px;
     border: transparent;
-    border-bottom: 3px var(--ion-color-medium) solid;
+    border-bottom: 3px var(--color-medium) solid;
   }
-  ion-label {
+  label {
     font-weight: 600;
   }
 }
diff --git a/src/components/InputWrapper/index.scss b/src/components/InputWrapper/index.scss
new file mode 100644
index 00000000..d6c571a0
--- /dev/null
+++ b/src/components/InputWrapper/index.scss
@@ -0,0 +1,35 @@
+.input-wrapper {
+  margin: 8vw 0 5vw;
+  &.rounded{
+    input{
+      border-radius: 5px;
+    }
+  }
+  &.dark{
+    input{
+      border-color: var(--color-dark);
+    }
+  }
+  label {
+    padding-left: 5px;
+    padding-bottom: 4px;
+    margin-bottom: 0;
+    display: block;
+  }
+  input {
+    border: 1px var(--color-primary) solid;
+    --padding-start: 3.125vw;
+  }
+  .subtext {
+    padding-top: 5px;
+    padding-left: 5px;
+  }
+}
+.plt-android {
+  .input-wrapper {
+    label {
+      padding-bottom: 3.5vw;
+    }
+  }
+}
+@import "responsive";
diff --git a/src/components/InputWrapper/index.test.tsx b/src/components/InputWrapper/index.test.tsx
new file mode 100644
index 00000000..532ffb0d
--- /dev/null
+++ b/src/components/InputWrapper/index.test.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Input from './index';
+
+test('renders Input without crashing', () => {
+    const { baseElement } = render(<Input  label={'A Label'}/>);
+    expect(baseElement).toBeDefined();
+});
\ No newline at end of file
diff --git a/src/components/InputWrapper/index.tsx b/src/components/InputWrapper/index.tsx
new file mode 100644
index 00000000..5284ef01
--- /dev/null
+++ b/src/components/InputWrapper/index.tsx
@@ -0,0 +1,23 @@
+import React, {PropsWithChildren} from 'react'
+import './index.scss';
+
+interface Props extends PropsWithChildren<any> {
+	label: string
+	subtext?: string
+	error?: string
+	color?: string
+	rounded?: boolean
+}
+
+const InputWrapper: React.FC<Props> = ({  label, error, color, rounded, subtext, children }) => {
+	const wrapperClasses =  (color ? ' ' + color : '') + (rounded ? ' rounded' : '')
+	return (
+		<div className={'input-wrapper' + wrapperClasses}>
+			<label color={error ? 'danger' : 'dark'}>{error ? error : label}</label>
+			{children}
+			{subtext && <p className={'subtext'}>{subtext}</p>}
+		</div>
+	)
+}
+
+export default InputWrapper
diff --git a/src/components/InputWrapper/responsive.scss b/src/components/InputWrapper/responsive.scss
new file mode 100644
index 00000000..4fab5b0b
--- /dev/null
+++ b/src/components/InputWrapper/responsive.scss
@@ -0,0 +1,19 @@
+.input-wrapper {
+  @media screen and (min-width: 600px) {
+    margin: 48px 0 30px;
+  }
+  input {
+    @media screen and (min-width: 576px) {
+      --padding-start: 18px;
+    }
+  }
+}
+.plt-android {
+  .input-wrapper {
+    label {
+      @media screen and (min-width: 600px) {
+        padding-bottom: 21px;
+      }
+    }
+  }
+}
diff --git a/src/pages/Home/Post/index.scss b/src/pages/Home/Post/index.scss
deleted file mode 100644
index 4448403b..00000000
--- a/src/pages/Home/Post/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.post-details-content-wrapper {
-  border-radius: 20px;
-  overflow: hidden;
-  perspective: 1px;
-  @media (pointer: fine) {
-    --padding-bottom: 36px !important;
-  }
-}
diff --git a/src/pages/Home/Post/index.test.tsx b/src/pages/Home/Post/index.test.tsx
deleted file mode 100644
index c5aea1bb..00000000
--- a/src/pages/Home/Post/index.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import PostPage from './index';
-import { shallow } from 'enzyme';
-import {MemoryRouter} from 'react-router';
-
-test('renders without crashing', () => {
-    const baseElement = shallow(<MemoryRouter><PostPage  /></MemoryRouter>);
-    expect(baseElement).toBeDefined();
-});
diff --git a/src/pages/Home/Post/index.tsx b/src/pages/Home/Post/index.tsx
deleted file mode 100644
index 46c6a715..00000000
--- a/src/pages/Home/Post/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import './index.scss';
-import MeContextProvider, {MeContext, MeContextStateConsumer} from '../../../contexts/MeContext';
-import {PostContext, PostContextConsumerState, PostContextProvider} from '../../../contexts/PostContext';
-import Post from '../../../models/post/post';
-import Location from '../../../models/location/location';
-import User from "../../../models/user/user";
-import PostResponse from "../../../models/post/post-response";
-import {useHistory} from 'react-router-dom';
-import {useLocation, useParams} from 'react-router';
-
-interface PostPageContentProps {
-	post: Post,
-	me: User,
-	url: string
-	setPost: (post: Post) => void,
-	inFocus: boolean,
-}
-
-const PostPageContent: React.FC<PostPageContentProps> = ({post, setPost, me, url, inFocus}) => {
-
-	const navigate = useHistory();
-
-	return (
-		<section className={'post-details-content-wrapper ion-no-padding'}>
-			{/*TODO Post Output*/}
-		</section>
-	)
-}
-
-interface SeenPostsReadyProps extends PostLoadedProps {
-	meContext: MeContextStateConsumer,
-}
-
-const SeenPostsReady: React.FC<SeenPostsReadyProps> = ({meContext, postContext, inFocus}) => {
-
-	const location = useLocation()
-
-
-	const setPost = (post: Post) => {
-		postContext.setPost(post);
-	}
-
-	return (
-		<PostPageContent
-			key={postContext.post.id}
-			post={postContext.post}
-			setPost={setPost}
-			me={meContext.me}
-			url={location.pathname}
-			inFocus={inFocus}
-		/>
-	)
-}
-
-interface PostLoadedProps {
-	inFocus: boolean,
-	postContext: PostContextConsumerState,
-}
-
-const PostLoaded: React.FC<PostLoadedProps> = (props) => {
-
-
-	return (
-		<MeContextProvider>
-			<MeContext.Consumer>
-				{meContext =>
-					<SeenPostsReady
-						meContext={meContext}
-						{...props}
-					/>
-				}
-			</MeContext.Consumer>
-		</MeContextProvider>
-	)
-}
-
-type RouteParams = {
-	postId: string,
-}
-
-const PostPage: React.FC = () => {
-	const [inFocus, setInFocus] = useState(false);
-
-	const {postId} = useParams<RouteParams>();
-
-	useEffect(() => {
-		setInFocus(true);
-
-		return () => {
-			setInFocus(false);
-		}
-	}, []);
-
-	return (
-		<section className={'post-page'}>
-			<header>Page Header</header>
-			<section>
-				<PostContextProvider postId={parseInt(postId!)}>
-					<PostContext.Consumer>
-						{postContext =>
-							<PostLoaded
-								inFocus={inFocus}
-								postContext={postContext}
-							/>
-						}
-					</PostContext.Consumer>
-				</PostContextProvider>
-			</section>
-		</section>
-	)
-}
-
-export default PostPage
diff --git a/src/pages/Home/index.scss b/src/pages/Home/index.scss
index a93f8f37..b030dd98 100644
--- a/src/pages/Home/index.scss
+++ b/src/pages/Home/index.scss
@@ -1,25 +1,4 @@
-.home-splitpane {
-  max-width: 1024px;
-  margin: 0 auto;
-  --ion-safe-area-bottom: 15px;
-  .home-tabs-content.ion-page-hidden {
-    display: flex !important;
-  }
-  .home-tabs {
-    --border: 0;
-    padding: 1vw;
-    margin-bottom: var(--ion-safe-area-bottom);
-    .profile-image {
-      width: 8vw;
-      height: 8vw;
-    }
-    ion-icon {
-      font-size: 7.5vw;
-      &.primary-tab{
-        --color: var(--ion-color-primary);
-      }
-    }
-  }
+#home-page {
 }
 
 @import "./responsive";
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index f47febcb..1c92c0ce 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -8,9 +8,9 @@ interface HomeProps {
 const Home: React.FC<HomeProps> = (props) => {
 
     return (
-        <div>
+        <section id={"home-page"}>
             <h1>Home Page</h1>
-        </div>
+        </section>
     )
 }
 
diff --git a/src/pages/Home/responsive.scss b/src/pages/Home/responsive.scss
index e18b5457..ed5fa1a3 100644
--- a/src/pages/Home/responsive.scss
+++ b/src/pages/Home/responsive.scss
@@ -9,7 +9,7 @@
         height: 40px;
       }
 
-      ion-icon {
+      .icon {
         font-size: 38px;
       }
     }
diff --git a/src/pages/Home/route-helpers.tsx b/src/pages/Home/route-helpers.tsx
deleted file mode 100644
index 16af0ffc..00000000
--- a/src/pages/Home/route-helpers.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, {ReactElement} from 'react';
-import PostPage from './Post';
-import {Route} from 'react-router';
-
-interface SubRoute {
-    routePath: string,
-    page: ReactElement,
-}
-const SubRoutes: SubRoute[] = [
-    {
-        routePath: '/post/:postId',
-        page: <PostPage/>,
-    },
-]
-
-
-export const buildSubRoutes = (baseUrl: string): JSX.Element[] => {
-    return SubRoutes.map(i =>
-        <Route
-            key={`${baseUrl}${i.routePath}`}
-            path={`${baseUrl}${i.routePath}`}
-            exact
-            render={() => i.page}
-        />
-    )
-}
diff --git a/src/pages/PrivacyPolicy/index.scss b/src/pages/PrivacyPolicy/index.scss
new file mode 100644
index 00000000..ad437a2c
--- /dev/null
+++ b/src/pages/PrivacyPolicy/index.scss
@@ -0,0 +1,10 @@
+#welcome-section {
+  .privacy-page {
+    .content {
+      --background: white;
+      h3 {
+        font-size: 22px;
+      }
+    }
+  }
+}
diff --git a/src/pages/PrivacyPolicy/index.test.tsx b/src/pages/PrivacyPolicy/index.test.tsx
new file mode 100644
index 00000000..051bf8a1
--- /dev/null
+++ b/src/pages/PrivacyPolicy/index.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PrivacyPolicy from './index';
+import {MemoryRouter} from 'react-router';
+
+test('renders without crashing', () => {
+    const { baseElement } = render(<MemoryRouter><PrivacyPolicy /></MemoryRouter>);
+    expect(baseElement).toBeDefined();
+});
diff --git a/src/pages/PrivacyPolicy/index.tsx b/src/pages/PrivacyPolicy/index.tsx
new file mode 100644
index 00000000..821c1b10
--- /dev/null
+++ b/src/pages/PrivacyPolicy/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PrivacyPolicyText from '../../components/PrivacyPolicyText';
+import './index.scss';
+
+const PrivacyPolicy: React.FC = () => {
+
+    return (
+        <section className={'privacy-page'}>
+            <header>
+                Privacy Policy
+            </header>
+            <PrivacyPolicyText
+                contactUsUrl={'/welcome/contact-us'}
+            />
+        </section>
+    );
+}
+
+export default PrivacyPolicy;
diff --git a/src/pages/SignIn/index.test.tsx b/src/pages/SignIn/index.test.tsx
index ef9cc7a7..55df1623 100644
--- a/src/pages/SignIn/index.test.tsx
+++ b/src/pages/SignIn/index.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import SignIn from './index';
 import { shallow } from 'enzyme';
-import {MemoryRouter} from 'react-router';
-import SignIn from "./index";
+import { MemoryRouter } from 'react-router-dom';
 
 test('renders without crashing', () => {
-    const baseElement = shallow(<MemoryRouter><SignIn  /></MemoryRouter>);
+    const baseElement = shallow(<MemoryRouter><SignIn /></MemoryRouter>);
     expect(baseElement).toBeDefined();
 });
diff --git a/src/pages/SignIn/index.tsx b/src/pages/SignIn/index.tsx
index 7fadfd19..c2753b23 100644
--- a/src/pages/SignIn/index.tsx
+++ b/src/pages/SignIn/index.tsx
@@ -4,7 +4,7 @@ import * as Yup from 'yup';
 import './index.scss';
 import {useFormik} from "formik";
 import AuthRequests, {LoginReq} from "../../services/requests/AuthRequests";
-import {useHistory} from "react-router-dom";
+import {Link, useHistory} from 'react-router-dom';
 import {Button, Form, FormControl, FormLabel} from "react-bootstrap";
 import Page from "../../components/Template/Page";
 
@@ -26,6 +26,7 @@ const SignIn: React.FC = ({}) => {
         try {
             if (await AuthRequests.signIn(userReq)) {
                 const redirectUrl = localStorage.getItem('login_redirect');
+                localStorage.removeItem('login_redirect');
                 history.push(redirectUrl ?? '/');
             } else {
                 setError('Unknown Error')
@@ -69,6 +70,10 @@ const SignIn: React.FC = ({}) => {
                     onInput={password => form.setFieldValue('password', password.currentTarget.value)}
                     type={'password'}
                 />
+                
+                <Link to='/forgot-password'>
+                    forgot password?
+                </Link>
                 <Button type={"submit"}>Submit</Button>
                 <p className={'error'}>{error}</p>
             </Form>
diff --git a/src/pages/SignUp/index.scss b/src/pages/SignUp/index.scss
new file mode 100644
index 00000000..5ece80d7
--- /dev/null
+++ b/src/pages/SignUp/index.scss
@@ -0,0 +1,46 @@
+#welcome-section {
+  .sign-up-page {
+    .email-signup-step {
+      h3 {
+        margin: 54px 6px 30px;
+        color: var(--color-dark);
+        text-align: left;
+        font-weight: normal;
+      }
+      .email-box {
+        border: none;
+        border-bottom: 3px black solid;
+        margin: 0 6px 16px 6px;
+        --padding-start: 0;
+        input {
+          color: var(--color-medium);
+          --placeholder-color: var(--color-light-shade);
+          --placeholder-font-weight: normal;
+          --placeholder-opacity: 1;
+          font-style: italic;
+          font-size: 7vw;
+        }
+      }
+      .disclaimer-checkbox {
+        border: none;
+        margin: 48px 6px 0;
+        --padding-start: 0;
+        input[type='checkbox'] {
+          vertical-align: top;
+          margin-right: 5vw;
+          padding-left: 0;
+        }
+        .disclaimer {
+          display: inline-block;
+          font-style: italic;
+          color: var(--color-medium);
+          text-align: left;
+          padding-bottom: 32px;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+@import "responsive";
diff --git a/src/pages/SignUp/index.test.tsx b/src/pages/SignUp/index.test.tsx
new file mode 100644
index 00000000..8a1ca0c4
--- /dev/null
+++ b/src/pages/SignUp/index.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import SignUpignUp from './index';
+import { shallow } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+
+test('renders without crashing', () => {
+    const baseElement = shallow(<MemoryRouter><SignUpignUp /></MemoryRouter>);
+    expect(baseElement).toBeDefined();
+});
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
new file mode 100644
index 00000000..e58b65cd
--- /dev/null
+++ b/src/pages/SignUp/index.tsx
@@ -0,0 +1,229 @@
+import React, {useEffect, useRef, useState} from 'react'
+import * as Yup from 'yup'
+import './index.scss'
+import {useHistory} from 'react-router-dom';
+import SignUpContextProvider, {
+    SignUpContext,
+    SignUpContextStateConsumer,
+    SignUpData
+} from "../../contexts/signin/SignUpContext";
+import ServerAlert from "../../components/ServerAlert";
+import {RequestError} from "../../models/request-error";
+import AuthRequests from "../../services/requests/AuthRequests";
+import {useFormik} from "formik";
+
+
+interface SignUpContentProps {
+    setValidationError: (error: string) => void,
+    signUpContext: SignUpContextStateConsumer,
+    onSubmit: (formData: SignUpData) => void,
+}
+
+const SignUpContent: React.FC<SignUpContentProps> = ({signUpContext, onSubmit, setValidationError}) => {
+    const emailInputRef = useRef<HTMLInputElement>(null)
+    const firstNameInputRef = useRef<HTMLInputElement>(null)
+    const lastNameInputRef = useRef<HTMLInputElement>(null)
+    const passwordInputRef = useRef<HTMLInputElement>(null)
+    const SignUpSchema = Yup.object().shape({
+        first_name: Yup.string().trim().required('First Name is required'),
+        last_name: Yup.string().trim().required('Last Name is required'),
+        email: Yup.string().email('Invalid Email').required('Email is required'),
+        password: Yup.string().trim().required('Password is required'),
+    })
+
+    const inputs = [
+        firstNameInputRef?.current,
+        lastNameInputRef?.current,
+        emailInputRef?.current,
+        passwordInputRef?.current,
+    ].filter(i => i)as HTMLInputElement[]
+
+    const validateForm = (submission: any) : string|undefined =>  {
+        if (submission.errors.email && submission.touched.email) {
+            return submission.errors.email
+        }
+        else if (submission.errors.first_name && submission.touched.first_name) {
+            return submission.errors.first_name;
+        }
+        else if (submission.errors.last_name && submission.touched.last_name) {
+            return submission.errors.last_name;
+        }
+        else if (submission.errors.password && submission.touched.password) {
+            return submission.errors.password;
+        }
+        return undefined
+    }
+
+    const form: any = useFormik({
+        initialValues: signUpContext.data,
+        initialErrors: {first_name: signUpContext.data.first_name},
+        validationSchema: SignUpSchema,
+        onSubmit: onSubmit,
+    });
+
+    useEffect(() => {
+        if (!form.isValid) {
+
+            const currentError = validateForm(form);
+
+            setValidationError(currentError ? currentError : '');
+        }
+    }, [form.isSubmitting, form.isValid])
+
+    const enterPressed = (event: any) => {
+        if (event.keyCode === 13 && !form.isSubmitting) {
+            form.handleSubmit();
+        }
+    }
+
+    useEffect(() => {
+        if (inputs) {
+            inputs.forEach((i: any) => {
+                i.removeEventListener('keydown', enterPressed);
+                i.addEventListener('keydown', enterPressed)
+            })
+        }
+    }, [inputs])
+
+    return (
+        <div className={"flex-wrapper"}>
+            <div className={'content-wrapper'}>
+                <div>
+                    <label>
+                        <input
+                            autoCapitalize={'word'}
+                            name='first_name'
+                            placeholder={'First Name'}
+                            type='text'
+                            onChange={form.handleChange}
+                            ref={firstNameInputRef}
+                        />
+                    </label>
+                    <label>
+                        <input
+                            autoCapitalize={'word'}
+                            name='last_name'
+                            placeholder={'Last Name'}
+                            type='text'
+                            onChange={form.handleChange}
+                            ref={lastNameInputRef}
+                        />
+                    </label>
+                </div>
+                <label className={'email-box'}>
+                    <input
+                        name='email'
+                        placeholder={'email@example.com'}
+                        type='email'
+                        onChange={form.handleChange}
+                        ref={emailInputRef}
+                    />
+                </label>
+                <label className={'password-box'}>
+                    <input
+                        name='password'
+                        placeholder={'password'}
+                        type='email'
+                        onChange={form.handleChange}
+                        ref={passwordInputRef}
+                    />
+                </label>
+                <div
+                    onClick={form ? () => form.handleSubmit() : () => onSubmit(signUpContext.data)}
+                    className={form && form.isValid ? 'valid' : ''}
+                >
+                    Submit
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const SignUp: React.FC = () => {
+
+    const [validationError, setValidationError] = useState('')
+    const [requestError, setRequestError] = useState<RequestError|undefined>(undefined);
+    const history = useHistory();
+
+    const onSubmit = (formData: SignUpData, setData: (data: SignUpData) => void) => {
+        setData(formData);
+        if ( formData.phone && !formData.email ) {
+            duplicatePhoneCheck(formData.phone)
+        } else if ( formData.email ) {
+            duplicateEmailCheck(formData.email).then(() => {
+                setValidationError('');
+                processSignUp(formData);
+            })
+        }
+    }
+
+    const duplicatePhoneCheck = async (phone: string) => {
+        try {
+            await AuthRequests.signUp({phone: phone} as SignUpData)
+        } catch (error: any) {
+            if ( error.data.errors.phone ) {
+                setValidationError('Phone number is already in use')
+            }
+        }
+    }
+
+    const duplicateEmailCheck = async (email: string) => {
+        try {
+            await AuthRequests.signUp({email: email} as SignUpData)
+        } catch (error: any) {
+            if (error.data.errors.email) {
+                setValidationError('Email number is already in use')
+                return Promise.reject();
+            }
+            return Promise.resolve();
+        }
+
+    }
+
+    const processSignUp = async (signUpData: SignUpData) => {
+
+        try {
+            await AuthRequests.signUp(signUpData)
+            const redirectUrl = localStorage.getItem('login_redirect');
+            localStorage.removeItem('login_redirect');
+            if (redirectUrl) {
+                history.push(redirectUrl);
+            } else {
+                history.push('/home')
+            }
+        } catch (error) {
+            setRequestError(error as RequestError)
+        }
+    }
+
+    const cancel = () => {
+        history.goBack();
+    }
+
+    return (
+        <section className={'sign-up-page'}>
+            <header onClick={() => cancel()}>Cancel</header>
+            <SignUpContextProvider>
+                <SignUpContext.Consumer>
+                    {signUpContext => (
+                        <React.Fragment>
+                            <SignUpContent
+                                setValidationError={setValidationError}
+                                signUpContext={signUpContext}
+                                onSubmit={(data: any) => onSubmit(data, signUpContext.setData)}
+                            />
+                            {requestError &&
+                                <ServerAlert
+                                    requestError={requestError}
+                                    onCloseAlert={() => setRequestError(undefined)}
+                                />
+                            }
+                        </React.Fragment>
+                    )}
+                </SignUpContext.Consumer>
+            </SignUpContextProvider>
+        </section>
+    )
+}
+
+export default SignUp;
diff --git a/src/pages/SignUp/responsive.scss b/src/pages/SignUp/responsive.scss
new file mode 100644
index 00000000..4828acaa
--- /dev/null
+++ b/src/pages/SignUp/responsive.scss
@@ -0,0 +1,21 @@
+#welcome-section {
+  .sign-up-page {
+    .email-signup-step {
+
+      @media screen and (min-width: 514px) {
+        .email-box {
+          input {
+            font-size: 36px;
+          }
+        }
+      }
+      .disclaimer-checkbox {
+        @media screen and (min-width: 480px) {
+          input[type="checkbox"]{
+            margin-right: 24px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Splash/cih.scss b/src/pages/Splash/cih.scss
new file mode 100644
index 00000000..76ef9331
--- /dev/null
+++ b/src/pages/Splash/cih.scss
@@ -0,0 +1,7 @@
+#splash-page {
+	h2 {
+		color: red;
+	}
+}
+
+@import "responsive";
diff --git a/src/pages/Splash/nha.scss b/src/pages/Splash/nha.scss
new file mode 100644
index 00000000..80977ae5
--- /dev/null
+++ b/src/pages/Splash/nha.scss
@@ -0,0 +1,7 @@
+#splash-page {
+	h2 {
+		color: blue;
+	}
+}
+
+@import "responsive";
diff --git a/src/pages/TermsOfUse/index.scss b/src/pages/TermsOfUse/index.scss
new file mode 100644
index 00000000..5b314d60
--- /dev/null
+++ b/src/pages/TermsOfUse/index.scss
@@ -0,0 +1,10 @@
+#welcome-section {
+  .terms-page {
+    .content {
+      --background: white;
+      h3 {
+        font-size: 22px;
+      }
+    }
+  }
+}
diff --git a/src/pages/TermsOfUse/index.test.tsx b/src/pages/TermsOfUse/index.test.tsx
new file mode 100644
index 00000000..e2327ee2
--- /dev/null
+++ b/src/pages/TermsOfUse/index.test.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TermsOfUse from './index';
+
+test('renders without crashing', () => {
+    const { baseElement } = render(<TermsOfUse />);
+    expect(baseElement).toBeDefined();
+});
diff --git a/src/pages/TermsOfUse/index.tsx b/src/pages/TermsOfUse/index.tsx
new file mode 100644
index 00000000..f08ea300
--- /dev/null
+++ b/src/pages/TermsOfUse/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import TermsOfUseText from '../../components/TermsOfUseText';
+import './index.scss';
+
+const TermsOfUse: React.FC = () => {
+
+    return (
+        <section className={'terms-page'}>
+            <header>
+                Terms of Use
+            </header>
+            <TermsOfUseText/>
+        </section>
+    );
+}
+
+export default TermsOfUse;
diff --git a/src/theme/elements.scss b/src/theme/elements.scss
index d7f57e19..4e3acd63 100644
--- a/src/theme/elements.scss
+++ b/src/theme/elements.scss
@@ -1,5 +1,5 @@
 h3 {
-    color: var(--ion-color-primary-shade);
+    color: var(--color-primary-shade);
     text-align: center;
     font-weight: bold;
 }
@@ -14,50 +14,47 @@ h6 {
         font-size: 20px;
     }
 }
-ion-content {
+
+section {
     --padding-bottom: 10px;
     --padding-end: 20px;
     --padding-start: 20px;
     --padding-top: 20px;
 }
-ion-button {
+button {
     text-decoration: none;
     width: 100%;
     max-height: 40px;
-    --background: var(--ion-color-primary);
+    --background: var(--color-primary);
     --color: white;
     --border-radius: 8px;
     &.secondary-button-outlined {
         border-radius: 10px;
-        border: 2px var(--ion-color-medium-tint) solid;
+        border: 2px var(--color-medium-tint) solid;
         --background: transparent;
-        --color: var(--ion-color-primary);
-        --background-activated: var(--ion-color-light);
+        --color: var(--color-primary);
+        --background-activated: var(--color-light);
         padding: 0;
     }
 }
-ion-button.outlined {
+button.outlined {
     border-radius: 5px;
     --background: white;
-    color: var(--ion-color-primary);
-    border: 2px solid var(--ion-color-primary);
+    color: var(--color-primary);
+    border: 2px solid var(--color-primary);
 }
 .error {
-    color: var(--ion-color-danger);
+    color: var(--color-danger);
 }
-ion-select {
-    border: 1px solid var(--ion-color-light-shade);
+select {
+    border: 1px solid var(--color-light-shade);
     border-radius: 5px;
 }
 
-ion-item {
-    --detail-icon-opacity: 1;
-}
-ion-item,
 p {
-    color: var(--ion-color-medium);
+    color: var(--color-medium);
 }
-ion-alert{
+.alert{
     .alert-wrapper {
         --max-height: 75vh;
         --max-width: 80vw;
@@ -77,11 +74,3 @@ a {
     text-decoration: none;
     font-weight: bold;
 }
-.plt-android {
-    ion-toolbar ion-back-button {
-        display: none;
-    }
-}
-ion-app {
-    background: white;
-}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index fba8fc14..07965679 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -22,81 +22,81 @@
 
 :root {
 	/** primary **/
-	--ion-color-primary: #fe9024;
-	--ion-color-primary-rgb: 56, 128, 255;
-	--ion-color-primary-contrast: #ffffff;
-	--ion-color-primary-contrast-rgb: 255, 255, 255;
-	--ion-color-primary-shade: #E87819;
-	--ion-color-primary-tint: #f58d34;
-	--ion-color-primary-light: #FFEED4;
+	--color-primary: lightblue;
+	--color-primary-rgb: 56, 128, 255;
+	--color-primary-contrast: #ffffff;
+	--color-primary-contrast-rgb: 255, 255, 255;
+	--color-primary-shade: darken(lightblue, 10%);
+	--color-primary-tint: darken(lightblue, 20%);
+	--color-primary-light: lighten(lightblue, 10%);
 
 	/** secondary **/
-	--ion-color-secondary: #3298b3;
-	--ion-color-secondary-rgb: 61, 194, 255;
-	--ion-color-secondary-contrast: #ffffff;
-	--ion-color-secondary-contrast-rgb: 255, 255, 255;
-	--ion-color-secondary-shade: #3eacc9;
-	--ion-color-secondary-tint: #3298b3;
+	--color-secondary: lightgreen;
+	--color-secondary-rgb: 61, 194, 255;
+	--color-secondary-contrast: #ffffff;
+	--color-secondary-contrast-rgb: 255, 255, 255;
+	--color-secondary-shade: darken(lightgreen, 10%);
+	--color-secondary-tint: lighten(lightgreen, 10%);
 
 	/** tertiary **/
-	--ion-color-tertiary: #5260ff;
-	--ion-color-tertiary-rgb: 82, 96, 255;
-	--ion-color-tertiary-contrast: #ffffff;
-	--ion-color-tertiary-contrast-rgb: 255, 255, 255;
-	--ion-color-tertiary-shade: #4854e0;
-	--ion-color-tertiary-tint: #6370ff;
+	--color-tertiary: darkgreen;
+	--color-tertiary-rgb: 82, 96, 255;
+	--color-tertiary-contrast: #ffffff;
+	--color-tertiary-contrast-rgb: 255, 255, 255;
+	--color-tertiary-shade: darken(darkgreen, 10%);
+	--color-tertiary-tint: lighten(darkgreen, 10%);
 
 
 	/** quaternary **/
-	--ion-color-quaternary: #481514;
+	--color-quaternary: #481514;
 
 	/** success **/
-	--ion-color-success: #52ab58;
-	--ion-color-success-rgb: 45, 211, 111;
-	--ion-color-success-contrast: #ffffff;
-	--ion-color-success-contrast-rgb: 255, 255, 255;
-	--ion-color-success-shade: rgba(0, 128, 55, 0.95);
-	--ion-color-success-tint: #3fa46a;
+	--color-success: #52ab58;
+	--color-success-rgb: 45, 211, 111;
+	--color-success-contrast: #ffffff;
+	--color-success-contrast-rgb: 255, 255, 255;
+	--color-success-shade: rgba(0, 128, 55, 0.95);
+	--color-success-tint: #3fa46a;
 
 	/** warning **/
-	--ion-color-warning: #ffc409;
-	--ion-color-warning-rgb: 255, 196, 9;
-	--ion-color-warning-contrast: #000000;
-	--ion-color-warning-contrast-rgb: 0, 0, 0;
-	--ion-color-warning-shade: #e0ac08;
-	--ion-color-warning-tint: #ffca22;
+	--color-warning: #ffc409;
+	--color-warning-rgb: 255, 196, 9;
+	--color-warning-contrast: #000000;
+	--color-warning-contrast-rgb: 0, 0, 0;
+	--color-warning-shade: #e0ac08;
+	--color-warning-tint: #ffca22;
 
 	/** danger **/
-	--ion-color-danger: #eb445a;
-	--ion-color-danger-rgb: 235, 68, 90;
-	--ion-color-danger-contrast: #ffffff;
-	--ion-color-danger-contrast-rgb: 255, 255, 255;
-	--ion-color-danger-shade: #cf3c4f;
-	--ion-color-danger-tint: #ed576b;
+	--color-danger: #eb445a;
+	--color-danger-rgb: 235, 68, 90;
+	--color-danger-contrast: #ffffff;
+	--color-danger-contrast-rgb: 255, 255, 255;
+	--color-danger-shade: #cf3c4f;
+	--color-danger-tint: #ed576b;
 
 	/** dark **/
-	--ion-color-dark: #222428;
-	--ion-color-dark-rgb: 34, 36, 40;
-	--ion-color-dark-contrast: #ffffff;
-	--ion-color-dark-contrast-rgb: 255, 255, 255;
-	--ion-color-dark-shade: #1e2023;
-	--ion-color-dark-tint: #383a3e;
+	--color-dark: #222428;
+	--color-dark-rgb: 34, 36, 40;
+	--color-dark-contrast: #ffffff;
+	--color-dark-contrast-rgb: 255, 255, 255;
+	--color-dark-shade: #1e2023;
+	--color-dark-tint: #383a3e;
 
 	/** medium **/
-	--ion-color-medium: #545454;
-	--ion-color-medium-rgb: 146, 148, 156;
-	--ion-color-medium-contrast: #ffffff;
-	--ion-color-medium-contrast-rgb: 255, 255, 255;
-	--ion-color-medium-shade: #888b8e;
-	--ion-color-medium-tint: #9d9fa6;
+	--color-medium: #545454;
+	--color-medium-rgb: 146, 148, 156;
+	--color-medium-contrast: #ffffff;
+	--color-medium-contrast-rgb: 255, 255, 255;
+	--color-medium-shade: #888b8e;
+	--color-medium-tint: #9d9fa6;
 
 	/** light **/
-	--ion-color-light: #f5f7f4;
-	--ion-color-light-rgb: 244, 245, 248;
-	--ion-color-light-contrast: var(--ion-color-primary);
-	--ion-color-light-contrast-rgb: 0, 0, 0;
-	--ion-color-light-shade: #d7d8da;
-	--ion-color-light-tint: #f5f6f9;
+	--color-light: #f5f7f4;
+	--color-light-rgb: 244, 245, 248;
+	--color-light-contrast: var(--color-primary);
+	--color-light-contrast-rgb: 0, 0, 0;
+	--color-light-shade: #d7d8da;
+	--color-light-tint: #f5f6f9;
 
 	--welcome-background: #F6EAD7;
 	--color-violet: #5E17EB;
@@ -107,122 +107,117 @@
  * Additional Ionic Colors
  * ----------------------------------------------------------------------------
  * In order to add colors to be used within Ionic components,
- * the color should be added as a class with the convention `.ion-color-{COLOR}`
- * where `{COLOR}` is the color to be used on the Ionic component.
- * For more information on adding new colors, please see
- * https://ionicframework.com/docs/theming/colors#adding-colors
- *
- * To generate the code for a new color, check out our new color creator:
- * https://ionicframework.com/docs/theming/colors#new-color-creator
+ * the color should be added as a class with the convention `.color-{COLOR}`
+ * where `{COLOR}` is the color to be used on the component.
  */
 
 :root {
-	--ion-color-favorite: #69bb7b;
-	--ion-color-favorite-rgb: 105,187,123;
-	--ion-color-favorite-contrast: #ffffff;
-	--ion-color-favorite-contrast-rgb: 255,255,255;
-	--ion-color-favorite-shade: #5ca56c;
-	--ion-color-favorite-tint: #78c288;
-
-	--ion-color-twitter: #1da1f4;
-	--ion-color-twitter-rgb: 29,161,244;
-	--ion-color-twitter-contrast: #ffffff;
-	--ion-color-twitter-contrast-rgb: 255,255,255;
-	--ion-color-twitter-shade: #1a8ed7;
-	--ion-color-twitter-tint: #34aaf5;
-
-	--ion-color-instagram: #5956d8;
-	--ion-color-instagram-rgb: 89,86,216;
-	--ion-color-instagram-contrast: #ffffff;
-	--ion-color-instagram-contrast-rgb: 255,255,255;
-	--ion-color-instagram-shade: #4e4cbe;
-	--ion-color-instagram-tint: #6a67dc;
-
-	--ion-color-vimeo: #23b6ea;
-	--ion-color-vimeo-rgb: 35,182,234;
-	--ion-color-vimeo-contrast: #ffffff;
-	--ion-color-vimeo-contrast-rgb: 255,255,255;
-	--ion-color-vimeo-shade: #1fa0ce;
-	--ion-color-vimeo-tint: #39bdec;
-
-	--ion-color-facebook: #3b5998;
-	--ion-color-facebook-rgb: 59,89,152;
-	--ion-color-facebook-contrast: #ffffff;
-	--ion-color-facebook-contrast-rgb: 255,255,255;
-	--ion-color-facebook-shade: #344e86;
-	--ion-color-facebook-tint: #4f6aa2;
+	--color-favorite: #69bb7b;
+	--color-favorite-rgb: 105,187,123;
+	--color-favorite-contrast: #ffffff;
+	--color-favorite-contrast-rgb: 255,255,255;
+	--color-favorite-shade: #5ca56c;
+	--color-favorite-tint: #78c288;
+
+	--color-twitter: #1da1f4;
+	--color-twitter-rgb: 29,161,244;
+	--color-twitter-contrast: #ffffff;
+	--color-twitter-contrast-rgb: 255,255,255;
+	--color-twitter-shade: #1a8ed7;
+	--color-twitter-tint: #34aaf5;
+
+	--color-instagram: #5956d8;
+	--color-instagram-rgb: 89,86,216;
+	--color-instagram-contrast: #ffffff;
+	--color-instagram-contrast-rgb: 255,255,255;
+	--color-instagram-shade: #4e4cbe;
+	--color-instagram-tint: #6a67dc;
+
+	--color-vimeo: #23b6ea;
+	--color-vimeo-rgb: 35,182,234;
+	--color-vimeo-contrast: #ffffff;
+	--color-vimeo-contrast-rgb: 255,255,255;
+	--color-vimeo-shade: #1fa0ce;
+	--color-vimeo-tint: #39bdec;
+
+	--color-facebook: #3b5998;
+	--color-facebook-rgb: 59,89,152;
+	--color-facebook-contrast: #ffffff;
+	--color-facebook-contrast-rgb: 255,255,255;
+	--color-facebook-shade: #344e86;
+	--color-facebook-tint: #4f6aa2;
 }
 
-.ion-color-favorite {
-	--ion-color-base: var(--ion-color-favorite);
-	--ion-color-base-rgb: var(--ion-color-favorite-rgb);
-	--ion-color-contrast: var(--ion-color-favorite-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
-	--ion-color-shade: var(--ion-color-favorite-shade);
-	--ion-color-tint: var(--ion-color-favorite-tint);
+.color-favorite {
+	--color-base: var(--color-favorite);
+	--color-base-rgb: var(--color-favorite-rgb);
+	--color-contrast: var(--color-favorite-contrast);
+	--color-contrast-rgb: var(--color-favorite-contrast-rgb);
+	--color-shade: var(--color-favorite-shade);
+	--color-tint: var(--color-favorite-tint);
 }
 
-.ion-color-twitter {
-	--ion-color-base: var(--ion-color-twitter);
-	--ion-color-base-rgb: var(--ion-color-twitter-rgb);
-	--ion-color-contrast: var(--ion-color-twitter-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
-	--ion-color-shade: var(--ion-color-twitter-shade);
-	--ion-color-tint: var(--ion-color-twitter-tint);
+.color-twitter {
+	--color-base: var(--color-twitter);
+	--color-base-rgb: var(--color-twitter-rgb);
+	--color-contrast: var(--color-twitter-contrast);
+	--color-contrast-rgb: var(--color-twitter-contrast-rgb);
+	--color-shade: var(--color-twitter-shade);
+	--color-tint: var(--color-twitter-tint);
 }
 
-.ion-color-google {
-	--ion-color-base: var(--ion-color-google);
-	--ion-color-base-rgb: var(--ion-color-google-rgb);
-	--ion-color-contrast: var(--ion-color-google-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-google-contrast-rgb);
-	--ion-color-shade: var(--ion-color-google-shade);
-	--ion-color-tint: var(--ion-color-google-tint);
+.color-google {
+	--color-base: var(--color-google);
+	--color-base-rgb: var(--color-google-rgb);
+	--color-contrast: var(--color-google-contrast);
+	--color-contrast-rgb: var(--color-google-contrast-rgb);
+	--color-shade: var(--color-google-shade);
+	--color-tint: var(--color-google-tint);
 }
 
-.ion-color-instagram {
-	--ion-color-base: var(--ion-color-instagram);
-	--ion-color-base-rgb: var(--ion-color-instagram-rgb);
-	--ion-color-contrast: var(--ion-color-instagram-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-instagram-contrast-rgb);
-	--ion-color-shade: var(--ion-color-instagram-shade);
-	--ion-color-tint: var(--ion-color-instagram-tint);
+.color-instagram {
+	--color-base: var(--color-instagram);
+	--color-base-rgb: var(--color-instagram-rgb);
+	--color-contrast: var(--color-instagram-contrast);
+	--color-contrast-rgb: var(--color-instagram-contrast-rgb);
+	--color-shade: var(--color-instagram-shade);
+	--color-tint: var(--color-instagram-tint);
 }
 
-.ion-color-vimeo {
-	--ion-color-base: var(--ion-color-vimeo);
-	--ion-color-base-rgb: var(--ion-color-vimeo-rgb);
-	--ion-color-contrast: var(--ion-color-vimeo-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-vimeo-contrast-rgb);
-	--ion-color-shade: var(--ion-color-vimeo-shade);
-	--ion-color-tint: var(--ion-color-vimeo-tint);
+.color-vimeo {
+	--color-base: var(--color-vimeo);
+	--color-base-rgb: var(--color-vimeo-rgb);
+	--color-contrast: var(--color-vimeo-contrast);
+	--color-contrast-rgb: var(--color-vimeo-contrast-rgb);
+	--color-shade: var(--color-vimeo-shade);
+	--color-tint: var(--color-vimeo-tint);
 }
 
-.ion-color-facebook {
-	--ion-color-base: var(--ion-color-facebook);
-	--ion-color-base-rgb: var(--ion-color-facebook-rgb);
-	--ion-color-contrast: var(--ion-color-facebook-contrast);
-	--ion-color-contrast-rgb: var(--ion-color-facebook-contrast-rgb);
-	--ion-color-shade: var(--ion-color-facebook-shade);
-	--ion-color-tint: var(--ion-color-facebook-tint);
+.color-facebook {
+	--color-base: var(--color-facebook);
+	--color-base-rgb: var(--color-facebook-rgb);
+	--color-contrast: var(--color-facebook-contrast);
+	--color-contrast-rgb: var(--color-facebook-contrast-rgb);
+	--color-shade: var(--color-facebook-shade);
+	--color-tint: var(--color-facebook-tint);
 }
 
-.ion-color-github {
-	--ion-color-base: #211F1F;
-	--ion-color-base-rgb: 33,31,31;
-	--ion-color-contrast: #ffffff;
-	--ion-color-contrast-rgb: 255,255,255;
-	--ion-color-shade: #1d1b1b;
-	--ion-color-tint: #373535;
+.color-github {
+	--color-base: #211F1F;
+	--color-base-rgb: 33,31,31;
+	--color-contrast: #ffffff;
+	--color-contrast-rgb: 255,255,255;
+	--color-shade: #1d1b1b;
+	--color-tint: #373535;
 }
 
-.ion-color-instagram {
-	--ion-color-base: #9537BC;
-	--ion-color-base-rgb: 149,55,188;
-	--ion-color-contrast: #ffffff;
-	--ion-color-contrast-rgb: 255,255,255;
-	--ion-color-shade: #8330a5;
-	--ion-color-tint: #a04bc3;
+.color-instagram {
+	--color-base: #9537BC;
+	--color-base-rgb: 149,55,188;
+	--color-contrast: #ffffff;
+	--color-contrast-rgb: 255,255,255;
+	--color-shade: #8330a5;
+	--color-tint: #a04bc3;
 }
 
 /*
@@ -235,20 +230,20 @@
  */
 
 :root {
-	--ion-headings-font-weight: 300;
-	--ion-font-family: 'Omnes', "Helvetica Neue", "Arial", sans-serif;
-
-	--ion-toolbar-background: white;
-	--ion-tab-bar-background: white;
-	--ion-color-angular: #ac282b;
-	--ion-color-communication: #8e8d93;
-	--ion-color-tooling: #fe4c52;
-	--ion-color-services: #fd8b2d;
-	--ion-color-design: #fed035;
-	--ion-color-workshop: #69bb7b;
-	--ion-color-food: #3bc7c4;
-	--ion-color-documentation: #b16be3;
-	--ion-color-navigation: #6600cc;
+	--headings-font-weight: 300;
+	--font-family: 'Omnes', "Helvetica Neue", "Arial", sans-serif;
+
+	--toolbar-background: white;
+	--tab-bar-background: white;
+	--color-angular: #ac282b;
+	--color-communication: #8e8d93;
+	--color-tooling: #fe4c52;
+	--color-services: #fd8b2d;
+	--color-design: #fed035;
+	--color-workshop: #69bb7b;
+	--color-food: #3bc7c4;
+	--color-documentation: #b16be3;
+	--color-navigation: #6600cc;
 }
 
 /*
@@ -285,68 +280,68 @@
  */
 
 body.dark {
-	--ion-color-primary: #428cff;
-	--ion-color-primary-rgb: 66,140,255;
-	--ion-color-primary-contrast: #ffffff;
-	--ion-color-primary-contrast-rgb: 255,255,255;
-	--ion-color-primary-shade: #3a7be0;
-	--ion-color-primary-tint: #5598ff;
-
-	--ion-color-secondary: #50c8ff;
-	--ion-color-secondary-rgb: 80,200,255;
-	--ion-color-secondary-contrast: #ffffff;
-	--ion-color-secondary-contrast-rgb: 255,255,255;
-	--ion-color-secondary-shade: #46b0e0;
-	--ion-color-secondary-tint: #62ceff;
-
-	--ion-color-tertiary: #6a64ff;
-	--ion-color-tertiary-rgb: 106,100,255;
-	--ion-color-tertiary-contrast: #ffffff;
-	--ion-color-tertiary-contrast-rgb: 255,255,255;
-	--ion-color-tertiary-shade: #5d58e0;
-	--ion-color-tertiary-tint: #7974ff;
-
-	--ion-color-success: #2fdf75;
-	--ion-color-success-rgb: 47,223,117;
-	--ion-color-success-contrast: #000000;
-	--ion-color-success-contrast-rgb: 0,0,0;
-	--ion-color-success-shade: #29c467;
-	--ion-color-success-tint: #44e283;
-
-	--ion-color-warning: #ffd534;
-	--ion-color-warning-rgb: 255,213,52;
-	--ion-color-warning-contrast: #000000;
-	--ion-color-warning-contrast-rgb: 0,0,0;
-	--ion-color-warning-shade: #e0bb2e;
-	--ion-color-warning-tint: #ffd948;
-
-	--ion-color-danger: #ff4961;
-	--ion-color-danger-rgb: 255,73,97;
-	--ion-color-danger-contrast: #ffffff;
-	--ion-color-danger-contrast-rgb: 255,255,255;
-	--ion-color-danger-shade: #e04055;
-	--ion-color-danger-tint: #ff5b71;
-
-	--ion-color-dark: #f4f5f8;
-	--ion-color-dark-rgb: 244,245,248;
-	--ion-color-dark-contrast: #000000;
-	--ion-color-dark-contrast-rgb: 0,0,0;
-	--ion-color-dark-shade: #d7d8da;
-	--ion-color-dark-tint: #f5f6f9;
-
-	--ion-color-medium: #989aa2;
-	--ion-color-medium-rgb: 152,154,162;
-	--ion-color-medium-contrast: #000000;
-	--ion-color-medium-contrast-rgb: 0,0,0;
-	--ion-color-medium-shade: #86888f;
-	--ion-color-medium-tint: #a2a4ab;
-
-	--ion-color-light: #222428;
-	--ion-color-light-rgb: 34,36,40;
-	--ion-color-light-contrast: #ffffff;
-	--ion-color-light-contrast-rgb: 255,255,255;
-	--ion-color-light-shade: #1e2023;
-	--ion-color-light-tint: #383a3e;
+	--color-primary: #428cff;
+	--color-primary-rgb: 66,140,255;
+	--color-primary-contrast: #ffffff;
+	--color-primary-contrast-rgb: 255,255,255;
+	--color-primary-shade: #3a7be0;
+	--color-primary-tint: #5598ff;
+
+	--color-secondary: #50c8ff;
+	--color-secondary-rgb: 80,200,255;
+	--color-secondary-contrast: #ffffff;
+	--color-secondary-contrast-rgb: 255,255,255;
+	--color-secondary-shade: #46b0e0;
+	--color-secondary-tint: #62ceff;
+
+	--color-tertiary: #6a64ff;
+	--color-tertiary-rgb: 106,100,255;
+	--color-tertiary-contrast: #ffffff;
+	--color-tertiary-contrast-rgb: 255,255,255;
+	--color-tertiary-shade: #5d58e0;
+	--color-tertiary-tint: #7974ff;
+
+	--color-success: #2fdf75;
+	--color-success-rgb: 47,223,117;
+	--color-success-contrast: #000000;
+	--color-success-contrast-rgb: 0,0,0;
+	--color-success-shade: #29c467;
+	--color-success-tint: #44e283;
+
+	--color-warning: #ffd534;
+	--color-warning-rgb: 255,213,52;
+	--color-warning-contrast: #000000;
+	--color-warning-contrast-rgb: 0,0,0;
+	--color-warning-shade: #e0bb2e;
+	--color-warning-tint: #ffd948;
+
+	--color-danger: #ff4961;
+	--color-danger-rgb: 255,73,97;
+	--color-danger-contrast: #ffffff;
+	--color-danger-contrast-rgb: 255,255,255;
+	--color-danger-shade: #e04055;
+	--color-danger-tint: #ff5b71;
+
+	--color-dark: #f4f5f8;
+	--color-dark-rgb: 244,245,248;
+	--color-dark-contrast: #000000;
+	--color-dark-contrast-rgb: 0,0,0;
+	--color-dark-shade: #d7d8da;
+	--color-dark-tint: #f5f6f9;
+
+	--color-medium: #989aa2;
+	--color-medium-rgb: 152,154,162;
+	--color-medium-contrast: #000000;
+	--color-medium-contrast-rgb: 0,0,0;
+	--color-medium-shade: #86888f;
+	--color-medium-tint: #a2a4ab;
+
+	--color-light: #222428;
+	--color-light-rgb: 34,36,40;
+	--color-light-contrast: #ffffff;
+	--color-light-contrast-rgb: 255,255,255;
+	--color-light-shade: #1e2023;
+	--color-light-tint: #383a3e;
 }
 
 /*
@@ -355,37 +350,37 @@ body.dark {
  */
 
 .ios body.dark {
-	--ion-background-color: #000000;
-	--ion-background-color-rgb: 0,0,0;
-
-	--ion-text-color: #ffffff;
-	--ion-text-color-rgb: 255,255,255;
-
-	--ion-color-step-50: #0d0d0d;
-	--ion-color-step-100: #1a1a1a;
-	--ion-color-step-150: #262626;
-	--ion-color-step-200: #333333;
-	--ion-color-step-250: #404040;
-	--ion-color-step-300: #4d4d4d;
-	--ion-color-step-350: #595959;
-	--ion-color-step-400: #666666;
-	--ion-color-step-450: #737373;
-	--ion-color-step-500: #808080;
-	--ion-color-step-550: #8c8c8c;
-	--ion-color-step-600: #999999;
-	--ion-color-step-650: #a6a6a6;
-	--ion-color-step-700: #b3b3b3;
-	--ion-color-step-750: #bfbfbf;
-	--ion-color-step-800: #cccccc;
-	--ion-color-step-850: #d9d9d9;
-	--ion-color-step-900: #e6e6e6;
-	--ion-color-step-950: #f2f2f2;
-
-	--ion-toolbar-background: #0d0d0d;
-
-	--ion-item-background: #000000;
-
-	--ion-card-background: #1c1c1d;
+	--background-color: #000000;
+	--background-color-rgb: 0,0,0;
+
+	--text-color: #ffffff;
+	--text-color-rgb: 255,255,255;
+
+	--color-step-50: #0d0d0d;
+	--color-step-100: #1a1a1a;
+	--color-step-150: #262626;
+	--color-step-200: #333333;
+	--color-step-250: #404040;
+	--color-step-300: #4d4d4d;
+	--color-step-350: #595959;
+	--color-step-400: #666666;
+	--color-step-450: #737373;
+	--color-step-500: #808080;
+	--color-step-550: #8c8c8c;
+	--color-step-600: #999999;
+	--color-step-650: #a6a6a6;
+	--color-step-700: #b3b3b3;
+	--color-step-750: #bfbfbf;
+	--color-step-800: #cccccc;
+	--color-step-850: #d9d9d9;
+	--color-step-900: #e6e6e6;
+	--color-step-950: #f2f2f2;
+
+	--toolbar-background: #0d0d0d;
+
+	--item-background: #000000;
+
+	--card-background: #1c1c1d;
 }
 
 
@@ -395,39 +390,39 @@ body.dark {
  */
 
 .md body.dark {
-	--ion-background-color: #121212;
-	--ion-background-color-rgb: 18,18,18;
-
-	--ion-text-color: #ffffff;
-	--ion-text-color-rgb: 255,255,255;
-
-	--ion-border-color: #222222;
-
-	--ion-color-step-50: #1e1e1e;
-	--ion-color-step-100: #2a2a2a;
-	--ion-color-step-150: #363636;
-	--ion-color-step-200: #414141;
-	--ion-color-step-250: #4d4d4d;
-	--ion-color-step-300: #595959;
-	--ion-color-step-350: #656565;
-	--ion-color-step-400: #717171;
-	--ion-color-step-450: #7d7d7d;
-	--ion-color-step-500: #898989;
-	--ion-color-step-550: #949494;
-	--ion-color-step-600: #a0a0a0;
-	--ion-color-step-650: #acacac;
-	--ion-color-step-700: #b8b8b8;
-	--ion-color-step-750: #c4c4c4;
-	--ion-color-step-800: #d0d0d0;
-	--ion-color-step-850: #dbdbdb;
-	--ion-color-step-900: #e7e7e7;
-	--ion-color-step-950: #f3f3f3;
-
-	--ion-item-background: #1e1e1e;
-
-	--ion-toolbar-background: #1f1f1f;
-
-	--ion-tab-bar-background: #1f1f1f;
-
-	--ion-card-background: #1e1e1e;
+	--background-color: #121212;
+	--background-color-rgb: 18,18,18;
+
+	--text-color: #ffffff;
+	--text-color-rgb: 255,255,255;
+
+	--border-color: #222222;
+
+	--color-step-50: #1e1e1e;
+	--color-step-100: #2a2a2a;
+	--color-step-150: #363636;
+	--color-step-200: #414141;
+	--color-step-250: #4d4d4d;
+	--color-step-300: #595959;
+	--color-step-350: #656565;
+	--color-step-400: #717171;
+	--color-step-450: #7d7d7d;
+	--color-step-500: #898989;
+	--color-step-550: #949494;
+	--color-step-600: #a0a0a0;
+	--color-step-650: #acacac;
+	--color-step-700: #b8b8b8;
+	--color-step-750: #c4c4c4;
+	--color-step-800: #d0d0d0;
+	--color-step-850: #dbdbdb;
+	--color-step-900: #e7e7e7;
+	--color-step-950: #f3f3f3;
+
+	--item-background: #1e1e1e;
+
+	--toolbar-background: #1f1f1f;
+
+	--tab-bar-background: #1f1f1f;
+
+	--card-background: #1e1e1e;
 }