diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9e60cba6..2586cddb 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { Grid, ThemeProvider, StyledEngineProvider } from '@mui/material';
 
@@ -17,6 +16,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
 import './App.css';
+import { SettingsProvider } from './providers/SettingsProvider';
 
 const queryClient = new QueryClient();
 
@@ -28,29 +28,31 @@ function App(): JSX.Element {
           <ReactQueryDevtools />
           <ErrorBoundary fallback={GeneralError}>
             <UserProvider>
-              <ModalProvider>
-                <BrowserRouter
-                  getUserConfirmation={() => {
-                    // intentionally left empty callback to block the default browser prompt.
-                  }}
-                >
-                  <Grid
-                    className="App"
-                    display="flex"
-                    flexDirection="column"
-                    height="100vh"
-                    width="100vw"
-                    justifyContent="space-between"
+              <SettingsProvider>
+                <ModalProvider>
+                  <BrowserRouter
+                    getUserConfirmation={() => {
+                      // intentionally left empty callback to block the default browser prompt.
+                    }}
                   >
-                    <Header />
-                    <ErrorBoundary fallback={NotFound}>
-                      <Main />
-                    </ErrorBoundary>
-                    <Footer />
-                    <Modal />
-                  </Grid>
-                </BrowserRouter>
-              </ModalProvider>
+                    <Grid
+                      className="App"
+                      display="flex"
+                      flexDirection="column"
+                      height="100vh"
+                      width="100vw"
+                      justifyContent="space-between"
+                    >
+                      <Header />
+                      <ErrorBoundary fallback={NotFound}>
+                        <Main />
+                      </ErrorBoundary>
+                      <Footer />
+                      <Modal />
+                    </Grid>
+                  </BrowserRouter>
+                </ModalProvider>
+              </SettingsProvider>
             </UserProvider>
           </ErrorBoundary>
         </QueryClientProvider>
diff --git a/client/src/components/Users/Auth/SignUpCitizen/StepThree.tsx b/client/src/components/Users/Auth/SignUpCitizen/StepThree.tsx
index dd52724d..18290afd 100644
--- a/client/src/components/Users/Auth/SignUpCitizen/StepThree.tsx
+++ b/client/src/components/Users/Auth/SignUpCitizen/StepThree.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Box, Chip, Button, Grid, Typography } from '@mui/material';
 
-import { interests } from './constants/interests';
-
 import { useStyles } from './styles/styles';
