diff --git a/assets/fonts/Inter-Bold.ttf b/assets/fonts/Inter-Bold.ttf
new file mode 100644
index 00000000..fe23eeb9
Binary files /dev/null and b/assets/fonts/Inter-Bold.ttf differ
diff --git a/assets/fonts/Inter-Medium.ttf b/assets/fonts/Inter-Medium.ttf
new file mode 100644
index 00000000..a01f3777
Binary files /dev/null and b/assets/fonts/Inter-Medium.ttf differ
diff --git a/assets/fonts/Inter-Regular.ttf b/assets/fonts/Inter-Regular.ttf
new file mode 100644
index 00000000..5e4851f0
Binary files /dev/null and b/assets/fonts/Inter-Regular.ttf differ
diff --git a/assets/fonts/Inter-SemiBold.ttf b/assets/fonts/Inter-SemiBold.ttf
new file mode 100644
index 00000000..ecc7041e
Binary files /dev/null and b/assets/fonts/Inter-SemiBold.ttf differ
diff --git a/assets/fonts/Lato_Bold.ttf b/assets/fonts/Lato_Bold.ttf
deleted file mode 100644
index 1d23c706..00000000
Binary files a/assets/fonts/Lato_Bold.ttf and /dev/null differ
diff --git a/assets/fonts/Lato_Medium.ttf b/assets/fonts/Lato_Medium.ttf
deleted file mode 100644
index 0648fb2d..00000000
Binary files a/assets/fonts/Lato_Medium.ttf and /dev/null differ
diff --git a/assets/fonts/Lato_Regular.ttf b/assets/fonts/Lato_Regular.ttf
deleted file mode 100644
index 33eba8b1..00000000
Binary files a/assets/fonts/Lato_Regular.ttf and /dev/null differ
diff --git a/assets/fonts/Lato_SemiBold.ttf b/assets/fonts/Lato_SemiBold.ttf
deleted file mode 100644
index 3b1bcccc..00000000
Binary files a/assets/fonts/Lato_SemiBold.ttf and /dev/null differ
diff --git a/patches/react-native-reanimated+3.6.3.patch b/patches/react-native-reanimated+3.6.3.patch
new file mode 100644
index 00000000..b32cd84e
--- /dev/null
+++ b/patches/react-native-reanimated+3.6.3.patch
@@ -0,0 +1,20 @@
+diff --git a/node_modules/react-native-reanimated/src/reanimated2/animation/util.ts b/node_modules/react-native-reanimated/src/reanimated2/animation/util.ts
+index f634ac7..c734a34 100644
+--- a/node_modules/react-native-reanimated/src/reanimated2/animation/util.ts
++++ b/node_modules/react-native-reanimated/src/reanimated2/animation/util.ts
+@@ -87,13 +87,9 @@ export function getReduceMotionFromConfig(config?: ReduceMotion) {
+  */
+ export function getReduceMotionForAnimation(config?: ReduceMotion) {
+   'worklet';
+-  // if the config is not defined, we want `reduceMotion` to be undefined,
+-  // so the parent animation knows if it should overwrite it
+-  if (!config) {
+-    return undefined;
+-  }
+   
+-  return getReduceMotionFromConfig(config);
++  // we must always return false here in order to prevent bottomsheets from crash on devices with 'reduce motion/animation' setting turned on
++  return false;
+ }
+ 
+ function applyProgressToMatrix(
\ No newline at end of file
diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx
index e776ae50..1618b7fe 100644
--- a/src/components/AppLoading.tsx
+++ b/src/components/AppLoading.tsx
@@ -11,10 +11,10 @@ SplashScreen.preventAutoHideAsync()
 export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   const isLoadingComplete = useCachedResources()
   const [fontsLoaded, fontError] = useFonts({
-    Lato_400Regular: require('../../assets/fonts/Lato_Regular.ttf'),
-    Lato_500Medium: require('../../assets/fonts/Lato_Medium.ttf'),
-    Lato_600SemiBold: require('../../assets/fonts/Lato_SemiBold.ttf'),
-    Lato_700Bold: require('../../assets/fonts/Lato_Bold.ttf'),
+    Inter_Regular: require('../../assets/fonts/Inter-Regular.ttf'),
+    Inter_Medium: require('../../assets/fonts/Inter-Medium.ttf'),
+    Inter_SemiBold: require('../../assets/fonts/Inter-SemiBold.ttf'),
+    Inter_Bold: require('../../assets/fonts/Inter-Bold.ttf'),
     IcoMoon: require('../../assets/icomoon/icomoon.ttf'),
   })
 
diff --git a/src/components/molecules/BootomSheetScrollables.tsx b/src/components/molecules/BootomSheetScrollables.tsx
new file mode 100644
index 00000000..24be6705
--- /dev/null
+++ b/src/components/molecules/BootomSheetScrollables.tsx
@@ -0,0 +1,11 @@
+// TODO: For some reason when using BottomSheetScrollView inside Bottom sheet modal the scrollView is rendering white space
+// Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1524
+// Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1760
+// After upgrading bottom sheet library try changing the imports, maybe it will work as expected
+// import { BottomSheetScrollView as ScrollView, BottomSheetFlatList as FlatList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet";
+import { SectionList } from 'react-native'
+import { ScrollView, FlatList } from 'react-native-gesture-handler'
+
+export const BottomSheetScrollView = ScrollView
+export const BottomSheetFlatList = FlatList
+export const BottomSheetSectionList = SectionList
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 4f4e7d1d..ff2b2f65 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,3 +1,4 @@
+export * from './BootomSheetScrollables'
 export * from './Field'
 export * from './MenuItem'
 export * from './TextArea'
diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx
index 6ffa1a5d..1ca11a7d 100644
--- a/src/design-system/bottomSheets/BottomSheet.tsx
+++ b/src/design-system/bottomSheets/BottomSheet.tsx
@@ -2,7 +2,6 @@ import { Box } from '@baca/design-system/components/Box'
 import { useSafeAreaInsets } from '@baca/hooks'
 import {
   BottomSheetModal,
-  BottomSheetScrollView,
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetView,
@@ -11,6 +10,7 @@ import { RefObject, useCallback } from 'react'
 import { Dimensions } from 'react-native'
 
 import { BottomSheetHeader } from './BottomSheetHeader'
+import { BottomSheetScrollView } from '../../components/molecules'
 
 const screenHeight = Dimensions.get('screen').height
 
diff --git a/src/design-system/bottomSheets/BottomSheetFlatList.tsx b/src/design-system/bottomSheets/BottomSheetFlatList.tsx
index c5e03320..979bdb8a 100644
--- a/src/design-system/bottomSheets/BottomSheetFlatList.tsx
+++ b/src/design-system/bottomSheets/BottomSheetFlatList.tsx
@@ -1 +1,2 @@
-export { BottomSheetFlatList } from '@gorhom/bottom-sheet'
+// export { BottomSheetFlatList } from '@gorhom/bottom-sheet'
+export { BottomSheetFlatList } from '../../components/molecules'
diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
index 262fe22f..eba2a4ed 100644
--- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`Button renders correctly 1`] = `
     style={
       {
         "color": "#FFFFFF",
-        "fontFamily": "Lato_600Semibold",
+        "fontFamily": "Inter_Semibold",
         "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "400",
diff --git a/src/design-system/components/Text/Text.test.tsx b/src/design-system/components/Text/Text.test.tsx
index 2c584bfe..616525ce 100644
--- a/src/design-system/components/Text/Text.test.tsx
+++ b/src/design-system/components/Text/Text.test.tsx
@@ -10,7 +10,7 @@ console.warn = jest.fn()
 
 const defaultTextStyles = {
   color: theme.light.colors.text.brand.primary,
-  fontFamily: 'Lato_400Regular',
+  fontFamily: 'Inter_Regular',
   fontSize: 16,
   fontWeight: '400',
   textTransform: 'none',
@@ -136,7 +136,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 48,
       fontWeight: '400',
     })
@@ -146,7 +146,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.LgRegular>Hello World</Display.LgRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 48,
       fontWeight: '400',
     })
@@ -160,7 +160,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 48,
       fontWeight: '700',
     })
@@ -170,7 +170,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.LgBold>Hello World</Display.LgBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 48,
       fontWeight: '700',
     })
@@ -184,7 +184,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 36,
       fontWeight: '400',
     })
@@ -194,7 +194,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.MdRegular>Hello World</Display.MdRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 36,
       fontWeight: '400',
     })
@@ -208,7 +208,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 36,
       fontWeight: '700',
     })
@@ -218,7 +218,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.MdBold>Hello World</Display.MdBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 36,
       fontWeight: '700',
     })
@@ -232,7 +232,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 30,
       fontWeight: '400',
     })
@@ -242,7 +242,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.SmRegular>Hello World</Display.SmRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 30,
       fontWeight: '400',
     })
@@ -256,7 +256,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 30,
       fontWeight: '700',
     })
@@ -266,7 +266,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.SmBold>Hello World</Display.SmBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 30,
       fontWeight: '700',
     })
@@ -280,7 +280,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 24,
       fontWeight: '400',
     })
@@ -290,7 +290,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.XsRegular>Hello World</Display.XsRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 24,
       fontWeight: '400',
     })
@@ -304,7 +304,7 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 24,
       fontWeight: '700',
     })
@@ -314,7 +314,7 @@ describe('Text', () => {
     const { getByText } = render(<Display.XsBold>Hello World</Display.XsBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 24,
       fontWeight: '700',
     })
@@ -324,7 +324,7 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="XlRegular">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 20,
       fontWeight: '400',
     })
@@ -334,7 +334,7 @@ describe('Text', () => {
     const { getByText } = render(<Text.XlRegular>Hello World</Text.XlRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 20,
       fontWeight: '400',
     })
@@ -344,7 +344,7 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="XlBold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 20,
       fontWeight: '700',
     })
@@ -354,7 +354,7 @@ describe('Text', () => {
     const { getByText } = render(<Text.XlBold>Hello World</Text.XlBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 20,
       fontWeight: '700',
     })
@@ -364,7 +364,7 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="LgRegular">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 18,
       fontWeight: '400',
     })
@@ -374,7 +374,7 @@ describe('Text', () => {
     const { getByText } = render(<Text.LgRegular>Hello World</Text.LgRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_400Regular',
+      fontFamily: 'Inter_Regular',
       fontSize: 18,
       fontWeight: '400',
     })
@@ -384,7 +384,7 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="LgBold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 18,
       fontWeight: '700',
     })
@@ -394,7 +394,7 @@ describe('Text', () => {
     const { getByText } = render(<Text.LgBold>Hello World</Text.LgBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato_700Bold',
+      fontFamily: 'Inter_Bold',
       fontSize: 18,
       fontWeight: '700',
     })
diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts
index e049d9c7..594bd2e5 100644
--- a/src/design-system/config/theme.ts
+++ b/src/design-system/config/theme.ts
@@ -122,10 +122,10 @@ export const fontWeights: { [key in FontWeight]: '400' | '500' | '600' | '700' }
 } as const
 
 export const fonts: { [key in FontWeight]: string } = {
-  Regular: 'Lato_400Regular',
-  Medium: 'Lato_500Medium',
-  Semibold: 'Lato_600Semibold',
-  Bold: 'Lato_700Bold',
+  Regular: 'Inter_Regular',
+  Medium: 'Inter_Medium',
+  Semibold: 'Inter_Semibold',
+  Bold: 'Inter_Bold',
 } as const
 
 export const scale = fontTextSize.md