diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
index beadec2..66e96eb 100644
--- a/app/(route)/indicators/_components/result/result.module.css
+++ b/app/(route)/indicators/_components/result/result.module.css
@@ -44,6 +44,8 @@
   color: #424242;
   font-size: 11px;
   font-weight: 300;
+  line-height: normal;
+
 }
 
 .title {
diff --git a/app/(route)/list/_components/nav/LIstCompo.tsx b/app/(route)/list/_components/nav/LIstCompo.tsx
new file mode 100644
index 0000000..6d1ee50
--- /dev/null
+++ b/app/(route)/list/_components/nav/LIstCompo.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import S from '../../list.module.css'
+import axios, { AxiosResponse } from 'axios'
+import { useQuery } from '@tanstack/react-query'
+import { Root, Tool } from '@/app/_constants/toolcard'
+import ToolCard from '@/app/_components/card/toolCard'
+
+function ListCompo() {
+  const { data } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['getToolList'],
+    queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
+  })
+
+  const resData = data?.data.data.tool
+
+  return (
+    <div>
+      <div className={S.wrapper}>
+        {resData?.map((data: Tool, index) => {
+          return (
+            <ToolCard
+              title={data?.title || ''}
+              subTitle={data?.subTitle || ''}
+              description={data?.description || ''}
+              toolImg={data?.toolImg || ''}
+              toolId={index}
+              company={data?.company}
+              key={index}
+            />
+          )
+        })}
+        <span>데이터를 모두 불러왔습니다.</span>
+      </div>
+    </div>
+  )
+}
+
+export default ListCompo
diff --git a/app/(route)/list/page.tsx b/app/(route)/list/page.tsx
index c4db493..8ea00f2 100644
--- a/app/(route)/list/page.tsx
+++ b/app/(route)/list/page.tsx
@@ -1,21 +1,13 @@
 import Nav from './_components/nav'
-import S from './list.module.css'
+import ListCompo from './_components/nav/LIstCompo'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function List() {
   return (
-    <>
+    <div>
       <Nav title="검증 툴 리스트" />
-      <div className={S.wrapper}>
-        {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
-        <span>데이터를 모두 불러왔습니다.</span>
-      </div>
-    </>
+      <ListCompo />
+    </div>
   )
 }
 
diff --git a/app/(route)/main/page.module.css b/app/(route)/main/page.module.css
index e6c799d..2ecb47b 100644
--- a/app/(route)/main/page.module.css
+++ b/app/(route)/main/page.module.css
@@ -48,3 +48,6 @@
   width: 100%;
   padding-bottom: 300px;
 }
+.slide {
+  width: 390px;
+}
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index ffc9c58..074100b 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -5,9 +5,27 @@ import Nav from '../../_common/nav/index'
 import Title from '../../_common/text/title'
 import Search from '../../_components/search'
 import S from './page.module.css'
+import { useQuery } from '@tanstack/react-query'
+import axios, { AxiosResponse } from 'axios'
+import { Tool, Root } from '../../_constants/toolcard'
+import ToolCard from '@/app/_components/card/toolCard'
+import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['getTools'],
+    queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
+  })
+
+  if (isFetching) {
+    return <div>...loading</div>
+  }
+
+  const resData = data?.data.data.tool
+
   return (
     <main className={S.wrapper}>
       <Nav />
@@ -19,19 +37,45 @@ function Main() {
           <Title title="인기 많은 툴" />
         </div>
         <div className={S.toolCardWrapper}>
-          {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
+          <Swiper
+            spaceBetween={20}
+            slidesPerView={'auto'}
+            onSlideChange={() => console.log('slide change')}
+            onSwiper={(swiper) => console.log(swiper)}
+          >
+            {resData?.map((data: Tool, index: number) => {
+              return (
+                <SwiperSlide style={{ width: '390px' }} key={index}>
+                  <ToolCard
+                    title={data?.title || ''}
+                    subTitle={data?.subTitle || ''}
+                    description={data?.description || ''}
+                    toolImg={data?.toolImg || ''}
+                    toolId={index}
+                    company={data?.company}
+                  />
+                </SwiperSlide>
+              )
+            })}
+          </Swiper>
         </div>
         <div className={S.rowWrapper}>
           <Title title="검증 툴 리스트" />
           <Link href="/list">자세히 보기</Link>
         </div>
         <div className={S.keyWordCardWrapper}>
-          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
+          {resData?.map((data: Tool, index) => {
+            return (
+              <KeyWordTool
+                title={data?.title || ''}
+                subTitle={data?.subTitle || ''}
+                toolImg={data?.toolImg || ''}
+                key={index}
+                toolId={index}
+                keyword={data.keyword}
+              />
+            )
+          })}
         </div>
       </div>
     </main>
diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx
index 87672ee..174ad41 100644
--- a/app/(route)/onboard/_components/WatchWord.tsx
+++ b/app/(route)/onboard/_components/WatchWord.tsx
@@ -24,17 +24,15 @@ function WatchWord({
     return () => {
       animationRef.current?.removeEventListener('animationend', animationend)
     }
-  }, [])
+  }, [handleView]) // handleView를 의존성 배열에 추가
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      {
-        onAnimationEnd && onAnimationEnd()
-      }
+      onAnimationEnd && onAnimationEnd()
     }, 2000)
 
     return () => clearTimeout(timer)
