diff --git a/app/modal.tsx b/app/modal.tsx
index 6fef22a..30dd768 100644
--- a/app/modal.tsx
+++ b/app/modal.tsx
@@ -1,7 +1,35 @@
-import { StyleSheet, useColorScheme, View } from "react-native";
+import {
+  StyleSheet,
+  useColorScheme,
+  View,
+  Pressable,
+  Text,
+  FlatList,
+} from "react-native";
 import { dark } from "../constants/Colors";
+import React, { useEffect, useState } from "react";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+
+import { listProp } from "../types/type";
+import { fetchTaskItems } from "../constants/FUNT";
+import FONT from "../constants/FONT";
+import HistoryCard from "../components/historyCard";
 
 export default function ModalScreen() {
+  const [history, setHistory] = useState<listProp[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedData = await fetchTaskItems("history");
+        setHistory(fetchedData);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    fetchData();
+  }, []);
+
   const DarkMode = useColorScheme() === "dark";
 
   return (
@@ -11,8 +39,13 @@ export default function ModalScreen() {
         DarkMode && { backgroundColor: dark.background1 },
       ]}
     >
-      <View></View>
-      {/* <List create={false} taskItem={list} /> */}
+      <FlatList
+        data={history}
+        keyExtractor={(item) => item.key}
+        renderItem={({ item }) => (
+          <HistoryCard DarkMode={DarkMode} item={item} />
+        )}
+      />
     </View>
   );
 }
@@ -20,7 +53,8 @@ export default function ModalScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 50,
+    paddingHorizontal: 5,
+    paddingVertical: 10,
     backgroundColor: "white",
   },
 });
diff --git a/components/List.tsx b/components/List.tsx
index a7efd5a..cd13e16 100644
--- a/components/List.tsx
+++ b/components/List.tsx
@@ -7,7 +7,6 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import ToDoCard from "./ToDoCard";
 import { ListProp, DataProp } from "../types/type";
 import FONT from "../constants/FONT";
