diff --git a/apps/expo/src/app/(app)/appointments/index.tsx b/apps/expo/src/app/(app)/appointments/index.tsx
index 4abe053..ab6daaa 100644
--- a/apps/expo/src/app/(app)/appointments/index.tsx
+++ b/apps/expo/src/app/(app)/appointments/index.tsx
@@ -129,6 +129,11 @@ const Appointments = () => {
             </TouchableOpacity>
           </View>
           {slotsLoading && <ActivityIndicator />}
+          {slots?.total === 0 && (
+            <Text italic className="text-center text-xl">
+              No available appointments
+            </Text>
+          )}
           <FlatList
             showsVerticalScrollIndicator={false}
             className="pb-20"
diff --git a/apps/expo/src/app/(app)/home/allergy.tsx b/apps/expo/src/app/(app)/home/allergy.tsx
index 83dd71e..585d163 100644
--- a/apps/expo/src/app/(app)/home/allergy.tsx
+++ b/apps/expo/src/app/(app)/home/allergy.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { router } from 'expo-router';
+import { Button } from '@/components/atoms/Button';
 import { Text } from '@/components/atoms/Text';
 import { ScreenView } from '@/components/molecules/ScreenView';
 import { useAuth } from '@/context/AuthContext';
@@ -13,6 +15,11 @@ const Allergy = () => {
         <Text className="mt-8 text-xl">
           To update your allergies, please reach out to your care team
         </Text>
+        <View className="mt-8 flex flex-row gap-8">
+          <View className="flex-1">
+            <Button text="Close" variant="secondary" onPress={() => router.push('..')} />
+          </View>
+        </View>
       </ScrollView>
     </ScreenView>
   ) : null;
diff --git a/apps/expo/src/app/(app)/home/index.tsx b/apps/expo/src/app/(app)/home/index.tsx
index 57be380..fc24a6a 100644
--- a/apps/expo/src/app/(app)/home/index.tsx
+++ b/apps/expo/src/app/(app)/home/index.tsx
@@ -201,7 +201,7 @@ const Home = () => {
           )}
           <Button
             text="Find Vaccines"
-            className="mt-4"
+            className="mb-24 mt-4"
             onPress={() => Linking.openURL('https://www.vaccines.gov')}
           />
         </View>
