diff --git a/src/app/insight/page.tsx b/src/app/insight/page.tsx
index 0b1d79e..0960a89 100644
--- a/src/app/insight/page.tsx
+++ b/src/app/insight/page.tsx
@@ -101,7 +101,13 @@ const Page = () => {
                     sx={{ cursor: 'pointer' }}
                     onClick={() => handleInsightClick(insight)}
                   >
-                    <NewsCardVertical date={insight.date} description={insight.content} title={insight.title} />
+                    <NewsCardVertical
+                      date={insight.date}
+                      description={insight.content}
+                      id={insight.id}
+                      path="insight"
+                      title={insight.title}
+                    />
                   </Box>
                 </Grid>
               ))}
diff --git a/src/app/newsletter/page.tsx b/src/app/newsletter/page.tsx
index 5cf44bb..56bdab5 100644
--- a/src/app/newsletter/page.tsx
+++ b/src/app/newsletter/page.tsx
@@ -58,6 +58,7 @@ const Page = () => {
                           content={item.content}
                           id={item.id}
                           imageUrl={item.imageUrl}
+                          path="newsletter"
                           publishedAt={item.publishedAt.split('T')[0]}
                           title={item.title}
                         />
@@ -70,6 +71,7 @@ const Page = () => {
                             content={filteredItem.content}
                             id={filteredItem.id}
                             imageUrl={filteredItem.imageUrl}
+                            path="newsletter"
                             publishedAt={filteredItem.publishedAt.split('T')[0]}
                             title={filteredItem.title}
                           />
diff --git a/src/app/village/[id]/page.tsx b/src/app/village/[id]/page.tsx
new file mode 100644
index 0000000..24a4d34
--- /dev/null
+++ b/src/app/village/[id]/page.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import Image from 'next/image';
+
+import { Box, Card, CardContent, Stack, Typography } from '@mui/material';
+
+import CommentCard from '@/components/CommentCard';
+import GradientBox from '@/components/GradientBox';
+import Headline from '@/components/Headline';
+import KakaoMap from '@/components/KakaoMap';
+import color from '@/constants/color';
+import hiddenGems from '@/mocks/villages';
+
+const Page = ({ params }: { params: { id: number } }) => {
+  const village = hiddenGems[params.id - 1];
+
+  return (
+    <GradientBox>
+      <Stack alignItems="center" p={10}>
+        <Box sx={{ maxWidth: '600px' }}>
+          <Box sx={{ marginBottom: '2rem' }}>
+            <Headline
+              source="경단"
+              title={village.title}
+              uploadDate={village.publishedAt}
+              viewCount={village.viewCount}
+            />
+          </Box>
+          <CommentCard isCharacter isStroke content={`오늘은 ${village.title}에 대해 소개해줄게😃`} />
+          <Box mt="2.5rem">
+            <Box>
+              {village.imageUrl && (
+                <Image
+                  priority
+                  alt="articleImage"
+                  height={400}
+                  src={village.imageUrl}
+                  style={{ objectFit: 'contain' }}
+                  width={600}
+                />
+              )}
+            </Box>
+            <Card sx={{ marginTop: '2rem', backgroundColor: 'transparent', boxShadow: 'none' }}>
+              <CardContent sx={{ padding: 0 }}>
+                <Typography fontSize="16px" py={2} variant="body2" whiteSpace="pre-line">
+                  {village.content}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Box>
+          <Typography color={color.blue} fontSize="20px" py={2} variant="h3" />
+          <CommentCard isCharacter isChat content={`${village.title} 위치는 여기야`} />
+          <CommentCard isChat content="기억해뒀다가 다음에 가보자~~" />
+        </Box>
+        <Box style={{ alignItems: 'center' }} width={600}>
+          <KakaoMap
+            initialLat={village.latitude}
+            initialLon={village.longitude}
+            isMarkerClicked={false}
+            level={7}
+            villages={[village]}
+          />
+        </Box>
+      </Stack>
+    </GradientBox>
+  );
+};
+
+export default Page;
diff --git a/src/app/village/page.tsx b/src/app/village/page.tsx
index 696ebc2..e3b9817 100644
--- a/src/app/village/page.tsx
+++ b/src/app/village/page.tsx
@@ -39,7 +39,9 @@ const Page = () => {
                 <NewsCardVertical
                   date={village.publishedAt}
                   description={village.content}
+                  id={village.id}
                   imageUrl={village.imageUrl}
+                  path="village"
                   title={village.title}
                 />
               </Box>
@@ -49,7 +51,7 @@ const Page = () => {
             <Typography gutterBottom color={color.blue} component="h1" variant="h4">
               지도에서 보는 마을
             </Typography>
-            <KakaoMap villages={villages} />
+            <KakaoMap isMarkerClicked initialLat={36.5} initialLon={127.5} level={13} villages={villages} />
           </Box>
           <Box>
             {villages.slice(3).map((filteredItem) => (
@@ -58,6 +60,7 @@ const Page = () => {
                 content={filteredItem.content}
                 id={filteredItem.id}
                 imageUrl={filteredItem.imageUrl}
+                path="village"
                 publishedAt="2024-01-20"
                 title={filteredItem.title}
               />
diff --git a/src/components/KakaoMap.tsx b/src/components/KakaoMap.tsx
index 92c6532..09f05c8 100644
--- a/src/components/KakaoMap.tsx
+++ b/src/components/KakaoMap.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 
 declare global {
@@ -11,30 +13,35 @@ interface Village {
   title: string;
   content: string;
   imageUrl: string;
-  x: number;
-  y: number;
+  latitude: number;
+  longitude: number;
 }
 
 interface KakaoMapProps {
+  initialLat: number;
+  initialLon: number;
+  level: number;
   villages: Village[];
+  isMarkerClicked?: boolean;
 }
 
-const KakaoMap = ({ villages }: KakaoMapProps) => {
+const KakaoMap = ({ villages, initialLat, initialLon, level, isMarkerClicked = false }: KakaoMapProps) => {
   useEffect(() => {
     const initializeMap = () => {
       const container = document.getElementById('map');
       if (!container) {
+        console.error('Map container not found');
         return;
       }
 
       const options = {
-        center: new window.kakao.maps.LatLng(36.5, 127.5),
-        level: 13,
+        center: new window.kakao.maps.LatLng(initialLat, initialLon),
+        level,
       };
       const map = new window.kakao.maps.Map(container, options);
 
       villages.forEach((village) => {
-        const markerPosition = new window.kakao.maps.LatLng(village.x, village.y);
+        const markerPosition = new window.kakao.maps.LatLng(village.latitude, village.longitude);
         const marker = new window.kakao.maps.Marker({
           position: markerPosition,
         });
@@ -53,7 +60,9 @@ const KakaoMap = ({ villages }: KakaoMapProps) => {
         });
 
         window.kakao.maps.event.addListener(marker, 'click', () => {
-          window.location.href = `/village/${village.id}`;
+          if (isMarkerClicked) {
+            window.location.href = `/village/${village.id}`;
+          }
         });
       });
     };
@@ -72,15 +81,19 @@ const KakaoMap = ({ villages }: KakaoMapProps) => {
           window.kakao.maps.load(() => {
             initializeMap();
           });
+        } else {
+          console.error('Kakao maps load function is not available');
         }
       };
-      script.onerror = () => {};
+      script.onerror = () => {
+        console.error('Failed to load Kakao Maps script');
+      };
 
       document.head.appendChild(script);
     };
 
     loadKakaoMap();
-  }, [villages]);
+  }, [villages, initialLat, initialLon, level, isMarkerClicked]);
 
   return (
     <div
diff --git a/src/components/NewsCardHorizontal.tsx b/src/components/NewsCardHorizontal.tsx
index 623f5bd..a69239f 100644
--- a/src/components/NewsCardHorizontal.tsx
+++ b/src/components/NewsCardHorizontal.tsx
@@ -10,16 +10,17 @@ interface NewsCardHorizontalProps {
   content: string;
   publishedAt: string;
   imageUrl?: string;
+  path: string;
 }
 
-const NewsCardHorizontal = ({ id, title, content, publishedAt, imageUrl }: NewsCardHorizontalProps) => {
+const NewsCardHorizontal = ({ id, title, content, publishedAt, imageUrl, path }: NewsCardHorizontalProps) => {
   return (
     <Stack alignItems="center" direction="row" height="180px" justifyContent="space-between">
       <Stack>
         <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
           {publishedAt}
         </Typography>
-        <Link color="inherit" href={`/newsletter/${id}`} underline="none">
+        <Link color="inherit" href={`/${path}/${id}`} underline="none">
           <Typography
             mb={1}
             sx={{
diff --git a/src/components/NewsCardVertical.tsx b/src/components/NewsCardVertical.tsx
index bbcebe5..6e289e0 100644
--- a/src/components/NewsCardVertical.tsx
+++ b/src/components/NewsCardVertical.tsx
@@ -1,48 +1,70 @@
-import { Card, CardContent, CardMedia, Typography } from '@mui/material';
+import Image from 'next/image';
+
+import { Card, CardContent, CardMedia, Link, Typography } from '@mui/material';
 
 import color from '@/constants/color';
 
 interface NewsCardVerticalProps {
+  id: number;
   date: string;
   title: string;
   description: string;
   imageUrl?: string;
+  path?: string;
 }
 
-const NewsCardVertical = ({ date, title, description, imageUrl }: NewsCardVerticalProps) => {
+const NewsCardVertical = ({ id, date, title, description, imageUrl, path }: NewsCardVerticalProps) => {
   return (
     <Card sx={{ maxWidth: 350, boxShadow: 'none', borderRadius: 4 }}>
-      {imageUrl && (
-        <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
-      )}
+      <Link color="inherit" href={`/${path}/${id}`} underline="none">
+        {imageUrl && (
+          <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
+        )}
+      </Link>
       <CardContent>
-        <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
-          {date}
-        </Typography>
-        <Typography
-          mb={1}
-          sx={{
-            overflow: 'hidden',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            display: '-webkit-box',
-          }}
-          variant="h5"
-        >
-          {title}
-        </Typography>
-        <Typography
-          sx={{
-            overflow: 'hidden',
-            WebkitLineClamp: 3,
-            WebkitBoxOrient: 'vertical',
-            display: '-webkit-box',
-          }}
-          variant="body2"
-        >
-          {description}
-        </Typography>
+        <Link color="inherit" href={`/${path}/${id}`} underline="none">
+          <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
+            {date}
+          </Typography>
+          <Typography
+            mb={1}
+            sx={{
+              overflow: 'hidden',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              display: '-webkit-box',
+            }}
+            variant="h5"
+          >
+            {title}
+          </Typography>
+          <Typography
+            sx={{
+              overflow: 'hidden',
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
+              display: '-webkit-box',
+            }}
+            variant="body2"
+          >
+            {description}
+          </Typography>
+        </Link>
       </CardContent>
+      {imageUrl && (
+        <Link
+          borderRadius={2}
+          height={130}
+          href={`/${path}/${id}`}
+          minWidth={230}
+          ml={3}
+          mt={2}
+          overflow="hidden"
+          position="relative"
+        >
+          <Image fill priority alt="articleImage" sizes="100%" src={imageUrl} style={{ objectFit: 'cover' }} />
+        </Link>
+      )}
     </Card>
   );
 };
diff --git a/src/mocks/villages.ts b/src/mocks/villages.ts
index 95e13df..55df388 100644
--- a/src/mocks/villages.ts
+++ b/src/mocks/villages.ts
@@ -1,4 +1,6 @@
-const hiddenGems = [
+import { Village } from '@/types';
+
+const hiddenGems: Village[] = [
   {
     id: 1,
     title: '정선 아우라지마을',
@@ -6,9 +8,10 @@ const hiddenGems = [
       '정선 아우라지마을은 예쁜 계곡과 맑은 물로 유명한 곳이에요. ⛲\n이곳은 과거부터 민속촌 같은 분위기로 많은 이들이 찾아오는 명소였어요. 맑은 물과 푸른 자연 속에서 즐기는 여유로운 시간은 정말 특별해요. 특히, 여름에는 계곡에서 물놀이를 즐기기 좋고, 가을에는 단풍이 아름다워 산책하기 좋은 곳이에요. 🍁\n하지만 최근 몇 년 동안 관광객이 줄어들면서 마을 경제가 많이 어려워졌어요. 마을 주민들은 생계를 위해 힘든 시간을 보내고 있으며, 전통 문화를 유지하는데 어려움을 겪고 있어요. 😢\n우리가 이 아름다운 마을을 지키기 위해 더 많은 관심을 가져야 해요. 주말에 친구들과 함께 정선 아우라지마을을 방문해보세요. 맑은 공기와 아름다운 자연 속에서 힐링할 수 있을 거예요. 🌿',
     imageUrl:
       'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDA4MjhfMjk0%2FMDAxNTk4NTg0NjU1NTQ2.Qu9sBGDkKOZ2KB7zm-cjwpKvA38o_ESEQ_Mnr-vyorsg.FMa1HkUp8kWxipC36WXSC6OlQpDF1YdKFp7B9jW3LfAg.PNG.lightboxlab%2FThumbnail.png&type=sc960_832',
-    x: 37.3793,
-    y: 128.6616,
+    latitude: 37.3793,
+    longitude: 128.6616,
     publishedAt: '2024-07-20',
+    viewCount: 3,
   },
   {
     id: 2,
@@ -17,9 +20,10 @@ const hiddenGems = [
       '청송 주왕산마을은 주왕산 국립공원 근처에 위치해 있어 멋진 자연 경관을 자랑해요. 🌄\n이곳은 사계절 내내 아름다운 풍경을 자랑하며, 특히 가을에는 단풍이 절경을 이루어 많은 사람들이 찾았던 곳이에요. 🍂\n그러나 최근 몇 년 동안 관광객이 급감하면서 마을 상권이 침체되어 많은 가게들이 문을 닫았어요. 주왕산의 아름다움을 즐기고 마을 주민들을 도와주기 위해 많은 이들이 방문해주었으면 해요. 😔\n주왕산마을에서 하이킹을 즐기고, 맑은 공기를 마시며 자연 속에서 힐링하는 시간을 가져보세요. 그리고 마을에서 운영하는 작은 상점과 카페들을 방문해 지역 경제에도 도움을 주었으면 좋겠어요. 🍃',
     imageUrl:
       'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20130124_272%2Fsung1735_1359006236881C5jrX_JPEG%2FKSS_8232.jpg&type=sc960_832',
-    x: 36.3446,
-    y: 129.0571,
+    latitude: 36.3446,
+    longitude: 129.0571,
     publishedAt: '2024-07-20',
+    viewCount: 2,
   },
   {
     id: 3,
@@ -28,9 +32,10 @@ const hiddenGems = [
       '양구 두타연마을은 아름다운 계곡과 울창한 숲으로 유명한 곳이에요. 🌳\n이곳은 자연의 아름다움을 그대로 간직하고 있어, 도시의 번잡함을 벗어나고 싶은 사람들에게 안성맞춤인 곳이에요. 🌲\n그러나 관광객 감소와 함께 농산물 판매가 줄어들어 마을 주민들의 생계가 어려워졌어요. 과거에는 많은 사람들이 찾았던 관광 명소였지만, 이제는 관심이 줄어들어 위기에 처해있답니다. 😢\n두타연마을에서 자연과 하나 되는 시간을 보내보세요. 계곡에서 피크닉을 즐기고, 숲 속을 산책하며 힐링하는 시간을 가질 수 있어요. 그리고 마을 주민들이 정성껏 키운 농산물도 구매해서 맛보세요. 우리의 작은 관심이 마을을 지키는 큰 힘이 된답니다. 🍃',
     imageUrl:
       'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA4MTZfMjA5%2FMDAxNjkyMTk2OTYxNjIy.vtgqtLu7296AUHuvKEEB6iAvkm-DTX8AOhNjqSYsqZwg.VM6kA-GRj4mljMW_V33BTkkI_yiicJYztqoglt5D9owg.JPEG.dewdoll%2F20221001_143251.jpg&type=sc960_832',
-    x: 38.1016,
-    y: 127.9897,
+    latitude: 38.1016,
+    longitude: 127.9897,
     publishedAt: '2024-07-20',
+    viewCount: 3,
   },
   {
     id: 4,
@@ -39,9 +44,10 @@ const hiddenGems = [
       '강진 청자골마을은 전통 청자 도자기로 유명한 곳이에요. 🏺\n이곳에서는 아름다운 청자 도자기를 직접 만들어보는 체험을 할 수 있어요. 도자기를 빚으며 느끼는 마음의 평온함은 정말 특별해요. 🎨\n하지만 최근 도자기 시장의 침체와 함께 관광객이 줄어들면서 마을 경제가 어려워졌어요. 😔\n청자골마을의 전통을 지키기 위해 많은 사람들이 방문해주어야 해요. 도자기 체험도 하고, 아름다운 자연도 즐길 수 있어요. 우리의 관심과 방문이 마을에 큰 도움이 될 거예요. 🌿',
     imageUrl:
       'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA5MTJfMTYx%2FMDAxNjk0NTAyMjUzMjA1.V6PItlGjqs-AdEjmwpDcUCQ9tc-ywWW9tLoJVvrS7y8g.mv2g_5bk7XkvgASzAV9ceDwOKkTCziQord1AiC-UBIwg.JPEG.fsohx10%2FIMG_4409.jpg&type=sc960_832',
-    x: 34.6421,
-    y: 126.7658,
+    latitude: 34.6421,
+    longitude: 126.7658,
     publishedAt: '2024-07-20',
+    viewCount: 5,
   },
   {
     id: 5,
@@ -50,9 +56,10 @@ const hiddenGems = [
       '함평 나비마을은 나비 축제로 유명한 곳이에요. 🦋\n봄이 되면 나비와 꽃이 가득한 이곳에서 아름다운 풍경을 감상할 수 있어요. 🌷\n하지만 축제 시즌 외에는 관광객이 거의 없어 마을 경제가 어려움을 겪고 있어요. 😢\n나비마을의 아름다움을 유지하고 마을 주민들을 돕기 위해서는 더 많은 관심과 방문이 필요해요. 나비와 꽃이 가득한 이곳에서 아름다운 추억을 만들어보세요. 🌼',
     imageUrl:
       'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyNDA0MzBfMTIz%2FMDAxNzE0NDc0Mjc4NTc4.943crSOmERlWxQ-6cJRuqZubCIeG6e8ASLWPpSjEpi0g.b-N_ymLKV74Y8bAWWJCbNyjrkbcdLmsRgJbtpxeYvaUg.JPEG%2F_NZ74880.jpg-0.jpg&type=sc960_832',
-    x: 35.0633,
-    y: 126.5167,
+    latitude: 35.0633,
+    longitude: 126.5167,
     publishedAt: '2024-07-20',
+    viewCount: 6,
   },
 ];
 
diff --git a/src/types.ts b/src/types.ts
index b6bb077..0a01c07 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -33,7 +33,8 @@ export interface Village {
   title: string;
   content: string;
   imageUrl: string;
-  x: number;
-  y: number;
+  latitude: number;
+  longitude: number;
   publishedAt: string;
+  viewCount: number;
 }