diff --git a/package-lock.json b/package-lock.json
index b436999..982d165 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.1.2",
-        "axios": "^1.6.7",
+        "axios": "^1.7.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
diff --git a/package.json b/package.json
index 9499096..c8d8f10 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "axios": "^1.6.7",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
diff --git a/src/api/groupApi.ts b/src/api/groupApi.ts
index 4b3b6a1..d13a444 100644
--- a/src/api/groupApi.ts
+++ b/src/api/groupApi.ts
@@ -1,6 +1,6 @@
-import { axios } from '@/lib/Axios';
-import Group from '@/types/Group';
-import { User } from '@/types/User';
+import { axios } from "@/lib/Axios";
+import Group from "@/types/Group";
+import { User } from "@/types/User";
 
 const groupApi = {
   /**
@@ -13,7 +13,7 @@ const groupApi = {
   }: {
     groupId: number;
   }): Promise<User[]> => {
-    const response = await axios.get('/v3/group/groupmember', {
+    const response = await axios.get("/v3/group/groupmember", {
       params: { groupId },
     });
     return response.data;
@@ -31,7 +31,7 @@ const groupApi = {
     groupId: number;
     members: number[];
   }): Promise<number[]> => {
-    const response = await axios.put('/v3/group/groupmember', {
+    const response = await axios.put("/v3/group/groupmember", {
       groupId,
       members,
     });
@@ -49,7 +49,7 @@ const groupApi = {
     groupId: number;
     members: number[];
   }): Promise<number> => {
-    const response = await axios.post('/v3/group/groupmember/members', {
+    const response = await axios.post("/v3/group/groupmember/members", {
       groupId,
       members,
     });
@@ -61,7 +61,7 @@ const groupApi = {
    * 임시로 any를 사용하였지만 백엔드에서 타입 정의 후 수정 필요
    */
   getAllGroups: async (): Promise<Group[]> => {
-    const response = await axios.get('/v3/group');
+    const response = await axios.get("/v3/group");
     return response.data;
   },
   /**
@@ -74,7 +74,7 @@ const groupApi = {
   }: {
     groupName: string;
   }): Promise<{ groupId: number; groupName: string }> => {
-    const response = await axios.post('/v3/group', {
+    const response = await axios.post("/v3/group", {
       groupName,
     });
     console.table(response.data);
@@ -93,7 +93,7 @@ const groupApi = {
     groupId: number;
     groupName: string;
   }): Promise<{ groupId: number; groupName: string }> => {
-    const response = await axios.post('/v3/group/name', {
+    const response = await axios.post("/v3/group/name", {
       groupId,
       groupName,
     });
@@ -109,7 +109,7 @@ const groupApi = {
   }: {
     groupId: number;
   }): Promise<{ groupId: number }> => {
-    const response = await axios.delete('/v3/group', { params: { groupId } });
+    const response = await axios.delete("/v3/group", { params: { groupId } });
     return response.data;
   },
 
@@ -126,7 +126,7 @@ const groupApi = {
     groupId: number;
     userNames: string[];
   }): Promise<number> => {
-    const response = await axios.post('/v3/group/groupmember', {
+    const response = await axios.post("/v3/group/groupmember", {
       groupId,
       members: userNames,
     });
@@ -134,7 +134,7 @@ const groupApi = {
   },
 
   agreeJoin: async (): Promise<number> => {
-    const response = await axios.post('/v3/join');
+    const response = await axios.post("/v3/join");
     return response.status;
   },
 };
diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx
index 69d2b9e..ed4d92a 100644
--- a/src/components/Groups.tsx
+++ b/src/components/Groups.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -24,7 +23,15 @@ export default function Groups({ groups }: { groups: Group[] }) {
   const { checkedUsers, setCheckedUsers } = useCheckedUsersStore();
   const { checked } = useCheckedStore();
   const sortedGroups = [...groups].sort((a, b) => a.groupId - b.groupId);
+  const defaultGroup = sortedGroups.find(
+    (group) => group.groupName === "친구 목록",
+  );
+  if (defaultGroup) {
+    sortedGroups.splice(sortedGroups.indexOf(defaultGroup), 1);
+    sortedGroups.push(defaultGroup);
+  }
   const defaultValues = sortedGroups.map((group) => group.groupId.toString());
+
   return (
     <div>
       <Divider />
@@ -86,7 +93,7 @@ export default function Groups({ groups }: { groups: Group[] }) {
                 </div>
               )}
               <GroupSettingModal curGroup={group} />
-              <AccordionTrigger className="text-l p-2 px-6 text-darkblue md:p-4  md:text-2xl">
+              <AccordionTrigger className="text-l p-2 text-darkblue md:p-4 md:text-2xl">
                 <span className="flex flex-row items-center justify-start gap-6">
                   {group.groupName}
                   <p className="text-xl md:text-2xl">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2855235..514f420 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,21 +1,21 @@
-import React from 'react';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import SearchModal from '@/components/modals/SearchModal';
-import LogoutBtn from '@/components/buttons/LogoutBtn';
+import React from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import SearchModal from "@/components/modals/SearchModal";
+import LogoutBtn from "@/components/buttons/LogoutBtn";
 
 export default function Header() {
   const router = useRouter();
   return (
-    <header className='flex flex-row justify-between items-center p-2 pb-0 md:p-4'>
+    <header className="flex flex-row items-center justify-between p-2 pb-0 md:p-4">
       <Image
-        src='/image/logo/logoC.svg'
-        alt='logo'
+        src="/image/logo/logoC.svg"
+        alt="logo"
         width={200}
         height={100}
-        className='lg:w-[200px] lg:h-[100px] w-[150px] h-[75px]'
+        className="h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]"
       />
-      <div className='flex flex-row gap-2'>
+      <div className="flex flex-row gap-2">
         <SearchModal />
         <LogoutBtn />
       </div>
diff --git a/src/components/ProfilePic.tsx b/src/components/ProfilePic.tsx
index 4863335..c335c1f 100644
--- a/src/components/ProfilePic.tsx
+++ b/src/components/ProfilePic.tsx
@@ -38,9 +38,7 @@ export default function ProfilePic({
           </Avatar>
         </TooltipTrigger>
         {type !== "searchedCard" && (
-          <TooltipContent>
-            <p className="text-l lg:text-xl">인트라 프로필 방문</p>
-          </TooltipContent>
+          <TooltipContent>인트라 프로필 방문</TooltipContent>
         )}
       </Tooltip>
     </TooltipProvider>
diff --git a/src/components/buttons/GroupSettingBtn.tsx b/src/components/buttons/GroupSettingBtn.tsx
index a1ae5f0..239a99f 100644
--- a/src/components/buttons/GroupSettingBtn.tsx
+++ b/src/components/buttons/GroupSettingBtn.tsx
@@ -28,9 +28,7 @@ export default function GroupSettingBtn({
               height={24}
             />
           </TooltipTrigger>
-          <TooltipContent>
-            <p className="text-l lg:text-xl">그룹 설정</p>
-          </TooltipContent>
+          <TooltipContent>그룹 설정</TooltipContent>
         </Tooltip>
       </TooltipProvider>
     </DropdownMenuTrigger>
diff --git a/src/components/buttons/LocationBtn.tsx b/src/components/buttons/LocationBtn.tsx
index 9b7ad83..008c13a 100644
--- a/src/components/buttons/LocationBtn.tsx
+++ b/src/components/buttons/LocationBtn.tsx
@@ -38,17 +38,13 @@ export default function LocationBtn({
             ${
               location !== "퇴근"
                 ? "bg-darkblue"
-                : "border-darkblue text-darkblue border-2 bg-white hover:bg-white"
+                : "border-2 border-darkblue bg-white text-darkblue hover:bg-white"
             } h-6 px-2 md:h-8 md:px-3 md:text-xl `}
           >
             {location}
           </Button>
         </TooltipTrigger>
-        {isMyProfile && (
-          <TooltipContent>
-            <p className=" text-l  lg:text-xl">내 위치 변경</p>
-          </TooltipContent>
-        )}
+        {isMyProfile && <TooltipContent>내 위치 변경</TooltipContent>}
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/components/buttons/LogoutBtn.tsx b/src/components/buttons/LogoutBtn.tsx
index 1412338..612c79e 100644
--- a/src/components/buttons/LogoutBtn.tsx
+++ b/src/components/buttons/LogoutBtn.tsx
@@ -33,9 +33,7 @@ export default function LogoutBtn() {
             />
           </div>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">로그아웃</p>
-        </TooltipContent>
+        <TooltipContent>로그아웃</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/components/buttons/MySettingBtn.tsx b/src/components/buttons/MySettingBtn.tsx
index b650596..bedd410 100644
--- a/src/components/buttons/MySettingBtn.tsx
+++ b/src/components/buttons/MySettingBtn.tsx
@@ -19,9 +19,7 @@ export default function MySettingBtn() {
             className="size-[50px] cursor-pointer rounded-lg hover:bg-gray-200 lg:size-[60px]"
           />
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">내 정보 설정</p>
-        </TooltipContent>
+        <TooltipContent>내 정보 설정</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/components/buttons/RefreshBtn.tsx b/src/components/buttons/RefreshBtn.tsx
new file mode 100644
index 0000000..ddc4a4f
--- /dev/null
+++ b/src/components/buttons/RefreshBtn.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+import groupApi from "@/api/groupApi";
+import { useGroupsStore, useUserStore } from "@/lib/stores";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+
+export default function RefreshBtn() {
+  const { setGroups } = useGroupsStore();
+  const { user } = useUserStore();
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant={"ghost"} className="h-fit max-h-20 w-fit">
+            <Image
+              src="/image/logo/logoB.svg"
+              alt="logo"
+              width={200}
+              height={100}
+              className="h-[75px] w-[150px] lg:h-[100px] lg:w-[200px]"
+              onClick={async () => {
+                console.log("refresh");
+                groupApi.getAllGroups().then((res) => {
+                  res.map((group) => {
+                    if (group.groupId === user?.defaultGroupId)
+                      group.groupName = "친구 목록";
+                  });
+                  setGroups(res);
+                });
+              }}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>자리상태 새로고침</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/components/buttons/SearchBtn.tsx b/src/components/buttons/SearchBtn.tsx
index 7ef1155..fc46cd5 100644
--- a/src/components/buttons/SearchBtn.tsx
+++ b/src/components/buttons/SearchBtn.tsx
@@ -25,9 +25,7 @@ export default function SearchBtn() {
             />
           </div>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className=" text-l  lg:text-xl">유저 검색</p>
-        </TooltipContent>
+        <TooltipContent>유저 검색</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/components/modals/NewGroupModal.tsx b/src/components/modals/NewGroupModal.tsx
index 71306ae..d27df41 100644
--- a/src/components/modals/NewGroupModal.tsx
+++ b/src/components/modals/NewGroupModal.tsx
@@ -59,6 +59,7 @@ export default function NewGroupModal() {
             setSelectedUsers([]);
             formRef.current?.reset();
             setSearchValue("");
+            setIsAddingUser(false);
           }, 100);
         } else {
           setSelectedUsers([]);
@@ -69,8 +70,8 @@ export default function NewGroupModal() {
     >
       <DialogTrigger>
         <Button
-          className="text-l w-30 lg:w-30 border-darkblue text-darkblue h-8
-          gap-2 rounded-full border-2  bg-white px-3 py-1 hover:bg-gray-200 lg:h-10 lg:text-xl"
+          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"
         >
           <Image
             src="/image/newGroup.svg"
@@ -84,7 +85,7 @@ export default function NewGroupModal() {
       <DialogContent className="max-w-[800px] transition-all duration-500 ease-out">
         <DialogHeader className="flex w-full flex-col items-center justify-center gap-2">
           <AlertDialog open={isDuplicated}>
-            <AlertDialogContent className="text-darkblue max-w-[425px] transition-all duration-500  ease-out">
+            <AlertDialogContent className="max-w-[425px] text-darkblue transition-all duration-500  ease-out">
               <AlertDialogHeader>
                 <AlertDialogTitle>중복 그룹 확인</AlertDialogTitle>
                 <AlertDialogDescription>
@@ -136,9 +137,9 @@ export default function NewGroupModal() {
           </AlertDialog>
           <DialogTitle>새로운 그룹 생성</DialogTitle>
           {isAddingUser ? (
-            <div className="flex w-full flex-col items-center justify-center gap-4 overflow-scroll">
+            <div className="flex w-full flex-col items-center justify-center gap-4">
               {selectedUsers.length > 0 && (
-                <div className="flex w-[300px] flex-row gap-2 overflow-x-scroll md:w-[700px]">
+                <div className="flex w-[300px] flex-row gap-2 overflow-auto md:w-[700px]">
                   {selectedUsers.map((selectedUser) => (
                     <div
                       key={selectedUser.intraId}
@@ -170,7 +171,7 @@ export default function NewGroupModal() {
                 />
                 <input
                   ref={inputRef}
-                  className="text-l text-darkblue w-full bg-transparent outline-none placeholder:text-gray-500  dark:text-gray-700"
+                  className="text-l w-full bg-transparent text-darkblue outline-none placeholder:text-gray-500  dark:text-gray-700"
                   placeholder="새 그룹에 추가할 친구를 검색하세요."
                   onChange={(e) => setSearchValue(e.target.value)}
                 />
@@ -184,7 +185,7 @@ export default function NewGroupModal() {
                   />
                 )}
               </div>
-              <div className="h-[300px] w-full overflow-scroll rounded-md md:h-[500px]">
+              <div className="h-[300px] w-full overflow-auto rounded-md md:h-[500px]">
                 <div className="grid grid-flow-row gap-2 md:grid-cols-2">
                   {searchedUsers?.map((searchedMember) => (
                     <SearchedCard
@@ -196,9 +197,15 @@ export default function NewGroupModal() {
                             (selectedUser) =>
                               selectedUser.intraId === searchedMember.intraId,
                           )
-                        )
-                          return;
-                        setSelectedUsers([...selectedUsers, searchedMember]);
+                        ) {
+                          setSelectedUsers(
+                            selectedUsers.filter(
+                              (selectedUser) =>
+                                selectedUser.intraId !== searchedMember.intraId,
+                            ),
+                          );
+                        } else
+                          setSelectedUsers([...selectedUsers, searchedMember]);
                       }}
                       isAddingUser={true}
                     />
@@ -283,7 +290,7 @@ export default function NewGroupModal() {
               >
                 <input
                   ref={inputRef}
-                  className="text-l text-darkblue w-full bg-transparent outline-none placeholder:text-gray-500  dark:text-gray-700"
+                  className="text-l w-full bg-transparent text-darkblue outline-none placeholder:text-gray-500  dark:text-gray-700"
                   placeholder="생성할 그룹의 이름을 입력하세요."
                   onChange={(e) => setSearchValue(e.target.value)}
                 />
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 8750e49..cfc7a48 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -20,6 +20,8 @@ const TooltipContent = React.forwardRef<
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-[#4A6282] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
+      "text-l lg:text-xl",
+      // Above text property is added by me
     )}
     {...props}
   />
diff --git a/src/components/utils/RepoLink.tsx b/src/components/utils/RepoLink.tsx
index aa823af..cd455e3 100644
--- a/src/components/utils/RepoLink.tsx
+++ b/src/components/utils/RepoLink.tsx
@@ -23,9 +23,7 @@ export default function RepoLink() {
             />
           </Link>
         </TooltipTrigger>
-        <TooltipContent>
-          <p className="text-l lg:text-xl">깃허브 레포지토리 방문</p>
-        </TooltipContent>
+        <TooltipContent>깃허브 레포지토리 방문</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/lib/Axios.ts b/src/lib/Axios.ts
index e951023..c211a13 100644
--- a/src/lib/Axios.ts
+++ b/src/lib/Axios.ts
@@ -1,12 +1,12 @@
-import Axios from 'axios';
-import Cookies from 'js-cookie';
-import authApi from '@/api/authApi';
+import Axios, { AxiosAdapter } from "axios";
+import Cookies from "js-cookie";
+import authApi from "@/api/authApi";
 
 export const tokenAxios = Axios.create({
   baseURL: process.env.NEXT_PUBLIC_DEV_API_URL,
   headers: {
-    'Content-Type': 'application/json',
-    Accept: 'application/json',
+    "Content-Type": "application/json",
+    Accept: "application/json",
   },
   withCredentials: true,
 });
@@ -14,23 +14,23 @@ export const tokenAxios = Axios.create({
 export const axios = Axios.create({
   baseURL: process.env.NEXT_PUBLIC_DEV_API_URL,
   headers: {
-    'Content-Type': 'application/json',
-    Accept: 'application/json',
+    "Content-Type": "application/json",
+    Accept: "application/json",
   },
   withCredentials: true,
 });
 
 axios.interceptors.request.use(
   (config) => {
-    const accessToken = Cookies.get('accessToken');
+    const accessToken = Cookies.get("accessToken");
     if (accessToken) {
       config.headers.Authorization = `Bearer ${accessToken}`;
     } else {
-      config.headers.Authorization = 'Bearer NONE';
+      config.headers.Authorization = "Bearer NONE";
     }
     return config;
   },
-  (error) => Promise.reject(error)
+  (error) => Promise.reject(error),
 );
 
 axios.interceptors.response.use(
@@ -44,20 +44,20 @@ axios.interceptors.response.use(
     if (error.response && error.response.status == 401) {
       try {
         const res = await authApi.reissueToken();
-        console.log('Refreshed token successfully!');
+        console.log("Refreshed token successfully!");
         const accessToken = res.accessToken;
         const originalRequest = error.config;
         originalRequest.headers.Authorization = `Bearer ${accessToken}`;
         return await axios(originalRequest);
       } catch (err) {
-        console.error('Failed to refresh token:', err);
-        Cookies.remove('accessToken');
-        Cookies.remove('refreshToken');
-        window.location.href = '/login';
+        console.error("Failed to refresh token:", err);
+        Cookies.remove("accessToken");
+        Cookies.remove("refreshToken");
+        window.location.href = "/login";
       }
     } else if (error.response && error.response.status == 500) {
       return Promise.reject(error);
     }
     return Promise.reject(error);
-  }
+  },
 );
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 5d55dd1..315008a 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 
 export default function NotFoundPage() {
   return (
-    <main className="text-darkblue flex min-h-[100vh] w-full flex-col sm:flex-row">
+    <main className="flex min-h-[100vh] w-full flex-col text-darkblue sm:flex-row">
       <div className="pt-8 sm:relative sm:min-h-[50vh] sm:w-1/2">
         <Image
           src="/image/fill/left.png"
@@ -17,7 +17,7 @@ export default function NotFoundPage() {
       <div className="w-full bg-white sm:w-1/2">
         <div className="flex h-full min-h-[50vh] flex-col items-center justify-center gap-8 sm:gap-12">
           <Image
-            src="/image/fill/logo.svg"
+            src="/image/logo/logo.svg"
             alt="logo"
             width={100}
             height={100}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ad7b5dd..5e4cadb 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import '@/styles/globals.css';
-import type { AppProps } from 'next/app';
-import { Toaster } from '@/components/ui/toaster';
-import Head from 'next/head';
-import { GoogleAnalytics } from '@next/third-parties/google';
+import React from "react";
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Toaster } from "@/components/ui/toaster";
+import Head from "next/head";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -11,10 +11,10 @@ export default function App({ Component, pageProps }: AppProps) {
       <Toaster />
       <Head>
         <title>Where42</title>
-        <link rel='icon' href='/Icons/logo.svg' />
+        <link rel="icon" href="/image/logo/logo.svg" />
       </Head>
       <Component {...pageProps} />
-      <GoogleAnalytics gaId='G-0H3Z5S8GSR' />
+      <GoogleAnalytics gaId="G-0H3Z5S8GSR" />
     </>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5335ed0..8c22d8b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,19 +1,18 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import Header from '@/components/Header';
-import MyProfileCard from '@/components/cards/MyProfileCard';
-import Groups from '@/components/Groups';
-import Footer from '@/components/Footer';
-import authApi from '@/api/authApi';
-import groupApi from '@/api/groupApi';
-import ProfileSkeleton from '@/components/utils/ProfileSkeleton';
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import Header from "@/components/Header";
+import MyProfileCard from "@/components/cards/MyProfileCard";
+import Groups from "@/components/Groups";
+import Footer from "@/components/Footer";
+import authApi from "@/api/authApi";
+import groupApi from "@/api/groupApi";
+import ProfileSkeleton from "@/components/utils/ProfileSkeleton";
 import {
   useUserStore,
   useGroupsStore,
   useAddedMembersStore,
-} from '@/lib/stores';
-import AgreementModal from '@/components/modals/AgreementModal';
-import Cookies from 'js-cookie';
+} from "@/lib/stores";
+import AgreementModal from "@/components/modals/AgreementModal";
 
 export default function Home() {
   const router = useRouter();
@@ -24,7 +23,7 @@ export default function Home() {
   const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
-    if (agreement && agreement === 'false') setShowModal(true);
+    if (agreement && agreement === "false") setShowModal(true);
     if (router.query.intraId || router.query.agreement)
       router.replace(router.pathname, router.pathname, { shallow: true });
   }, [intraId, agreement, router]);
@@ -44,11 +43,11 @@ export default function Home() {
         groupApi.getAllGroups().then((res) => {
           res.map((group) => {
             if (group.groupId === userDefaultGroupId)
-              group.groupName = '친구 목록';
+              group.groupName = "친구 목록";
           });
           setGroups(res);
           const allMemberIds = res.flatMap((group) =>
-            group.members.map((member) => member.intraId)
+            group.members.map((member) => member.intraId),
           );
           allMemberIds.push(userIntraId);
           setAddedMembers(allMemberIds);
@@ -58,7 +57,7 @@ export default function Home() {
 
   return (
     <>
-      <main className='flex flex-col h-full w-full justify-start gap-3 lg:gap-4 px-2 md:px-10 min-h-screen'>
+      <main className="flex h-full min-h-screen w-full flex-col justify-start gap-3 px-2 md:px-10 lg:gap-4">
         <AgreementModal showModal={showModal} setShowModal={setShowModal} />
         <Header />
         {user ? <MyProfileCard user={user} /> : <ProfileSkeleton />}
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 8420754..cd3d5a4 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -4,7 +4,7 @@ import LoginBtn from "@/components/buttons/LoginBtn";
 
 export default function LoginPage() {
   return (
-    <main className="text-darkblue flex min-h-[100vh] w-full flex-col sm:flex-row">
+    <main className="flex min-h-[100vh] w-full flex-col text-darkblue sm:flex-row">
       <div className="pt-8 sm:relative sm:min-h-[50vh] sm:w-1/2">
         <Image
           src="/image/fill/left.png"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2d1724f..58d1ef9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -50,7 +50,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
-    --darkblue: 215 56%, 17%;
+    --darkblue: 215 56% 17%;
 
     --radius: 0.5rem;
   }