diff --git a/src/components/buttons/button-fill-xsmall.tsx b/src/components/buttons/button-fill-xsmall.tsx
index f1603de..b71a02f 100644
--- a/src/components/buttons/button-fill-xsmall.tsx
+++ b/src/components/buttons/button-fill-xsmall.tsx
@@ -7,7 +7,7 @@ import { motion } from "framer-motion";
 import { KeyOfColor, colors } from "styles/theme";
 import { changeXSBtnColor } from "src/constants/animation";
 
-type ButtonState = "active" | "disabled" | "default";
+type ButtonState = "active" | "disabled" | "default" | "warning";
 
 interface ButtonProps {
     text: string | React.ReactNode;
diff --git a/src/constants/animation.ts b/src/constants/animation.ts
index 7bd10a7..57b70d4 100644
--- a/src/constants/animation.ts
+++ b/src/constants/animation.ts
@@ -59,6 +59,13 @@ export const changeXSBtnColor = {
         },
         color: theme.colors.light_qblack,
         background: theme.colors.light_qwhite
+    },
+    warning: {
+        transition: {
+            duration: 0.2
+        },
+        color: theme.colors.light_qblack,
+        background: theme.colors.primary_qorange
     }
 };
 
diff --git a/src/hooks/account/useUnBlockFriendMutation.ts b/src/hooks/account/useUnBlockFriendMutation.ts
index 20b8240..6861f46 100644
--- a/src/hooks/account/useUnBlockFriendMutation.ts
+++ b/src/hooks/account/useUnBlockFriendMutation.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
 import accountAPI from "src/apis/account";
-import { friendKeys } from "src/constants/queryKeys/accountKeys";
+import { friendKeys, usersKeys } from "src/constants/queryKeys/accountKeys";
 
 const useUnBlockFriendMutation = () => {
     const queryClient = useQueryClient();
@@ -11,6 +11,7 @@ const useUnBlockFriendMutation = () => {
     return useMutation((id: number) => accountAPI.unBlockFriend({ id }), {
         onSuccess: (data: any, id: number) => {
             queryClient.invalidateQueries(friendKeys.all);
+            queryClient.invalidateQueries(usersKeys.all);
         },
         onError: (error: any) => {}
     });
diff --git a/src/pages-edit/friend/FriendDetail.tsx b/src/pages-edit/friend/FriendDetail.tsx
index 6224c8d..3c0f796 100644
--- a/src/pages-edit/friend/FriendDetail.tsx
+++ b/src/pages-edit/friend/FriendDetail.tsx
@@ -50,7 +50,12 @@ export default function FriendDetailPage({
                     />
                     <Flex direction="column" gap={32}>
                         {friend && <InfoList user={friend} isMe={false} />}
-                        {friend?.id && <QfeedList id={friend.id} />}
+                        {friend && (
+                            <QfeedList
+                                id={friend.id}
+                                isBlocking={friend.isBlocking}
+                            />
+                        )}
                     </Flex>
                 </Flex>
             )}
diff --git a/src/pages-edit/friend/components/FriendItem.tsx b/src/pages-edit/friend/components/FriendItem.tsx
index fd73517..70f6dee 100644
--- a/src/pages-edit/friend/components/FriendItem.tsx
+++ b/src/pages-edit/friend/components/FriendItem.tsx
@@ -12,6 +12,7 @@ import FriendProfile from "src/components/Profile/FriendProfile";
 import useFriendMutation from "src/hooks/account/useFriendMutation";
 import useDeleteFriendMutation from "src/hooks/account/useDeleteFriendMutation";
 import { Friend } from "src/models/account";
+import useUnBlockFriendMutation from "src/hooks/account/useUnBlockFriendMutation";
 
 export default function FriendItem({
     isFollowing,
@@ -24,6 +25,7 @@ export default function FriendItem({
     const [follow, setFollow] = useState(isFollowing);
     const { friendMutation } = useFriendMutation(friend.id);
     const { delFriendMutation } = useDeleteFriendMutation(friend.id);
+    const unblock = useUnBlockFriendMutation();
 
     return (
         <FriendWrapper>
@@ -40,14 +42,32 @@ export default function FriendItem({
             </Flex>
             <Flex width="auto" gap={16}>
                 <ButtonFillXSmall
-                    text={follow ? "팔로잉" : "팔로우"}
+                    text={
+                        friend.isBlocking
+                            ? "차단 해제"
+                            : follow
+                            ? "팔로잉"
+                            : "팔로우"
+                    }
                     onClick={() => {
-                        follow
-                            ? delFriendMutation.mutate()
-                            : friendMutation.mutate();
-                        setFollow((follow) => !follow);
+                        if (friend.isBlocking) {
+                            unblock.mutate(friend.id);
+                        } else {
+                            if (follow) {
+                                delFriendMutation.mutate();
+                            } else {
+                                friendMutation.mutate();
+                            }
+                            setFollow((follow) => !follow);
+                        }
                     }}
-                    state={follow ? "disabled" : "active"}
+                    state={
+                        friend.isBlocking
+                            ? "warning"
+                            : follow
+                            ? "disabled"
+                            : "active"
+                    }
                 />
             </Flex>
         </FriendWrapper>
diff --git a/src/pages-edit/mypage/components/InfoList.tsx b/src/pages-edit/mypage/components/InfoList.tsx
index 05b2999..cb2e95e 100644
--- a/src/pages-edit/mypage/components/InfoList.tsx
+++ b/src/pages-edit/mypage/components/InfoList.tsx
@@ -67,7 +67,13 @@ export default function InfoList({
                             setFollow((follow) => !follow);
                         }
                     }}
-                    state={follow && !user.isBlocking ? "disabled" : "active"}
+                    state={
+                        user.isBlocking
+                            ? "warning"
+                            : follow
+                            ? "disabled"
+                            : "active"
+                    }
                 />
             )}
             <Flex justify="space-between">
diff --git a/src/pages-edit/mypage/components/QfeedList.tsx b/src/pages-edit/mypage/components/QfeedList.tsx
index 26d008d..d79397f 100644
--- a/src/pages-edit/mypage/components/QfeedList.tsx
+++ b/src/pages-edit/mypage/components/QfeedList.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Flex from "src/components/common/Flex";
+import Text from "src/components/common/Text";
 import ButtonQfeedSelect from "./ButtonQfeedSelect";
 import MakeList from "./MakeList";
 import SelectList from "./SelectList";
@@ -8,13 +9,31 @@ import SelectList from "./SelectList";
 import { useAppSelector } from "src/hooks/useReduxHooks";
 import { Qtype } from "src/models/questions";
 
-export default function QfeedList({ id }: { id: number }) {
+export default function QfeedList({
+    id,
+    isBlocking
+}: {
+    id: number;
+    isBlocking?: boolean;
+}) {
     const selected: Qtype = useAppSelector((state) => state.qtype.qtype);
 
     return (
         <Flex direction="column" gap={16}>
             <ButtonQfeedSelect value={selected} />
-            {selected === "personal" ? (
+            {isBlocking ? (
+                <Flex height="100%" direction="column">
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        차단한 친구입니다.
+                    </Text>
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        친구의 OfficialQ를 보기 위해
+                    </Text>
+                    <Text typo="Subtitle1r" color="light_gray2">
+                        차단을 해제해주세요!
+                    </Text>
+                </Flex>
+            ) : selected === "personal" ? (
                 <MakeList id={id} />
             ) : (
                 <SelectList id={id} />