diff --git a/apps/expo/src/app/(app)/profile/about.tsx b/apps/expo/src/app/(app)/profile/about.tsx
index a9c20e6..ea8db70 100644
--- a/apps/expo/src/app/(app)/profile/about.tsx
+++ b/apps/expo/src/app/(app)/profile/about.tsx
@@ -1,14 +1,50 @@
-import React from 'react';
-import { ActivityIndicator, ScrollView, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { ActivityIndicator, Alert, View } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { Button } from '@/components/atoms/Button';
+import { Skeleton } from '@/components/atoms/Skeleton';
 import { Text } from '@/components/atoms/Text';
+import { AddEditDemographicsModal } from '@/components/molecules/AddEditDemographicsModal';
+import { AddGoalModal } from '@/components/molecules/AddGoalModal';
 import { ScreenView } from '@/components/molecules/ScreenView';
+import { type DemographicsFormType } from '@/components/organisms/DemographicsForm';
+import { DemographicsInfo } from '@/components/organisms/DemographicsInfo';
 import { usePatient } from '@/context/PatientContext';
-
-// import { getEthnicities, getRaces } from '@/fhirpath/patient';
+import { getCodeFromConcept } from '@/fhirpath/utils';
+import { palette } from '@/theme/colors';
+import { api } from '@/utils/api';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 const About = () => {
+  const [goalModalOpen, setGoalModalOpen] = useState(false);
+  const [demographicsModalOpen, setDemographicsModalOpen] = useState(false);
+
   const { patient, isLoading } = usePatient();
 
+  const { data: goalBundle, isLoading: goalsLoading } = api.goal.search.useQuery(
+    {
+      patient: patient!.id,
+    },
+    {
+      enabled: patient != null,
+    },
+  );
+
+  const utils = api.useUtils();
+  const updatePatientMutation = api.patient.update.useMutation({
+    onSuccess: async () => {
+      await utils.patient.get.invalidate();
+      setDemographicsModalOpen(false);
+    },
+    onError: () => {
+      Alert.alert('Something went wrong');
+    },
+  });
+
+  const handleDemographicsSave = useCallback((_form: DemographicsFormType) => {
+    Alert.alert('TODO: update patient resource');
+  }, []);
+
   if (isLoading) {
     return (
       <ScreenView>
@@ -20,13 +56,59 @@ const About = () => {
   }
 
   return patient ? (
-    <ScreenView>
-      <ScrollView className="h-full" showsVerticalScrollIndicator={false}>
-        <Text className="text-2xl" weight="bold">
-          About Me
-        </Text>
-      </ScrollView>
-    </ScreenView>
+    <>
+      <ScreenView>
+        <KeyboardAwareScrollView className="h-full" showsVerticalScrollIndicator={false}>
+          <View>
+            <Text className="text-3xl" weight="bold">
+              Healthcare Goals
+            </Text>
+            <View>
+              {goalsLoading && <Skeleton className="bg-coolGray-200 h-10 w-full" />}
+              {!goalsLoading &&
+                goalBundle?.entry
+                  ?.filter(
+                    ({ resource }) => getCodeFromConcept(resource.achievementStatus) !== 'achieved',
+                  )
+                  .map(({ resource: goal }) => (
+                    <View key={goal.id} className="flex flex-row">
+                      <MaterialCommunityIcons
+                        name="format-quote-open"
+                        size={36}
+                        color={palette.cyan[300]}
+                      />
+                      <View className="self-end">
+                        <Text className="text-lg">{goal.description.text}</Text>
+                      </View>
+                    </View>
+                  ))}
+              <View className="mt-8">
+                <Button text="Add Goal" onPress={() => setGoalModalOpen(true)} />
+              </View>
+            </View>
+          </View>
+          <View className="mt-8 pb-24">
+            <Text className="text-3xl" weight="bold">
+              Demographics
+            </Text>
+            <View className="mt-4">
+              <DemographicsInfo patient={patient} />
+              <View className="mt-8">
+                <Button text="Update Demographics" onPress={() => setDemographicsModalOpen(true)} />
+              </View>
+            </View>
+          </View>
+        </KeyboardAwareScrollView>
+      </ScreenView>
+      <AddGoalModal isOpen={goalModalOpen} onClose={() => setGoalModalOpen(false)} />
+      <AddEditDemographicsModal
+        isOpen={demographicsModalOpen}
+        onClose={() => setDemographicsModalOpen(false)}
+        onSubmit={handleDemographicsSave}
+        patient={patient}
+        isMutating={updatePatientMutation.isPending}
+      />
+    </>
   ) : null;
 };
 
diff --git a/apps/expo/src/app/(app)/profile/billing.tsx b/apps/expo/src/app/(app)/profile/billing.tsx
index 9020362..5f937bc 100644
--- a/apps/expo/src/app/(app)/profile/billing.tsx
+++ b/apps/expo/src/app/(app)/profile/billing.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Button } from '@/components/atoms/Button';
+import { Skeleton } from '@/components/atoms/Skeleton';
 import { Text } from '@/components/atoms/Text';
 import { AddEditInsuranceModal } from '@/components/molecules/AddEditInsuranceModal';
 import { ScreenView } from '@/components/molecules/ScreenView';
@@ -16,7 +17,7 @@ const Billing = () => {
   const { patientId } = useAuth();
   const [insuranceModalOpen, setInsuranceModalOpen] = useState(false);
 
-  const { data: coverageBundle } = api.coverage.search.useQuery(
+  const { data: coverageBundle, isLoading: coverageLoading } = api.coverage.search.useQuery(
     {
       patient: patientId!,
     },
@@ -65,13 +66,15 @@ const Billing = () => {
             </Text>
           </View>
           <View className="mt-8 flex gap-4">
-            {coverageBundle?.entry
-              ?.filter(({ resource }) => resource.status === 'active')
-              .map(({ resource }) => (
-                <Fragment key={resource.id}>
-                  <CoverageDetail coverage={resource} patientId={patientId} />
-                </Fragment>
-              ))}
+            {coverageLoading && <Skeleton className="bg-coolGray-200 h-52 w-full" />}
+            {!coverageLoading &&
+              coverageBundle?.entry
+                ?.filter(({ resource }) => resource.status === 'active')
+                .map(({ resource }) => (
+                  <Fragment key={resource.id}>
+                    <CoverageDetail coverage={resource} patientId={patientId} />
+                  </Fragment>
+                ))}
           </View>
           <View className="mt-8">
             <Button text="Add New Insurance" onPress={() => setInsuranceModalOpen(true)} />
diff --git a/apps/expo/src/app/(app)/profile/index.tsx b/apps/expo/src/app/(app)/profile/index.tsx
index d6eb8ce..a96081c 100644
--- a/apps/expo/src/app/(app)/profile/index.tsx
+++ b/apps/expo/src/app/(app)/profile/index.tsx
@@ -84,7 +84,7 @@ const Profile = () => {
             />
           </TouchableOpacity>
         </View>
-        <View className="mt-24">
+        <View className="mt-12">
           <Button onPress={signOut} variant="secondary" text="Log Out" />
         </View>
       </ScrollView>
diff --git a/apps/expo/src/components/atoms/Chip.tsx b/apps/expo/src/components/atoms/Chip.tsx
new file mode 100644
index 0000000..975cbd6
--- /dev/null
+++ b/apps/expo/src/components/atoms/Chip.tsx
@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+
+import { Text } from './Text';
+
+export const Chip = ({ text }: { text?: string }) => {
+  return (
+    <View className="rounded-full bg-cyan-200 p-4">
+      <Text className="text-coolGray-700 text-xl">{text}</Text>
+    </View>
+  );
+};
diff --git a/apps/expo/src/components/molecules/AddEditDemographicsModal.tsx b/apps/expo/src/components/molecules/AddEditDemographicsModal.tsx
new file mode 100644
index 0000000..fc37383
--- /dev/null
+++ b/apps/expo/src/components/molecules/AddEditDemographicsModal.tsx
@@ -0,0 +1,41 @@
+import { Modal } from 'react-native';
+import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown';
+
+import { type Patient } from '@careforge/canvas';
+
+import { ScreenView } from '../molecules/ScreenView';
+import { DemographicsForm, type DemographicsFormType } from '../organisms/DemographicsForm';
+
+export const AddEditDemographicsModal = ({
+  isOpen,
+  onSubmit,
+  onClose,
+  patient,
+  isMutating,
+}: {
+  patient: Patient;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (form: DemographicsFormType) => void;
+  isMutating?: boolean;
+}) => {
+  return (
+    <Modal
+      animationType="slide"
+      visible={isOpen}
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <AutocompleteDropdownContextProvider>
+        <ScreenView>
+          <DemographicsForm
+            onCancel={onClose}
+            onSubmit={onSubmit}
+            isMutating={isMutating}
+            patient={patient}
+          />
+        </ScreenView>
+      </AutocompleteDropdownContextProvider>
+    </Modal>
+  );
+};
diff --git a/apps/expo/src/components/molecules/AddGoalModal.tsx b/apps/expo/src/components/molecules/AddGoalModal.tsx
new file mode 100644
index 0000000..eccd4f3
--- /dev/null
+++ b/apps/expo/src/components/molecules/AddGoalModal.tsx
@@ -0,0 +1,32 @@
+import { Modal, ScrollView, View } from 'react-native';
+import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown';
+
+import { Button } from '../atoms/Button';
+import { Text } from '../atoms/Text';
+import { ScreenView } from '../molecules/ScreenView';
+
+export const AddGoalModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
+  return (
+    <Modal
+      animationType="slide"
+      visible={isOpen}
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <AutocompleteDropdownContextProvider>
+        <ScreenView>
+          <ScrollView className="h-full">
+            <Text className="mt-8 text-xl">
+              To update your health goals, please reach out to your care team
+            </Text>
+            <View className="mt-8 flex flex-row gap-8">
+              <View className="flex-1">
+                <Button text="Close" variant="secondary" onPress={onClose} />
+              </View>
+            </View>
+          </ScrollView>
+        </ScreenView>
+      </AutocompleteDropdownContextProvider>
+    </Modal>
+  );
+};
diff --git a/apps/expo/src/components/molecules/DetailCard.tsx b/apps/expo/src/components/molecules/DetailCard.tsx
index 9107183..cccae01 100644
--- a/apps/expo/src/components/molecules/DetailCard.tsx
+++ b/apps/expo/src/components/molecules/DetailCard.tsx
@@ -19,11 +19,11 @@ export const DetailCard = ({
       <View className="bg-coolGray-700 border-coolGray-300 flex flex-row items-center justify-between rounded-md border px-4 py-8">
         <View className="flex flex-row items-center">
           {leftIcon}
-          <View className="pl-2">
+          <View className="pl-2 pr-2">
             <Text className="text-lg">{text}</Text>
           </View>
+          {rightIcon}
         </View>
-        {rightIcon}
       </View>
     </TouchableOpacity>
   );
diff --git a/apps/expo/src/components/organisms/ConsentDetail.tsx b/apps/expo/src/components/organisms/ConsentDetail.tsx
index d428cf2..41a2349 100644
--- a/apps/expo/src/components/organisms/ConsentDetail.tsx
+++ b/apps/expo/src/components/organisms/ConsentDetail.tsx
@@ -24,7 +24,7 @@ export const ConsentDetail = ({ consent }: { consent: Consent }) => {
         text={`${getConsentName(consent)} (${
           consent.status === 'active' ? 'Accepted' : 'Rejected'
         })`}
-        rightIcon={<Ionicons name="document" size={24} color={palette.cyan[700]} />}
+        leftIcon={<Ionicons name="document" size={24} color={palette.cyan[700]} />}
         onPress={() => setIsOpen(true)}
       />
       <Modal
diff --git a/apps/expo/src/components/organisms/DemographicsForm.tsx b/apps/expo/src/components/organisms/DemographicsForm.tsx
new file mode 100644
index 0000000..cbaff8d
--- /dev/null
+++ b/apps/expo/src/components/organisms/DemographicsForm.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { View } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { type Patient } from '@careforge/canvas';
+
+import { Button } from '../atoms/Button';
+import { Text } from '../atoms/Text';
+
+const DemographicsFormSchema = z.object({});
+
+export type DemographicsFormType = z.infer<typeof DemographicsFormSchema>;
+
+export const DemographicsForm = ({
+  patient: _patient,
+  onSubmit,
+  onCancel,
+  isMutating,
+}: {
+  patient: Patient;
+  onSubmit: (form: DemographicsFormType) => void;
+  onCancel: () => void;
+  isMutating?: boolean;
+}) => {
+  const {
+    formState: { isValid },
+    handleSubmit,
+  } = useForm<DemographicsFormType>({
+    resolver: zodResolver(DemographicsFormSchema),
+    defaultValues: {},
+  });
+
+  return (
+    <KeyboardAwareScrollView showsVerticalScrollIndicator={false} className="h-full">
+      <Text className="text-3xl" weight="bold">
+        Edit Demographics
+      </Text>
+      <View className="mt-8 flex gap-8">
+        <Text>TODO</Text>
+      </View>
+      <View className="mt-8 flex flex-row gap-8">
+        <View className="flex-1">
+          <Button text="Cancel" variant="secondary" onPress={onCancel} />
+        </View>
+        <View className="flex-1">
+          <Button
+            disabled={!isValid}
+            text="Save"
+            onPress={handleSubmit(onSubmit)}
+            isLoading={isMutating}
+          />
+        </View>
+      </View>
+    </KeyboardAwareScrollView>
+  );
+};
diff --git a/apps/expo/src/components/organisms/DemographicsInfo.tsx b/apps/expo/src/components/organisms/DemographicsInfo.tsx
new file mode 100644
index 0000000..1e6bab6
--- /dev/null
+++ b/apps/expo/src/components/organisms/DemographicsInfo.tsx
@@ -0,0 +1,49 @@
+import { Fragment } from 'react';
+import { View } from 'react-native';
+import { getEthnicities, getGenderIdentity, getRaces } from '@/fhirpath/patient';
+
+import { type Patient } from '@careforge/canvas';
+
+import { Chip } from '../atoms/Chip';
+import { Text } from '../atoms/Text';
+
+export const DemographicsInfo = ({ patient }: { patient: Patient }) => {
+  const races = getRaces(patient);
+  const ethnicities = getEthnicities(patient);
+  const genderIdentity = getGenderIdentity(patient);
+
+  return (
+    <>
+      <View className="flex gap-8">
+        <View>
+          <Text className="mb-2 pl-1 text-2xl">Race</Text>
+          <View className="flex flex-row flex-wrap gap-2">
+            {races.map((race) => (
+              <Fragment key={race}>
+                <Chip text={race} />
+              </Fragment>
+            ))}
+          </View>
+        </View>
+        <View>
+          <Text className="mb-2 pl-1 text-2xl">Ethnicity</Text>
+          <View className="flex flex-row flex-wrap gap-2">
+            {ethnicities.map((ethnicity) => (
+              <Fragment key={ethnicity}>
+                <Chip text={ethnicity} />
+              </Fragment>
+            ))}
+          </View>
+        </View>
+        {genderIdentity && (
+          <View>
+            <Text className="mb-2 pl-1 text-2xl">Gender Identity</Text>
+            <View className="flex flex-row">
+              <Chip text={genderIdentity} />
+            </View>
+          </View>
+        )}
+      </View>
+    </>
+  );
+};
diff --git a/apps/expo/src/fhirpath/patient.ts b/apps/expo/src/fhirpath/patient.ts
index d62d769..4b429a2 100644
--- a/apps/expo/src/fhirpath/patient.ts
+++ b/apps/expo/src/fhirpath/patient.ts
@@ -1,3 +1,4 @@
+import { GENDER_CODE_TO_DISPLAY, type GenderCode, type GenderIdentity } from '@/types/patient';
 import fhirpath from 'fhirpath';
 
 import { type Patient } from '@careforge/canvas';
@@ -49,6 +50,8 @@ export function getPhone(patient: Patient): string | undefined {
 
 const RACE_EXTENSION_URL = 'http://hl7.org/fhir/us/core/StructureDefinition/us-core-race';
 const ETHNICITY_EXTENSION_URL = 'http://hl7.org/fhir/us/core/StructureDefinition/us-core-ethnicity';
+const GENDER_IDENTITY_EXTENSION_URL =
+  'http://hl7.org/fhir/us/core/StructureDefinition/us-core-genderIdentity';
 
 export function getRaces(patient: Patient): string[] {
   const races = fhirpath.evaluate(
@@ -67,3 +70,14 @@ export function getEthnicities(patient: Patient): string[] {
 
   return races;
 }
+
+export function getGenderIdentity(patient: Patient): GenderIdentity | undefined {
+  const [code] = fhirpath.evaluate(
+    patient,
+    `extension.where(url='${GENDER_IDENTITY_EXTENSION_URL}').valueCodeableConcept.coding.first().code`,
+  ) as GenderCode[];
+
+  if (!code) return undefined;
+
+  return GENDER_CODE_TO_DISPLAY[code];
+}
diff --git a/apps/expo/src/fhirpath/utils.ts b/apps/expo/src/fhirpath/utils.ts
new file mode 100644
index 0000000..edd09a6
--- /dev/null
+++ b/apps/expo/src/fhirpath/utils.ts
@@ -0,0 +1,19 @@
+import fhirpath from 'fhirpath';
+
+import { type CodeableConcept } from '@careforge/canvas';
+
+export function getCodeFromConcept(codeableConcept?: CodeableConcept): string | undefined {
+  if (!codeableConcept) return undefined;
+
+  const [code] = fhirpath.evaluate(codeableConcept, 'coding.first().code') as string[];
+
+  return code;
+}
+
+export function getDisplayFromConcept(codeableConcept?: CodeableConcept): string | undefined {
+  if (!codeableConcept) return undefined;
+
+  const [display] = fhirpath.evaluate(codeableConcept, 'coding.first().display') as string[];
+
+  return display;
+}
diff --git a/apps/expo/src/types/patient.ts b/apps/expo/src/types/patient.ts
new file mode 100644
index 0000000..5289f6e
--- /dev/null
+++ b/apps/expo/src/types/patient.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod';
+
+export const genderCodes = [
+  '446151000124109',
+  '446141000124107',
+  '407377005',
+  '407376001',
+  '446131000124102',
+  'ASKU',
+  'OTH',
+] as const;
+export const GenderCodeSchema = z.enum(genderCodes);
+export type GenderCode = (typeof genderCodes)[number];
+
+export const genderIdentityOptions = [
+  'Male',
+  'Female',
+  'Transgender Man',
+  'Transgender Woman',
+  'Non-conforming',
+  'Other',
+  'Choose not to disclose',
+] as const;
+export const GenderIdentitySchema = z.enum(genderIdentityOptions);
+export type GenderIdentity = (typeof genderIdentityOptions)[number];
+
+// The default displays for these codes are not very user-friendly
+// Handling it here instead
+export const GENDER_CODE_TO_DISPLAY: Readonly<Record<GenderCode, GenderIdentity>> = {
+  '446151000124109': 'Male',
+  '446141000124107': 'Female',
+  '407377005': 'Transgender Man',
+  '407376001': 'Transgender Woman',
+  '446131000124102': 'Non-conforming',
+  ASKU: 'Choose not to disclose',
+  OTH: 'Other',
+} as const;
+
+export const GENDER_DISPLAY_TO_CODE: Readonly<Record<GenderIdentity, GenderCode>> = {
+  Male: '446151000124109',
+  Female: '446141000124107',
+  'Transgender Man': '407377005',
+  'Transgender Woman': '407376001',
+  'Non-conforming': '446131000124102',
+  'Choose not to disclose': 'ASKU',
+  Other: 'OTH',
+} as const;
diff --git a/packages/canvas/src/models/core/codeableconcept.ts b/packages/canvas/src/models/core/codeableconcept.ts
index f4640b0..3993d55 100644
--- a/packages/canvas/src/models/core/codeableconcept.ts
+++ b/packages/canvas/src/models/core/codeableconcept.ts
@@ -6,3 +6,5 @@ export const CodeableConceptSchema = z.object({
   coding: z.array(CodingSchema).optional(),
   text: z.string().optional(),
 });
+
+export type CodeableConcept = z.infer<typeof CodeableConceptSchema>;