diff --git a/src/components/Common/TextArea/TextArea.tsx b/src/components/Common/TextArea/TextArea.tsx
index 3a2cf230..08aa5f06 100644
--- a/src/components/Common/TextArea/TextArea.tsx
+++ b/src/components/Common/TextArea/TextArea.tsx
@@ -5,11 +5,17 @@ import { clsx } from 'clsx';
 
 type TextAreaProps = {
     value: string;
-    setValue: (value: string) => void;
+    setValue?: (value: string) => void;
     font?: string;
+    isReadonly?: boolean;
 };
 
-export const TextArea = ({ value, setValue, font }: TextAreaProps) => {
+export const TextArea = ({
+    value,
+    setValue,
+    font,
+    isReadonly
+}: TextAreaProps) => {
     const [lineHeight, setLineHeight] = useState<number>(2.2);
     const [lineCount, setLineCount] = useState<number>(8);
     const textAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -35,8 +41,9 @@ export const TextArea = ({ value, setValue, font }: TextAreaProps) => {
 
             setLineCount(calculatedLinesCount);
         }
-
-        setValue(inputValue);
+        if (setValue) {
+            setValue(inputValue);
+        }
     };
 
     useEffect(() => {
@@ -82,7 +89,7 @@ export const TextArea = ({ value, setValue, font }: TextAreaProps) => {
         <div>
             <textarea
                 className={clsx(
-                    `w-full  m-auto overflow-hidden bg-transparent border-none resize-none min-h-[413px] min-w-[281px]`,
+                    `w-full  m-auto overflow-hidden bg-transparent border-none resize-none min-h-[413px] min-w-[281px] focus:outline-none`,
                     font ? font : 'font-sans'
                 )}
                 style={{
@@ -92,6 +99,7 @@ export const TextArea = ({ value, setValue, font }: TextAreaProps) => {
                 placeholder="편지를 작성하세요..."
                 value={value}
                 onChange={handleInputChange}
+                readOnly={isReadonly}
             />
 
             <div className="absolute top-0 w-full mt-[30px]">
diff --git a/src/components/LetterDetailPage/Keyword/KeywordList.tsx b/src/components/LetterDetailPage/Keyword/KeywordList.tsx
new file mode 100644
index 00000000..f00ca76d
--- /dev/null
+++ b/src/components/LetterDetailPage/Keyword/KeywordList.tsx
@@ -0,0 +1,42 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+import React, { useState } from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+type KeywordListProps = {
+    keywords: string[];
+};
+
+export const KeywordList = ({ keywords }: KeywordListProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onClick = () => {
+        setIsOpen((prev) => !prev);
+    };
+    return (
+        <>
+            {keywords.length > 0 && (
+                <p
+                    className={`flex flex-wrap ${isOpen ? '' : 'max-w-[550px] overflow-hidden'}`}
+                >
+                    {keywords
+                        .slice(0, isOpen ? keywords.length : 4)
+                        .map((keyword, index) => (
+                            <span key={index} className="keyword-tag key">
+                                {keyword}
+                            </span>
+                        ))}
+                    {!isOpen && keywords.length > 4 && (
+                        <button className="flex items-center" onClick={onClick}>
+                            <span className="text-4xl">...</span>
+                            <IoIosArrowDown className="text-3xl " />
+                        </button>
+                    )}
+                    {isOpen && keywords.length > 4 && (
+                        <button className="flex items-center" onClick={onClick}>
+                            <IoIosArrowUp className="text-3xl " />
+                        </button>
+                    )}
+                </p>
+            )}
+        </>
+    );
+};
diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail.tsx
index 2446c2ff..85321405 100644
--- a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail.tsx
+++ b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail.tsx
@@ -1,72 +1,47 @@
-import { useState } from 'react';
-import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { formatDate } from '@/util/formatDate';
+import { TextArea } from '@/components/Common/TextArea/TextArea';
+import { Margin } from '@/components/Common/Margin/Margin';
+import { KeywordList } from '../Keyword/KeywordList';
+import { DeleteButton } from '../Delete/DeleteButton';
+import clsx from 'clsx';
 
 type KeywordLetterDetailProps = {
     letterData: {
+        letterId: number;
         title: string;
         content: string;
         keywords: string[];
         createdAt: string;
+        font: string;
     };
 };
 
 export const KeywordLetterDetail = ({
     letterData
 }: KeywordLetterDetailProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const onClick = () => {
-        setIsOpen((prev) => !prev);
-    };
-    const { title, content, keywords, createdAt } = letterData;
+    const { letterId, title, content, keywords, createdAt, font } = letterData;
     return (
-        <>
-            <p className="absolute left-24 top-[15rem]">{title}</p>
-            <p className="absolute left-24 top-[19rem]">{content}</p>
-            <div className="absolute bottom-16 w-[580px] h-[100px]">
-                {keywords.length > 0 && (
-                    <>
-                        <p className="font-bold m-4">편지의 키워드</p>
-                        <div className="m-4">
-                            <p
-                                className={`flex flex-wrap ${isOpen ? '' : 'max-w-[550px] overflow-hidden'}`}
-                            >
-                                {keywords
-                                    .slice(0, isOpen ? keywords.length : 4)
-                                    .map((keyword, index) => (
-                                        <span
-                                            key={index}
-                                            className="mr-2 mb-2 keyword-tag"
-                                        >
-                                            {keyword}
-                                        </span>
-                                    ))}
-                                {!isOpen && keywords.length > 4 && (
-                                    <button
-                                        className="flex items-center"
-                                        onClick={onClick}
-                                    >
-                                        <span className="text-4xl">...</span>
-                                        <IoIosArrowDown className="text-3xl mr-2" />
-                                    </button>
-                                )}
-                                {isOpen && keywords.length > 4 && (
-                                    <button
-                                        className="flex items-center"
-                                        onClick={onClick}
-                                    >
-                                        <IoIosArrowUp className="text-3xl mr-2" />
-                                    </button>
-                                )}
-                            </p>
-                        </div>
-                    </>
-                )}
-            </div>
-            <div className="absolute bottom-8 translate-x-60 flex-col">
-                <p className="ml-2">{formatDate(createdAt)}</p>
+        <div className={clsx(font ? font : 'font-sans')}>
+            <Margin top={20} />
+            <div className="relative z-20 flex flex-col justify-center w-9/12 m-auto py-9">
+                <div className="absolute top-0 right-0">
+                    <DeleteButton id={String(letterId)} />
+                </div>
+                <h1>{title}</h1>
+                <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+
+                <div className="relative">
+                    <TextArea value={content} font={font} isReadonly={true} />
+                </div>
+
+                <Margin top={30} />
+                <div className="flex justify-between w-full ">
+                    <p className="font-bold ">편지의 키워드</p>
+                    <p className="">{formatDate(createdAt)}</p>
+                </div>
+                <KeywordList keywords={keywords} />
+                <Margin bottom={30} />
             </div>
-        </>
+        </div>
     );
 };
diff --git a/src/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer.tsx b/src/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer.tsx
index ce82ba18..6bc63002 100644
--- a/src/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer.tsx
+++ b/src/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer.tsx
@@ -1,14 +1,9 @@
-import { BackButton } from '@/components/Common/BackButton/BackButton';
-import { useNavigate } from 'react-router-dom';
-
 import { useParams } from 'react-router-dom';
-import { DeleteButton } from '@/components/LetterDetailPage/Delete/DeleteButton';
-
-import { ReportButton } from '@/components/LetterDetailPage/Report/ReportButton';
 import { useKeywordLetterDetail } from '@/hooks/useGetKeywordLetterDetail';
-import { MapLetterDetail } from '../LetterDatail/MapLetterDetail';
+import { ThemeWrapper } from '@/components/CreatLetterPage/ThemeWrapper/ThemeWrapper';
+import { useToastStore } from '@/hooks';
+import { useEffect } from 'react';
 import { KeywordLetterDetail } from '../LetterDatail/KeywordLetterDetail';
-import { ReplyList } from '../ReplyList/ReplyList';
 
 type LetterDetailContainerProps = {
     hasReplies?: boolean;
@@ -21,106 +16,92 @@ export const LetterDetailContainer = ({
         type: 'map' | 'keyword';
         letterId: string;
     }>();
-    const { data, isLoading, error } = useKeywordLetterDetail({
+
+    const { addToast } = useToastStore();
+
+    const { data, error, isLoading } = useKeywordLetterDetail({
         letterId: letterId || ''
     });
 
-    const navigate = useNavigate();
-
-    const onBackClick = () => {
-        navigate(-1);
-    };
+    useEffect(() => {
+        if (error) {
+            addToast(error.message, 'error');
+        }
+    }, [error, addToast]);
 
     if (isLoading) {
-        return <div>Loading...</div>;
+        return <div>로딩 중...</div>;
     }
 
-    if (error instanceof Error) {
-        console.error('error:', error.message);
-        return <div>Error: {error.message}</div>;
+    if (!data) {
+        return (
+            <ThemeWrapper themeId={1}>
+                <div>데이터가 없습니다.</div>;
+            </ThemeWrapper>
+        );
     }
 
-    const imageItem = {
-        id: '편지지_샘플_1',
-        name: '이미지',
-        src: '/편지지_샘플_1.png'
-    };
-    const labelItem = {
-        id: '라벨_샘플',
-        name: '이미지',
-        src: '/라벨_샘플.png'
-    };
-
-    const sampleReplies = [
-        { id: 1, title: '답장 제목 1', date: '24.11.28' },
-        { id: 2, title: '답장 제목 2', date: '24.11.29' },
-        { id: 3, title: '답장 제목 3', date: '24.11.30' }
-    ];
     return (
-        <>
-            <div className="relative mx-auto mt-4 max-w">
-                <div className="mx-auto w-[710px]">
-                    <BackButton onClick={onBackClick} />
-                </div>
-                {letterId && (
-                    <div className="absolute top-0 flex mt-10 right-8">
-                        <DeleteButton id={letterId} />
-                        {!data?.isOwner && <ReportButton id={letterId} />}
-                    </div>
-                )}
-                <div className="relative mt-16 flex-center">
-                    <img
-                        src={imageItem.src}
-                        alt={imageItem.name}
-                        className="w-[710px] h-[900px] relative"
-                    />
-                    <img
-                        src={labelItem.src}
-                        alt={labelItem.name}
-                        className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
-                    />
-                    {type === 'map' ? (
-                        <MapLetterDetail
-                            title="편지제목"
-                            content="편지내용"
-                            date="24.11.18"
-                            place="서울시 종로구 평창동"
-                            hint="서대문역 앞 붕어빵 가게에서"
-                        />
-                    ) : (
-                        data && <KeywordLetterDetail letterData={data} />
+        <ThemeWrapper themeId={Number(data.paper)}>
+            <KeywordLetterDetail letterData={data} />
+        </ThemeWrapper>
+    );
+};
+
+/*
+   <div className="relative mx-auto mt-4 max-w">
+                    {letterId && (
+                        <div className="absolute top-0 flex mt-10 right-8">
+                            <DeleteButton id={letterId} />
+                            {!data?.isOwner && <ReportButton id={letterId} />}
+                        </div>
                     )}
+                    <div className="relative mt-16 flex-center">
+                        <img
+                            src={labelItem.src}
+                            alt={labelItem.name}
+                            className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
+                        />
+                        {type === 'map' ? (
+                            <MapLetterDetail
+                                title="편지제목"
+                                content="편지내용"
+                                date="24.11.18"
+                                place="서울시 종로구 평창동"
+                                hint="서대문역 앞 붕어빵 가게에서"
+                            />
+                        ) : (
+                            data && <KeywordLetterDetail letterData={data} />
+                        )}
+                    </div>
                 </div>
-            </div>
 
-            {data?.isOwner ? (
-                hasReplies ? (
-                    <div className="mt-16 w-[710px]  mx-auto">
-                        <ReplyList replies={sampleReplies} />
+                {data?.isOwner ? (
+                    hasReplies ? (
+                        <div className="mt-16 w-[710px]  mx-auto">
+                            <ReplyList replies={sampleReplies} />
+                        </div>
+                    ) : null
+                ) : type === 'map' ? (
+                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
+                        {!data?.isOwner && (
+                            <>
+                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                                    보관하기
+                                </button>
+                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                                    편지에 답장하기
+                                </button>
+                            </>
+                        )}
                     </div>
-                ) : null
-            ) : type === 'map' ? (
-                <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                    {!data?.isOwner && (
-                        <>
-                            <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                                보관하기
-                            </button>
-                            <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                ) : (
+                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
+                        {!data?.isOwner && (
+                            <button className="btn-base rounded-3xl w-[700px] h-[80px]">
                                 편지에 답장하기
                             </button>
-                        </>
-                    )}
-                </div>
-            ) : (
-                <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                    {!data?.isOwner && (
-                        <button className="btn-base rounded-3xl w-[700px] h-[80px]">
-                            편지에 답장하기
-                        </button>
-                    )}
-                </div>
-            )}
-        </>
-    );
-};
+                        )}
+                    </div>
+                )}
+*/
diff --git a/src/components/StoragePage/StorageList.tsx b/src/components/StoragePage/StorageList.tsx
index e9830857..e52d5e3d 100644
--- a/src/components/StoragePage/StorageList.tsx
+++ b/src/components/StoragePage/StorageList.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { BottleLetter } from '../Common/BottleLetter/BottleLetter';
 import { Itembox } from '../Common/Itembox/Itembox';
 import { getLetter } from '@/service/storage/getLetter';
+import { useNavigate } from 'react-router-dom';
 
 interface Letter {
     letterId: number;
@@ -25,6 +26,8 @@ type StorageListProps = {
 };
 
 export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
+    const navigate = useNavigate();
+
     // const queryClient = useQueryClient();
     // const { data, error, fetchNextPage, hasNextPage, isFetchNextPage } =
     //     useInfiniteFetch();
@@ -165,7 +168,7 @@ export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
                     </button>
                 </div>
                 {/* 삭제 섹션 */}
-                <div className="flex flex-row gap-3 justify-between text-sm w-full">
+                <div className="flex flex-row justify-between w-full gap-3 text-sm">
                     <div className="flex flex-row items-center gap-1">
                         <input
                             type="checkbox"
@@ -181,12 +184,12 @@ export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
                         />
                         <label>전체</label>
                     </div>
-                    <button className="bg-sample-gray px-2 py-1">삭제</button>
+                    <button className="px-2 py-1 bg-sample-gray">삭제</button>
                 </div>
                 {groupedLetters.map((dayGroup) => (
                     <div key={dayGroup.date} className="flex flex-col gap-3">
                         {/* 날짜 섹션 */}
-                        <div className="text-md font-medium">
+                        <div className="font-medium text-md">
                             {dayGroup.date}
                         </div>
                         {/* 해당 날짜의 편지들 */}
@@ -213,7 +216,19 @@ export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
                                                 : false
                                         }
                                     />
-                                    <div className="flex flex-row gap-4 w-full h-[90px] items-center p-4 rounded-lg bg-sample-gray">
+                                    <div
+                                        className="flex flex-row gap-4 w-full h-[90px] items-center p-4 rounded-lg bg-sample-gray cursor-pointer"
+                                        onClick={() => {
+                                            if (
+                                                type === 'keyword' ||
+                                                type === 'map'
+                                            ) {
+                                                navigate(
+                                                    `/letter/${type}/${letter.letterId}`
+                                                );
+                                            }
+                                        }}
+                                    >
                                         <Itembox>
                                             <BottleLetter Letter={letter} />
                                         </Itembox>
@@ -223,7 +238,7 @@ export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
                                                     ? '보낸 편지'
                                                     : '받은 편지'}
                                             </div>
-                                            <h3 className="font-bold text-sm">
+                                            <h3 className="text-sm font-bold">
                                                 {letter.title}
                                             </h3>
                                         </div>
diff --git a/src/pages/Letter/Detail/LetterDetailPage.tsx b/src/pages/Letter/Detail/LetterDetailPage.tsx
index 9f4b53b7..18b0a9f8 100644
--- a/src/pages/Letter/Detail/LetterDetailPage.tsx
+++ b/src/pages/Letter/Detail/LetterDetailPage.tsx
@@ -1,5 +1,19 @@
+import { NavigationBar } from '@/components/Common/NavigationBar/NavigationBar';
+import { TopBar } from '@/components/Common/TopBar/TopBar';
 import { LetterDetailContainer } from '@/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer';
+import { useNavigate } from 'react-router-dom';
 
 export const LetterDetailPage = () => {
-    return <LetterDetailContainer />;
+    const navigate = useNavigate();
+
+    const onBackClick = () => {
+        navigate(-1);
+    };
+    return (
+        <div className="w-full h-full">
+            <TopBar handleBackClick={onBackClick} />
+            <LetterDetailContainer />;
+            <NavigationBar />
+        </div>
+    );
 };
diff --git a/src/router.tsx b/src/router.tsx
index 7ae6ee9f..dc50b50c 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -104,10 +104,6 @@ export const router = createBrowserRouter([
                 path: '/share',
                 element: <SharePage />
             },
-            {
-                path: '/letter/:type/:letterId',
-                element: <LetterDetailPage />
-            },
             {
                 path: '/letter/reply/:id',
                 element: <ReplyLetterDetailPage />
@@ -132,7 +128,11 @@ export const router = createBrowserRouter([
         children: [
             { path: 'create', element: <CreateLetterPage /> },
             { path: 'select', element: <SelectItemPage /> },
-            { path: 'success', element: <SuccessLetterPage /> }
+            { path: 'success', element: <SuccessLetterPage /> },
+            {
+                path: '/letter/:type/:letterId',
+                element: <LetterDetailPage />
+            }
         ]
     },
     {
diff --git a/src/service/api.ts b/src/service/api.ts
index e1e0b291..3475787e 100644
--- a/src/service/api.ts
+++ b/src/service/api.ts
@@ -1,8 +1,8 @@
 import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
 import { tokenStorage } from './auth/tokenStorage';
 import { refreshAccessToken } from '@/service/auth/refreshAccessToken';
-import { formatApiError } from '@/util/formatApiError';
 import { logout } from './auth/logout';
+import { formatApiError } from '@/util/formatApiError';
 
 const baseUrl = import.meta.env.VITE_API_URL as string;
 
@@ -61,7 +61,7 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
                 if (refreshAccessTokenResponse.isSuccess) {
                     console.log('액세스 토큰 재발급됨');
                     const newAccessToken =
-                        refreshAccessTokenResponse.result.newAccessToken;
+                        refreshAccessTokenResponse.result!.newAccessToken;
                     tokenStorage.setAccessToken(newAccessToken);
                     // 실패했던 요청을 재요청
                     originalRequest.headers['Authorization'] =
@@ -80,12 +80,15 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
         }
     );
 
-    // 에러처리
     instance.interceptors.response.use(
-        (response) => response,
+        (response) => {
+            if (response.data.isSuccess === false) {
+                throw formatApiError(response.data.code, response.data.message);
+            }
+            return response;
+        },
         (error) => {
-            console.error('API Error:', error);
-            return Promise.reject(error);
+            throw formatApiError('ERROR500', '네트워크 요청에 실패했습니다.');
         }
     );
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 5b7c7551..c0b4b5dd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -94,7 +94,7 @@ export default {
                     '@apply text-black hover:underline': ''
                 },
                 '.keyword-tag': {
-                    '@apply bg-primary rounded-2xl p-2': ''
+                    '@apply bg-white rounded-lg rounded-2xl p-2': ''
                 }
             });
         }