-  }, [])
+  }, [onAnimationEnd]) // onAnimationEnd를 의존성 배열에 추가
 
   const handleAnimationEnd = () => {
     onAnimationEnd && onAnimationEnd()
diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
index 79d053c..83983d2 100644
--- a/app/(route)/toolDetail/[toolId]/page.tsx
+++ b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -5,26 +5,43 @@ import Title from '@/app/_common/text/title'
 import { useState } from 'react'
 import S from './toolDetail.module.css'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query'
+import axios, { AxiosResponse } from 'axios'
+import { Root } from '../../../_constants/toolcard'
+import Image from 'next/image'
 
 //TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
 //TODO: 주석 처리 실제 데이터로 변경하기
 function ToolDetail() {
   const [clickBtn, setClickBtn] = useState(false)
 
+  const params = useParams()
+  const toolId = params.toolId as string
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['toolDetail'],
+    queryFn: () => axios.get(`http://222.121.148.192/api/toolDetails`),
+  })
+  if (isFetching) {
+    return <div>...loading</div>
+  }
+
+  const resData = data?.data.data.tool[Number(toolId)]
+
   return (
     <div className={S.wrapper}>
       <Nav />
       <div className={S.introWrapper}>
         <div className={S.imgWrapper}>
-          {/* <Image
-            src={toolImg}
+          <Image
+            src={resData?.toolImg || ''}
             alt="아이디어 툴 이미지"
             width={80}
             height={80}
-          /> */}
+          />
         </div>
-        {/* <Title title={title} />
-        <p> {createdBy}</p> */}
+        <Title title={resData?.title || ''} />
+        <p> {resData?.createdBy}</p>
       </div>
 
       <div className={S.contentWrapper}>
@@ -47,16 +64,19 @@ function ToolDetail() {
           <>
             <div className={S.marginWrapper}>
               <Title title="개요" />
-              {/* <p>{content}</p> */}
+              <p>{resData?.content}</p>
             </div>
             <div className={S.marginWrapper}>
               <Title title="검증 방식" />
               <ul>
-                {/* {verificationMethod.map((method, index) => (
-              <li className={S.li}>
-                  <div className={S.circle}></div> {method}
-                </li>
-            ))} */}
+                {resData?.verificationMethod.map((method, index) => {
+                  return (
+                    <li className={S.li} key={index}>
+                      <div className={S.circle}></div>
+                      <div className={S.method}>{method}</div>
+                    </li>
+                  )
+                })}
               </ul>
             </div>
           </>
@@ -65,21 +85,30 @@ function ToolDetail() {
             <Title title="실제 사례" />
 
             <div className={S.columnWrapper}>
-              {/* <Image
-                src={toolImg}
-                alt="아이디어 툴 이미지"
-                width={60}
-                height={60}
-                placeholder="blur"
-                blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="
-              /> */}
+              {resData?.company.map((company, index) => {
+                return (
+                  <div className={S.examplewrap} key={index}>
+                    <div className={S.img}>
+                      <Image
+                        src={company || ''}
+                        alt="아이디어 툴 이미지"
+                        width={120}
+                        height={40}
+                      />
+                    </div>
+                    <div className={S.examplecontent}>
+                      {resData.exampleContent[index]}
+                    </div>
+                  </div>
+                )
+              })}
             </div>
           </div>
         )}
       </div>
 
       <Link href={`/verification/ibulsin?step=1`}>
-        <div>검증하기</div>
+        <div className={S.verification}>검증하기</div>
       </Link>
     </div>
   )
diff --git a/app/(route)/toolDetail/[toolId]/toolDetail.module.css b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
index be7ac0d..8a25a08 100644
--- a/app/(route)/toolDetail/[toolId]/toolDetail.module.css
+++ b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
@@ -54,6 +54,10 @@
   overflow: hidden;
 }
 
