diff --git a/client/components/QuickTaskCard.tsx b/client/components/QuickTaskCard.tsx
index 302a985..9a499ad 100644
--- a/client/components/QuickTaskCard.tsx
+++ b/client/components/QuickTaskCard.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import { TaskTypeDescriptions } from '../types/type';
+
 interface QuickTaskCardProps {
   name: string;
   label: string;
 }
 
-function QuickTaskCard({ name, label }: QuickTaskCardProps): JSX.Element {
+export function QuickTaskCard({
+  name,
+  label
+}: QuickTaskCardProps): JSX.Element {
   return (
     <View className="border-black h-[82px] w-[346px] self-center overflow-hidden rounded-[20px] border border-solid">
       <View className="relative left-[19px] top-[17px] h-[48px] w-[295px]">
@@ -16,11 +21,9 @@ function QuickTaskCard({ name, label }: QuickTaskCardProps): JSX.Element {
           </Text>
         </View>
         <Text className="text-black absolute left-0 top-[29px] w-[295px] text-[14px] font-[400] leading-[17px] tracking-[0px]">
-          {label}
+          {TaskTypeDescriptions[label]}
         </Text>
       </View>
     </View>
   );
 }
-
-export { QuickTaskCard };
diff --git a/client/components/TaskInfoCard.tsx b/client/components/TaskInfoCard.tsx
index 883db9f..fe13294 100644
--- a/client/components/TaskInfoCard.tsx
+++ b/client/components/TaskInfoCard.tsx
@@ -6,6 +6,7 @@ import moment from 'moment';
 import Calendar from '../assets/Date_today.svg';
 import Time from '../assets/Time.svg';
 import { useTaskById } from '../services/task';
+import { TaskTypeDescriptions } from '../types/type';
 
 export function TaskInfoComponent({
   name,
@@ -40,7 +41,7 @@ export function TaskInfoComponent({
       <View className="space-y-2">
         <View className="mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-black px-2 py-1">
           <View className="h-4 w-4 rounded-full bg-carewallet-gray" />
-          <Text>{category}</Text>
+          <Text>{TaskTypeDescriptions[category]}</Text>
         </View>
         <View className="mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-black px-2 py-1">
           <View className="h-4 w-4 rounded-full bg-carewallet-gray" />
diff --git a/client/screens/Calendar.tsx b/client/screens/Calendar.tsx
index d8d287a..54ec378 100644
--- a/client/screens/Calendar.tsx
+++ b/client/screens/Calendar.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { ActivityIndicator, Text, View } from 'react-native';
+import { ActivityIndicator, Pressable, Text, View } from 'react-native';
 
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
@@ -222,7 +222,13 @@ export default function TimelineCalendarScreen() {
           ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
           keyExtractor={(item) => item.task_id.toString()}
           renderItem={({ item }) => (
-            <QuickTaskCard name={item.notes} label={item.task_type} />
+            <Pressable
+              onTouchEnd={() =>
+                navigation.navigate('TaskDisplay', { id: item.task_id })
+              }
+            >
+              <QuickTaskCard name={item.notes} label={item.task_type} />
+            </Pressable>
           )}
         />
       </BottomSheet>
diff --git a/client/screens/SingleTask.tsx b/client/screens/SingleTask.tsx
index 714d73b..42362bb 100644
--- a/client/screens/SingleTask.tsx
+++ b/client/screens/SingleTask.tsx
@@ -7,9 +7,9 @@ import DropDownPicker from 'react-native-dropdown-picker';
 
 import CheckMark from '../assets/checkmark.svg';
 import Reject from '../assets/reject.svg';
-import { BackButton } from '../components/BackButton';
+import { BackButton } from '../components/task-type/BackButton';
 import { useTaskById } from '../services/task';
-import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+import { TaskTypeDescriptions, TypeToCategoryMap } from '../types/type';
 
 type ParamList = {
   mt: {
@@ -21,25 +21,9 @@ export default function SingleTaskScreen() {
   const route = useRoute<RouteProp<ParamList, 'mt'>>();
   const { id } = route.params;
   const [open, setOpen] = useState(false);
-  const [taskType, setTaskType] = useState<TypeOfTask>(TypeOfTask.ACTIVITIES);
   const { task, taskIsLoading, taskLabels, taskLabelsIsLoading } =
     useTaskById(id);
 
-  // Gets category based on Task Type
-  const getCategoryFromTaskType = (taskType: TypeOfTask): Category => {
-    if (!taskType) {
-      return Category.ALL; // Return a default category if taskType is undefined
-    }
-    // Iterate over each category in the categoryToTypeMap object
-    for (const category in categoryToTypeMap) {
-      // Check if the taskType exists in the current category's array of task types
-      if (categoryToTypeMap[category as Category].includes(taskType)) {
-        return category as Category; // Return the category if found
-      }
-    }
-    return Category.ALL; // Return a default category if no match is found
-  };
-
   if (taskIsLoading || taskLabelsIsLoading)
     return (
       <View className="w-[100vw] flex-1 items-center justify-center bg-carewallet-white text-3xl">
@@ -58,27 +42,34 @@ export default function SingleTaskScreen() {
     <View className="flex h-full flex-col items-start bg-carewallet-white p-4">
       <View className="w-[100vw] flex-row items-center">
         <BackButton />
-        <View className="z-20 ml-auto mr-10 mt-4">
+        <View className="relative z-20 ml-auto mr-10 mt-4 w-24">
           <DropDownPicker
             open={open}
             value="value"
             items={[
-              { label: 'INCOMPLETE', value: 'incomplete' },
-              { label: 'COMPLETE', value: 'Complete' },
-              { label: 'PARTIAL', value: 'Partial' }
+              { label: 'Incomplete', value: 'INCOMPLETE' },
+              { label: 'Complete', value: 'COMPLETE' },
+              { label: 'Partial', value: 'PARTIAL' }
             ]}
             setOpen={setOpen}
-            setValue={setTaskType}
-            placeholder="To-do"
-            containerStyle={{ height: 40, marginBottom: 8, width: 100 }}
-            style={{ backgroundColor: 'lightgray', borderColor: 'gray' }}
+            setValue={() => ''}
+            placeholder="To-Do"
+            style={{
+              backgroundColor: 'lightgray',
+              borderColor: 'gray',
+              position: 'relative',
+              zIndex: 10
+            }}
           />
         </View>
       </View>
       <View className="mt-4">
-        <Text className="text-black font-inter text-2xl font-bold">
-          {task?.task_title} {'\n'}
+        <Text className="font-inter text-2xl font-semibold text-carewallet-black">
+          {task?.task_title}
+        </Text>
+        <Text className="font-inter pt-5 text-2xl font-semibold text-carewallet-black">
           {moment(task?.start_date).format('hh:mm A')}
+          {task?.end_date && `- ${moment(task?.end_date).format('hh:mm A')}`}
         </Text>
         {taskLabels?.map((label) => (
           <Text key={label.task_id + label.label_name} className="text-base">
@@ -86,7 +77,8 @@ export default function SingleTaskScreen() {
           </Text>
         ))}
         <Text className="text-base ">
-          {getCategoryFromTaskType(taskType)} | {taskType}
+          {task &&
+            `${TypeToCategoryMap[task.task_type]} | ${TaskTypeDescriptions[task.task_type]}`}
         </Text>
       </View>
       <View className="mt-4"></View>
diff --git a/client/types/type.ts b/client/types/type.ts
index 985283d..a2c8a3c 100644
--- a/client/types/type.ts
+++ b/client/types/type.ts
@@ -29,7 +29,14 @@ export enum Category {
   OTHER = 'Other'
 }
 
-export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
+export const TypeToCategoryMap: Record<string, Category> = {
+  med_mgmt: Category.HEALTH,
+  dr_appt: Category.HEALTH,
+  financial: Category.FINANCIAL,
+  other: Category.OTHER
+};
+
+export const CategoryToTypeMap: Record<Category, TypeOfTask[]> = {
   [Category.ALL]: [],
   [Category.HEALTH]: [
     TypeOfTask.MEDICATION,
@@ -64,3 +71,10 @@ export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
   ],
   [Category.OTHER]: [TypeOfTask.OTHER]
 };
+
+export const TaskTypeDescriptions: Record<string, string> = {
+  med_mgmt: 'Medication Management',
+  dr_appt: 'Doctor Appointment',
+  financial: 'Financial Task',
+  other: 'Other Task'
+};