diff --git a/android/build.gradle b/android/build.gradle
index ed5a568..fec09e4 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -1,4 +1,5 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
+def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
 
 buildscript {
     ext {
@@ -34,4 +35,10 @@ allprojects {
         jcenter()
         maven { url 'https://www.jitpack.io' }
     }
+    configurations.all {
+        resolutionStrategy {
+            // Remove this override in 0.65+, as a proper fix is included in react-native itself.
+            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
+        }
+    }
 }
diff --git a/package.json b/package.json
index 4afb30f..93a88bd 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,14 @@
     "react-native-redash": "14.2.4",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "2.7.0",
+    "react-native-select-dropdown": "3.0.1",
     "react-native-splash-screen": "3.2.0",
     "react-native-vector-icons": "6.6.0",
     "react-redux": "7.2.0",
     "redux": "4.0.5",
     "redux-persist": "5.10.0",
-    "typesafe-actions": "4.4.2"
+    "typesafe-actions": "4.4.2",
+    "yup": "0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
diff --git a/src/AddMedication.tsx b/src/AddMedication.tsx
new file mode 100644
index 0000000..4daa2c1
--- /dev/null
+++ b/src/AddMedication.tsx
@@ -0,0 +1,357 @@
+import React, {useState, useEffect} from 'react'
+import {StyleSheet, View, Text, Modal} from 'react-native'
+import {useDispatch, useSelector} from 'react-redux'
+import {
+  SecondaryBlueButton,
+  PrimaryBlueButton,
+  TextInput,
+  H2,
+  Select,
+  SelectItem,
+  selectItemMapper,
+} from '~/Components'
+import type {AddMedicationRouteProps, RootNavigation} from '~/Root'
+import {addMedication} from '~/Store/Actions'
+import {
+  MedicationFormData,
+  MedicationProps,
+  MedicationStrength,
+  UnitVariants,
+  AdministrationVariants,
+  IMedicationWithId,
+} from '~/Store/User'
+import {validateAddMedicationForm} from '~/Utils'
+import {medicationsSelector} from '~/Store/Selectors'
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 24,
+    paddingHorizontal: 24,
+  },
+  divider: {
+    borderWidth: 0.5,
+    borderColor: '#ccc', // TODO Replace with global color variable
+    marginBottom: 10, // TODO Replace with global variable for margins
+    marginTop: 10,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  leftOfTwoColumns: {
+    paddingRight: 5,
+    width: '50%',
+  },
+  rightOfTwoColumns: {
+    paddingLeft: 5,
+    width: '50%',
+  },
+})
+
+type AddMedicationProps = {
+  navigation: RootNavigation
+  route: AddMedicationRouteProps
+}
+
+// Make all Medicine props optional, including the nested strength
+type AddMedicineForm = Partial<
+  Omit<MedicationFormData, MedicationProps.STRENGTH> & {
+    [MedicationProps.STRENGTH]: Partial<MedicationStrength>
+  }
+>
+
+enum BarcodeUserTestStatus {
+  SHOW_TEST = 'SHOW_TEST',
+  SHOW_MODAL_INFO = 'SHOW_MODAL_INFO',
+  HIDE_TEST = 'HIDE_TEST',
+}
+
+export const AddMedication: React.FC<AddMedicationProps> = ({navigation}) => {
+  const dispatch = useDispatch()
+  const medications = useSelector(medicationsSelector)
+  const [form, setForm] = useState<AddMedicineForm>({})
+  const [isFormSubmitted, setIsFormSubmitted] = useState<boolean>(false)
+  const [isAddFromPreviousModalVisible, setIsAddFromPreviousModalVisible] = useState<boolean>(false)
+  const [addFromPreviousMedication, setAddFromPreviousMedication] = useState<
+    IMedicationWithId | undefined
+  >(undefined)
+  const [formErrors, setFormErrors] = useState([])
+  const [barcodeTestStatus, setBarcodeTestStatus] = useState<BarcodeUserTestStatus>(
+    BarcodeUserTestStatus.SHOW_TEST
+  )
+
+  type Timer = ReturnType<typeof setTimeout>
+
+  const setFormProp = <T,>(prop: MedicationProps) => {
+    return (value: T) => {
+      setForm({
+        ...form,
+        [prop]: value,
+      })
+    }
+  }
+
+  const setBrandName = setFormProp<string>(MedicationProps.BRAND_NAME)
+  const setSubstance = setFormProp<string>(MedicationProps.SUBSTANCE)
+  const setAdministration = setFormProp<string>(MedicationProps.ADMINISTRATION)
+  const setIntakeInterval = setFormProp<string>(MedicationProps.INTERVAL)
+  const setStrength = (strengthProp: 'value' | 'unit') => {
+    return (value: string) => {
+      const newStrength: Partial<MedicationStrength> = {
+        ...form.strength,
+        [strengthProp]: value,
+      }
+
+      setForm({
+        ...form,
+        strength: newStrength,
+      })
+    }
+  }
+
+  const isBarcodeTestVisible =
+    barcodeTestStatus === BarcodeUserTestStatus.SHOW_TEST ||
+    barcodeTestStatus === BarcodeUserTestStatus.SHOW_MODAL_INFO
+
+  const isBarcodeModalVisible = barcodeTestStatus === BarcodeUserTestStatus.SHOW_MODAL_INFO
+
+  const handleBarcodeScanClick = () => {
+    // TODO This is where we should register the user interaction
+    // via GA or similar tools to see if there's interest for this
+    // function before building it
+    setBarcodeTestStatus(BarcodeUserTestStatus.SHOW_MODAL_INFO)
+  }
+
+  const handleBarcodeInfoModalClose = () => setBarcodeTestStatus(BarcodeUserTestStatus.HIDE_TEST)
+
+  // Just for the sake of this demo, we reset the barcode status
+  // after 6s so we can try the button again
+  useEffect(() => {
+    let timer: Timer
+    if (barcodeTestStatus === BarcodeUserTestStatus.HIDE_TEST) {
+      timer = setTimeout(() => setBarcodeTestStatus(BarcodeUserTestStatus.SHOW_TEST), 6 * 1000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [barcodeTestStatus])
+
+  const handleSubmitForm = () => {
+    let validationResult
+    try {
+      validationResult = validateAddMedicationForm(form as MedicationFormData)
+    } catch (error: any) {
+      setFormErrors(error.errors)
+      return
+    }
+    // We pass `validationResult`, instead of `form`, since yup will type cast for us.
+    dispatch(addMedication(validationResult as MedicationFormData))
+    setIsFormSubmitted(true)
+  }
+
+  useEffect(() => {
+    let timer: Timer
+    if (formErrors.length > 0) {
+      timer = setTimeout(() => setFormErrors([]), 5000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [formErrors])
+
+  const handleCloseThankYouModal = () => {
+    setIsFormSubmitted(false)
+    navigation.goBack()
+  }
+
+  const handleSubmitAddFromPrevious = () => {
+    if (addFromPreviousMedication) {
+      // TODO We dont copy the administration/strength.unit props since
+      // I haven't figured out how to make the select box controlled
+      const {brandName, substance, strength, interval} = addFromPreviousMedication
+      setForm({
+        brandName,
+        substance,
+        strength: {
+          value: strength.value,
+        },
+        interval,
+      })
+    }
+    setIsAddFromPreviousModalVisible(false)
+  }
+
+  const unitData: SelectItem[] = Object.keys(UnitVariants).map(selectItemMapper)
+  const administrationData: SelectItem[] = Object.keys(AdministrationVariants).map(selectItemMapper)
+
+  return (
+    <View style={styles.container}>
+      <H2>Quick add</H2>
+      {isBarcodeTestVisible ? (
+        <SecondaryBlueButton
+          style={{marginBottom: 8}}
+          title="Scan medication barcode"
+          onPress={handleBarcodeScanClick}
+        />
+      ) : null}
+
+      <SecondaryBlueButton
+        title="Add from existing"
+        onPress={() => setIsAddFromPreviousModalVisible(true)}
+      />
+      <View style={styles.divider} />
+      <H2>Medication data</H2>
+      <View style={{flexDirection: 'row'}}>
+        <View style={styles.leftOfTwoColumns}>
+          <Text>Brand name</Text>
+          <TextInput value={form.brandName} onChangeText={setBrandName} />
+        </View>
+        <View style={styles.rightOfTwoColumns}>
+          <Text>Substance</Text>
+          <TextInput value={form.substance} onChangeText={setSubstance} />
+        </View>
+      </View>
+      <Text>Strength</Text>
+      <View style={{flexDirection: 'row'}}>
+        <View style={styles.leftOfTwoColumns}>
+          <TextInput
+            keyboardType="numeric"
+            value={String(form.strength?.value || '')}
+            onChangeText={setStrength('value')}
+          />
+        </View>
+        <View style={styles.rightOfTwoColumns}>
+          <Select
+            defaultButtonText="Select unit"
+            data={unitData}
+            onSelect={(selectedItem: SelectItem) => {
+              setStrength('unit')(selectedItem.value)
+            }}
+            buttonTextAfterSelection={(selectedItem: SelectItem) => selectedItem.label}
+            rowTextForSelection={(item: SelectItem) => item.label}
+          />
+        </View>
+      </View>
+      <Text>Hours between intake</Text>
+      <View style={{flexDirection: 'row'}}>
+        <View style={styles.leftOfTwoColumns}>
+          <TextInput
+            value={String(form.interval || '')}
+            keyboardType="numeric"
+            onChangeText={setIntakeInterval}
+          />
+        </View>
+        <View style={styles.rightOfTwoColumns}>
+          {/* TODO This select works exactly the same as the one above so it should be its own component */}
+          <Select
+            defaultButtonText="Select administration"
+            data={administrationData}
+            onSelect={(selectedItem: SelectItem) => setAdministration(selectedItem.value)}
+            buttonTextAfterSelection={(selectedItem: SelectItem) => selectedItem.label}
+            rowTextForSelection={(item: SelectItem) => item.label}
+          />
+        </View>
+      </View>
+      {/* These errors messages are not very user friendly/readable at the moment */}
+      {formErrors.length > 0 ? (
+        <Text style={{color: '#dd0000', marginBottom: 8}}>{formErrors.map(error => error)}</Text>
+      ) : null}
+      <PrimaryBlueButton title="Add" onPress={handleSubmitForm} />
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isFormSubmitted}
+        onRequestClose={handleCloseThankYouModal}>
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            <Text style={styles.modalText}>Your medicine has been added. Have a nice day!</Text>
+            <PrimaryBlueButton title="OK" onPress={handleCloseThankYouModal} />
+          </View>
+        </View>
+      </Modal>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isBarcodeModalVisible}
+        onRequestClose={handleBarcodeInfoModalClose}>
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            <Text style={styles.modalText}>
+              Thank you for showing interest in our barcode scanner! We have registered your
+              interest and if enough people want it - we will make it happen.
+            </Text>
+            <PrimaryBlueButton title="OK" onPress={handleBarcodeInfoModalClose} />
+          </View>
+        </View>
+      </Modal>
+
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isAddFromPreviousModalVisible}
+        onRequestClose={() => setIsAddFromPreviousModalVisible(false)}>
+        <View style={styles.centeredView}>
+          <View style={styles.modalView}>
+            {medications.length > 0 ? (
+              <>
+                <Select
+                  defaultButtonText="Select medication"
+                  data={medications}
+                  onSelect={(selectedItem: IMedicationWithId) => {
+                    setAddFromPreviousMedication(selectedItem)
+                  }}
+                  buttonTextAfterSelection={(selectedItem: IMedicationWithId) =>
+                    selectedItem.brandName
+                  }
+                  rowTextForSelection={(item: IMedicationWithId) => item.brandName}
+                />
+                <View style={{flexDirection: 'row'}}>
+                  <View style={styles.leftOfTwoColumns}>
+                    <SecondaryBlueButton
+                      title="Cancel"
+                      style={{width: '100%'}}
+                      onPress={() => setIsAddFromPreviousModalVisible(false)}
+                    />
+                  </View>
+                  <View style={styles.rightOfTwoColumns}>
+                    <PrimaryBlueButton title="OK" onPress={handleSubmitAddFromPrevious} />
+                  </View>
+                </View>
+              </>
+            ) : (
+              <View>
+                <Text style={{marginBottom: 8}}>You have no medications.</Text>
+                <SecondaryBlueButton
+                  title="Cancel"
+                  onPress={() => setIsAddFromPreviousModalVisible(false)}
+                />
+              </View>
+            )}
+            <Text style={styles.modalText}></Text>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  )
+}
diff --git a/src/ChangeName.tsx b/src/ChangeName.tsx
index b80c18c..7652ca8 100644
--- a/src/ChangeName.tsx
+++ b/src/ChangeName.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {useDispatch} from 'react-redux'
 import {PrimaryBlueButton, TextInput} from '~/Components'
-import type {ChangeNameRouteProp, RootNavigation} from '~/Root'
+import type {ChangeNameRouteProps, RootNavigation} from '~/Root'
 import {changeName} from '~/Store/Actions'
 
 const styles = StyleSheet.create({
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 
 type ChangeNameProps = {
   navigation: RootNavigation
-  route: ChangeNameRouteProp
+  route: ChangeNameRouteProps
 }
 export const ChangeName: React.FC<ChangeNameProps> = ({navigation, route}) => {
   const dispatch = useDispatch()
diff --git a/src/Components/Br.tsx b/src/Components/Br.tsx
new file mode 100644
index 0000000..2bf30b8
--- /dev/null
+++ b/src/Components/Br.tsx
@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const Br = () => <>{'\n'}</>
diff --git a/src/Components/MedicationList.tsx b/src/Components/MedicationList.tsx
new file mode 100644
index 0000000..c063d12
--- /dev/null
+++ b/src/Components/MedicationList.tsx
@@ -0,0 +1,149 @@
+import React, {useState} from 'react'
+import {useDispatch} from 'react-redux'
+import {View, Text, FlatList, StyleSheet, StatusBar, Alert} from 'react-native'
+import {IMedicationWithId} from '~/Store'
+import {Br} from '~/Components/Br'
+import {H2, Body} from '~/Components/Typography'
+import {IconButton} from '~/Components/Buttons'
+import {Icons} from '~/Icons'
+import {humanReadableText, sortObjectByStringProp} from '~/Utils'
+import {Colors} from '~/Colors'
+import {deleteMedication} from '~/Store/Actions'
+import {Toggle} from '~/Components/Toggle'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  brandName: {
+    fontSize: 20,
+  },
+  item: {
+    backgroundColor: '#e7e7e7',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 16,
+    color: '#000000',
+  },
+  preTitle: {
+    color: '#333',
+  },
+})
+
+const Item: React.FC<{medication: IMedicationWithId}> = ({medication}) => {
+  const dispatch = useDispatch()
+
+  const createConfirmDelete = () => {
+    return Alert.alert('Confirm', `Are you sure you want to delete ${medication.brandName}?`, [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {text: 'OK', onPress: () => dispatch(deleteMedication(medication.id))},
+    ])
+  }
+
+  return (
+    <View style={[styles.item, {flexDirection: 'row'}]}>
+      <View style={{alignItems: 'flex-start', flexGrow: 1}}>
+        <Text style={[styles.title]}>
+          <Text style={styles.preTitle}>
+            {medication.substance} | id: {medication.id}
+          </Text>
+          <Br />
+          <Text style={styles.brandName}>{medication.brandName}</Text>
+          <Br />
+          <Text>
+            {medication.strength?.value} {medication.strength?.unit}{' '}
+            {humanReadableText(medication.administration)} -{' '}
+            {`Taken every ${medication.interval || '?'} hours`}
+          </Text>
+        </Text>
+      </View>
+      <View style={{alignItems: 'flex-end'}}>
+        <IconButton
+          icon={Icons.close({
+            color: Colors.red3,
+          })}
+          onPress={createConfirmDelete}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const MedicationList: React.FC<{medications: IMedicationWithId[]}> = ({medications}) => {
+  // const dispatch = useDispatch()
+  let medicationsToShow = medications.sort(
+    sortObjectByStringProp<IMedicationWithId>('brandName' as keyof IMedicationWithId) // TODO See why `brandName` is not accepted as key without explicit casting
+  )
+  let medicationsBySubstance: {[substance: string]: IMedicationWithId[]} = {}
+  const [isDeletedShown, setIsDeletedShown] = useState(false)
+  const [isGroupedBySubstance, setIsGroupedBySubstance] = useState(false)
+
+  const renderItem = ({item}: {item: IMedicationWithId}) => {
+    return <Item medication={item} />
+  }
+
+  if (!isDeletedShown) {
+    medicationsToShow = medications.filter(medication => !medication.deletedAt)
+  }
+
+  if (isGroupedBySubstance) {
+    medicationsBySubstance = medicationsToShow.reduce<{[substance: string]: IMedicationWithId[]}>(
+      (acc, curr) => {
+        const substance = curr.substance
+        return {
+          ...acc,
+          [substance]: acc[substance] ? [...acc[substance], curr] : [curr],
+        }
+      },
+      {}
+    )
+  }
+
+  return (
+    <View>
+      {/* <PrimaryBlueButton
+        title="clean slate"
+        onPress={() => dispatch(cleanState())}></PrimaryBlueButton> */}
+      <View style={{flexDirection: 'row', paddingBottom: 8}}>
+        <Toggle checked={isDeletedShown} onToggle={() => setIsDeletedShown(!isDeletedShown)} />
+        <Body style={{marginLeft: 8, paddingTop: 5}}>Show deleted</Body>
+      </View>
+      <View style={{flexDirection: 'row'}}>
+        <Toggle
+          checked={isGroupedBySubstance}
+          onToggle={() => setIsGroupedBySubstance(!isGroupedBySubstance)}
+        />
+        <Body style={{marginLeft: 8, paddingTop: 5}}>Group by substance</Body>
+      </View>
+      {isGroupedBySubstance ? (
+        <>
+          {Object.keys(medicationsBySubstance).map((substance, index) => {
+            return (
+              <View key={index}>
+                <H2 key={substance}>{substance}</H2>
+                <FlatList
+                  data={medicationsBySubstance[substance]}
+                  renderItem={renderItem}
+                  keyExtractor={item => item.brandName + item.addedAt}
+                />
+              </View>
+            )
+          })}
+        </>
+      ) : (
+        <FlatList
+          data={medicationsToShow}
+          renderItem={renderItem}
+          keyExtractor={item => item.brandName + item.addedAt}
+        />
+      )}
+    </View>
+  )
+}
diff --git a/src/Components/Select.tsx b/src/Components/Select.tsx
new file mode 100644
index 0000000..dd4a501
--- /dev/null
+++ b/src/Components/Select.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import {View, Text, StyleSheet} from 'react-native'
+import SelectDropdown, {SelectDropdownProps} from 'react-native-select-dropdown'
+import {Colors} from '~/Colors'
+import {Font, FontWeight} from '~/Font'
+import {Icons} from '~/Icons'
+import {humanReadableText} from '~/Utils'
+// This is just a quick way of showing the principle of including
+// from an external package once, style it and pass it on.
+// Never use react-native-select-dropdown anywhere else.
+// ...and yeah the textInputStyles should be moved to a more global
+// context where we can use it for both TextInput and Select.
+export type SelectItem = {
+  label: string
+  value: string
+}
+
+export const selectItemMapper = (value: string): SelectItem => {
+  // Making the values more read friendly for presentation.
+  // A better way would be to create a mapping table, but this will work for now.
+  const label = humanReadableText(value)
+  return {
+    label,
+    value,
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    borderRadius: 20,
+    color: Colors.dark_blue_grey,
+    backgroundColor: Colors.gray4,
+    height: 40,
+    width: '100%',
+    marginBottom: 16,
+  },
+  textInput: {
+    paddingLeft: 0,
+    borderWidth: 0,
+    // marginRight: 'auto',
+    marginLeft: 0,
+    color: Colors.gray1,
+    ...Font({fontSize: 16, fontWeight: FontWeight.regular}),
+    width: 50,
+  },
+  // Below Taken from component example
+  dropdown1BtnStyle: {
+    height: 40,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    width: '100%',
+    textAlign: 'right',
+  },
+  dropdown1BtnTxtStyle: {color: '#444', textAlign: 'left'},
+  dropdown1DropdownStyle: {backgroundColor: 'blue', borderWidth: 1},
+  dropdown1RowStyle: {backgroundColor: '#EFEFEF', borderBottomColor: '#C5C5C5'},
+  dropdown1RowTxtStyle: {color: '#444', textAlign: 'left'},
+})
+
+export const Select: React.FC<SelectDropdownProps> = props => {
+  return (
+    <View style={[styles.container]}>
+      <SelectDropdown
+        buttonStyle={styles.dropdown1BtnStyle}
+        buttonTextStyle={styles.textInput}
+        dropdownStyle={styles.dropdown1DropdownStyle}
+        rowStyle={styles.dropdown1RowStyle}
+        rowTextStyle={styles.dropdown1RowTxtStyle}
+        renderDropdownIcon={isOpened => {
+          const rotateDegs = isOpened ? '270deg' : '90deg'
+          return (
+            <Text
+              style={{
+                transform: [{rotate: rotateDegs}],
+              }}>
+              <Icons.chevron color="#ccc" />
+            </Text>
+          )
+        }}
+        dropdownIconPosition="left"
+        {...props}
+      />
+    </View>
+  )
+}
diff --git a/src/Components/TextInputs.tsx b/src/Components/TextInputs.tsx
index f9cded5..fb6895e 100644
--- a/src/Components/TextInputs.tsx
+++ b/src/Components/TextInputs.tsx
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.gray4,
     height: 40,
     width: '100%',
-    marginBottom: 16,
+    marginBottom: 4,
   },
   textInput: {
     paddingLeft: 16,
diff --git a/src/Components/index.ts b/src/Components/index.ts
index 433b8a9..a2dd00e 100644
--- a/src/Components/index.ts
+++ b/src/Components/index.ts
@@ -2,3 +2,6 @@ export * from './Buttons'
 export * from './List'
 export * from './TextInputs'
 export * from './Typography'
+export * from './Select'
+export * from './MedicationList'
+export * from './Br'
diff --git a/src/Navigation/Routes.ts b/src/Navigation/Routes.ts
index 897a34f..dda7919 100644
--- a/src/Navigation/Routes.ts
+++ b/src/Navigation/Routes.ts
@@ -1,4 +1,5 @@
 export enum Routes {
   START = 'START',
   CHANGE_NAME = 'CHANGE_NAME',
+  ADD_MEDICATION = 'ADD_MEDICATION',
 }
diff --git a/src/Root.tsx b/src/Root.tsx
index d8b9d82..d7e7b39 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -7,6 +7,7 @@ import SplashScreen from 'react-native-splash-screen'
 import {Provider} from 'react-redux'
 import {PersistGate} from 'redux-persist/integration/react'
 import {ChangeName} from '~/ChangeName'
+import {AddMedication} from '~/AddMedication'
 import {Colors} from '~/Colors'
 import {defaultNavigationOptions} from '~/Navigation'
 import {Routes} from '~/Navigation/Routes'
@@ -16,11 +17,13 @@ import {initiateStore, persistor} from '~/Store'
 export type RootStackParamList = {
   [Routes.START]: undefined
   [Routes.CHANGE_NAME]: {name: string}
+  [Routes.ADD_MEDICATION]: undefined
 }
 const Stack = createStackNavigator<RootStackParamList>()
 
 export type RootNavigation = StackNavigationProp<RootStackParamList>
-export type ChangeNameRouteProp = RouteProp<RootStackParamList, Routes.CHANGE_NAME>
+export type ChangeNameRouteProps = RouteProp<RootStackParamList, Routes.CHANGE_NAME>
+export type AddMedicationRouteProps = RouteProp<RootStackParamList, Routes.ADD_MEDICATION>
 
 const RootStack: React.FC = () => {
   return (
@@ -37,6 +40,13 @@ const RootStack: React.FC = () => {
           title: route.params.name,
         })}
       />
+      <Stack.Screen
+        name={Routes.ADD_MEDICATION}
+        component={AddMedication}
+        options={() => ({
+          title: 'Add medication',
+        })}
+      />
     </Stack.Navigator>
   )
 }
diff --git a/src/Start.tsx b/src/Start.tsx
index deed5be..bfe9be2 100644
--- a/src/Start.tsx
+++ b/src/Start.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, View, Text} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {useSelector} from 'react-redux'
 import {Colors} from '~/Colors'
-import {Body, H1, SecondaryBlueButton} from '~/Components'
+import {Body, H1, PrimaryBlueButton, MedicationList} from '~/Components'
 import {Routes} from '~/Navigation/Routes'
 import type {RootNavigation} from '~/Root'
-import {nameSelector} from '~/Store/Selectors/User'
+import {nameSelector, medicationsSelector} from '~/Store/Selectors/User'
 
 const styles = StyleSheet.create({
   background: {
@@ -25,6 +25,9 @@ const styles = StyleSheet.create({
   help: {
     marginHorizontal: 24,
   },
+  underline: {
+    textDecorationLine: 'underline',
+  },
 })
 
 type StartProps = {
@@ -32,21 +35,38 @@ type StartProps = {
 }
 export const Start: React.FC<StartProps> = ({navigation}) => {
   const name = useSelector(nameSelector)
+  const medications = useSelector(medicationsSelector)
   return (
     <SafeAreaView style={styles.background} edges={['top']}>
       <View style={styles.content}>
         <View style={styles.info}>
-          <H1>Hello {name}!</H1>
-          <SecondaryBlueButton
-            title={'Change name'}
-            onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})}
+          {name ? (
+            <H1>
+              <Text>Hello </Text>
+              <Text
+                style={styles.underline}
+                onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})}>
+                {name}
+              </Text>
+              <Text>!</Text>
+            </H1>
+          ) : (
+            <H1
+              style={styles.underline}
+              onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})}>
+              What is your name?
+            </H1>
+          )}
+          <PrimaryBlueButton
+            title="Add medication"
+            onPress={() => navigation.navigate(Routes.ADD_MEDICATION)}
           />
         </View>