+.method {
+  width: 340px;
+}
+
 .contentWrapper {
   width: 420px;
   padding: 25px 30px;
@@ -113,3 +117,46 @@
   flex-direction: column;
   gap: 20px;
 }
+.examplewrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.examplecontent {
+  color: #000;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.img {
+  width: 140px;
+  height: 50px;
+  display: flex;
+}
+.verification {
+  border-radius: 15px;
+  background: #6c76f4;
+  display: flex;
+  width: 365px;
+  height: 60px;
+  padding: 13px 8px;
+  align-items: flex-start;
+  gap: 4px;
+  flex-shrink: 0;
+  color: #fff;
+
+  text-align: center;
+  font-family: 'Noto Sans';
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  bottom: 10px;
+}
diff --git a/app/_components/card/toolCard/keyWordToolCard/index.tsx b/app/_components/card/toolCard/keyWordToolCard/index.tsx
index 9131eeb..44be7fc 100644
--- a/app/_components/card/toolCard/keyWordToolCard/index.tsx
+++ b/app/_components/card/toolCard/keyWordToolCard/index.tsx
@@ -40,7 +40,15 @@ function KeyWordTool({
         </div>
 
         <div className={S.marginWrapper}>
-          <div className={CommonS.companyWrapper}>{keyword}</div>
+          <div className={CommonS.companyWrapper}>
+            {keyword?.map((value, index) => {
+              return (
+                <div key={index} className={S.keyword}>
+                  {value}
+                </div>
+              )
+            })}
+          </div>
         </div>
       </motion.div>
     </Link>
diff --git a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
index ec6f108..fdd9d2a 100644
--- a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
+++ b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
@@ -23,7 +23,52 @@
   padding: 5px 2px;
   font-weight: 500;
 }
-
 .marginWrapper {
   margin-top: 13px;
 }
+
+.keyword {
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.keyword:nth-child(even) {
+  background: #40607c;
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.keyword:nth-child(odd) {
+  background: #6c76f4;
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
diff --git a/app/_components/card/toolCard/toolCard.module.css b/app/_components/card/toolCard/toolCard.module.css
index cfb5f88..9861b09 100644
--- a/app/_components/card/toolCard/toolCard.module.css
+++ b/app/_components/card/toolCard/toolCard.module.css
@@ -30,6 +30,7 @@
   border-radius: 50%;
   overflow: hidden;
   margin-right: 15px;
+  display: flex;
 }
 
 .title {
@@ -59,7 +60,7 @@
 
 .companyWrapper {
   display: flex;
-  flex-direction: row;
+  align-items: center;
   gap: 4px;
   width: 100%;
   overflow: auto;
diff --git a/app/_constants/toolcard.ts b/app/_constants/toolcard.ts
new file mode 100644
index 0000000..eacbae3
--- /dev/null
+++ b/app/_constants/toolcard.ts
@@ -0,0 +1,21 @@
+export interface Root {
+  data: Data
+  total: number
+}
+
+export interface Data {
+  tool: Tool[]
+}
+
+export interface Tool {
+  toolImg: string
+  title: string
+  subTitle: string
+  createdBy: string
+  description: string
+  company: string[]
+  keyword: string[]
+  content: string
+  verificationMethod: string[]
+  exampleContent: string[]
+}
diff --git a/next.config.mjs b/next.config.mjs
index 1d61478..f793614 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: [
+      'github.com',
+      'stlab-storage-main.s3.ap-northeast-2.amazonaws.com',
+      'primus-storage-main.s3.ap-northeast-2.amazonaws.com',
+    ], // 이미지 호스트를 여기에 추가합니다.
+  },
+}
 
 export default nextConfig
diff --git a/package-lock.json b/package-lock.json
index 563d72b..86e4b9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "react-hook-form": "^7.51.2",
         "react-icons": "^5.0.1",
         "recoil": "^0.7.7",
-        "sharp": "^0.33.3"
+        "sharp": "^0.33.3",
+        "swiper": "^11.1.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -5045,6 +5046,24 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz",
+      "integrity": "sha512-Pm78CgU7Wvg+w/MgIL/1NwMSLgx0XqFof25EnVyX8iZFCYJv5CppH7LHkBj43qW2k5Cp3Iz7FcdBxrox7XX2AQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
diff --git a/package.json b/package.json
index b180fc8..3263272 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
     "recoil": "^0.7.7",
-    "sharp": "^0.33.3"
+    "sharp": "^0.33.3",
+    "swiper": "^11.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",