diff --git a/src/components/advertisement-detail/AdvAnalysis.tsx b/src/components/advertisement-detail/AdvAnalysis.tsx
index 9834590..8028c4b 100644
--- a/src/components/advertisement-detail/AdvAnalysis.tsx
+++ b/src/components/advertisement-detail/AdvAnalysis.tsx
@@ -1,32 +1,44 @@
 import styled from 'styled-components';
 
-export const AdvAnalysis = () => {
+export type AdvAnalysisProps = {
+  moodInfo: string[];
+  objectInfo: string[];
+  personInfo: string[];
+};
+
+export const AdvAnalysis = ({ data }: { data: AdvAnalysisProps }) => {
   return (
     <AdvAnalysisContainer>
       <div className="video-analysis">
         <RowBox>
           <div className="an-title">영상분위기</div>
-          <div className="an-content">#활기찬 #역동적인</div>
+
+          <div className="an-content">
+            {data?.moodInfo.map((item, idx) => <div key={idx}>#{item}</div>)}
+          </div>
         </RowBox>
         <div>
           <div className="an-title">영상 분석</div>
           <SecondBox>
             <div className="second-content">
               <div className="an-subtitle">인물</div>
-              <div className="an-content">#주현영</div>
+              <div className="an-content">
+                {data?.personInfo.map((item, idx) => (
+                  <div key={idx}>#{item}</div>
+                ))}
+              </div>
             </div>
             <div className="second-content">
               <div className="an-subtitle">사물</div>
-              <div className="an-content">#떡볶이 #그릇</div>
+              <div className="an-content">
+                {data?.objectInfo.map((item, idx) => (
+                  <div key={idx}>#{item}</div>
+                ))}
+              </div>
             </div>
           </SecondBox>
         </div>
-        <RowBox>
-          <div className="an-title">표정 분석</div>
-          <div className="an-content">#활기찬 #역동적인</div>
-        </RowBox>
       </div>
-      <div>그래픽 비율 및 차트</div>
     </AdvAnalysisContainer>
   );
 };
diff --git a/src/components/advertisement-detail/AdvExpression.tsx b/src/components/advertisement-detail/AdvExpression.tsx
new file mode 100644
index 0000000..0a021fc
--- /dev/null
+++ b/src/components/advertisement-detail/AdvExpression.tsx
@@ -0,0 +1,111 @@
+import styled from 'styled-components';
+import { RowBox } from './AdvAnalysis';
+import { useEffect, useState } from 'react';
+
+export type ExpressionProps = {
+  expressionList: expressionListType[];
+  sectionList: sectionListType[];
+};
+
+export type expressionListType = {
+  expression: string;
+  percentage: number;
+};
+
+export type sectionListType = {
+  expressionType: string;
+  endTime: number;
+  startTime: number;
+};
+
+export const AdvExpression = ({ data }: { data: ExpressionProps }) => {
+  console.log('exdata:', data);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [expressionTag, setExpressionTag] = useState<string[]>(
+    data?.expressionList.map((item) => item.expression)
+  );
+
+  const [highestPercentageExpression, setHighestPercentageExpression] =
+    useState<string>('');
+
+  useEffect(() => {
+    if (data.expressionList.length > 0) {
+      let highestPercentage = 0;
+      let highestPercentageExpression = '';
+
+      data.expressionList.forEach((item) => {
+        if (item.percentage > highestPercentage) {
+          highestPercentage = item.percentage;
+          highestPercentageExpression = item.expression;
+        }
+      });
+
+      setHighestPercentageExpression(highestPercentageExpression);
+    }
+  }, [data.expressionList]);
+
+  console.log(highestPercentageExpression);
+
+  return (
+    <AdvExpressionContainer>
+      <RowBox>
+        <div className="an-title">표정 분석</div>
+        <div className="an-content">
+          {expressionTag.map((item, idx) => (
+            <div key={idx}>#{item}</div>
+          ))}
+        </div>
+      </RowBox>
+      <p>
+        이 광고에서는 <span>{highestPercentageExpression}</span> 표정이 제일
+        많아요.
+      </p>
+
+      <div>이모지 그래픽</div>
+      <div>차트</div>
+    </AdvExpressionContainer>
+  );
+};
+
+export const AdvExpressionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 35px;
+
+  p {
+    margin-top: 5px;
+    color: ${(props) => props.theme.gray_02};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.28px;
+
+    span {
+      color: ${(props) => props.theme.red_01};
+      font-weight: 600;
+    }
+  }
+
+  .an-title {
+    color: ${(props) => props.theme.gray_01};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 180%;
+    letter-spacing: -0.32px;
+  }
+
+  .an-content {
+    color: ${(props) => props.theme.red_01};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.28px;
+    //
+    display: flex;
+    gap: 13px;
+  }
+`;
diff --git a/src/components/advertisement-detail/AdvInfo.tsx b/src/components/advertisement-detail/AdvInfo.tsx
index 619c3b7..84d8e12 100644
--- a/src/components/advertisement-detail/AdvInfo.tsx
+++ b/src/components/advertisement-detail/AdvInfo.tsx
@@ -1,39 +1,48 @@
 import styled from 'styled-components';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-// import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
 
-export const AdvInfo = () => {
+export type AdvInfoProps = {
+  advertiser: string;
+  agency: string;
+  isArchived: boolean;
+  manufacturer: string;
+  videoUrl: string;
+  title: string;
+  createdAt: string;
+};
+
+export const AdvInfo = ({ data }: { data: AdvInfoProps }) => {
   return (
     <AdvInfoContainer>
-      {/* <VideoImg src={} alt="" /> */}
+      <VideoImg src={data?.videoUrl} alt="" />
       <TextContainer>
         <div className="title-line">
-          <div className="title">title</div>
-          <span>
-            <BookmarkBorderIcon />
-            {/* {isArchived ? (
+          <div className="title">{data?.title}</div>
+          <div>
+            {data?.isArchived ? (
               <BookmarkIcon />
             ) : (
               <BookmarkBorderIcon
               // onClick={handleScrappedClick}
               // className="fill-gray-60 mr-[20px]"
               />
-            )} */}
-          </span>
+            )}
+          </div>
         </div>
-        <p>date</p>
+        <p>{data?.createdAt}</p>
         <div className="adv-info">
-          <div>
+          <div className="adv-item">
             <p>광고주</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.advertiser}</span>
           </div>
-          <div>
+          <div className="adv-item">
             <p>광고회사</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.agency}</span>
           </div>
-          <div>
+          <div className="adv-item">
             <p>제작사</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.manufacturer}</span>
           </div>
         </div>
       </TextContainer>
@@ -44,7 +53,7 @@ export const AdvInfo = () => {
 export const AdvInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 20px;
 `;
 
 export const TextContainer = styled.div`
@@ -61,24 +70,40 @@ export const TextContainer = styled.div`
     margin: 3px 0px;
   }
 
-  .title {
-    color: ${(props) => props.theme.gray_01};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    letter-spacing: -0.4px;
+  .title-line {
+    display: flex;
+    justify-content: space-between;
+
+    svg {
+      font-size: 30px;
+      fill: ${(props) => props.theme.gray_02};
+    }
+
+    .title {
+      color: ${(props) => props.theme.gray_01};
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: -0.4px;
+    }
   }
 
   .adv-info {
     display: flex;
-    gap: 12px;
+    flex-direction: column;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.28px;
 
+    .adv-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
     p {
       color: ${(props) => props.theme.gray_02};
     }
diff --git a/src/components/advertisement-detail/SimilarItem.tsx b/src/components/advertisement-detail/SimilarItem.tsx
index bf204a3..f3d8a17 100644
--- a/src/components/advertisement-detail/SimilarItem.tsx
+++ b/src/components/advertisement-detail/SimilarItem.tsx
@@ -6,39 +6,55 @@ export type SimilarItemProps = {
   createdAt: string;
   moodInfo: string[];
   isArchived?: boolean;
-};
+}[];
 
-export const SimilarItem = ({ data }: { data: SimilarItemProps }) => {
+export const SimilarItem = ({
+  data,
+  mood,
+}: {
+  data: SimilarItemProps;
+  mood: string[];
+}) => {
   return (
-    <SimilarItemContainer>
-      <img src={data.videoUrl} alt="" />
-      <div className="text-box">
-        <p>{data.title}</p>
-        <span>{data.createdAt}2</span>
-        <div className="tag-box">
-          {data.moodInfo.map((item, idx) => {
-            return <div key={idx}>#{item}</div>;
-          })}
-        </div>
-      </div>
-    </SimilarItemContainer>
+    <>
+      <SimTitle>비슷한 분위기의 영상</SimTitle>
+      <SimTag>{mood?.map((item, idx) => <div key={idx}>#{item}</div>)}</SimTag>
+
+      {data?.map((item, idx) => {
+        return (
+          <SimilarItemContainer key={idx}>
+            <img src={item.videoUrl} alt="" />
+            <div className="text-box">
+              <p>{item.title}</p>
+              <span>{item.createdAt}</span>
+              <div className="tag-box">
+                {item.moodInfo.map((item, idx) => {
+                  return <div key={idx}>#{item}</div>;
+                })}
+              </div>
+            </div>
+          </SimilarItemContainer>
+        );
+      })}
+    </>
   );
 };
 
 export const SimilarItemContainer = styled.div`
   display: flex;
-  flex-direction: row;
   gap: 20px;
   width: 390px;
   height: 114px;
   /* height: 100%; */
+  padding: 10px 0px;
+  /* box-sizing: border-box; */
 
   img {
     max-width: 202px;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border: 1px solid red;
+    border-radius: 6px;
   }
 
   .text-box {
@@ -46,7 +62,6 @@ export const SimilarItemContainer = styled.div`
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    border: 1px solid blue;
     width: 100%;
 
     .tag-box {
@@ -91,3 +106,27 @@ export const SimilarItemContainer = styled.div`
     }
   }
 `;
+
+export const SimTitle = styled.div`
+  overflow: hidden;
+  color: ${(props) => props.theme.gray_01};
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 180%;
+  letter-spacing: -0.32px;
+`;
+
+export const SimTag = styled.div`
+  color: ${(props) => props.theme.red_01};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 180%;
+  letter-spacing: -0.32px;
+  display: flex;
+  flex-direction: row;
+  gap: 13px;
+  align-items: center;
+`;
diff --git a/src/pages/adv-detail/AdvDetailPage.tsx b/src/pages/adv-detail/AdvDetailPage.tsx
new file mode 100644
index 0000000..b38e714
--- /dev/null
+++ b/src/pages/adv-detail/AdvDetailPage.tsx
@@ -0,0 +1,110 @@
+import { useParams } from 'react-router-dom';
+import {
+  SimilarItem,
+  SimilarItemProps,
+} from '../../components/advertisement-detail/SimilarItem';
+import {
+  AdvAnalysis,
+  AdvAnalysisProps,
+} from '../../components/advertisement-detail/AdvAnalysis';
+import {
+  AdvInfo,
+  AdvInfoProps,
+} from '../../components/advertisement-detail/AdvInfo';
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+import {
+  getAdvertisementAnalysis,
+  getAdvertisementExpression,
+  getAdvertisementInfo,
+  getSimilarAdvertisement,
+} from '../../api/advertisement';
+import {
+  AdvExpression,
+  ExpressionProps,
+} from '../../components/advertisement-detail/AdvExpression';
+
+export const AdvDetailPage = () => {
+  const { advertisementId } = useParams();
+  const advId = Number(advertisementId);
+  const [similarData, setSimilarData] = useState<SimilarItemProps>();
+  const [infoData, setInfoData] = useState<AdvInfoProps>();
+  const [moodInfo, setMoodInfo] = useState<string[]>();
+
+  // video-analysis data
+  const [analData, setAnalData] = useState<AdvAnalysisProps>();
+
+  // video-expression data
+  const [expressionData, setExpressionData] = useState<ExpressionProps>();
+
+  useEffect(() => {
+    getSimilarAdvertisement(advId)
+      .then((res) => {
+        // console.log('res:', res);
+        setSimilarData(res.data.advertisementSimilarResponseList);
+      })
+      .catch((err) => {
+        console.log('err:', err);
+      });
+
+    //info
+    getAdvertisementInfo(advId)
+      .then((res) => {
+        // console.log('info:', res);
+        setInfoData(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    //video-analysis
+    getAdvertisementAnalysis(advId)
+      .then((res) => {
+        // console.log('anal', res);
+        setMoodInfo(res.data.moodInfo);
+        setAnalData(res.data);
+      })
+      .catch((err) => console.log(err));
+
+    //video-expression
+    getAdvertisementExpression(advId)
+      .then((res) => {
+        // console.log('ex', res);
+        setExpressionData(res.data);
+      })
+      .catch((err) => console.log(err));
+  }, []);
+
+  return (
+    <AdvDetailPageContainer>
+      <div>
+        <AdvInfo data={infoData as AdvInfoProps} />
+        <Divider />
+        <AdvAnalysis data={analData as AdvAnalysisProps} />
+        <AdvExpression data={expressionData as ExpressionProps} />
+      </div>
+      <div>
+        <SimilarItem
+          data={similarData as SimilarItemProps}
+          mood={moodInfo ?? []}
+        />
+      </div>
+    </AdvDetailPageContainer>
+  );
+};
+
+export const AdvDetailPageContainer = styled.div`
+  margin: 0 auto;
+  display: flex;
+  max-width: 1300px;
+  border: 1px solid red;
+  padding: 40px 0px;
+  box-sizing: border-box;
+  gap: 32px;
+`;
+
+export const Divider = styled.div`
+  border: 1px solid ${(props) => props.theme.gray_05};
+  margin: 30px 0px;
+  box-sizing: border-box;
+`;