diff --git a/src/components/profile/SkillManagement.tsx b/src/components/profile/SkillManagement.tsx
index 5ed4080eb67786e317ea579d195c85523ef18bb3..633791470d2b9e364fcfbbef015ab95e142cca22 100644
--- a/src/components/profile/SkillManagement.tsx
+++ b/src/components/profile/SkillManagement.tsx
@@ -1,8 +1,10 @@
+import { deleteUserSkill } from "@/utils/api/skill";
+import { useUser } from "@/utils/context/AuthProvider";
 import { useUserSkills } from "@/utils/context/SkillProvider";
 import { Skill } from "@/utils/validationSchema/skill";
 import { log } from "console";
 import React, { useEffect, useState } from "react";
-import { useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 function SkillBit({
   onDelete,
@@ -32,6 +34,7 @@ function SkillBit({
 
 function SkillManagement() {
   const queryClient = useQueryClient();
+  const { user, status } = useUser();
   const { userSkills, userSkillsStatus } = useUserSkills();
   const [selectedSkill, setSelectedSkill] = useState<Skill | undefined>(
     undefined
@@ -42,29 +45,54 @@ function SkillManagement() {
     return () => {};
   }, [userSkills]);
 
+  const { mutateAsync: removeUserSkill } = useMutation({
+    mutationFn: async ({ description, skillName }: Skill) => {
+      if (status !== "success" || user === undefined) {
+        return;
+      }
+      return await deleteUserSkill({
+        username: user.username,
+        skillName,
+        description,
+      });
+    },
+    onMutate: async (removedSkill: Skill) => {
+      await queryClient.cancelQueries({ queryKey: ["skills", "me"] });
+
+      const previousUserSkill = userSkills;
+
+      queryClient.setQueryData<Skill[] | undefined>(
+        ["skills", "me"],
+        (oldSkills) => {
+          console.log("Old skills", oldSkills);
+          if (!oldSkills) {
+            return oldSkills;
+          }
+          return oldSkills.filter(
+            ({ skillName: thisSkill }) => thisSkill !== removedSkill.skillName
+          );
+        }
+      );
+      return { previousUserSkill };
+    },
+    onError(_, __, context) {
+      queryClient.setQueryData(["skills", "me"], context?.previousUserSkill);
+    },
+    onSuccess() {
+      queryClient.invalidateQueries(["skills", "me"]);
+    },
+  });
+
   return (
     <div className="grid grid-cols-2 grid-rows-2 w-full">
       <div className="w-full flex flex-col items-center row-span-1 col-span-1 row-start-1 col-start-1">
         {userSkillsStatus === "success" && userSkills ? (
           <div className="flex flex-row flex-wrap gap-2">
-            {userSkills.map(({ skillName }) => (
+            {userSkills.map((skill) => (
               <SkillBit
-                skillName={skillName}
-                key={skillName}
-                onDelete={() => {
-                  queryClient.setQueryData<Skill[] | undefined>(
-                    ["skills", "me"],
-                    (oldSkills) => {
-                      console.log("Old skills", oldSkills);
-                      if (!oldSkills) {
-                        return oldSkills;
-                      }
-                      return oldSkills.filter(
-                        ({ skillName: thisSkill }) => thisSkill !== skillName
-                      );
-                    }
-                  );
-                }}
+                skillName={skill.skillName}
+                key={skill.skillName}
+                onDelete={() => removeUserSkill(skill)}
               />
             ))}
           </div>
diff --git a/src/utils/api/skill.ts b/src/utils/api/skill.ts
index 7faa58f69bf41856e1ad0f56c84188b31a99d1e3..9f36f04189830c68f3cf579c54f08bf6c0c01278 100644
--- a/src/utils/api/skill.ts
+++ b/src/utils/api/skill.ts
@@ -30,3 +30,15 @@ export async function createSkill(payload: Skill): Promise<Skill> {
   return (await axios.post(`${config.NODE_JS_API}/api/skill/`, payload, header))
     .data;
 }
+
+export async function deleteUserSkill({
+  skillName,
+  username,
+}: Skill & { username: string }): Promise<Skill> {
+  return (
+    await axios.delete(
+      `${config.NODE_JS_API}/api/skill/${skillName}/${username}`,
+      header
+    )
+  ).data;
+}