diff --git a/frontend/react-app/src/components/LockUnlockTask.jsx b/frontend/react-app/src/components/LockUnlockTask.jsx
new file mode 100644
index 0000000..fe2b5be
--- /dev/null
+++ b/frontend/react-app/src/components/LockUnlockTask.jsx
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { lockTask, unlockTask } from '../api/adminApi';
+
+function LockUnlockTask({ initialIsLocked, taskId }) {
+  const [isLocked, setIsLocked] = useState(initialIsLocked);
+
+  const handleLockUnlock = async () => {
+    try {
+      if (isLocked) {
+        const unlock = await unlockTask(taskId);
+        if (unlock) {
+          setIsLocked(false);
+        }
+      } else {
+        const lock = await lockTask(taskId);
+        if (lock) {
+          setIsLocked(true);
+        }
+      }
+    } catch (error) {
+      console.log(`error`);
+    }
+  };
+
+  return (
+    <button onClick={handleLockUnlock}>
+      {isLocked ? '🔒' : '🔓'}
+    </button>
+  );
+}
+
+export default LockUnlockTask;
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index c019a05..bb8e247 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
+import LockUnlockTask from "../components/LockUnlockTask";
 
 
 
@@ -52,6 +53,7 @@ function mapTaskItem(taskItem) {
 function MyTasks(){
 const [cookies] = useCookies(['userInfo'])
 const userId = cookies.userInfo.accountId
+const isAdmin =cookies.userInfo.role ==='admin';
 
 const [tasksToDo, setTasksToDo ] = useState([]);
 const [loading, setLoading] = useState(true);
@@ -76,10 +78,7 @@ useEffect(()=>{
     
 },[]);
 
-useEffect(() => {
-    
-    console.log("Tasks To Do (after state update):", tasksToDo);
-}, [tasksToDo]);
+
 
 const commonColumns = [
     {
@@ -121,7 +120,15 @@ const headerAndAccessors = [
     {
         Header: "Is Locked",
         accessor: "isLocked",
-    }
+        Cell: (original) => {
+          const isLocked = original.value;
+          return isAdmin ? (
+            <LockUnlockTask initialIsLocked={isLocked} taskId={original.row.original.id} />
+          ) : (
+            isLocked ? '🔒' : '🔓'
+          );
+        },
+      }
 ]
 const headerAndAccessorsComplete = [
     ...commonColumns,
diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx
index ffb079c..84b181f 100644
--- a/frontend/react-app/src/pages/TeamTasks.jsx
+++ b/frontend/react-app/src/pages/TeamTasks.jsx
@@ -3,13 +3,12 @@ import TaskList from "../components/TaskList";
 import Header from "../components/Header";
 import "../css/TeamTasks.css";
 import TeamMember from "../components/TeamMember";
-import fakeData from "../FakeData/fakeTaskData.json"
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
-import { getTeamMembers } from "../api/teamApi";
 import { getTeamMembers as getAllTeamMembers}from "../api/teamMemberAccountApi";
 import { useLocation } from 'react-router-dom';
-import { getTeamTasks } from "../api/teamApi";
+import { getTeamTasks, getTeamMembers } from "../api/teamApi";
+import LockUnlockTask from "../components/LockUnlockTask";
 import DeleteTeamButton from "../components/DeleteTeamButton";
 import { getAdmins } from "../api/adminApi";
 import AddToTeam from "../components/AddToTeam";
@@ -35,11 +34,12 @@ function setUpData(results) {
         ...baseItem,
         status: taskItem.status,
         priority: taskItem.priority,
-        isLocked: taskItem.isLocked.toString()
+        isLocked: !!taskItem.isLocked
       };
       
     });
 }
+
 function setUpDataCompleted(results) {
   return results
     .filter((taskItem) => taskItem.status === "Done")
@@ -73,21 +73,7 @@ const commonColumns= [
       accessor: "dueDate",
   },
 ]
-const headerAndAccessors = [
-    ...commonColumns,
-    {
-      Header: "Priority",
-      accessor: "priority",
-    },
-    {
-        Header: "Status",
-        accessor: "status",
-    },
-    {
-      Header: "Is Locked",
-      accessor: "isLocked",
-    }
-]
+
 
 const headerAndAccessorsComplete = [
   ...commonColumns,
@@ -98,7 +84,6 @@ const headerAndAccessorsComplete = [
 ]
 function TeamTasks(){
   const [cookies] = useCookies(['userInfo']);
-  const userId = cookies.userInfo.accountId;
 
   const [teamMembers, setTeamMembers ] = useState([]);
   const [loadingNames, setLoadingNames] = useState(true);
@@ -142,8 +127,6 @@ function TeamTasks(){
     }
   }
 
-  
-  
   useEffect(()=>{
       fetchData();
       console.log("Tasks To Do:", tasksToDo);
@@ -151,9 +134,32 @@ function TeamTasks(){
       
   },[]);
 
+  const isAdmin = cookies.userInfo.role ==='admin';
+  const headerAndAccessors = [
+    ...commonColumns,
+    {
+      Header: "Priority",
+      accessor: "priority",
+    },
+    {
+        Header: "Status",
+        accessor: "status",
+    },
+    {
+      Header: "Is Locked",
+      accessor: "isLocked",
+      Cell: (original) => {
+        const isLocked = original.value;
+        return isAdmin ? (
+          <LockUnlockTask initialIsLocked={isLocked} taskId={original.row.original.id} />
+        ) : (
+          isLocked ? '🔒' : '🔓'
+        );
+      },
+    }
+];
 
-
-  useEffect(()=>{
+useEffect(()=>{
     async function loadAPIInfo() {
         try {
             const data = await getTeamMembers(teamId)
@@ -173,8 +179,6 @@ if(loadingNames || loadingTasks){
 
  
 console.log(teamLead)
-  //mock
-  const isAdmin = cookies.userInfo.role ==='admin';
 
   //mock 
   const members = [