diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx
index 757be58..e6f8b74 100644
--- a/src/components/ProfilePic.tsx
+++ b/src/components/ProfilePic.tsx
@@ -1,36 +1,23 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { User } from '@/types/User';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { CardType } from '@/types/enums';
 
-export default function ProfilePic({
-  user,
-  type,
-}: {
-  user: User;
-  type: CardType;
-}) {
+export default function ProfilePic({ user, type }: { user: User; type: CardType }) {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
           <Avatar
             className={`${type === 'searchedCard' && 'size-16 md:size-20'}
-            ${type === 'myCard' && 'size-24 cursor-pointer lg:size-28'}
-            ${type === 'userCard' && 'size-20 cursor-pointer md:size-28'}
+            ${type === 'myCard' && 'size-20 cursor-pointer lg:size-28'}
+            ${type === 'userCard' && 'size-16 cursor-pointer md:size-28'}
             ${
-              user.location || user.inCluster ? 'border-[#FFB5B5]' : ''
+              (user.location || user.inCluster) && 'border-basepink'
             } border-4 hover:border-[#bfb5ff]`}
             onClick={() => {
               if (type !== 'searchedCard') {
-                window.open(
-                  `https://profile.intra.42.fr/users/${user.intraId}`,
-                );
+                window.open(`https://profile.intra.42.fr/users/${user.intraId}`);
               }
             }}
           >
@@ -38,9 +25,7 @@ export default function ProfilePic({
             <AvatarFallback />
           </Avatar>
         </TooltipTrigger>
-        {type !== 'searchedCard' && (
-          <TooltipContent>인트라 프로필 방문</TooltipContent>
-        )}
+        {type !== 'searchedCard' && <TooltipContent>인트라 프로필 방문</TooltipContent>}
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/components/admin/AnnouncementMenu.tsx b/src/components/admin/AnnouncementMenu.tsx
index 06a4d3a..9cae5c9 100644
--- a/src/components/admin/AnnouncementMenu.tsx
+++ b/src/components/admin/AnnouncementMenu.tsx
@@ -17,7 +17,7 @@ export default function AnnouncementMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <p className="cursor-pointer text-darkblue decoration-[#FFB5B5] hover:underline">
+        <p className="decoration-basepink cursor-pointer text-darkblue hover:underline">
           종류: {type}
         </p>
       </DropdownMenuTrigger>
diff --git a/src/components/announcement/SurveyLink.tsx b/src/components/announcement/SurveyLink.tsx
index fd70fb4..6977035 100644
--- a/src/components/announcement/SurveyLink.tsx
+++ b/src/components/announcement/SurveyLink.tsx
@@ -30,7 +30,7 @@ export default function SurveyLink({
       <a
         href="https://docs.google.com/forms/d/1a5S5JxdLjx9qQSucrkZ-wVTDrUcJWhiAPjkAmbmcF1U/edit"
         target="_blank"
-        className="decoration-[#FFB5B5] hover:underline"
+        className="decoration-basepink hover:underline"
       >
         🏃 설문조사 참여하기 🏃
       </a>
diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx
index 28d99a0..9fe52e1 100644
--- a/src/components/buttons/GroupSettingBtn.tsx
+++ b/src/components/buttons/GroupSettingBtn.tsx
@@ -1,11 +1,6 @@
 import Group from '@/types/Group';
 import Image from 'next/image';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 
 export default function GroupSettingBtn({
@@ -17,16 +12,14 @@ export default function GroupSettingBtn({
 }) {
   return (
     !groups.find((group) => group.groupId === curGroup.groupId)?.isInEdit && (
-      <DropdownMenuTrigger className="absolute right-[50px] top-[8px] flex size-10 items-center justify-center rounded-lg hover:bg-gray-200 md:right-[64px] md:top-[16px]">
+      <DropdownMenuTrigger
+        className="absolute right-[50px] top-[10px] flex size-7 items-center justify-center rounded-lg
+      p-1 hover:bg-gray-200 md:right-[64px] md:top-[16px] md:size-10"
+      >
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger>
-              <Image
-                src="/image/pencil.svg"
-                alt="pencil"
-                width={24}
-                height={24}
-              />
+              <Image src="/image/pencil.svg" alt="pencil" width={24} height={24} />
             </TooltipTrigger>
             <TooltipContent>그룹 설정</TooltipContent>
           </Tooltip>
diff --git a/src/components/buttons/MySettingBtn.tsx b/src/components/buttons/MySettingBtn.tsx
index 75f966c..2d0235a 100644
--- a/src/components/buttons/MySettingBtn.tsx
+++ b/src/components/buttons/MySettingBtn.tsx
@@ -1,10 +1,5 @@
 import Image from 'next/image';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export default function MySettingBtn() {
   return (
@@ -16,7 +11,7 @@ export default function MySettingBtn() {
             alt="setting"
             width={60}
             height={60}
-            className="size-[50px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]"
+            className="size-[40px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]"
           />
         </TooltipTrigger>
         <TooltipContent>내 정보 설정</TooltipContent>
diff --git a/src/components/buttons/SetCheckBtn.tsx b/src/components/buttons/SetCheckBtn.tsx
index 3130a13..19977d3 100644
--- a/src/components/buttons/SetCheckBtn.tsx
+++ b/src/components/buttons/SetCheckBtn.tsx
@@ -16,15 +16,15 @@ export default function SetCheckBtn() {
 
   return (
     <Button
-      className="text-l h-8 w-40 gap-1 rounded-full
-     border-2 border-darkblue bg-white
-     p-2 text-darkblue hover:bg-gray-200  lg:h-10 lg:w-52 lg:gap-2 lg:p-4 lg:text-xl"
+      className="h-6 gap-1 rounded-full border-2 border-darkblue bg-white
+     p-2 text-xs text-darkblue
+     hover:bg-gray-200 md:h-8 lg:h-10 lg:w-52 lg:gap-2 lg:p-4 lg:text-xl"
       onClick={() => {
         setChecked(!checked);
         localStorage.setItem('checked', JSON.stringify(!checked));
       }}
     >
-      <Checkbox checked={checked} className="size-4 border-2" size={12} />
+      <Checkbox checked={checked} className="size-3 md:size-4 md:border-2" size={12} />
       출근한 친구만 보기
     </Button>
   );
diff --git a/src/components/buttons/XBtn.tsx b/src/components/buttons/XBtn.tsx
new file mode 100644
index 0000000..416077d
--- /dev/null
+++ b/src/components/buttons/XBtn.tsx
@@ -0,0 +1,5 @@
+import { X } from 'lucide-react';
+
+export default function XBtn({ onClick }: { onClick: () => void }) {
+  return <X className="size-6 cursor-pointer" onClick={onClick} />;
+}
diff --git a/src/components/cards/MyProfileCard.tsx b/src/components/cards/MyProfileCard.tsx
index e586b98..fcf646b 100644
--- a/src/components/cards/MyProfileCard.tsx
+++ b/src/components/cards/MyProfileCard.tsx
@@ -8,16 +8,14 @@ import SetCheckBtn from '@/components/buttons/SetCheckBtn';
 
 export default function MyProfileCard({ user }: { user: User }) {
   return (
-    <div className="flex flex-col items-center justify-center gap-2 pb-2 pt-0 md:gap-0 md:pb-4 lg:px-8">
+    <div className="flex flex-col items-center justify-center px-1 pb-1 md:pb-4 lg:px-8">
       <div className="flex min-h-full min-w-full flex-row items-center justify-between">
         <div className="flex flex-row items-center gap-4 lg:gap-6">
           <ProfilePic user={user} type="myCard" />
-          <div className="flex flex-col items-start gap-2">
+          <div className="flex flex-col items-start gap-1 md:gap-2">
             <CustomLocationModal />
-            <h2 className="text-xl text-darkblue lg:text-3xl">
-              {user.intraName}
-            </h2>
-            <p className=" text-l  lg:text-xl">{user.comment}</p>
+            <h2 className="text-xl text-darkblue lg:text-3xl">{user.intraName}</h2>
+            <p className="text-l lg:text-xl">{user.comment}</p>
           </div>
         </div>
         <MySettingModal />
diff --git a/src/components/cards/ProfileCard.tsx b/src/components/cards/ProfileCard.tsx
index e004726..714f84f 100644
--- a/src/components/cards/ProfileCard.tsx
+++ b/src/components/cards/ProfileCard.tsx
@@ -30,17 +30,17 @@ export default function ProfileCard({
   return (
     <button
       type="button"
-      className={`flex flex-row items-center justify-between rounded-2xl border-2 p-4 hover:border-[#FFB5B5] md:p-6 ${
+      className={`md:hover:border-basepink flex cursor-default flex-row items-center justify-between border-b p-2 md:rounded-2xl md:border-2 md:p-4 ${
         isEdit && 'cursor-pointer'
       }`}
       onClick={clickHandler}
     >
-      <div className="flex flex-row items-center gap-4 md:gap-6">
+      <div className="flex flex-row items-center gap-2 md:gap-4">
         <ProfilePic user={user} type="userCard" />
         <div className="flex flex-col items-start gap-1 md:gap-2">
           <LocationBtn user={user} />
           <h2 className=" text-xl text-darkblue md:text-3xl">{user.intraName}</h2>
-          <p className=" text-l  lg:text-xl">{user.comment}</p>
+          <p className="text-md lg:text-lg">{user.comment}</p>
         </div>
       </div>
       {isEdit ? (
diff --git a/src/components/cards/SearchedCard.tsx b/src/components/cards/SearchedCard.tsx
index 15a2fe6..ff05ba9 100644
--- a/src/components/cards/SearchedCard.tsx
+++ b/src/components/cards/SearchedCard.tsx
@@ -8,18 +8,20 @@ export default function SearchedCard({
   member,
   onClick,
   isAddingUser,
+  isAlreadyAdded,
 }: {
   member: SearchedUser;
   onClick?: () => void;
   isAddingUser?: boolean;
+  isAlreadyAdded?: boolean;
 }) {
   const { addedMembers } = useAddedMembersStore();
   return (
     <button
       type="button"
-      className={`flex flex-row items-center justify-between rounded-2xl border-2 p-2 cursor-default ${
+      className={`flex cursor-default flex-row items-center justify-between rounded-2xl border-2 p-2 ${
         isAddingUser &&
-        'transform cursor-pointer transition-transform hover:border-[#FFB5B5] active:scale-95'
+        `hover:border-basepink transform cursor-pointer transition-transform active:scale-95 ${isAlreadyAdded && 'border-basepink'}`
       }`}
       onClick={() => onClick && onClick()}
     >
@@ -27,15 +29,11 @@ export default function SearchedCard({
         <ProfilePic user={member} type="searchedCard" />
         <div className="flex flex-col items-start gap-1">
           <LocationBtn user={member} />
-          <h2 className=" text-xl text-darkblue md:text-2xl">
-            {member.intraName}
-          </h2>
+          <h2 className=" text-xl text-darkblue md:text-2xl">{member.intraName}</h2>
           <p className=" md:text-md text-sm ">{member.comment}</p>
         </div>
       </div>
-      {!addedMembers.find(
-        (a) => a === member.intraId,
-      ) && <FriendAddBtn member={member} />}
+      {!addedMembers.find((a) => a === member.intraId) && <FriendAddBtn member={member} />}
     </button>
   );
 }
diff --git a/src/components/group/GroupCardContainer.tsx b/src/components/group/GroupCardContainer.tsx
index 0520a96..6761578 100644
--- a/src/components/group/GroupCardContainer.tsx
+++ b/src/components/group/GroupCardContainer.tsx
@@ -8,7 +8,7 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) {
 
   return (
     <>
-      <div className="grid grid-flow-row gap-4 lg:grid-cols-2 air:grid-cols-3 3xl:grid-cols-4">
+      <div className="4xl:grid-cols-4 grid grid-flow-row border-t md:gap-4 md:border-0 lg:grid-cols-2 air:grid-cols-3">
         {curGroup.members.map(
           (member) =>
             (!checked || member.inCluster) && (
@@ -23,9 +23,8 @@ export default function GroupCardContainer({ curGroup }: { curGroup: Group }) {
         )}
       </div>
       {(curGroup.members.length === 0 ||
-        (checked &&
-          !curGroup.members.filter((member) => member.inCluster).length)) && (
-          <p className="text-center text-xl">아무도 없어요.. 😢</p>
+        (checked && !curGroup.members.filter((member) => member.inCluster).length)) && (
+        <p className="p-6 text-center md:text-xl">아무도 없어요.. 😢</p>
       )}
     </>
   );
diff --git a/src/components/group/GroupEditBar.tsx b/src/components/group/GroupEditBar.tsx
index 8fb3904..4cbb960 100644
--- a/src/components/group/GroupEditBar.tsx
+++ b/src/components/group/GroupEditBar.tsx
@@ -4,13 +4,7 @@ import { Button } from '@/components/ui/button';
 import GroupDeleteModal from '@/components/modals/GroupDeleteModal';
 import GroupAddModal from '@/components/modals/GroupAddModal';
 
-export default function GroupEditBar({
-  groups,
-  curGroup,
-}: {
-  groups: Group[];
-  curGroup: Group;
-}) {
+export default function GroupEditBar({ groups, curGroup }: { groups: Group[]; curGroup: Group }) {
   const { setGroups } = useGroupsStore();
   const { checkedUsers, setCheckedUsers } = useCheckedUsersStore();
   return (
@@ -23,8 +17,8 @@ export default function GroupEditBar({
       )}
       <div className="flex flex-row gap-1 md:gap-2">
         <Button
-          className="text-l h-6 gap-2 rounded-full border-2 border-darkblue bg-white
-           px-2 py-1 text-darkblue hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2 border-darkblue bg-white
+           px-2 py-1 text-xs text-darkblue hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
           onClick={() => {
             if (checkedUsers.length !== curGroup.members.length) {
               // curGroup.members.map((member) => temp.push(member));
@@ -35,8 +29,8 @@ export default function GroupEditBar({
           전체 선택
         </Button>
         <Button
-          className="text-l h-6 gap-2 rounded-full border-2 border-darkblue px-2
-           text-white md:h-8 md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2 border-darkblue px-2
+           text-xs text-white md:h-8 md:px-3 lg:text-xl"
           onClick={() => {
             setGroups(
               groups.map((g) => {
diff --git a/src/components/group/GroupHeadCount.tsx b/src/components/group/GroupHeadCount.tsx
index eb85b7b..0bb550e 100644
--- a/src/components/group/GroupHeadCount.tsx
+++ b/src/components/group/GroupHeadCount.tsx
@@ -4,13 +4,8 @@ export default function GroupHeadCount({ curGroup }: { curGroup: Group }) {
   return (
     <span className="flex flex-row items-center justify-start gap-6">
       {curGroup.groupName}
-      <p className="text-xl md:text-2xl">
-        {
-          curGroup.members.filter(
-            (member) => member.location || member.inCluster,
-          ).length
-        }
-        /
+      <p className="md:text-2xl">
+        {curGroup.members.filter((member) => member.location || member.inCluster).length}/
         {curGroup.members.length}
       </p>
     </span>
diff --git a/src/components/group/Groups.tsx b/src/components/group/Groups.tsx
index 9ad74e0..1454bd2 100644
--- a/src/components/group/Groups.tsx
+++ b/src/components/group/Groups.tsx
@@ -24,14 +24,12 @@ export default function Groups({ groups }: { groups: Group[] }) {
           value={curGroup.groupId.toString()}
           className="relative overflow-hidden transition-all duration-500 ease-in-out"
         >
-          {curGroup.isInEdit && (
-            <GroupEditBar groups={groups} curGroup={curGroup} />
-          )}
+          {curGroup.isInEdit && <GroupEditBar groups={groups} curGroup={curGroup} />}
           <GroupSettingModal curGroup={curGroup} />
-          <AccordionTrigger className="text-l p-2 text-darkblue md:p-4 md:text-2xl">
+          <AccordionTrigger className="p-1 text-darkblue md:p-4 md:text-2xl">
             <GroupHeadCount curGroup={curGroup} />
           </AccordionTrigger>
-          <AccordionContent>
+          <AccordionContent className="pb-0 md:pb-4">
             <GroupCardContainer curGroup={curGroup} />
           </AccordionContent>
         </AccordionItem>
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 539f41f..f28c7e8 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -19,7 +19,7 @@ export default function Header({ isAdmin }: { isAdmin: boolean }) {
         alt="logo"
         width={200}
         height={100}
-        className={`${isAdmin && 'h-[75px] w-[200px] lg:h-[100px] lg:w-[300px]'} h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]`}
+        className={`${isAdmin && 'h-[50px] w-[100px] lg:h-[100px] lg:w-[300px]'} h-[50px] w-[100px] lg:h-[100px] lg:w-[200px]`}
       />
       {inAdminPage ? <HomeLinkBtn /> : <HeaderMenu isAdmin={isAdmin} />}
     </header>
diff --git a/src/components/modals/GroupAddModal.tsx b/src/components/modals/GroupAddModal.tsx
index 8563ca1..0a26341 100644
--- a/src/components/modals/GroupAddModal.tsx
+++ b/src/components/modals/GroupAddModal.tsx
@@ -58,8 +58,8 @@ export default function GroupAddModal({ curGroup }: { curGroup: Group }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          className="text-l h-6 gap-2 rounded-full
-          border-2 border-darkblue bg-white px-2 text-darkblue hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
+          className="h-5 gap-2 rounded-full border-2
+          border-darkblue bg-white px-2 text-xs text-darkblue hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
         >
           다른 그룹에 추가
         </Button>
diff --git a/src/components/modals/GroupDeleteModal.tsx b/src/components/modals/GroupDeleteModal.tsx
index 6ae72d3..c3f51cb 100644
--- a/src/components/modals/GroupDeleteModal.tsx
+++ b/src/components/modals/GroupDeleteModal.tsx
@@ -52,8 +52,8 @@ export default function GroupDeleteModal({ curGroup }: { curGroup: Group }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          className="text-l h-6 gap-2 rounded-full
-          border-2 border-red-700 bg-white px-2 text-red-700 hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
+          className="h-5 rounded-full border-2 border-red-700 bg-white
+          px-2 text-xs text-red-700 hover:bg-gray-200 md:h-8 md:px-3 lg:text-xl"
         >
           삭제
         </Button>
diff --git a/src/components/modals/GroupSettingModal.tsx b/src/components/modals/GroupSettingModal.tsx
index 96945f9..ff46c01 100644
--- a/src/components/modals/GroupSettingModal.tsx
+++ b/src/components/modals/GroupSettingModal.tsx
@@ -1,5 +1,4 @@
 import { useState, useRef, FormEvent } from 'react';
-import { X } from 'lucide-react';
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import { Dialog, DialogContent, DialogTitle, DialogClose } from '@/components/ui/dialog';
 import groupApi from '@/api/groupApi';
@@ -9,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import Group from '@/types/Group';
 import { useToast } from '@/components/ui/use-toast';
 import GroupSettingBtn from '@/components/buttons/GroupSettingBtn';
+import XBtn from '@/components/buttons/XBtn';
 
 export default function GroupSettingModal({ curGroup }: { curGroup: Group }) {
   const [isDelete, setIsDelete] = useState<boolean>(false);
@@ -88,22 +88,22 @@ export default function GroupSettingModal({ curGroup }: { curGroup: Group }) {
     <Dialog onOpenChange={(open) => openHandler(open)}>
       <DropdownMenu>
         <GroupSettingBtn groups={groups} curGroup={curGroup} />
-        <DropdownMenuContent side="bottom" className=" min-w-50 text-darkblue">
+        <DropdownMenuContent side="bottom" className="min-w-50 text-darkblue">
           {curGroup.members.length > 0 && (
-            <DropdownMenuItem className="text-xl" onClick={() => editClickHandler()}>
+            <DropdownMenuItem className="md:text-xl" onClick={() => editClickHandler()}>
               그룹 수정
             </DropdownMenuItem>
           )}
           {defalutGroupId !== curGroup.groupId && (
             <>
               <DialogTrigger asChild>
-                <DropdownMenuItem className="text-xl" onClick={() => setIsDelete(false)}>
+                <DropdownMenuItem className="md:text-xl" onClick={() => setIsDelete(false)}>
                   그룹명 수정
                 </DropdownMenuItem>
               </DialogTrigger>
               <DialogTrigger asChild>
                 <DropdownMenuItem
-                  className="text-xl text-red-700"
+                  className="text-red-700 md:text-xl"
                   onClick={() => setIsDelete(true)}
                 >
                   그룹 삭제
@@ -153,8 +153,7 @@ export default function GroupSettingModal({ curGroup }: { curGroup: Group }) {
                 />
               </form>
               {groupName && (
-                <X
-                  className="size-6"
+                <XBtn
                   onClick={() => {
                     formRef.current?.reset();
                     setGroupName('');
diff --git a/src/components/modals/MySettingModal.tsx b/src/components/modals/MySettingModal.tsx
index d42290a..7466202 100644
--- a/src/components/modals/MySettingModal.tsx
+++ b/src/components/modals/MySettingModal.tsx
@@ -1,22 +1,18 @@
 import { useState, useRef, FormEvent } from 'react';
-import { X } from 'lucide-react';
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import memberApi from '@/api/memberApi';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 import { useUserStore } from '@/lib/stores';
 import CustomLocationContent from '@/components/utils/CustomLocationContent';
 import SettingBtn from '@/components/buttons/MySettingBtn';
+import XBtn from '@/components/buttons/XBtn';
 
 export default function MySettingModal() {
   const [isMessage, setIsMessage] = useState<boolean>(false);
@@ -80,14 +76,11 @@ export default function MySettingModal() {
         </DropdownMenuTrigger>
         <DropdownMenuContent side="left" className=" min-w-50 text-darkblue">
           <DialogTrigger asChild onClick={() => setIsMessage(true)}>
-            <DropdownMenuItem className="text-xl">
-              상태 메시지 수정
-            </DropdownMenuItem>
+            <DropdownMenuItem className="md:text-xl">상태 메시지 수정</DropdownMenuItem>
           </DialogTrigger>
+          <DropdownMenuSeparator />
           <DialogTrigger asChild onClick={() => setIsMessage(false)}>
-            <DropdownMenuItem className="text-xl">
-              수동 위치 설정
-            </DropdownMenuItem>
+            <DropdownMenuItem className="md:text-xl">수동 위치 설정</DropdownMenuItem>
           </DialogTrigger>
         </DropdownMenuContent>
       </DropdownMenu>
@@ -115,8 +108,7 @@ export default function MySettingModal() {
                 {searchValue.length}/15
               </p>
               {searchValue && (
-                <X
-                  className="size-6"
+                <XBtn
                   onClick={() => {
                     formRef.current?.reset();
                     setSearchValue('');
@@ -128,10 +120,7 @@ export default function MySettingModal() {
           </DialogHeader>
         </DialogContent>
       ) : (
-        <CustomLocationContent
-          resultMessage={resultMessage}
-          setResultMessage={setResultMessage}
-        />
+        <CustomLocationContent resultMessage={resultMessage} setResultMessage={setResultMessage} />
       )}
     </Dialog>
   );
diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx
index 85c3cbd..ba29f65 100644
--- a/src/components/modals/NewGroupModal.tsx
+++ b/src/components/modals/NewGroupModal.tsx
@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect, FormEvent } from 'react';
-import { X } from 'lucide-react';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
 import {
@@ -25,6 +24,7 @@ import Group from '@/types/Group';
 import { useToast } from '@/components/ui/use-toast';
 import { SearchedUser, User } from '@/types/User';
 import SearchedCard from '@/components/cards/SearchedCard';
+import XBtn from '@/components/buttons/XBtn';
 
 export default function NewGroupModal() {
   const { groups, setGroups } = useGroupsStore();
@@ -165,8 +165,8 @@ export default function NewGroupModal() {
     <Dialog onOpenChange={(open) => openHandler(open)}>
       <DialogTrigger>
         <Button
-          className="text-l w-30 lg:w-30 h-8 gap-2 rounded-full
-          border-2 border-darkblue bg-white  px-3 py-1 text-darkblue hover:bg-gray-200 lg:h-10 lg:text-xl"
+          className="h-6 gap-2 rounded-full border-2 border-darkblue
+          bg-white px-3 py-1  text-xs text-darkblue hover:bg-gray-200 md:h-8 lg:h-10 lg:text-xl"
         >
           <Image src="/image/newGroup.svg" alt="newGroup" width={20} height={20} />새 그룹
         </Button>
@@ -212,8 +212,7 @@ export default function NewGroupModal() {
                       className="flex flex-row items-center gap-2 rounded-xl border border-gray-400 p-2 shadow-lg"
                     >
                       <p className="text-l  text-darkblue">{selectedUser.intraName}</p>
-                      <X
-                        className="size-6 cursor-pointer"
+                      <XBtn
                         onClick={() => {
                           setSelectedUsers(
                             selectedUsers.filter((selected) => selected !== selectedUser),
@@ -233,8 +232,7 @@ export default function NewGroupModal() {
                   onChange={(e) => setSearchValue(e.target.value)}
                 />
                 {searchValue && (
-                  <X
-                    className="size-6"
+                  <XBtn
                     onClick={() => {
                       formRef.current?.reset();
                       setSearchValue('');
@@ -250,6 +248,9 @@ export default function NewGroupModal() {
                       member={searchedMember as SearchedUser}
                       onClick={() => clickSearchedUserHandler(searchedMember as SearchedUser)}
                       isAddingUser
+                      isAlreadyAdded={selectedUsers.some(
+                        (selectedUser) => selectedUser.intraId === searchedMember.intraId,
+                      )}
                     />
                   ))}
                 </div>
@@ -277,8 +278,7 @@ export default function NewGroupModal() {
                 />
               </form>
               {searchValue && (
-                <X
-                  className="size-6"
+                <XBtn
                   onClick={() => {
                     formRef.current?.reset();
                     setSearchValue('');
diff --git a/src/components/modals/SearchModal.tsx b/src/components/modals/SearchModal.tsx
index e760842..8158c53 100644
--- a/src/components/modals/SearchModal.tsx
+++ b/src/components/modals/SearchModal.tsx
@@ -1,6 +1,5 @@
 import { useState, useRef, FormEvent } from 'react';
 import Image from 'next/image';
-import { X } from 'lucide-react';
 import { z } from 'zod';
 import SearchedCard from '@/components/cards/SearchedCard';
 import SearchBtn from '@/components/buttons/SearchBtn';
@@ -14,6 +13,7 @@ import {
 import memberApi from '@/api/memberApi';
 import { useUserStore } from '@/lib/stores';
 import { SearchedUser } from '@/types/User';
+import XBtn from '@/components/buttons/XBtn';
 
 const SearchInputSchema = z.string().regex(/^[a-zA-Z0-9-]*$/, {
   message: '영어, 숫자, -만 입력 가능합니다.',
@@ -111,8 +111,7 @@ export default function SearchModal() {
             />
           </form>
           {searchValue && (
-            <X
-              className="size-6"
+            <XBtn
               onClick={() => {
                 formRef.current?.reset();
                 setSearchValue('');
@@ -124,7 +123,7 @@ export default function SearchModal() {
         {/* eslint-disable-next-line no-nested-ternary */}
         {searchedUsers?.length ? (
           searchedUsers?.length > 4 ? (
-            <div className="h-[200px] w-full overflow-scroll rounded-md md:h-[600px]">
+            <div className="h-[400px] w-full overflow-scroll rounded-md md:h-[600px]">
               <div className="grid grid-flow-row gap-2 md:grid-cols-2">
                 {searchedUsers?.map((searchedMember) => (
                   <SearchedCard key={searchedMember.intraId} member={searchedMember} />
diff --git a/src/components/modals/UserSettingModal.tsx b/src/components/modals/UserSettingModal.tsx
index 85e7bf4..1e27221 100644
--- a/src/components/modals/UserSettingModal.tsx
+++ b/src/components/modals/UserSettingModal.tsx
@@ -1,9 +1,19 @@
 import { useState } from 'react';
-import { DialogTrigger } from '@radix-ui/react-dialog';
+import {
+  DialogTrigger,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from '@/components/ui/dialog';
 import Image from 'next/image';
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import { Dialog, DialogContent, DialogTitle, DialogClose } from '@/components/ui/dialog';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import {
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
 import {
   useGroupsStore,
   useUserStore,
@@ -113,13 +123,17 @@ export default function UserSettingModal({
         </DropdownMenuTrigger>
         <DropdownMenuContent side="bottom" className="min-w-50  text-darkblue">
           <DialogTrigger asChild onClick={() => setIsDelete(false)}>
-            <DropdownMenuItem className="text-xl">다른 그룹에 추가하기</DropdownMenuItem>
+            <DropdownMenuItem className="md:text-xl">다른 그룹에 추가하기</DropdownMenuItem>
           </DialogTrigger>
-          <DropdownMenuItem className="text-xl" onClick={() => selectClickHandler()}>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="md:text-xl" onClick={() => selectClickHandler()}>
             유저 선택하기
           </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <DialogTrigger asChild onClick={() => setIsDelete(true)}>
-            <DropdownMenuItem className="text-xl text-red-700">그룹에서 삭제하기</DropdownMenuItem>
+            <DropdownMenuItem className="text-red-700 md:text-xl">
+              그룹에서 삭제하기
+            </DropdownMenuItem>
           </DialogTrigger>
         </DropdownMenuContent>
       </DropdownMenu>
@@ -167,12 +181,12 @@ export default function UserSettingModal({
             <h3 style={{ display: 'inline', margin: '0' }}>
               &quot;
               {targUser.intraName}
-              &quot;
+              &quot;{' '}
             </h3>
             <p style={{ display: 'inline', margin: '0' }}>님을</p>
             <h3 style={{ display: 'inline', margin: '0' }}>
-              &quot;
-              {targGroup.groupName}
+              {' '}
+              &quot;{targGroup.groupName}
               &quot;{' '}
             </h3>
             그룹으로부터 삭제하시겠습니까?
diff --git a/src/components/utils/CustomLocationContent.tsx b/src/components/utils/CustomLocationContent.tsx
index 9e524db..ca3c6a4 100644
--- a/src/components/utils/CustomLocationContent.tsx
+++ b/src/components/utils/CustomLocationContent.tsx
@@ -46,7 +46,7 @@ export default function CustomLocationContent({
         className="flex min-h-[300px] max-w-[550px] flex-col items-center
        justify-center transition-all duration-500 ease-out"
       >
-        <p className="text-center text-xl  ">
+        <p className="text-md text-center md:text-xl">
           수동 위치 설정은 클러스터 안에 있을 때만 가능해요 😢
         </p>
       </DialogContent>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8d9b9e9..2315259 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -27,7 +27,7 @@ export default function Home() {
 
   return (
     <>
-      <main className="flex h-full min-h-screen w-full flex-col justify-start px-2 md:px-10">
+      <main className="flex h-full min-h-screen w-full flex-col justify-start px-1 md:px-10">
         <AgreementModal showModal={showModal} setShowModal={setShowModal} />
         <Header isAdmin={isAdmin} />
         {user ? <MyProfileCard user={user} /> : <ProfileSkeleton />}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7de8050..c0c4563 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -53,6 +53,7 @@
     --ring: 240 10% 3.9%;
     --darkblue: 215 56% 17%;
     --baseblue: 214 27.5% 40%;
+    --basepink: 0 100% 85.5%;
 
     --radius: 0.5rem;
   }
diff --git a/src/types/CascaderOption.ts b/src/types/CascaderOption.ts
index b4c168c..bcea3ca 100644
--- a/src/types/CascaderOption.ts
+++ b/src/types/CascaderOption.ts
@@ -25,7 +25,7 @@ export const DefaultCustomLocation: CascaderOption = {
       value: '2층',
       children: [
         {
-          label: '1클러스터',
+          label: 'C1',
           value: 'c1',
           children: [
             { label: '회의실', value: '회의실' },
@@ -34,7 +34,7 @@ export const DefaultCustomLocation: CascaderOption = {
           ],
         },
         {
-          label: '2클러스터',
+          label: 'C2',
           value: 'c2',
           children: [
             { label: '테이블', value: '테이블' },
@@ -48,7 +48,7 @@ export const DefaultCustomLocation: CascaderOption = {
       value: '3층',
       children: [
         {
-          label: 'x1클러스터',
+          label: 'CX1',
           value: 'cx1',
           children: [
             { label: '회의실', value: '회의실' },
@@ -57,7 +57,7 @@ export const DefaultCustomLocation: CascaderOption = {
           ],
         },
         {
-          label: 'x2클러스터',
+          label: 'CX2',
           value: 'cx2',
           children: [
             { label: '테이블', value: '테이블' },
@@ -71,7 +71,7 @@ export const DefaultCustomLocation: CascaderOption = {
       value: '4층',
       children: [
         {
-          label: '3클러스터',
+          label: 'C3',
           value: 'c3',
           children: [
             { label: '회의실', value: '회의실' },
@@ -80,7 +80,7 @@ export const DefaultCustomLocation: CascaderOption = {
           ],
         },
         {
-          label: '4클러스터',
+          label: 'C4',
           value: 'c4',
           children: [
             { label: '테이블', value: '테이블' },
@@ -94,7 +94,7 @@ export const DefaultCustomLocation: CascaderOption = {
       value: '5층',
       children: [
         {
-          label: '5클러스터',
+          label: 'C5',
           value: 'c5',
           children: [
             { label: '집현전', value: '집현전' },
@@ -103,7 +103,7 @@ export const DefaultCustomLocation: CascaderOption = {
           ],
         },
         {
-          label: '6클러스터',
+          label: 'C6',
           value: '개포 5층 c6',
           children: [
             { label: '테이블', value: '개포 5층 c6 테이블' },
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fb2f85c..af0da85 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,7 @@ const config = {
       air: '1400px',
       '2xl': '1536px',
       '3xl': '1600px',
+      '4xl': '1800px',
     },
     container: {
       center: true,
@@ -37,6 +38,7 @@ const config = {
         foreground: 'hsl(var(--foreground))',
         darkblue: 'hsl(var(--darkblue))',
         baseblue: 'hsl(var(--baseblue))',
+        basepink: 'hsl(var(--basepink))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',