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/public/horizen.png b/public/horizen.png
new file mode 100644
index 00000000..a64360ec
Binary files /dev/null and b/public/horizen.png differ
diff --git a/public/icon/grid-icon.svg b/public/icon/grid-icon.svg
new file mode 100644
index 00000000..af95c880
--- /dev/null
+++ b/public/icon/grid-icon.svg
@@ -0,0 +1,8 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/darhboard">
+<rect id="Rectangle 34" x="5.8335" y="5" width="7" height="6" rx="1" fill="#C4C4C4"/>
+<rect id="Rectangle 35" x="5.8335" y="13" width="7" height="6" rx="1" fill="#C4C4C4"/>
+<rect id="Rectangle 36" x="15.1665" y="13" width="7" height="6" rx="1" fill="#C4C4C4"/>
+<rect id="Rectangle 37" x="15.1665" y="5" width="7" height="6" rx="1" fill="#C4C4C4"/>
+</g>
+</svg>
diff --git a/public/icon/sort-icon.svg b/public/icon/sort-icon.svg
new file mode 100644
index 00000000..d0a92737
--- /dev/null
+++ b/public/icon/sort-icon.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/Sort">
+<path id="Vector 7" d="M5 7H19" stroke="#C4C4C4" stroke-width="2" stroke-linecap="round"/>
+<path id="Vector 8" d="M5 12H15" stroke="#C4C4C4" stroke-width="2" stroke-linecap="round"/>
+<path id="Vector 9" d="M5 17H11" stroke="#C4C4C4" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>
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/main/FAB.tsx b/src/components/main/FAB.tsx
index 740e35d5..2d064dc6 100644
--- a/src/components/main/FAB.tsx
+++ b/src/components/main/FAB.tsx
@@ -10,7 +10,7 @@ function FAB() {
     <button
       type='button'
       onClick={scrollToTop}
-      className='fixed bottom-28 right-16 w-12 h-12 md:w-16 md:h-16 bg-blue-900 rounded-full flex items-center justify-center shadow-lg'
+      className='fixed z-10 bottom-20 right-6 w-12 h-12 md:w-16 md:h-16 bg-blue-900 rounded-full flex items-center justify-center shadow-lg'
       aria-label='Scroll to top'
     >
       <Image src='/icon/FAB-icon-lg.svg' alt='Scroll to top' width={24} height={24} className='md:w-16 md:h-16' />
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/input.tsx b/src/components/ui/input.tsx
index 8971384a..63a54c1d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
   <input
     type={type}
     className={cn(
-      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     ref={ref}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 319ce8e9..dd9335c1 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => (
   <textarea
     className={cn(
-      'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     ref={ref}
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/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts
index 8cbe5fe7..a0e8e8cb 100644
--- a/src/hooks/useRegisterMutation.ts
+++ b/src/hooks/useRegisterMutation.ts
@@ -4,7 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { isAxiosError } from 'axios';
 
-const useRegisterMutation = () => {
+const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => void) => {
   const router = useRouter();
 
   return useMutation({
@@ -12,64 +12,72 @@ const useRegisterMutation = () => {
     onSuccess: (data) => {
       localStorage.setItem('accessToken', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      router.push('/auth/SignIn');
+      toast({
+        title: '회원가입 성공!',
+        description: '로그인 후 이용해주세요.',
+        className: 'bg-illust-green text-white font-semibold',
+      });
     },
     onError: (error) => {
-      if (isAxiosError(error)) {
-        const { status, data } = error.response || {};
-
-        if (!status) return;
+      if (!isAxiosError(error)) {
+        return;
+      }
 
-        if (status === 400) {
-          const errorMessage = data?.message || '잘못된 요청입니다. 입력 값을 확인해주세요.';
+      const { status, data } = error.response || {};
 
-          if (errorMessage.includes('이미 사용중인 이메일')) {
-            toast({
-              description: '이미 사용중인 이메일입니다.',
-              className: 'border-state-error text-state-error font-semibold',
-            });
-            return;
-          }
+      if (status === 400) {
+        const errorMessage = data?.message || '잘못된 요청입니다. 입력 값을 확인해주세요.';
 
+        if (errorMessage.includes('이미 사용중인 이메일')) {
           toast({
-            description: errorMessage,
-            className: 'border-state-error text-state-error font-semibold',
+            description: '이미 사용중인 이메일입니다.',
+            className: 'bg-state-error text-white font-semibold',
           });
+          onRegisterError('email');
           return;
         }
 
-        if (status === 500) {
-          const errorMessage = data?.message || '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
+        toast({
+          description: errorMessage,
+          className: 'bg-state-error text-white font-semibold',
+        });
+        return;
+      }
 
-          // NOTE: swagger 문서에서 중복된 닉네임은 500에러와 함께 "Internal Server Error" 메시지로 응답 옴
-          if (errorMessage.includes('Internal Server Error')) {
-            toast({
-              description: '이미 존재하는 닉네임입니다.',
-              className: 'border-state-error text-state-error font-semibold',
-            });
-            return;
-          }
+      if (status === 500) {
+        const errorMessage = data?.message || '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
 
+        // NOTE: swagger 문서에서 중복된 닉네임은 500에러와 함께 "Internal Server Error" 메시지로 응답 옴
+        if (errorMessage.includes('Internal Server Error')) {
           toast({
-            description: errorMessage,
-            className: 'border-state-error text-state-error font-semibold',
+            description: '이미 존재하는 닉네임입니다.',
+            className: 'bg-state-error text-white font-semibold',
           });
+          onRegisterError('nickname');
           return;
         }
 
-        if (status >= 500) {
-          toast({
-            description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-            className: 'border-state-error text-state-error font-semibold',
-          });
-          return;
-        }
+        toast({
+          description: errorMessage,
+          className: 'bg-state-error text-white font-semibold',
+        });
+        return;
+      }
 
+      // NOTE: status값은 항상 있으며 undefined와 숫자를 비교연산 할 수 없어 Number로 설정
+      if (Number(status) >= 500) {
         toast({
-          description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-          className: 'border-state-error text-state-error font-semibold',
+          description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'bg-state-error text-white font-semibold',
         });
+        return;
       }
+
+      toast({
+        description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+        className: 'bg-state-error text-white font-semibold',
+      });
     },
   });
 };
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/Feed/AddEpigramFAB.tsx b/src/pageLayout/Feed/AddEpigramFAB.tsx
new file mode 100644
index 00000000..6556eb72
--- /dev/null
+++ b/src/pageLayout/Feed/AddEpigramFAB.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { Button } from '@/components/ui/button';
+
+function AddEpigramFAB() {
+  const router = useRouter();
+
+  const handleAddEpigramClick = () => {
+    router.push('/addEpigram');
+  };
+
+  return (
+    <Button
+      variant='default'
+      size='lg'
+      onClick={handleAddEpigramClick}
+      className='z-10 h-12 lg:h-16 px-3.5 lg:px-5 py-3 lg:py-4 bg-[#2c394d] text-white rounded-[100px] shadow-lg justify-center items-center gap-1 inline-flex fixed bottom-40 right-6 cursor-pointer'
+      role='button'
+      aria-label='Add Epigram'
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleAddEpigramClick();
+        }
+      }}
+    >
+      <div className='w-6 h-6 relative'>
+        <Image src='/icon/plus-icon.svg' alt='add icon' layout='fill' objectFit='contain' />
+      </div>
+      <span className='text-sm lg:text-xl font-semibold font-pretendard leading-normal lg:leading-loose'>에피그램 만들기</span>
+    </Button>
+  );
+}
+
+export default AddEpigramFAB;
diff --git a/src/pageLayout/Feed/EpigramFeed.tsx b/src/pageLayout/Feed/EpigramFeed.tsx
new file mode 100644
index 00000000..e26a6b79
--- /dev/null
+++ b/src/pageLayout/Feed/EpigramFeed.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import useGetRecentEpigrams from '@/hooks/useGetRecentEpigrams';
+import { RecentEpigramType } from '@/schema/recentEpigram';
+import Image from 'next/image';
+import MoreEpigramButton from './MoreEpigramButton';
+import FeedCard from './FeedCard';
+import spinner from '../../../public/spinner.svg';
+
+function EpigramFeed() {
+  const router = useRouter();
+  const [epigrams, setEpigrams] = useState<RecentEpigramType[]>([]);
+  const [cursor, setCursor] = useState<number>(0);
+  const [limit, setLimit] = useState<number>(6);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(true);
+  const [isSingleColumn, setIsSingleColumn] = useState<boolean>(false);
+
+  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 = () => {
+    setIsLoadingMore(true);
+    setLimit(10);
+    setShouldFetch(true);
+  };
+
+  const toggleLayout = () => {
+    setIsSingleColumn(!isSingleColumn);
+  };
+
+  const handleSortKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      toggleLayout();
+    }
+  };
+
+  if (isLoading && epigrams.length === 0) return <p>로딩 중...</p>;
+  if (error) return <p>{error.message}</p>;
+
+  return (
+    <div>
+      <div className='w-full h-[26px] justify-between items-center inline-flex mt-[32px] lg:mt-[120px]'>
+        <h1 className='text-[#373737] text-base lg:text-2xl font-semibold font-pretendard leading-relaxed'>피드</h1>
+        <div className='w-6 h-6 relative block md:hidden' onClick={toggleLayout} onKeyPress={handleSortKeyPress} role='button' tabIndex={0} aria-label='Toggle layout'>
+          <Image src={isSingleColumn ? '/icon/grid-icon.svg' : '/icon/sort-icon.svg'} alt={isSingleColumn ? 'grid layout' : 'sort layout'} width={24} height={24} className='w-full h-full' />
+        </div>
+      </div>
+      <div className={`mt-[24px] lg:mt-[40px] mb-[10px] gap-x-2 gap-y-4 md:gap-y-6 lg:gap-y-10 ${isSingleColumn ? 'grid grid-cols-1' : 'grid grid-cols-2'}`}>
+        {epigrams.map((epigram: RecentEpigramType) => (
+          <div
+            key={epigram.id}
+            onClick={() => handleEpigramClick(epigram.id)}
+            role='button'
+            tabIndex={0}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                handleEpigramClick(epigram.id);
+              }
+            }}
+          >
+            <FeedCard content={epigram.content} author={epigram.author} tags={epigram.tags} size={isSingleColumn ? 'sm2' : 'sm1'} />
+          </div>
+        ))}
+      </div>
+      {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 mb-14 w-full flex justify-center'>
+          <MoreEpigramButton onClick={loadMore} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EpigramFeed;
diff --git a/src/pageLayout/Feed/FeedCard.tsx b/src/pageLayout/Feed/FeedCard.tsx
new file mode 100644
index 00000000..b848e107
--- /dev/null
+++ b/src/pageLayout/Feed/FeedCard.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+interface Tag {
+  name: string;
+  id: number;
+}
+
+interface EpigramCardProps {
+  content: string;
+  author: string;
+  tags: Tag[];
+  size?: 'sm1' | 'sm2' | 'md' | 'lg';
+}
+
+const sizeStyles = {
+  sm1: 'w-[152px] max-h-[154px]',
+  sm2: 'w-[312px] max-h-[172px]',
+  md: 'md:w-[294px] md:max-h-[214px]',
+  lg: 'lg:w-[585px] lg:max-h-[307px]',
+};
+
+const textSizeStyles = {
+  sm1: 'text-xs',
+  sm2: 'text-sm',
+  md: 'md:text-base',
+  lg: 'lg:text-2xl',
+};
+
+const paddingStyles = {
+  sm1: 'p-4',
+  sm2: 'p-6',
+  md: 'md:p-6',
+  lg: 'lg:p-6',
+};
+
+function FeedCard({ content, author, tags, size = 'sm1' }: EpigramCardProps) {
+  return (
+    <div className={`relative flex-col justify-start items-end gap-[16px] inline-flex ${sizeStyles[size]} ${sizeStyles.md} ${sizeStyles.lg}`}>
+      <div
+        className={`w-full ${paddingStyles[size]} ${paddingStyles.md} ${paddingStyles.lg} bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden`}
+      >
+        <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* Background stripes */}
+        <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
+          <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
+            <div className={`self-stretch ${textSizeStyles[size]} ${textSizeStyles.md} ${textSizeStyles.lg} text-neutral-700 font-normal font-iropkeBatang leading-normal`}>{content}</div>
+            <div className={`self-stretch ${textSizeStyles[size]} ${textSizeStyles.md} ${textSizeStyles.lg} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}>- {author}</div>
+          </div>
+        </div>
+      </div>
+      <div className='justify-start items-start gap-2 inline-flex'>
+        {tags.map((tag) => (
+          <div key={tag.id} className={`text-right ${textSizeStyles[size]} ${textSizeStyles.md} ${textSizeStyles.lg} text-slate-400 font-normal font-iropkeBatang leading-normal`}>
+            #{tag.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FeedCard;
diff --git a/src/pageLayout/Feed/FeedPageLayout.tsx b/src/pageLayout/Feed/FeedPageLayout.tsx
new file mode 100644
index 00000000..fc331fe3
--- /dev/null
+++ b/src/pageLayout/Feed/FeedPageLayout.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Header from '@/components/Header/Header';
+import FAB from '@/components/main/FAB';
+import EpigramFeed from './EpigramFeed';
+import AddEpigramFAB from './AddEpigramFAB';
+
+function FeedLayout() {
+  return (
+    <>
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <main className='w-full h-auto flex-col justify-start items-center gap-[72px] inline-flex bg-blue-200'>
+        <div className='w-[312px] md:w-[600px] lg:w-[1200px] h-auto flex-col justify-center items-center gap-14 inline-flex'>
+          <div className='self-stretch'>
+            <EpigramFeed />
+          </div>
+        </div>
+      </main>
+      <AddEpigramFAB />
+      <FAB />
+    </>
+  );
+}
+
+export default FeedLayout;
diff --git a/src/pageLayout/Feed/MoreEpigramButton.tsx b/src/pageLayout/Feed/MoreEpigramButton.tsx
new file mode 100644
index 00000000..2e623e2a
--- /dev/null
+++ b/src/pageLayout/Feed/MoreEpigramButton.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface LoadMoreButtonProps {
+  onClick: () => void;
+}
+
+function MoreEpigramButton({ onClick }: LoadMoreButtonProps) {
+  return (
+    <div
+      onClick={onClick}
+      className='h-12 lg:h-14 px-[18px] lg:px-10 py-3 bg-[#f5f7fa] rounded-[100px] border border-[#cfdbea] justify-center items-center gap-1 lg:gap-2 inline-flex cursor-pointer'
+      role='button'
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}
+    >
+      <div className='w-6 h-6 relative'>
+        <Image src='/icon/plus-icon.svg' alt='plus icon' layout='fill' objectFit='contain' />
+      </div>
+      <div className='text-blue-400 text-sm lg:text-xl font-normal lg:font-medium font-pretendard leading-normal lg:leading-loose'>에피그램 더보기</div>
+    </div>
+  );
+}
+
+export default MoreEpigramButton;
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/SignUp.tsx b/src/pages/auth/SignUp.tsx
index e6c52906..3c989445 100644
--- a/src/pages/auth/SignUp.tsx
+++ b/src/pages/auth/SignUp.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,7 +10,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import useRegisterMutation from '@/hooks/useRegisterMutation';
 
 export default function SignUp() {
-  const mutationRegister = useRegisterMutation();
+  const [focusedField, setFocusedField] = useState<string | null>(null);
 
   const form = useForm<PostSignUpRequestType>({
     resolver: zodResolver(PostSignUpRequest),
@@ -22,6 +23,20 @@ export default function SignUp() {
     },
   });
 
+  const { setFocus, setValue, trigger } = form;
+
+  const handleFieldError = (field: 'email' | 'nickname') => {
+    setFocus(field);
+    setFocusedField(field);
+  };
+
+  const mutationRegister = useRegisterMutation(handleFieldError);
+
+  const trimWhitespace = (fieldName: keyof PostSignUpRequestType, value: string) => {
+    setValue(fieldName, value.trim(), { shouldValidate: true, shouldDirty: true });
+    trigger(fieldName);
+  };
+
   return (
     <div className='flex flex-col justify-center items-center bg-background-100 w-full min-h-screen'>
       <header className='h-full mb-[50px] md:mb-[60px]'>
@@ -37,13 +52,20 @@ export default function SignUp() {
               name='email'
               render={({ field, fieldState }) => (
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
-                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>이메일</FormLabel>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid || focusedField === 'email' ? 'text-state-error' : 'text-blue-900'}`}>
+                    이메일
+                  </FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='text'
                       placeholder='이메일'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
+                      onBlur={(e) => {
+                        trimWhitespace('email', e.target.value);
+                      }}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${
+                        fieldState.invalid || focusedField === 'email' ? 'border-2 border-state-error' : 'focus:border-blue-500'
+                      }`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -58,10 +80,11 @@ export default function SignUp() {
                   <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>비밀번호</FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='password'
                       placeholder='비밀번호'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
+                      onBlur={(e) => trimWhitespace('password', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -75,10 +98,11 @@ export default function SignUp() {
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
                   <FormControl>
                     <Input
+                      {...field}
                       type='password'
                       placeholder='비밀번호 확인'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
+                      onBlur={(e) => trimWhitespace('passwordConfirmation', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -90,13 +114,16 @@ export default function SignUp() {
               name='nickname'
               render={({ field, fieldState }) => (
                 <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] md:mb-10 mb-[30px] space-y-0'>
-                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>닉네임</FormLabel>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid || focusedField === 'nickname' ? 'text-state-error' : 'text-blue-900'}`}>
+                    닉네임
+                  </FormLabel>
                   <FormControl>
                     <Input
+                      {...field}
                       type='text'
                       placeholder='닉네임'
-                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                      {...field}
+                      onBlur={(e) => trimWhitespace('nickname', e.target.value)}
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid || focusedField === 'nickname' ? 'border-2 border-state-error' : 'focus:border-blue-500'}`}
                     />
                   </FormControl>
                   <FormMessage className='flex justify-end text-[13px] text-state-error' />
@@ -113,16 +140,32 @@ export default function SignUp() {
           </form>
         </Form>
       </div>
-      <div className='flex justify-center gap-4'>
-        <Button type='button' className='md:size-[60px] p-0'>
-          <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
-        </Button>
-        <Button type='button' className='md:size-[60px] p-0'>
+      <div className='flex flex-col items-center w-full lg:gap-10 gap-6'>
+        <div className='flex justify-center items-center lg:gap-6 gap-[14px] w-full lg:max-w-[640px] md:max-w-[384px] lg:px-0 md:px-0 px-6'>
+          <div className='flex-grow'>
+            <Image src='/horizen.png' alt='horizen' width={180} height={0} className='w-full h-[2px]' />
+          </div>
+          <h3 className='lg:text-xl text-xs font-pretendard text-blue-400 whitespace-nowrap'>SNS 계정으로 로그인하기</h3>
+          <div className='flex-grow'>
+            <Image src='/horizen.png' alt='horizen' width={180} height={0} className='w-full h-[2px]' />
+          </div>
+        </div>
+        <div className='flex justify-center gap-4'>
+          <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>
+          {/* // 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' />
-        </Button>
-        <Button type='button' className='md:size-[60px] p-0'>
-          <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
-        </Button>
+          {/* </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>
+        </div>
       </div>
     </div>
   );
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/feed/index.tsx b/src/pages/feed/index.tsx
new file mode 100644
index 00000000..05178305
--- /dev/null
+++ b/src/pages/feed/index.tsx
@@ -0,0 +1,7 @@
+import FeedLayout from '@/pageLayout/Feed/FeedPageLayout';
+
+function FeedPage() {
+  return <FeedLayout />;
+}
+
+export default FeedPage;
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/auth.ts b/src/schema/auth.ts
index 5de73332..5ace18f2 100644
--- a/src/schema/auth.ts
+++ b/src/schema/auth.ts
@@ -1,6 +1,6 @@
 import * as z from 'zod';
 
-const PWD_VALIDATION_REGEX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
+const PWD_VALIDATION_REGEX = /^([a-z]|[A-Z]|[0-9]|[!@#$%^&])+$/;
 
 // NOTE: 회원가입 스키마
 export const PostSignUpRequest = z
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)',
       },
     },
   },