-        <Body style={styles.help}>{`Hmm. It would be great if I had a list of my medications here... 🤔
-        
-        
-Please have a look at src/Start.tsx to get started!
-👩‍💻👨‍💻`}</Body>
+        {medications.length > 0 ? (
+          <MedicationList medications={medications} />
+        ) : (
+          <Body style={styles.help}>{`Start by adding your medications.`}</Body>
+        )}
       </View>
     </SafeAreaView>
   )
diff --git a/src/Store/Actions/actions.ts b/src/Store/Actions/actions.ts
index 13bdace..22e3bf6 100644
--- a/src/Store/Actions/actions.ts
+++ b/src/Store/Actions/actions.ts
@@ -1,9 +1,18 @@
 import {createAction} from 'typesafe-actions'
+import {MedicationFormData} from '~/Store/User'
 
 export const cleanState = createAction('CLEAN_STATE')
 
 export const changeName = createAction('CHANGE_NAME', action => (name: string) => action({name}))
 
-export const addMedication = createAction('ADD_MEDICATION', action => (medicationName: string) =>
-  action({medicationName})
+export const addMedication = createAction(
+  'ADD_MEDICATION',
+  action => (medication: MedicationFormData) => action({medication})
+)
+
+export const deleteMedication = createAction(
+  'DELETE_MEDICATION',
+  action => (indexToDelete: number) => {
+    return action({indexToDelete})
+  }
 )
diff --git a/src/Store/Selectors/User.ts b/src/Store/Selectors/User.ts
index e14137d..049e298 100644
--- a/src/Store/Selectors/User.ts
+++ b/src/Store/Selectors/User.ts
@@ -1,5 +1,8 @@
-import type {IMedication, RootState} from '~/Store'
+import type {IMedicationWithId, RootState} from '~/Store'
 
 export const nameSelector = (state: RootState) => state.user.name
 
-export const medicationsSelector = (state: RootState): IMedication[] => state.user.medications
+// The id shouldnt be the array index in a real application, it would be something constant, like a db id.
+// We set it here so we can manipulate the array later without getting worried about loosing the array index.
+export const medicationsSelector = (state: RootState): IMedicationWithId[] =>
+  state.user.medications.map((m, index) => ({...m, id: index}))
diff --git a/src/Store/User.ts b/src/Store/User.ts
index 6dd8a07..5ab2deb 100644
--- a/src/Store/User.ts
+++ b/src/Store/User.ts
@@ -1,14 +1,51 @@
 import {RootAction} from '~/Store/Actions'
 
+export enum AdministrationVariants {
+  ORALLY = 'ORALLY',
+  INJECTION = 'INJECTION',
+  INFUSION = 'INFUSION',
+  OTHER = 'OTHER',
+}
+
+export enum UnitVariants {
+  ML = 'ML',
+  MG = 'MG',
+}
+
+export enum MedicationProps {
+  BRAND_NAME = 'brandName',
+  SUBSTANCE = 'substance',
+  STRENGTH = 'strength',
+  ADMINISTRATION = 'administration',
+  INTERVAL = 'interval',
+}
+
+export type MedicationStrength = {
+  value: number
+  unit: UnitVariants
+}
+
+// Why the I?
 export type IMedication = {
-  name: string
+  [MedicationProps.BRAND_NAME]: string
+  [MedicationProps.SUBSTANCE]: string
+  [MedicationProps.STRENGTH]: MedicationStrength
+  [MedicationProps.ADMINISTRATION]: AdministrationVariants
+  [MedicationProps.INTERVAL]: number
   addedAt: string
+  deletedAt?: string
+  medicineIntakes?: string[]
 }
 
+export type IMedicationWithId = IMedication & {id: number}
+
+export type MedicationFormData = Omit<IMedication, 'addedAt' | 'medicineIntakes' | 'deletedAt'>
+
 export type MedicationsState = {
   medications: IMedication[]
   name: string
 }
+
 export const defaultUser = (): MedicationsState => ({
   medications: [],
   name: 'Elsa',
@@ -26,12 +63,33 @@ export const user = (
       }
     }
     case 'ADD_MEDICATION': {
-      const {medicationName} = action.payload
+      const {medication} = action.payload
       return {
         ...state,
         medications: [
           ...state.medications,
-          {name: medicationName, addedAt: new Date().toISOString()},
+          {
+            ...medication,
+            addedAt: new Date().toISOString(),
+            deletedAt: undefined,
+            medicineIntakes: [],
+          },
+        ],
+      }
+    }
+    case 'DELETE_MEDICATION': {
+      const {indexToDelete} = action.payload
+      return {
+        ...state,
+        medications: [
+          ...state.medications.map((medication, index) => {
+            return indexToDelete === index
+              ? {
+                  ...medication,
+                  deletedAt: new Date().toISOString(),
+                }
+              : medication
+          }),
         ],
       }
     }
diff --git a/src/Utils/index.ts b/src/Utils/index.ts
new file mode 100644
index 0000000..37a78b4
--- /dev/null
+++ b/src/Utils/index.ts
@@ -0,0 +1,2 @@
+export * from '~/Utils/validators'
+export * from '~/Utils/text'
diff --git a/src/Utils/text.ts b/src/Utils/text.ts
new file mode 100644
index 0000000..51fcf15
--- /dev/null
+++ b/src/Utils/text.ts
@@ -0,0 +1,14 @@
+export const humanReadableText = (str: string) =>
+  str ? str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() : ''
+
+export const sortObjectByStringProp = <T extends object>(prop: keyof T) => {
+  return (a: T, b: T) => {
+    if (a[prop] > b[prop]) {
+      return 1
+    }
+    if (a[prop] < b[prop]) {
+      return -1
+    }
+    return 0
+  }
+}
diff --git a/src/Utils/validators.ts b/src/Utils/validators.ts
new file mode 100644
index 0000000..020ac2e
--- /dev/null
+++ b/src/Utils/validators.ts
@@ -0,0 +1,24 @@
+import {object, string, number} from 'yup'
+import {
+  MedicationFormData,
+  MedicationProps,
+  UnitVariants,
+  AdministrationVariants,
+} from '~/Store/User'
+
+const addMedicationFormSchema = object({
+  [MedicationProps.BRAND_NAME]: string().required(),
+  [MedicationProps.SUBSTANCE]: string().required(),
+  [MedicationProps.INTERVAL]: number().required(),
+  [MedicationProps.ADMINISTRATION]: string()
+    .oneOf(Object.values(AdministrationVariants))
+    .required(),
+  [MedicationProps.STRENGTH]: object({
+    value: number().required(),
+    unit: string().oneOf(Object.values(UnitVariants)).required(),
+  }),
+})
+
+export const validateAddMedicationForm = (formData: MedicationFormData) => {
+  return addMedicationFormSchema.validateSync(formData)
+}
diff --git a/yarn.lock b/yarn.lock
index 6d94e00..79b94ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -687,6 +687,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@babel/template@^7.0.0", "@babel/template@^7.10.4", "@babel/template@^7.3.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -1287,6 +1294,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.175":
+  version "4.14.188"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.188.tgz#e4990c4c81f7c9b00c5ff8eae389c10f27980da5"
+  integrity sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w==
+
 "@types/node@*":
   version "14.11.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.5.tgz#fecad41c041cae7f2404ad4b2d0742fdb628b305"
@@ -4660,6 +4672,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -4675,6 +4692,11 @@ lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.1
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -5214,6 +5236,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.12, nanoid@^3.1.9:
   version "3.1.12"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
@@ -5826,6 +5853,11 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -5922,6 +5954,11 @@ react-native-screens@2.7.0:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.7.0.tgz#2d3cf3c39a665e9ca1c774264fccdb90e7944047"
   integrity sha512-n/23IBOkrTKCfuUd6tFeRkn3lB2QZ3cmvoubRscR0JU/Zl4/ZyKmwnFmUv1/Fr+2GH/H8UTX59kEKDYYg3dMgA==
 
+react-native-select-dropdown@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-select-dropdown/-/react-native-select-dropdown-3.0.1.tgz#5dbbebc885993b20d1f3e6ac5e915c72c761b241"
+  integrity sha512-JWkgGznlhfmA12MX+4WKe9kKQ2ejAiaes3hHdgeLExNkgP9/qybOtf7RAwnyY5Wkn5xkyOe82si/CSngNUUCFA==
+
 react-native-splash-screen@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz#d47ec8557b1ba988ee3ea98d01463081b60fff45"
@@ -6083,6 +6120,11 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
   integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==
 
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
 regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -7030,6 +7072,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -7578,3 +7625,16 @@ yargs@^15.1.0, yargs@^15.3.1:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
+
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"