diff --git a/package-lock.json b/package-lock.json
index b326f467..b52b8b47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
       },
       "devDependencies": {
         "@tanstack/eslint-plugin-query": "^5.50.0",
+        "@types/lodash": "^4.17.7",
         "@types/node": "^20.14.10",
         "@types/qs": "^6.9.15",
         "@types/react": "^18.3.3",
@@ -1936,6 +1937,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.14.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
@@ -2915,6 +2922,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts
index 5f83fcca..53b48b40 100644
--- a/src/apis/getRecentComments.ts
+++ b/src/apis/getRecentComments.ts
@@ -1,9 +1,10 @@
 import type { GetRecentCommentsResponseType } from '@/schema/recentcomment';
 import httpClient from './index';
 
-const getRecentComments = async (limit: number): Promise<GetRecentCommentsResponseType> => {
+const getRecentComments = async (cursor: number, limit: number): Promise<GetRecentCommentsResponseType> => {
   const response = await httpClient.get('/comments', {
     params: {
+      cursor,
       limit,
     },
   });
diff --git a/src/apis/getRecentEpigrams.ts b/src/apis/getRecentEpigrams.ts
index a2fb9f52..04db411a 100644
--- a/src/apis/getRecentEpigrams.ts
+++ b/src/apis/getRecentEpigrams.ts
@@ -1,9 +1,10 @@
 import type { GetRecentEpigramsResponseType } from '@/schema/recentEpigram';
 import httpClient from './index';
 
-const getRecentEpigrams = async (limit: number): Promise<GetRecentEpigramsResponseType> => {
+const getRecentEpigrams = async (cursor: number | null, limit: number): Promise<GetRecentEpigramsResponseType> => {
   const response = await httpClient.get('/epigrams', {
     params: {
+      cursor,
       limit,
     },
   });
diff --git a/src/apis/postGoogleOauth.ts b/src/apis/postGoogleOauth.ts
new file mode 100644
index 00000000..66e9e737
--- /dev/null
+++ b/src/apis/postGoogleOauth.ts
@@ -0,0 +1,11 @@
+import httpClient from '.';
+
+const postGoogleOauth = async (code: string) => {
+  const response = await httpClient.post('/auth/signIn/GOOGLE', {
+    redirectUri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postGoogleOauth;
diff --git a/src/apis/postNaverOauth.ts b/src/apis/postNaverOauth.ts
new file mode 100644
index 00000000..56434bb0
--- /dev/null
+++ b/src/apis/postNaverOauth.ts
@@ -0,0 +1,12 @@
+import httpClient from '.';
+
+const postNaverOauth = async (code: string, state: string) => {
+  const response = await httpClient.post('/auth/signIn/NAVER', {
+    state,
+    redirectUri: process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postNaverOauth;
diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx
index 45368d72..9dbdea2e 100644
--- a/src/components/Card/CommentCard.tsx
+++ b/src/components/Card/CommentCard.tsx
@@ -13,7 +13,7 @@ function CommentCard({ writer, content, createdAt, status }: CommentCardProps) {
       <div className='justify-start items-start gap-4 inline-flex'>
         <div className='w-12 h-12 relative'>
           <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center'>
-            <Image src='/ProfileTestImage.jpg' alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />
+            <Image src={writer.image || '/ProfileTestImage.jpg'} alt={`${writer.nickname}의 프로필 이미지`} layout='fill' objectFit='cover' className='rounded-full' />{' '}
           </div>
         </div>
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx
index 4375c3ca..57bae69a 100644
--- a/src/components/Emotion/EmotionSelector.tsx
+++ b/src/components/Emotion/EmotionSelector.tsx
@@ -10,7 +10,12 @@ import EmotionSaveToast from './EmotionSaveToast';
  * EmotionSelector 컴포넌트는 여러 개의 EmotionIconCard를 관리하고
  * 사용자의 오늘의 감정을 선택하고 저장하고 출력합니다.
  */
-function EmotionSelector() {
+
+interface EmotionSelectorProps {
+  onEmotionSaved: () => void; // Callback for when the emotion is saved
+}
+
+function EmotionSelector({ onEmotionSaved }: EmotionSelectorProps) {
   // 반응형 디자인을 위한 미디어 쿼리 훅
   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
   const isMobile = useMediaQuery('(max-width: 767px)');
@@ -26,6 +31,8 @@ function EmotionSelector() {
 
   // 현재 선택된 감정을 관리하는 useState 훅
   const [selectedEmotion, setSelectedEmotion] = useState<EmotionType | null>(null);
+  const [showToast, setShowToast] = useState<boolean>(false); // State for controlling the toast
+
   // 오늘의 감정을 조회하기 위한 훅
   const { data: emotion, error: getError, isLoading: isGetLoading } = useGetEmotion();
   // 감정을 저장하기 위한 훅
@@ -49,7 +56,9 @@ function EmotionSelector() {
    * 감정을 서버에 저장합니다.
    * @param iconType - 클릭된 감정의 타입
    */
+
   const handleCardClick = async (iconType: EmotionType) => {
+    let emotionChanged = false;
     setStates((prevStates) => {
       const newStates = { ...prevStates };
 
@@ -63,6 +72,7 @@ function EmotionSelector() {
         Object.keys(newStates).forEach((key) => {
           newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
         });
+        emotionChanged = true;
       }
 
       return newStates;
@@ -71,7 +81,14 @@ function EmotionSelector() {
     // 오늘의 감정 저장
     postEmotionMutation.mutate(iconType, {
       onSuccess: (_, clickedIconType) => {
-        setSelectedEmotion(clickedIconType);
+        if (emotionChanged) {
+          setSelectedEmotion(clickedIconType);
+          setShowToast(true);
+          setTimeout(() => {
+            setShowToast(false);
+            onEmotionSaved();
+          }, 1000);
+        }
       },
       onError: (error: unknown) => {
         // eslint-disable-next-line
@@ -103,7 +120,7 @@ function EmotionSelector() {
         ))}
       </div>
       {/* 감정이 선택되었을 때 토스트 메시지 표시 */}
-      {selectedEmotion && <EmotionSaveToast iconType={selectedEmotion} />}
+      {showToast && selectedEmotion && <EmotionSaveToast iconType={selectedEmotion} />}
     </>
   );
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d342347f..14df0b93 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -18,9 +18,10 @@ import SHARE_ICON from '../../../public/icon/share-icon.svg';
 // NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
 // NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
 
+// TODO 새로 바뀐 피그마 시안으로 바꿀지 추후 결정
+
 export interface HeaderProps {
   icon: 'back' | 'search' | '';
-  routerPage: string;
   isLogo: boolean;
   insteadOfLogo: string;
   isProfileIcon: boolean;
@@ -31,10 +32,15 @@ export interface HeaderProps {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, disabled, onClick }: HeaderProps) {
   const router = useRouter();
   const { toast } = useToast();
 
+  // 뒤로가기
+  const handleBack = () => {
+    router.back();
+  };
+
   // 페이지 이동 함수
   const handleNavigateTo = (path: string) => {
     router.push(path);
@@ -65,7 +71,7 @@ function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareI
       <div className='container flex justify-between items-center'>
         <div className='flex items-center space-x-4'>
           {icon === 'back' && (
-            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo(routerPage)} aria-label='뒤로가기 버튼'>
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleBack} aria-label='뒤로가기 버튼'>
               <Image src={ARROW_LEFT_ICON} alt='뒤로가기 버튼 이미지' />
             </button>
           )}
diff --git a/src/components/epigram/EditEpigram.tsx b/src/components/epigram/EditEpigram.tsx
index 1b7e5f1a..35cbe728 100644
--- a/src/components/epigram/EditEpigram.tsx
+++ b/src/components/epigram/EditEpigram.tsx
@@ -121,18 +121,7 @@ function EditEpigram({ epigram }: EditEpigramProps) {
 
   return (
     <>
-      <Header
-        icon='back'
-        routerPage={`/epigrams/${epigram.id}`}
-        isLogo
-        insteadOfLogo='에피그램 수정'
-        isProfileIcon
-        isShareIcon={false}
-        isButton={false}
-        textInButton=''
-        disabled={false}
-        onClick={() => {}}
-      />
+      <Header icon='back' isLogo insteadOfLogo='에피그램 수정' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>
diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx
index eefdad42..868b710b 100644
--- a/src/components/main/RecentComment.tsx
+++ b/src/components/main/RecentComment.tsx
@@ -1,25 +1,38 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import useGetRecentComments from '@/hooks/useGetRecentComments';
 import CommentCard from '@/components/Card/CommentCard';
 import type { CommentType } from '@/schema/recentcomment';
+import Image from 'next/image';
 import LoadMoreButton from './LoadMoreButton';
+import spinner from '../../../public/spinner.svg';
 
 function RecentComments() {
   const [comments, setComments] = useState<CommentType[]>([]);
-  const [limit, setLimit] = useState(3);
-  const { data, error, isLoading } = useGetRecentComments(limit);
+  const [cursor, setCursor] = useState<number>(0);
+  const [limit, setLimit] = useState<number>(3);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(true);
 
-  React.useEffect(() => {
-    if (data?.list) {
-      setComments(data.list);
+  const { data, error, isLoading } = useGetRecentComments({ cursor, limit, enabled: shouldFetch });
+
+  useEffect(() => {
+    if (data) {
+      setComments((prevComments) => [...prevComments, ...data.list]);
+      if (data.list.length > 0) {
+        setCursor(data.list[data.list.length - 1].id);
+      }
+      setIsLoadingMore(false);
+      setShouldFetch(false);
     }
   }, [data]);
 
-  const handleLoadMore = () => {
-    setLimit((prevLimit) => prevLimit + 4);
+  const loadMore = () => {
+    setIsLoadingMore(true);
+    setLimit(4);
+    setShouldFetch(true);
   };
 
-  if (isLoading) return <p>로딩 중...</p>;
+  if (isLoading && comments.length === 0) return <p>로딩 중...</p>;
   if (error) return <p>{error.message}</p>;
 
   return (
@@ -29,9 +42,14 @@ function RecentComments() {
         {comments.map((comment) => (
           <CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />
         ))}
-        {data?.totalCount && comments.length < data.totalCount && (
-          <div className='mt-10 flex justify-center w-full'>
-            <LoadMoreButton onClick={handleLoadMore} />
+        {isLoadingMore && (
+          <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
+            <Image src={spinner} alt='로딩중' width={50} height={50} />
+          </div>
+        )}
+        {!isLoadingMore && data?.nextCursor !== null && (
+          <div className='mt-10 w-full flex justify-center'>
+            <LoadMoreButton onClick={loadMore} />
           </div>
         )}
       </div>
diff --git a/src/components/main/RecentEpigram.tsx b/src/components/main/RecentEpigram.tsx
index 4fb4d1eb..64a167bd 100644
--- a/src/components/main/RecentEpigram.tsx
+++ b/src/components/main/RecentEpigram.tsx
@@ -1,31 +1,51 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import useGetRecentEpigrams from '@/hooks/useGetRecentEpigrams';
 import EpigramCard from '@/components/Card/EpigramCard';
 import { RecentEpigramType } from '@/schema/recentEpigram';
+import Image from 'next/image';
 import LoadMoreButton from './LoadMoreButton';
+import spinner from '../../../public/spinner.svg';
 
 function RecentEpigrams() {
   const router = useRouter();
-  const [limit, setLimit] = useState(3);
-  const { data, error, isLoading } = useGetRecentEpigrams(limit);
+  const [epigrams, setEpigrams] = useState<RecentEpigramType[]>([]);
+  const [cursor, setCursor] = useState<number>(0);
+  const [limit, setLimit] = useState<number>(3);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(true);
+
+  const { data, error, isLoading } = useGetRecentEpigrams({ cursor, limit, enabled: shouldFetch });
+
+  useEffect(() => {
+    if (data) {
+      setEpigrams((prevEpigrams) => [...prevEpigrams, ...data.list]);
+      if (data.list.length > 0) {
+        setCursor(data.list[data.list.length - 1].id);
+      }
+      setIsLoadingMore(false);
+      setShouldFetch(false);
+    }
+  }, [data]);
 
   const handleEpigramClick = (id: number) => {
     router.push(`/epigrams/${id}`);
   };
 
   const loadMore = () => {
-    setLimit((prevLimit) => prevLimit + 5);
+    setIsLoadingMore(true);
+    setLimit(5);
+    setShouldFetch(true);
   };
 
-  if (isLoading) return <p>로딩 중...</p>;
+  if (isLoading && epigrams.length === 0) return <p>로딩 중...</p>;
   if (error) return <p>{error.message}</p>;
 
   return (
     <div>
       <h1 className='text-black-600 text-2xl font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>최신 에피그램</h1>
       <div className='mt-[24px] lg:mt-[40px] gap-[16px] flex flex-col items-center'>
-        {data?.list.map((epigram: RecentEpigramType) => (
+        {epigrams.map((epigram: RecentEpigramType) => (
           <div
             key={epigram.id}
             onClick={() => handleEpigramClick(epigram.id)}
@@ -40,7 +60,12 @@ function RecentEpigrams() {
             <EpigramCard content={epigram.content} author={epigram.author} tags={epigram.tags} />
           </div>
         ))}
-        {data && limit < data.totalCount && (
+        {isLoadingMore && (
+          <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
+            <Image src={spinner} alt='로딩중' width={50} height={50} />
+          </div>
+        )}
+        {!isLoadingMore && data?.nextCursor !== null && (
           <div className='mt-10 w-full flex justify-center'>
             <LoadMoreButton onClick={loadMore} />
           </div>
diff --git a/src/components/main/TodayEmotion.tsx b/src/components/main/TodayEmotion.tsx
index 57b9575c..7145f867 100644
--- a/src/components/main/TodayEmotion.tsx
+++ b/src/components/main/TodayEmotion.tsx
@@ -1,12 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import EmotionSelector from '../Emotion/EmotionSelector';
 
 function TodayEmotion() {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  const handleEmotionSaved = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
   return (
     <div className='w-[312px] md:w-[384px] lg:w-[640px]'>
       <h1 className='text-black-600 font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>오늘의 감정</h1>
       <div className='mt-[24px] lg:mt-[40px] flex justify-end'>
-        <EmotionSelector />;
+        <EmotionSelector onEmotionSaved={handleEmotionSaved} />
       </div>
     </div>
   );
diff --git a/src/components/main/TodayEpigram.tsx b/src/components/main/TodayEpigram.tsx
index ea967782..02876e8b 100644
--- a/src/components/main/TodayEpigram.tsx
+++ b/src/components/main/TodayEpigram.tsx
@@ -13,7 +13,7 @@ function TodayEpigram() {
     <div>
       <h1 className='text-black-600 font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>오늘의 에피그램</h1>
       <div className='mt-[24px] lg:mt-[40px]'>
-        <EpigramCard content={epigram.content} author={epigram.author} tags={epigram.tags} />;
+        <EpigramCard content={epigram.content} author={epigram.author} tags={epigram.tags} />
       </div>
     </div>
   );
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 01e6c912..f1dee4bb 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -21,7 +21,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border bg-background text-foreground',
+        default: 'border bg-white text-foreground',
         destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
       },
     },
diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts
index 443938a9..40ce3824 100644
--- a/src/hooks/useGetRecentComments.ts
+++ b/src/hooks/useGetRecentComments.ts
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import getRecentComments from '@/apis/getRecentComments';
 import { GetRecentCommentsResponseType } from '@/schema/recentcomment';
 
-const useGetRecentComments = (limit: number) =>
+const useGetRecentComments = ({ cursor, limit, enabled }: { cursor: number; limit: number; enabled: boolean }) =>
   useQuery<GetRecentCommentsResponseType, Error>({
-    queryKey: ['recentComments', limit],
-    queryFn: () => getRecentComments(limit),
+    queryKey: ['recentComments', cursor, limit],
+    queryFn: () => getRecentComments(cursor, limit),
+    enabled,
   });
 
 export default useGetRecentComments;
diff --git a/src/hooks/useGetRecentEpigrams.ts b/src/hooks/useGetRecentEpigrams.ts
index beaaa314..19f862f9 100644
--- a/src/hooks/useGetRecentEpigrams.ts
+++ b/src/hooks/useGetRecentEpigrams.ts
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import getRecentEpigrams from '@/apis/getRecentEpigrams';
 import { GetRecentEpigramsResponseType } from '@/schema/recentEpigram';
 
-const useGetRecentEpigrams = (limit: number) =>
+const useGetRecentEpigrams = ({ cursor, limit, enabled }: { cursor: number | null; limit: number; enabled: boolean }) =>
   useQuery<GetRecentEpigramsResponseType, Error>({
-    queryKey: ['recentEpigrams', limit],
-    queryFn: () => getRecentEpigrams(limit),
+    queryKey: ['recentEpigrams', cursor, limit],
+    queryFn: () => getRecentEpigrams(cursor, limit),
+    enabled,
   });
 
 export default useGetRecentEpigrams;
diff --git a/src/hooks/useGoogleLogin.ts b/src/hooks/useGoogleLogin.ts
new file mode 100644
index 00000000..46045f44
--- /dev/null
+++ b/src/hooks/useGoogleLogin.ts
@@ -0,0 +1,41 @@
+import postGoogleOauth from '@/apis/postGoogleOauth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/router';
+
+const useGoogleLogin = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (code: string) => {
+      const result = await postGoogleOauth(code);
+      localStorage.setItem('accessToken', result.accessToken);
+      localStorage.setItem('refreshToken', result.refreshToken);
+      return result;
+    },
+    onSuccess: () => {
+      router.push('/epigrams');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (!status) return;
+
+        if (status === 400) {
+          toast({ description: '잘못된 요청입니다. 요청을 확인해 주세요.', className: 'bg-state-error text-white font-semibold' });
+          router.push('/auth/SignIn');
+          return;
+        }
+
+        if (status >= 500) {
+          toast({ description: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.', className: 'bg-state-error text-white font-semibold' });
+        }
+      }
+      toast({ description: '알 수 없는 에러가 발생했습니다.', className: 'bg-state-error text-white font-semibold' });
+    },
+  });
+};
+
+export default useGoogleLogin;
diff --git a/src/hooks/useKakaoLogin.ts b/src/hooks/useKakaoLogin.ts
index 14d8d81b..ea627868 100644
--- a/src/hooks/useKakaoLogin.ts
+++ b/src/hooks/useKakaoLogin.ts
@@ -15,7 +15,7 @@ const useKakaoLogin = () => {
       return result;
     },
     onSuccess: () => {
-      router.push('/');
+      router.push('/epigrams');
     },
     onError: (error) => {
       if (isAxiosError(error)) {
diff --git a/src/hooks/useNaverLogin.ts b/src/hooks/useNaverLogin.ts
new file mode 100644
index 00000000..9ff23b36
--- /dev/null
+++ b/src/hooks/useNaverLogin.ts
@@ -0,0 +1,42 @@
+import postNaverOauth from '@/apis/postNaverOauth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/router';
+
+const useNaverLogin = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async ({ code, state }: { code: string; state: string }) => {
+      const result = await postNaverOauth(code, state);
+      localStorage.setItem('accessToken', result.accessToken);
+      localStorage.setItem('refreshToken', result.refreshToken);
+      return result;
+    },
+    onSuccess: () => {
+      router.push('/epigrams');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (!status) return;
+
+        if (status === 400) {
+          toast({ description: '잘못된 요청입니다. 요청을 확인해 주세요.', className: 'bg-state-error text-white font-semibold' });
+          router.push('/auth/SignIn');
+          return;
+        }
+
+        if (status >= 500) {
+          toast({ description: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.', className: 'bg-state-error text-white font-semibold' });
+        }
+      }
+
+      toast({ description: '알 수 없는 에러가 발생했습니다.', className: 'bg-state-error text-white font-semibold' });
+    },
+  });
+};
+
+export default useNaverLogin;
diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts
index 2f4ebb5e..0ed58dc1 100644
--- a/src/hooks/useSignInMutation.ts
+++ b/src/hooks/useSignInMutation.ts
@@ -2,6 +2,7 @@ import { postSignin } from '@/apis/auth';
 import { toast } from '@/components/ui/use-toast';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import { isAxiosError } from 'axios';
 
 const useSigninMutation = () => {
   const router = useRouter();
@@ -11,10 +12,36 @@ const useSigninMutation = () => {
     onSuccess: (data) => {
       localStorage.setItem('accessToken', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      router.push('/epigrams');
     },
-    onError: () => {
-      toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' });
+    onError: (error) => {
+      if (!isAxiosError(error)) {
+        return;
+      }
+
+      const { status } = error.response || {};
+
+      if (status === 500) {
+        toast({
+          description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
+
+      // NOTE: status값은 항상 있으며 undefined와 숫자를 비교연산 할 수 없어 Number로 설정
+      if (Number(status) >= 500) {
+        toast({
+          description: '서버에서 예상치 못한 문제가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
+
+      toast({
+        description: '이메일 혹은 비밀번호를 확인해주세요.',
+        className: 'border-state-error text-state-error font-semibold',
+      });
     },
   });
 };
diff --git a/src/pageLayout/About/AboutPageLayout.tsx b/src/pageLayout/About/AboutPageLayout.tsx
new file mode 100644
index 00000000..66f7ea3a
--- /dev/null
+++ b/src/pageLayout/About/AboutPageLayout.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import Image from 'next/image';
+import Header from '@/components/Header/Header';
+import StartButton from './StartButton';
+
+function AboutLayout() {
+  return (
+    <>
+      <Header icon='' isLogo insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <main className='w-full h-[3000px] lg:h-[5000px] relative bg-slate-100'>
+        <section className='absolute w-full h-[676px] lg:h-[900px] left-0  bg-stripes'>
+          <div className='absolute left-1/2 transform -translate-x-1/2 top-[200px] lg:top-[320px] flex-col justify-start items-center gap-12 inline-flex'>
+            <div className='flex-col justify-start items-center gap-[8px] md:gap-[24px] lg:gap-[40px] flex'>
+              <div className='text-center text-zinc-700 text-[24px] md:text-[32px] lg:text-[40px] font-normal font-iropkeBatang leading-[40px] md:leading-[48px] lg:leading-[64px]'>
+                나만 갖고 있기엔
+                <br />
+                아까운 글이 있지 않나요?
+              </div>
+              <div className='text-center text-zinc-600 text-[14px] md:text-[20px] lg:text-[20px] font-normal font-iropkeBatang leading-[24px] lg:leading-[28px]'>
+                다른 사람들과 감정을 공유해 보세요.
+              </div>
+            </div>
+            <StartButton>시작하기</StartButton>
+          </div>
+          <div className='w-full h-[74px] absolute left-1/2 transform -translate-x-1/2 top-[520px] lg:top-[742px] flex-col justify-between items-center inline-flex'>
+            <div className='text-center text-slate-400 text-base font-semibold font-pretendard leading-relaxed'>더 알아보기</div>
+            <div className='w-6 h-6 relative'>
+              <Image src='/AboutPage/ArrowDownIcon.svg' alt='Arrow Down Icon' layout='fill' />
+            </div>
+          </div>
+        </section>
+
+        <section className='absolute w-[312px] md:w-[385px] lg:w-[1188px] flex-col lg:flex-row left-1/2 transform -translate-x-1/2 top-[811px] lg:top-[1289px] justify-center items-start lg:items-end gap-[40px] lg:gap-[80px] inline-flex'>
+          <div className='block md:hidden lg:hidden'>
+            <Image className='w-[312px] h-[210px]' src='/AboutPage/Mobile/AboutEpigram1.png' alt='Epigram Mobile' width={312} height={210} />
+          </div>
+          <div className='hidden md:block lg:hidden'>
+            <Image className='w-[384px] h-[240px]' src='/AboutPage/Tablet/AboutEpigram1.png' alt='Epigram Tablet' width={384} height={240} />
+          </div>
+          <div className='hidden md:hidden lg:block'>
+            <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram1.png' alt='Epigram Desktop' width={744} height={388} />
+          </div>
+          <div className='w-[364px] self-stretch flex-col justify-start lg:justify-end items-start gap-[16px] md:gap-[20px] lg:gap-[40px] inline-flex'>
+            <div className='text-zinc-950 text-[24px] lg:text-[32px] font-bold font-pretendard leading-[32px] lg:leading-[46px]'>
+              명언이나 글귀, <br />
+              토막 상식들을 공유해 보세요.
+            </div>
+            <div className='w-[363px] text-slate-500 text-[16px] lg:text-[24px] font-medium font-pretendard leading-[26px] lg:leading-[32px]'>
+              나만 알던 소중한 글들을
+              <br />
+              다른 사람들에게 전파하세요.
+            </div>
+          </div>
+        </section>
+
+        <section className='absolute w-[312px] md:w-[385px] lg:w-[1195px] flex flex-col lg:flex-row left-1/2 transform -translate-x-1/2 top-[1389px] md:top-[1421px] lg:top-[2056px] justify-center items-start lg:items-end gap-[40px] lg:gap-[80px]'>
+          <div className='order-1 lg:order-2'>
+            <div className='block md:hidden lg:hidden'>
+              <Image className='w-[312px] h-[210px]' src='/AboutPage/Mobile/AboutEpigram2.png' alt='Epigram Mobile' width={312} height={210} />
+            </div>
+            <div className='hidden md:block lg:hidden'>
+              <Image className='w-[384px] h-[240px]' src='/AboutPage/Tablet/AboutEpigram2.png' alt='Epigram Tablet' width={384} height={240} />
+            </div>
+            <div className='hidden md:hidden lg:block'>
+              <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram2.png' alt='Epigram Desktop' width={744} height={388} />
+            </div>
+          </div>
+          <div className='order-2 lg:order-1 self-stretch flex-col justify-start lg:justify-end lg:items-end gap-[16px] md:gap-[20px] lg:gap-[40px] inline-flex'>
+            <div className='text-right text-zinc-950 text-[24px] lg:text-[32px] font-bold font-pretendard leading-[32px] lg:leading-[46px]'>
+              감정 상태에 따라,
+              <br />
+              알맞은 위로를 받을 수 있어요.
+            </div>
+            <div className='text-right text-slate-500 text-[16px] lg:text-[24px] font-medium font-pretendard leading-[26px] lg:leading-[32px]'>태그를 통해 글을 모아 볼 수 있어요.</div>
+          </div>
+        </section>
+
+        <section className='absolute w-[312px] md:w-[385px] lg:w-[1195px] left-1/2 transform -translate-x-1/2 top-[1938px] md:top-[2031px] lg:top-[2825px] justify-center items-end gap-[40px] lg:gap-[80px] inline-flex'>
+          <div className='block md:hidden lg:hidden'>
+            <Image src='/AboutPage/Mobile/AboutEpigram3.png' alt='Epigram Mobile' width={312} height={210} />
+          </div>
+          <div className='hidden md:block lg:hidden'>
+            <Image src='/AboutPage/Tablet/AboutEpigram3.png' alt='Epigram Tablet' width={384} height={240} />
+          </div>
+          <div className='hidden md:hidden lg:block'>
+            <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram3.png' alt='Epigram Desktop' width={744} height={388} />
+          </div>
+          <div className='w-[364px] self-stretch flex-col justify-start lg:justify-end items-start gap-[16px] md:gap-[20px] lg:gap-[40px] inline-flex'>
+            <div className='text-zinc-950 text-[24px] lg:text-[32px] font-bold font-pretendard leading-[32px] lg:leading-[46px]'>
+              내가 요즘 어떤 감정 상태인지
+              <br />
+              통계로 한눈에 볼 수 있어요.
+            </div>
+            <div className='w-[363px] text-slate-500 text-[16px] lg:text-[24px] font-medium font-pretendard leading-[26px] lg:leading-[32px]'>
+              감정 달력으로
+              <br />내 마음에 담긴 감정을 확인해보세요
+            </div>
+          </div>
+        </section>
+      </main>
+      <section className='absolute w-full h-[782px] md:h-[1038px] lg:h-[1463px] left-0 top-[2521px] md:top-[2521px] lg:top-[3423px] bg-gradient-to-b from-slate-100 to-slate-200'>
+        <div className='w-full h-full flex justify-center items-end pb-[100px] lg:pb-[200px]'>
+          <div className='w-[312px] md:w-96 lg:w-[640px] h-[647.21px] md:h-[760px] lg:h-[1033.45px] flex flex-col justify-start items-center gap-[40px] lg:gap-[100px] inline-flex'>
+            <div className='text-center text-[#050505] text-[24px] lg:text-[32px] font-bold font-pretendard leading-[32px] lg:leading-[46px]'>
+              사용자들이 직접
+              <br />
+              인용한 에피그램들
+            </div>
+            <div className='block md:hidden lg:hidden'>
+              <Image className='w-[312px] h-[543.21px]' src='/AboutPage/Mobile/AboutEpigram4.png' alt='Epigram Mobile' width={312} height={543.21} loading='lazy' />
+            </div>
+            <div className='hidden md:flex lg:hidden'>
+              <Image className='w-96 h-[656px]' src='/AboutPage/Tablet/AboutEpigram4.png' alt='Epigram Tablet' width={384} height={656} loading='lazy' />
+            </div>
+            <div className='hidden md:hidden lg:flex'>
+              <Image className='w-[640px] h-[841.45px]' src='/AboutPage/Desktop/AboutEpigram4.png' alt='Epigram Desktop' width={640} height={841.45} loading='lazy' />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className='w-full h-[1040px] left-0 top-[3300px] md:top-[3538px] lg:top-[4824px] absolute bg-stripes flex-col justify-start items-start gap-6 inline-flex'>
+        <div className='absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col justify-start items-center gap-12 inline-flex'>
+          <div className='w-[122px] h-[70px] lg:w-[184px] lg:h-[105px] relative self-closing-comp'>
+            <div className='block md:hidden lg:hidden'>
+              <Image src='/AboutPage/Logo/LogoLG.svg' alt='Epigram Logo' layout='fill' />
+            </div>
+            <div className='hidden md:block lg:hidden'>
+              <Image src='/AboutPage/Logo/LogoLG.svg' alt='Epigram Logo' layout='fill' />
+            </div>
+            <div className='hidden md:hidden lg:block'>
+              <Image src='/AboutPage/Logo/LogoXL.svg' alt='Epigram Logo' layout='fill' />
+            </div>
+          </div>
+          <StartButton>시작하기</StartButton>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default AboutLayout;
diff --git a/src/pageLayout/About/StartButton.tsx b/src/pageLayout/About/StartButton.tsx
new file mode 100644
index 00000000..039a5294
--- /dev/null
+++ b/src/pageLayout/About/StartButton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { getMe } from '@/apis/user';
+
+interface StartButtonProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function StartButton({ className = '', children }: StartButtonProps) {
+  const router = useRouter();
+
+  const handleClick = async () => {
+    try {
+      const user = await getMe();
+      if (user) {
+        router.push('/epigrams');
+      } else {
+        router.push('/auth/SignIn');
+      }
+    } catch (error) {
+      router.push('/auth/SignIn');
+    }
+  };
+
+  return (
+    <button
+      type='button'
+      className={`bg-zinc-700 justify-center items-center gap-2 inline-flex 
+                  w-[112px] h-[48px] px-4 
+                  md:w-[112px] md:h-[48px] md:px-4 
+                  lg:w-[286px] lg:h-[64px] lg:px-4 
+                  rounded-[12px]
+                  opacity-100 
+                  ${className}`}
+      onClick={handleClick}
+    >
+      <div className='text-white text-[16px] lg:text-[20px] font-semibold font-pretendard leading-loose'>{children}</div>
+    </button>
+  );
+}
+
+export default StartButton;
diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
index 5738f1d4..97391b8f 100644
--- a/src/pageLayout/Epigram/AddEpigram.tsx
+++ b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -106,7 +106,7 @@ function AddEpigram() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>
diff --git a/src/pageLayout/Epigrams/MainLayout.tsx b/src/pageLayout/Epigrams/MainLayout.tsx
index ab5baa66..b805fec6 100644
--- a/src/pageLayout/Epigrams/MainLayout.tsx
+++ b/src/pageLayout/Epigrams/MainLayout.tsx
@@ -9,7 +9,7 @@ import FAB from '@/components/main/FAB';
 function MainLayout() {
   return (
     <>
-      <Header icon='search' routerPage='/.' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <main className='w-full min-h-screen bg-background-100 flex flex-col items-center'>
         <div className='w-[360px] flex flex-col items-center gap-6 mt-10 mb-40'>
           <section className='mt-10'>
diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx
index b011c11f..fd1e8763 100644
--- a/src/pageLayout/MypageLayout/MyPageLayout.tsx
+++ b/src/pageLayout/MypageLayout/MyPageLayout.tsx
@@ -27,7 +27,7 @@ export default function MyPageLayout() {
 
   return (
     <div className='bg-background-100 w-full relative h-dvh'>
-      <Header icon='back' routerPage='/mypage' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='back' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='bg-background-100 w-full h-[200px]'></div>
       <div className='w-full flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
         <Profile image={data.image} nickname={data.nickname} />
diff --git a/src/pageLayout/SearchLayout/SearchLayout.tsx b/src/pageLayout/SearchLayout/SearchLayout.tsx
index 02c68db9..e83b7785 100644
--- a/src/pageLayout/SearchLayout/SearchLayout.tsx
+++ b/src/pageLayout/SearchLayout/SearchLayout.tsx
@@ -100,7 +100,7 @@ function SearchLayout() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
       <div className='container mx-auto max-w-screen-sm bg-blue-100'>
         <SearchBar onSearch={handleSearch} currentSearch={currentSearch} />
         <RecentSearches searches={searches} onSearch={handleSearch} onClear={handleClearAll} />
diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
index c1bfd025..8e165591 100644
--- a/src/pages/auth/SignIn.tsx
+++ b/src/pages/auth/SignIn.tsx
@@ -77,19 +77,24 @@ export default function SignIn() {
       </Form>
       <div className=' flex justify-end items-center gap-2 w-full lg:max-w-[640px] md:max-w-[384px] md:px-0 px-6 md:mb-[60px] mb-[50px]'>
         <h2 className=' text-blue-400 lg:text-xl md:text-base sm:text-sm'>회원이 아니신가요?</h2>
-        <Link href='/'>
+        <Link href='/auth/SignUp'>
           <Button type='button' variant='link' className='lg:text-xl md:text-base sm:text-sm p-0 underline'>
             가입하기
           </Button>
         </Link>
       </div>
       <div className='flex gap-4'>
-        <Link href={`https://nid.naver.com/oauth2.0/authorize?client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code`}>
+        <Link
+          href={`https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&state=${'test'}&redirect_uri=${process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI}`}
+        >
           <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
         </Link>
-        <Link href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code&scope=email%20profile`}>
-          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
-        </Link>
+        {/* // FIXME: 구글 간편 로그인 리다이렉트시 500에러가 발생하는 부분으로 주석 처리하였음  */}
+        {/* <Link
+          href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&response_type=code&scope=email%20profile`}
+        > */}
+        <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+        {/* </Link> */}
         <Link href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`}>
           <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
         </Link>
diff --git a/src/pages/auth/redirect/google-callback/index.ts b/src/pages/auth/redirect/google-callback/index.ts
new file mode 100644
index 00000000..1f925901
--- /dev/null
+++ b/src/pages/auth/redirect/google-callback/index.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useGoogleLogin from '@/hooks/useGoogleLogin';
+
+export default function Google() {
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+  const { mutate: login } = useGoogleLogin();
+
+  useEffect(() => {
+    if (code) {
+      login(code);
+    } else {
+      /* eslint-disable no-console */
+      console.log(code); // code가 없을 때 콘솔에 출력
+    }
+  }, [code, login]);
+}
+
+// code가 없는 경우의 예시 http://localhost:3000/auth/redirect/kakao
+// 토스트로 에러 메시지 띄우고, 로그인 페이지로 리다이렉트
diff --git a/src/pages/auth/redirect/naver/index.ts b/src/pages/auth/redirect/naver/index.ts
new file mode 100644
index 00000000..ff844a3d
--- /dev/null
+++ b/src/pages/auth/redirect/naver/index.ts
@@ -0,0 +1,19 @@
+import useNaverLogin from '@/hooks/useNaverLogin';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Naver() {
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const { mutate: login } = useNaverLogin();
+
+  useEffect(() => {
+    if (code && state) {
+      login({ code, state });
+    } else {
+      /* eslint-disable no-console */
+      console.log(code, state); // code가 없을 때 콘솔에 출력
+    }
+  }, [code, state, login]);
+}
diff --git a/src/pages/epigrams/[id]/index.tsx b/src/pages/epigrams/[id]/index.tsx
index 9f5424ae..ffbd6f79 100644
--- a/src/pages/epigrams/[id]/index.tsx
+++ b/src/pages/epigrams/[id]/index.tsx
@@ -22,7 +22,7 @@ function DetailPage() {
 
   return (
     <div className='flex flex-col '>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <EpigramFigure epigram={epigram} currentUserId={userData?.id} />
       <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} userImage={userData?.image} />
     </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 68954158..a978cc2f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,98 +1,7 @@
-import React from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { Button } from '@/components/ui/button';
+import AboutLayout from '@/pageLayout/About/AboutPageLayout';
 
-export default function Home() {
-  return (
-    <div className='w-full h-[5864px] relative bg-slate-100'>
-      {/* Header */}
-      <div className='absolute w-full h-[1040px] left-0  bg-stripes'>
-        <div className='absolute left-1/2 transform -translate-x-1/2 top-[300px] flex-col justify-start items-center gap-12 inline-flex'>
-          <div className='flex-col justify-start items-center gap-10 flex'>
-            <div className='text-center text-zinc-700 text-[40px] font-normal font-iropkeBatang leading-[64px]'>
-              나만 갖고 있기엔
-              <br />
-              아까운 글이 있지 않나요?
-            </div>
-            <div className='text-center text-zinc-600 text-xl font-normal font-iropkeBatang leading-7'>다른 사람들과 감정을 공유해 보세요.</div>
-          </div>
-          <Link href='/auth/SignIn'>
-            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex'>
-              <div className='text-white text-xl font-semibold font-pretendard leading-loose'>시작하기</div>
-            </Button>
-          </Link>
-        </div>
-        <div className='w-full h-[74px] absolute left-1/2 transform -translate-x-1/2 top-[742px] flex-col justify-between items-center inline-flex'>
-          <div className='text-center text-slate-400 text-base font-semibold font-pretendard leading-relaxed'>더 알아보기</div>
-          <div className='w-6 h-6 relative'>
-            <Image src='/AboutPage/ArrowDownIcon.svg' alt='Arrow Down Icon' layout='fill' />
-          </div>
-        </div>
-      </div>
-
-      <div className='w-[1188px] left-1/2 transform -translate-x-1/2 top-[1289px] absolute justify-center items-end gap-20 inline-flex'>
-        <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram1.png' alt='placeholder' width={744} height={388} />
-        <div className='w-[364px] self-stretch flex-col justify-center items-start gap-10 inline-flex'>
-          <div className='text-zinc-950 text-[32px] font-bold font-pretendard leading-[46px]'>
-            명언이나 글귀, <br />
-            토막 상식들을 공유해 보세요.
-          </div>
-          <div className='w-[363px] text-slate-500 text-2xl font-medium font-pretendard leading-loose'>
-            나만 알던 소중한 글들을
-            <br />
-            다른 사람들에게 전파하세요.
-          </div>
-        </div>
-      </div>
-
-      <div className='w-[1195px] left-1/2 transform -translate-x-1/2 top-[2056px] absolute justify-center items-end gap-20 inline-flex'>
-        <div className='self-stretch flex-col justify-start items-end gap-10 inline-flex'>
-          <div className='text-right text-zinc-950 text-[32px] font-bold font-pretendard leading-[46px]'>
-            감정 상태에 따라,
-            <br />
-            알맞은 위로를 받을 수 있어요.
-          </div>
-          <div className='text-slate-500 text-2xl font-medium font-pretendard leading-loose'>태그를 통해 글을 모아 볼 수 있어요.</div>
-        </div>
-        <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram2.png' alt='placeholder' width={744} height={388} />
-      </div>
-
-      <div className='w-[1186px] left-1/2 transform -translate-x-1/2 top-[2825px] absolute justify-center items-end gap-20 inline-flex'>
-        <Image className='w-[744px] h-[388px]' src='/AboutPage/Desktop/AboutEpigram3.png' alt='placeholder' width={744} height={388} />
-        <div className='self-stretch flex-col justify-start items-start gap-10 inline-flex'>
-          <div className='text-zinc-950 text-[32px] font-bold font-pretendard leading-[46px]'>
-            내가 요즘 어떤 감정 상태인지
-            <br />
-            통계로 한눈에 볼 수 있어요.
-          </div>
-          <div className='w-[362px] text-slate-500 text-2xl font-medium font-pretendard leading-loose'>
-            감정 달력으로
-            <br />내 마음에 담긴 감정을 확인해보세요
-          </div>
-        </div>
-      </div>
-
-      <div className='w-full h-[2063px] left-0 top-[3423px] absolute bg-gradient-to-b from-slate-100 to-slate-200' />
-      <div className='w-[230px] left-1/2 transform -translate-x-1/2 top-[3693px] absolute text-center text-zinc-950 text-[32px] font-bold font-pretendard leading-[46px]'>
-        사용자들이 직접
-        <br />
-        인용한 에피그램들
-      </div>
-      <Image className='w-[640px] h-[786.23px] left-1/2 transform -translate-x-1/2 top-[3893px] absolute' src='/AboutPage/Desktop/AboutEpigram4.png' alt='placeholder' width={640} height={786} />
-
-      <div className='w-full h-[1040px] left-0 top-[4824px] absolute bg-stripes flex-col justify-start items-start gap-6 inline-flex'>
-        <div className='absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col justify-start items-center gap-12 inline-flex'>
-          <div className='w-[184px] h-[105px] relative self-closing-comp'>
-            <Image src='/AboutPage/Logo/LogoXL.svg' alt='Epigram Logo' layout='fill' />
-          </div>
-          <Link href='/auth/SignIn'>
-            <Button type='button' className='w-[286px] h-16 px-4 bg-zinc-700 rounded-xl justify-center items-center gap-2 inline-flex'>
-              <div className='text-white text-xl font-semibold font-pretendard leading-loose'>시작하기</div>
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+function AboutPage() {
+  return <AboutLayout />;
 }
+
+export default AboutPage;
diff --git a/src/schema/recentEpigram.ts b/src/schema/recentEpigram.ts
index 899fcc7f..fe664e60 100644
--- a/src/schema/recentEpigram.ts
+++ b/src/schema/recentEpigram.ts
@@ -18,7 +18,7 @@ const RecentEpigramSchema = z.object({
 
 export const GetRecentEpigramsResponseSchema = z.object({
   totalCount: z.number(),
-  nextCursor: z.number(),
+  nextCursor: z.number().nullable(),
   list: z.array(RecentEpigramSchema),
 });
 
diff --git a/tailwind.config.js b/tailwind.config.js
index a8b08d2c..7274ffb8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,18 +50,15 @@ module.exports = {
         'sub-gray_2': '#E3E9F1',
         'sub-gray_3': '#EFF3F8',
       },
-      boxShadow: {
-        '3xl': '0px 0px 36px 0px rgba(0, 0, 0, 0.05)',
-      },
       screens: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
         '2xl': '1536px',
       },
       backgroundImage: {
-        stripes: 'repeating-linear-gradient(to bottom, #ffffff, #ffffff 23px, #e5e7eb 23px, #e5e7eb 24px)',
+        'stripes': 'repeating-linear-gradient(to bottom, #ffffff, #ffffff 23px, #e5e7eb 23px, #e5e7eb 24px)',
       },
     },
   },