diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index fbe40e6d..aafa240e 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -10,7 +10,7 @@ import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal
 
 export default function NavigationBar() {
   return (
-    <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
+    <div className="absolute flex justify-between items-center p-2.5 border-b-[1px] w-full z-2">
       <Link href={'/'}>
         <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       </Link>
diff --git a/app/(sub-page)/components/navigation-items.tsx b/app/(sub-page)/components/navigation-items.tsx
index 0f741295..22a212ea 100644
--- a/app/(sub-page)/components/navigation-items.tsx
+++ b/app/(sub-page)/components/navigation-items.tsx
@@ -40,7 +40,7 @@ export function NavigationItem({ href, label, target }: NavigationItemProps) {
     <Link href={href} target={target} className="flex items-center justify-between">
       <Button
         size={'xs'}
-        className="text-black lg:text-white hover:text-slate-400 lg:text-base text-lg my-1"
+        className="text-black lg:text-white hover:text-slate-400 py-5 lg:text-base text-lg "
         variant={'text'}
         label={label}
       />
diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index 8a0d8b9b..cf8417d7 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -23,7 +23,7 @@ export default function SideNavigationBar({ header, content, footer }: SideNavig
 
   return (
     <Sheet open={isOpen} onOpenChange={handleSideNavOpen}>
-      <SheetTrigger className="h-6">
+      <SheetTrigger aria-label="menu-button" className="h-6">
         <HamburgerMenuIcon className="w-6 h-6 text-white" />
       </SheetTrigger>
       <SheetContent className="z-3">
diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
index 03ec2911..2d7eb794 100644
--- a/app/(sub-page)/layout.tsx
+++ b/app/(sub-page)/layout.tsx
@@ -10,7 +10,9 @@ function SubPageLayout({ children }: LayoutProps) {
   return (
     <>
       <NavigationBar />
-      <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
+      <div className="relative bg-primary h-[18rem]">
+        <Image src={background} sizes="100vw" className="absolute bottom-0 bg-white" alt="background" />
+      </div>
       <div className="flex justify-center">{children}</div>
     </>
   );
diff --git a/app/(sub-page)/result/components/result-category-detail-container.tsx b/app/(sub-page)/result/components/result-category-detail-container.tsx
new file mode 100644
index 00000000..c50ed6e3
--- /dev/null
+++ b/app/(sub-page)/result/components/result-category-detail-container.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import useDialog from '@/app/hooks/useDialog';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
+import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import dynamic from 'next/dynamic';
+import { useEffect } from 'react';
+
+const ResultCategoryDetail = dynamic(() => import('@/app/ui/result/result-category-detail/result-category-detail'));
+
+export default function ResultCategoryDetailContainer({ category }: { category: ResultCategoryKey }) {
+  const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
+
+  useEffect(() => {
+    if (category && !isOpen) open();
+  }, []);
+
+  return isOpen && category ? <ResultCategoryDetail category={category} /> : null;
+}
diff --git a/app/(sub-page)/result/page.tsx b/app/(sub-page)/result/page.tsx
index e931fd26..87a1d84d 100644
--- a/app/(sub-page)/result/page.tsx
+++ b/app/(sub-page)/result/page.tsx
@@ -1,12 +1,17 @@
 import UserInfoCard from '@/app/ui/user/user-info-card/user-info-card';
-import ResultCategoryDetail from '@/app/ui/result/result-category-detail/result-category-detail';
 import { Suspense } from 'react';
 import UserInfoCardSkeleton from '@/app/ui/user/user-info-card/user-info-card.skeleton';
-import ResultCategory from '@/app/ui/result/result-category/result-category';
 import ResultCategorySkeleton from '@/app/ui/result/result-category/result-category.skeleton';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
 import type { Metadata } from 'next';
+import ResultCategoryDetailContainer from '@/app/(sub-page)/result/components/result-category-detail-container';
+import dynamic from 'next/dynamic';
+
+const ResultCategory = dynamic(() => import('@/app/ui/result/result-category/result-category'), {
+  ssr: false,
+  loading: () => <ResultCategorySkeleton />,
+});
 
 export const metadata: Metadata = {
   title: '졸업 요건 검사 결과',
@@ -39,10 +44,8 @@ function ResultPage({ searchParams }: ResultPageProp) {
           <UserInfoCard />
         </Suspense>
       </ContentContainer>
-      <Suspense fallback={<ResultCategorySkeleton />}>
-        <ResultCategory />
-      </Suspense>
-      <ResultCategoryDetail category={category} />
+      <ResultCategory />
+      <ResultCategoryDetailContainer category={category} />
     </div>
   );
 }
diff --git a/app/(sub-page)/sign-in/page.tsx b/app/(sub-page)/sign-in/page.tsx
index 42205546..7c321181 100644
--- a/app/(sub-page)/sign-in/page.tsx
+++ b/app/(sub-page)/sign-in/page.tsx
@@ -18,11 +18,11 @@ export const metadata: Metadata = {
 export default function SignInPage() {
   return (
     <ContentContainer className="md:w-[768px] h-[550px] xl:w-[960px] flex p-9">
-      <Responsive minWidth={767}>
-        <div className="w-2/4">
-          <Image className="object-cover h-full" src={MaruImage} alt="마루" />
-        </div>
-      </Responsive>
+      <div className="hidden md:w-2/4 md:block relative ">
+        <Responsive minWidth={767}>
+          <Image fill={true} className="object-cover" src={MaruImage} alt="마루" />
+        </Responsive>
+      </div>
       <div className="w-full md:w-2/4 md:pl-7 ">
         <div className="pb-12">
           <TitleBox title={'로그인'} />
diff --git a/app/business/services/user/user.query.ts b/app/business/services/user/user.query.ts
index feab0b4e..826f8ba8 100644
--- a/app/business/services/user/user.query.ts
+++ b/app/business/services/user/user.query.ts
@@ -12,6 +12,7 @@ import {
 } from './user.validation';
 import { FormState } from '@/app/ui/view/molecule/form/form-root';
 import { instance } from '@/app/utils/api/instance';
+import { CreditResponse } from '@/app/store/querys/result';
 
 export async function auth(): Promise<InitUserInfoResponse | UserInfoResponse | undefined> {
   try {
@@ -39,6 +40,16 @@ export async function fetchUser(): Promise<InitUserInfoResponse | UserInfoRespon
   }
 }
 
+export async function fetchCredits(): Promise<CreditResponse[]> {
+  try {
+    const { data } = await instance.get<CreditResponse[]>(`${API_PATH.graduations}/credits`);
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+}
+
 export async function findUserToStudentNumber(prevState: FormState, formData: FormData): Promise<FormState> {
   const validatedFields = FindIdFormSchema.safeParse({
     studentNumber: formData.get('studentNumber'),
diff --git a/app/globals.css b/app/globals.css
index d56e84e2..dbd8b5c2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,7 +24,7 @@
 
 *,
 a {
-  font-family: 'Pretendard';
+  font-family: 'Pretendard Variable';
 }
 
 ::-webkit-scrollbar {
@@ -40,14 +40,3 @@ a {
   background: #c4c4c4;
   border-radius: 5px;
 }
-
-@font-face {
-  font-family: 'VitroCore';
-  src:
-    local('vitro'),
-    url('../public/assets/font/vitro.woff2') format('woff2'),
-    url('../public/assets/font/vitro.woff') format('woff'),
-    url('../public/assets/font/vitro.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 51cd2909..7143376a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   description:
     '명지대학교 졸업사정결과 조회서비스 "졸업을 부탁해"는 미이수 / 이수 과목정보 및 잔여학점 조회, 졸업사정예측 서비스를 원클릭으로 제공합니다.',
   icons: {
-    icon: 'https://github.com/Myongji-Graduate/MyongjiGraduate-BE/assets/75975946/2a7354ae-dffe-4250-8b83-a211a07ff5d2',
+    icon: '/assets/favicon.png',
   },
   openGraph: {
     siteName: '졸업을 부탁해',
@@ -38,7 +38,8 @@ export default function RootLayout({
     <html lang="ko">
       <head>
         <link
-          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+          as="style"
           rel="stylesheet"
         />
       </head>
diff --git a/app/mocks/handlers/taken-lecture-handler.mock.ts b/app/mocks/handlers/taken-lecture-handler.mock.ts
index 9e1aa373..e62b7fa2 100644
--- a/app/mocks/handlers/taken-lecture-handler.mock.ts
+++ b/app/mocks/handlers/taken-lecture-handler.mock.ts
@@ -14,9 +14,9 @@ export const takenLectureHandlers = [
     await delay(100);
     return HttpResponse.json(takenLectures);
   }),
-  http.post<never, { lectureCode: string }>(API_PATH.takenLectures, async ({ request }) => {
+  http.post<never, { lectureId: string }>(API_PATH.takenLectures, async ({ request }) => {
     const body = await request.json();
-    const isAdded = mockDatabase.addTakenLecture(body.lectureCode);
+    const isAdded = mockDatabase.addTakenLecture(body.lectureId);
     await delay(1000);
     if (isAdded) return HttpResponse.json({ message: '과목 추가에 성공했습니다' }, { status: 200 });
     return HttpResponse.json({ errorCode: 400, message: '추가에 실패했습니다' }, { status: 400 });
diff --git a/app/page.tsx b/app/page.tsx
index 3ba68c08..dff73b55 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,13 +6,30 @@ import Responsive from './ui/responsive';
 import NavigationBar from './(sub-page)/components/navigation-bar';
 import Button from './ui/view/atom/button/button';
 import Link from 'next/link';
+import localFont from 'next/font/local';
+
+const vitroFont = localFont({
+  src: '../public/assets/font/vitro.woff2',
+  variable: '--font-vitro',
+  weight: '700',
+  display: 'swap',
+});
 
 export default function HomePage() {
   return (
-    <div className="bg-primary w-[100vw] h-[100vh] overflow-hidden relative">
+    <div className={`bg-primary w-screen h-screen overflow-hidden relative ${vitroFont.variable}`}>
       <NavigationBar />
       <Responsive minWidth={768}>
-        <Image src={mainBookBackground} alt="main-book-background" className="fixed right-0 w-[60%] z-0" />
+        <div className="fixed h-screen right-0 w-7/12">
+          <Image
+            src={mainBookBackground}
+            alt="main-book-background"
+            fill={true}
+            className="absolute object-contain z-0"
+            quality={50}
+            priority={true}
+          />
+        </div>
       </Responsive>
       <Image
         src={mainMyongjiLogo}
@@ -22,14 +39,17 @@ export default function HomePage() {
         className="absolute top-24 right-4"
       />
       <div className="relative h-full flex flex-col items-center justify-center gap-6 z-1">
-        <p className="text-center flex flex-col gap-4">
+        <div className="text-center flex flex-col gap-4">
           <div className="relative">
-            <div className="z-2 text-3xl font-bold sm:text-7xl relative text-white" style={{ fontFamily: 'VitroCore' }}>
-              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+            <div
+              className="z-2 text-3xl font-bold sm:text-7xl relative text-white"
+              style={{ fontFamily: 'var(--font-vitro)' }}
+            >
+              <span className="text-etc-yellow" style={{ fontFamily: 'var(--font-vitro)' }}>
                 졸
               </span>
               업을&nbsp;
-              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+              <span className="text-etc-yellow" style={{ fontFamily: 'var(--font-vitro)' }}>
                 부
               </span>
               탁해
@@ -37,11 +57,13 @@ export default function HomePage() {
             <Image
               src={graduationCap}
               alt="graduation-cap"
-              className="absolute bottom-2 left-8 sm:bottom-10 sm:left-[-24px] sm:w-[52px] sm:h-[52px] w-[36px] h-[36px]"
+              className="absolute object-contain bottom-2 left-8 sm:bottom-10 sm:left-[-24px] sm:w-[52px] w-[36px]"
+              sizes="(min-width: 640px) 52px, 36px"
+              quality={100}
             />
           </div>
           <div className="text-md sm:text-lg text-gray-400 font-medium">명지인을 위한 간편 졸업요건 검사 사이트</div>
-        </p>
+        </div>
         <div className="flex flex-col gap-2 md:gap-4">
           <Link href="/result">
             <Button label="검사 시작" variant="dark" size="xl" />
diff --git a/app/store/querys/lecture.ts b/app/store/querys/lecture.ts
index 7bc19551..a3bb5172 100644
--- a/app/store/querys/lecture.ts
+++ b/app/store/querys/lecture.ts
@@ -2,10 +2,10 @@ import { QUERY_KEY } from '@/app/utils/query/react-query-key';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '../stores/search-word';
-import axios from 'axios';
 import { API_PATH } from '@/app/business/api-path';
 import { getToken } from '@/app/business/services/auth';
 import { LectureInfoResponse } from './result';
+import fetchAX from 'fetch-ax';
 
 export type SearchedLectureInfoResponse = LectureInfoResponse & { taken: boolean; revoked: boolean };
 
@@ -22,10 +22,13 @@ export const useFetchSearchLecture = () => {
 
 export const fetchSearchLectures = async (type: string, keyword: string) => {
   const token = await getToken();
-  const response = await axios<SearchedLectureInfoResponse[]>(`${API_PATH.lectures}?type=${type}&&keyword=${keyword}`, {
-    headers: {
-      Authorization: `Bearer ${token}`,
+  const response = await fetchAX.get<SearchedLectureInfoResponse[]>(
+    `${API_PATH.lectures}?type=${type}&&keyword=${keyword}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
     },
-  });
+  );
   return response.data;
 };
diff --git a/app/store/querys/result.ts b/app/store/querys/result.ts
index 1aa7d8ce..b346dfcc 100644
--- a/app/store/querys/result.ts
+++ b/app/store/querys/result.ts
@@ -3,7 +3,7 @@ import { getToken } from '@/app/business/services/auth';
 import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import fetchAX from 'fetch-ax';
 
 export interface LectureInfoResponse {
   [index: string]: string | number | boolean;
@@ -45,7 +45,7 @@ export const useFetchCredits = () => {
 
 const fetchCredits = async () => {
   try {
-    const { data } = await axios<CreditResponse[]>(`${API_PATH.graduations}/credits`, {
+    const { data } = await fetchAX.get<CreditResponse[]>(`${API_PATH.graduations}/credits`, {
       headers: {
         Authorization: `Bearer ${await getToken()}`,
       },
@@ -66,7 +66,7 @@ export const useFetchResultCategoryDetailInfo = (category: string) => {
 
 const fetchResultCategoryDetailInfo = async (category: string) => {
   try {
-    const { data } = await axios<ResultCategoryDetailResponse>(
+    const { data } = await fetchAX.get<ResultCategoryDetailResponse>(
       `${API_PATH.graduations}/detail?graduationCategory=${category}`,
       {
         headers: {
diff --git a/app/ui/responsive.tsx b/app/ui/responsive.tsx
index 255261b7..47ada39f 100644
--- a/app/ui/responsive.tsx
+++ b/app/ui/responsive.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 
 interface ResponsiveProps {
@@ -8,11 +8,17 @@ interface ResponsiveProps {
 }
 
 export default function Responsive({ minWidth, maxWidth, children }: React.PropsWithChildren<ResponsiveProps>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   let breakPoint = '(min-width: 0px)';
   if (minWidth && maxWidth) breakPoint = `(min-width:${minWidth}px) and (max-width:${maxWidth}px)`;
   else if (minWidth) breakPoint = `(min-width:${minWidth}px)`;
   else if (maxWidth) breakPoint = `(max-width:${maxWidth}px)`;
 
   const isBreakPoint = useMediaQuery(breakPoint);
-  return <>{isBreakPoint ? children : null}</>;
+  return <>{isClient && (isBreakPoint ? children : null)}</>;
 }
diff --git a/app/ui/result/result-category-detail/result-category-detail-dialog.tsx b/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
index 234cd2b2..c2795282 100644
--- a/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
+++ b/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
@@ -3,25 +3,18 @@ import Modal from '../../view/molecule/modal/modal';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import Drawer from '../../view/molecule/drawer/drawer';
 import Responsive from '@/app/ui/responsive';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useAtomValue } from 'jotai';
 import { isDialogOpenAtom } from '@/app/store/stores/dialog';
-import useDialog from '@/app/hooks/useDialog';
 
 interface ResultCategoryDetailDialogProp {
   children: React.ReactNode;
   querystring?: string;
 }
 
-export default function ResultCategoryDetailDialog({ children, querystring }: ResultCategoryDetailDialogProp) {
+export default function ResultCategoryDetailDialog({ children }: ResultCategoryDetailDialogProp) {
   const isOpenDialog = useAtomValue(isDialogOpenAtom);
 
-  const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
-
-  useEffect(() => {
-    if (querystring && !isOpen) open();
-  }, []);
-
   const handleCloseDialog = () => {
     if (isOpenDialog) window.history.go(-1);
     window.history.replaceState({}, '', '/result');
diff --git a/app/ui/result/result-category-detail/result-category-detail.tsx b/app/ui/result/result-category-detail/result-category-detail.tsx
index 25a83243..20098935 100644
--- a/app/ui/result/result-category-detail/result-category-detail.tsx
+++ b/app/ui/result/result-category-detail/result-category-detail.tsx
@@ -10,7 +10,7 @@ export default function ResultCategoryDetail({ category }: { category: ResultCat
   if (!category) return;
 
   return (
-    <ResultCategoryDetailDialog querystring={category}>
+    <ResultCategoryDetailDialog>
       <Suspense fallback={<ResultCategoryDetailContentSkeleton />}>
         <ResultCategoryDetailInfo category={category} />
       </Suspense>
diff --git a/app/ui/user/user-info-card/user-info-card.tsx b/app/ui/user/user-info-card/user-info-card.tsx
index fba18165..3cc74c37 100644
--- a/app/ui/user/user-info-card/user-info-card.tsx
+++ b/app/ui/user/user-info-card/user-info-card.tsx
@@ -1,7 +1,7 @@
 import { InitUserInfoResponse, UserInfoResponse } from '@/app/business/services/user/user.type';
 import InitUserAnnounce from './init-user-announce';
-import UserInfoContent from './user-info-content/user-info-content';
 import { fetchUser } from '@/app/business/services/user/user.query';
+import UserInfoContent from './user-info-content/user-info-content';
 
 async function UserInfoCard() {
   const data = await fetchUser();
diff --git a/app/ui/user/user-info-card/user-info-content/user-info-content-viewer.tsx b/app/ui/user/user-info-card/user-info-content/user-info-content-viewer.tsx
index 16c167e4..eea75312 100644
--- a/app/ui/user/user-info-card/user-info-content/user-info-content-viewer.tsx
+++ b/app/ui/user/user-info-card/user-info-content/user-info-content-viewer.tsx
@@ -1,10 +1,13 @@
 import { UserInfoResponse } from '@/app/business/services/user/user.type';
 import React from 'react';
-import PieChart from '../../../view/molecule/pie-chart/pie-chart';
+// import PieChart from '../../../view/molecule/pie-chart/pie-chart';
 import { getPercentage } from '@/app/utils/calculate.util';
 import UserInfoMessage from './user-info-message';
 import { CreditResponse } from '@/app/store/querys/result';
 import UserInfoList from './user-info-list';
+import dynamic from 'next/dynamic';
+
+const PieChart = dynamic(() => import('../../../view/molecule/pie-chart/pie-chart'), { ssr: false });
 
 interface UserInfoContentViewerProps {
   data: UserInfoResponse;
@@ -35,7 +38,7 @@ function UserInfoContentViewer({ data, categories }: UserInfoContentViewerProps)
           <PieChart percentage={percentage} />
         </div>
       </div>
-      <p className="text-gray-6 md:text-xs text-[10px]">
+      <p className="text-gray-7 md:text-xs text-[10px]">
         * 서비스의 결과는 공식적인 효력을 갖지 않습니다. 정확한 졸업사정결과는 소속 단과대 교학팀에서의 확인을
         권장합니다.
       </p>
diff --git a/app/ui/user/user-info-card/user-info-content/user-info-content.tsx b/app/ui/user/user-info-card/user-info-content/user-info-content.tsx
index fcb6e9a0..ed368d94 100644
--- a/app/ui/user/user-info-card/user-info-content/user-info-content.tsx
+++ b/app/ui/user/user-info-card/user-info-content/user-info-content.tsx
@@ -1,14 +1,13 @@
-'use client';
 import { UserInfoResponse } from '@/app/business/services/user/user.type';
-import { useFetchCredits } from '@/app/store/querys/result';
 import UserInfoContentViewer from './user-info-content-viewer';
+import { fetchCredits } from '@/app/business/services/user/user.query';
 
 interface UserInfoContentProp {
   data: UserInfoResponse;
 }
 
-function UserInfoContent({ data }: UserInfoContentProp) {
-  const { data: categories } = useFetchCredits();
+async function UserInfoContent({ data }: UserInfoContentProp) {
+  const categories = await fetchCredits();
   return <UserInfoContentViewer data={data} categories={categories} />;
 }
 
diff --git a/app/ui/user/user-info-card/user-info-content/user-info-list.tsx b/app/ui/user/user-info-card/user-info-content/user-info-list.tsx
index e0b17cea..3f16ef2f 100644
--- a/app/ui/user/user-info-card/user-info-content/user-info-list.tsx
+++ b/app/ui/user/user-info-card/user-info-content/user-info-list.tsx
@@ -18,7 +18,7 @@ function UserInfoList({ data }: UserInfoListProps) {
 
   return (
     <div className="flex font-medium text-xs md:text-lg gap-4 md:gap-14 ">
-      <ul className="text-gray-6 flex flex-col gap-1">
+      <ul className="text-gray-7 flex flex-col gap-1">
         <li>이름</li>
         <li>학번</li>
         {displaySeveralMajor('title')}
diff --git a/app/ui/view/molecule/form/form-submit-button.tsx b/app/ui/view/molecule/form/form-submit-button.tsx
index 88d049c2..31a71ba7 100644
--- a/app/ui/view/molecule/form/form-submit-button.tsx
+++ b/app/ui/view/molecule/form/form-submit-button.tsx
@@ -32,7 +32,7 @@ export function FormSubmitButton({
       <Button
         loading={pending}
         aria-label="submit-button"
-        form={formId}
+        // form={formId}
         size={size}
         variant={variant}
         type="submit"
diff --git a/next.config.mjs b/next.config.mjs
index 3e37515e..a3965a6e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
+import withBundleAnalyzer from '@next/bundle-analyzer';
+
 const nextConfig = {
   experimental: {
     serverActions: {
@@ -13,4 +15,7 @@ const nextConfig = {
   // },
 };
 
-export default nextConfig;
+export default withBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+  // openAnalyzer: true // default!
+})(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index 9d64e0eb..089f4332 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@headlessui/tailwindcss": "^0.2.0",
         "@heroicons/react": "^2.1.1",
         "@mswjs/http-middleware": "^0.9.2",
+        "@next/bundle-analyzer": "^15.1.0",
         "@next/third-parties": "^14.2.13",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-avatar": "^1.0.4",
@@ -23,7 +24,6 @@
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-toast": "^1.1.5",
         "@tanstack/react-query": "^5.32.0",
-        "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "express": "^4.18.2",
@@ -2543,6 +2543,14 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
@@ -3620,6 +3628,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/@next/bundle-analyzer": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-15.1.0.tgz",
+      "integrity": "sha512-uEyuNZZgAbSWgiUbtihTA8y6QgEzc4b8Fpslmc4SXAjj67Ax5mlcv1HLlez+5dIGwO+vJ9PgCoI8ngWtBh/g1Q==",
+      "dependencies": {
+        "webpack-bundle-analyzer": "4.10.1"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.13",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
@@ -3926,6 +3942,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.28",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -7610,7 +7631,6 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7650,7 +7670,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
       "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
-      "devOptional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -8204,7 +8223,8 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -8321,9 +8341,10 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -9771,6 +9792,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -10603,6 +10625,11 @@
       "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
       "dev": true
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -10830,6 +10857,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -11191,6 +11219,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -11597,7 +11630,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -12713,6 +12745,7 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -12816,6 +12849,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -13363,6 +13397,20 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/handlebars": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
@@ -13616,8 +13664,7 @@
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
     },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
@@ -14361,7 +14408,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
       "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16889,6 +16935,14 @@
         "ufo": "^1.5.3"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -17974,6 +18028,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -18948,7 +19010,8 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
     },
     "node_modules/psl": {
       "version": "1.9.0",
@@ -20304,6 +20367,19 @@
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
       "dev": true
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -21583,6 +21659,14 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -22665,6 +22749,60 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz",
diff --git a/package.json b/package.json
index fd68a569..94156902 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "lint-staged": "lint-staged",
     "storybook": "storybook dev -p 6006",
     "type": "tsc --noEmit",
-    "cypress:open": "cypress open"
+    "cypress:open": "cypress open",
+    "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
@@ -28,6 +29,7 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.1.1",
     "@mswjs/http-middleware": "^0.9.2",
+    "@next/bundle-analyzer": "^15.1.0",
     "@next/third-parties": "^14.2.13",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -38,7 +40,6 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^5.32.0",
-    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "express": "^4.18.2",
diff --git a/public/assets/favicon.png b/public/assets/favicon.png
new file mode 100644
index 00000000..528c2922
Binary files /dev/null and b/public/assets/favicon.png differ
diff --git a/public/assets/font/vitro.ttf b/public/assets/font/vitro.ttf
deleted file mode 100644
index df869436..00000000
Binary files a/public/assets/font/vitro.ttf and /dev/null differ
diff --git a/public/assets/font/vitro.woff b/public/assets/font/vitro.woff
deleted file mode 100644
index 102cf267..00000000
Binary files a/public/assets/font/vitro.woff and /dev/null differ
diff --git a/public/assets/font/vitro.woff2 b/public/assets/font/vitro.woff2
index ce55e002..bded7a49 100644
Binary files a/public/assets/font/vitro.woff2 and b/public/assets/font/vitro.woff2 differ
diff --git a/public/assets/main-book-background.png b/public/assets/main-book-background.png
index 75a0ebac..c7a52c0b 100644
Binary files a/public/assets/main-book-background.png and b/public/assets/main-book-background.png differ