diff --git a/apps/expo/src/app/workout/createNew/index.tsx b/apps/expo/src/app/workout/createNew/index.tsx
index 784506c9..0101d683 100644
--- a/apps/expo/src/app/workout/createNew/index.tsx
+++ b/apps/expo/src/app/workout/createNew/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {StyleSheet, View, Text, TouchableOpacity, TextInput, ScrollView } from 'react-native'
 import { router } from 'expo-router'
 import { SafeAreaView } from 'react-native-safe-area-context'
+import ExerciseList from '~/components/workout/exerciseList'
 
 const styles = StyleSheet.create({
   container: {
@@ -47,9 +48,8 @@ export default function createNew() {
         </TouchableOpacity>
       </View>
       <View style={{height: 1, backgroundColor: '#CACACA', marginHorizontal: 13, opacity: 0.3,}}/>
-      <ScrollView className="mb-[25px] py-[20px]">
-        <View>
-        </View>
+      <ScrollView className="mb-[25px] py-[5px]">
+        <ExerciseList />
       </ScrollView>
       <View>
         <TouchableOpacity className=" px-4 py-[6px] bottom-[10px] rounded-[5px]  border-[#CACACA] bg-[#424242]" >
@@ -58,6 +58,7 @@ export default function createNew() {
             </Text>
         </TouchableOpacity>
       </View>
+      
     </SafeAreaView>
   )
 }
\ No newline at end of file
diff --git a/apps/expo/src/app/workout/startExisting/index.tsx b/apps/expo/src/app/workout/startExisting/index.tsx
index 508e11b5..f29c23fd 100644
--- a/apps/expo/src/app/workout/startExisting/index.tsx
+++ b/apps/expo/src/app/workout/startExisting/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {StyleSheet, View, Text, TouchableOpacity, TextInput, ScrollView } from 'react-native'
 import { router } from 'expo-router'
 import { SafeAreaView } from 'react-native-safe-area-context'
+import WorkoutList from '~/components/workout/workoutList'
 
 const styles = StyleSheet.create({
   container: {
@@ -14,7 +15,7 @@ export default function createNew() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <View className="flex-row justify-evenly h-[60px] items-center">
+      <View className="flex-row justify-evenly h-[40px] items-center">
         <TouchableOpacity onPress={() => router.back()}>
             <Text className="text-[20px] text-[#FFFFFF] text-center px-16'">
               Back
@@ -27,17 +28,10 @@ export default function createNew() {
           </Text>
         </TouchableOpacity>
       </View>
-      <View className="mx-3 bg-[#272727] rounded-[5px]">
-        <TextInput
-          className="text-[12px] text-[#CACACA] px-4 py-[6px] mx-1
-          placeholder:text-[#CACACA] placeholder:text-[20px] placeholder:italic placeholder:opacity-40 top-0" 
-          placeholder= "Search workout by name..."/>
+
+      <View className="mb-[25px] py-[20px]">
+        <WorkoutList />
       </View>
-      <View style={{height: 1, backgroundColor: '#CACACA', marginHorizontal: 13, opacity: 0.3, top: 10, }}/>
-      <ScrollView className="mb-[25px] py-[20px]">
-        <View>
-        </View>
-      </ScrollView>
     </SafeAreaView>
   )
 }
\ No newline at end of file
diff --git a/apps/expo/src/components/ui/search-bar/SearchBar.tsx b/apps/expo/src/components/ui/search-bar/SearchBar.tsx
index 1199939b..494c0b66 100644
--- a/apps/expo/src/components/ui/search-bar/SearchBar.tsx
+++ b/apps/expo/src/components/ui/search-bar/SearchBar.tsx
@@ -29,8 +29,8 @@ import { View } from 'react-native'
 import { TextInput } from 'react-native-gesture-handler'
 
 interface SearchBarProps {
-  list: any[]
-  setFilteredList: React.Dispatch<React.SetStateAction<any[]>>
+  list: any[] | undefined
+  setFilteredList: React.Dispatch<React.SetStateAction<any[] | undefined>>
   filterBy: string
   placeholder: string
 }
@@ -38,15 +38,16 @@ interface SearchBarProps {
 export default function SearchBar({ list, setFilteredList, filterBy, placeholder }: SearchBarProps) {
   const [searchTerm, setSearchTerm] = useState('')
 
-  useEffect(() => {
-    setFilteredList(list.filter((item) => item[filterBy].toLowerCase().includes(searchTerm.toLowerCase())))
-  }, [searchTerm])
+  if (list) {
+    useEffect(() => {
+      setFilteredList(list.filter((item) => item[filterBy].toLowerCase().includes(searchTerm.toLowerCase())))
+    }, [searchTerm])
+  }
 
   return (
     <View className="mx-3 rounded-[5px] bg-[#272727]" testID="searchBar">
       <TextInput
-        className="top-0 mx-1 px-4 py-[6px] text-[12px]
-          text-[#CACACA] placeholder:text-[20px] placeholder:italic placeholder:text-[#CACACA] placeholder:opacity-40"
+        className="placeholder:color-[#717171] top-0 mx-1 px-4 py-[6px] text-[20px] text-white"
         placeholder={placeholder}
         onChangeText={setSearchTerm}
       />
diff --git a/apps/expo/src/components/workout/exerciseList.tsx b/apps/expo/src/components/workout/exerciseList.tsx
new file mode 100644
index 00000000..8bc57529
--- /dev/null
+++ b/apps/expo/src/components/workout/exerciseList.tsx
@@ -0,0 +1,39 @@
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+import React, {useState} from 'react'
+import { Text, View } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+
+import RotatingBarbellIcon from '~/components/notif/RotatingBarbellIcon'
+import { api } from '~/utils/api'
+
+export default function ExerciseList() {
+  const { data, isFetched, isFetching } = api.exercise.getAllExercises.useQuery()
+
+  const [selectExercise, setSelect] = useState<{[eid: number]: boolean }>({});
+
+  const selectToggle = (eid: number) => {
+    setSelect((prevState) => ({
+      prevState,
+      [eid]: !prevState[eid],
+    }));
+  };
+
+  const exercises =
+  <ScrollView className='px-[15px]'>
+    {data?.map((exercise) => 
+      <TouchableOpacity key={exercise.id} className='' 
+      style={{backgroundColor: selectExercise[exercise.id] ? "#48476D" : "#1E1E1E"}}
+      onPress={() => selectToggle(exercise.id)}>
+        <Text  className='text-slate-200 text-[20px] my-[12px]'>
+          {exercise.name} 
+        </Text>
+      </TouchableOpacity>)}
+  </ScrollView>
+
+  return (
+    <View>
+      {isFetching && <RotatingBarbellIcon />}
+      {isFetched && exercises}
+    </View>
+  )
+}
diff --git a/apps/expo/src/components/workout/workoutList.tsx b/apps/expo/src/components/workout/workoutList.tsx
new file mode 100644
index 00000000..f38846a7
--- /dev/null
+++ b/apps/expo/src/components/workout/workoutList.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { Text, TextInput, View } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+
+import RotatingBarbellIcon from '~/components/notif/RotatingBarbellIcon'
+import SearchBar from '~/components/ui/search-bar/SearchBar'
+import { api } from '~/utils/api'
+
+export default function WorkoutList() {
+  // Query data
+  const { data, isFetched, isFetching } = api.workout.getAllWorkouts.useQuery()
+
+  // Select an exercise
+  const [selectExercise, setSelect] = useState<{ [wid: number]: boolean }>({})
+  const selectToggle = (wid: number) => {
+    setSelect((prevState) => ({
+      [wid]: !prevState[wid],
+    }))
+  }
+
+  const [filteredList, setFilteredList] = useState(data)
+
+  const workouts = (
+    <View>
+      <SearchBar
+        filterBy="name"
+        list={data}
+        placeholder="Search workout by name..."
+        setFilteredList={setFilteredList}
+      />
+      <View className="pt-3" style={{ borderBottomWidth: 1, borderBottomColor: '#737272' }} />
+
+      <ScrollView className="h-full">
+        {filteredList?.map((workout) => (
+          <View>
+            <View className="px-3" key={workout.id}>
+              <TouchableOpacity
+                key={workout.id}
+                className="pt-5"
+                style={{ backgroundColor: selectExercise[workout.id] ? '#272727' : '#1E1E1E' }}
+                onPress={() => selectToggle(workout.id)}
+              >
+                <Text className="px-2 text-[20px] text-slate-200">{workout.name}</Text>
+                <View className="pt-2" />
+                <Text className="px-4 pb-4 italic text-slate-200 opacity-70">{workout.description}</Text>
+              </TouchableOpacity>
+            </View>
+            <View className="ml-3 mr-3" style={{ borderBottomWidth: 1, borderBottomColor: '#737272' }} />
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  )
+
+  return (
+    <View>
+      {isFetched && workouts}
+      {isFetching && <RotatingBarbellIcon />}
+    </View>
+  )
+}