diff --git a/frontend/react-app/src/components/LockUnlockTask.jsx b/frontend/react-app/src/components/LockUnlockTask.jsx
index fe2b5be..a5ba4d2 100644
--- a/frontend/react-app/src/components/LockUnlockTask.jsx
+++ b/frontend/react-app/src/components/LockUnlockTask.jsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { lockTask, unlockTask } from '../api/adminApi';
+import { Lock, LockOpen } from 'lucide-react';
+import "../css/MyTasks.css";
 
 function LockUnlockTask({ initialIsLocked, taskId }) {
   const [isLocked, setIsLocked] = useState(initialIsLocked);
@@ -23,8 +25,14 @@ function LockUnlockTask({ initialIsLocked, taskId }) {
   };
 
   return (
-    <button onClick={handleLockUnlock}>
-      {isLocked ? '🔒' : '🔓'}
+    <button onClick={handleLockUnlock} className={`lock-task-btn ${isLocked ? "locked" : "unlocked"}`}>
+        {isLocked ? 
+            (
+            <Lock size={20}/>
+            ) : (
+                <LockOpen size={20}/>
+            )
+        }
     </button>
   );
 }
diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
index 3163b6e..058891d 100644
--- a/frontend/react-app/src/css/MyTasks.css
+++ b/frontend/react-app/src/css/MyTasks.css
@@ -49,6 +49,25 @@ div.flexbox{
     border-radius: 10px;
 }
 
+.lock-task-btn {
+    background-color: #3b3355;
+    color: white;
+    border: none;
+    padding: 4% 8%;
+    text-align: center;
+    font-size: 13px;
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+.locked {
+    background-color: red;
+  }
+  
+.unlocked {
+    background-color: green;
+}
+
 .pageContainer {
     width: 100%;
 }
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index 031ea7c..721cc37 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -8,8 +8,7 @@ import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
 import LockUnlockTask from "../components/LockUnlockTask";
-
-
+import { Lock, LockOpen } from 'lucide-react';
 
 function getAssigneesNames(taskItem) {
     return taskItem.assignedMembers.map((member) => member.userName).join(", ");
@@ -125,7 +124,11 @@ const headerAndAccessors = [
           return isAdmin ? (
             <LockUnlockTask initialIsLocked={isLocked} taskId={original.row.original.id} />
           ) : (
-            isLocked ? '🔒' : '🔓'
+            isLocked ? (
+                <Lock />
+            ) : (
+                <LockOpen/>
+            )
           );
         },
       }