diff --git a/client/src/components/timeline.js b/client/src/components/timeline.js
index 55edce2..fb8636e 100644
--- a/client/src/components/timeline.js
+++ b/client/src/components/timeline.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import "../style/timeline.css";
 import { Chrono } from "react-chrono";
-import { Row, Col,  Select, Button, Divider, Card, Typography,  Image, Spin } from "antd";
+import { Row, Col, Select, Button, Divider, Card, Typography, Image, Spin, Pagination } from "antd";
 import axios from 'axios';
 import instance from "../module/instance";
 
@@ -33,21 +33,26 @@ const Timeline = () => {
     return dateA > dateB ? 1 : -1;
   };
 
+
   const getData = async () => {
 
     let nums = []
 
+    let datas = []
+    let cinfos = []
+
     if (yearval === '2019') {
       setdata([])
 
 
       await instance.get('/cluster')
-        .then(response => { 
-          let ordered = []
-          ordered = response.data.clusterInfo
-          ordered.sort(date_ascending)
-          setcInfo(ordered)
-          ordered.map(x=>nums.push(x.cId))
+        .then(response => {
+          let ordered = [];
+          ordered = response.data.clusterInfo;
+          ordered.sort(date_ascending);
+          setcInfo(ordered);
+          ordered.map(x => nums.push(x.cId));
+          cinfos = ordered;
         }) // SUCCESS
         .catch(response => { console.log(response) }); // ERROR
 
@@ -55,7 +60,7 @@ const Timeline = () => {
       setdata([])
     }
 
-    console.log(nums)
+    console.log(cinfos)
 
     const results = nums.reduce((prevPrms, num) => (
       prevPrms.then(async prevRes => {
@@ -65,32 +70,32 @@ const Timeline = () => {
     ), Promise.resolve([]))
 
     results.then(response => {
-      console.log(response)
+
+      // temp=response
+      // temp.map((x)=>datas.push(x))
       setdata(response)
     })
 
-    // await instance.get('/news/?cId=' + i)
-    //   .then(response => { setdata(data => [...data, response.data.newsInfo]) }) // SUCCESS
-    //   .catch(response => { console.log(response) }); // ERROR
-
-
-
   }
 
 
   useEffect(() => {
     getData()
-    
   }, [yearval]);
 
+  useEffect(() => {
+    SetData()
+  }, [data]);
+
 
   useEffect(() => {
-    data.length>0? setbtndisable(false):setbtndisable(true)
+    data.length > 0 ? setbtndisable(false) : setbtndisable(true)
   }, [data]);
 
 
 
   const SetData = () => {
+    console.log('change')
 
     if (yearval !== '0') {
       console.log(data)
@@ -109,7 +114,7 @@ const Timeline = () => {
               title: temptitle,
               img: cloud,
               articles: data[i].data.newsInfo,
-              date:date
+              date: date
             };
 
             tempitem.push(temp);
@@ -150,7 +155,7 @@ const Timeline = () => {
             <Option value="2020">2020</Option>
           </Select>
           {/* <div className="yearval">{yearval}</div> */}
-          <Button onClick={SetData} disabled={btndisable}>Get</Button>
+          {/* <Button onClick={SetData} disabled={btndisable}>Get</Button> */}
         </Row>
         <Divider></Divider>
         {
@@ -163,61 +168,67 @@ const Timeline = () => {
                   allowDynamicUpdate
                   cardPositionHorizontal='TOP'
                   theme={{ primary: "rgba(0, 30, 165, 1)", secondary: "white" }}
-                >   
-                {/* <div className="chrono-icons">
-                  {
-                    items.map((v)=>{
-                      return(<div className="timelinebutton">{v.date.substring(5,7)}</div>)
-                    })
-                  }
-                    
-                </div> */}
+                >
+                  <div className="chrono-icons">
+                    {
+                      items.map((v) => {
+                        return (<div className="timelinebutton " onClick={() => console.log('clicked')}>{v.date.substring(5, 7)}</div>)
+                      })
+                    }
+
+                  </div>
                   {
                     items.map((v) => {
                       return (
 
                         <div key={v} className="Card">
-                          <div className="clusterhead">
+                          <Text className="clusterhead" mark>
                             {v.title}
+                          </Text>
+                          <div style={{
+                            marginTop:"2em"
+                          }}>
+                            <Text className="clusterdate">
+                              {v.date}
+                            </Text>
                           </div>
-                          <div className="clusterdate">
-                            {v.date}
-                          </div>
-                          <div>
-                            <Image width={400} src={'http://13.209.70.51:5000' + v.img}>
 
-                            </Image>
+                          <div>
+                            <Image width={400} src={'http://13.209.70.51:5000' + v.img} className="wordcloud" />
                           </div>
                           {v.articles.map((article) => {
                             return (
                               <>
 
                                 <Card key={article} hoverable
-                                  className="articleCard" style={
+                                  className="articleCard" /*style={
                                     article.img !== '/images/no-image.png' ?
                                       {
                                         backgroundImage: "url(" + article.img + ")",
-                                      } : { backgroundImage: "url('http://www.the-pr.co.kr/news/photo/201607/14976_49069_3617.jpg')", }} onClick={() => OnHandleClick({ url: article.url })}  
-                                      
-                                      
-                                      
-                                      >
+                                      } : { backgroundImage: "url('http://www.the-pr.co.kr/news/photo/201607/14976_49069_3617.jpg')", }}*/ onClick={() => OnHandleClick({ url: article.url })}
+                                >
 
                                   <Row>
-                                    <Col span={12}>
+                                    <Col span={24}>
                                       <div>
                                         <Title style={{
-                                          fontSize:"2em"
+                                          fontSize: "2em"
                                         }}>
                                           {article.headline}
                                         </Title>
                                       </div>
-                                      <div>
+                                      <div className='articlecontent'>
+                                        <Text code>
+                                          {article.category}
+                                        </Text>
+                                        <Text code>
+                                          {article.press}
+                                        </Text>
                                         <Text>
                                           {article.text}...
                                         </Text>
-
                                       </div>
+
                                     </Col>
                                     <Col span={12}>
                                       <div>
@@ -228,7 +239,7 @@ const Timeline = () => {
                                 </Card>
                               </>)
                           })}
-
+                          <Pagination defaultCurrent={1} total={50} />
                         </div>
                       );
                     })
@@ -241,7 +252,7 @@ const Timeline = () => {
             :
             <div className="wait">
               INTIMES
-              <Spin size='large' className="spin"/>
+              <Spin size='large' className="spin" />
             </div>
         }
 
diff --git a/client/src/style/cover.css b/client/src/style/cover.css
index 6a655c6..956521c 100644
--- a/client/src/style/cover.css
+++ b/client/src/style/cover.css
@@ -12,6 +12,13 @@
     font-weight: 100;
 }
 
+@font-face {
+    font-family: 'malgun';
+    src: url('../assets/fonts/malgun.ttf') format("truetype");
+    font-style: normal;
+    font-weight: 100;
+}
+
 .background {
     position: relative;
     width: 100vw;
diff --git a/client/src/style/timeline.css b/client/src/style/timeline.css
index ae5d7fd..232c002 100644
--- a/client/src/style/timeline.css
+++ b/client/src/style/timeline.css
@@ -1,6 +1,8 @@
 .timeline{
     width: 100%;
     height: 100vh;
+
+    font-family: malgun;
 }
 
 .selectSection{
@@ -16,11 +18,6 @@
     
     display: flex;
     justify-content: center;
-}
-.timeline_visual{
-
-    
-
 }
 
 .timeline-controls{
@@ -29,17 +26,22 @@
     border-radius: 0% !important; 
     background-color: white !important;
     box-shadow: none !important;
+    
+}
+.css-eh4k5x-TimelineMainWrapper.horizontal {
+    height: 10rem !important;
 }
-
 
 .css-8myp9a-TimelineNavButton {
     width: 10vmax !important;
     border-radius: 0% !important;
     box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
 
-    margin-bottom: 5vmax !important;
 }
 
+
+
+
 .ant-btn:hover{
     border-color: rgb(14, 0, 66) !important;
 }
@@ -50,16 +52,18 @@
 
 
     width: 95vw;
-    height: 20vh;
+    height: 30vh;
     margin-top: 10px;
     
     background-position: right;
-    background-position-y: 0;
+    background-position-y: 5;
     background-size: 50%;
     background-repeat: no-repeat;
     border-radius: 30px;
 
     
+
+    
 }
 
 
@@ -68,6 +72,7 @@
     -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0)) !important;
     height: 60vh !important;
 } 
+
 .card-description {
     width: 100% !important;
     padding: 20px !important;
@@ -86,17 +91,72 @@
 }
 
 .clusterdate{
-    margin-top: 30px;
     font-weight: bold;
-    font-size: 1em;
+    font-size: 2em;
+}
+
+.css-7xkfgz-TitleWrapper{
+    font-size: 0.9em !important;
 }
 
 .timeline-item-title{
-    background-color: rgba(0, 0, 0, 0) !important;
-    font-weight: 900 !important;
+    
+    color: rgb(255, 255, 255) !important;
+    background-color: rgb(0, 7, 104) !important;
     width: 100% !important;
+    
+    border-radius: 10px !important;
+    height: 4em !important;
+    width: 13em !important;
+    transition:  background-color  0.3s ease-in-out;
+    
+}
+
+.css-q2kzzt-Circle.active.using-icon {
+    border-color: brown;
+}
+
+.css-7xkfgz-TitleWrapper.active{
+    transition:  color  0.3s ease-in-out;
+    color: white !important;
+    background-color: rgb(0, 87, 250) !important;
+}
+.css-7xkfgz-TitleWrapper.active::after{
+
+    content: '';
+	position: absolute;
+	border-style: solid;
+	border-width: 15px 16px 0px 17.5px;
+	border-color: rgb(0, 87, 250) transparent;
+	display: block;
+	width: 0;
+	z-index: 1;
+	top: 50px; 
+	left: 40%; 
+
+    z-index: 4;
+}
+
+.timeline-item-title::after{
+
+	content: '';
+	position: absolute;
+	border-style: solid;
+	border-width: 15px 16px 0px 17.5px;
+	border-color: rgb(0, 7, 104) transparent;
+	display: block;
+	width: 0;
+	z-index: 1;
+	top: 50px; 
+	left: 40%; 
+
+    z-index: 4;
 }
 
+.css-3iqrge-TimelineTitleContainer{
+    margin-top: -2.1rem !important;
+} 
+
 .wait{
     width: 100%;
     height: 100%;
@@ -111,7 +171,7 @@
     font-weight: 500;
     padding: 2em;
     
-}
+} 
 
 .ant-spin-dot{
     width: 4em !important;
@@ -131,18 +191,36 @@
     width: 100%;
     font-size: 0.8em;
     font-weight: bold;
-    height: 1.5em;
+    height: 1.7em;
 
     padding-bottom: 2px;
 
-    border: 2px rgba(0, 30, 165, 1) solid;
     border-radius: 50%;
+
+    
+
+    z-index: 0;
 }
 
 .timelinebutton:hover{
-    border: 2px rgb(149, 149, 184) solid;
+    /* transition:  border 0.5s ease-in;
+    border: 1px rgb(0, 87, 250) solid; */
+}
+
+
+.css-q2kzzt-Circle.active.using-icon{
+    transition:  background-color 0.2s ease-in;
+    color: white;
+    background-color: rgb(0, 87, 250);
+    border-color: rgb(0, 87, 250) !important;
 }
 
-.timelinebutton:focus{
-    border: 2px rgb(149, 149, 184) solid;
+.articlecontent{
+    width: 100%;
+    display: flex;
+    justify-content: left;
+
+    text-align: left;
+
+    flex-direction: column;
 }
\ No newline at end of file