diff --git a/client/App.tsx b/client/App.tsx
index 2fdfb75..e266d1b 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -1,23 +1,45 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
-import { getAllMedications } from './services/medication';
-import UnionSvg from './assets/Union.svg';
+import { Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NavigationContainer, NavigationProp } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Medication from './screens/Medication';
+import Home from './assets/home.svg';
 
+export type ScreenNames = ['BottomNav', 'Landing'];
+export type RootStackParamList = Record<ScreenNames[number], any>;
+export type StackNavigation = NavigationProp<RootStackParamList>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+const Tab = createBottomTabNavigator();
+
+// TODO: figure out a way to do this better, I didnt enjoy this way of doing it in SaluTemp there HAS to be a better way
 export default function App() {
-  const [medications, setMedications] = React.useState<Medication[]>();
-  React.useEffect(() => {
-    getAllMedications().then((med) => setMedications(med));
-  }, []);
-  // Adding the UnionSvg component here to show that it's able to be displayed here
   return (
-    <View className="flex-1 items-center w-[100vw] justify-center bg-white">
-    {medications &&
-      medications.map((med, index) => (
-        <Text key={index} className="pb-2">
-          {`Name: ${med.medication_name} id: ${med.medication_id}`}
-        </Text>
-      ))}
-      <UnionSvg/>
-  </View>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="BottomNav"
+          options={{ headerShown: false }}
+          component={Tabs}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Tabs() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen
+        name="Landing"
+        options={{
+          headerShown: true,
+          tabBarIcon: () => <Home color={'gray'} />,
+          tabBarLabel: () => <Text>Landing</Text>
+        }}
+        component={Medication}
+      />
+    </Tab.Navigator>
   );
 }
diff --git a/client/assets/Union.svg b/client/assets/Union.svg
deleted file mode 100644
index f4d58d2..0000000
--- a/client/assets/Union.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="431" height="256" viewBox="0 0 431 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M215.5 255.897V0C96.4824 0.000244141 0 57.2847 0 127.949C23.3086 139.014 42.1699 158.166 62.0303 178.332C98.5361 215.401 138.417 255.897 215.5 255.897ZM368.97 178.332C332.464 215.401 292.583 255.897 215.5 255.897V0C334.518 0.000244141 431 57.2847 431 127.949C407.691 139.014 388.83 158.166 368.97 178.332Z" fill="#022B3A"/>
-</svg>
diff --git a/client/assets/home.svg b/client/assets/home.svg
new file mode 100644
index 0000000..1449ac4
--- /dev/null
+++ b/client/assets/home.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="27" viewBox="0 0 33 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 147">
+<path id="Vector" d="M1 15.1093L16.3919 1L31.7838 15.1093" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6.13086 11.2612V26.0004H26.6444V11.2612" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/client/package.json b/client/package.json
index bfc1a9f..d6d2357 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,15 +11,23 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
     "axios": "^1.6.4",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-safe-area-context": "4.6.3"
+    "react-native-svg-transformer": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/client/screens/Medication.tsx b/client/screens/Medication.tsx
new file mode 100644
index 0000000..ecef132
--- /dev/null
+++ b/client/screens/Medication.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { getAllMedications } from '../services/medication';
+
+export default function Medication() {
+  const [medications, setMedications] = React.useState<Medication[]>();
+  React.useEffect(() => {
+    getAllMedications().then((med) => setMedications(med));
+  }, []);
+
+  return (
+    <View className="flex-1 items-center w-[100vw] justify-center bg-white">
+      {medications &&
+        medications.map((med, index) => (
+          <Text key={index} className="pb-2">
+            {`Name: ${med.medication_name} id: ${med.medication_id}`}
+          </Text>
+        ))}
+    </View>
+  );
+}