From 35fd7c10f9c2b57a926394fe392e075cf4273483 Mon Sep 17 00:00:00 2001
From: Li Ying Kwa <41922935+liying-kwa@users.noreply.github.com>
Date: Sun, 19 May 2024 11:09:38 +0800
Subject: [PATCH 1/2] Implement password validator new design (#158)

---
 .../components/registration-form.tsx          | 96 +++++++++++++++++--
 src/utilities/validators.ts                   | 19 +++-
 2 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/src/features/registration/components/registration-form.tsx b/src/features/registration/components/registration-form.tsx
index 405e795..1585f88 100644
--- a/src/features/registration/components/registration-form.tsx
+++ b/src/features/registration/components/registration-form.tsx
@@ -6,6 +6,9 @@ import {
   Text,
   VStack,
   Input,
+  Center,
+  Icon,
+  HStack,
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { useState } from "react";
@@ -15,8 +18,13 @@ import {
   //   DoPasswordsMatch,
   IsValidEmail,
   IsValidName,
+  PasswordContainsLowercase,
+  PasswordContainsNumber,
+  PasswordContainsSymbol,
+  PasswordContainsUppercase,
 } from "../../../utilities/validators";
 import SignIn from "./sign-in";
+import { ImCheckboxChecked, ImCross } from 'react-icons/im'
 
 export default function RegistrationForm() {
   const [input, setInput] = useState({
@@ -31,7 +39,7 @@ export default function RegistrationForm() {
     givenName: "",
     famName: "",
     email: "",
-    password: "",
+    password: { text: "", numChecked: 0, color: "", checks: { "Minimum length": false, "Number": false, "Symbol": false, "Uppercase": false, "Lowercase": false } },
     confirmPassword: "",
     valid: false,
   });
@@ -63,7 +71,12 @@ export default function RegistrationForm() {
   const validateInput = (event: any) => {
     let { name, value } = event.target;
     setError((prev) => {
-      const errorState = { ...prev, [name]: "" };
+      let errorState;
+      if (name == "password") {
+        errorState = { ...prev }
+      } else {
+        errorState = { ...prev, [name]: "" };
+      }
       errorState.valid = canEnableSignUpButton();
 
       switch (name) {
@@ -90,12 +103,65 @@ export default function RegistrationForm() {
           // case "confirmPassword":
           setNoText(typeof value != "undefined" && value.length < 1);
 
-          if (input.password && !IsPasswordMinLength(value)) {
-            errorState.password =
-              "Password must have a minimum of 8 characters, contain numbers, symbols, uppercase and lowercase characters.";
+          errorState.password.text = "Strong, your password is secure 💪";
+          errorState.password.checks = { "Minimum length": true, "Number": true, "Symbol": true, "Uppercase": true, "Lowercase": true };
+
+          let numChecked = 5;
+
+          if (!PasswordContainsSymbol(value)) {
+            errorState.password.text = "Almost there, add a special symbol 😉"
+            errorState.password.checks["Symbol"] = false
             errorState.valid = false;
-          } else {
-            errorState.password = "";
+            numChecked -= 1;
+          }
+
+          if (!PasswordContainsNumber(value)) {
+            errorState.password.text = "So-so, should be alphanumeric 😕"
+            errorState.password.checks["Number"] = false
+            errorState.valid = false;
+            numChecked -= 1;
+          }
+
+          if (!PasswordContainsUppercase(value)) {
+            errorState.password.text =
+              "Weak, must have at one uppercase and lowercase letter 😖";
+            errorState.password.checks["Uppercase"] = false
+            errorState.valid = false;
+            numChecked -= 1;
+          }
+
+          if (!PasswordContainsLowercase(value)) {
+            errorState.password.text =
+              "Weak, must have at one uppercase and lowercase letter 😖";
+            errorState.password.checks["Lowercase"] = false
+            errorState.valid = false;
+            numChecked -= 1;
+          }
+
+          if (!IsPasswordMinLength(value)) {
+            errorState.password.text =
+              "Must have at least 8 characters.";
+            errorState.password.checks["Minimum length"] = false
+            errorState.valid = false;
+            numChecked -= 1;
+          }
+
+          errorState.password.numChecked = numChecked;
+          switch (numChecked) {
+            case 1:
+              errorState.password.color = "red";
+              break;
+            case 2:
+            case 3:
+              errorState.password.color = "yellow.300";
+              break;
+            case 4:
+              errorState.password.color = "blue";
+              break;
+            case 5:
+            default:
+              errorState.password.color = "green.400";
+              break;
           }
 
           //   if (!DoPasswordsMatch(input.password, value)) {
@@ -167,7 +233,21 @@ export default function RegistrationForm() {
             </Button>
           </InputRightElement>
         </InputGroup>
-        {error.password && <Box className="errorMsg">{error.password}</Box>}
+      </Box>
+      <Box>
+        <Center><Box w={0} h={0} filter="drop-shadow(0 -2px 2px #AAA)" borderLeft="20px solid transparent" borderRight="20px solid transparent" borderBottom="20px solid white" /></Center>
+        <Box boxShadow="0px 0px 8px #AAA" rounded="lg" p={3}>
+          <Text>{error.password.text}</Text>
+          <HStack spacing={2} py={4}>
+            {[...Array(error.password.numChecked)].map(() => <Box h={1} bg={error.password.color} flexGrow={1} />)}
+            {[...Array(5 - error.password.numChecked)].map(() => <Box h={1} bg="gray.300" flexGrow={1} />)}
+          </HStack>
+          <VStack alignItems="flex-start" spacing={1}>
+            {Object.entries(error.password.checks).map(([item, checked]) => (
+              <HStack spacing={2}><Icon as={checked ? ImCheckboxChecked : ImCross} color={checked ? "green.400" : "red"} /><Text>{item}</Text></HStack>
+            ))}
+          </VStack>
+        </Box>
       </Box>
       {/* <Box>
         <Text>Confirm Password</Text>
diff --git a/src/utilities/validators.ts b/src/utilities/validators.ts
index 085d4c4..013e80a 100644
--- a/src/utilities/validators.ts
+++ b/src/utilities/validators.ts
@@ -11,7 +11,24 @@ export function IsPasswordMinLength(password: string) {
     // var letter = /[a-zA-Z]/; 
     // var number = /[0-9]/;
     // var valid = number.test(password) && letter.test(password); //match a letter _and_ a number
-    return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(password) && password.length >= 8;
+    // return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(password) && password.length >= 8;
+    return password.length >= 8;
+}
+
+export function PasswordContainsNumber(password: string) {
+    return /^(?=.*?[0-9]).+$/.test(password);
+}
+
+export function PasswordContainsSymbol(password: string) {
+    return /^(?=.*?[#?!@$%^&*-]).+$/.test(password);
+}
+
+export function PasswordContainsUppercase(password: string) {
+    return /^(?=.*?[A-Z]).+$/.test(password);
+}
+
+export function PasswordContainsLowercase(password: string) {
+    return /^(?=.*?[a-z]).+$/.test(password);
 }
 
 

From d29d2451dfa819645b65ff5e898c2be606f93125 Mon Sep 17 00:00:00 2001
From: karthik-Jay <32955712+karthik-Jay@users.noreply.github.com>
Date: Sun, 9 Jun 2024 17:04:58 +0800
Subject: [PATCH 2/2] Feature/refactor code (#164)

* Refactor code

* Update to use theme folder structure. (#161)

* Update AuthProvider import statement in App.tsx

* Fix for import casing errors.

* Further file fixes due to casing errors.

* More fixes to resolve file case errors.

---------

Co-authored-by: Sinthusan <sinthusan0411@gmail.com>
---
 src/App.tsx                                   |  49 ++--
 src/assets/icons/link.svg                     |   4 +-
 .../Breadcrumbs/Breadcrumbs.tsx}              |  15 +-
 src/components/Breadcrumbs/index.ts           |   1 +
 src/components/Container/Container.tsx        |  10 +
 src/components/Container/index.ts             |   1 +
 src/components/Footer/Footer.tsx              | 196 ++++++++++++++++
 src/components/Footer/index.ts                |   1 +
 src/components/Header/Header.tsx              | 142 ++++++++++++
 src/components/Header/index.ts                |   1 +
 .../NavigationButton}/NavigationButton.tsx    |   0
 src/components/NavigationButton/index.ts      |   1 +
 .../ScrollAnimation}/ScrollAnimation.tsx      |   0
 src/components/ScrollAnimation/index.ts       |   1 +
 src/data/auth/authContext.tsx                 |   4 +-
 .../organisationProfileOurStory.ts            |   7 +-
 src/data/model/organisationSummary.ts         |   2 +-
 src/data/model/user.ts                        |   5 +-
 src/features/common/NavigationBar.tsx         | 135 -----------
 src/features/common/footer.tsx                | 194 ----------------
 .../firestore-mock/test-data/users.json       |  13 --
 src/features/home/components/FrontPage.tsx    |  70 ------
 src/features/home/components/FrontSupport.tsx | 119 ----------
 src/features/home/index.tsx                   | 214 ------------------
 .../login/components/email-credential.tsx     |  59 -----
 .../login/components/forgot-password.tsx      |  14 --
 .../components/google-sign-in-button.tsx      |  50 ----
 .../login/components/login-menu-message.tsx   |  28 ---
 .../login/components/login-section.tsx        |  32 ---
 .../login/components/sign-in-button.tsx       |  55 -----
 src/features/login/login-page.tsx             |  19 --
 .../components/ViewToggle.tsx                 |  53 -----
 .../components/services.tsx                   |  70 ------
 .../components/summary.tsx                    | 147 ------------
 src/features/page-style.scss                  |  18 --
 .../FirestoreMock.tsx}                        |  44 ++--
 .../InitialOrganisationsMock.ts}              |  38 ++--
 .../QuillEditor.tsx}                          |   0
 .../TestOrganisationsMock.ts}                 |  42 ++--
 src/mocks/UsersMock.ts                        |  13 ++
 src/pages/Home/HeroSection.tsx                |  74 ++++++
 src/pages/Home/Home.tsx                       | 149 ++++++++++++
 src/pages/Home/SupportSection.tsx             | 126 +++++++++++
 src/pages/Home/TogetherSection.tsx            |  53 +++++
 src/pages/Home/index.ts                       |   1 +
 src/{features/home => pages/Home}/styles.ts   |   0
 src/pages/Login/EmailCredential.tsx           |  60 +++++
 src/pages/Login/ForgotPassword.tsx            |  17 ++
 src/pages/Login/GoogleSignInButton.tsx        |  52 +++++
 src/pages/Login/Login.tsx                     |  19 ++
 .../Login/LoginDesign.tsx}                    |   0
 .../Login/LoginForm.tsx}                      |   8 +-
 src/pages/Login/LoginMenuMessage.tsx          |  18 ++
 .../Login/LoginSection.tsx}                   |  20 +-
 src/pages/Login/SignInButton.tsx              |  57 +++++
 .../sign-up.tsx => pages/Login/SignUp.tsx}    |   2 +-
 src/pages/Login/index.ts                      |   1 +
 .../login.scss => pages/Login/style.scss}     |   2 -
 .../OrganisationList}/CardView.tsx            |   6 +-
 .../OrganisationList/Const.ts}                |   0
 .../OrganisationList}/ListView.tsx            |  16 +-
 .../OrganisationList/NavigationBar.tsx}       |   0
 .../OrganisationList/OrganisationCard.tsx}    |   6 +-
 .../OrganisationList/OrganisationList.tsx}    |  96 ++++----
 src/pages/OrganisationList/ViewToggle.tsx     |  88 +++++++
 src/pages/OrganisationList/index.ts           |   1 +
 .../OrganisationProfile.tsx}                  |  28 +--
 .../OrganisationProfile/Profile.tsx}          |  96 ++++----
 .../OrganisationProfile/ProfileContent.tsx}   |   2 +-
 .../OrganisationProfile/ProfileSidebar.tsx}   |   0
 src/pages/OrganisationProfile/Services.tsx    |  70 ++++++
 .../SimilarOrganisations.tsx}                 |  14 +-
 src/pages/OrganisationProfile/Summary.tsx     | 150 ++++++++++++
 src/pages/OrganisationProfile/index.ts        |   1 +
 .../OrganisationProfile}/profile.scss         |   3 -
 .../OrganisationProfile}/services.scss        |   5 -
 .../OrganisationProfile}/similar-orgs.scss    |   0
 .../OrganisationProfile}/summary.scss         |   0
 .../Registration/GoalsForm.tsx}               |  13 +-
 .../Registration/OrganisationInfoForm.tsx}    |  18 +-
 .../Registration/ProfileSetup.tsx}            |  16 +-
 .../Registration/Registration.tsx}            |  10 +-
 .../Registration/RegistrationDesign.tsx}      |   4 +-
 .../Registration/RegistrationForm.tsx}        |  89 +++++---
 .../Registration/RegistrationMenuMessage.tsx} |   4 +-
 .../Registration/RegistrationSection.tsx      |  37 +++
 .../Registration/SignIn.tsx}                  |   8 +-
 .../Registration/SignUpButton.tsx}            |  14 +-
 .../Registration/SignUpWaiting.tsx}           |  24 +-
 src/pages/Registration/index.ts               |   1 +
 .../Registration}/registration.scss           |   2 -
 .../scss => pages/Registration}/setup.scss    |   2 -
 .../UserDashboard/UserDashboard.tsx}          |   7 +-
 src/pages/UserDashboard/index.ts              |   1 +
 src/pages/style.scss                          |  15 ++
 src/{paths.ts => routing/Paths.ts}            |   0
 src/routing/Routing.tsx                       |  29 +++
 src/routing/index.ts                          |   1 +
 src/services/Authentication.ts                |  11 +-
 .../{http-common.ts => HttpCommon.ts}         |   0
 src/services/firebase/authProvider.tsx        | 101 +++++----
 src/theme.ts                                  |  48 ----
 src/theme/colours.ts                          |  27 +++
 src/theme/components/accordion.ts             |  31 +++
 src/theme/components/table.ts                 |  27 +++
 src/theme/index.ts                            |  20 ++
 src/theme/styles.ts                           |  32 +++
 src/theme/typography.ts                       | 125 ++++++++++
 src/utilities/icon-mappings.tsx               |  61 -----
 src/utilities/iconMappings/iconMapping.tsx    |  61 +++++
 src/utilities/iconMappings/index.ts           |   1 +
 src/utilities/validators/index.ts             |   9 +
 src/utilities/{ => validators}/validators.ts  |   0
 113 files changed, 2146 insertions(+), 1811 deletions(-)
 rename src/{features/common/orgBreadCrumb.tsx => components/Breadcrumbs/Breadcrumbs.tsx} (83%)
 create mode 100644 src/components/Breadcrumbs/index.ts
 create mode 100644 src/components/Container/Container.tsx
 create mode 100644 src/components/Container/index.ts
 create mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Footer/index.ts
 create mode 100644 src/components/Header/Header.tsx
 create mode 100644 src/components/Header/index.ts
 rename src/{features/home/components => components/NavigationButton}/NavigationButton.tsx (100%)
 create mode 100644 src/components/NavigationButton/index.ts
 rename src/{features/home/components => components/ScrollAnimation}/ScrollAnimation.tsx (100%)
 create mode 100644 src/components/ScrollAnimation/index.ts
 delete mode 100644 src/features/common/NavigationBar.tsx
 delete mode 100644 src/features/common/footer.tsx
 delete mode 100644 src/features/firestore-mock/test-data/users.json
 delete mode 100644 src/features/home/components/FrontPage.tsx
 delete mode 100644 src/features/home/components/FrontSupport.tsx
 delete mode 100644 src/features/home/index.tsx
 delete mode 100644 src/features/login/components/email-credential.tsx
 delete mode 100644 src/features/login/components/forgot-password.tsx
 delete mode 100644 src/features/login/components/google-sign-in-button.tsx
 delete mode 100644 src/features/login/components/login-menu-message.tsx
 delete mode 100644 src/features/login/components/login-section.tsx
 delete mode 100644 src/features/login/components/sign-in-button.tsx
 delete mode 100644 src/features/login/login-page.tsx
 delete mode 100644 src/features/organisation-list/components/ViewToggle.tsx
 delete mode 100644 src/features/organisation-profile/components/services.tsx
 delete mode 100644 src/features/organisation-profile/components/summary.tsx
 delete mode 100644 src/features/page-style.scss
 rename src/{features/firestore-mock/firestore-mock.tsx => mocks/FirestoreMock.tsx} (74%)
 rename src/{features/firestore-mock/test-data/initial-organisations.ts => mocks/InitialOrganisationsMock.ts} (86%)
 rename src/{features/firestore-mock/quill-editor.tsx => mocks/QuillEditor.tsx} (100%)
 rename src/{features/firestore-mock/test-data/test-organisations.ts => mocks/TestOrganisationsMock.ts} (92%)
 create mode 100644 src/mocks/UsersMock.ts
 create mode 100644 src/pages/Home/HeroSection.tsx
 create mode 100644 src/pages/Home/Home.tsx
 create mode 100644 src/pages/Home/SupportSection.tsx
 create mode 100644 src/pages/Home/TogetherSection.tsx
 create mode 100644 src/pages/Home/index.ts
 rename src/{features/home => pages/Home}/styles.ts (100%)
 create mode 100644 src/pages/Login/EmailCredential.tsx
 create mode 100644 src/pages/Login/ForgotPassword.tsx
 create mode 100644 src/pages/Login/GoogleSignInButton.tsx
 create mode 100644 src/pages/Login/Login.tsx
 rename src/{features/login/components/login-design.tsx => pages/Login/LoginDesign.tsx} (100%)
 rename src/{features/login/components/login-form.tsx => pages/Login/LoginForm.tsx} (90%)
 create mode 100644 src/pages/Login/LoginMenuMessage.tsx
 rename src/{features/registration/components/registration-section.tsx => pages/Login/LoginSection.tsx} (50%)
 create mode 100644 src/pages/Login/SignInButton.tsx
 rename src/{features/login/components/sign-up.tsx => pages/Login/SignUp.tsx} (94%)
 create mode 100644 src/pages/Login/index.ts
 rename src/{features/login/scss/login.scss => pages/Login/style.scss} (98%)
 rename src/{features/organisation-list/components => pages/OrganisationList}/CardView.tsx (83%)
 rename src/{features/organisation-list/const.ts => pages/OrganisationList/Const.ts} (100%)
 rename src/{features/organisation-list/components => pages/OrganisationList}/ListView.tsx (74%)
 rename src/{features/organisation-list/components/navigation-bar.tsx => pages/OrganisationList/NavigationBar.tsx} (100%)
 rename src/{features/organisation-list/components/OrgCard.tsx => pages/OrganisationList/OrganisationCard.tsx} (93%)
 rename src/{features/organisation-list/index.tsx => pages/OrganisationList/OrganisationList.tsx} (77%)
 create mode 100644 src/pages/OrganisationList/ViewToggle.tsx
 create mode 100644 src/pages/OrganisationList/index.ts
 rename src/{features/organisation-profile/index.tsx => pages/OrganisationProfile/OrganisationProfile.tsx} (54%)
 rename src/{features/organisation-profile/components/profile.tsx => pages/OrganisationProfile/Profile.tsx} (87%)
 rename src/{features/organisation-profile/components/profile-content.tsx => pages/OrganisationProfile/ProfileContent.tsx} (98%)
 rename src/{features/organisation-profile/components/profile-sidebar.tsx => pages/OrganisationProfile/ProfileSidebar.tsx} (100%)
 create mode 100644 src/pages/OrganisationProfile/Services.tsx
 rename src/{features/organisation-profile/components/similar-orgs.tsx => pages/OrganisationProfile/SimilarOrganisations.tsx} (77%)
 create mode 100644 src/pages/OrganisationProfile/Summary.tsx
 create mode 100644 src/pages/OrganisationProfile/index.ts
 rename src/{features/organisation-profile/scss => pages/OrganisationProfile}/profile.scss (98%)
 rename src/{features/organisation-profile/scss => pages/OrganisationProfile}/services.scss (91%)
 rename src/{features/organisation-profile/scss => pages/OrganisationProfile}/similar-orgs.scss (100%)
 rename src/{features/organisation-profile/scss => pages/OrganisationProfile}/summary.scss (100%)
 rename src/{features/registration/components/goals-form.tsx => pages/Registration/GoalsForm.tsx} (92%)
 rename src/{features/registration/components/org-info-form.tsx => pages/Registration/OrganisationInfoForm.tsx} (94%)
 rename src/{features/registration/profile-setup-page.tsx => pages/Registration/ProfileSetup.tsx} (95%)
 rename src/{features/registration/registration-page.tsx => pages/Registration/Registration.tsx} (55%)
 rename src/{features/registration/components/registration-design.tsx => pages/Registration/RegistrationDesign.tsx} (80%)
 rename src/{features/registration/components/registration-form.tsx => pages/Registration/RegistrationForm.tsx} (77%)
 rename src/{features/registration/components/registration-menu-message.tsx => pages/Registration/RegistrationMenuMessage.tsx} (83%)
 create mode 100644 src/pages/Registration/RegistrationSection.tsx
 rename src/{features/registration/components/sign-in.tsx => pages/Registration/SignIn.tsx} (84%)
 rename src/{features/registration/components/sign-up-button.tsx => pages/Registration/SignUpButton.tsx} (60%)
 rename src/{features/registration/components/sign-up-waiting.tsx => pages/Registration/SignUpWaiting.tsx} (85%)
 create mode 100644 src/pages/Registration/index.ts
 rename src/{features/registration/scss => pages/Registration}/registration.scss (99%)
 rename src/{features/registration/scss => pages/Registration}/setup.scss (99%)
 rename src/{features/user-dashboard/user-dashboard-page.tsx => pages/UserDashboard/UserDashboard.tsx} (90%)
 create mode 100644 src/pages/UserDashboard/index.ts
 create mode 100644 src/pages/style.scss
 rename src/{paths.ts => routing/Paths.ts} (100%)
 create mode 100644 src/routing/Routing.tsx
 create mode 100644 src/routing/index.ts
 rename src/services/{http-common.ts => HttpCommon.ts} (100%)
 delete mode 100644 src/theme.ts
 create mode 100644 src/theme/colours.ts
 create mode 100644 src/theme/components/accordion.ts
 create mode 100644 src/theme/components/table.ts
 create mode 100644 src/theme/index.ts
 create mode 100644 src/theme/styles.ts
 create mode 100644 src/theme/typography.ts
 delete mode 100644 src/utilities/icon-mappings.tsx
 create mode 100644 src/utilities/iconMappings/iconMapping.tsx
 create mode 100644 src/utilities/iconMappings/index.ts
 create mode 100644 src/utilities/validators/index.ts
 rename src/utilities/{ => validators}/validators.ts (100%)

diff --git a/src/App.tsx b/src/App.tsx
index 9e50dad..c15c25a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,39 +1,28 @@
 import { ChakraProvider } from "@chakra-ui/react";
-import { Route, Routes } from "react-router-dom";
-import Home from "./features/home";
-import LoginPage from "./features/login/login-page";
-import ProfileSetupPage from "./features/registration/profile-setup-page";
-import RegistrationPage from "./features/registration/registration-page";
-import OrgProfilePage from "./features/organisation-profile";
-import OrganisationList from "./features/organisation-list";
-import UserDashboardPage from "./features/user-dashboard/user-dashboard-page";
 import { AuthProvider } from "./services/firebase/authProvider";
-import FirestoreMock from "./features/firestore-mock/firestore-mock";
-import { Paths } from "./paths";
-import { appTheme } from "./theme";
+import Routing from "./routing";
+import { Paths } from "./routing/Paths";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import mendisphereTheme from "./theme/index";
 
 function App() {
+  // Get current page
+  const currentPage = window.location.pathname;
+
+  // Check the current page is not login and registration page
+  const isShowHeaderAndFooter = ![
+    Paths.login,
+    Paths.signup,
+    Paths.profileSetup,
+  ].includes(currentPage);
+
   return (
-    <ChakraProvider theme={appTheme}>
+    <ChakraProvider theme={mendisphereTheme}>
       <AuthProvider>
-        <Routes>
-          <Route path={Paths.home} element={<Home />} />
-          <Route path={Paths.login} element={<LoginPage />} />
-          <Route path={Paths.dashboard} element={<UserDashboardPage />} />
-          <Route path={Paths.signup} element={<RegistrationPage />} />
-          <Route path={Paths.profileSetup} element={<ProfileSetupPage />} />
-          <Route
-            path={Paths.organisationListing}
-            element={<OrganisationList />}
-          />
-          <Route
-            path={Paths.organisationProfile}
-            element={<OrgProfilePage />}
-          />
-          {process.env.NODE_ENV === "development" && (
-            <Route path="firestore-mock" element={<FirestoreMock />} />
-          )}
-        </Routes>
+        {isShowHeaderAndFooter && <Header />}
+        <Routing />
+        {isShowHeaderAndFooter && <Footer />}
       </AuthProvider>
     </ChakraProvider>
   );
diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg
index 0086733..f3df3ff 100644
--- a/src/assets/icons/link.svg
+++ b/src/assets/icons/link.svg
@@ -1,3 +1,3 @@
-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5 5.04C14.5 5.26278 14.4115 5.47644 14.254 5.63397C14.0964 5.7915 13.8828 5.88 13.66 5.88C13.4372 5.88 13.2236 5.7915 13.066 5.63397C12.9085 5.47644 12.82 5.26278 12.82 5.04V2.87L9.215 6.475C9.13679 6.55294 9.04399 6.61469 8.94189 6.65673C8.83979 6.69877 8.73041 6.72027 8.62 6.72C8.50936 6.72186 8.39951 6.70108 8.2972 6.65895C8.19488 6.61682 8.10225 6.55422 8.025 6.475C7.94669 6.39696 7.88455 6.30423 7.84216 6.20213C7.79976 6.10002 7.77794 5.99056 7.77794 5.88C7.77794 5.76944 7.79976 5.65998 7.84216 5.55787C7.88455 5.45577 7.94669 5.36304 8.025 5.285L11.63 1.68H9.46C9.23722 1.68 9.02356 1.5915 8.86603 1.43397C8.7085 1.27644 8.62 1.06278 8.62 0.84C8.62 0.617218 8.7085 0.403561 8.86603 0.24603C9.02356 0.0884998 9.23722 0 9.46 0H13.66C13.8828 0 14.0964 0.0884998 14.254 0.24603C14.4115 0.403561 14.5 0.617218 14.5 0.84V5.04ZM11.42 7.28C11.1972 7.28 10.9836 7.3685 10.826 7.52603C10.6685 7.68356 10.58 7.89722 10.58 8.12V12.32H2.18V3.92H6.38C6.60278 3.92 6.81644 3.8315 6.97397 3.67397C7.1315 3.51644 7.22 3.30278 7.22 3.08C7.22 2.85722 7.1315 2.64356 6.97397 2.48603C6.81644 2.3285 6.60278 2.24 6.38 2.24H1.9C1.52926 2.24184 1.17424 2.38993 0.912083 2.65208C0.64993 2.91424 0.50184 3.26926 0.5 3.64V12.6C0.50184 12.9707 0.64993 13.3258 0.912083 13.5879C1.17424 13.8501 1.52926 13.9982 1.9 14H10.86C11.2307 13.9982 11.5858 13.8501 11.8479 13.5879C12.1101 13.3258 12.2582 12.9707 12.26 12.6V8.12C12.26 7.89722 12.1715 7.68356 12.014 7.52603C11.8564 7.3685 11.6428 7.28 11.42 7.28Z" fill="white"/>
+<svg width="15" height="14" viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg" fill="inherit">
+<path d="M14.5 5.04C14.5 5.26278 14.4115 5.47644 14.254 5.63397C14.0964 5.7915 13.8828 5.88 13.66 5.88C13.4372 5.88 13.2236 5.7915 13.066 5.63397C12.9085 5.47644 12.82 5.26278 12.82 5.04V2.87L9.215 6.475C9.13679 6.55294 9.04399 6.61469 8.94189 6.65673C8.83979 6.69877 8.73041 6.72027 8.62 6.72C8.50936 6.72186 8.39951 6.70108 8.2972 6.65895C8.19488 6.61682 8.10225 6.55422 8.025 6.475C7.94669 6.39696 7.88455 6.30423 7.84216 6.20213C7.79976 6.10002 7.77794 5.99056 7.77794 5.88C7.77794 5.76944 7.79976 5.65998 7.84216 5.55787C7.88455 5.45577 7.94669 5.36304 8.025 5.285L11.63 1.68H9.46C9.23722 1.68 9.02356 1.5915 8.86603 1.43397C8.7085 1.27644 8.62 1.06278 8.62 0.84C8.62 0.617218 8.7085 0.403561 8.86603 0.24603C9.02356 0.0884998 9.23722 0 9.46 0H13.66C13.8828 0 14.0964 0.0884998 14.254 0.24603C14.4115 0.403561 14.5 0.617218 14.5 0.84V5.04ZM11.42 7.28C11.1972 7.28 10.9836 7.3685 10.826 7.52603C10.6685 7.68356 10.58 7.89722 10.58 8.12V12.32H2.18V3.92H6.38C6.60278 3.92 6.81644 3.8315 6.97397 3.67397C7.1315 3.51644 7.22 3.30278 7.22 3.08C7.22 2.85722 7.1315 2.64356 6.97397 2.48603C6.81644 2.3285 6.60278 2.24 6.38 2.24H1.9C1.52926 2.24184 1.17424 2.38993 0.912083 2.65208C0.64993 2.91424 0.50184 3.26926 0.5 3.64V12.6C0.50184 12.9707 0.64993 13.3258 0.912083 13.5879C1.17424 13.8501 1.52926 13.9982 1.9 14H10.86C11.2307 13.9982 11.5858 13.8501 11.8479 13.5879C12.1101 13.3258 12.2582 12.9707 12.26 12.6V8.12C12.26 7.89722 12.1715 7.68356 12.014 7.52603C11.8564 7.3685 11.6428 7.28 11.42 7.28Z" fill="inherit"/>
 </svg>
diff --git a/src/features/common/orgBreadCrumb.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
similarity index 83%
rename from src/features/common/orgBreadCrumb.tsx
rename to src/components/Breadcrumbs/Breadcrumbs.tsx
index fd9cb05..f5190ed 100644
--- a/src/features/common/orgBreadCrumb.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -7,10 +7,9 @@ import {
   Box,
   Text,
 } from "@chakra-ui/react";
-import { Link as RouterLink } from "react-router-dom";
 import { HomeIcon } from "@primer/octicons-react";
 import { Organisation } from "../../data/model/organisation";
-import { Paths } from "../../paths";
+import { Paths } from "../../routing/Paths";
 
 const currentPageStyle = {
   color: "#3959FF",
@@ -18,12 +17,16 @@ const currentPageStyle = {
   fontWeight: "700",
 };
 
-const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => {
+const Breadcrumbs: React.FC<{ org?: Organisation }> = ({ org }) => {
   const isOrgProfilePage = org !== undefined;
 
   return (
-    <Flex h="6vh">
-      <Box alignSelf="center" fontSize="14px">
+    <Flex h="6vh" marginBottom={25}>
+      <Box
+        alignSelf="center"
+        fontSize="14px"
+        className="page-width page-padding"
+      >
         <Breadcrumb spacing="1vw" separator={<ChevronRightIcon />}>
           {/* Home link */}
           <BreadcrumbItem>
@@ -59,4 +62,4 @@ const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => {
   );
 };
 
-export default OrgBreadCrumb;
+export default Breadcrumbs;
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
new file mode 100644
index 0000000..c4be285
--- /dev/null
+++ b/src/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { default } from "./Breadcrumbs";
\ No newline at end of file
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
new file mode 100644
index 0000000..6126cd7
--- /dev/null
+++ b/src/components/Container/Container.tsx
@@ -0,0 +1,10 @@
+const Container = (props: any) => {
+  const { Children } = props;
+  return (
+    <Container maxW="1440px" centerContent margin="auto">
+      {Children}
+    </Container>
+  );
+};
+
+export default Container;
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
new file mode 100644
index 0000000..c81c92a
--- /dev/null
+++ b/src/components/Container/index.ts
@@ -0,0 +1 @@
+export { default } from "./Container";
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..7ff92ce
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,196 @@
+import {
+  Flex,
+  Center,
+  VStack,
+  StackDivider,
+  Divider,
+  Box,
+  Text,
+  HStack,
+  Spacer,
+} from "@chakra-ui/react";
+import "../../pages/style.scss";
+import { SocialType } from "../../data/enums/social-type.enum";
+import { GetIconForSocials } from "../../utilities/iconMappings/iconMapping";
+import { Social } from "../../data/model/organisationSummary";
+
+const Footer: React.FC = () => {
+  const socials: Social[] = [
+    {
+      socialType: SocialType.Youtube,
+      url: "https://www.youtube.com/",
+    },
+    {
+      socialType: SocialType.Facebook,
+      url: "https://www.facebook.com/",
+    },
+    {
+      socialType: SocialType.LinkedIn,
+      url: "https://www.linkedin.com/",
+    },
+  ];
+  // dynamically generate social icons based on organisation data
+  const socialIconsView = socials.map((item, index) => {
+    return (
+      <Box key={index}>
+        <a href={item.url}>{GetIconForSocials(item.socialType)}</a>
+      </Box>
+    );
+  });
+
+  return (
+    <Box minH="37.33vh">
+      <Flex align="left" bg={"#F5F5F5"}>
+        <Box className="page-width page-padding" minH="37.33vh">
+          <VStack
+            divider={<StackDivider borderColor="whiteAlpha.200" />}
+            spacing={0}
+            align="stretch"
+          >
+            <Box h="4.6vh" />
+
+            <Box>
+              <Text
+                fontFamily={"Inter"}
+                fontStyle={"normal"}
+                fontWeight={"700"}
+                fontSize={"32px"}
+                lineHeight={"39px"}
+                letterSpacing={"-0.015em"}
+                color={"#192873"}
+              >
+                Mendisphere
+              </Text>
+            </Box>
+
+            <Box h="2.77vh" />
+
+            <HStack align="flex-end">
+              <Box w="42.2vw" id="footer">
+                <Text
+                  fontFamily={"Inter"}
+                  fontStyle={"normal"}
+                  fontWeight={"400"}
+                  fontSize={"18px"}
+                  lineHeight={"27px"}
+                  letterSpacing={"-0.015em"}
+                  textAlign="justify"
+                >
+                  Mendisphere aims to bring together mental health organizations
+                  and support non-profit mental health organizations who are
+                  struggling with resources and financial sustainability by
+                  increasing their visibility and supporting their fundraising
+                  efforts. Unlock the potential for mental wellness through
+                  nonprofit-corporate collaboration.
+                </Text>
+              </Box>
+              <Spacer></Spacer>
+              {socialIconsView}
+            </HStack>
+
+            <Box h="3.77vh"></Box>
+
+            <Divider colorScheme={"blue"} orientation={"horizontal"} />
+
+            <Box h="2.77vh"></Box>
+
+            <Flex>
+              <Box>
+                <Flex>
+                  <Text
+                    fontFamily={"Inter"}
+                    fontStyle={"normal"}
+                    fontWeight={"700"}
+                    fontSize={"24px"}
+                    lineHeight={"29px"}
+                    letterSpacing={"-0.015em"}
+                    color={"#707070"}
+                    as="a"
+                    href="mailto:mendisphere@better.sg"
+                  >
+                    Contact us at mendisphere@better.sg
+                  </Text>
+                  <Box w="4.166vw"></Box>
+
+                  {/* <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"700"}
+                      fontSize={"24px"}
+                      lineHeight={"29px"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      Get resources
+                    </Text> */}
+                </Flex>
+              </Box>
+              <Box minW="40vw"> </Box>
+              {/* <Box>
+                  <Flex>
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      About
+                    </Text>
+                    <Box w="4.166vw"></Box>
+  
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      Contact
+                    </Text>
+  
+                    <Box w="4.166vw"></Box>
+  
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      FAQ
+                    </Text>
+                  </Flex>
+                </Box> */}
+            </Flex>
+
+            <Box h="3.33vh" />
+
+            <Box>
+              <Text
+                fontFamily={"Inter"}
+                fontStyle={"normal"}
+                fontWeight={"400"}
+                fontSize={"14px"}
+                lineHeight={"17px"}
+                letterSpacing={"-0.015em"}
+                color={"#707070"}
+              >
+                {`© ${new Date().getFullYear()} Mendisphere. All Rights Reserved.`}
+              </Text>
+            </Box>
+
+            <Box h="2vh" />
+          </VStack>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000..d6d8d55
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { default } from "./Footer";
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..dfe70dd
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,142 @@
+import { useState } from "react";
+import {
+  Box,
+  Image,
+  Flex,
+  HStack,
+  Stack,
+  Link,
+  Spacer,
+} from "@chakra-ui/react";
+import { Link as ReactRouterLink } from "react-router-dom";
+import NavigationButton from "../NavigationButton";
+import { Paths } from "../../routing/Paths";
+import "../../pages/style.scss";
+
+import logo from "../../assets/images/logo/Mendisphere Logo colour.png";
+
+const Header = () => {
+  const [mobileNav, setMobileNav] = useState(false);
+
+  const toggleMobileNav = () => {
+    setMobileNav(!mobileNav);
+  };
+
+  // alpha version only
+  const handleScrollToFooter = () => {
+    const footerElement = document.getElementById("footer");
+    if (footerElement) {
+      footerElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <Box>
+      <Flex
+        h="8vh"
+        borderBottom="1px"
+        borderColor="#d3d3d3"
+        top={0}
+        zIndex={200}
+        backgroundColor="#FFFFFF"
+      >
+        <HStack className="page-width page-padding">
+          <Link as={ReactRouterLink} to={Paths.home}>
+            <Image src={logo} width="180px" height="auto" />
+          </Link>
+          <Spacer></Spacer>
+          <HStack
+            as={"nav"}
+            spacing="80px"
+            fontSize="15px"
+            fontWeight="700"
+            color="#333333"
+            display={{ base: "none", md: "flex" }}
+          >
+            <Link onClick={handleScrollToFooter}>About</Link>
+            <Link as={ReactRouterLink} to={Paths.organisationListing}>
+              Organisations
+            </Link>
+            <Link onClick={handleScrollToFooter}>Contact Us</Link>
+          </HStack>
+          {/* <Flex flex={1} justify={"flex-end"}>
+            <HStack
+              direction={"row"}
+              spacing={4}
+              alignItems={"center"}
+              display={{ base: "none", md: "flex" }}
+            >
+              <NavigationButton
+                backgroundColor="#192873"
+                navigationLink={Paths.login}
+                buttonText="Log in"
+                height="6vh"
+                width="9vw"
+              />
+              <NavigationButton
+                backgroundColor="#192873"
+                navigationLink={Paths.signup}
+                buttonText="Sign up"
+                height="6vh"
+                width="9vw"
+              />
+            </HStack>
+            <IconButton
+              size={"md"}
+              icon={mobileNav ? <CloseIcon /> : <HamburgerIcon />}
+              aria-label={"Open Menu"}
+              display={{ md: "none" }}
+              onClick={toggleMobileNav}
+            />
+          </Flex> */}
+
+          {mobileNav ? (
+            <Box pb={4} display={{ md: "none" }}>
+              <Stack as={"nav"} spacing={4}>
+                <Link
+                  as={ReactRouterLink}
+                  to={"/organisations"}
+                  fontFamily={"Inter"}
+                >
+                  Organisations
+                </Link>
+                <Link
+                  as={ReactRouterLink}
+                  to={"/applyforservices"}
+                  fontFamily={"Inter"}
+                >
+                  Apply for Services
+                </Link>
+                <Link
+                  as={ReactRouterLink}
+                  to={"/contactus"}
+                  fontFamily={"Inter"}
+                >
+                  Contact Us
+                </Link>
+                <Stack direction={"row"} spacing={4} alignItems={"center"}>
+                  <NavigationButton
+                    backgroundColor="#192873"
+                    navigationLink="/login"
+                    buttonText="Log in"
+                    height="6vh"
+                    width="9vw"
+                  />
+                  <NavigationButton
+                    backgroundColor="#192873"
+                    navigationLink=""
+                    buttonText="Sign up"
+                    height="6vh"
+                    width="9vw"
+                  />
+                </Stack>
+              </Stack>
+            </Box>
+          ) : null}
+        </HStack>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Header;
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000..243d8ed
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from "./Header";
\ No newline at end of file
diff --git a/src/features/home/components/NavigationButton.tsx b/src/components/NavigationButton/NavigationButton.tsx
similarity index 100%
rename from src/features/home/components/NavigationButton.tsx
rename to src/components/NavigationButton/NavigationButton.tsx
diff --git a/src/components/NavigationButton/index.ts b/src/components/NavigationButton/index.ts
new file mode 100644
index 0000000..380c540
--- /dev/null
+++ b/src/components/NavigationButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./NavigationButton";
diff --git a/src/features/home/components/ScrollAnimation.tsx b/src/components/ScrollAnimation/ScrollAnimation.tsx
similarity index 100%
rename from src/features/home/components/ScrollAnimation.tsx
rename to src/components/ScrollAnimation/ScrollAnimation.tsx
diff --git a/src/components/ScrollAnimation/index.ts b/src/components/ScrollAnimation/index.ts
new file mode 100644
index 0000000..ce4c805
--- /dev/null
+++ b/src/components/ScrollAnimation/index.ts
@@ -0,0 +1 @@
+export { Animate } from "./ScrollAnimation";
diff --git a/src/data/auth/authContext.tsx b/src/data/auth/authContext.tsx
index 83e74ce..73baa70 100644
--- a/src/data/auth/authContext.tsx
+++ b/src/data/auth/authContext.tsx
@@ -2,5 +2,5 @@ import React from "react";
 import { AuthContextModel } from "./authContextModel";
 
 export const AuthContext = React.createContext<AuthContextModel>(
-    {} as AuthContextModel,
-  )
\ No newline at end of file
+  {} as AuthContextModel
+);
diff --git a/src/data/model/organisationProfile/organisationProfileOurStory.ts b/src/data/model/organisationProfile/organisationProfileOurStory.ts
index 727392b..3d3e26f 100644
--- a/src/data/model/organisationProfile/organisationProfileOurStory.ts
+++ b/src/data/model/organisationProfile/organisationProfileOurStory.ts
@@ -52,11 +52,10 @@ export async function createOrganisationProfileOurStory(
   orgId: string,
   orgOurStoryData: IProfileContent[]
 ): Promise<void> {
-  const docRef = doc(db, Collections.organisationOurStory, orgId).withConverter(organisationOurStoryConverter);
-  await setDoc(
-    docRef,
-    new OrganisationProfileOurStory(orgId, orgOurStoryData)
+  const docRef = doc(db, Collections.organisationOurStory, orgId).withConverter(
+    organisationOurStoryConverter
   );
+  await setDoc(docRef, new OrganisationProfileOurStory(orgId, orgOurStoryData));
 }
 
 export async function getOrganisationProfileOurStory(
diff --git a/src/data/model/organisationSummary.ts b/src/data/model/organisationSummary.ts
index 0369183..f8f32da 100644
--- a/src/data/model/organisationSummary.ts
+++ b/src/data/model/organisationSummary.ts
@@ -68,7 +68,7 @@ export const organisationSummaryConverter: FirestoreDataConverter<OrganisationSu
         donationUrl: data.donationUrl,
         mission: data.mission,
         email: data.email,
-        socials: data.socials
+        socials: data.socials,
       };
     },
     fromFirestore(
diff --git a/src/data/model/user.ts b/src/data/model/user.ts
index 4ecca68..b24bae0 100644
--- a/src/data/model/user.ts
+++ b/src/data/model/user.ts
@@ -1,7 +1,4 @@
-import {
-  doc,
-  setDoc,
-} from "firebase/firestore";
+import { doc, setDoc } from "firebase/firestore";
 import { Collections } from "../../services/firebase/names";
 import { db } from "../../services/firebase/firebaseConfig";
 import { UserRole } from "../enums/user-role.enum";
diff --git a/src/features/common/NavigationBar.tsx b/src/features/common/NavigationBar.tsx
deleted file mode 100644
index 4ad422a..0000000
--- a/src/features/common/NavigationBar.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { useState } from "react";
-import {
-  Box,
-  Image,
-  Flex,
-  HStack,
-  Stack,
-  Link,
-  Spacer,
-} from "@chakra-ui/react";
-import { Link as ReactRouterLink } from "react-router-dom";
-import NavigationButton from "../home/components/NavigationButton";
-import { Paths } from "../../paths";
-import "../page-style.scss";
-
-import logo from "../../assets/images/logo/Mendisphere Logo colour.png";
-
-const Navigation = () => {
-  const [mobileNav, setMobileNav] = useState(false);
-
-  const toggleMobileNav = () => {
-    setMobileNav(!mobileNav);
-  };
-
-  // alpha version only
-  const handleScrollToFooter = () => {
-    const footerElement = document.getElementById("footer");
-    if (footerElement) {
-      footerElement.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  return (
-    <Flex
-      h="8vh"
-      className="maximise-width"
-      borderBottom="1px"
-      borderColor="#d3d3d3"
-      top={0}
-      zIndex={200}
-      backgroundColor="#FFFFFF"
-    >
-      <HStack className="page-width page-padding">
-        <Image src={logo} width="180px" height="auto"></Image>
-        <Spacer></Spacer>
-        <HStack
-          as={"nav"}
-          spacing="80px"
-          fontSize="15px"
-          fontWeight="700"
-          color="#333333"
-          display={{ base: "none", md: "flex" }}
-        >
-          <Link onClick={handleScrollToFooter}>About</Link>
-          <Link as={ReactRouterLink} to={Paths.organisationListing}>
-            Organisations
-          </Link>
-          <Link onClick={handleScrollToFooter}>Contact Us</Link>
-        </HStack>
-        {/* <Flex flex={1} justify={"flex-end"}>
-            <HStack
-              direction={"row"}
-              spacing={4}
-              alignItems={"center"}
-              display={{ base: "none", md: "flex" }}
-            >
-              <NavigationButton
-                backgroundColor="#192873"
-                navigationLink={Paths.login}
-                buttonText="Log in"
-                height="6vh"
-                width="9vw"
-              />
-              <NavigationButton
-                backgroundColor="#192873"
-                navigationLink={Paths.signup}
-                buttonText="Sign up"
-                height="6vh"
-                width="9vw"
-              />
-            </HStack>
-            <IconButton
-              size={"md"}
-              icon={mobileNav ? <CloseIcon /> : <HamburgerIcon />}
-              aria-label={"Open Menu"}
-              display={{ md: "none" }}
-              onClick={toggleMobileNav}
-            />
-          </Flex> */}
-
-        {mobileNav ? (
-          <Box pb={4} display={{ md: "none" }}>
-            <Stack as={"nav"} spacing={4}>
-              <Link
-                as={ReactRouterLink}
-                to={"/organisations"}
-                fontFamily={"Inter"}
-              >
-                Organisations
-              </Link>
-              <Link
-                as={ReactRouterLink}
-                to={"/applyforservices"}
-                fontFamily={"Inter"}
-              >
-                Apply for Services
-              </Link>
-              <Link as={ReactRouterLink} to={"/contactus"} fontFamily={"Inter"}>
-                Contact Us
-              </Link>
-              <Stack direction={"row"} spacing={4} alignItems={"center"}>
-                <NavigationButton
-                  backgroundColor="#192873"
-                  navigationLink="/login"
-                  buttonText="Log in"
-                  height="6vh"
-                  width="9vw"
-                />
-                <NavigationButton
-                  backgroundColor="#192873"
-                  navigationLink=""
-                  buttonText="Sign up"
-                  height="6vh"
-                  width="9vw"
-                />
-              </Stack>
-            </Stack>
-          </Box>
-        ) : null}
-      </HStack>
-    </Flex>
-  );
-};
-
-export default Navigation;
diff --git a/src/features/common/footer.tsx b/src/features/common/footer.tsx
deleted file mode 100644
index ea3028c..0000000
--- a/src/features/common/footer.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import {
-  Flex,
-  Center,
-  VStack,
-  StackDivider,
-  Divider,
-  Box,
-  Text,
-  HStack,
-  Spacer,
-} from "@chakra-ui/react";
-import "../page-style.scss";
-import { SocialType } from "../../data/enums/social-type.enum";
-import { GetIconForSocials } from "../../utilities/icon-mappings";
-import { Social } from "../../data/model/organisationSummary";
-
-const Footer: React.FC = () => {
-  const socials: Social[] = [
-    {
-      socialType: SocialType.Youtube,
-      url: "https://www.youtube.com/",
-    },
-    {
-      socialType: SocialType.Facebook,
-      url: "https://www.facebook.com/",
-    },
-    {
-      socialType: SocialType.LinkedIn,
-      url: "https://www.linkedin.com/",
-    },
-  ];
-  // dynamically generate social icons based on organisation data
-  const socialIconsView = socials.map((item, index) => {
-    return (
-      <Box key={index}>
-        <a href={item.url}>{GetIconForSocials(item.socialType)}</a>
-      </Box>
-    );
-  });
-
-  return (
-    <Flex align="left" bg={"#F5F5F5"}>
-      <Box className="page-width page-padding" minW="82.2vw" minH="37.33vh">
-        <VStack
-          divider={<StackDivider borderColor="whiteAlpha.200" />}
-          spacing={0}
-          align="stretch"
-        >
-          <Box w="82.2vw" h="4.6vh" />
-
-          <Box w="82.2vw">
-            <Text
-              fontFamily={"Inter"}
-              fontStyle={"normal"}
-              fontWeight={"700"}
-              fontSize={"32px"}
-              lineHeight={"39px"}
-              letterSpacing={"-0.015em"}
-              color={"#192873"}
-            >
-              Mendisphere
-            </Text>
-          </Box>
-
-          <Box w="82.2vw" h="2.77vh" />
-
-          <HStack align="flex-end">
-            <Box w="42.2vw" id="footer">
-              <Text
-                fontFamily={"Inter"}
-                fontStyle={"normal"}
-                fontWeight={"400"}
-                fontSize={"18px"}
-                lineHeight={"27px"}
-                letterSpacing={"-0.015em"}
-                textAlign="justify"
-              >
-                Mendisphere aims to bring together mental health organizations
-                and support non-profit mental health organizations who are
-                struggling with resources and financial sustainability by
-                increasing their visibility and supporting their fundraising
-                efforts. Unlock the potential for mental wellness through
-                nonprofit-corporate collaboration.
-              </Text>
-            </Box>
-            <Spacer></Spacer>
-            {socialIconsView}
-          </HStack>
-
-          <Box w="82.2vw" h="3.77vh"></Box>
-
-          <Divider colorScheme={"blue"} orientation={"horizontal"} />
-
-          <Box w="82.2vw" h="2.77vh"></Box>
-
-          <Flex w="82.2vw">
-            <Box>
-              <Flex>
-                <Text
-                  fontFamily={"Inter"}
-                  fontStyle={"normal"}
-                  fontWeight={"700"}
-                  fontSize={"24px"}
-                  lineHeight={"29px"}
-                  letterSpacing={"-0.015em"}
-                  color={"#707070"}
-                  as="a"
-                  href="mailto:mendisphere@better.sg"
-                >
-                  Contact us at mendisphere@better.sg
-                </Text>
-                <Box w="4.166vw"></Box>
-
-                {/* <Text
-                    fontFamily={"Inter"}
-                    fontStyle={"normal"}
-                    fontWeight={"700"}
-                    fontSize={"24px"}
-                    lineHeight={"29px"}
-                    letterSpacing={"-0.015em"}
-                  >
-                    Get resources
-                  </Text> */}
-              </Flex>
-            </Box>
-            <Box minW="40vw"> </Box>
-            {/* <Box>
-                <Flex>
-                  <Text
-                    fontFamily={"Inter"}
-                    fontStyle={"normal"}
-                    fontWeight={"400"}
-                    fontSize={"18px"}
-                    lineHeight={"22px"}
-                    textAlign={"center"}
-                    letterSpacing={"-0.015em"}
-                  >
-                    About
-                  </Text>
-                  <Box w="4.166vw"></Box>
-
-                  <Text
-                    fontFamily={"Inter"}
-                    fontStyle={"normal"}
-                    fontWeight={"400"}
-                    fontSize={"18px"}
-                    lineHeight={"22px"}
-                    textAlign={"center"}
-                    letterSpacing={"-0.015em"}
-                  >
-                    Contact
-                  </Text>
-
-                  <Box w="4.166vw"></Box>
-
-                  <Text
-                    fontFamily={"Inter"}
-                    fontStyle={"normal"}
-                    fontWeight={"400"}
-                    fontSize={"18px"}
-                    lineHeight={"22px"}
-                    textAlign={"center"}
-                    letterSpacing={"-0.015em"}
-                  >
-                    FAQ
-                  </Text>
-                </Flex>
-              </Box> */}
-          </Flex>
-
-          <Box w="82.2vw" h="3.33vh" />
-
-          <Box w="82.2vw">
-            <Text
-              fontFamily={"Inter"}
-              fontStyle={"normal"}
-              fontWeight={"400"}
-              fontSize={"14px"}
-              lineHeight={"17px"}
-              letterSpacing={"-0.015em"}
-              color={"#707070"}
-            >
-              © 2023 Mendisphere. All Rights Reserved.
-            </Text>
-          </Box>
-
-          <Box w="82.2vw" h="2vh" />
-        </VStack>
-      </Box>
-    </Flex>
-  );
-};
-
-export default Footer;
diff --git a/src/features/firestore-mock/test-data/users.json b/src/features/firestore-mock/test-data/users.json
deleted file mode 100644
index c0f5a00..0000000
--- a/src/features/firestore-mock/test-data/users.json
+++ /dev/null
@@ -1,13 +0,0 @@
-// user ids are auto generated by firebase authentication, unable to provide custom ids for testing
-[
-    {
-        "Id": "mxlDmEYBg6g1Xgy7kDsLZBdcFwv1",
-        "role": 1,
-        "orgRef": "/organisations/test1"
-    },
-    {
-        "Id": "UoOjhZsOlJMVj3bjS5NTVS2AMIk1", 
-        "Name": "Test2 User",
-        "orgRef": "/organisations/test2"
-    }
-]
\ No newline at end of file
diff --git a/src/features/home/components/FrontPage.tsx b/src/features/home/components/FrontPage.tsx
deleted file mode 100644
index 49d224d..0000000
--- a/src/features/home/components/FrontPage.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Flex, Stack, Box, Image, Heading } from "@chakra-ui/react";
-import NavigationButton from "./NavigationButton";
-
-export default function FrontPage() {
-  return (
-    <Flex
-      align="center"
-      justify={{ base: "center", md: "space-around", xl: "space-between" }}
-      direction={{ base: "column-reverse", md: "row" }}
-      wrap="nowrap"
-      mb={16}
-    >
-      <Stack
-        spacing={4}
-        paddingTop="48px"
-        w={{ base: "100%", md: "60%" }}
-        align={["center", "center", "flex-start", "flex-start"]}
-      >
-        <Heading
-          as="h1"
-          fontSize={["md", "lg", "xl", "80px"]}
-          fontWeight="bold"
-          color="primary.800"
-          textAlign={["center", "center", "left", "left"]}
-        >
-          Mental Health resources should reach everyone.
-        </Heading>
-        <Heading
-          as="h2"
-          size="md"
-          color="primary.800"
-          opacity="0.8"
-          fontWeight="normal"
-          lineHeight={1.5}
-          textAlign={["center", "center", "left", "left"]}
-          paddingBottom="20px"
-        >
-          Amplify the impact of your mental health initiatives through
-          collaboration.
-        </Heading>
-        <NavigationButton
-          size="md"
-          height="48px"
-          width="300px"
-          borderRadius="18px"
-          backgroundColor="#192873"
-          navigationLink="/organisations"
-          buttonText="View Organisations"
-          _hover={{ bg: "#ebedf0" }}
-          _active={{
-            bg: "#dddfe2",
-            transform: "scale(0.98)",
-            borderColor: "#bec3c9",
-          }}
-          _focus={{
-            boxShadow:
-              "0 0 1px 2px rgba(255, 255, 255, .5), 0 10px 10px rgba(0, 0, 0, .15)",
-          }}
-        />
-      </Stack>
-      <Box
-        paddingTop="300px"
-        w={{ base: "80%", sm: "60%", md: "50%" }}
-        mb={{ base: 12, md: 0 }}
-      >
-        <Image src={require("../../../assets/images/3dcolleagues1.png")} />
-      </Box>
-    </Flex>
-  );
-}
diff --git a/src/features/home/components/FrontSupport.tsx b/src/features/home/components/FrontSupport.tsx
deleted file mode 100644
index 7b621d7..0000000
--- a/src/features/home/components/FrontSupport.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  Text,
-  SimpleGrid,
-  Button,
-  Heading,
-  Image,
-  AspectRatio,
-  useMediaQuery,
-  Box,
-  Center,
-} from "@chakra-ui/react";
-
-export default function FrontSupport() {
-  const [isLargerThan768] = useMediaQuery("(min-width: 768px)");
-
-  const customHeadingProps = {
-    paddingTop: "10px",
-    fontWeight: 400,
-    fontSize: "xl",
-    textAlign: "center" as const,
-  };
-
-  const customButtonProps = {
-    width: "100%",
-    backgroundColor: "#192873",
-    color: "#ffffff",
-    "&:hover": {
-      bg: "rgba(224, 229, 255, 0)",
-      color: "black",
-      border: "1px solid #192873",
-    },
-  };
-
-  return (
-    <Box className="page-width page-padding" paddingBottom="100px">
-      <Heading
-        m="4"
-        fontSize={["lg", "2xl", "4xl", "6xl"]}
-        textAlign="center"
-        fontWeight="bold"
-        paddingBottom="100px"
-      >
-        Support your way
-      </Heading>
-      <SimpleGrid
-        templateColumns={isLargerThan768 ? "repeat(3, 1fr)" : "1fr"}
-        gap={4}
-      >
-        <Card boxShadow="none">
-          <CardHeader>
-            <Center>
-              <Image
-                height="185px"
-                src={require("../../../assets/images/contribute.png")}
-              />
-            </Center>
-            <Heading style={customHeadingProps}>Contribute</Heading>
-          </CardHeader>
-          <CardBody>
-            <Text>
-              Browse the wide array of non-profits furthering mental health
-              outcomes, understand their story and impact, and contribute to
-              those that speak to you.
-            </Text>
-          </CardBody>
-          {/* <CardFooter>
-            <Button sx={customButtonProps}>Learn More</Button>
-          </CardFooter> */}
-        </Card>
-        <Card boxShadow="none">
-          <CardHeader>
-            <Center>
-              <Image
-                height="185px"
-                src={require("../../../assets/images/collaborate.png")}
-              />
-            </Center>
-            <Heading style={customHeadingProps}> Collaborate</Heading>
-          </CardHeader>
-          <CardBody>
-            <Text>
-              Workshops? Trainings? Talks? Explore opportunities to partner with
-              non-profits and leverage their vast expertise in the mental health
-              space.
-            </Text>
-          </CardBody>
-          {/* <CardFooter>
-            <Button sx={customButtonProps}>Learn More</Button>
-          </CardFooter> */}
-        </Card>
-        <Card boxShadow="none">
-          <Center>
-            <Image
-              height="185px"
-              width="auto"
-              src={require("../../../assets/images/volunteer.png")}
-            />
-          </Center>
-          <CardHeader>
-            <Heading style={customHeadingProps}>Volunteer</Heading>
-          </CardHeader>
-          <CardBody>
-            <Text>
-              Make your CSR efforts count by volunteering with non-profits who
-              need support in achieving their goals.
-            </Text>
-          </CardBody>
-          {/* <CardFooter>
-            <Button sx={customButtonProps}>Learn More</Button>
-          </CardFooter> */}
-        </Card>
-      </SimpleGrid>
-    </Box>
-  );
-}
diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx
deleted file mode 100644
index ca56ac1..0000000
--- a/src/features/home/index.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import {
-  Box,
-  Text,
-  Center,
-  Button,
-  VStack,
-  Image,
-  HStack,
-  Heading,
-} from "@chakra-ui/react";
-import FrontPage from "./components/FrontPage";
-import NavigationBar from "../common/NavigationBar";
-import Footer from "../common/footer";
-import { Animate } from "./components/ScrollAnimation";
-import { ReactComponent as HomeIcon3 } from "../../assets/icons/homeIcon3.svg";
-import { useNavigate } from "react-router-dom";
-import { styles } from "./styles";
-import "../page-style.scss";
-import FrontSupport from "./components/FrontSupport";
-import { useRef } from "react";
-
-const Home: React.FC = () => {
-  const navigate = useNavigate();
-
-  // const footerRef: React.RefObject<HTMLDivElement> =
-  //   useRef<HTMLDivElement>(null);
-
-  return (
-    <VStack className="page-width page-padding" align="stretch" spacing="0px">
-      <Box>
-        <NavigationBar />
-      </Box>
-
-      <Box minHeight="50vh">
-        <FrontPage />
-      </Box>
-
-      <Box
-        className="maximise-width"
-        bgGradient="linear-gradient(0deg, #E0E5FF 43.75%, rgba(224, 229, 255, 0) 100%);"
-      >
-        <FrontSupport />
-      </Box>
-
-      <Animate.FadeUp>
-        <Box className="maximise-width" style={styles.box1}>
-          <Box className="page-width page-padding">
-            <HStack spacing="52px">
-              <HomeIcon3 />
-              <VStack width="70%">
-                <Text
-                  style={{
-                    fontSize: 70,
-                    color: "#F5F5F5",
-                    fontWeight: 700,
-                  }}
-                >
-                  Together, we can go further.
-                </Text>
-                <Text
-                  style={{
-                    fontSize: 32,
-                    color: "#F5F5F5",
-                    fontWeight: 400,
-                    paddingTop: 16,
-                  }}
-                >
-                  Mendisphere connects non-profits focusing on mental health
-                  with the support they need to maximise their impact and reach
-                  more people.
-                </Text>
-                <Center>
-                  {/* <Button sx={styles.whiteButton1}>Our Story</Button> */}
-                </Center>
-              </VStack>
-            </HStack>
-          </Box>
-        </Box>
-      </Animate.FadeUp>
-      {/* Hidden elements for alpha version */}
-      {/* <Animate.FadeUp>
-        <Box pb="16">
-          <Center style={styles.headerLarge}>
-            Driving Outcomes that Matter to You
-          </Center>
-          <Center style={{ alignItems: "start", marginBottom: 72 }}>
-            <Image src={require("../../assets/images/NPMHOTestimonial1.png")} />
-            <Image src={require("../../assets/images/NPMHOTestimonial2.png")} />
-            <Image src={require("../../assets/images/NPMHOTestimonial3.png")} />
-          </Center>
-          <div style={{ alignSelf: "center" }}>
-            <Center>
-              <Box sx={styles.blueButton}>Read Testimonials</Box>
-            </Center>
-          </div>
-        </Box>
-      </Animate.FadeUp> */}
-      {/* <Animate.FadeUp>
-        <Box>
-          <Center style={styles.headerSmall}>Organisation Partners</Center>
-          <Center>
-            <HStack w="100%" style={styles.imageContainer}>
-              <Image
-                w="15%"
-                src={require("../../assets/images/Partner1.png")}
-              />
-              <Image
-                w="15%"
-                src={require("../../assets/images/Partner2.png")}
-              />
-              <Image
-                w="15%"
-                src={require("../../assets/images/Partner3.png")}
-              />
-              <Image
-                w="15%"
-                src={require("../../assets/images/Partner4.png")}
-              />
-              <Image
-                w="15%"
-                src={require("../../assets/images/Partner5.png")}
-              />
-            </HStack>
-          </Center>
-        </Box>
-      </Animate.FadeUp> */}
-      {/* <Animate.FadeUp>
-        <Box pb="16">
-          <Center style={styles.headerLarge}>
-            The Latest on Mental Health
-          </Center>
-          <HStack style={styles.imageContainer}>
-            <Image
-              src={require("../../assets/images/NPMHOStory1.png")}
-              style={{ borderRadius: 12 }}
-            />
-            <Image
-              src={require("../../assets/images/NPMHOStory2.png")}
-              style={{ borderRadius: 12 }}
-            />
-            <Image
-              src={require("../../assets/images/NPMHOStory3.png")}
-              style={{ borderRadius: 12 }}
-            />
-          </HStack>
-          <div style={{ alignSelf: "center" }}>
-            <Center>
-              <Box marginTop="12" sx={styles.blueButton}>
-                Explore our Blog
-              </Box>
-            </Center>
-          </div>
-        </Box>
-      </Animate.FadeUp> */}
-      {/* <Animate.FadeUp>
-        <Box
-          className="maximise-width"
-          style={{ paddingTop: 96, paddingLeft: 120 }}
-          bgGradient="linear-gradient(270deg, #3959FF 2.22%, #3959FF 2.23%, rgba(57, 89, 255, 0.618) 30.5%, rgba(255, 255, 255, 0) 99.17%);"
-        >
-          <Box className="page-width page-padding" pb="16">
-            <HStack w="100%">
-              <VStack w="65%">
-                <Heading
-                  style={{
-                    fontSize: 80,
-                    fontWeight: 700,
-                    paddingBottom: 24,
-                    alignSelf: "center",
-                  }}
-                >
-                  Lead the Charge for Mental Wellness
-                </Heading>
-                <Text
-                  style={{
-                    fontSize: 32,
-                    fontWeight: 400,
-                    paddingTop: 16,
-                    paddingBottom: 48,
-                  }}
-                >
-                  Advance mental health support in Singapore by collaborating
-                  with non-profits making a difference.
-                </Text>
-                <HStack>
-                  <Button
-                    sx={styles.blueButton}
-                    // TODO registerPage path onClick={this.navigate()}
-                  >
-                    Join Mendisphere
-                  </Button>
-                  <Button
-                    sx={styles.whiteButton2}
-                    onClick={() => navigate("/organisations")}
-                  >
-                    For Corporates
-                  </Button>
-                </HStack>
-              </VStack>
-              <Box>
-                <Image src={require("../../assets/images/homeIcon4.png")} />
-              </Box>
-            </HStack>
-          </Box>
-        </Box>
-      </Animate.FadeUp> */}
-      <Box className="maximise-width" minH="37.33vh">
-        <Footer />
-      </Box>
-    </VStack>
-  );
-};
-
-export default Home;
diff --git a/src/features/login/components/email-credential.tsx b/src/features/login/components/email-credential.tsx
deleted file mode 100644
index 3c862c6..0000000
--- a/src/features/login/components/email-credential.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Box, Button, Flex, Input, InputGroup, InputRightElement, Text, VStack } from '@chakra-ui/react'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import React from 'react'
-
-
-
-
-export default function EmailCredential(){
-
-    const [show, setShow] = React.useState(false)
-    const [noText, setNoText] = React.useState(true)
-
-    const handleClick = () => setShow(!show)
-    
-
-    const handleChange = (event:any) => {
-
-        if(event.target.value.length > 0){
-            setNoText(false);
-        }else{
-            setNoText(true);
-        }
-    }
-
-    return (
-        <Flex >
-            <VStack
-                spacing={4}
-                align='stretch'
-                minWidth="100%"
-            >
-                <Box >
-                    <Text>Email</Text>
-                    <Input placeholder='Enter your email' />
-                </Box>
-                <Box >
-                    <Text>Password</Text>
-                    <InputGroup size='md'>
-                        <Input
-                            pr='4.5rem'
-                            type={show ? 'text' : 'password'}
-                            placeholder='Enter password'
-                            onChange={handleChange}
-               
-                        ></Input>
-
-                        <InputRightElement width='4.5rem'>
-                            <Button h='1.75rem' size='sm' onClick={handleClick} disabled={noText}>
-                            {show ? <ViewOffIcon/> : <ViewIcon/>}
-                            </Button>
-                        </InputRightElement>
-                    </InputGroup>
-                </Box>
-
-            </VStack>
-        </Flex>
-    )
-
-}
\ No newline at end of file
diff --git a/src/features/login/components/forgot-password.tsx b/src/features/login/components/forgot-password.tsx
deleted file mode 100644
index 9c2a4b5..0000000
--- a/src/features/login/components/forgot-password.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Box, Flex, Link, Spacer,  Text } from '@chakra-ui/react'
-
-export default function ForgotPassword(){
-
-    return (
-        <Flex >
-            <Box p='1'></Box>
-            <Spacer />
-            <Box p='1' >
-                <Link href="/"><Text color="blue" as='b'>Forgot password</Text></Link>
-            </Box>
-        </Flex>
-    )
-}
\ No newline at end of file
diff --git a/src/features/login/components/google-sign-in-button.tsx b/src/features/login/components/google-sign-in-button.tsx
deleted file mode 100644
index 5fda010..0000000
--- a/src/features/login/components/google-sign-in-button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { GoogleOAuthProvider, GoogleLogin, CredentialResponse } from '@react-oauth/google';
-import { VStack } from '@chakra-ui/react';
-
-function errorHandler(error: string): void{
-    console.error(error)
-}
-
-function successHandler(response: CredentialResponse): void {
-    const clientId = response.clientId;
-    const token = response.credential;
-
-    console.log("Received response from google.")
-    console.log(`Client ID: ${clientId}`);
-    console.log(`Token: ${token}`);
-    
-    // var authRequest : AuthenticationRequestData = {
-    //     userName: token ?? ""
-    // }
-    
-    // try {
-    //     AuthenticationService.authenticate(authRequest)
-    //     .then((response: any) =>{
-    //         console.log(response.data)
-    //     })
-    // } catch (error) {
-    //     console.log("Authentication Failed.")
-    // }
-
-    console.log("Login success!")
-}
-
-export default function GoogleSignInButton(){
-    const  clientConfig = { client_id:'968904403503-qvq5oafbv3ctjtqtf7liqrq04lfou8h4.apps.googleusercontent.com'}
-
-    return (
-        <VStack
-        spacing={4}
-        align='stretch'>
-            <GoogleOAuthProvider
-                clientId={clientConfig["client_id"]}
-            >
-                <GoogleLogin
-                    onSuccess={(response) => successHandler(response)} 
-                    onError={() => errorHandler}
-                />
-
-            </GoogleOAuthProvider>
-        </VStack>
-    )
-}
\ No newline at end of file
diff --git a/src/features/login/components/login-menu-message.tsx b/src/features/login/components/login-menu-message.tsx
deleted file mode 100644
index c1b27c5..0000000
--- a/src/features/login/components/login-menu-message.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box, Flex, VStack, Text } from "@chakra-ui/react";
-
-export default function LoginMenuMessage(){
-
-
-
-    return (
-        <Flex >
-
-            <VStack
-                spacing={4}
-                align='stretch'
-            >
-                <Box >
-                    <Text fontSize="4xl">Welcome back 👋🏻</Text>
-                </Box>
-                <Box >
-                    <Text fontSize="" as='b'>Connect with our community and get access to resources.</Text>
-                </Box>
-
-            </VStack>
-
-
-        </Flex>
-    )
-
-
-}
\ No newline at end of file
diff --git a/src/features/login/components/login-section.tsx b/src/features/login/components/login-section.tsx
deleted file mode 100644
index 0c5272a..0000000
--- a/src/features/login/components/login-section.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ArrowBackIcon } from '@chakra-ui/icons'
-import { Container, Link, StackDivider, Text, VStack } from '@chakra-ui/react'
-import LoginForm from './login-form'
-import LoginMenuMessage from './login-menu-message'
-
-export default function LoginSection(){
-
-    return (
-        <VStack 
-        divider={<StackDivider borderColor='#FFFFFF' />}
-         spacing={4}
-         align="stretch"
-        >
-            <Container maxW='container.sm' />
-                
-            <Container maxW='container.sm' >
-                <Link href="/"><Text><ArrowBackIcon></ArrowBackIcon>Back</Text></Link>
-            </Container>
-
-            <Container minH="10em" maxW='container.sm' />
-            
-            <Container minH="3em" maxW='container.sm' >
-                <LoginMenuMessage />
-            </Container>
-            
-            <Container maxW='container.sm' >
-                <LoginForm /> 
-            </Container>
-
-        </VStack>
-    )
-}
\ No newline at end of file
diff --git a/src/features/login/components/sign-in-button.tsx b/src/features/login/components/sign-in-button.tsx
deleted file mode 100644
index d21cf12..0000000
--- a/src/features/login/components/sign-in-button.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Button, VStack } from '@chakra-ui/react'
-import { User, UserCredential } from 'firebase/auth';
-import { useState }  from 'react';
-import { useNavigate } from 'react-router-dom';
-import { AuthenticationRequestData } from '../../../data/auth/authRequestData';
-import { useAuth } from '../../../services/firebase/authProvider';
-
-interface LoginCredentials {
-    email: string,
-    password: string
-}
-
-export default function SignInButton(LoginCredentials: LoginCredentials){
-
-    const [isLoading, setLoading] = useState(false);
-    const {signIn} = useAuth();
-    const authRequest : AuthenticationRequestData = {
-        userName: ""
-    }
-    
-    const navigate = useNavigate();
-    const handleSignIn = async () => {
-        console.log(`sign in button clicked ${LoginCredentials.email}, ${LoginCredentials.password}`)
-        try{
-            setLoading(true);
-            let userCred: UserCredential = await signIn(LoginCredentials.email, LoginCredentials.password);
-            let user: User = userCred.user
-            let token: string = await user.getIdToken();
-            console.log(`Authentication success userid: ${user.uid}, ${token}`);
-            authRequest.userName = user.uid;
-            console.log('Routing to user dashboard page.');
-            navigate("/dashboard");
-        } catch(error: unknown) {
-            let errorMessage = 'error.unknown';
-            if (typeof error === 'string') {
-                errorMessage = error.toUpperCase()
-              } else if (error instanceof Error) {
-                errorMessage = error.message
-              }
-
-            console.log(`Authentication failed ${errorMessage}`);
-        }
-        setLoading(false);
-    }
-
-    return (
-        <VStack
-            spacing={4}
-            align='stretch'
-        >
-            <Button colorScheme='blue' isLoading={isLoading} onClick={handleSignIn}>Sign in</Button>
-        </VStack>
-    )
-
-}
diff --git a/src/features/login/login-page.tsx b/src/features/login/login-page.tsx
deleted file mode 100644
index f352b70..0000000
--- a/src/features/login/login-page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Box, Flex} from '@chakra-ui/react'
-
-import LoginDesign from "./components/login-design"
-import LoginSection from './components/login-section'
-import "./scss/login.scss"
-
-export default function LoginPage(){
-
-    return (
-        <Flex minH="100vH">
-            <Box flex='1'>
-                <LoginSection />
-            </Box>
-            <Box flex='1' className="rounded_edge_rectangle">
-                <LoginDesign/>
-            </Box>
-        </Flex>
-    )
-}
\ No newline at end of file
diff --git a/src/features/organisation-list/components/ViewToggle.tsx b/src/features/organisation-list/components/ViewToggle.tsx
deleted file mode 100644
index 8d29e23..0000000
--- a/src/features/organisation-list/components/ViewToggle.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { EViewOption } from '..';
-import { Text } from "@chakra-ui/react";
-import { ReactComponent as ViewCardActive } from '../../../assets/icons/viewCardActive.svg'
-import { ReactComponent as ViewCardInactive } from '../../../assets/icons/viewCardInactive.svg'
-import { ReactComponent as ViewListActive } from '../../../assets/icons/viewListActive.svg'
-import { ReactComponent as ViewListInactive } from '../../../assets/icons/viewListInactive.svg'
-
-interface IViewToggle {
-    onChange: (option: EViewOption) => void;
-    viewOption: EViewOption;
-}
-
-const ViewToggle: React.FC<IViewToggle> = ({onChange, viewOption}) => {
-    return (
-        <div style={{alignSelf: 'end', display: 'flex', flexDirection: 'row'}}>
-          <div onClick={() => onChange(EViewOption.Card)} style={{display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginRight: 5}}>
-            {viewOption === EViewOption.Card ? <ViewCardActive/> : <ViewCardInactive/>}
-            <Text
-              marginLeft={2}
-              style={viewOption === EViewOption.Card ? {
-                color: "#3959FF",
-                fontWeight: 'bold',
-              }
-              : {
-                color: "#CBCBCB",
-              }}
-            >
-              Card View
-            </Text>
-          </div>
-          <div style={{color: '#CBCBCB'}}>
-            l
-          </div>
-          <div onClick={() => onChange(EViewOption.List)} style={{display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginLeft: 5}}>
-            {viewOption === EViewOption.List ? <ViewListActive/> : <ViewListInactive/>}
-            <Text
-              marginLeft={2}
-              style={viewOption === EViewOption.List ? {
-                color: "#3959FF",
-                fontWeight: 'bold',
-              }
-              : {
-                color: "#CBCBCB",
-              }}
-            >
-              List View
-            </Text>
-          </div>
-        </div>
-    )
-}
-
-export default ViewToggle;
\ No newline at end of file
diff --git a/src/features/organisation-profile/components/services.tsx b/src/features/organisation-profile/components/services.tsx
deleted file mode 100644
index a917aeb..0000000
--- a/src/features/organisation-profile/components/services.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  Flex,
-  HStack,
-  Text,
-  VStack,
-  SimpleGrid,
-  StackDivider,
-} from "@chakra-ui/react";
-import { Component } from "react";
-import { Service } from "../../../data/enums/service.enum";
-import { SupportArea } from "../../../data/enums/support-area.enum";
-import { GetIcon } from "../../../utilities/icon-mappings";
-import "../scss/services.scss";
-import "../../page-style.scss";
-
-type ServicesProp = {
-  needs: SupportArea[]; // limit to 2
-  offerrings: Service[]; // limit to 4
-};
-
-function generateServiceView(collection: Service[] | SupportArea[]) {
-  return collection.map((item) => {
-    return (
-      <HStack key={item}>
-        {GetIcon(item)}
-        <Text className="serviceText">{item}</Text>
-      </HStack>
-    );
-  });
-}
-
-class Services extends Component {
-  private testServices: ServicesProp = {
-    needs: [SupportArea.PartnershipOpportunities, SupportArea.FundingSupport],
-    offerrings: [
-      Service.Counselling,
-      Service.SupportGroup,
-      Service.CorporateTraining,
-      Service.SpeakingEngagements,
-    ],
-  };
-
-  render() {
-    return (
-      <Flex className="servicesFlex maximise-width">
-        <Flex className="servicesContainer page-width page-padding">
-            <HStack
-              spacing="65px"
-              align="flex-start"
-              width="100%"
-              divider={<StackDivider border="2px solid #cbcbcb" />}
-            >
-              <VStack width="40%" align="flex-start" spacing="15px">
-                <Text>What we need</Text>
-                {generateServiceView(this.testServices.needs)}
-              </VStack>
-              <VStack align="flex-start" spacing="15px">
-                <Text>What we offer</Text>
-                <SimpleGrid columns={2} spacingX="24px" spacingY="15px">
-                  {generateServiceView(this.testServices.offerrings)}
-                </SimpleGrid>
-              </VStack>
-            </HStack>
-        </Flex>
-      </Flex>
-    );
-  }
-}
-
-export default Services;
diff --git a/src/features/organisation-profile/components/summary.tsx b/src/features/organisation-profile/components/summary.tsx
deleted file mode 100644
index c9511de..0000000
--- a/src/features/organisation-profile/components/summary.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import {
-  Flex,
-  Box,
-  HStack,
-  VStack,
-  Text,
-  Button,
-  Stack,
-} from "@chakra-ui/react";
-import { ReactComponent as ShieldCheckIcon } from "../../../assets/icons/checked.svg";
-import { ReactComponent as LinkIcon } from "../../../assets/icons/link.svg";
-import { ReactComponent as MailIcon } from "../../../assets/icons/mail.svg";
-import "../scss/summary.scss";
-import {
-  GetIconForIssue,
-  GetIconForSocials,
-} from "../../../utilities/icon-mappings";
-import { useEffect, useState } from "react";
-import { Organisation } from "../../../data/model/organisation";
-import { OrganisationSummary, getOrganisationSummary } from "../../../data/model/organisationSummary";
-
-const iframeStyle = {
-  width: "100%",
-  height: "100%",
-  position: "relative",
-  borderRadius: "25px",
-  paddingBottom: "56.25%",
-  overflow: "hidden",
-};
-
-const emailButtonStyle = {
-  backgroundColor: "#FFFFFF",
-  borderRadius: 4,
-  height: 12,
-  fontSize: 14,
-  "&:hover": {
-    bg: "#dddfe2",
-    border: "1px solid #192873",
-  },
-};
-
-const websiteButtonStyle = {
-  backgroundColor: "#192873",
-  borderRadius: 4,
-  height: 12,
-  color: "#FFFFFF",
-  "&:hover": {
-    bg: "#dddfe2",
-    color: "black",
-    border: "1px solid #192873",
-  },
-};
-
-// TODO add input of type SummaryProps
-const Summary: React.FC<{ org : Organisation }> = ({ org }) => {
-
-  const [orgSummary, setOrgSummary] = useState<OrganisationSummary>();
-
-  // Load organisation summary details.
-  useEffect(() => {
-    getOrganisationSummary(org.id).then((orgSummary) => setOrgSummary(orgSummary));
-  }, []);
-
-  // dynamically generate social icons based on organisation data
-  const getSocialIconsView = (summary : OrganisationSummary) => summary.socials.map((item, index) => {
-    return (
-      <Box key={index}>
-        <a href={item.url}>{GetIconForSocials(item.socialType)}</a>
-      </Box>
-    );
-  });
-
-  return (
-    <Flex height="38vh">
-      <HStack w="100%" spacing="125px">
-        {/* Video Box */}
-        <Box w="50%">
-          <Box sx={iframeStyle}>
-            <iframe
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-              }}
-              src={orgSummary?.videoUrl}
-              title={org.name}
-              allow="web-share"
-            ></iframe>
-          </Box>
-        </Box>
-
-        {/* Organisation Summary Details Box */}
-        <Box w="50%">
-          <VStack spacing="30px">
-            {/* Organisation Name */}
-            <HStack justifyContent="flex start" className="title">
-              <Text>{org.name}</Text>
-              {org.verified && <ShieldCheckIcon />}
-            </HStack>
-
-            {/* Mental Health Issue*/}
-            <HStack className="mentalHealthIssueView" spacing="10px">
-              {GetIconForIssue(org.mainSpecialisation)}
-              <Text className="mentalHealthIssueText">
-                {org.mainSpecialisation}
-              </Text>
-            </HStack>
-
-            {/* Mission Statement */}
-            <Text className="missionText">{orgSummary?.mission}</Text> { /* TODO: Add mission statement to OrganisationSummary model. */ }
-
-            {/* Links */}
-            <Stack className="linksStyle" direction="row" spacing="10px">
-              <a href={orgSummary?.websiteUrl}>
-                <Button
-                  sx={websiteButtonStyle}
-                  flex={1}
-                  rightIcon={<LinkIcon />}
-                >
-                  Visit our website
-                </Button>
-              </a>
-
-              <a href={`mailto:${orgSummary?.websiteUrl}`}> { /* TODO: Add email to OrganisationSummary model. */ }
-                <Button
-                  rightIcon={<MailIcon />}
-                  sx={emailButtonStyle}
-                  flex={1}
-                  variant="outline"
-                >
-                  Reach out to us
-                </Button>
-              </a>
-            </Stack>
-
-            {/* Socials */}
-            <HStack>{orgSummary !== undefined ? getSocialIconsView(orgSummary) : ""}</HStack>
-          </VStack>
-        </Box>
-      </HStack>
-    </Flex>
-  );
-};
-
-export default Summary;
diff --git a/src/features/page-style.scss b/src/features/page-style.scss
deleted file mode 100644
index 0801cef..0000000
--- a/src/features/page-style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.page-width {
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-.page-padding {
-  padding-left: min(9vw, 120px);
-  padding-right: min(9vw, 120px);
-  width: 100%;
-}
-
-// override the standard max width for a page
-// and span total view port width
-.maximise-width {
-  width: 100vw;
-  position: relative;
-  left: calc(-50vw + 50%);
-}
diff --git a/src/features/firestore-mock/firestore-mock.tsx b/src/mocks/FirestoreMock.tsx
similarity index 74%
rename from src/features/firestore-mock/firestore-mock.tsx
rename to src/mocks/FirestoreMock.tsx
index 3e2653e..d37a7fc 100644
--- a/src/features/firestore-mock/firestore-mock.tsx
+++ b/src/mocks/FirestoreMock.tsx
@@ -1,35 +1,27 @@
-import { Box, Button, Heading, Spacer, VStack } from "@chakra-ui/react";
+import { Button, Heading, Spacer, VStack } from "@chakra-ui/react";
 import { doc, setDoc } from "firebase/firestore";
 import { Component } from "react";
 import {
   getOrganisationsForListingsPage,
-  Organisation,
   OrganisationListingQueryFilters,
-} from "../../data/model/organisation";
-import { db, storage } from "../../services/firebase/firebaseConfig";
-import { Collections, StorageDirectory } from "../../services/firebase/names";
-import { IPCStatus } from "../../data/enums/ipc-status.enum";
-import { testOrgs } from "./test-data/test-organisations";
-import {
-  listingsFolder,
-  profilesFolder,
-} from "../../services/firebase/storage";
+} from "../data/model/organisation";
+import { db, storage } from "../services/firebase/firebaseConfig";
+import { Collections, StorageDirectory } from "../services/firebase/names";
+import { IPCStatus } from "../data/enums/ipc-status.enum";
+import { testOrgs } from "./TestOrganisationsMock";
 import { getDownloadURL, ref, uploadBytes } from "@firebase/storage";
-import { createOrganisationSummary } from "../../data/model/organisationSummary";
-import { IProfileContent } from "../../data/model/organisationProfile/profileContent";
+import { createOrganisationSummary } from "../data/model/organisationSummary";
+import { createOrganisationProfileOurStory } from "../data/model/organisationProfile/organisationProfileOurStory";
+import { createOrganisationProfilePeopleSpotlight } from "../data/model/organisationProfile/organisationProfilePeopleSpotlight";
 import { faker } from "@faker-js/faker";
-import { createOrganisationProfileOurStory } from "../../data/model/organisationProfile/organisationProfileOurStory";
-import { createOrganisationProfilePeopleSpotlight } from "../../data/model/organisationProfile/organisationProfilePeopleSpotlight";
-
-import { QuillEditor } from "./quill-editor";
+import { QuillEditor } from "./QuillEditor";
+import { listingsFolder } from "../services/firebase/storage";
 
 class FirestoreMockPage extends Component {
-  orgs: Organisation[] = [];
-
   parseData = async () => {
     // parse json files into interfaces
-    for (let i = 0; i < testOrgs.length; i++) {
-      const orgData = testOrgs[i].org;
+    for (const element of testOrgs) {
+      const orgData = element.org;
       const orgName = orgData.name ?? "unknown";
       const orgId = `mock_${orgName.replace(/\s|\(|\)/g, "")}`;
 
@@ -47,12 +39,12 @@ class FirestoreMockPage extends Component {
         .catch((error) => console.log(error));
 
       // upload organisation summary doc
-      await createOrganisationSummary(orgId, testOrgs[i].summary)
+      await createOrganisationSummary(orgId, element.summary)
         .then(() => console.log(`summary succesfully added.`))
         .catch((error) => console.log(error));
 
       // download placeholder images from test data
-      for (const osData of testOrgs[i].ourStory) {
+      for (const osData of element.ourStory) {
         osData.imageUrl = await this.downloadImageAndAddToFirebaseStorage(
           osData.imageUrl,
           orgId,
@@ -61,12 +53,12 @@ class FirestoreMockPage extends Component {
       }
 
       // upload our story test doc
-      await createOrganisationProfileOurStory(orgId, testOrgs[i].ourStory)
+      await createOrganisationProfileOurStory(orgId, element.ourStory)
         .then(() => console.log(`our story succesfully added.`))
         .catch((error) => console.log(error));
 
       // download placeholder images from test data
-      for (const psData of testOrgs[i].peopleSpotlight) {
+      for (const psData of element.peopleSpotlight) {
         psData.photoUrl = await this.downloadImageAndAddToFirebaseStorage(
           psData.photoUrl,
           orgId,
@@ -77,7 +69,7 @@ class FirestoreMockPage extends Component {
       // upload people spotlight doc
       await createOrganisationProfilePeopleSpotlight(
         orgId,
-        testOrgs[i].peopleSpotlight
+        element.peopleSpotlight
       )
         .then(() => console.log(`people spotlight succesfully added.`))
         .catch((error) => console.log(error));
diff --git a/src/features/firestore-mock/test-data/initial-organisations.ts b/src/mocks/InitialOrganisationsMock.ts
similarity index 86%
rename from src/features/firestore-mock/test-data/initial-organisations.ts
rename to src/mocks/InitialOrganisationsMock.ts
index d02cd3e..8e694d7 100644
--- a/src/features/firestore-mock/test-data/initial-organisations.ts
+++ b/src/mocks/InitialOrganisationsMock.ts
@@ -1,14 +1,14 @@
-import { IPCStatus } from "../../../data/enums/ipc-status.enum";
-import { Service } from "../../../data/enums/service.enum";
-import { Specialisation } from "../../../data/enums/specialisation.enum";
-import { SupportArea } from "../../../data/enums/support-area.enum";
-import { VerificationStatus } from "../../../data/enums/verification-status.enum";
-import { IOrganisation } from "../../../data/model/organisation";
-import { IProfileContent } from "../../../data/model/organisationProfile/profileContent";
-import { IOrganisationSummary } from "../../../data/model/organisationSummary";
+import { IPCStatus } from "../data/enums/ipc-status.enum";
+import { Service } from "../data/enums/service.enum";
+import { Specialisation } from "../data/enums/specialisation.enum";
+import { SupportArea } from "../data/enums/support-area.enum";
+import { VerificationStatus } from "../data/enums/verification-status.enum";
+import { IOrganisation } from "../data/model/organisation";
+import { IProfileContent } from "../data/model/organisationProfile/profileContent";
+import { IOrganisationSummary } from "../data/model/organisationSummary";
 import { faker } from "@faker-js/faker";
-import { SocialType } from "../../../data/enums/social-type.enum";
-import { IPeopleSpotlight } from "../../../data/model/organisationProfile/organisationProfilePeopleSpotlight";
+import { SocialType } from "../data/enums/social-type.enum";
+import { IPeopleSpotlight } from "../data/model/organisationProfile/organisationProfilePeopleSpotlight";
 
 export const testOrg1: IOrganisation = {
   name: "Over The Rainbow (OTR)",
@@ -18,11 +18,11 @@ export const testOrg1: IOrganisation = {
   mainSupportArea: SupportArea.FundingSupport,
   services: [Service.Youth, Service.Workshops, Service.Counselling],
   description:
-  "Over-The-Rainbow (OTR) is the mental wellness initiative of the WholeTree Foundation, the not-for-profit family foundation of Yen-Lu & Yee Ling Chow, founded in loving memory of their son and only child Lawrance H. Chow who ended his own life at the age of 26 after suffering for many years from manic depression. OTR is a one-stop hub for youth mental wellness.",
-//   Our mission is to transform mental wellness for the 21st century:
-//   Propel mental wellness to the top of life’s priorities;
-//   Create a community based on the timeless wisdoms of love, compassion, truth, beauty, harmony, generosity, joy and service;
-//   Empower every young person on his/her mental wellness journey via holistic self care and a supportive community - to overcome life challenges, live life with purpose and passion, and fulfil their life potential as human beings.",
+    "Over-The-Rainbow (OTR) is the mental wellness initiative of the WholeTree Foundation, the not-for-profit family foundation of Yen-Lu & Yee Ling Chow, founded in loving memory of their son and only child Lawrance H. Chow who ended his own life at the age of 26 after suffering for many years from manic depression. OTR is a one-stop hub for youth mental wellness.",
+  //   Our mission is to transform mental wellness for the 21st century:
+  //   Propel mental wellness to the top of life’s priorities;
+  //   Create a community based on the timeless wisdoms of love, compassion, truth, beauty, harmony, generosity, joy and service;
+  //   Empower every young person on his/her mental wellness journey via holistic self care and a supportive community - to overcome life challenges, live life with purpose and passion, and fulfil their life potential as human beings.",
   cardImageUrl: "https://picsum.photos/278/425",
 };
 
@@ -40,7 +40,7 @@ export const testOrg1: IOrganisation = {
 //   },
 
 export const testOrg1Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: "https://overtherainbow.sg/",
   donationUrl: "https://give.asia/campaign/you_are_not_alone",
 };
@@ -156,7 +156,7 @@ export const testOrg2: IOrganisation = {
 };
 
 export const testOrg2Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
 };
@@ -272,7 +272,7 @@ export const testOrg3: IOrganisation = {
 };
 
 export const testOrg3Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
 };
@@ -388,7 +388,7 @@ export const testOrg4: IOrganisation = {
 };
 
 export const testOrg4Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
 };
diff --git a/src/features/firestore-mock/quill-editor.tsx b/src/mocks/QuillEditor.tsx
similarity index 100%
rename from src/features/firestore-mock/quill-editor.tsx
rename to src/mocks/QuillEditor.tsx
diff --git a/src/features/firestore-mock/test-data/test-organisations.ts b/src/mocks/TestOrganisationsMock.ts
similarity index 92%
rename from src/features/firestore-mock/test-data/test-organisations.ts
rename to src/mocks/TestOrganisationsMock.ts
index 709ad52..d962b8d 100644
--- a/src/features/firestore-mock/test-data/test-organisations.ts
+++ b/src/mocks/TestOrganisationsMock.ts
@@ -1,14 +1,14 @@
-import { IPCStatus } from "../../../data/enums/ipc-status.enum";
-import { Service } from "../../../data/enums/service.enum";
-import { Specialisation } from "../../../data/enums/specialisation.enum";
-import { SupportArea } from "../../../data/enums/support-area.enum";
-import { VerificationStatus } from "../../../data/enums/verification-status.enum";
-import { IOrganisation } from "../../../data/model/organisation";
-import { IProfileContent } from "../../../data/model/organisationProfile/profileContent";
-import { IOrganisationSummary } from "../../../data/model/organisationSummary";
+import { IPCStatus } from "../data/enums/ipc-status.enum";
+import { Service } from "../data/enums/service.enum";
+import { Specialisation } from "../data/enums/specialisation.enum";
+import { SupportArea } from "../data/enums/support-area.enum";
+import { VerificationStatus } from "../data/enums/verification-status.enum";
+import { IOrganisation } from "../data/model/organisation";
+import { IProfileContent } from "../data/model/organisationProfile/profileContent";
+import { IOrganisationSummary } from "../data/model/organisationSummary";
 import { faker } from "@faker-js/faker";
-import { SocialType } from "../../../data/enums/social-type.enum";
-import { IPeopleSpotlight } from "../../../data/model/organisationProfile/organisationProfilePeopleSpotlight";
+import { SocialType } from "../data/enums/social-type.enum";
+import { IPeopleSpotlight } from "../data/model/organisationProfile/organisationProfilePeopleSpotlight";
 
 export const testOrg1: IOrganisation = {
   name: "Over The Rainbow (OTR)",
@@ -23,17 +23,18 @@ export const testOrg1: IOrganisation = {
 };
 
 export const testOrg1Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
-  mission: "Advocacy group that hopes to empower youth with practical, hands on and holistic self-care strategies.",
+  mission:
+    "Advocacy group that hopes to empower youth with practical, hands on and holistic self-care strategies.",
   email: faker.internet.email(),
   socials: [
     {
       socialType: SocialType.Youtube,
       url: "https://www.youtube.com/",
-    }
-  ]
+    },
+  ],
 };
 
 export const testOrg1OurStory: IProfileContent[] = [
@@ -147,7 +148,7 @@ export const testOrg2: IOrganisation = {
 };
 
 export const testOrg2Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
   mission:
@@ -174,7 +175,7 @@ export const testOrg2Summary: IOrganisationSummary = {
       socialType: SocialType.TikTok,
       url: "https://www.tiktok.com/",
     },
-  ]
+  ],
 };
 
 export const testOrg2OurStory: IProfileContent[] = [
@@ -288,10 +289,11 @@ export const testOrg3: IOrganisation = {
 };
 
 export const testOrg3Summary: IOrganisationSummary = {
-  videoUrl: "https://youtu.be/oznr-1-poSU",
+  videoUrl: "https://www.youtube.com/embed/oznr-1-poSU?si=ejpWQEbFXUFHD4xD",
   websiteUrl: faker.internet.url(),
   donationUrl: faker.internet.url(),
-  mission: "Training provider and podcast commited to cultivating resilience and positive mental wellness.",
+  mission:
+    "Training provider and podcast commited to cultivating resilience and positive mental wellness.",
   email: faker.internet.email(),
   socials: [
     {
@@ -314,7 +316,7 @@ export const testOrg3Summary: IOrganisationSummary = {
       socialType: SocialType.TikTok,
       url: "https://www.tiktok.com/",
     },
-  ]
+  ],
 };
 
 export const testOrg3OurStory: IProfileContent[] = [
@@ -455,7 +457,7 @@ export const testOrg4Summary: IOrganisationSummary = {
       socialType: SocialType.TikTok,
       url: "https://www.tiktok.com/",
     },
-  ]
+  ],
 };
 
 export const testOrg4OurStory: IProfileContent[] = [
diff --git a/src/mocks/UsersMock.ts b/src/mocks/UsersMock.ts
new file mode 100644
index 0000000..076c405
--- /dev/null
+++ b/src/mocks/UsersMock.ts
@@ -0,0 +1,13 @@
+// user ids are auto generated by firebase authentication, unable to provide custom ids for testing
+export const UserMock = () => [
+  {
+    Id: "mxlDmEYBg6g1Xgy7kDsLZBdcFwv1",
+    role: 1,
+    orgRef: "/organisations/test1",
+  },
+  {
+    Id: "UoOjhZsOlJMVj3bjS5NTVS2AMIk1",
+    Name: "Test2 User",
+    orgRef: "/organisations/test2",
+  },
+];
diff --git a/src/pages/Home/HeroSection.tsx b/src/pages/Home/HeroSection.tsx
new file mode 100644
index 0000000..92baf97
--- /dev/null
+++ b/src/pages/Home/HeroSection.tsx
@@ -0,0 +1,74 @@
+import { Flex, Stack, Box, Image, Heading } from "@chakra-ui/react";
+import NavigationButton from "../../components/NavigationButton";
+
+const HeroSection = () => {
+  return (
+    <Box className="page-width page-padding" minHeight="50vh">
+      <Flex
+        align="center"
+        justify={{ base: "center", md: "space-around", xl: "space-between" }}
+        direction={{ base: "column-reverse", md: "row" }}
+        wrap="nowrap"
+        mb={16}
+      >
+        <Stack
+          spacing={4}
+          paddingTop="48px"
+          w={{ base: "100%", md: "60%" }}
+          align={["center", "center", "flex-start", "flex-start"]}
+        >
+          <Heading
+            as="h1"
+            fontSize={["md", "lg", "xl", "80px"]}
+            fontWeight="bold"
+            color="primary.800"
+            textAlign={["center", "center", "left", "left"]}
+          >
+            Mental Health resources should reach everyone.
+          </Heading>
+          <Heading
+            as="h2"
+            size="md"
+            color="primary.800"
+            opacity="0.8"
+            fontWeight="normal"
+            lineHeight={1.5}
+            textAlign={["center", "center", "left", "left"]}
+            paddingBottom="20px"
+          >
+            Amplify the impact of your mental health initiatives through
+            collaboration.
+          </Heading>
+          <NavigationButton
+            size="md"
+            height="48px"
+            width="300px"
+            borderRadius="18px"
+            backgroundColor="#192873"
+            navigationLink="/organisations"
+            buttonText="View Organisations"
+            _hover={{ bg: "#ebedf0" }}
+            _active={{
+              bg: "#dddfe2",
+              transform: "scale(0.98)",
+              borderColor: "#bec3c9",
+            }}
+            _focus={{
+              boxShadow:
+                "0 0 1px 2px rgba(255, 255, 255, .5), 0 10px 10px rgba(0, 0, 0, .15)",
+            }}
+          />
+        </Stack>
+        <Box
+          paddingTop="300px"
+          w={{ base: "80%", sm: "60%", md: "50%" }}
+          mb={{ base: 12, md: 0 }}
+        >
+          <Image src={require("../../assets/images/3dcolleagues1.png")} />
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default HeroSection;
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
new file mode 100644
index 0000000..604891a
--- /dev/null
+++ b/src/pages/Home/Home.tsx
@@ -0,0 +1,149 @@
+import { VStack } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+import HeroSection from "./HeroSection";
+import SupportSection from "./SupportSection";
+import TogetherSection from "./TogetherSection";
+import "../style.scss";
+
+const Home: React.FC = () => {
+  const navigate = useNavigate();
+
+  // const footerRef: React.RefObject<HTMLDivElement> =
+  //   useRef<HTMLDivElement>(null);
+
+  return (
+    <VStack align="stretch" spacing="0px">
+      <HeroSection />
+      <SupportSection />
+      <TogetherSection />
+      {/* Hidden elements for alpha version */}
+      {/* <Animate.FadeUp>
+          <Box pb="16">
+            <Center style={styles.headerLarge}>
+              Driving Outcomes that Matter to You
+            </Center>
+            <Center style={{ alignItems: "start", marginBottom: 72 }}>
+              <Image src={require("../../assets/images/NPMHOTestimonial1.png")} />
+              <Image src={require("../../assets/images/NPMHOTestimonial2.png")} />
+              <Image src={require("../../assets/images/NPMHOTestimonial3.png")} />
+            </Center>
+            <div style={{ alignSelf: "center" }}>
+              <Center>
+                <Box sx={styles.blueButton}>Read Testimonials</Box>
+              </Center>
+            </div>
+          </Box>
+        </Animate.FadeUp> */}
+      {/* <Animate.FadeUp>
+          <Box>
+            <Center style={styles.headerSmall}>Organisation Partners</Center>
+            <Center>
+              <HStack w="100%" style={styles.imageContainer}>
+                <Image
+                  w="15%"
+                  src={require("../../assets/images/Partner1.png")}
+                />
+                <Image
+                  w="15%"
+                  src={require("../../assets/images/Partner2.png")}
+                />
+                <Image
+                  w="15%"
+                  src={require("../../assets/images/Partner3.png")}
+                />
+                <Image
+                  w="15%"
+                  src={require("../../assets/images/Partner4.png")}
+                />
+                <Image
+                  w="15%"
+                  src={require("../../assets/images/Partner5.png")}
+                />
+              </HStack>
+            </Center>
+          </Box>
+        </Animate.FadeUp> */}
+      {/* <Animate.FadeUp>
+          <Box pb="16">
+            <Center style={styles.headerLarge}>
+              The Latest on Mental Health
+            </Center>
+            <HStack style={styles.imageContainer}>
+              <Image
+                src={require("../../assets/images/NPMHOStory1.png")}
+                style={{ borderRadius: 12 }}
+              />
+              <Image
+                src={require("../../assets/images/NPMHOStory2.png")}
+                style={{ borderRadius: 12 }}
+              />
+              <Image
+                src={require("../../assets/images/NPMHOStory3.png")}
+                style={{ borderRadius: 12 }}
+              />
+            </HStack>
+            <div style={{ alignSelf: "center" }}>
+              <Center>
+                <Box marginTop="12" sx={styles.blueButton}>
+                  Explore our Blog
+                </Box>
+              </Center>
+            </div>
+          </Box>
+        </Animate.FadeUp> */}
+      {/* <Animate.FadeUp>
+          <Box
+            style={{ paddingTop: 96, paddingLeft: 120 }}
+            bgGradient="linear-gradient(270deg, #3959FF 2.22%, #3959FF 2.23%, rgba(57, 89, 255, 0.618) 30.5%, rgba(255, 255, 255, 0) 99.17%);"
+          >
+            <Box className="page-width page-padding" pb="16">
+              <HStack w="100%">
+                <VStack w="65%">
+                  <Heading
+                    style={{
+                      fontSize: 80,
+                      fontWeight: 700,
+                      paddingBottom: 24,
+                      alignSelf: "center",
+                    }}
+                  >
+                    Lead the Charge for Mental Wellness
+                  </Heading>
+                  <Text
+                    style={{
+                      fontSize: 32,
+                      fontWeight: 400,
+                      paddingTop: 16,
+                      paddingBottom: 48,
+                    }}
+                  >
+                    Advance mental health support in Singapore by collaborating
+                    with non-profits making a difference.
+                  </Text>
+                  <HStack>
+                    <Button
+                      sx={styles.blueButton}
+                      // TODO registerPage path onClick={this.navigate()}
+                    >
+                      Join Mendisphere
+                    </Button>
+                    <Button
+                      sx={styles.whiteButton2}
+                      onClick={() => navigate("/organisations")}
+                    >
+                      For Corporates
+                    </Button>
+                  </HStack>
+                </VStack>
+                <Box>
+                  <Image src={require("../../assets/images/homeIcon4.png")} />
+                </Box>
+              </HStack>
+            </Box>
+          </Box>
+        </Animate.FadeUp> */}
+    </VStack>
+  );
+};
+
+export default Home;
diff --git a/src/pages/Home/SupportSection.tsx b/src/pages/Home/SupportSection.tsx
new file mode 100644
index 0000000..d641a55
--- /dev/null
+++ b/src/pages/Home/SupportSection.tsx
@@ -0,0 +1,126 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Text,
+  SimpleGrid,
+  Button,
+  Heading,
+  Image,
+  AspectRatio,
+  useMediaQuery,
+  Box,
+  Center,
+  Flex,
+} from "@chakra-ui/react";
+
+const SupportSection = () => {
+  const [isLargerThan768] = useMediaQuery("(min-width: 768px)");
+
+  const customHeadingProps = {
+    paddingTop: "10px",
+    fontWeight: 400,
+    fontSize: "xl",
+    textAlign: "center" as const,
+  };
+
+  const customButtonProps = {
+    width: "100%",
+    backgroundColor: "#192873",
+    color: "#ffffff",
+    "&:hover": {
+      bg: "rgba(224, 229, 255, 0)",
+      color: "black",
+      border: "1px solid #192873",
+    },
+  };
+
+  return (
+    <Flex
+      bgGradient="linear-gradient(0deg, #E0E5FF 43.75%, rgba(224, 229, 255, 0) 100%);"
+    >
+      <Box className="page-width page-padding" paddingBottom="100px">
+        <Heading
+          m="4"
+          fontSize={["lg", "2xl", "4xl", "6xl"]}
+          textAlign="center"
+          fontWeight="bold"
+          paddingBottom="100px"
+        >
+          Support your way
+        </Heading>
+        <SimpleGrid
+          templateColumns={isLargerThan768 ? "repeat(3, 1fr)" : "1fr"}
+          gap={4}
+        >
+          <Card boxShadow="none">
+            <CardHeader>
+              <Center>
+                <Image
+                  height="185px"
+                  src={require("../../assets/images/contribute.png")}
+                />
+              </Center>
+              <Heading style={customHeadingProps}>Contribute</Heading>
+            </CardHeader>
+            <CardBody>
+              <Text>
+                Browse the wide array of non-profits furthering mental health
+                outcomes, understand their story and impact, and contribute to
+                those that speak to you.
+              </Text>
+            </CardBody>
+            {/* <CardFooter>
+              <Button sx={customButtonProps}>Learn More</Button>
+            </CardFooter> */}
+          </Card>
+          <Card boxShadow="none">
+            <CardHeader>
+              <Center>
+                <Image
+                  height="185px"
+                  src={require("../../assets/images/collaborate.png")}
+                />
+              </Center>
+              <Heading style={customHeadingProps}> Collaborate</Heading>
+            </CardHeader>
+            <CardBody>
+              <Text>
+                Workshops? Trainings? Talks? Explore opportunities to partner
+                with non-profits and leverage their vast expertise in the mental
+                health space.
+              </Text>
+            </CardBody>
+            {/* <CardFooter>
+              <Button sx={customButtonProps}>Learn More</Button>
+            </CardFooter> */}
+          </Card>
+          <Card boxShadow="none">
+            <Center>
+              <Image
+                height="185px"
+                width="auto"
+                src={require("../../assets/images/volunteer.png")}
+              />
+            </Center>
+            <CardHeader>
+              <Heading style={customHeadingProps}>Volunteer</Heading>
+            </CardHeader>
+            <CardBody>
+              <Text>
+                Make your CSR efforts count by volunteering with non-profits who
+                need support in achieving their goals.
+              </Text>
+            </CardBody>
+            {/* <CardFooter>
+              <Button sx={customButtonProps}>Learn More</Button>
+            </CardFooter> */}
+          </Card>
+        </SimpleGrid>
+      </Box>
+    </Flex>
+  );
+};
+
+export default SupportSection;
diff --git a/src/pages/Home/TogetherSection.tsx b/src/pages/Home/TogetherSection.tsx
new file mode 100644
index 0000000..eeeb5fc
--- /dev/null
+++ b/src/pages/Home/TogetherSection.tsx
@@ -0,0 +1,53 @@
+import {
+    Box,
+    Text,
+    Center,
+    VStack,
+    HStack,
+  } from "@chakra-ui/react";
+  import { Animate } from "../../components/ScrollAnimation";
+  import { ReactComponent as HomeIcon3 } from "../../assets/icons/homeIcon3.svg";
+  import { styles } from "./styles";
+  import "../style.scss";
+
+const TogetherSection = () => {
+  return (
+    <Animate.FadeUp>
+      <Box style={styles.box1}>
+        <Box className="page-width page-padding">
+          <HStack spacing="52px">
+            <HomeIcon3 />
+            <VStack width="70%">
+              <Text
+                style={{
+                  fontSize: 70,
+                  color: "#F5F5F5",
+                  fontWeight: 700,
+                }}
+              >
+                Together, we can go further.
+              </Text>
+              <Text
+                style={{
+                  fontSize: 32,
+                  color: "#F5F5F5",
+                  fontWeight: 400,
+                  paddingTop: 16,
+                }}
+              >
+                Mendisphere connects non-profits focusing on mental health with
+                the support they need to maximise their impact and reach more
+                people.
+              </Text>
+              <Center>
+                {/* <Button sx={styles.whiteButton1}>Our Story</Button> */}
+              </Center>
+            </VStack>
+          </HStack>
+        </Box>
+      </Box>
+    </Animate.FadeUp>
+  );
+};
+
+export default TogetherSection;
diff --git a/src/pages/Home/index.ts b/src/pages/Home/index.ts
new file mode 100644
index 0000000..ffa7931
--- /dev/null
+++ b/src/pages/Home/index.ts
@@ -0,0 +1 @@
+export { default } from "./Home";
diff --git a/src/features/home/styles.ts b/src/pages/Home/styles.ts
similarity index 100%
rename from src/features/home/styles.ts
rename to src/pages/Home/styles.ts
diff --git a/src/pages/Login/EmailCredential.tsx b/src/pages/Login/EmailCredential.tsx
new file mode 100644
index 0000000..62fdcac
--- /dev/null
+++ b/src/pages/Login/EmailCredential.tsx
@@ -0,0 +1,60 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
+import React from "react";
+
+export default function EmailCredential() {
+  const [show, setShow] = React.useState(false);
+  const [noText, setNoText] = React.useState(true);
+
+  const handleClick = () => setShow(!show);
+
+  const handleChange = (event: any) => {
+    if (event.target.value.length > 0) {
+      setNoText(false);
+    } else {
+      setNoText(true);
+    }
+  };
+
+  return (
+    <Flex>
+      <VStack spacing={4} align="stretch" minWidth="100%">
+        <Box>
+          <Text>Email</Text>
+          <Input placeholder="Enter your email" />
+        </Box>
+        <Box>
+          <Text>Password</Text>
+          <InputGroup size="md">
+            <Input
+              pr="4.5rem"
+              type={show ? "text" : "password"}
+              placeholder="Enter password"
+              onChange={handleChange}
+            ></Input>
+
+            <InputRightElement width="4.5rem">
+              <Button
+                h="1.75rem"
+                size="sm"
+                onClick={handleClick}
+                disabled={noText}
+              >
+                {show ? <ViewOffIcon /> : <ViewIcon />}
+              </Button>
+            </InputRightElement>
+          </InputGroup>
+        </Box>
+      </VStack>
+    </Flex>
+  );
+}
diff --git a/src/pages/Login/ForgotPassword.tsx b/src/pages/Login/ForgotPassword.tsx
new file mode 100644
index 0000000..bd3a75f
--- /dev/null
+++ b/src/pages/Login/ForgotPassword.tsx
@@ -0,0 +1,17 @@
+import { Box, Flex, Link, Spacer, Text } from "@chakra-ui/react";
+
+export default function ForgotPassword() {
+  return (
+    <Flex>
+      <Box p="1"></Box>
+      <Spacer />
+      <Box p="1">
+        <Link href="/">
+          <Text color="blue" as="b">
+            Forgot password
+          </Text>
+        </Link>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/src/pages/Login/GoogleSignInButton.tsx b/src/pages/Login/GoogleSignInButton.tsx
new file mode 100644
index 0000000..6557cf9
--- /dev/null
+++ b/src/pages/Login/GoogleSignInButton.tsx
@@ -0,0 +1,52 @@
+import {
+  GoogleOAuthProvider,
+  GoogleLogin,
+  CredentialResponse,
+} from "@react-oauth/google";
+import { VStack } from "@chakra-ui/react";
+
+function errorHandler(error: string): void {
+  console.error(error);
+}
+
+function successHandler(response: CredentialResponse): void {
+  const clientId = response.clientId;
+  const token = response.credential;
+
+  console.log("Received response from google.");
+  console.log(`Client ID: ${clientId}`);
+  console.log(`Token: ${token}`);
+
+  // var authRequest : AuthenticationRequestData = {
+  //     userName: token ?? ""
+  // }
+
+  // try {
+  //     AuthenticationService.authenticate(authRequest)
+  //     .then((response: any) =>{
+  //         console.log(response.data)
+  //     })
+  // } catch (error) {
+  //     console.log("Authentication Failed.")
+  // }
+
+  console.log("Login success!");
+}
+
+export default function GoogleSignInButton() {
+  const clientConfig = {
+    client_id:
+      "968904403503-qvq5oafbv3ctjtqtf7liqrq04lfou8h4.apps.googleusercontent.com",
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <GoogleOAuthProvider clientId={clientConfig["client_id"]}>
+        <GoogleLogin
+          onSuccess={(response) => successHandler(response)}
+          onError={() => errorHandler}
+        />
+      </GoogleOAuthProvider>
+    </VStack>
+  );
+}
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
new file mode 100644
index 0000000..a37af83
--- /dev/null
+++ b/src/pages/Login/Login.tsx
@@ -0,0 +1,19 @@
+import { Box, Flex } from "@chakra-ui/react";
+import LoginDesign from "./LoginDesign";
+import LoginSection from "./LoginSection";
+import "./style.scss";
+
+const Login = () => {
+  return (
+    <Flex minH="100vH">
+      <Box flex="1">
+        <LoginSection />
+      </Box>
+      <Box flex="1" className="rounded_edge_rectangle">
+        <LoginDesign />
+      </Box>
+    </Flex>
+  );
+};
+
+export default Login;
diff --git a/src/features/login/components/login-design.tsx b/src/pages/Login/LoginDesign.tsx
similarity index 100%
rename from src/features/login/components/login-design.tsx
rename to src/pages/Login/LoginDesign.tsx
diff --git a/src/features/login/components/login-form.tsx b/src/pages/Login/LoginForm.tsx
similarity index 90%
rename from src/features/login/components/login-form.tsx
rename to src/pages/Login/LoginForm.tsx
index a62a2e3..0776385 100644
--- a/src/features/login/components/login-form.tsx
+++ b/src/pages/Login/LoginForm.tsx
@@ -9,10 +9,10 @@ import {
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { useState } from "react";
-import ForgotPassword from "./forgot-password";
-import Signup from "./sign-up";
-import GoogleSignInButton from "./google-sign-in-button";
-import SignInButton from "./sign-in-button";
+import ForgotPassword from "./ForgotPassword";
+import Signup from "./SignUp";
+import GoogleSignInButton from "./GoogleSignInButton";
+import SignInButton from "./SignInButton";
 
 export default function LoginForm() {
   const [show, setShow] = useState(false);
diff --git a/src/pages/Login/LoginMenuMessage.tsx b/src/pages/Login/LoginMenuMessage.tsx
new file mode 100644
index 0000000..e7b303a
--- /dev/null
+++ b/src/pages/Login/LoginMenuMessage.tsx
@@ -0,0 +1,18 @@
+import { Box, Flex, VStack, Text } from "@chakra-ui/react";
+
+export default function LoginMenuMessage() {
+  return (
+    <Flex>
+      <VStack spacing={4} align="stretch">
+        <Box>
+          <Text fontSize="4xl">Welcome back 👋🏻</Text>
+        </Box>
+        <Box>
+          <Text fontSize="" as="b">
+            Connect with our community and get access to resources.
+          </Text>
+        </Box>
+      </VStack>
+    </Flex>
+  );
+}
diff --git a/src/features/registration/components/registration-section.tsx b/src/pages/Login/LoginSection.tsx
similarity index 50%
rename from src/features/registration/components/registration-section.tsx
rename to src/pages/Login/LoginSection.tsx
index d741242..dd29178 100644
--- a/src/features/registration/components/registration-section.tsx
+++ b/src/pages/Login/LoginSection.tsx
@@ -1,12 +1,12 @@
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import { Container, Link, StackDivider, Text, VStack } from "@chakra-ui/react";
-import RegistrationForm from "./registration-form";
-import RegistrationMenuMessage from "./registration-menu-message";
+import LoginForm from "./LoginForm";
+import LoginMenuMessage from "./LoginMenuMessage";
 
-export default function RegistrationSection() {
+export default function LoginSection() {
   return (
     <VStack
-      divider={<StackDivider borderColor="#fff" />}
+      divider={<StackDivider borderColor="#FFFFFF" />}
       spacing={4}
       align="stretch"
     >
@@ -14,23 +14,19 @@ export default function RegistrationSection() {
 
       <Container maxW="container.sm">
         <Link href="/">
-          <Text>
-            <ArrowBackIcon></ArrowBackIcon>Back
-          </Text>
+          <ArrowBackIcon /> Back
         </Link>
       </Container>
 
-      <Container minH="2em" maxW="container.sm" />
+      <Container minH="10em" maxW="container.sm" />
 
       <Container minH="3em" maxW="container.sm">
-        <RegistrationMenuMessage />
+        <LoginMenuMessage />
       </Container>
 
       <Container maxW="container.sm">
-        <RegistrationForm />
+        <LoginForm />
       </Container>
-
-      <Container minH="2em" maxW="container.sm" />
     </VStack>
   );
 }
diff --git a/src/pages/Login/SignInButton.tsx b/src/pages/Login/SignInButton.tsx
new file mode 100644
index 0000000..da2d516
--- /dev/null
+++ b/src/pages/Login/SignInButton.tsx
@@ -0,0 +1,57 @@
+import { Button, VStack } from "@chakra-ui/react";
+import { User, UserCredential } from "firebase/auth";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AuthenticationRequestData } from "../../data/auth/authRequestData";
+import { useAuth } from "../../services/firebase/authProvider";
+
+interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export default function SignInButton(LoginCredentials: LoginCredentials) {
+  const [isLoading, setLoading] = useState(false);
+  const { signIn } = useAuth();
+  const authRequest: AuthenticationRequestData = {
+    userName: "",
+  };
+
+  const navigate = useNavigate();
+  const handleSignIn = async () => {
+    console.log(
+      `sign in button clicked ${LoginCredentials.email}, ${LoginCredentials.password}`
+    );
+    try {
+      setLoading(true);
+      let userCred: UserCredential = await signIn(
+        LoginCredentials.email,
+        LoginCredentials.password
+      );
+      let user: User = userCred.user;
+      let token: string = await user.getIdToken();
+      console.log(`Authentication success userid: ${user.uid}, ${token}`);
+      authRequest.userName = user.uid;
+      console.log("Routing to user dashboard page.");
+      navigate("/dashboard");
+    } catch (error: unknown) {
+      let errorMessage = "error.unknown";
+      if (typeof error === "string") {
+        errorMessage = error.toUpperCase();
+      } else if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+
+      console.log(`Authentication failed ${errorMessage}`);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <Button colorScheme="blue" isLoading={isLoading} onClick={handleSignIn}>
+        Sign in
+      </Button>
+    </VStack>
+  );
+}
diff --git a/src/features/login/components/sign-up.tsx b/src/pages/Login/SignUp.tsx
similarity index 94%
rename from src/features/login/components/sign-up.tsx
rename to src/pages/Login/SignUp.tsx
index fd94924..00f27f3 100644
--- a/src/features/login/components/sign-up.tsx
+++ b/src/pages/Login/SignUp.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Link, Spacer, Text } from "@chakra-ui/react";
 
 export default function Signup() {
   return (
-    <Flex>
+    <Flex marginTop={6}>
       <Spacer />
       <Box p="1">
         <Text color="grey" as="b">
diff --git a/src/pages/Login/index.ts b/src/pages/Login/index.ts
new file mode 100644
index 0000000..cd3a8ca
--- /dev/null
+++ b/src/pages/Login/index.ts
@@ -0,0 +1 @@
+export { default } from "./Login";
diff --git a/src/features/login/scss/login.scss b/src/pages/Login/style.scss
similarity index 98%
rename from src/features/login/scss/login.scss
rename to src/pages/Login/style.scss
index 800273a..b8b5695 100644
--- a/src/features/login/scss/login.scss
+++ b/src/pages/Login/style.scss
@@ -1,5 +1,3 @@
-
-
 .rounded_edge_rectangle{
     background: linear-gradient(180deg, #F0F2FF 0%, #A3B2FF 100%);
     opacity: 0.96;
diff --git a/src/features/organisation-list/components/CardView.tsx b/src/pages/OrganisationList/CardView.tsx
similarity index 83%
rename from src/features/organisation-list/components/CardView.tsx
rename to src/pages/OrganisationList/CardView.tsx
index d66d5e9..9f73f4c 100644
--- a/src/features/organisation-list/components/CardView.tsx
+++ b/src/pages/OrganisationList/CardView.tsx
@@ -1,7 +1,7 @@
 import { Grid, GridItem, LinkBox, LinkOverlay } from "@chakra-ui/react";
-import { Organisation } from "../../../data/model/organisation";
-import { buildOrgProfilePath } from "../../../paths";
-import OrgCard from "./OrgCard";
+import { Organisation } from "../../data/model/organisation";
+import { buildOrgProfilePath } from "../../routing/Paths";
+import OrgCard from "./OrganisationCard";
 
 const CardView: React.FC<{ organisationList: Organisation[] }> = ({
   organisationList,
diff --git a/src/features/organisation-list/const.ts b/src/pages/OrganisationList/Const.ts
similarity index 100%
rename from src/features/organisation-list/const.ts
rename to src/pages/OrganisationList/Const.ts
diff --git a/src/features/organisation-list/components/ListView.tsx b/src/pages/OrganisationList/ListView.tsx
similarity index 74%
rename from src/features/organisation-list/components/ListView.tsx
rename to src/pages/OrganisationList/ListView.tsx
index 7c6739e..df20447 100644
--- a/src/features/organisation-list/components/ListView.tsx
+++ b/src/pages/OrganisationList/ListView.tsx
@@ -9,14 +9,14 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
-import { ReactComponent as Approved } from "../../../assets/icons/statusApproved.svg";
-import { ReactComponent as NotApproved } from "../../../assets/icons/statusNotApproved.svg";
-import { ReactComponent as Pending } from "../../../assets/icons/statusPending.svg";
-import { ReactComponent as Verified } from "../../../assets/icons/statusVerified.svg";
-import { ReactComponent as NotVerified } from "../../../assets/icons/statusNotVerified.svg";
-import { Organisation } from "../../../data/model/organisation";
-import { VerificationStatus } from "../../../data/enums/verification-status.enum";
-import { IPCStatus } from "../../../data/enums/ipc-status.enum";
+import { ReactComponent as Approved } from "../../assets/icons/statusApproved.svg";
+import { ReactComponent as NotApproved } from "../../assets/icons/statusNotApproved.svg";
+import { ReactComponent as Pending } from "../../assets/icons/statusPending.svg";
+import { ReactComponent as Verified } from "../../assets/icons/statusVerified.svg";
+import { ReactComponent as NotVerified } from "../../assets/icons/statusNotVerified.svg";
+import { Organisation } from "../../data/model/organisation";
+import { VerificationStatus } from "../../data/enums/verification-status.enum";
+import { IPCStatus } from "../../data/enums/ipc-status.enum";
 
 const ipcUIMap = {
   [IPCStatus.Approved]: <Approved />,
diff --git a/src/features/organisation-list/components/navigation-bar.tsx b/src/pages/OrganisationList/NavigationBar.tsx
similarity index 100%
rename from src/features/organisation-list/components/navigation-bar.tsx
rename to src/pages/OrganisationList/NavigationBar.tsx
diff --git a/src/features/organisation-list/components/OrgCard.tsx b/src/pages/OrganisationList/OrganisationCard.tsx
similarity index 93%
rename from src/features/organisation-list/components/OrgCard.tsx
rename to src/pages/OrganisationList/OrganisationCard.tsx
index 7d3fd51..099ae76 100644
--- a/src/features/organisation-list/components/OrgCard.tsx
+++ b/src/pages/OrganisationList/OrganisationCard.tsx
@@ -1,4 +1,4 @@
-import { Organisation } from "../../../data/model/organisation";
+import { Organisation } from "../../data/model/organisation";
 import {
   Box,
   Text,
@@ -9,8 +9,8 @@ import {
   TagLeftIcon,
   Flex,
 } from "@chakra-ui/react";
-import { VerificationStatus } from "../../../data/enums/verification-status.enum";
-import { IPCStatus } from "../../../data/enums/ipc-status.enum";
+import { VerificationStatus } from "../../data/enums/verification-status.enum";
+import { IPCStatus } from "../../data/enums/ipc-status.enum";
 import { SearchIcon, CheckCircleIcon, createIcon } from "@chakra-ui/icons";
 
 // person icon
diff --git a/src/features/organisation-list/index.tsx b/src/pages/OrganisationList/OrganisationList.tsx
similarity index 77%
rename from src/features/organisation-list/index.tsx
rename to src/pages/OrganisationList/OrganisationList.tsx
index 7268fb9..01d2944 100644
--- a/src/features/organisation-list/index.tsx
+++ b/src/pages/OrganisationList/OrganisationList.tsx
@@ -9,26 +9,24 @@ import {
   Spacer,
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
-import Footer from "../common/footer";
-import CardView from "./components/CardView";
-import ListView from "./components/ListView";
-import ViewToggle from "./components/ViewToggle";
+import CardView from "./CardView";
+import ListView from "./ListView";
+import ViewToggle from "./ViewToggle";
 import {
   getOrganisationsForListingsPage,
   Organisation,
   OrganisationListingQueryFilters,
 } from "../../data/model/organisation";
 import { Spinner } from "@chakra-ui/react";
-import OrgBreadCrumb from "../common/orgBreadCrumb";
-import "../page-style.scss";
+import Breadcrumbs from "../../components/Breadcrumbs";
+import "../style.scss";
 import { MultiSelect } from "react-multi-select-component";
 import {
   ipcOptions,
   serviceOptions,
   specialisationsOptions,
   supportAreaOptions,
-} from "./const";
-import NavigationBar from "../common/NavigationBar";
+} from "./Const";
 
 export enum EViewOption {
   Card = "card",
@@ -62,8 +60,6 @@ const OrganisationList: React.FC = () => {
     ipcStatus: undefined,
     supportAreas: undefined,
   });
-  const [orgListingComponentHeight, setOrgListingComponentHeight] =
-    useState(500);
 
   useEffect(() => {
     // fetch organisation data on page load
@@ -72,11 +68,6 @@ const OrganisationList: React.FC = () => {
         // console.log('orgs', orgs)
         setOrgList(orgs);
       })
-      .then(() => {
-        const height = orgList.length > 12 ? 1800 : (orgList.length % 4) * 600;
-        setOrgListingComponentHeight(height < 600 ? 600 : height);
-        console.log(orgListingComponentHeight);
-      })
       .then(() => setIsLoading(false))
       .catch((err) => {
         alert(`Organisation data fetch error!`);
@@ -94,18 +85,12 @@ const OrganisationList: React.FC = () => {
   }, [specialisations, services, ipcStatus, supportAreas]);
 
   return (
-    <VStack
-      className="page-width page-padding"
-      justify="center"
-      spacing={0}
-      align="stretch"
-    >
-      <NavigationBar />
-      <OrgBreadCrumb />
+    <VStack justify="center" spacing={0} align="stretch">
+      <Breadcrumbs />
 
       {/* Description */}
-      <Flex h="40vh" w="full">
-        <HStack margin="auto" className="page-width" w="70%" h="full">
+      <Flex w="full" paddingBottom="25px">
+        <HStack margin="auto" className="page-width" w="50%" h="full">
           <Image
             maxW="50%"
             src={require("../../assets/images/org-listing-image.png")}
@@ -127,7 +112,7 @@ const OrganisationList: React.FC = () => {
       </Flex>
 
       {/* Filters drop down */}
-      <Box className="maximise-width" height="15vh" bg="#E0E5FF">
+      <Box bg="#E0E5FF" paddingBottom="20px" paddingTop="20px">
         <VStack h="full" className="page-width page-padding" align="left">
           <Spacer />
           <Text fontSize="xl">How can we help you today?</Text>
@@ -207,17 +192,15 @@ const OrganisationList: React.FC = () => {
       </Box>
 
       {/* Cards listing view */}
-      <VStack
-        h={`${orgListingComponentHeight}px`}
-        paddingBottom={5}
-        paddingTop={5}
-      >
-        <ViewToggle
-          onChange={(option) => setViewOption(option)}
-          viewOption={viewOption}
-        />
-        <Flex w="full" direction={"column"}>
-          {isLoading ? (
+
+      <VStack paddingBottom={5} paddingTop={5}>
+        {isLoading ? (
+          <Box
+            height="300px"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
             <Spinner
               thickness="4px"
               speed="0.65s"
@@ -225,18 +208,35 @@ const OrganisationList: React.FC = () => {
               color="blue.500"
               size="xl"
             />
-          ) : viewOption === EViewOption.Card ? (
-            <CardView organisationList={orgList} />
-          ) : (
-            <ListView organisationList={orgList} />
-          )}
-        </Flex>
+          </Box>
+        ) : (
+          <>
+            <ViewToggle
+              onChange={(option) => setViewOption(option)}
+              viewOption={viewOption}
+            />
+            <Box
+              className="page-width page-padding"
+              display="flex"
+              justifyContent="flex-end"
+              marginBottom={5}
+            >
+              <Flex
+                w="full"
+                direction={"column"}
+                alignItems="center"
+                paddingBottom="60px"
+              >
+                {viewOption === EViewOption.Card ? (
+                  <CardView organisationList={orgList} />
+                ) : (
+                  <ListView organisationList={orgList} />
+                )}
+              </Flex>
+            </Box>
+          </>
+        )}
       </VStack>
-
-      {/* Footer */}
-      <Box className="maximise-width" minH="37.33vh">
-        <Footer />
-      </Box>
     </VStack>
   );
 };
diff --git a/src/pages/OrganisationList/ViewToggle.tsx b/src/pages/OrganisationList/ViewToggle.tsx
new file mode 100644
index 0000000..71f097c
--- /dev/null
+++ b/src/pages/OrganisationList/ViewToggle.tsx
@@ -0,0 +1,88 @@
+import { Box, Text } from "@chakra-ui/react";
+import { EViewOption } from "./OrganisationList";
+import { ReactComponent as ViewCardActive } from "../../assets/icons/viewCardActive.svg";
+import { ReactComponent as ViewCardInactive } from "../../assets/icons/viewCardInactive.svg";
+import { ReactComponent as ViewListActive } from "../../assets/icons/viewListActive.svg";
+import { ReactComponent as ViewListInactive } from "../../assets/icons/viewListInactive.svg";
+
+interface IViewToggle {
+  onChange: (option: EViewOption) => void;
+  viewOption: EViewOption;
+}
+
+const ViewToggle: React.FC<IViewToggle> = ({ onChange, viewOption }) => {
+  return (
+    <Box
+      className="page-width page-padding"
+      display="flex"
+      justifyContent="flex-end"
+      marginBottom={5}
+    >
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <button
+          onClick={() => onChange(EViewOption.Card)}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            marginRight: 5,
+          }}
+        >
+          {viewOption === EViewOption.Card ? (
+            <ViewCardActive />
+          ) : (
+            <ViewCardInactive />
+          )}
+          <Text
+            marginLeft={2}
+            style={
+              viewOption === EViewOption.Card
+                ? {
+                    color: "#3959FF",
+                    fontWeight: "bold",
+                  }
+                : {
+                    color: "#CBCBCB",
+                  }
+            }
+          >
+            Card View
+          </Text>
+        </button>
+        <div style={{ color: "#CBCBCB" }}>|</div>
+        <button
+          onClick={() => onChange(EViewOption.List)}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            marginLeft: 5,
+          }}
+        >
+          {viewOption === EViewOption.List ? (
+            <ViewListActive />
+          ) : (
+            <ViewListInactive />
+          )}
+          <Text
+            marginLeft={2}
+            style={
+              viewOption === EViewOption.List
+                ? {
+                    color: "#3959FF",
+                    fontWeight: "bold",
+                  }
+                : {
+                    color: "#CBCBCB",
+                  }
+            }
+          >
+            List View
+          </Text>
+        </button>
+      </div>
+    </Box>
+  );
+};
+
+export default ViewToggle;
diff --git a/src/pages/OrganisationList/index.ts b/src/pages/OrganisationList/index.ts
new file mode 100644
index 0000000..ef9dac9
--- /dev/null
+++ b/src/pages/OrganisationList/index.ts
@@ -0,0 +1 @@
+export { default } from "./OrganisationList";
diff --git a/src/features/organisation-profile/index.tsx b/src/pages/OrganisationProfile/OrganisationProfile.tsx
similarity index 54%
rename from src/features/organisation-profile/index.tsx
rename to src/pages/OrganisationProfile/OrganisationProfile.tsx
index 169bdee..936815b 100644
--- a/src/features/organisation-profile/index.tsx
+++ b/src/pages/OrganisationProfile/OrganisationProfile.tsx
@@ -1,19 +1,17 @@
-import { Box, VStack } from "@chakra-ui/react";
-import Footer from "../common/footer";
-import Profile from "./components/profile";
-import Services from "./components/services";
-import Summary from "./components/summary";
-import OrgBreadCrumb from "../common/orgBreadCrumb";
+import { VStack } from "@chakra-ui/react";
+import Profile from "./Profile";
+import Services from "./Services";
+import Summary from "./Summary";
+import Breadcrumbs from "../../components/Breadcrumbs";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import {
   getOrganisationForProfilePage,
   Organisation,
 } from "../../data/model/organisation";
-import "../page-style.scss";
-import NavigationBar from "../common/NavigationBar";
+import "../style.scss";
 
-export default function OrgProfilePage() {
+const OrganisationProfile = () => {
   // TODO call firestore db to retrieve org profile details
   const { orgId } = useParams<{ orgId: string }>();
   const [org, setOrg] = useState<Organisation>();
@@ -25,17 +23,15 @@ export default function OrgProfilePage() {
 
   return (
     <div>
-      <NavigationBar />
-      <VStack className="page-width page-padding" align="stretch" spacing="0px">
-        <OrgBreadCrumb org={org} />
+      <VStack align="stretch" spacing="0px">
+        <Breadcrumbs org={org} />
         {org !== undefined && <Summary org={org} />}
         <Services />
         {org !== undefined && <Profile org={org} />}
         {/* {org !== undefined && <SimilarOrgs org={org} />} */}
-        <Box className="maximise-width" minH="37.33vh">
-          <Footer />
-        </Box>
       </VStack>
     </div>
   );
-}
+};
+
+export default OrganisationProfile;
diff --git a/src/features/organisation-profile/components/profile.tsx b/src/pages/OrganisationProfile/Profile.tsx
similarity index 87%
rename from src/features/organisation-profile/components/profile.tsx
rename to src/pages/OrganisationProfile/Profile.tsx
index 40c4e4b..bfdf14c 100644
--- a/src/features/organisation-profile/components/profile.tsx
+++ b/src/pages/OrganisationProfile/Profile.tsx
@@ -13,23 +13,23 @@ import {
   Image,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { GetIconForSocials } from "../../../utilities/icon-mappings";
-import "../scss/profile.scss";
-import { Organisation } from "../../../data/model/organisation";
+import { GetIconForSocials } from "../../utilities/iconMappings/iconMapping";
+import "./profile.scss";
+import { Organisation } from "../../data/model/organisation";
 import {
   IFAQ,
   getOrganisationProfileFAQ,
-} from "../../../data/model/organisationProfile/organisationProfileFAQ";
-import { getOrganisationProfileOurStory } from "../../../data/model/organisationProfile/organisationProfileOurStory";
+} from "../../data/model/organisationProfile/organisationProfileFAQ";
+import { getOrganisationProfileOurStory } from "../../data/model/organisationProfile/organisationProfileOurStory";
 import {
   IPeopleSpotlight,
   getOrganisationProfilePeopleSpotlight,
-} from "../../../data/model/organisationProfile/organisationProfilePeopleSpotlight";
+} from "../../data/model/organisationProfile/organisationProfilePeopleSpotlight";
 import {
   IProfileContent,
   ISection,
-} from "../../../data/model/organisationProfile/profileContent";
-import { ProfileContent } from "./profile-content";
+} from "../../data/model/organisationProfile/profileContent";
+import { ProfileContent } from "./ProfileContent";
 
 // TODO move this to model when class is defined
 export interface IFeaturedProjects {
@@ -49,10 +49,7 @@ export enum ETabLabel {
   FAQ = "FAQ",
 }
 
-const renderTabContent = (
-  label: ETabLabel,
-  content: any,
-) => {
+const renderTabContent = (label: ETabLabel, content: any) => {
   switch (label) {
     case ETabLabel.OUR_STORY:
     case ETabLabel.IMPACT: {
@@ -367,49 +364,44 @@ const Profile: React.FC<{ org?: Organisation }> = ({ org }) => {
   const [profileData, setProfileData] = useState<tabData[]>([]);
 
   useEffect(() => {
-    getOrganisationProfileData(orgId).then((data) =>
-      setProfileData(data)
-    );
+    getOrganisationProfileData(orgId).then((data) => setProfileData(data));
   }, []);
 
   return (
-    <Tabs
-      isLazy
-      isFitted
-      align="center"
-      style={{ width: "100%" }}
-    >
-      <TabList
-        style={{
-          position: "sticky",
-          top: 0,
-          zIndex: 200,
-        }}
-      >
-        {profileData.map((tab, index) => (
-          <Tab
-            className="tabStyle"
-            bg="#FFFFFF"
-            _selected={{
-              color: "#3959FF",
-              borderColor: "#3959FF",
-            }}
-            key={index}
-            borderBottomWidth={2}
-            borderColor={"#CBCBCB"}
-          >
-            {tab.label}
-          </Tab>
-        ))}
-      </TabList>
-      <TabPanels>
-        {profileData.map((tab, index) => (
-          <TabPanel p={4} key={index}>
-            {renderTabContent(tab.label, tab.content)}
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </Tabs>
+    <Flex className="page-width page-padding">
+      <Tabs isLazy isFitted align="center" style={{ width: "100%" }}>
+        <TabList
+          style={{
+            position: "sticky",
+            top: 0,
+            zIndex: 200,
+          }}
+        >
+          {profileData.map((tab, index) => (
+            <Tab
+              className="tabStyle"
+              bg="#FFFFFF"
+              _selected={{
+                color: "#3959FF",
+                borderColor: "#3959FF",
+              }}
+              key={index}
+              borderBottomWidth={2}
+              borderColor={"#CBCBCB"}
+            >
+              {tab.label}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {profileData.map((tab, index) => (
+            <TabPanel p={4} key={index}>
+              {renderTabContent(tab.label, tab.content)}
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Flex>
   );
 };
 
diff --git a/src/features/organisation-profile/components/profile-content.tsx b/src/pages/OrganisationProfile/ProfileContent.tsx
similarity index 98%
rename from src/features/organisation-profile/components/profile-content.tsx
rename to src/pages/OrganisationProfile/ProfileContent.tsx
index 3dbab15..b85db30 100644
--- a/src/features/organisation-profile/components/profile-content.tsx
+++ b/src/pages/OrganisationProfile/ProfileContent.tsx
@@ -1,6 +1,6 @@
 import { Box, Heading } from "@chakra-ui/layout";
 import parse, { domToReact, HTMLReactParserOptions } from "html-react-parser";
-import { Header, ProfileSidebar } from "./profile-sidebar";
+import { Header, ProfileSidebar } from "./ProfileSidebar";
 import { Flex } from "@chakra-ui/react";
 
 const htmlContent =
diff --git a/src/features/organisation-profile/components/profile-sidebar.tsx b/src/pages/OrganisationProfile/ProfileSidebar.tsx
similarity index 100%
rename from src/features/organisation-profile/components/profile-sidebar.tsx
rename to src/pages/OrganisationProfile/ProfileSidebar.tsx
diff --git a/src/pages/OrganisationProfile/Services.tsx b/src/pages/OrganisationProfile/Services.tsx
new file mode 100644
index 0000000..9145288
--- /dev/null
+++ b/src/pages/OrganisationProfile/Services.tsx
@@ -0,0 +1,70 @@
+import {
+  Flex,
+  HStack,
+  Text,
+  VStack,
+  SimpleGrid,
+  StackDivider,
+} from "@chakra-ui/react";
+import { Component } from "react";
+import { Service } from "../../data/enums/service.enum";
+import { SupportArea } from "../../data/enums/support-area.enum";
+import { GetIcon } from "../../utilities/iconMappings/iconMapping";
+import "./services.scss";
+import "../style.scss";
+
+type ServicesProp = {
+  needs: SupportArea[]; // limit to 2
+  offerrings: Service[]; // limit to 4
+};
+
+function generateServiceView(collection: Service[] | SupportArea[]) {
+  return collection.map((item) => {
+    return (
+      <HStack key={item}>
+        {GetIcon(item)}
+        <Text className="serviceText">{item}</Text>
+      </HStack>
+    );
+  });
+}
+
+class Services extends Component {
+  private testServices: ServicesProp = {
+    needs: [SupportArea.PartnershipOpportunities, SupportArea.FundingSupport],
+    offerrings: [
+      Service.Counselling,
+      Service.SupportGroup,
+      Service.CorporateTraining,
+      Service.SpeakingEngagements,
+    ],
+  };
+
+  render() {
+    return (
+      <Flex className="servicesFlex">
+        <Flex className="servicesContainer page-width page-padding">
+          <HStack
+            spacing="65px"
+            align="flex-start"
+            width="100%"
+            divider={<StackDivider border="2px solid #cbcbcb" />}
+          >
+            <VStack width="40%" align="flex-start" spacing="15px">
+              <Text>What we need</Text>
+              {generateServiceView(this.testServices.needs)}
+            </VStack>
+            <VStack align="flex-start" spacing="15px">
+              <Text>What we offer</Text>
+              <SimpleGrid columns={2} spacingX="24px" spacingY="15px">
+                {generateServiceView(this.testServices.offerrings)}
+              </SimpleGrid>
+            </VStack>
+          </HStack>
+        </Flex>
+      </Flex>
+    );
+  }
+}
+
+export default Services;
diff --git a/src/features/organisation-profile/components/similar-orgs.tsx b/src/pages/OrganisationProfile/SimilarOrganisations.tsx
similarity index 77%
rename from src/features/organisation-profile/components/similar-orgs.tsx
rename to src/pages/OrganisationProfile/SimilarOrganisations.tsx
index 6ee58fe..f27a978 100644
--- a/src/features/organisation-profile/components/similar-orgs.tsx
+++ b/src/pages/OrganisationProfile/SimilarOrganisations.tsx
@@ -1,16 +1,16 @@
 import { Flex, Text, VStack } from "@chakra-ui/react";
 import "../scss/similar-orgs.scss";
-import "../../page-style.scss";
+import "../style.scss";
 import { useEffect, useState } from "react";
 import {
   getOrganisationsForListingsPage,
   Organisation,
   OrganisationListingQueryFilters,
-} from "../../../data/model/organisation";
-import CardView from "../../organisation-list/components/CardView";
-import { Specialisation } from "../../../data/enums/specialisation.enum";
+} from "../../data/model/organisation";
+import CardView from "../OrganisationList/CardView";
+import { Specialisation } from "../../data/enums/specialisation.enum";
 
-const SimilarOrgs: React.FC<{ org: Organisation }> = ({ org }) => {
+const SimilarOrganisations: React.FC<{ org: Organisation }> = ({ org }) => {
   // store organisation card data
   const [orgList, setOrgList] = useState<Organisation[]>([]);
   // states of the 4 filters
@@ -33,7 +33,7 @@ const SimilarOrgs: React.FC<{ org: Organisation }> = ({ org }) => {
   }, []);
 
   return (
-    <Flex className="maximise-width" background="#192873">
+    <Flex background="#192873">
       <Flex
         marginTop="5vh"
         marginBottom="7vh"
@@ -50,4 +50,4 @@ const SimilarOrgs: React.FC<{ org: Organisation }> = ({ org }) => {
   );
 };
 
-export default SimilarOrgs;
+export default SimilarOrganisations;
diff --git a/src/pages/OrganisationProfile/Summary.tsx b/src/pages/OrganisationProfile/Summary.tsx
new file mode 100644
index 0000000..f64f0b1
--- /dev/null
+++ b/src/pages/OrganisationProfile/Summary.tsx
@@ -0,0 +1,150 @@
+import {
+  Flex,
+  Box,
+  HStack,
+  VStack,
+  Text,
+  Button,
+  Stack,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import { ReactComponent as ShieldCheckIcon } from "../../assets/icons/checked.svg";
+import { ReactComponent as LinkIcon } from "../../assets/icons/link.svg";
+import { ReactComponent as MailIcon } from "../../assets/icons/mail.svg";
+import {
+  GetIconForIssue,
+  GetIconForSocials,
+} from "../../utilities/iconMappings/iconMapping";
+import { useEffect, useState } from "react";
+import { Organisation } from "../../data/model/organisation";
+import {
+  OrganisationSummary,
+  getOrganisationSummary,
+} from "../../data/model/organisationSummary";
+import "./summary.scss";
+
+const emailButtonStyle = {
+  backgroundColor: "#FFFFFF",
+  borderRadius: 4,
+  height: 12,
+  fontSize: 14,
+  "&:hover": {
+    bg: "#dddfe2",
+    border: "1px solid #192873",
+  },
+};
+
+const websiteButtonStyle = {
+  backgroundColor: "#192873",
+  borderRadius: 4,
+  height: 12,
+  color: "#FFFFFF",
+  border: "1px solid #192873",
+  fill: "#FFFFFF",
+  "&:hover": {
+    bg: "#dddfe2",
+    color: "black",
+    border: "1px solid #192873",
+    fill: "#192873",
+  },
+};
+
+// TODO add input of type SummaryProps
+const Summary: React.FC<{ org: Organisation }> = ({ org }) => {
+  const [orgSummary, setOrgSummary] = useState<OrganisationSummary>();
+
+  // Load organisation summary details.
+  useEffect(() => {
+    getOrganisationSummary(org.id).then((orgSummary) =>
+      setOrgSummary(orgSummary)
+    );
+  }, []);
+
+  // dynamically generate social icons based on organisation data
+  const getSocialIconsView = (summary: OrganisationSummary) =>
+    summary.socials.map((item, index) => {
+      return (
+        <Box key={index}>
+          <a href={item.url}>{GetIconForSocials(item.socialType)}</a>
+        </Box>
+      );
+    });
+
+  return (
+    <Flex className="page-width page-padding" alignSelf="center">
+      <HStack
+        w="100%"
+        spacing="125px"
+        marginBottom={35}
+        marginInlineStart="auto"
+      >
+        <SimpleGrid columns={2} spacing={10}>
+          {/* Video Box */}
+          <iframe
+            src={orgSummary?.videoUrl}
+            title={org.name}
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+            style={{
+              width: "500px",
+              height: "300px",
+              marginBottom: "15px",
+              borderRadius: "12px",
+            }}
+          ></iframe>
+          <Box>
+            {/* Organisation Summary Details Box */}
+            <VStack spacing="30px" alignItems="start">
+              {/* Organisation Name */}
+              <HStack justifyContent="flex start" className="title">
+                <Text>{org.name}</Text>
+                {org.verified && <ShieldCheckIcon />}
+              </HStack>
+              {/* Mental Health Issue*/}
+              <HStack className="mentalHealthIssueView" spacing="10px">
+                {GetIconForIssue(org.mainSpecialisation)}
+                <Text className="mentalHealthIssueText">
+                  {org.mainSpecialisation}
+                </Text>
+              </HStack>
+              {/* Mission Statement */}
+              <Text className="missionText">{orgSummary?.mission}</Text>{" "}
+              {/* TODO: Add mission statement to OrganisationSummary model. */}
+              {/* Links */}
+              <Stack className="linksStyle" direction="row" spacing="10px">
+                <a href={orgSummary?.websiteUrl}>
+                  <Button
+                    sx={websiteButtonStyle}
+                    flex={1}
+                    rightIcon={<LinkIcon />}
+                  >
+                    Visit our website
+                  </Button>
+                </a>
+
+                <a href={`mailto:${orgSummary?.websiteUrl}`}>
+                  {" "}
+                  {/* TODO: Add email to OrganisationSummary model. */}
+                  <Button
+                    rightIcon={<MailIcon />}
+                    sx={emailButtonStyle}
+                    flex={1}
+                    variant="outline"
+                  >
+                    Reach out to us
+                  </Button>
+                </a>
+              </Stack>
+              {/* Socials */}
+              <HStack>
+                {orgSummary !== undefined ? getSocialIconsView(orgSummary) : ""}
+              </HStack>
+            </VStack>
+          </Box>
+        </SimpleGrid>
+      </HStack>
+    </Flex>
+  );
+};
+
+export default Summary;
diff --git a/src/pages/OrganisationProfile/index.ts b/src/pages/OrganisationProfile/index.ts
new file mode 100644
index 0000000..3acb985
--- /dev/null
+++ b/src/pages/OrganisationProfile/index.ts
@@ -0,0 +1 @@
+export { default } from "./OrganisationProfile";
diff --git a/src/features/organisation-profile/scss/profile.scss b/src/pages/OrganisationProfile/profile.scss
similarity index 98%
rename from src/features/organisation-profile/scss/profile.scss
rename to src/pages/OrganisationProfile/profile.scss
index 32362ea..816184e 100644
--- a/src/features/organisation-profile/scss/profile.scss
+++ b/src/pages/OrganisationProfile/profile.scss
@@ -1,12 +1,9 @@
 .tabStyle {
   height: 103px;
-
   color: #707070;
-
   font-weight: 700;
   font-size: 18px;
   line-height: 22px;
-
   display: flex;
   align-items: center;
   letter-spacing: -0.015em;
diff --git a/src/features/organisation-profile/scss/services.scss b/src/pages/OrganisationProfile/services.scss
similarity index 91%
rename from src/features/organisation-profile/scss/services.scss
rename to src/pages/OrganisationProfile/services.scss
index 2d4b786..71d55db 100644
--- a/src/features/organisation-profile/scss/services.scss
+++ b/src/pages/OrganisationProfile/services.scss
@@ -2,19 +2,16 @@
   height: 240px;
   font-family: "Inter";
   font-style: normal;
-
   background: #e0e5ff;
 }
 
 .servicesContainer {
   margin-bottom: 47px;
   margin-top: 47px;
-
   font-weight: 400;
   font-size: 18px;
   line-height: 22px;
   letter-spacing: -0.015em;
-
   color: #333333;
 }
 
@@ -23,7 +20,5 @@
   font-size: 24px;
   line-height: 29px;
   letter-spacing: -0.015em;
-
-  /* Neutral/neutral-primary */
   color: #333333;
 }
diff --git a/src/features/organisation-profile/scss/similar-orgs.scss b/src/pages/OrganisationProfile/similar-orgs.scss
similarity index 100%
rename from src/features/organisation-profile/scss/similar-orgs.scss
rename to src/pages/OrganisationProfile/similar-orgs.scss
diff --git a/src/features/organisation-profile/scss/summary.scss b/src/pages/OrganisationProfile/summary.scss
similarity index 100%
rename from src/features/organisation-profile/scss/summary.scss
rename to src/pages/OrganisationProfile/summary.scss
diff --git a/src/features/registration/components/goals-form.tsx b/src/pages/Registration/GoalsForm.tsx
similarity index 92%
rename from src/features/registration/components/goals-form.tsx
rename to src/pages/Registration/GoalsForm.tsx
index b1c2a73..92b5c17 100644
--- a/src/features/registration/components/goals-form.tsx
+++ b/src/pages/Registration/GoalsForm.tsx
@@ -6,16 +6,13 @@ import {
   Select,
   Text,
 } from "@chakra-ui/react";
-import { OrgDataFormProps } from "../profile-setup-page";
+import { OrgDataFormProps } from "./ProfileSetup";
 import {
   CapitalGoal,
   capitalGoalEnumOptions,
-} from "../../../data/enums/captial-goal.enum";
+} from "../../data/enums/captial-goal.enum";
 
-export default function GoalsForm({
-  orgFormData,
-  updateOrgFormData,
-}: OrgDataFormProps) {
+const GoalsForm = ({ orgFormData, updateOrgFormData }: OrgDataFormProps) => {
   return (
     <Grid
       templateRows="repeat(1, 1fr)"
@@ -85,4 +82,6 @@ export default function GoalsForm({
       </GridItem>
     </Grid>
   );
-}
+};
+
+export default GoalsForm;
diff --git a/src/features/registration/components/org-info-form.tsx b/src/pages/Registration/OrganisationInfoForm.tsx
similarity index 94%
rename from src/features/registration/components/org-info-form.tsx
rename to src/pages/Registration/OrganisationInfoForm.tsx
index 6aea1c1..e5c9367 100644
--- a/src/features/registration/components/org-info-form.tsx
+++ b/src/pages/Registration/OrganisationInfoForm.tsx
@@ -8,26 +8,26 @@ import {
   Image,
 } from "@chakra-ui/react";
 import { MultiSelect } from "react-multi-select-component";
-import { OrgDataFormProps } from "../profile-setup-page";
+import { OrgDataFormProps } from "./ProfileSetup";
 import {
   Specialisation,
   specialisationEnumOptions,
-} from "../../../data/enums/specialisation.enum";
+} from "../../data/enums/specialisation.enum";
 import {
   SupportArea,
   supportAreaEnumOptions,
-} from "../../../data/enums/support-area.enum";
+} from "../../data/enums/support-area.enum";
 import {
   ServiceEnumOption,
   serviceEnumOptions,
-} from "../../../data/enums/service.enum";
-import { OrgSize, orgSizeEnumOptions } from "../../../data/enums/org-size.enum";
+} from "../../data/enums/service.enum";
+import { OrgSize, orgSizeEnumOptions } from "../../data/enums/org-size.enum";
 import { useState } from "react";
 
-export default function OrgInfoForm({
+const OrganisationInfoForm = ({
   orgFormData,
   updateOrgFormData,
-}: OrgDataFormProps) {
+}: OrgDataFormProps) => {
   const [services, setServices] = useState<ServiceEnumOption[]>([]);
 
   return (
@@ -220,4 +220,6 @@ export default function OrgInfoForm({
       </GridItem>
     </Grid>
   );
-}
+};
+
+export default OrganisationInfoForm;
diff --git a/src/features/registration/profile-setup-page.tsx b/src/pages/Registration/ProfileSetup.tsx
similarity index 95%
rename from src/features/registration/profile-setup-page.tsx
rename to src/pages/Registration/ProfileSetup.tsx
index 5a07d86..ea5598e 100644
--- a/src/features/registration/profile-setup-page.tsx
+++ b/src/pages/Registration/ProfileSetup.tsx
@@ -22,11 +22,11 @@ import { Step, Steps, useSteps } from "chakra-ui-steps";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { instanceOfLoginCredentials } from "../../data/auth/loginCredentials";
-import OrgInfoForm from "./components/org-info-form";
-import GoalsForm from "./components/goals-form";
-import SignUpWaiting from "./components/sign-up-waiting";
-import "./scss/setup.scss";
-import { Paths } from "../../paths";
+import OrgInfoForm from "./OrganisationInfoForm";
+import GoalsForm from "./GoalsForm";
+import SignUpWaiting from "./SignUpWaiting";
+import "./setup.scss";
+import { Paths } from "../../routing/Paths";
 import { IOrganisation } from "../../data/model/organisation";
 import { IOrganisationAdminData } from "../../data/model/organisationAdmin";
 import { IOrganisationSummary } from "../../data/model/organisationSummary";
@@ -47,7 +47,7 @@ export interface OrgDataFormProps {
   updateOrgFormData: (orgFormData: IOrgFormData) => void;
 }
 
-export default function ProfileSetupPage() {
+const ProfileSetup = () => {
   const { nextStep, prevStep, activeStep, setStep } = useSteps({
     initialStep: 1,
   });
@@ -212,4 +212,6 @@ export default function ProfileSetupPage() {
       </Container>
     </VStack>
   );
-}
+};
+
+export default ProfileSetup;
diff --git a/src/features/registration/registration-page.tsx b/src/pages/Registration/Registration.tsx
similarity index 55%
rename from src/features/registration/registration-page.tsx
rename to src/pages/Registration/Registration.tsx
index e17fb77..1ba22b2 100644
--- a/src/features/registration/registration-page.tsx
+++ b/src/pages/Registration/Registration.tsx
@@ -1,10 +1,10 @@
 import { Box, Flex } from "@chakra-ui/react";
 
-import RegistrationDesign from "./components/registration-design";
-import RegistrationSection from "./components/registration-section";
-import "./scss/registration.scss";
+import RegistrationDesign from "./RegistrationDesign";
+import RegistrationSection from "./RegistrationSection";
+import "./registration.scss";
 
-export default function RegistrationPage() {
+const Registration = () => {
   return (
     <Flex minH="100vH">
       <Box flex="1">
@@ -16,3 +16,5 @@ export default function RegistrationPage() {
     </Flex>
   );
 }
+
+export default Registration;
diff --git a/src/features/registration/components/registration-design.tsx b/src/pages/Registration/RegistrationDesign.tsx
similarity index 80%
rename from src/features/registration/components/registration-design.tsx
rename to src/pages/Registration/RegistrationDesign.tsx
index 6f0ed4e..9905edf 100644
--- a/src/features/registration/components/registration-design.tsx
+++ b/src/pages/Registration/RegistrationDesign.tsx
@@ -1,6 +1,6 @@
 import { Center, Spacer, VStack, Image } from "@chakra-ui/react";
 
-export default function RegistrationDesign() {
+const RegistrationDesign = () => {
   return (
     <VStack>
       <Spacer />
@@ -13,3 +13,5 @@ export default function RegistrationDesign() {
     </VStack>
   );
 }
+
+export default RegistrationDesign;
\ No newline at end of file
diff --git a/src/features/registration/components/registration-form.tsx b/src/pages/Registration/RegistrationForm.tsx
similarity index 77%
rename from src/features/registration/components/registration-form.tsx
rename to src/pages/Registration/RegistrationForm.tsx
index 1585f88..ed193e7 100644
--- a/src/features/registration/components/registration-form.tsx
+++ b/src/pages/Registration/RegistrationForm.tsx
@@ -12,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { useState } from "react";
-import SignUpButton from "./sign-up-button";
+import SignUpButton from "./SignUpButton";
 import {
   IsPasswordMinLength,
   //   DoPasswordsMatch,
@@ -22,11 +22,11 @@ import {
   PasswordContainsNumber,
   PasswordContainsSymbol,
   PasswordContainsUppercase,
-} from "../../../utilities/validators";
-import SignIn from "./sign-in";
-import { ImCheckboxChecked, ImCross } from 'react-icons/im'
+} from "../../utilities/validators";
+import SignIn from "./SignIn";
+import { ImCheckboxChecked, ImCross } from "react-icons/im";
 
-export default function RegistrationForm() {
+const RegistrationForm = () => {
   const [input, setInput] = useState({
     givenName: "",
     famName: "",
@@ -39,7 +39,18 @@ export default function RegistrationForm() {
     givenName: "",
     famName: "",
     email: "",
-    password: { text: "", numChecked: 0, color: "", checks: { "Minimum length": false, "Number": false, "Symbol": false, "Uppercase": false, "Lowercase": false } },
+    password: {
+      text: "",
+      numChecked: 0,
+      color: "",
+      checks: {
+        "Minimum length": false,
+        Number: false,
+        Symbol: false,
+        Uppercase: false,
+        Lowercase: false,
+      },
+    },
     confirmPassword: "",
     valid: false,
   });
@@ -73,7 +84,7 @@ export default function RegistrationForm() {
     setError((prev) => {
       let errorState;
       if (name == "password") {
-        errorState = { ...prev }
+        errorState = { ...prev };
       } else {
         errorState = { ...prev, [name]: "" };
       }
@@ -104,20 +115,26 @@ export default function RegistrationForm() {
           setNoText(typeof value != "undefined" && value.length < 1);
 
           errorState.password.text = "Strong, your password is secure 💪";
-          errorState.password.checks = { "Minimum length": true, "Number": true, "Symbol": true, "Uppercase": true, "Lowercase": true };
+          errorState.password.checks = {
+            "Minimum length": true,
+            Number: true,
+            Symbol: true,
+            Uppercase: true,
+            Lowercase: true,
+          };
 
           let numChecked = 5;
 
           if (!PasswordContainsSymbol(value)) {
-            errorState.password.text = "Almost there, add a special symbol 😉"
-            errorState.password.checks["Symbol"] = false
+            errorState.password.text = "Almost there, add a special symbol 😉";
+            errorState.password.checks["Symbol"] = false;
             errorState.valid = false;
             numChecked -= 1;
           }
 
           if (!PasswordContainsNumber(value)) {
-            errorState.password.text = "So-so, should be alphanumeric 😕"
-            errorState.password.checks["Number"] = false
+            errorState.password.text = "So-so, should be alphanumeric 😕";
+            errorState.password.checks["Number"] = false;
             errorState.valid = false;
             numChecked -= 1;
           }
@@ -125,7 +142,7 @@ export default function RegistrationForm() {
           if (!PasswordContainsUppercase(value)) {
             errorState.password.text =
               "Weak, must have at one uppercase and lowercase letter 😖";
-            errorState.password.checks["Uppercase"] = false
+            errorState.password.checks["Uppercase"] = false;
             errorState.valid = false;
             numChecked -= 1;
           }
@@ -133,15 +150,14 @@ export default function RegistrationForm() {
           if (!PasswordContainsLowercase(value)) {
             errorState.password.text =
               "Weak, must have at one uppercase and lowercase letter 😖";
-            errorState.password.checks["Lowercase"] = false
+            errorState.password.checks["Lowercase"] = false;
             errorState.valid = false;
             numChecked -= 1;
           }
 
           if (!IsPasswordMinLength(value)) {
-            errorState.password.text =
-              "Must have at least 8 characters.";
-            errorState.password.checks["Minimum length"] = false
+            errorState.password.text = "Must have at least 8 characters.";
+            errorState.password.checks["Minimum length"] = false;
             errorState.valid = false;
             numChecked -= 1;
           }
@@ -181,7 +197,7 @@ export default function RegistrationForm() {
   return (
     <VStack spacing={4} align="stretch" minWidth="100%">
       <Box>
-        <Text>Given Name*</Text>
+        <Text marginBottom={2}>Given Name*</Text>
         <Input
           name="givenName"
           value={input.givenName}
@@ -191,7 +207,7 @@ export default function RegistrationForm() {
         {error.givenName && <Box className="errorMsg">{error.givenName}</Box>}
       </Box>
       <Box>
-        <Text>Family Name*</Text>
+        <Text marginBottom={2}>Family Name*</Text>
         <Input
           name="famName"
           value={input.famName}
@@ -201,7 +217,7 @@ export default function RegistrationForm() {
         {error.famName && <Box className="errorMsg">{error.famName}</Box>}
       </Box>
       <Box>
-        <Text>Email*</Text>
+        <Text marginBottom={2}>Email*</Text>
         <Input
           name="email"
           value={input.email}
@@ -211,7 +227,7 @@ export default function RegistrationForm() {
         {error.email && <Box className="errorMsg">{error.email}</Box>}
       </Box>
       <Box>
-        <Text>Password*</Text>
+        <Text marginBottom={2}>Password*</Text>
         <InputGroup size="md">
           <Input
             name="password"
@@ -235,16 +251,35 @@ export default function RegistrationForm() {
         </InputGroup>
       </Box>
       <Box>
-        <Center><Box w={0} h={0} filter="drop-shadow(0 -2px 2px #AAA)" borderLeft="20px solid transparent" borderRight="20px solid transparent" borderBottom="20px solid white" /></Center>
+        <Center>
+          <Box
+            w={0}
+            h={0}
+            filter="drop-shadow(0 -2px 2px #AAA)"
+            borderLeft="20px solid transparent"
+            borderRight="20px solid transparent"
+            borderBottom="20px solid white"
+          />
+        </Center>
         <Box boxShadow="0px 0px 8px #AAA" rounded="lg" p={3}>
           <Text>{error.password.text}</Text>
           <HStack spacing={2} py={4}>
-            {[...Array(error.password.numChecked)].map(() => <Box h={1} bg={error.password.color} flexGrow={1} />)}
-            {[...Array(5 - error.password.numChecked)].map(() => <Box h={1} bg="gray.300" flexGrow={1} />)}
+            {[...Array(error.password.numChecked)].map(() => (
+              <Box h={1} bg={error.password.color} flexGrow={1} />
+            ))}
+            {[...Array(5 - error.password.numChecked)].map(() => (
+              <Box h={1} bg="gray.300" flexGrow={1} />
+            ))}
           </HStack>
           <VStack alignItems="flex-start" spacing={1}>
             {Object.entries(error.password.checks).map(([item, checked]) => (
-              <HStack spacing={2}><Icon as={checked ? ImCheckboxChecked : ImCross} color={checked ? "green.400" : "red"} /><Text>{item}</Text></HStack>
+              <HStack spacing={2}>
+                <Icon
+                  as={checked ? ImCheckboxChecked : ImCross}
+                  color={checked ? "green.400" : "red"}
+                />
+                <Text>{item}</Text>
+              </HStack>
             ))}
           </VStack>
         </Box>
@@ -275,4 +310,6 @@ export default function RegistrationForm() {
       </Box>
     </VStack>
   );
-}
+};
+
+export default RegistrationForm;
diff --git a/src/features/registration/components/registration-menu-message.tsx b/src/pages/Registration/RegistrationMenuMessage.tsx
similarity index 83%
rename from src/features/registration/components/registration-menu-message.tsx
rename to src/pages/Registration/RegistrationMenuMessage.tsx
index fdb65e1..903b130 100644
--- a/src/features/registration/components/registration-menu-message.tsx
+++ b/src/pages/Registration/RegistrationMenuMessage.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, VStack, Text } from "@chakra-ui/react";
 
-export default function RegistrationMenuMessage() {
+const RegistrationMenuMessage = () => {
   return (
     <Flex>
       <VStack spacing={4} align="stretch">
@@ -16,3 +16,5 @@ export default function RegistrationMenuMessage() {
     </Flex>
   );
 }
+
+export default RegistrationMenuMessage;
diff --git a/src/pages/Registration/RegistrationSection.tsx b/src/pages/Registration/RegistrationSection.tsx
new file mode 100644
index 0000000..4320de3
--- /dev/null
+++ b/src/pages/Registration/RegistrationSection.tsx
@@ -0,0 +1,37 @@
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import { Container, Link, StackDivider, VStack } from "@chakra-ui/react";
+import RegistrationMenuMessage from "./RegistrationMenuMessage";
+import RegistrationForm from "./RegistrationForm";
+import { Paths } from "../../routing/Paths";
+
+const RegistrationSection = () => {
+  return (
+    <VStack
+      divider={<StackDivider borderColor="#fff" />}
+      spacing={4}
+      align="stretch"
+    >
+      <Container maxW="container.sm" />
+
+      <Container maxW="container.sm">
+        <Link href={Paths.home}>
+          <ArrowBackIcon /> Back
+        </Link>
+      </Container>
+
+      <Container minH="1em" maxW="container.sm" />
+
+      <Container minH="1em" maxW="container.sm">
+        <RegistrationMenuMessage />
+      </Container>
+
+      <Container maxW="container.sm">
+        <RegistrationForm />
+      </Container>
+
+      <Container minH="1em" maxW="container.sm" />
+    </VStack>
+  );
+};
+
+export default RegistrationSection;
diff --git a/src/features/registration/components/sign-in.tsx b/src/pages/Registration/SignIn.tsx
similarity index 84%
rename from src/features/registration/components/sign-in.tsx
rename to src/pages/Registration/SignIn.tsx
index 3403e80..7717c46 100644
--- a/src/features/registration/components/sign-in.tsx
+++ b/src/pages/Registration/SignIn.tsx
@@ -1,8 +1,8 @@
 import { Box, Flex, Link, Spacer, Text } from "@chakra-ui/react";
 
-export default function SignIn() {
+const SignIn = () => {
   return (
-    <Flex>
+    <Flex marginTop={6}>
       <Spacer />
       <Box p="1">
         <Text color="grey" as="b">
@@ -19,4 +19,6 @@ export default function SignIn() {
       <Spacer />
     </Flex>
   );
-}
+};
+
+export default SignIn;
diff --git a/src/features/registration/components/sign-up-button.tsx b/src/pages/Registration/SignUpButton.tsx
similarity index 60%
rename from src/features/registration/components/sign-up-button.tsx
rename to src/pages/Registration/SignUpButton.tsx
index 2df7ec8..2de7b09 100644
--- a/src/features/registration/components/sign-up-button.tsx
+++ b/src/pages/Registration/SignUpButton.tsx
@@ -1,17 +1,18 @@
-import { Button, VStack } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "../../../paths";
-import { LoginCredentials } from "./sign-up-waiting";
+import { Paths } from "../../routing/Paths";
+import { LoginCredentials } from "./SignUpWaiting";
 
-export default function SignUpButton(LoginCredentials: LoginCredentials) {
+const SignUpButton = (LoginCredentials: LoginCredentials) => {
   const disable: boolean = !LoginCredentials.validated;
 
   const navigate = useNavigate();
 
   return (
-    <VStack spacing={4} align="stretch">
       <Button
         // disabled={disable}
+        width="full"
+        marginTop={4}
         colorScheme="blue"
         onClick={() => {
           console.log(LoginCredentials);
@@ -20,6 +21,7 @@ export default function SignUpButton(LoginCredentials: LoginCredentials) {
       >
         Sign Up
       </Button>
-    </VStack>
   );
 }
+
+export default SignUpButton;
diff --git a/src/features/registration/components/sign-up-waiting.tsx b/src/pages/Registration/SignUpWaiting.tsx
similarity index 85%
rename from src/features/registration/components/sign-up-waiting.tsx
rename to src/pages/Registration/SignUpWaiting.tsx
index c5c83cd..9809715 100644
--- a/src/features/registration/components/sign-up-waiting.tsx
+++ b/src/pages/Registration/SignUpWaiting.tsx
@@ -3,18 +3,18 @@ import { Center, Image, Spinner, Text, VStack } from "@chakra-ui/react";
 import { User, UserCredential } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../../services/firebase/authProvider";
-import { IOrgFormData } from "../profile-setup-page";
+import { useAuth } from "../../services/firebase/authProvider";
+import { IOrgFormData } from "./ProfileSetup";
 import {
   IOrganisation,
   createOrganisationOnSignUp,
-} from "../../../data/model/organisation";
-import { IPCStatus } from "../../../data/enums/ipc-status.enum";
-import { VerificationStatus } from "../../../data/enums/verification-status.enum";
-import { IOrganisationAdminData } from "../../../data/model/organisationAdmin";
-import { IOrganisationSummary } from "../../../data/model/organisationSummary";
-import { UserRole } from "../../../data/enums/user-role.enum";
-import { createUser } from "../../../data/model/user";
+} from "../../data/model/organisation";
+import { IPCStatus } from "../../data/enums/ipc-status.enum";
+import { VerificationStatus } from "../../data/enums/verification-status.enum";
+import { IOrganisationAdminData } from "../../data/model/organisationAdmin";
+import { IOrganisationSummary } from "../../data/model/organisationSummary";
+import { UserRole } from "../../data/enums/user-role.enum";
+import { createUser } from "../../data/model/user";
 
 export interface LoginCredentials {
   email: string;
@@ -23,7 +23,7 @@ export interface LoginCredentials {
   submitData?: IOrgFormData;
 }
 
-export default function SignUpWaiting(loginCredentials: LoginCredentials) {
+const SignUpWaiting = (loginCredentials: LoginCredentials) => {
   const [isLoading, setLoading] = useState(true);
   const { signUp } = useAuth();
   const { email, password, validated, submitData } = loginCredentials || {};
@@ -134,4 +134,6 @@ export default function SignUpWaiting(loginCredentials: LoginCredentials) {
       </VStack>
     </Center>
   );
-}
+};
+
+export default SignUpWaiting;
diff --git a/src/pages/Registration/index.ts b/src/pages/Registration/index.ts
new file mode 100644
index 0000000..b1dcea6
--- /dev/null
+++ b/src/pages/Registration/index.ts
@@ -0,0 +1 @@
+export { default } from './Registration';
\ No newline at end of file
diff --git a/src/features/registration/scss/registration.scss b/src/pages/Registration/registration.scss
similarity index 99%
rename from src/features/registration/scss/registration.scss
rename to src/pages/Registration/registration.scss
index f51604f..c9b4d0f 100644
--- a/src/features/registration/scss/registration.scss
+++ b/src/pages/Registration/registration.scss
@@ -1,5 +1,3 @@
-
-
 .rounded_edge_rectangle{
     background: linear-gradient(180deg, #F0F2FF 0%, #A3B2FF 100%);
     opacity: 0.96;
diff --git a/src/features/registration/scss/setup.scss b/src/pages/Registration/setup.scss
similarity index 99%
rename from src/features/registration/scss/setup.scss
rename to src/pages/Registration/setup.scss
index f51604f..c9b4d0f 100644
--- a/src/features/registration/scss/setup.scss
+++ b/src/pages/Registration/setup.scss
@@ -1,5 +1,3 @@
-
-
 .rounded_edge_rectangle{
     background: linear-gradient(180deg, #F0F2FF 0%, #A3B2FF 100%);
     opacity: 0.96;
diff --git a/src/features/user-dashboard/user-dashboard-page.tsx b/src/pages/UserDashboard/UserDashboard.tsx
similarity index 90%
rename from src/features/user-dashboard/user-dashboard-page.tsx
rename to src/pages/UserDashboard/UserDashboard.tsx
index 3f5e689..9a4678e 100644
--- a/src/features/user-dashboard/user-dashboard-page.tsx
+++ b/src/pages/UserDashboard/UserDashboard.tsx
@@ -1,10 +1,9 @@
-
 import { Box, Flex } from "@chakra-ui/react";
 import { AuthContext } from "../../data/auth/authContext";
 import { useContext } from "react";
 import { Navigate } from "react-router-dom";
 
-export default function UserDashboardPage() {
+const UserDashboard = () => {
   const authContext = useContext(AuthContext);
 
   if (authContext.user === null) {
@@ -23,4 +22,6 @@ export default function UserDashboardPage() {
       </Box>
     </Flex>
   );
-}
+};
+
+export default UserDashboard;
diff --git a/src/pages/UserDashboard/index.ts b/src/pages/UserDashboard/index.ts
new file mode 100644
index 0000000..bf6cd32
--- /dev/null
+++ b/src/pages/UserDashboard/index.ts
@@ -0,0 +1 @@
+export { default } from "./UserDashboard";
diff --git a/src/pages/style.scss b/src/pages/style.scss
new file mode 100644
index 0000000..dcd7064
--- /dev/null
+++ b/src/pages/style.scss
@@ -0,0 +1,15 @@
+.page-width {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.page-padding {
+  padding-left: min(9vw, 120px);
+  padding-right: min(9vw, 120px);
+  width: 100%;
+}
+
+// TODO: Remove before deploying to PROD
+.firebase-emulator-warning {
+  display: none;
+}
diff --git a/src/paths.ts b/src/routing/Paths.ts
similarity index 100%
rename from src/paths.ts
rename to src/routing/Paths.ts
diff --git a/src/routing/Routing.tsx b/src/routing/Routing.tsx
new file mode 100644
index 0000000..fc2eb15
--- /dev/null
+++ b/src/routing/Routing.tsx
@@ -0,0 +1,29 @@
+import { Route, Routes } from "react-router-dom";
+import { Paths } from "./Paths";
+import OrganisationList from "../pages/OrganisationList";
+import LoginPage from "../pages/Login";
+import UserDashboardPage from "../pages/UserDashboard";
+import Registration from "../pages/Registration";
+import ProfileSetupPage from "../pages/Registration/ProfileSetup";
+import OrgProfilePage from "../pages/OrganisationProfile";
+import FirestoreMock from "../mocks/FirestoreMock";
+import Home from "../pages/Home";
+
+const Routing = () => {
+  return (
+    <Routes>
+      <Route path={Paths.home} element={<Home />} />
+      <Route path={Paths.login} element={<LoginPage />} />
+      <Route path={Paths.dashboard} element={<UserDashboardPage />} />
+      <Route path={Paths.signup} element={<Registration />} />
+      <Route path={Paths.profileSetup} element={<ProfileSetupPage />} />
+      <Route path={Paths.organisationListing} element={<OrganisationList />} />
+      <Route path={Paths.organisationProfile} element={<OrgProfilePage />} />
+      {process.env.NODE_ENV === "development" && (
+        <Route path="firestore-mock" element={<FirestoreMock />} />
+      )}
+    </Routes>
+  );
+};
+
+export default Routing;
diff --git a/src/routing/index.ts b/src/routing/index.ts
new file mode 100644
index 0000000..b0173f7
--- /dev/null
+++ b/src/routing/index.ts
@@ -0,0 +1 @@
+export { default } from "./Routing";
diff --git a/src/services/Authentication.ts b/src/services/Authentication.ts
index f7f5dd6..ebf9b11 100644
--- a/src/services/Authentication.ts
+++ b/src/services/Authentication.ts
@@ -1,13 +1,12 @@
 import { AuthenticationRequestData } from "../data/auth/authRequestData";
-import http from "./http-common";
-
+import http from "./HttpCommon";
 
 const authenticate = (data: AuthenticationRequestData) => {
-    return http.post<string>("/authentication/authenticate", data);
-  };
+  return http.post<string>("/authentication/authenticate", data);
+};
 
 const AuthenticationService = {
-    authenticate
+  authenticate,
 };
 
-export default AuthenticationService;
\ No newline at end of file
+export default AuthenticationService;
diff --git a/src/services/http-common.ts b/src/services/HttpCommon.ts
similarity index 100%
rename from src/services/http-common.ts
rename to src/services/HttpCommon.ts
diff --git a/src/services/firebase/authProvider.tsx b/src/services/firebase/authProvider.tsx
index 615da62..0caf568 100644
--- a/src/services/firebase/authProvider.tsx
+++ b/src/services/firebase/authProvider.tsx
@@ -1,48 +1,57 @@
-import { useEffect,useState,useContext} from 'react'
-import { auth } from './firebaseConfig'
-import { UserCredential,User,createUserWithEmailAndPassword,signInWithEmailAndPassword,sendPasswordResetEmail,} from 'firebase/auth'
-import { AuthProviderProps } from './authProviderProps'
-import { UserContextState, UserStateContext } from '../../data/auth/userContext'
-import { AuthContextModel } from '../../data/auth/authContextModel'
-import { AuthContext } from '../../data/auth/authContext'
-
-  export function useAuth(): AuthContextModel {
-    return useContext(AuthContext)
+import { useEffect, useState, useContext } from "react";
+import { auth } from "./firebaseConfig";
+import {
+  UserCredential,
+  User,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  sendPasswordResetEmail,
+} from "firebase/auth";
+import { AuthProviderProps } from "./authProviderProps";
+import {
+  UserContextState,
+  UserStateContext,
+} from "../../data/auth/userContext";
+import { AuthContextModel } from "../../data/auth/authContextModel";
+import { AuthContext } from "../../data/auth/authContext";
+
+export function useAuth(): AuthContextModel {
+  return useContext(AuthContext);
+}
+
+export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
+  const [user, setUser] = useState<User | null>(null);
+
+  function signUp(email: string, password: string): Promise<UserCredential> {
+    return createUserWithEmailAndPassword(auth, email, password);
   }
-  
-  export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
-    const [user, setUser] = useState<User | null>(null)
-  
-    function signUp(email: string, password: string): Promise<UserCredential> {
-      return createUserWithEmailAndPassword(auth, email, password)
-    }
-  
-    function signIn(email: string, password: string): Promise<UserCredential> {
-      return signInWithEmailAndPassword(auth, email, password)
-    }
-
-    function resetPassword(email: string): Promise<void> {
-      return sendPasswordResetEmail(auth, email)
-    }
-
-    useEffect(() => {
-      //function that firebase notifies you if a user is set
-      const unsubscribe = auth.onAuthStateChanged((user) => {
-        setUser(user)
-      })
-      return unsubscribe
-    }, [])
-  
-    const values = {
-      signUp,
-      user,
-      signIn,
-      resetPassword,
-      auth,
-    }
-    return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
+
+  function signIn(email: string, password: string): Promise<UserCredential> {
+    return signInWithEmailAndPassword(auth, email, password);
   }
-  
-  export const useUserContext = (): UserContextState => {
-    return useContext(UserStateContext)
-  }
\ No newline at end of file
+
+  function resetPassword(email: string): Promise<void> {
+    return sendPasswordResetEmail(auth, email);
+  }
+
+  useEffect(() => {
+    //function that firebase notifies you if a user is set
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user);
+    });
+    return unsubscribe;
+  }, []);
+
+  const values = {
+    signUp,
+    user,
+    signIn,
+    resetPassword,
+    auth,
+  };
+  return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>;
+};
+
+export const useUserContext = (): UserContextState => {
+  return useContext(UserStateContext);
+};
diff --git a/src/theme.ts b/src/theme.ts
deleted file mode 100644
index 35a5419..0000000
--- a/src/theme.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-import { StepsTheme as Steps } from "chakra-ui-steps";
-
-export const appTheme = extendTheme({
-  fonts: {
-    body: `'Inter', sans-serif`,
-  },
-  textStyles: {
-    breadCrumbLink: {
-      fontWeight: "600",
-      color: "#3959ff",
-      fontSize: "14px",
-      textDecoration: "underline",
-      textDecorationColor: "#3959ff",
-    },
-    tableHeader: {},
-  },
-  components: {
-    Steps,
-    Table: {
-      variants: {
-        orgListings: {
-          table: {
-            tableLayout: "fixed",
-          },
-          th: {
-            fontWeight: "400",
-            fontSize: "12px",
-            letterSpacing: "0.2em",
-          },
-          thead: {
-            borderBottom: "1px solid #707070",
-          },
-          tbody: {
-            tr: {
-              borderBottom: "1px solid #CBCBCB",
-              fontSize: "12px",
-              _hover: {
-                bgColor: "#3959FF",
-                color: "white",
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-});
diff --git a/src/theme/colours.ts b/src/theme/colours.ts
new file mode 100644
index 0000000..a333f54
--- /dev/null
+++ b/src/theme/colours.ts
@@ -0,0 +1,27 @@
+export const colors = {
+  neutral: {
+    primary: "#333333",
+    secondary: "#707070",
+    inactive: "#CBCBCB",
+    white: "#333333",
+    surface: "F5F5F5",
+  },
+
+  brand: {
+    primary: "#3959FF",
+    secondary: "#192873",
+  },
+
+  interaction: {
+    primary: "#3959FF",
+    active: "#192873",
+    focus: "#879BFF",
+  },
+
+  focus: {
+    error: "#FF3939",
+    errorHighlight: "#FFEFEF",
+    success: "#79BD92",
+    successHighlight: "#9FF8BF",
+  },
+};
diff --git a/src/theme/components/accordion.ts b/src/theme/components/accordion.ts
new file mode 100644
index 0000000..71b3104
--- /dev/null
+++ b/src/theme/components/accordion.ts
@@ -0,0 +1,31 @@
+import { accordionAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+import { colors } from "../colours";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(accordionAnatomy.keys);
+
+const tocStyle = definePartsStyle({
+  container: {
+    borderBottomWidth: "1px", // Set bottom border width
+    _first: {
+      borderTopWidth: "0", // Remove top border for first item
+    },
+    _last: {
+      borderBottomWidth: "0", // Remove bottom border for last item
+    },
+  },
+  // button: {
+  //   _expanded: {
+  //     color: colors.brand.primary,
+  //   },
+  // },
+  icon: {
+    fontSize: "32px",
+    marginLeft: "auto", // Right-align the icon
+  },
+});
+
+export const Accordion = defineMultiStyleConfig({
+  variants: { tocStyle },
+});
diff --git a/src/theme/components/table.ts b/src/theme/components/table.ts
new file mode 100644
index 0000000..483dcd2
--- /dev/null
+++ b/src/theme/components/table.ts
@@ -0,0 +1,27 @@
+export const Table = {
+  variants: {
+    orgListings: {
+      table: {
+        tableLayout: "fixed",
+      },
+      th: {
+        fontWeight: "400",
+        fontSize: "12px",
+        letterSpacing: "0.2em",
+      },
+      thead: {
+        borderBottom: "1px solid #707070",
+      },
+      tbody: {
+        tr: {
+          borderBottom: "1px solid #CBCBCB",
+          fontSize: "12px",
+          _hover: {
+            bgColor: "#3959FF",
+            color: "white",
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..d22300e
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,20 @@
+import { extendTheme } from "@chakra-ui/react";
+
+import { fonts, textStyles } from "./typography";
+import { Table } from "./components/table";
+import { colors } from "./colours";
+import { Accordion } from "./components/accordion";
+
+const overrides = {
+  fonts,
+  textStyles,
+  colors,
+  // Other foundational style overrides go here
+  components: {
+    // Other components go here
+    Table,
+    Accordion,
+  },
+};
+
+export default extendTheme(overrides);
diff --git a/src/theme/styles.ts b/src/theme/styles.ts
new file mode 100644
index 0000000..8075b32
--- /dev/null
+++ b/src/theme/styles.ts
@@ -0,0 +1,32 @@
+export const textStyles = {
+  global: {
+    ".bg-lg": {
+      fontSize: "10rem",
+      fontWeight: "700",
+      letterSpacing: "-1.5%",
+    },
+    ".bg-md": {
+      fontSize: "7.5rem",
+      fontWeight: "700",
+      letterSpacing: "-1.5%",
+    },
+    ".bg-sm": {
+      fontSize: "5rem",
+      fontWeight: "700",
+      letterSpacing: "-1.5%",
+    },
+    ".bg-xs": {
+      fontSize: "3.75rem",
+      fontWeight: "700",
+      letterSpacing: "-1.5%",
+    },
+  },
+  breadCrumbLink: {
+    fontWeight: "600",
+    color: "#3959ff",
+    fontSize: "14px",
+    textDecoration: "underline",
+    textDecorationColor: "#3959ff",
+  },
+  tableHeader: {},
+};
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
new file mode 100644
index 0000000..1abf42e
--- /dev/null
+++ b/src/theme/typography.ts
@@ -0,0 +1,125 @@
+export const fonts = {
+  body: "Inter, sans-serif",
+  heading: "Inter, sans-serif",
+  mono: "Menlo, monospace",
+};
+
+const normalFontWeight = "400";
+const boldFontWeight = "700";
+
+const title = {
+  xxl: "2.5rem",
+  xl: "2rem",
+  lg: "1.5rem",
+  md: "1.125rem",
+  sm: "1rem",
+};
+
+export const textStyles = {
+  bg: {
+    lg: {
+      fontSize: "10rem",
+      fontWeight: boldFontWeight,
+    },
+    md: {
+      fontSize: "7.5rem",
+      fontWeight: boldFontWeight,
+    },
+    sm: {
+      fontSize: "5rem",
+      fontWeight: boldFontWeight,
+    },
+    xs: {
+      fontSize: "3.75rem",
+      fontWeight: boldFontWeight,
+    },
+  },
+
+  title: {
+    xxl: {
+      fontSize: title.xxl,
+      fontWeight: normalFontWeight,
+    },
+    "xxl-bold": {
+      fontSize: title.xxl,
+      fontWeight: boldFontWeight,
+    },
+    xl: {
+      fontSize: title.xl,
+      fontWeight: normalFontWeight,
+    },
+    "xl-bold": {
+      fontSize: title.xl,
+      fontWeight: boldFontWeight,
+    },
+    lg: {
+      fontSize: title.lg,
+      fontWeight: normalFontWeight,
+    },
+    "lg-bold": {
+      fontSize: title.lg,
+      fontWeight: boldFontWeight,
+    },
+    md: {
+      fontSize: title.md,
+      fontWeight: normalFontWeight,
+    },
+    "md-bold": {
+      fontSize: title.md,
+      fontWeight: boldFontWeight,
+    },
+    sm: {
+      fontSize: title.sm,
+      fontWeight: normalFontWeight,
+    },
+  },
+
+  label: {
+    lg: {
+      fontSize: "1rem",
+      fontWeight: normalFontWeight,
+    },
+    md: {
+      fontSize: "0.85rem",
+      fontWeight: normalFontWeight,
+    },
+    sm: {
+      fontSize: "0.75em",
+      fontWeight: normalFontWeight,
+    },
+  },
+
+  body: {
+    lg: {
+      fontSize: "1.125rem",
+      fontWeight: normalFontWeight,
+    },
+    md: {
+      fontSize: "1rem",
+      fontWeight: normalFontWeight,
+    },
+    "md-bold": {
+      fontSize: "1rem",
+      fontWeight: boldFontWeight,
+    },
+    sm: {
+      fontSize: "0.85rem",
+      fontWeight: normalFontWeight,
+    },
+    xs: {
+      fontSize: "0.75rem",
+      fontWeight: normalFontWeight,
+    },
+  },
+
+  link: {
+    md: {
+      fontSize: "0.85rem",
+      fontWeight: normalFontWeight,
+    },
+    sm: {
+      fontSize: "0.75rem",
+      fontWeight: normalFontWeight,
+    },
+  },
+};
diff --git a/src/utilities/icon-mappings.tsx b/src/utilities/icon-mappings.tsx
deleted file mode 100644
index 0b986a9..0000000
--- a/src/utilities/icon-mappings.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ReactComponent as AntiStigmatismIcon } from "../assets/icons/mental-health-issue/anti-stigmatism.svg";
-import { ReactComponent as FacebookIcon } from "../assets/icons/socials/facebook.svg";
-import { ReactComponent as InstagramIcon } from "../assets/icons/socials/instagram.svg";
-import { ReactComponent as LinkedInIcon } from "../assets/icons/socials/linkedin.svg";
-import { ReactComponent as YoutubeIcon } from "../assets/icons/socials/youtube.svg";
-import { ReactComponent as TiktokIcon } from "../assets/icons/socials/tiktok.svg";
-import { ReactComponent as SupportGroupIcon } from "../assets/icons/services/support-group.svg";
-import { ReactComponent as SpeakingEngagementsIcon } from "../assets/icons/services/speaking-engagements.svg";
-import { ReactComponent as PartnershipOpportunitiesIcon } from "../assets/icons/services/partnership-opportunities.svg";
-import { ReactComponent as FundingSupportIcon } from "../assets/icons/services/funding-support.svg";
-import { ReactComponent as CounsellingIcon } from "../assets/icons/services/counselling.svg";
-import { ReactComponent as CorporateTrainingIcon } from "../assets/icons/services/corporate-training.svg";
-import { SocialType } from "../data/enums/social-type.enum";
-import { Specialisation } from "../data/enums/specialisation.enum";
-import { Service } from "../data/enums/service.enum";
-import { SupportArea } from "../data/enums/support-area.enum";
-
-export function GetIconForIssue(issue: Specialisation) {
-  switch (issue) {
-    case Specialisation.AntiStigmatism:
-      return <AntiStigmatismIcon />;
-    default:
-      return null;
-  }
-}
-
-export function GetIcon(service: Service | SupportArea) {
-  switch (service) {
-    case SupportArea.FundingSupport:
-      return <FundingSupportIcon />;
-    case SupportArea.PartnershipOpportunities:
-      return <PartnershipOpportunitiesIcon />;
-    case Service.CorporateTraining:
-      return <CorporateTrainingIcon />;
-    case Service.Counselling:
-      return <CounsellingIcon />;
-    case Service.SpeakingEngagements:
-      return <SpeakingEngagementsIcon />;
-    case Service.SupportGroup:
-      return <SupportGroupIcon />;
-    default:
-      return null;
-  }
-}
-
-export function GetIconForSocials(socialType: SocialType) {
-  switch (socialType) {
-    case SocialType.Facebook:
-      return <FacebookIcon />;
-    case SocialType.Youtube:
-      return <YoutubeIcon />;
-    case SocialType.Instagram:
-      return <InstagramIcon />;
-    case SocialType.LinkedIn:
-      return <LinkedInIcon />;
-    case SocialType.TikTok:
-      return <TiktokIcon />;
-    default:
-      return null;
-  }
-}
diff --git a/src/utilities/iconMappings/iconMapping.tsx b/src/utilities/iconMappings/iconMapping.tsx
new file mode 100644
index 0000000..f5ff46e
--- /dev/null
+++ b/src/utilities/iconMappings/iconMapping.tsx
@@ -0,0 +1,61 @@
+import { ReactComponent as AntiStigmatismIcon } from "../../assets/icons/mental-health-issue/anti-stigmatism.svg";
+import { ReactComponent as FacebookIcon } from "../../assets/icons/socials/facebook.svg";
+import { ReactComponent as InstagramIcon } from "../../assets/icons/socials/instagram.svg";
+import { ReactComponent as LinkedInIcon } from "../../assets/icons/socials/linkedin.svg";
+import { ReactComponent as YoutubeIcon } from "../../assets/icons/socials/youtube.svg";
+import { ReactComponent as TiktokIcon } from "../../assets/icons/socials/tiktok.svg";
+import { ReactComponent as SupportGroupIcon } from "../../assets/icons/services/support-group.svg";
+import { ReactComponent as SpeakingEngagementsIcon } from "../../assets/icons/services/speaking-engagements.svg";
+import { ReactComponent as PartnershipOpportunitiesIcon } from "../../assets/icons/services/partnership-opportunities.svg";
+import { ReactComponent as FundingSupportIcon } from "../../assets/icons/services/funding-support.svg";
+import { ReactComponent as CounsellingIcon } from "../../assets/icons/services/counselling.svg";
+import { ReactComponent as CorporateTrainingIcon } from "../../assets/icons/services/corporate-training.svg";
+import { SocialType } from "../../data/enums/social-type.enum";
+import { Specialisation } from "../../data/enums/specialisation.enum";
+import { Service } from "../../data/enums/service.enum";
+import { SupportArea } from "../../data/enums/support-area.enum";
+
+export function GetIconForIssue(issue: Readonly<Specialisation>) {
+  switch (issue) {
+    case Specialisation.AntiStigmatism:
+      return <AntiStigmatismIcon />;
+    default:
+      return null;
+  }
+}
+
+export function GetIcon(service: Service | SupportArea) {
+  switch (service) {
+    case SupportArea.FundingSupport:
+      return <FundingSupportIcon />;
+    case SupportArea.PartnershipOpportunities:
+      return <PartnershipOpportunitiesIcon />;
+    case Service.CorporateTraining:
+      return <CorporateTrainingIcon />;
+    case Service.Counselling:
+      return <CounsellingIcon />;
+    case Service.SpeakingEngagements:
+      return <SpeakingEngagementsIcon />;
+    case Service.SupportGroup:
+      return <SupportGroupIcon />;
+    default:
+      return null;
+  }
+}
+
+export function GetIconForSocials(socialType: SocialType) {
+  switch (socialType) {
+    case SocialType.Facebook:
+      return <FacebookIcon />;
+    case SocialType.Youtube:
+      return <YoutubeIcon />;
+    case SocialType.Instagram:
+      return <InstagramIcon />;
+    case SocialType.LinkedIn:
+      return <LinkedInIcon />;
+    case SocialType.TikTok:
+      return <TiktokIcon />;
+    default:
+      return null;
+  }
+}
diff --git a/src/utilities/iconMappings/index.ts b/src/utilities/iconMappings/index.ts
new file mode 100644
index 0000000..9ee0994
--- /dev/null
+++ b/src/utilities/iconMappings/index.ts
@@ -0,0 +1 @@
+export { GetIconForIssue, GetIcon, GetIconForSocials } from "./iconMapping";
diff --git a/src/utilities/validators/index.ts b/src/utilities/validators/index.ts
new file mode 100644
index 0000000..2207000
--- /dev/null
+++ b/src/utilities/validators/index.ts
@@ -0,0 +1,9 @@
+export {
+  IsValidEmail,
+  IsValidName,
+  IsPasswordMinLength,
+  PasswordContainsLowercase,
+  PasswordContainsNumber,
+  PasswordContainsSymbol,
+  PasswordContainsUppercase,
+} from "./validators";
diff --git a/src/utilities/validators.ts b/src/utilities/validators/validators.ts
similarity index 100%
rename from src/utilities/validators.ts
rename to src/utilities/validators/validators.ts