diff --git a/src/pages/Home/components/GoToLetterBoard.tsx b/src/pages/Home/components/GoToLetterBoard.tsx
index 41d54cb..329307b 100644
--- a/src/pages/Home/components/GoToLetterBoard.tsx
+++ b/src/pages/Home/components/GoToLetterBoard.tsx
@@ -6,7 +6,7 @@ const GoToLetterBoard = () => {
     <div className="absolute bottom-48 left-[calc(var(--vh)*36)] z-9 flex w-full">
       <div className="text-left">
         <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
-        <Link to="/letter/board">
+        <Link to="/board/letter">
           <img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
         </Link>
       </div>
diff --git a/src/pages/Home/components/RandomCheer.tsx b/src/pages/Home/components/RandomCheer.tsx
index 758ff82..d0c4668 100644
--- a/src/pages/Home/components/RandomCheer.tsx
+++ b/src/pages/Home/components/RandomCheer.tsx
@@ -11,7 +11,7 @@ const RandomCheer = () => {
   const [randomCheer, setRandomCheer] = useState(getRandomCheer());
 
   return (
-    <div className="flex flex-col items-end pr-20">
+    <div className="z-30 flex flex-col items-end pr-20">
       <div
         className="relative mb-3 w-fit rounded-lg border-1 border-white bg-white px-6 py-[7px] text-center"
         onClick={() => setRandomCheer(getRandomCheer())}
diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
index 0c86e2b..504a460 100644
--- a/src/pages/Home/components/ShowShareAccessModal.tsx
+++ b/src/pages/Home/components/ShowShareAccessModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ModalBg from '@/assets/images/modal-yellow.png';
 import ModalOverlay from '@/components/ModalOverlay';
+import { useNavigate } from 'react-router';
 
 interface ShowShareAccessModalProps {
   children?: React.ReactNode;
@@ -15,6 +16,13 @@ const DUMMY_SHARE_ACCESS = [
 ];
 
 const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
+  const navigate = useNavigate();
+
+  const handleNavigation = (accessId: number) => {
+    navigate(`/board/letter/${accessId}`, {
+      state: { isShareLetterPreview: true },
+    });
+  };
   return (
     <ModalOverlay closeOnOutsideClick onClose={onClose}>
       <div className="flex h-full flex-col items-center justify-center">
@@ -33,13 +41,13 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
             </div>
             <div className="mt-6 flex w-[251px] flex-col gap-[10px]">
               {DUMMY_SHARE_ACCESS.map((access) => (
-                <div
+                <button
                   className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  // onClick={openLetterPreview}
                   key={access.id}
+                  onClick={() => handleNavigation(access.id)}
                 >
                   <p>{access.zip_code}님의 공유 요청</p>
-                </div>
+                </button>
               ))}
             </div>
           </section>
diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx
index f2a791f..f1e15f9 100644
--- a/src/pages/LetterBoardDetail/components/Header.tsx
+++ b/src/pages/LetterBoardDetail/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 
 import {
   ArrowLeftIcon,
@@ -14,34 +14,53 @@ interface HeaderProps {
   isWriter: boolean;
   onToggleLike: () => void;
   onOpenReportModal: () => void;
+  isShareLetterPreview?: boolean;
 }
 
-const Header = ({ likeCount, isLike, isWriter, onToggleLike, onOpenReportModal }: HeaderProps) => {
+const Header = ({
+  likeCount,
+  isLike,
+  isWriter,
+  onToggleLike,
+  onOpenReportModal,
+  isShareLetterPreview = false,
+}: HeaderProps) => {
+  const navigate = useNavigate();
+
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
-        <Link to="/board/letter">
-          <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
-        </Link>
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1">
-            <button type="button" onClick={onToggleLike}>
-              {isLike ? (
-                <LikeFilledIcon className="text-primary-1 h-6 w-6" />
-              ) : (
-                <LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
-              )}
-            </button>
-            <p className="body-l-m text-primary-1">{likeCount}</p>
+        {isShareLetterPreview ? (
+          <button onClick={() => navigate(-1)}>
+            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+          </button>
+        ) : (
+          <Link to="/board/letter">
+            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+          </Link>
+        )}
+
+        {!isShareLetterPreview && (
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
+              <button type="button" onClick={onToggleLike}>
+                {isLike ? (
+                  <LikeFilledIcon className="text-primary-1 h-6 w-6" />
+                ) : (
+                  <LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
+                )}
+              </button>
+              <p className="body-l-m text-primary-1">{likeCount}</p>
+            </div>
+            {isWriter ? (
+              <DeleteIcon className="text-primary-1 h-6 w-6" />
+            ) : (
+              <button type="button" onClick={onOpenReportModal}>
+                <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
+              </button>
+            )}
           </div>
-          {isWriter ? (
-            <DeleteIcon className="text-primary-1 h-6 w-6" />
-          ) : (
-            <button type="button" onClick={onOpenReportModal}>
-              <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
-            </button>
-          )}
-        </div>
+        )}
       </div>
       <div className="h-4 w-full bg-gradient-to-b from-white to-white/0" />
     </header>
diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx
index 2292ff9..35abe1c 100644
--- a/src/pages/LetterBoardDetail/index.tsx
+++ b/src/pages/LetterBoardDetail/index.tsx
@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import { useLocation } from 'react-router';
+
 import { twMerge } from 'tailwind-merge';
 
 import ReportModal from '@/components/ReportModal';
@@ -6,6 +8,7 @@ import ReportModal from '@/components/ReportModal';
 import Header from './components/Header';
 import Letter from './components/Letter';
 
+import BlurImg from '@/assets/images/landing-blur.png';
 const DUMMY_LETTER = {
   receiver: '12E21',
   content:
@@ -13,7 +16,18 @@ const DUMMY_LETTER = {
   sender: '12345',
 };
 
-const LetterBoardDetailPage = () => {
+interface ShareLetterPreviewProps {
+  confirmDisabled?: boolean;
+  children?: React.ReactNode;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+const LetterBoardDetailPage = ({
+  confirmDisabled,
+  onCancel,
+  onConfirm,
+}: ShareLetterPreviewProps) => {
   const [likeCount, setLikeCount] = useState(122);
   const [isLike, setIsLike] = useState(false);
   const isWriter = false;
@@ -24,6 +38,11 @@ const LetterBoardDetailPage = () => {
     setIsLike((prev) => !prev);
   };
 
+  const location = useLocation();
+
+  const isShareLetterPreview = location.state?.isShareLetterPreview || false; // state가 없다면 false로 기본값 설정
+  console.log(location);
+
   return (
     <>
       {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
@@ -34,6 +53,7 @@ const LetterBoardDetailPage = () => {
           isWriter={isWriter}
           onToggleLike={handleToggleLike}
           onOpenReportModal={() => setActiveReportModal(true)}
+          isShareLetterPreview={isShareLetterPreview}
         />
         <main className="px-5 pt-18 pb-3">
           <p className="body-b mb-6 px-5">FROM. 12E31</p>
@@ -56,6 +76,29 @@ const LetterBoardDetailPage = () => {
             <Letter letter={DUMMY_LETTER} isSender />
             <Letter letter={DUMMY_LETTER} />
           </section>
+
+          {isShareLetterPreview && (
+            <>
+              <img src={BlurImg} alt="landing blur" className="fixed bottom-0 w-screen" />
+              <section className="fixed bottom-[30px] left-1/2 flex w-73 translate-x-[-50%] gap-6">
+                <button
+                  type="button"
+                  className="body-m secondary-btn h-10 flex-1 basis-1/2"
+                  onClick={onCancel}
+                >
+                  거부하기
+                </button>
+                <button
+                  type="button"
+                  className="primary-btn body-m h-10 flex-1 basis-1/2"
+                  disabled={confirmDisabled}
+                  onClick={onConfirm}
+                >
+                  승인하기
+                </button>
+              </section>
+            </>
+          )}
         </main>
       </div>
     </>