+import { SettingsContext } from '../../../../providers/SettingsProvider';
 
 type TStepThreeProps = {
   initData: { interests: string[] };
@@ -15,19 +14,20 @@ export default function StepThree({ initData, handleBack, handleNext }: TStepThr
   const { classes } = useStyles();
 
   const [formData, setFormData] = useState<{ interests: string[] }>(initData);
+  const { orgCategories } = useContext(SettingsContext);
 
   const makeChips = () => {
-    return interests.map((interest) => {
-      // TODO: toggle chip style when interest is chosen
-      const isSelected = formData.interests.includes(interest);
+    console.log('orgCategories', orgCategories);
+    return orgCategories().map((interest) => {
+      const isSelected = formData.interests.includes(interest.name);
       return (
         <Chip
-          key={interest}
+          key={interest.id}
           className={`${classes.chip} ${isSelected && classes.selectedChip}`}
-          label={interest}
+          label={interest.name}
           sx={{ fontSize: '16px' }}
           variant="outlined"
-          onClick={() => toggleInterest(interest)}
+          onClick={() => toggleInterest(interest.name)}
         />
       );
     });
diff --git a/client/src/components/Users/Auth/SignUpCitizen/constants/interests.ts b/client/src/components/Users/Auth/SignUpCitizen/constants/interests.ts
deleted file mode 100644
index dae1e7bb..00000000
--- a/client/src/components/Users/Auth/SignUpCitizen/constants/interests.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const interests: string[] = [
-  'paper products',
-  'furniture',
-  'Animal Care & Services',
-  'Poverty',
-  'Housing & Homeless',
-  'Youth & Children',
-  'Disaster Relief',
-  'Health Care & Welness',
-  'Environment & Sustainability',
-  'Sports & Recreation',
-  'Seniors',
-  'Religion, Faith & Spirituality',
-  'Civic Engagement',
-  'LGTBQIA+',
-  'Civil Rights & Advocacy',
-  'Military & Veterans',
-  'Social Justice',
-  'Education & Literacy',
-  'Arts & Culture',
-];
diff --git a/client/src/components/Users/Auth/SignUpCitizen/validation-rules.ts b/client/src/components/Users/Auth/SignUpCitizen/validation-rules.ts
deleted file mode 100644
index 6be00f10..00000000
--- a/client/src/components/Users/Auth/SignUpCitizen/validation-rules.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as Yup from 'yup';
-import { interests } from './constants/interests';
-
-export const validationSchema = Yup.object().shape({
-  firstName: Yup.string().required('Required'),
-  last_name: Yup.string().required('Required'),
-  email: Yup.string().email('Invalid email').required('Required'),
-  password: Yup.string()
-    .min(8, 'Password is too short - should be 8 chars minimum.')
-    .required('Required'),
-  accept_terms: Yup.boolean()
-    .required('The terms and conditions must be accepted.')
-    .oneOf([true], 'The terms and conditions must be accepted.'),
-  email_notification_opt_out: Yup.boolean(),
-  city: Yup.string(),
-  state: Yup.string(),
-  zip: Yup.string()
-    .required('Required')
-    .min(5, 'Zipcode is too short - should be 5 digits minimum.'),
-  interests: Yup.string().required('Required').not(['Select classification']).oneOf(interests),
-  image_url: Yup.string()
-    .matches(/https:\/\/\S+.(jpeg|jpg|png|svg)/, 'Please use a valid image url')
-    .required('Required'),
-  bio: Yup.string().required('Required'),
-});
diff --git a/client/src/providers/SettingsProvider.tsx b/client/src/providers/SettingsProvider.tsx
new file mode 100644
index 00000000..fd8c8e1c
--- /dev/null
+++ b/client/src/providers/SettingsProvider.tsx
@@ -0,0 +1,65 @@
+import { ReactNode, createContext, useEffect, useRef } from 'react';
+import { Category } from '../types';
+import { APP_API_BASE_URL } from '../configs';
+
+export interface Settings {
+  categories: () => Category[];
+  setCategories: (categories: Category[]) => void;
+  orgCategories: () => Category[];
+}
+
+interface Props {
+  children: ReactNode;
+}
+
+export const SettingsContext = createContext<Settings>({
+  categories: () => [],
+  setCategories: () => {},
+  orgCategories: () => [],
+});
+
+/**
+ * SettingsProvider will load the categories from the API and store them in memory.
+ *
+ * To re-load the categories, call fetchCategories().
+ * @param children
+ * @returns
+ */
+export const SettingsProvider = ({ children }: Props) => {
+  const _categoriesRef = useRef<Category[]>([]);
+
+  useEffect(() => {
+    const _fetchCategories = async () => {
+      await fetchCategories();
+    };
+
+    _fetchCategories().catch(() => console.log('Error initializing SettingsProvider'));
+  }, []);
+
+  const setCategories = (_categories: Category[]) => {
+    _categoriesRef.current = [..._categories];
+  };
+
+  const categories = () => [..._categoriesRef.current];
+
+  const orgCategories = () => {
+    return [..._categoriesRef.current.filter((category) => category.applies_to_organizations)];
+  };
+  const fetchCategories = async () => {
+    try {
+      const res = await fetch(`${APP_API_BASE_URL}/categories`);
+      const response = (await res.json()) satisfies Category[];
+      if (res.ok) {
+        _categoriesRef.current = [...response];
+      }
+    } catch (error) {
+      console.log('Error fetching Categorie', error);
+    }
+  };
+
+  return (
+    <SettingsContext.Provider value={{ categories, setCategories, orgCategories }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};