-import list from "../assets/list";
 import { fetchTaskItems } from "../constants/FUNT";
 
 const List = ({ create, taskItem, setTaskItem }: ListProp) => {
diff --git a/components/ToDoCard.tsx b/components/ToDoCard.tsx
index 36d93ed..5833724 100644
--- a/components/ToDoCard.tsx
+++ b/components/ToDoCard.tsx
@@ -12,6 +12,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { listProp, todoCardProp } from "../types/type";
 import FONT from "../constants/FONT";
 import { light, dark } from "../constants/Colors";
+import { getTaskItem } from "../constants/FUNT";
 
 const ToDoCard = ({
   item,
@@ -20,6 +21,7 @@ const ToDoCard = ({
   taskItem,
   DarkMode,
 }: todoCardProp) => {
+  // deletes the task which does not add the task to the history storage
   const handleDelete = async () => {
     try {
       const existingData = await AsyncStorage.getItem("itemData");
@@ -35,6 +37,33 @@ const ToDoCard = ({
     }
   };
 
+  // adds the completed tasks to the history storage
+  const setHistory = async () => {
+    try {
+      const historyData = await AsyncStorage.getItem("history");
+      const itemData = await AsyncStorage.getItem("itemData");
+
+      let historyArray = historyData ? JSON.parse(historyData) : [];
+      let itemArray = itemData ? JSON.parse(itemData) : [];
+
+      const completedItem = itemArray.find(
+        (item1: listProp) => item1.key === item.key
+      );
+
+      if (completedItem) {
+        itemArray = itemArray.filter(
+          (item1: listProp) => item1.key !== item.key
+        );
+        historyArray.push(completedItem);
+
+        await AsyncStorage.setItem("itemData", JSON.stringify(itemArray));
+        await AsyncStorage.setItem("history", JSON.stringify(historyArray));
+
+        setTaskItem(itemArray);
+      }
+    } catch (error) {}
+  };
+
   return (
     <View style={[styles.cont, DarkMode && { backgroundColor: "#001f3f40" }]}>
       <View style={styles.cont1}>
@@ -60,7 +89,9 @@ const ToDoCard = ({
         <Pressable onPress={handleDelete}>
           <Ionicons name="ios-trash-outline" size={24} color="#ED187A" />
         </Pressable>
-        <FontAwesome name="check" size={24} color="#1CB674" />
+        <Pressable onPress={setHistory}>
+          <FontAwesome name="check" size={24} color="#1CB674" />
+        </Pressable>
       </View>
     </View>
   );
diff --git a/components/historyCard.tsx b/components/historyCard.tsx
new file mode 100644
index 0000000..2783339
--- /dev/null
+++ b/components/historyCard.tsx
@@ -0,0 +1,83 @@
+import {
+  StyleSheet,
+  useColorScheme,
+  View,
+  Pressable,
+  Text,
+  FlatList,
+} from "react-native";
+import { dark } from "../constants/Colors";
+import React, { useEffect, useState } from "react";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+
+import { historyCardProp } from "../types/type";
+import { fetchTaskItems } from "../constants/FUNT";
+import FONT from "../constants/FONT";
+
+const HistoryCard = ({ DarkMode, item }: historyCardProp) => {
+  return (
+    <View style={[styles.cont, DarkMode && { backgroundColor: "#001f3f40" }]}>
+      <View style={styles.cont1}>
+        <View
+          style={[
+            styles.icon,
+            DarkMode && { backgroundColor: dark.background2 },
+          ]}
+        >
+          <FontAwesome5 name="clipboard-list" size={24} color="white" />
+        </View>
+        <View>
+          <Text style={[styles.txt1, DarkMode && { color: dark.text }]}>
+            {item.name}
+          </Text>
+          <View style={{ flexDirection: "row" }}>
+            <Text style={styles.txt2}>{item.date}</Text>
+            <Text style={styles.txt2}>{item.time}</Text>
+          </View>
+        </View>
+      </View>
+      <View style={styles.cont1}>
+        <Pressable onPress={() => console.log("hi")}>
+          <Ionicons name="ios-trash-outline" size={24} color="#ED187A" />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cont: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 20,
+    borderRadius: 20,
+    alignItems: "center",
+    marginBottom: 5,
+    backgroundColor: "#1384F820",
+  },
+  icon: {
+    backgroundColor: "#1384F8",
+    width: 50,
+    height: 50,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cont1: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 15,
+  },
+
+  txt1: {
+    fontSize: 15,
+    fontFamily: FONT.JBold,
+  },
+  txt2: {
+    fontSize: 12,
+    color: "#6E6E6E",
+    marginRight: 5,
+    fontFamily: FONT.JRegular,
+  },
+});
+export default HistoryCard;
diff --git a/constants/FUNT.ts b/constants/FUNT.ts
index 862eee8..2d3da99 100644
--- a/constants/FUNT.ts
+++ b/constants/FUNT.ts
@@ -7,6 +7,10 @@ const getRandomLetter = () => {
   return letters[randomIndex].toString();
 };
 
+/**
+ *
+ * @returns  a random number to be used for the key
+ */
 const getRandomNumber = () => {
   const randomNumber = Math.floor(Math.random() * 100) + 1;
   return randomNumber.toString();
@@ -15,7 +19,10 @@ const getRandomNumber = () => {
 const formatTwoDigits = (number: number) => {
   return number < 10 ? "0" + number : number;
 };
-
+/**
+ *
+ * @returns return current date and time
+ */
 const getCurrentDateAndTime = () => {
   const currentDate = new Date();
 
@@ -31,6 +38,13 @@ const getCurrentDateAndTime = () => {
   return { date, time };
 };
 
+/**
+ *
+ * @param key its the key used to store the array of objects in asyncStorage eg "itemData" & "history"
+ * @returns all the data item in the array
+ * #Note : the "key" param is not the key for each item in the array
+ * the key for each item is stored in "item.key"
+ */
 const fetchTaskItems = async (key: string) => {
   try {
     const existingData = await AsyncStorage.getItem(key);
@@ -45,6 +59,20 @@ const fetchTaskItems = async (key: string) => {
   }
 };
 
+const getTaskItem = async (key: string, itemKey: string) => {
+  try {
+    const existingData = await AsyncStorage.getItem(key);
+    if (existingData) {
+      return JSON.parse(existingData);
+    } else {
+      return [];
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return [];
+  }
+};
+
 const deleteItem = async (key: string, itemKey: string) => {
   try {
     const existingData = await AsyncStorage.getItem(key);
@@ -66,4 +94,5 @@ export {
   getCurrentDateAndTime,
   fetchTaskItems,
   deleteItem,
+  getTaskItem,
 };
diff --git a/types/type.tsx b/types/type.tsx
index ad8092c..e0a7489 100644
--- a/types/type.tsx
+++ b/types/type.tsx
@@ -25,16 +25,6 @@ type ListProp = {
   setTaskItem: React.Dispatch<React.SetStateAction<listProp[]>>;
 };
 
-// type DataItems = {
-//   key: string;
-//   data: {
-//     name: string;
-//     subject: string;
-//     date: string;
-//     time: string;
-//   };
-// };
-
 type DataProp = {
   item: listProp;
   index: number;
@@ -47,6 +37,11 @@ type todoCardProp = {
   taskItem: listProp[];
   DarkMode: boolean;
 };
+
+type historyCardProp = {
+  DarkMode: boolean;
+  item: listProp;
+};
 export {
   listProp,
   todoCardProp,
@@ -55,4 +50,5 @@ export {
   ListProp,
   // DataItems,
   DataProp,
+  historyCardProp,
 };