diff --git a/src/App.tsx b/src/App.tsx
index 03cbaf9..34e6dfa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Home from './pages/Home';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
 import LetterBoxPage from './pages/LetterBox';
+import LetterBoxDetailPage from './pages/LetterBoxDetail';
 import LetterDetailPage from './pages/LetterDetail';
 import LoginPage from './pages/Login';
 import MyPage from './pages/MyPage';
@@ -25,8 +26,11 @@ const App = () => {
         <Route path="login" element={<LoginPage />} />
         <Route path="onboarding" element={<OnboardingPage />} />
         <Route path="letter">
-          <Route path="random" element={<RandomLettersPage />} />
-          <Route path="box" element={<LetterBoxPage />} />
+          <Route element={<Layout />}>
+            <Route path="random" element={<RandomLettersPage />} />
+            <Route path="box" element={<LetterBoxPage />} />
+            <Route path="box/:id" element={<LetterBoxDetailPage />} />
+          </Route>
           <Route path="write" element={<WritePage />} />
           <Route path=":id" element={<LetterDetailPage />} />
         </Route>
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 148e75f..e14f8ea 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -3,6 +3,7 @@ import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
 import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
+import InformationIcon from './infromation.svg?react';
 import LikeFilledIcon from './like-filled.svg?react';
 import LikeOutlinedIcon from './like-outlined.svg?react';
 import NoticeIcon from './notice.svg?react';
@@ -14,6 +15,7 @@ export {
   AlarmIcon,
   PersonIcon,
   ArrowLeftIcon,
+  InformationIcon,
   SirenFilledIcon,
   SirenOutlinedIcon,
   EnvelopeIcon,
diff --git a/src/assets/icons/infromation.svg b/src/assets/icons/infromation.svg
new file mode 100644
index 0000000..25935ef
--- /dev/null
+++ b/src/assets/icons/infromation.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
+  <mask id="mask0_322_1691" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+    <rect width="20" height="20" fill="#D9D9D9"/>
+  </mask>
+  <g mask="url(#mask0_322_1691)">
+    <path d="M9.99563 14C10.2069 14 10.3854 13.9281 10.5312 13.7844C10.6771 13.6406 10.75 13.4625 10.75 13.25V9.75C10.75 9.5375 10.6785 9.35938 10.5356 9.21562C10.3927 9.07187 10.2156 9 10.0044 9C9.79313 9 9.61458 9.07187 9.46875 9.21562C9.32292 9.35938 9.25 9.5375 9.25 9.75V13.25C9.25 13.4625 9.32146 13.6406 9.46438 13.7844C9.60729 13.9281 9.78438 14 9.99563 14ZM9.99563 7.5C10.2069 7.5 10.3854 7.42854 10.5312 7.28563C10.6771 7.14271 10.75 6.96563 10.75 6.75438C10.75 6.54313 10.6785 6.36458 10.5356 6.21875C10.3927 6.07292 10.2156 6 10.0044 6C9.79313 6 9.61458 6.07146 9.46875 6.21437C9.32292 6.35729 9.25 6.53437 9.25 6.74562C9.25 6.95687 9.32146 7.13542 9.46438 7.28125C9.60729 7.42708 9.78438 7.5 9.99563 7.5ZM10.0058 18C8.90472 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.07292 16.3854 4.34375 15.6562C3.61458 14.9271 3.04167 14.0767 2.625 13.105C2.20833 12.1333 2 11.0951 2 9.99042C2 8.88569 2.20833 7.85069 2.625 6.88542C3.04167 5.92014 3.61458 5.07292 4.34375 4.34375C5.07292 3.61458 5.92333 3.04167 6.895 2.625C7.86667 2.20833 8.90486 2 10.0096 2C11.1143 2 12.1493 2.20833 13.1146 2.625C14.0799 3.04167 14.9271 3.61458 15.6562 4.34375C16.3854 5.07292 16.9583 5.92167 17.375 6.89C17.7917 7.85847 18 8.89319 18 9.99417C18 11.0953 17.7917 12.1319 17.375 13.1042C16.9583 14.0764 16.3854 14.9271 15.6562 15.6562C14.9271 16.3854 14.0783 16.9583 13.11 17.375C12.1415 17.7917 11.1068 18 10.0058 18Z" fill="currentColor"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/door.png b/src/assets/images/door.png
new file mode 100644
index 0000000..50a5056
Binary files /dev/null and b/src/assets/images/door.png differ
diff --git a/src/components/BackgroundBottom.tsx b/src/components/BackgroundBottom.tsx
index 1b8566a..88389fd 100644
--- a/src/components/BackgroundBottom.tsx
+++ b/src/components/BackgroundBottom.tsx
@@ -1,10 +1,13 @@
 import BgItem from '@/assets/images/field-4.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
+
 const BackgroundBottom = () => {
   return (
-    <div
-      className="background-image-filled fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
-      style={{ '--bg-image': `url(${BgItem})` } as React.CSSProperties}
+    <BackgroundImageWrapper
+      as="div"
+      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      imageUrl={BgItem}
     />
   );
 };
diff --git a/src/components/BackgroundImageWrapper.tsx b/src/components/BackgroundImageWrapper.tsx
new file mode 100644
index 0000000..330150c
--- /dev/null
+++ b/src/components/BackgroundImageWrapper.tsx
@@ -0,0 +1,29 @@
+import { twMerge } from 'tailwind-merge';
+
+interface BackgroundImageWrapperProps {
+  as?: React.ElementType;
+  imageUrl: string;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+const BackgroundImageWrapper = ({
+  as: Component = 'div',
+  imageUrl,
+  className,
+  children,
+  onClick,
+}: BackgroundImageWrapperProps) => {
+  return (
+    <Component
+      className={twMerge('background-image-filled', className)}
+      style={{ '--bg-image': `url(${imageUrl})` } as React.CSSProperties}
+      onClick={onClick}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default BackgroundImageWrapper;
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index 040f07b..f4a94f5 100644
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -1,5 +1,6 @@
 import ModalBg from '@/assets/images/modal-yellow.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
 import ModalOverlay from './ModalOverlay';
 
 interface ConfirmModalProps {
@@ -27,16 +28,13 @@ const ConfirmModal = ({
   return (
     <ModalOverlay>
       <div className="w-73">
-        <section
-          className="background-image-filled mb-12 rounded-lg p-5"
-          style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
-        >
+        <BackgroundImageWrapper as="section" className="mb-12 rounded-lg p-5" imageUrl={ModalBg}>
           <div className="flex flex-col gap-1">
             <p className="body-m text-gray-80">{title}</p>
             <p className="caption-r text-black">{description}</p>
           </div>
           {children}
-        </section>
+        </BackgroundImageWrapper>
         <section className="flex items-center gap-6">
           <button
             type="button"
diff --git a/src/components/ListItemWrapper.tsx b/src/components/ListItemWrapper.tsx
new file mode 100644
index 0000000..3bcb1d5
--- /dev/null
+++ b/src/components/ListItemWrapper.tsx
@@ -0,0 +1,31 @@
+import { twMerge } from 'tailwind-merge';
+
+interface ListItemWrapperProps {
+  isSender?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const ListItemWrapper = ({
+  isSender = false,
+  className,
+  children,
+  onClick,
+}: ListItemWrapperProps) => {
+  return (
+    <article
+      className={twMerge(
+        'relative flex overflow-hidden rounded-sm p-4',
+        isSender ? 'list-sender-bg' : 'list-receiver-bg',
+        className,
+      )}
+      onClick={onClick}
+    >
+      <div className="z-10 w-full">{children}</div>
+      <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
+    </article>
+  );
+};
+
+export default ListItemWrapper;
diff --git a/src/components/MessageModal.tsx b/src/components/MessageModal.tsx
index 7eda86f..414c20f 100644
--- a/src/components/MessageModal.tsx
+++ b/src/components/MessageModal.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 
 import ModalBg from '@/assets/images/modal-pink.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
 import ModalOverlay from './ModalOverlay';
 import TextareaField from './TextareaField';
 
@@ -30,11 +31,8 @@ const MessageModal = ({
 }: MessageModalProps) => {
   return (
     <ModalOverlay>
-      <p className="body-sb mb-4 text-white">{description}</p>
-      <section
-        className="background-image-filled mb-12 w-78 rounded-lg p-4"
-        style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
-      >
+      <p className="body-sb mb-4 text-center text-white">{description}</p>
+      <BackgroundImageWrapper as="section" className="mb-12 w-78 rounded-lg p-4" imageUrl={ModalBg}>
         <TextareaField
           rows={5}
           value={inputValue}
@@ -42,7 +40,7 @@ const MessageModal = ({
           onChange={onInputChange}
         />
         {children}
-      </section>
+      </BackgroundImageWrapper>
       <section className="flex items-center gap-6">
         <button
           type="button"
diff --git a/src/components/PageTitle.tsx b/src/components/PageTitle.tsx
index e58cb9c..ffdf2be 100644
--- a/src/components/PageTitle.tsx
+++ b/src/components/PageTitle.tsx
@@ -7,7 +7,7 @@ interface PageTitleProps {
 
 const PageTitle = ({ className, children }: PageTitleProps) => {
   return (
-    <h1 className={twMerge('text-gray-60 body-b rounded-full bg-white px-6 py-4', className)}>
+    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4', className)}>
       {children}
     </h1>
   );
diff --git a/src/components/TextareaField.tsx b/src/components/TextareaField.tsx
index deedc17..1268574 100644
--- a/src/components/TextareaField.tsx
+++ b/src/components/TextareaField.tsx
@@ -2,10 +2,12 @@ import { ComponentPropsWithoutRef } from 'react';
 
 const TextareaField = ({ ...props }: ComponentPropsWithoutRef<'textarea'>) => {
   return (
-    <textarea
-      className="body-m placeholder:text-gray-30 text-gray-80 w-full resize-none rounded-sm bg-white px-3 py-1.5"
-      {...props}
-    />
+    <div className="w-full rounded-sm bg-white px-3 py-1.5">
+      <textarea
+        className="body-m placeholder:text-gray-30 text-gray-80 w-full resize-none bg-transparent"
+        {...props}
+      />
+    </div>
   );
 };
 
diff --git a/src/pages/LetterBoard/components/LetterPreview.tsx b/src/pages/LetterBoard/components/LetterPreview.tsx
index fd7c973..d59a839 100644
--- a/src/pages/LetterBoard/components/LetterPreview.tsx
+++ b/src/pages/LetterBoard/components/LetterPreview.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router';
 
 import PinkLetterBg from '@/assets/images/letter-pink.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 
 interface LetterPreviewProps {
   id: string;
@@ -12,14 +13,15 @@ interface LetterPreviewProps {
 const LetterPreview = ({ id, to, from, content }: LetterPreviewProps) => {
   return (
     <Link to={id}>
-      <article
-        className="caption-r background-image-filled flex flex-col gap-2 rounded-sm px-3 py-2"
-        style={{ '--bg-image': `url(${PinkLetterBg})` } as React.CSSProperties}
+      <BackgroundImageWrapper
+        as="article"
+        className="caption-r flex flex-col gap-2 rounded-sm px-3 py-2"
+        imageUrl={PinkLetterBg}
       >
         <p>From.{from}</p>
         <p className="line-clamp-2 font-light">{content}</p>
         <p className="place-self-end">To.{to}</p>
-      </article>
+      </BackgroundImageWrapper>
     </Link>
   );
 };
diff --git a/src/pages/LetterBoardDetail/components/Letter.tsx b/src/pages/LetterBoardDetail/components/Letter.tsx
index f1960df..52b0989 100644
--- a/src/pages/LetterBoardDetail/components/Letter.tsx
+++ b/src/pages/LetterBoardDetail/components/Letter.tsx
@@ -1,5 +1,6 @@
 import PinkMemoBg from '@/assets/images/memo-pink.png';
 import YellowMemoBg from '@/assets/images/memo-yellow.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 
 interface LetterProps {
   letter: {
@@ -12,16 +13,15 @@ interface LetterProps {
 
 const Letter = ({ letter, isSender = false }: LetterProps) => {
   return (
-    <article
-      className="background-image-filled flex flex-col gap-2 p-4 text-black"
-      style={
-        { '--bg-image': `url(${isSender ? PinkMemoBg : YellowMemoBg})` } as React.CSSProperties
-      }
+    <BackgroundImageWrapper
+      as="article"
+      className="flex flex-col gap-2 p-4 text-black"
+      imageUrl={isSender ? PinkMemoBg : YellowMemoBg}
     >
       <p className="body-sb">To. {letter.receiver}</p>
       <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
       <p className="body-m place-self-end">From. {letter.sender}</p>
-    </article>
+    </BackgroundImageWrapper>
   );
 };
 
diff --git a/src/pages/LetterBox/components/LetterBoxItem.tsx b/src/pages/LetterBox/components/LetterBoxItem.tsx
new file mode 100644
index 0000000..f626837
--- /dev/null
+++ b/src/pages/LetterBox/components/LetterBoxItem.tsx
@@ -0,0 +1,55 @@
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+interface LetterBoxItemProps {
+  zipCode: string;
+  letterCount: number;
+  isChecked?: boolean;
+  isClosed?: boolean;
+}
+
+const LetterBoxItem = ({
+  zipCode,
+  letterCount,
+  isChecked = false,
+  isClosed = false,
+}: LetterBoxItemProps) => {
+  return (
+    <Link to="id">
+      <article className="flex h-fit w-fit flex-col items-center">
+        <div className="text-gray-70 flex h-25 w-20 flex-col gap-1.5 bg-linear-to-b from-[#D5B695] to-[#B3895D] p-1.5">
+          <p
+            className={twMerge(
+              'body-m from-white px-1',
+              isClosed
+                ? 'bg-[repeating-linear-gradient(#D9D9D9,#D9D9D9_17px,#C2C2C2_17px,#C2C2C2_23px)]'
+                : 'bg-linear-to-b',
+              isChecked ? 'to-[#FFF5ED]' : 'to-[#FFF4F2]',
+            )}
+          >
+            {zipCode}
+          </p>
+          {isClosed ? (
+            <div className="flex grow flex-col bg-[repeating-linear-gradient(#D9D9D9,#D9D9D9_15px,#C2C2C2_15px,#C2C2C2_20px)]" />
+          ) : (
+            <div
+              className={twMerge(
+                'flex grow flex-col bg-linear-to-b',
+                isChecked ? 'from-[#FFF7E3] to-[#FFE197]' : 'from-[#FFF4F2] to-[#FFE6E3]',
+              )}
+            >
+              <p className="body-r mt-auto mr-[1px] text-right">{letterCount}통</p>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="h-[7px] w-23 bg-[#D7A877]" />
+          <div className="h-[3px] w-20 bg-[#A88156]" />
+          <div className="h-1 w-18 bg-[#917B63]" />
+        </div>
+      </article>
+    </Link>
+  );
+};
+
+export default LetterBoxItem;
diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx
index 2244eb0..8f8d328 100644
--- a/src/pages/LetterBox/index.tsx
+++ b/src/pages/LetterBox/index.tsx
@@ -1,5 +1,45 @@
+import DoorImg from '@/assets/images/door.png';
+import PageTitle from '@/components/PageTitle';
+import { chunkBox } from '@/utils/chunkBox';
+
+import LetterBoxItem from './components/LetterBoxItem';
+
+const DUMMY_COUNT = 200;
+
 const LetterBoxPage = () => {
-  return <div>LetterBoxPage</div>;
+  return (
+    <main className="flex grow flex-col items-center px-5 pt-20">
+      <PageTitle>내 편지함</PageTitle>
+      <div className="w-full max-w-94">
+        <p className="body-sb mt-16 mb-[7px] place-self-start text-gray-50">
+          나와 연락한 사람들 {DUMMY_COUNT}
+        </p>
+        <section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
+          <div className="flex w-full flex-col gap-5">
+            {chunkBox(
+              Array.from({ length: 12 }).map((_, index) => (
+                <LetterBoxItem
+                  key={index}
+                  zipCode="12E12"
+                  letterCount={90}
+                  isChecked={index % 2 === 0}
+                />
+              )),
+            ).map((row, index) => (
+              <div key={index} className="flex justify-between">
+                {row}
+              </div>
+            ))}
+            <div className="flex justify-between">
+              <LetterBoxItem zipCode="12E12" letterCount={90} isClosed />
+              <img src={DoorImg} alt="출입문 이미지" />
+              <LetterBoxItem zipCode="12E12" letterCount={90} isClosed />
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
 };
 
 export default LetterBoxPage;
diff --git a/src/pages/LetterBoxDetail/components/InformationTooltip.tsx b/src/pages/LetterBoxDetail/components/InformationTooltip.tsx
new file mode 100644
index 0000000..eacfd3c
--- /dev/null
+++ b/src/pages/LetterBoxDetail/components/InformationTooltip.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { InformationIcon } from '@/assets/icons';
+const InformationTooltip = () => {
+  const [isShow, setIsShow] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsShow(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative flex items-center">
+      <button type="button" onClick={() => setIsShow((prev) => !prev)}>
+        <InformationIcon className="text-gray-40 h-5 w-5" />
+      </button>
+      <article
+        className={twMerge(
+          'bg-gray-5 absolute top-6 -right-1 z-20 w-75 rounded-md p-4 drop-shadow-sm transition-opacity duration-200',
+          isShow ? 'opacity-100' : 'pointer-events-none opacity-0',
+        )}
+      >
+        <p className="body-sb px-1">나만 보기 아까운 편지, 함께 나눠요!</p>
+        <hr className="text-gray-30 mt-1 mb-2" />
+        <p className="caption-m px-1">
+          주고받은 편지 중 감동적이거나 도움이 된 편지를 공유 게시판에 등록해 더 많은 사람들과
+          따뜻한 마음을 나눌 수 있어요.
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default InformationTooltip;
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
new file mode 100644
index 0000000..4dbf628
--- /dev/null
+++ b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
@@ -0,0 +1,53 @@
+import { Link } from 'react-router';
+
+import ListItemWrapper from '@/components/ListItemWrapper';
+
+interface LetterPreviewProps {
+  id: number;
+  date: string;
+  title: string;
+  isSend: boolean;
+  checked: boolean;
+  isShareMode?: boolean;
+  onToggle: () => void;
+}
+const LetterPreview = ({
+  id,
+  date,
+  title,
+  isSend,
+  checked,
+  isShareMode = false,
+  onToggle,
+}: LetterPreviewProps) => {
+  if (isShareMode)
+    return (
+      <ListItemWrapper isSender={isSend}>
+        <div className="mb-3 flex items-center justify-between">
+          <p className="body-r text-gray-80">{date}</p>
+          <label htmlFor={`${id}`} className="relative">
+            <input
+              id={`${id}`}
+              type="checkbox"
+              className="peer sr-only"
+              checked={checked}
+              onChange={onToggle}
+            />
+            <div className="peer-checked:bg-primary-1 h-5 w-5 rounded-sm border-3 border-white bg-white" />
+          </label>
+        </div>
+        <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
+      </ListItemWrapper>
+    );
+
+  return (
+    <Link to={`/letter/${id}`}>
+      <ListItemWrapper isSender={isSend}>
+        <p className="body-r text-gray-80 mb-3">{date}</p>
+        <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
+      </ListItemWrapper>
+    </Link>
+  );
+};
+
+export default LetterPreview;
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
new file mode 100644
index 0000000..d7c484b
--- /dev/null
+++ b/src/pages/LetterBoxDetail/index.tsx
@@ -0,0 +1,155 @@
+import { ChangeEvent, useState } from 'react';
+
+import ConfirmModal from '@/components/ConfirmModal';
+import MessageModal from '@/components/MessageModal';
+import PageTitle from '@/components/PageTitle';
+
+import InformationTooltip from './components/InformationTooltip';
+import LetterPreview from './components/LetterPreview';
+
+const DUMMY_ZIP_CODE = '12E12';
+const DUMMY_LETTER_LIST = [
+  {
+    id: 1,
+    date: '2025.01.01',
+    title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.',
+    isSend: false,
+  },
+  {
+    id: 2,
+    date: '2025.01.01',
+    title: '이건 보낸 편지입니다.',
+    isSend: true,
+  },
+  {
+    id: 3,
+    date: '2025.01.01',
+    title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.',
+    isSend: false,
+  },
+  {
+    id: 4,
+    date: '2025.01.01',
+    title: '이건 받은 편지 입니다.이건 받은 편지 입니다.이건 받은 편지 입니다.',
+    isSend: false,
+  },
+  {
+    id: 5,
+    date: '2025.01.01',
+    title: '이건 보낸 편지입니다.',
+    isSend: true,
+  },
+];
+
+const LetterBoxDetailPage = () => {
+  //const { id } = useParams();
+  const [isShareMode, setShareMode] = useState(false);
+  const [isOpenUnconnectModal, setIsOpenUnconnectModal] = useState(false);
+  const [isOpenShareModal, setIsOpenShareModal] = useState(false);
+  const [selected, setSelected] = useState<number[]>([]);
+  const [shareComment, setShareComment] = useState('');
+
+  const toggleShareMode = () => {
+    if (isShareMode) {
+      setSelected([]);
+    }
+    setShareMode((prev) => !prev);
+  };
+
+  const toggleSelected = (selectedId: number) => {
+    if (selected.includes(selectedId)) {
+      setSelected((prev) => prev.filter((id) => id !== selectedId));
+    } else {
+      setSelected((prev) => [...prev, selectedId]);
+    }
+  };
+
+  const handleChangeComment = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setShareComment(e.target.value);
+  };
+
+  return (
+    <>
+      {isOpenUnconnectModal && (
+        <ConfirmModal
+          title={`정말 ${DUMMY_ZIP_CODE}님과 편지를 그만하시겠어요?`}
+          description="한 번 연결을 끊으면 다시 연결할 수 없어요!"
+          cancelText="되돌아가기"
+          confirmText="편지 그만하기"
+          onCancel={() => setIsOpenUnconnectModal(false)}
+          onConfirm={() => setIsOpenUnconnectModal(false)}
+        />
+      )}
+      {isOpenShareModal && (
+        <MessageModal
+          description="공유하는 편지에 대한 설명을 적어주세요!"
+          placeholder="이곳을 눌러 설명을 작성해주세요"
+          cancelText="취소하기"
+          completeText="동의 요청 보내기"
+          inputValue={shareComment}
+          onInputChange={handleChangeComment}
+          onCancel={() => setIsOpenShareModal(false)}
+          onComplete={() => {
+            setIsOpenShareModal(false);
+            toggleShareMode();
+          }}
+        >
+          <p className="text-gray-70 body-m mt-1">상대방 동의 후에 게시글이 업로드 됩니다.</p>
+        </MessageModal>
+      )}
+      <main className="flex grow flex-col px-5 pt-20 pb-10">
+        <PageTitle className="mx-auto">
+          {isShareMode
+            ? '게시판에 올릴 편지를 선택해주세요'
+            : `${DUMMY_ZIP_CODE}님과 주고 받은 편지`}
+        </PageTitle>
+        <section className="text-gray-60 body-sb mt-18 mb-2 flex w-full justify-between">
+          <p>주고 받은 편지 {DUMMY_LETTER_LIST.length}</p>
+          <div className="flex items-center gap-0.5 underline">
+            <button type="button" onClick={toggleShareMode}>
+              {isShareMode ? '취소하기' : '편지 공유하기'}
+            </button>
+            {!isShareMode && <InformationTooltip />}
+          </div>
+        </section>
+        <section className="mb-5 flex flex-col gap-4">
+          {DUMMY_LETTER_LIST.map((letter) => (
+            <LetterPreview
+              key={letter.id}
+              id={letter.id}
+              date={letter.date}
+              title={letter.title}
+              isSend={letter.isSend}
+              checked={selected.includes(letter.id)}
+              isShareMode={isShareMode}
+              onToggle={() => toggleSelected(letter.id)}
+            />
+          ))}
+        </section>
+        {!isShareMode && (
+          <button
+            type="button"
+            className="body-sb text-gray-60 mt-auto text-left underline"
+            onClick={() => setIsOpenUnconnectModal(true)}
+          >
+            더 이상 편지하지 않을래요
+          </button>
+        )}
+      </main>
+      {isShareMode && (
+        <div className="left-1/2-translate-x-1/2 fixed bottom-10 z-20 w-full max-w-150 px-5">
+          <button
+            type="button"
+            className="body-m primary-btn w-full py-2 text-black"
+            disabled={selected.length === 0}
+            onClick={() => setIsOpenShareModal(true)}
+          >
+            다음으로
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default LetterBoxDetailPage;
diff --git a/src/pages/Notifications/components/NotificationItem.tsx b/src/pages/Notifications/components/NotificationItem.tsx
index bd423fb..b65523a 100644
--- a/src/pages/Notifications/components/NotificationItem.tsx
+++ b/src/pages/Notifications/components/NotificationItem.tsx
@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge';
+import ListItemWrapper from '@/components/ListItemWrapper';
 
 import { NOTIFICATION_ICON } from '../constants';
 
@@ -18,18 +18,13 @@ const NotificationItem = ({ type, message, isRead, onClick }: NotificationItemPr
   };
 
   return (
-    <article
-      className={twMerge(
-        'relative flex cursor-pointer items-center gap-3 overflow-hidden rounded-sm p-4',
-        type === 'warning' ? 'alarm-warning-bg' : 'alarm-default-bg',
-      )}
-      onClick={handleClick}
-    >
-      {isRead && <div className="absolute inset-0 z-10 bg-white/60" />}
-      <div className="absolute inset-0 bg-white/50 blur-xl" />
-      <Icon className="z-0 h-6 w-6 text-white" />
-      <p className="body-m text-gray-80 z-0">{message}</p>
-    </article>
+    <ListItemWrapper isSender={type === 'warning'} onClick={handleClick}>
+      <div className="flex items-center gap-3">
+        {isRead && <div className="absolute inset-0 z-10 bg-white/60" />}
+        <Icon className="z-0 h-6 w-6 text-white" />
+        <p className="body-m text-gray-80 z-0">{message}</p>
+      </div>
+    </ListItemWrapper>
   );
 };
 
diff --git a/src/pages/Notifications/index.tsx b/src/pages/Notifications/index.tsx
index 50aef8b..bef3d9c 100644
--- a/src/pages/Notifications/index.tsx
+++ b/src/pages/Notifications/index.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 
+import PageTitle from '@/components/PageTitle';
+
 import NotificationItem from './components/NotificationItem';
 import WarningModal from './components/WarningModal';
 
@@ -31,7 +33,7 @@ const NotificationsPage = () => {
     <>
       <WarningModal isOpen={isOpenWarningModal} onClose={() => setIsOpenWarningModal(false)} />
       <main className="flex grow flex-col items-center px-5 pt-20 pb-9">
-        <h1 className="text-gray-60 body-b mb-10 w-fit rounded-full bg-white px-6 py-4">알림</h1>
+        <PageTitle className="mb-10">알림</PageTitle>
         <button type="button" className="body-sb text-gray-60 place-self-end">
           모두 읽음
         </button>
diff --git a/src/pages/RollingPaper/components/Message.tsx b/src/pages/RollingPaper/components/Message.tsx
index 54254bb..8e3bc81 100644
--- a/src/pages/RollingPaper/components/Message.tsx
+++ b/src/pages/RollingPaper/components/Message.tsx
@@ -1,4 +1,5 @@
 import MessageBg from '@/assets/images/memo-pink.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 
 interface MessageProps {
   message: {
@@ -10,14 +11,15 @@ interface MessageProps {
 
 const Message = ({ message, onClick }: MessageProps) => {
   return (
-    <article
-      className="background-image-filled flex min-h-20 cursor-pointer flex-col p-4 text-black"
-      style={{ '--bg-image': `url(${MessageBg})` } as React.CSSProperties}
+    <BackgroundImageWrapper
+      as="article"
+      className="flex min-h-20 cursor-pointer flex-col p-4 text-black"
+      imageUrl={MessageBg}
       onClick={onClick}
     >
       <p className="caption-r whitespace-pre-wrap">{message.content}</p>
       <p className="caption-m mt-1 place-self-end">From. {message.sender}</p>
-    </article>
+    </BackgroundImageWrapper>
   );
 };
 
diff --git a/src/pages/RollingPaper/components/MessageDetailModal.tsx b/src/pages/RollingPaper/components/MessageDetailModal.tsx
index fd07845..1d1508f 100644
--- a/src/pages/RollingPaper/components/MessageDetailModal.tsx
+++ b/src/pages/RollingPaper/components/MessageDetailModal.tsx
@@ -1,4 +1,5 @@
 import ModalBg from '@/assets/images/memo-pink.png';
+import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
 interface MessageDetailModalProps {
@@ -34,13 +35,14 @@ const MessageDetailModal = ({
         <button type="button" className="body-b ml-auto text-white" onClick={handleButtonClick}>
           {isWriter ? '삭제하기' : '신고하기'}
         </button>
-        <article
-          className="background-image-filled mt-1 flex max-h-1/2 w-78 flex-col gap-3 overflow-y-auto px-5 py-4 text-black"
-          style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
+        <BackgroundImageWrapper
+          as="article"
+          className="mt-1 flex max-h-1/2 w-78 flex-col gap-3 overflow-y-auto px-5 py-4 text-black"
+          imageUrl={ModalBg}
         >
           <p className="body-r leading-[26px]">{message.content}</p>
           <p className="body-m place-self-end">From. {message.sender}</p>
-        </article>
+        </BackgroundImageWrapper>
       </>
     </ModalOverlay>
   );
diff --git a/src/styles/components.css b/src/styles/components.css
index 274b90f..bd4041c 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -9,17 +9,24 @@
     @apply bg-primary-4 rounded-lg text-gray-50;
   }
 
-  .alarm-default-bg {
+  .list-receiver-bg {
     background:
       url('/src/assets/images/background-overlay.png') repeat,
       linear-gradient(180deg, #ffb5ac 0%, #ffc1ba 28%, #ffd3ce 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
-  .alarm-warning-bg {
+  .list-sender-bg {
     background:
       url('/src/assets/images/background-overlay.png') repeat,
       linear-gradient(180deg, #fad446 0%, #f8de8c 28%, #ffeab8 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
+
+  .letter-box-bg {
+    background:
+      url('/src/assets/images/background-overlay.png') repeat,
+      linear-gradient(180deg, #ffedae 0%, #eec297 100%);
+    background-blend-mode: overlay, normal;
+  }
 }
diff --git a/src/styles/preflight.css b/src/styles/preflight.css
index c81f13f..230cfc6 100644
--- a/src/styles/preflight.css
+++ b/src/styles/preflight.css
@@ -43,4 +43,8 @@
   button {
     cursor: pointer;
   }
+
+  *:focus {
+    outline: none;
+  }
 }
diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/utils/chunkBox.ts b/src/utils/chunkBox.ts
new file mode 100644
index 0000000..e56a4dc
--- /dev/null
+++ b/src/utils/chunkBox.ts
@@ -0,0 +1,9 @@
+export const chunkBox = (array: Array<React.JSX.Element>, size = 3) => {
+  const chunkedArray = [];
+
+  for (let i = 0; i < array.length; i += size) {
+    chunkedArray.push(array.slice(i, i + size));
+  }
+
+  return chunkedArray;
+};