diff --git a/src/components/profile/AddSkillForm.tsx b/src/components/profile/AddSkillForm.tsx
index d6f3d54fba12369d25a9f615173bd6b64b1b4c65..c067b218b3263e4a5a2d8cff36825c597a427c9e 100644
--- a/src/components/profile/AddSkillForm.tsx
+++ b/src/components/profile/AddSkillForm.tsx
@@ -6,9 +6,12 @@ import DisabledButton from "@/components/DisabledButton";
 import { useMutation, useQueryClient } from "react-query";
 import { createSkill } from "@/utils/api/skill";
 import { useState } from "react";
+import { useAllSkills, useUserSkills } from "@/utils/context/SkillProvider";
 
 function AddSkillForm() {
   const queryClient = useQueryClient();
+  const { userSkills } = useUserSkills();
+  const { allSkills } = useAllSkills();
   const {
     field: skillName,
     fieldError: skillNameError,
@@ -24,11 +27,48 @@ function AddSkillForm() {
   const [disabled, setDisabled] = useState(false);
   const [addSkillError, setAddSkillError] = useState("");
   const { mutateAsync: addSkillMutation } = useMutation({
-    onMutate() {
+    onMutate: async (addedSkill: Skill) => {
       setDisabled(true);
+      await queryClient.cancelQueries({ queryKey: ["skills"] });
+
+      const previousUserSkill = userSkills;
+      const previousAllSkill = allSkills;
+
+      queryClient.setQueryData<Skill[] | undefined>(
+        ["skills", "me"],
+        (oldSkills) => {
+          if (!oldSkills) {
+            return oldSkills;
+          }
+
+          const result = [...(previousUserSkill ?? []), addedSkill];
+          result.sort(({ skillName: skillName1 }, { skillName: skillName2 }) =>
+            skillName1.localeCompare(skillName2)
+          );
+          return result;
+        }
+      );
+
+      queryClient.setQueryData<Skill[] | undefined>(["skills"], (oldSkills) => {
+        if (!oldSkills) {
+          return oldSkills;
+        }
+
+        const result = [...(previousAllSkill ?? []), addedSkill];
+        result.sort(({ skillName: skillName1 }, { skillName: skillName2 }) =>
+          skillName1.localeCompare(skillName2)
+        );
+        return result;
+      });
+      return { previousUserSkill, previousAllSkill };
+    },
+    onError(_, __, context) {
+      queryClient.setQueryData(["skills"], context?.previousAllSkill);
+      queryClient.setQueryData(["skills", "me"], context?.previousUserSkill);
     },
-    onSuccess(data: Skill[]) {
-      queryClient.setQueryData(["skills"], { skills: data, status: "success" });
+    onSuccess() {
+      queryClient.invalidateQueries(["skills"]);
+      queryClient.invalidateQueries(["skills", "me"]);
       setDisabled(false);
     },
     mutationFn: async (payload: Skill) => {