diff --git a/src/components/entity/modules/ModuleItem.js b/src/components/entity/modules/ModuleItem.js
index 77dec32..9232c8d 100644
--- a/src/components/entity/modules/ModuleItem.js
+++ b/src/components/entity/modules/ModuleItem.js
@@ -22,10 +22,10 @@ const styles = StyleSheet.create({
     modulesItem: {
         paddingVertical: 15,
         borderBottomWidth: 1,
-        borderBottomColor: "light grey",
+        borderBottomColor: "lightgray",
     },
     text: {
-        // fontSize: 16,
+        fontSize: 18,
     },
 });
 
diff --git a/src/components/entity/modules/ModuleList.js b/src/components/entity/modules/ModuleList.js
index 5524ebf..ac024ae 100644
--- a/src/components/entity/modules/ModuleList.js
+++ b/src/components/entity/modules/ModuleList.js
@@ -1,9 +1,8 @@
 import {StyleSheet, ScrollView } from "react-native";
-import modules from "../../../data/modules";
 import ModuleItem from "./ModuleItem";
 import React from "react";
 
-const ModuleList = ({module, onSelect }) => {
+const ModuleList = ({modules, onSelect }) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
@@ -13,7 +12,11 @@ const ModuleList = ({module, onSelect }) => {
         <ScrollView style={styles.modulesContainer}>
             {modules.map((module) => {
                 return(
-                    <ModuleItem module={module} key={module.ModuleCode} onSelect={onSelect} />
+                    <ModuleItem
+                        module={module}
+                        key={module.ModuleCode}
+                        onSelect={onSelect}
+                    />
                 )
             })
             }
@@ -23,9 +26,7 @@ const ModuleList = ({module, onSelect }) => {
 
 
 const styles = StyleSheet.create({
-    modulesContainer: {
-
-    },
+    modulesContainer: {},
 });
 
 export default ModuleList;
\ No newline at end of file
diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 5c09745..0cbe4c1 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -1,23 +1,28 @@
-import {StyleSheet } from "react-native";
-
+import { useState } from "react";
+import { StyleSheet } from "react-native";
 import Screen from "../layout/Screen";
-import initialModules from "../../data/modules.js";
 import ModuleList from "../entity/modules/ModuleList";
+import initialModules from "../../data/modules.js";
 
 
-export const ModuleListScreen = () => {
+const ModuleListScreen = () => {
 //   Initialisation -------------
-    const modules = initialModules;
+//    let modules = initialModules;
 
 //   State ----------------------
+    const [ modules, setModules] = useState(initialModules);
+
+
 //   Handlers -------------------
-    const handleSelect = (module) => alert(`Item ${module.ModuleName} selected`);
+
+    const handleDelete = (module) =>
+        setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
 
 //   View -----------------------
 
   return (
     <Screen>
-        <ModuleList modules={{modules}} onSelect={handleSelect} />
+        <ModuleList modules={modules} onSelect={handleDelete} />
     </Screen>
   );
 };