diff --git a/index.html b/index.html
index 82594f4..2ba5f4b 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,11 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0 maximum-scale=1.0, 
+        user-scalable=0"
+        />
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-8Y5Z29FBSV"></script>
         <script>
diff --git a/package-lock.json b/package-lock.json
index 89ec146..f4a3eeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
                 "react-dom": "^18.2.0",
                 "react-icons": "^5.2.0",
                 "react-redux": "^9.1.2",
-                "react-router-dom": "^6.23.0",
+                "react-router-dom": "^6.23.1",
                 "styled-components": "^6.1.8",
                 "vite-tsconfig-paths": "^4.3.2"
             },
@@ -968,9 +968,9 @@
             }
         },
         "node_modules/@remix-run/router": {
-            "version": "1.16.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
-            "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+            "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
             "engines": {
                 "node": ">=14.0.0"
             }
@@ -3040,11 +3040,11 @@
             }
         },
         "node_modules/react-router": {
-            "version": "6.23.0",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
-            "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+            "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
             "dependencies": {
-                "@remix-run/router": "1.16.0"
+                "@remix-run/router": "1.16.1"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -3054,12 +3054,12 @@
             }
         },
         "node_modules/react-router-dom": {
-            "version": "6.23.0",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
-            "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+            "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
             "dependencies": {
-                "@remix-run/router": "1.16.0",
-                "react-router": "6.23.0"
+                "@remix-run/router": "1.16.1",
+                "react-router": "6.23.1"
             },
             "engines": {
                 "node": ">=14.0.0"
diff --git a/package.json b/package.json
index 441e282..d4cc63f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.0",
         "react-redux": "^9.1.2",
-        "react-router-dom": "^6.23.0",
+        "react-router-dom": "^6.23.1",
         "styled-components": "^6.1.8",
         "vite-plugin-html": "^3.2.2",
         "vite-tsconfig-paths": "^4.3.2"
diff --git a/src/assets/send.png b/src/assets/send.png
new file mode 100644
index 0000000..3df7510
Binary files /dev/null and b/src/assets/send.png differ
diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts
index 82479f5..87ce2b1 100644
--- a/src/components/display/Booth.styled.ts
+++ b/src/components/display/Booth.styled.ts
@@ -36,21 +36,3 @@ export const Index = styled.div`
     color: #fff;
     background-color: #9874ff;
 `;
-
-export const Heart = styled.div`
-    position: absolute;
-    right: 0;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #fff;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 5px;
-    font-size: 12px;
-    line-height: 8px;
-    color: #9874ff;
-`;
diff --git a/src/components/display/Booth.tsx b/src/components/display/Booth.tsx
index 70eb889..d5d87dc 100644
--- a/src/components/display/Booth.tsx
+++ b/src/components/display/Booth.tsx
@@ -1,33 +1,30 @@
-import { TiHeartFullOutline } from "react-icons/ti";
-
 import { Variants } from "framer-motion";
 
 import { Text } from "@/components/typography/Text";
 
-import { BoothList, BoothLink, Index, Heart } from "./Booth.styled";
+import { BoothList, BoothLink, Index } from "./Booth.styled";
+import { Heart } from "./Heart";
 
 interface IBooth {
     index: number;
     name: string;
-    heart: number;
+    num: number;
+    likable: boolean;
 }
 const itemVariants: Variants = {
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 },
 };
 
-export const Booth: React.FC<IBooth> = ({ index, name, heart }) => {
+export const Booth: React.FC<IBooth> = ({ index, name, num, likable }) => {
     return (
         <BoothList variants={itemVariants}>
-            <BoothLink href="#">
+            <BoothLink href={`booth/${index + 1}`}>
                 <Index>{index + 1}</Index>
                 <Text size="m" weight="bold" variant="#5D5A88">
                     {name}
                 </Text>
-                <Heart>
-                    <TiHeartFullOutline size={24} />
-                    {heart}
-                </Heart>
+                <Heart num={num} likable={likable} />
             </BoothLink>
         </BoothList>
     );
diff --git a/src/components/display/BoothInfo.styled.ts b/src/components/display/BoothInfo.styled.ts
new file mode 100644
index 0000000..0c2621d
--- /dev/null
+++ b/src/components/display/BoothInfo.styled.ts
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const ImgWrapper = styled.div`
+    overflow: hidden;
+    width: 90%;
+    aspect-ratio: 1 / 1;
+    border-radius: 20px;
+    margin-bottom: 30px;
+`;
+
+export const BoothImg = styled.img`
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+`;
+
+export const InfoWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    width: 90%;
+`;
+
+export const BoothName = styled.div`
+    background-color: #e7e6f2;
+    border-radius: 20px;
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-grow: 3;
+    div {
+        position: absolute;
+        right: 10px;
+    }
+`;
+
+export const BoothDetail = styled.div`
+    padding: 0px 10px;
+    hr {
+        margin: 38px 0px;
+        border: 1px solid #dddddd;
+    }
+`;
diff --git a/src/components/display/BoothInfo.tsx b/src/components/display/BoothInfo.tsx
new file mode 100644
index 0000000..ad83c27
--- /dev/null
+++ b/src/components/display/BoothInfo.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import mainPageImage from "@/assets/main_page.jpg";
+
+import { Text } from "../typography/Text";
+import { BoothDetail, BoothImg, BoothName, ImgWrapper, InfoWrapper } from "./BoothInfo.styled";
+import { Heart } from "./Heart";
+
+//zustand 로 refactor 필요
+const BoothInfo: React.FC = () => {
+    const boothdetail =
+        "멋쟁이사자처럼 주점에서는 노래방 마이크로 김대건이 노래를 하고 춤도 추고 히어로 서사에 대해 설명할 것입니다.";
+    const boothName = "멋쟁이 사자처럼 주점";
+    const num = 365;
+
+    return (
+        <>
+            <ImgWrapper>
+                <BoothImg src={mainPageImage} />
+            </ImgWrapper>
+            <InfoWrapper>
+                <BoothName>
+                    <Text size="20px" weight="bold" variant="#3F3A6C">
+                        {boothName}
+                    </Text>
+                    <Heart num={num} likable={true} />
+                </BoothName>
+                <BoothDetail>
+                    <Text size="s" weight="normal">
+                        {boothdetail}
+                    </Text>
+                    <hr />
+                </BoothDetail>
+            </InfoWrapper>
+        </>
+    );
+};
+
+export default BoothInfo;
diff --git a/src/components/display/Comment.styled.ts b/src/components/display/Comment.styled.ts
new file mode 100644
index 0000000..e06dbaa
--- /dev/null
+++ b/src/components/display/Comment.styled.ts
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const CommentContent = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    p {
+        display: flex;
+    }
+`;
+
+export const CommentInfoWrapper = styled.div`
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+`;
diff --git a/src/components/display/Comment.tsx b/src/components/display/Comment.tsx
new file mode 100644
index 0000000..aa9436d
--- /dev/null
+++ b/src/components/display/Comment.tsx
@@ -0,0 +1,31 @@
+import { FaRegTrashAlt } from "react-icons/fa";
+
+import { Paragraph } from "../typography/Paragraph";
+import { Text } from "../typography/Text";
+import { CommentContent, CommentInfoWrapper } from "./Comment.styled";
+import { IComment } from "./CommentInfo";
+
+//zustand로 refactor 필요
+
+const Comment = ({ name, time, content, deletable }: IComment) => {
+    return (
+        <>
+            <CommentContent>
+                <Text size="m" weight="bold" variant="#3F3A6C">
+                    <CommentInfoWrapper>
+                        {name}
+                        <Text size="xs" weight="normal" variant="#A3A3A3">
+                            {time}
+                        </Text>
+                    </CommentInfoWrapper>
+                </Text>
+                {deletable ? <FaRegTrashAlt color="#3F3A6C" size={"24px"} /> : null}
+            </CommentContent>
+            <Paragraph size="s" weight="normal">
+                {content}
+            </Paragraph>
+        </>
+    );
+};
+
+export default Comment;
diff --git a/src/components/display/CommentInfo.styled.ts b/src/components/display/CommentInfo.styled.ts
new file mode 100644
index 0000000..f68ad31
--- /dev/null
+++ b/src/components/display/CommentInfo.styled.ts
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const CommentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    gap: 40px;
+`;
+export const Title = styled.div`
+    display: flex;
+    gap: 4px;
+    align-items: flex-end;
+`;
+export const CommentList = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 95%;
+    div > hr {
+        margin-top: 38px;
+        border: 1px solid #dddddd;
+    }
+`;
+
+export const CommentContainer = styled.div``;
diff --git a/src/components/display/CommentInfo.tsx b/src/components/display/CommentInfo.tsx
new file mode 100644
index 0000000..da10f62
--- /dev/null
+++ b/src/components/display/CommentInfo.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+
+import { Pagination } from "@/components/navigation/Pagination";
+
+import { Text } from "../typography/Text";
+import Comment from "./Comment";
+import { CommentList, CommentWrapper, CommentContainer, Title } from "./CommentInfo.styled";
+
+export interface IComment {
+    name: string;
+    time: string;
+    content: string;
+    deletable: boolean;
+}
+
+const CommentInfo: React.FC = () => {
+    const [commentnum] = useState<number>(221);
+
+    const comments: IComment[] = [
+        { name: "User1", time: "2024-05-13", content: "첫 번째 댓글입니다.", deletable: false },
+        { name: "User2", time: "2024-05-14", content: "두 번째 댓글입니다.", deletable: true },
+        { name: "User3", time: "2024-05-15", content: "세 번째 댓글입니다.", deletable: false },
+    ];
+
+    return (
+        <CommentWrapper>
+            <Text size="20px" weight="bold">
+                <Title>
+                    댓글
+                    <Text size="m" weight="bold" variant="#3F3A6C">
+                        {commentnum}
+                    </Text>
+                </Title>
+            </Text>
+            <CommentList>
+                {comments.map((comment, index) => (
+                    <div>
+                        <CommentContainer>
+                            <Comment
+                                key={index}
+                                name={comment.name}
+                                time={comment.time}
+                                content={comment.content}
+                                deletable={comment.deletable}
+                            />
+                        </CommentContainer>
+                        <hr />
+                    </div>
+                ))}
+            </CommentList>
+            <Pagination />
+        </CommentWrapper>
+    );
+};
+
+export default CommentInfo;
diff --git a/src/components/display/Heart.styled.ts b/src/components/display/Heart.styled.ts
new file mode 100644
index 0000000..2e88d79
--- /dev/null
+++ b/src/components/display/Heart.styled.ts
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+interface IHeart {
+    likable: boolean;
+}
+export const HeartWrapper = styled.div<IHeart>`
+    position: absolute;
+    right: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #fff;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    font-size: 12px;
+    line-height: 8px;
+    color: ${(props) => (props.likable ? "#9874FF" : "#A4A4A4")};
+`;
diff --git a/src/components/display/Heart.tsx b/src/components/display/Heart.tsx
new file mode 100644
index 0000000..ffcd35e
--- /dev/null
+++ b/src/components/display/Heart.tsx
@@ -0,0 +1,17 @@
+import { TiHeartFullOutline } from "react-icons/ti";
+
+import { HeartWrapper } from "./Heart.styled";
+
+export interface IHeart {
+    num: number;
+    likable: boolean;
+}
+
+export const Heart: React.FC<IHeart> = ({ num, likable }) => {
+    return (
+        <HeartWrapper likable={likable}>
+            <TiHeartFullOutline size={24} />
+            {num}
+        </HeartWrapper>
+    );
+};
diff --git a/src/components/display/Pagenation.styled.ts b/src/components/display/Pagenation.styled.ts
new file mode 100644
index 0000000..df24f0e
--- /dev/null
+++ b/src/components/display/Pagenation.styled.ts
@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const ButtonWrapper = styled.div``;
diff --git a/src/components/display/Pagenation.tsx b/src/components/display/Pagenation.tsx
new file mode 100644
index 0000000..23f826b
--- /dev/null
+++ b/src/components/display/Pagenation.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+import { ButtonWrapper } from "./Pagenation.styled";
+
+const Pagenation = () => {
+    const [pagenum] = useState<number>(5);
+
+    const pageNumbers = Array.from(Array(pagenum).keys());
+
+    return (
+        <>
+            <div>left</div>
+            <ButtonWrapper>
+                {pageNumbers.map((pageNumber) => (
+                    <button key={pageNumber}>{pageNumber + 1}</button>
+                ))}
+            </ButtonWrapper>
+            <div>right</div>
+        </>
+    );
+};
+
+export default Pagenation;
diff --git a/src/pages/BoothDetailPage.styled.tsx b/src/pages/BoothDetailPage.styled.tsx
index e69de29..2b7a13f 100644
--- a/src/pages/BoothDetailPage.styled.tsx
+++ b/src/pages/BoothDetailPage.styled.tsx
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+export interface ISendImg {
+    src: string;
+}
+
+export const DetailPageWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+export const BottomBox = styled.div`
+    height: 70px;
+    width: 90%;
+    position: fixed;
+    display: flex;
+    bottom: 0;
+    background-color: #fff;
+    align-items: center;
+    justify-content: center;
+`;
+export const ContentContainer = styled.form`
+    height: 46px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    border: 1px solid #3f3a6c;
+    border-radius: 30px;
+
+    textarea {
+        color: #5d5a88;
+        border: none;
+        padding: 0px 25px;
+        padding-right: 0;
+        width: 80%;
+        height: 50%;
+        background: none;
+        font-size: 14px;
+        align-content: center;
+        resize: none;
+        -ms-overflow-style: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        &:focus {
+            outline: none;
+        }
+        &::placeholder {
+            color: #5d5a88;
+        }
+    }
+`;
+
+export const SubBtn = styled.button`
+    display: flex;
+    width: 30px;
+    height: 30px;
+    border: none;
+    background-color: #e7e6f2;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 10px;
+`;
+
+export const SendImg = styled.img``;
diff --git a/src/pages/BoothDetailPage.tsx b/src/pages/BoothDetailPage.tsx
index ebf6508..985c4f5 100644
--- a/src/pages/BoothDetailPage.tsx
+++ b/src/pages/BoothDetailPage.tsx
@@ -1,3 +1,23 @@
+import BoothInfo from "@/components/display/BoothInfo";
+import CommentInfo from "@/components/display/CommentInfo";
+
+import { DetailPageWrapper, SubBtn, ContentContainer, SendImg, BottomBox } from "@/pages/BoothDetailPage.styled";
+
+import sendImg from "@/assets/send.png";
+
 export default function BoothDetailPage() {
-    return <></>;
+    return (
+        <DetailPageWrapper>
+            <BoothInfo />
+            <CommentInfo />
+            <BottomBox>
+                <ContentContainer>
+                    <textarea placeholder="댓글을 입력해주세요." rows={1}></textarea>
+                    <SubBtn type="submit">
+                        <SendImg src={sendImg} />
+                    </SubBtn>
+                </ContentContainer>
+            </BottomBox>
+        </DetailPageWrapper>
+    );
 }
diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx
index 7a18a6b..2de7db6 100644
--- a/src/pages/BoothListPage.tsx
+++ b/src/pages/BoothListPage.tsx
@@ -24,7 +24,7 @@ const listVariants: Variants = {
 
 const BoothListPage: React.FC = () => {
     const lists = ["컴퓨터학부 주점이름", "전자 주점이름", "토목 주점이름", "기계 주점이름", "식품공학부 주점이름"];
-    const heart = 356;
+    const num = 356;
     //list랑 index, heart는 받아온 값으로 수정
 
     const { visitorId } = useVisitor();
@@ -35,7 +35,7 @@ const BoothListPage: React.FC = () => {
                 {/*<Map />*/}
                 <VisibleList variants={listVariants} initial="hidden" animate="visible">
                     {lists.map((name, index) => {
-                        return <Booth index={index} name={name} heart={heart} />;
+                        return <Booth index={index} name={name} num={num} likable={true} />;
                     })}
                 </VisibleList>
                 <p>{visitorId}</p>
