diff --git a/components/Empty.js b/components/Empty.js
new file mode 100644
index 00000000..8ab0418a
--- /dev/null
+++ b/components/Empty.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from 'next/link';
+
+const Empty = () => {
+
+    return (
+        <div className="warp-empty">
+            <div className="content-empty">
+                <img src="/static/empty.jpg" alt="empty" />
+                <div className="title-empty">
+                    <h4>ความผิดพลาด 401 ข้อมูลไม่พร้อมใช้งาน</h4>
+                    <h4>โปรดกลับสู่หน้าแรก</h4>
+                </div>
+            </div>
+            <Link href="/">
+                <h5>หน้าแรก</h5>
+            </Link>
+        </div>
+    )
+}
+export default Empty;
\ No newline at end of file
diff --git a/components/about.js b/components/about.js
new file mode 100644
index 00000000..0f9cc5ab
--- /dev/null
+++ b/components/about.js
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+const About = () => {
+
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [data, setData] = useState([
+        {
+            title: "ระดับเริ่มต้น (Aging society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไปมากกว่าร้อยละ 10 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปีมากกว่าร้อยละ 7 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสมบูรณ์ (Aged society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไป มากกว่าร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปี มากกว่าร้อยละ 14 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสูง (Super-aged society)",
+            text: "สังคมที่มีประชากรอายุ 65 ปีขึ้นไปมากกว่า ร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: ""
+        },
+    ])
+
+    return (
+        <div className="warp-about">
+            <div className="page-content">
+                {
+                    isSmallScreen ?
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
+                                <h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/gifcover.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                    <div className="more-content">
+                                        <h6>อ่านต่อ</h6>
+                                        <a href="/index/society">
+                                            <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        :
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
+                                <h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/gifcover.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                    <div className="more-content">
+                                        <h6>อ่านต่อ</h6>
+                                        <a href="/index/society">
+                                            <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        </a>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                }
+            </div>
+        </div>
+    )
+}
+export default About;
\ No newline at end of file
diff --git a/components/agency.js b/components/agency.js
new file mode 100644
index 00000000..760c222f
--- /dev/null
+++ b/components/agency.js
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { Steps } from 'antd';
+const { Step } = Steps;
+
+const Agency = () => {
+
+    const isTablet = useMediaQuery({ maxDeviceWidth: 1025 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [card, setCard] = useState([
+        {
+            img: "/static/box1.jpg",
+            box: "1",
+            content: "ตรวจเช็คคุณสมบัติ",
+            description: "สัญชาติไทย อายุ 59 ปีบริบูรณ์ เเละไม่เป็นผู้ได้รับสิทธิประโยชน์จากหน่วยงานรัฐ หรือวิสาหกิจ",
+        },
+        {
+            img: "/static/box2.jpg",
+            box: "2",
+            content: "เตรียมเอกสาร",
+            description: "บัตรประชาชน ทะเบียนบ้าน สมุดบัญชีเงินฝาก",
+        },
+        {
+            img: "/static/box3.jpg",
+            box: "3",
+            content: "ยื่นคำขอลงทะเบียน",
+            description: "ที่สำนักงานเขต หรือเทศบาล ที่มีชื่ออยู่ในทะเบียนบ้าน",
+        },
+        {
+            img: "/static/box4.jpg",
+            box: "4",
+            content: "รออนุมัติ เพื่อรับเงิน",
+            description: `รับเป็นเงินสดหรือโอนเข้าบัญชีธนาคารด้วยตนเองหรือโดยผู้เเเทน`
+        },
+    ])
+
+    return (
+        <div className="warp-agency">
+            {
+                isSmallScreen ?
+                    <React.Fragment>
+                        <div className="head-agency">
+                            <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                            <div className="title-agency">
+                                <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                            </div>
+                        </div>
+                        <div className="content-agency-mobile">
+                            <Steps progressDot current={3} direction="vertical">
+                                {
+                                    card.map((items, index) => (
+                                        <Step key={index} title={items.content} description={items.description} />
+                                    ))
+                                }
+                            </Steps>
+                        </div>
+                    </React.Fragment>
+                    :
+                    isMobile || isTablet ?
+                        <React.Fragment>
+                            <div className="head-agency">
+                                <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                                <div className="title-agency">
+                                    <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                    <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                    <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                                </div>
+                            </div>
+                            <div className="content-agency-mobile">
+                                <Steps progressDot current={3} direction="vertical">
+                                    {
+                                        card.map((items, index) => (
+                                            <Step key={index} title={items.content} description={items.description} />
+                                        ))
+                                    }
+                                </Steps>
+                                <img src="/static/agency.jpg" alt="img-agency" />
+                            </div>
+                        </React.Fragment>
+                        :
+                        <React.Fragment>
+                            <div className="head-agency">
+                                <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                                <svg>
+                                    <line x1="100" y1="0" x2="200" y2="0" />
+                                </svg>
+                                <div className="title-agency">
+                                    <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                    <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                    <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                                </div>
+                            </div>
+                            <div className="content-agency">
+                                {
+                                    card.map((items, index) => (
+                                        <div className="content-agency-card" key={index}>
+                                            <img src={items.img} alt={`box${index}`} />
+                                            <div className="agency-box">
+                                                <h6>{items.box}</h6>
+                                            </div>
+                                            <p>{items.content}</p>
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        </React.Fragment>
+
+            }
+
+        </div>
+    )
+}
+export default Agency;
\ No newline at end of file
diff --git a/components/chart/barChart.js b/components/chart/barChart.js
index f355f4cb..d9f19b1b 100644
--- a/components/chart/barChart.js
+++ b/components/chart/barChart.js
@@ -1,15 +1,26 @@
 import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
-
+import { useMediaQuery } from 'react-responsive';
 
 const Barchart = () => {
 
+  const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
   const [options, setOptions] = useState({
     title: {
       text: 'สถานภาพของผู้สูงอายุ',
       align: 'left'
     },
+    responsive: [{
+      breakpoint: 575.98,
+      options: {
+        legend: {
+          position: "bottom",
+          offsetY: 5
+        },
+      },
+    }],
     chart: {
       stacked: true,
       toolbar: {
@@ -19,16 +30,6 @@ const Barchart = () => {
         enabled: true
       }
     },
-    responsive: [{
-      breakpoint: 1000,
-      options: {
-        legend: {
-          position: 'bottom',
-          offsetX: -10,
-          offsetY: 0
-        }
-      }
-    }],
     plotOptions: {
       bar: {
         horizontal: false,
@@ -47,11 +48,27 @@ const Barchart = () => {
           return val + " คน"
         }
       }
+    },
+    xaxis: {
+      categories: ["โสด",
+        "สมรส",
+        "หม้าย",
+        "หย่าร้าง",
+        "เเยกกันอยู่",
+        "อื่นๆ"]
     }
   })
 
-  const [series, setSeries] = useState([])
-  const [dataName, setDataName] = useState([])
+  const [series, setSeries] = useState([
+    {
+      name: 'เพศชาย',
+      data: [50, 50, 50, 50, 50]
+    },
+    {
+      name: 'เพศหญิง',
+      data: [50, 50, 50, 50, 50]
+    }
+  ])
 
   useEffect(() => {
     fetchData()
@@ -67,7 +84,6 @@ const Barchart = () => {
   const namelist = async (token, value) => {
     try {
       var list = await Sheetapi.getSheet(token, value)
-      setDataName(_.flatten(list))
 
       setOptions({
         xaxis: {
@@ -93,52 +109,25 @@ const Barchart = () => {
 
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="300"
-          width="250"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="200"
-          width="450"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="220"
-          width="500"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="245"
-          width="550"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="285"
-          width="600"
-        />
-      </div>
-    </React.Fragment>
-
+      {
+        isSmallScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="300"
+            width="300"
+          />
+          :
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="285"
+            width="600"
+          />
+      }
+    </React.Fragment >
   )
 }
- export default Barchart;
\ No newline at end of file
+export default Barchart;
\ No newline at end of file
diff --git a/components/chart/barEconomy.js b/components/chart/barEconomy.js
index a309f9de..772fb8be 100644
--- a/components/chart/barEconomy.js
+++ b/components/chart/barEconomy.js
@@ -1,24 +1,26 @@
 import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const BarEconomy = () => {
 
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
     const [options, setOptions] = useState({
         title: {
             text: 'รายได้เฉลี่ยต่อเดือนของประชากรผู้สูงอายุ',
             align: 'left'
         },
+        chart: {
+            type: 'bar',
+            stacked: true,
+          },
         plotOptions: {
             bar: {
-                horizontal: false,
-                columnWidth: '60%',
+                horizontal: true,
             },
         },
-        responsive: [{
-            breakpoint: 150,
-
-        }],
         dataLabels: {
             enabled: false
         },
@@ -36,11 +38,22 @@ const BarEconomy = () => {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["ไม่มีรายได้", "น้อยกว่า 1,000 บาท", "1,001-3,000 บาท", "3,100-5,000 บาท", "5,001-10,000 บาท", "10,001-15,000 บาท", "15,001-20,000 บาท", "20,001-25,000 บาท", "25,000 บาท ขึ้นไป"]
         }
     })
 
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -56,7 +69,6 @@ const BarEconomy = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
@@ -82,212 +94,25 @@ const BarEconomy = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="325"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="400"
-                    width="470"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="350"
+                        width="600"
+                    />
+            }
         </React.Fragment>
     )
 }
-
-
-
-// class BarEconomy extends React.Component {
-//     constructor(props) {
-//         super(props);
-
-//         this.state = {
-//             options: {},
-//             datalist: [],
-//             series: [],
-//             dataMan: [],
-//             dataWoman: [],
-
-//         }
-//     }
-
-//     async componentDidMount() {
-//         let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-//         this.access_token = userOauth.data.access_token
-//         await this.listName('ข้อมูลการวิเคราะห์ทางสถิติ!H47:H55')
-//         await this.listData()
-//     }
-
-//     listName = async (value) => {
-//         try {
-//             this.list = await Sheetapi.getSheet(this.access_token, value)
-//             for (let i = 0; i < this.list.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     datalist: [...prevState.datalist, this.list[i][0]],
-//                 }))
-//             }
-
-//             this.setState({
-//                 options: {
-//                     title: {
-//                         text: 'รายได้เฉลี่ยต่อเดือน',
-//                         align: 'left'
-//                     },
-//                     plotOptions: {
-//                         bar: {
-//                             horizontal: false,
-//                             columnWidth: '60%',
-//                             // endingShape: 'rounded'
-//                         },
-//                     },
-//                     responsive: [{
-//                         breakpoint: 150,
-
-//                     }],
-//                     dataLabels: {
-//                         enabled: false
-//                     },
-//                     stroke: {
-//                         show: true,
-//                         width: 2,
-//                         colors: ['transparent']
-//                     },
-//                     xaxis: {
-//                         categories: this.state.datalist,
-//                     },
-//                     fill: {
-//                         opacity: 1
-//                     },
-//                     tooltip: {
-//                         y: {
-//                             formatter: function (val) {
-//                                 return val + " คน"
-//                             }
-//                         }
-//                     }
-//                 }
-//             })
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     listData = async () => {
-//         try {
-
-//             this.man = await Sheetapi.getSheet(this.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!J47:J55')
-//             this.woman = await Sheetapi.getSheet(this.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!K47:K55')
-
-//             for (let i = 0; i < this.man.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     dataMan: [...prevState.dataMan, this.man[i][0]],
-//                 }))
-//             }
-
-//             for (let i = 0; i < this.woman.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     dataWoman: [...prevState.dataWoman, this.woman[i][0]],
-//                 }))
-//             }
-
-//             this.setState({
-//                 series: [{ name: "เพศชาย", data: this.state.dataMan }, { name: "เพศหญิง", data: this.state.dataWoman }],
-//             })
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <React.Fragment>
-//                 <div className="warp-chart-small">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="300"
-//                         width="325"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-mobile">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="325"
-//                         width="450"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-tablets">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="325"
-//                         width="450"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-desktops">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="350"
-//                         width="500"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-large">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="400"
-//                         width="470"
-//                     />
-//                 </div>
-//             </React.Fragment>
-
-//         )
-//     }
-// }
 export default BarEconomy;
\ No newline at end of file
diff --git a/components/chart/barEconomy2.js b/components/chart/barEconomy2.js
index fe0fe1ad..a6d145de 100644
--- a/components/chart/barEconomy2.js
+++ b/components/chart/barEconomy2.js
@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 
 const BarEconomy2 = () => {
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+    
     const [options, setOptions] = useState({
         title: {
             text: 'ที่มาของรายได้ของประชากรผู้สูงอายุ',
@@ -12,19 +15,6 @@ const BarEconomy2 = () => {
         plotOptions: {
             bar: { horizontal: true }
         },
-        responsive: [{
-            breakpoint: 1000,
-            options: {
-                plotOptions: {
-                    bar: {
-                        horizontal: false
-                    }
-                },
-                legend: {
-                    position: "bottom"
-                }
-            }
-        }],
         dataLabels: { enabled: false },
         stroke: {
             show: true,
@@ -37,10 +27,21 @@ const BarEconomy2 = () => {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["เบี้ยยังชีพผู้สูงอายุ/ผู้พิการ/ผู้ป่วย", "ประกอบอาชีพด้วยตนเอง", "ลูกหลาน/ผู้อื่นให้"]
         }
     })
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -56,7 +57,6 @@ const BarEconomy2 = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
@@ -81,212 +81,25 @@ const BarEconomy2 = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="325"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="400"
-                    width="470"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="350"
+                        width="600"
+                    />
+            }
         </React.Fragment>
     )
 }
-
-
-// class BarEconomy2 extends React.Component {
-//     constructor(props) {
-//         super(props);
-
-//         this.state = {
-//             options: {},
-//             datalist: [],
-//             series: [],
-//             dataMan: [],
-//             dataWoman: [],
-
-//         }
-//     }
-
-//     async componentDidMount() {
-//         let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-//         this.access_token = userOauth.data.access_token
-//         await this.listName('ข้อมูลการวิเคราะห์ทางสถิติ!N47:N49')
-//         await this.listData()
-//     }
-
-//     listName = async (value) => {
-//         try {
-//             this.list = await Sheetapi.getSheet(this.access_token, value)
-//             for (let i = 0; i < this.list.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     datalist: [...prevState.datalist, this.list[i][0]],
-//                 }))
-//             }
-
-//             this.setState({
-//                 options: {
-//                     title: {
-//                         text: 'ที่มาของรายได้',
-//                         align: 'left'
-//                     },
-//                     plotOptions: {
-//                         bar: { horizontal: true }
-//                     },
-//                     responsive: [{
-//                         breakpoint: 1000,
-//                         options: {
-//                             plotOptions: {
-//                                 bar: {
-//                                     horizontal: false
-//                                 }
-//                             },
-//                             legend: {
-//                                 position: "bottom"
-//                             }
-//                         }
-//                     }],
-//                     dataLabels: { enabled: false },
-//                     stroke: {
-//                         show: true,
-//                         width: 1,
-//                         colors: ['#fff']
-//                     },
-
-//                     xaxis: {
-//                         categories: this.state.datalist,
-//                     },
-//                     tooltip: {
-//                         y: {
-//                             formatter: function (val) {
-//                                 return val + " คน"
-//                             }
-//                         }
-//                     }
-//                 }
-//             })
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     listData = async () => {
-//         try {
-
-//             this.man = await Sheetapi.getSheet(this.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!P47:P49')
-//             this.woman = await Sheetapi.getSheet(this.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!Q47:Q49')
-
-//             for (let i = 0; i < this.man.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     dataMan: [...prevState.dataMan, this.man[i][0]],
-//                 }))
-//             }
-
-//             for (let i = 0; i < this.woman.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     dataWoman: [...prevState.dataWoman, this.woman[i][0]],
-//                 }))
-//             }
-
-//             this.setState({
-//                 series: [{ name: "เพศชาย", data: this.state.dataMan }, { name: "เพศหญิง", data: this.state.dataWoman }],
-//             })
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <React.Fragment>
-//                 <div className="warp-chart-small">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="300"
-//                         width="325"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-mobile">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="325"
-//                         width="450"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-tablets">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="325"
-//                         width="450"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-desktops">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="350"
-//                         width="500"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-large">
-//                     <Chart options={this.state.options}
-//                         series={this.state.series}
-//                         type="bar"
-//                         height="400"
-//                         width="470"
-//                     />
-//                 </div>
-//             </React.Fragment>
-
-//         )
-//     }
-// }
 export default BarEconomy2;
\ No newline at end of file
diff --git a/components/chart/barEconomy3.js b/components/chart/barEconomy3.js
index 28ae1c0b..80f52b46 100644
--- a/components/chart/barEconomy3.js
+++ b/components/chart/barEconomy3.js
@@ -1,30 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const BarEconomy = () => {
-  const [options, setOptions] = useState({
+  const isSmallScreen = useMediaQuery({ maxWidth: 768 })
 
+  const [options, setOptions] = useState({
     title: {
       text: 'รายจ่ายของประชากรผู้สูงอายุ',
       align: 'left'
     },
     plotOptions: {
-      bar: { horizontal: true }
+      bar: { horizontal: false }
     },
-    responsive: [{
-      breakpoint: 1000,
-      options: {
-        plotOptions: {
-          bar: {
-            horizontal: false
-          }
-        },
-        legend: {
-          position: "bottom"
-        }
-      }
-    }],
     dataLabels: { enabled: false },
     tooltip: {
       y: {
@@ -33,9 +22,20 @@ const BarEconomy = () => {
         }
       }
     },
+    xaxis: {
+      categories: ["เพียงพอต่อการใช้จ่าย", "พออยู่ได้", "ไม่เพียงพอต่อการใช้จ่าย"]
+    }
   })
-  const [series, setSeries] = useState([])
-  const [dataName, setDataName] = useState([])
+  const [series, setSeries] = useState([
+    {
+      name: 'เพศชาย',
+      data: [50, 50, 50, 50, 50]
+    },
+    {
+      name: 'เพศหญิง',
+      data: [50, 50, 50, 50, 50]
+    }
+  ])
 
   useEffect(() => {
     fetchData()
@@ -51,7 +51,6 @@ const BarEconomy = () => {
   const namelist = async (token, value) => {
     try {
       var list = await Sheetapi.getSheet(token, value)
-      setDataName(_.flatten(list))
 
       setOptions({
         xaxis: {
@@ -75,51 +74,24 @@ const BarEconomy = () => {
   }
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart options={options}
-          series={series}
-          type="bar"
-          height="300"
-          width="325"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="350"
-          width="450"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="300"
-          width="450"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="245"
-          width="500"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="bar"
-          height="400"
-          width="500"
-        />
-      </div>
+      {
+        isSmallScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="300"
+            width="300"
+          />
+          :
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="300"
+            width="500"
+          />
+      }
     </React.Fragment>
   )
 }
diff --git a/components/chart/barHospital.js b/components/chart/barHospital.js
index 55636139..b5c3ee32 100644
--- a/components/chart/barHospital.js
+++ b/components/chart/barHospital.js
@@ -1,31 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import Chart from 'react-apexcharts'
-import Sheetapi from '../../config/api'
-
+import Chart from 'react-apexcharts';
+import Sheetapi from '../../config/api';
+import { useMediaQuery } from 'react-responsive';
 
 const BarHospital = () => {
+  const isSmallScreen = useMediaQuery({ maxWidth: 768 })
   const [options, setOptions] = useState({
 
     title: {
       text: 'สถานพยาบาลที่ใช้ประจำของผู้สูงอายุ',
       align: 'left'
     },
-    plotOptions: {
-      bar: { horizontal: true }
-    },
-    responsive: [{
-      breakpoint: 1000,
-      options: {
-        plotOptions: {
-          bar: {
-            horizontal: false
-          }
-        },
-        legend: {
-          position: "bottom"
-        }
-      }
-    }],
     dataLabels: { enabled: false },
     tooltip: {
       y: {
@@ -33,10 +18,17 @@ const BarHospital = () => {
           return val + " คน"
         }
       }
-    }
+    },
+    legend: {
+      position: 'bottom'
+    },
+    colors: ['#2196f3', '#00d084', '#ffc107',
+      '#eb144c', '#673ab7', '#ff6900', '#455a64', '#f44336'],
+
+    labels: ["โรงพยาบาลส่งเสริมสุขภาพกะทู้", "โรงพยาบาลป่าตอง", "โรงพยาบาลวชิระภูเก็ต", "โรงพยาบาลเอกชน", "คลินิกเอกชน", "ซื้อยาทานเอง", "อื่นๆ", "มากกว่า 1 เเหล่ง"]
   })
-  const [series, setSeries] = useState([])
-  const [dataName, setDataName] = useState([])
+
+  const [series, setSeries] = useState([20, 20, 20, 20])
 
   useEffect(() => {
     fetchData()
@@ -46,30 +38,27 @@ const BarHospital = () => {
 
     let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
     await namelist(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!V74:V81')
-    await listData(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!X74:X81', 'ข้อมูลการวิเคราะห์ทางสถิติ!Y74:Y81')
+    await listData(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!W74:W81')
   }
 
   const namelist = async (token, value) => {
     try {
       var list = await Sheetapi.getSheet(token, value)
-      setDataName(_.flatten(list))
 
       setOptions({
-        xaxis: {
-          categories: _.flatten(list),
-        }
+        labels: _.flatten(list)
       })
     } catch (err) {
       console.log(err);
     }
   }
 
-  const listData = async (token, value1, value2) => {
+  const listData = async (token, value) => {
     try {
 
-      var man = await Sheetapi.getSheet(token, value1)
-      var woman = await Sheetapi.getSheet(token, value2)
-      setSeries([{ name: "เพศชาย", data: _.flatten(man) }, { name: "เพศหญิง", data: _.flatten(woman) }])
+      var result = await Sheetapi.getSheet(token, value)
+      var data = _.flatten(result).map(Number)
+      setSeries(data)
     } catch (err) {
       console.log(err);
     }
@@ -77,51 +66,24 @@ const BarHospital = () => {
 
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart options={options}
-          series={series}
-          type="bar"
-          height="300"
-          width="290"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart options={options}
-          series={series}
-          type="bar"
-          height="300"
-          width="400"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart options={options}
-          series={series}
-          type="bar"
-          height="325"
-          width="450"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart options={options}
-          series={series}
-          type="bar"
-          height="350"
-          width="500"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="bar"
-          height="350"
-          width="450"
-        />
-      </div>
+      {
+        isSmallScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="donut"
+            width="300"
+            height="200"
+          />
+          :
+          <Chart
+            options={options}
+            series={series}
+            type="donut"
+            width="400"
+            height="200"
+          />
+      }
     </React.Fragment>
   )
 }
diff --git a/components/chart/barHospital2.js b/components/chart/barHospital2.js
index b77106dd..fb85d94c 100644
--- a/components/chart/barHospital2.js
+++ b/components/chart/barHospital2.js
@@ -1,14 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import Chart from 'react-apexcharts'
-import Sheetapi from '../../config/api'
+import Chart from 'react-apexcharts';
+import Sheetapi from '../../config/api';
+import { useMediaQuery } from 'react-responsive';
 
 
 const BarHospital2 = () => {
+
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
     const [options, setOptions] = useState({
         title: {
             text: 'โรคประจำตัวของผู้สูงอายุ',
             align: 'left'
         },
+        plotOptions: {
+            bar: { horizontal: true }
+        },
         chart: {
             stacked: true,
             toolbar: {
@@ -19,39 +27,28 @@ const BarHospital2 = () => {
             }
         },
         dataLabels: { enabled: false },
-        responsive: [{
-            breakpoint: 1000,
-            options: {
-                legend: {
-                    position: 'bottom',
-                    offsetX: -10,
-                    offsetY: 0
-                }
-            }
-        }],
-        plotOptions: {
-            bar: {
-                horizontal: false,
-            },
-        },
-        legend: {
-            position: 'top',
-            offsetY: 40
-        },
-        fill: {
-            opacity: 1
-        },
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["ไม่มีโรคประจำตัว", "ความดันโลหิตสูง", "โรคหัวใจ", "โรคเบาหวาน", "อัมพฤกษ์/อัมพาต", "โรคไต", "โรคมะเร็ง", "โรคสมองเสื่อม", "ปัญหาด้านสายตา", "ปัญหาด้านหู", "โรคอื่นๆ", "มากกว่า 1 โรค"]
         }
     })
 
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -67,7 +64,6 @@ const BarHospital2 = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
@@ -92,51 +88,33 @@ const BarHospital2 = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="290"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="400"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="450"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    isTablet ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="500"
+                        />
+                        :
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="600"
+                        />
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/barHospital3.js b/components/chart/barHospital3.js
index 9a13c39a..c157fc86 100644
--- a/components/chart/barHospital3.js
+++ b/components/chart/barHospital3.js
@@ -1,11 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import Chart from 'react-apexcharts'
-import Sheetapi from '../../config/api'
+import Chart from 'react-apexcharts';
+import Sheetapi from '../../config/api';
+import { useMediaQuery } from 'react-responsive';
 
 const BarHospital3 = () => {
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+    
     const [options, setOptions] = useState({
         title: {
-            text: 'การตรวจสุภาพประจำปีของผู้สูงอายุ',
+            text: 'การตรวจสุขภาพประจำปีของผู้สูงอายุ',
             align: 'left'
         },
         plotOptions: {
@@ -45,11 +49,22 @@ const BarHospital3 = () => {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["ตรวจเป็นประจำทุกปี", "นาน ๆ ครั้ง", "ไม่เคยตรวจ", "อื่นๆ"]
         }
     })
 
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -65,7 +80,6 @@ const BarHospital3 = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
@@ -90,51 +104,33 @@ const BarHospital3 = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="290"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="400"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="450"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    isTablet ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="500"
+                        />
+                        :
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="300"
+                            width="600"
+                        />
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/barHospital4.js b/components/chart/barHospital4.js
index ec21fa76..127778b0 100644
--- a/components/chart/barHospital4.js
+++ b/components/chart/barHospital4.js
@@ -1,23 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import Chart from 'react-apexcharts'
-import Sheetapi from '../../config/api'
-
+import Chart from 'react-apexcharts';
+import Sheetapi from '../../config/api';
+import { useMediaQuery } from 'react-responsive';
 
 const BarHospital4 = () => {
+
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
     const [options, setOptions] = useState({
         title: {
             text: 'การออกกำลังกายของผู้สูงอายุ',
             align: 'left'
         },
-        plotOptions: {
-            bar: {
-                horizontal: false,
-                columnWidth: '55%',
-            },
-        },
-        responsive: [{
-            breakpoint: 150,
-        }],
         dataLabels: {
             enabled: false
         },
@@ -35,11 +30,22 @@ const BarHospital4 = () => {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["ออกกำลังกายสม่ำเสมอ", "ออกกำลังกายมากกว่า 3 ครั้ง / สัปดาห์", "ออกกำลังกายน้อยกว่า 3 ครั้ง / สัปดาห์", "ไม่ได้ออกกำลังกาย", "อื่นๆ"]
         }
     })
 
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -55,7 +61,6 @@ const BarHospital4 = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
@@ -80,51 +85,36 @@ const BarHospital4 = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="290"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    isTablet ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="500"
+                        />
+                        :
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="600"
+                        />
 
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="400"
-                />
-            </div>
 
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
 
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="450"
-                />
-            </div>
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/barMap.js b/components/chart/barMap.js
index d1f5933e..561818ee 100644
--- a/components/chart/barMap.js
+++ b/components/chart/barMap.js
@@ -2,13 +2,19 @@ import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
 import _ from 'lodash'
+import { useMediaQuery } from 'react-responsive';
 
-const BarMap = () => {
+const BarMap = props => {
+
+    const isMobile = useMediaQuery({ maxWidth: 575.98 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
 
     const [options, setOptions] = useState({
+        title: {
+            text: 'สถานภาพของผู้สูงอายุ',
+            align: 'left'
+        },
         chart: {
-            height: 350,
-            type: 'bar',
             stacked: true,
             toolbar: {
                 show: true
@@ -17,17 +23,6 @@ const BarMap = () => {
                 enabled: true
             }
         },
-        dataLabels: { enabled: false },
-        responsive: [{
-            breakpoint: 480,
-            options: {
-                legend: {
-                    position: 'bottom',
-                    offsetX: -10,
-                    offsetY: 0
-                }
-            }
-        }],
         plotOptions: {
             bar: {
                 horizontal: false,
@@ -41,22 +36,25 @@ const BarMap = () => {
             opacity: 1,
             colors: ['#00d084']
         },
-        xaxis: {},
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
-            },
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        xaxis: {
+            categories: ["กมลา", "กะทู้", "ป่าตอง", "ฉลอง", "กะรน", "เกาะแก้ว", "รัษฎา", "ราไวย์", "ตลาดเหนือ", "ตลาดใหญ่", "วิชิต", "เชิงทะเล", "ไม้ขาว", "ป่าคลอก", "สาคู", "ศรีสุนทร", "เทพกระษัตรี"],
         },
     })
-    const [series, setSeries] = useState([])
-    const [dataName, setDataName] = useState([])
-
+    const [series, setSeries] = useState([{ name: "จำนวน", data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100] }])
 
     useEffect(() => {
         fetchData()
-    }, [])
+    }, [listData])
 
     const fetchData = async () => {
 
@@ -68,80 +66,67 @@ const BarMap = () => {
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            setDataName(_.flatten(list))
 
             setOptions({
                 xaxis: {
                     categories: _.flatten(list),
+                },
+                fill: {
+                    opacity: 1,
+                    colors: ['#00d084']
+                },
+                tooltip: {
+                    y: {
+                        formatter: function (val) {
+                            return val + " คน"
+                        }
+                    }
                 }
             })
         } catch (err) {
             console.log(err);
+
         }
     }
 
     const listData = async (token, value) => {
         try {
-
             var data = await Sheetapi.getSheet(token, value)
             setSeries([{ name: "จำนวน", data: _.flatten(data) }])
         } catch (err) {
-            console.log(err);
+            props.onToken(true)
         }
     }
 
     return (
-
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="350"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="300"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="650"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="400"
-                    width="650"
-                />
-            </div>
+            {
+                isMobile ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    isSmallScreen ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="300"
+                            width="350"
+                        />
+                        :
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="650"
+                        />
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/barSocial.js b/components/chart/barSocial.js
index c0ae09ad..d7aa9460 100644
--- a/components/chart/barSocial.js
+++ b/components/chart/barSocial.js
@@ -1,32 +1,38 @@
 import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
+const BarSocial = props => {
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 768 })
 
-const BarSocial = () => {
     const [options, setOptions] = useState({
         title: {
             text: 'ที่่ดิน',
             align: 'left'
         },
+        responsive: [{
+            breakpoint: 1000,
+            options: {
+                plotOptions: {
+                    bar: {
+                        horizontal: false
+                    }
+                },
+                legend: {
+                    position: "bottom"
+                }
+            }
+        }],
         plotOptions: {
             bar: {
-                horizontal: false,
-                columnWidth: '60%',
+                horizontal: true,
             },
         },
-        responsive: [{
-            breakpoint: 10,
-        }],
         dataLabels: {
             enabled: false
         },
-        stroke: {
-            show: true,
-            width: 2,
-            colors: ['transparent']
-        },
-
         fill: {
             opacity: 1
         },
@@ -36,11 +42,22 @@ const BarSocial = () => {
                     return val + " คน"
                 }
             }
+        },
+        xaxis: {
+            categories: ["ที่ดินของตนเอง", "อาศัยที่ดินญาติ", "ที่ดินสาธารณะ/ที่ดินของรัฐ", "ที่ดินวัด/มัสยิด", "ที่ดินเอกชน/เช่าที่เอกชน", "อื่นๆ"]
         }
     })
 
-    const [dataname, setDataName] = useState([])
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([
+        {
+            name: 'เพศชาย',
+            data: [50, 50, 50, 50, 50]
+        },
+        {
+            name: 'เพศหญิง',
+            data: [50, 50, 50, 50, 50]
+        }
+    ])
 
     useEffect(() => {
         fetchData()
@@ -50,12 +67,13 @@ const BarSocial = () => {
 
         let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
         await namelist(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!B98:B103')
-        await listData(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!D98:D103','ข้อมูลการวิเคราะห์ทางสถิติ!E98:E103')
+        await listData(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!D98:D103', 'ข้อมูลการวิเคราะห์ทางสถิติ!E98:E103')
     }
 
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
+
             setOptions({
                 xaxis: {
                     categories: _.flatten(list)
@@ -73,57 +91,39 @@ const BarSocial = () => {
             var woman = await Sheetapi.getSheet(token, value2)
             setSeries([{ name: "เพศชาย", data: _.flatten(man) }, { name: "เพศหญิง", data: _.flatten(woman) }])
         } catch (err) {
-            console.log(err);
+            props.onToken(true)
         }
     }
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="290"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="400"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="325"
-                    width="450"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart options={options}
-                    series={series}
-                    type="bar"
-                    height="350"
-                    width="500"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="bar"
-                    height="400"
-                    width="480"
-                />
-            </div>
+            {
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="bar"
+                        height="300"
+                        width="300"
+                    />
+                    :
+                    isTablet ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="400"
+                            width="500"
+                        />
+                        :
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="bar"
+                            height="300"
+                            width="600"
+                        />
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/donutSocial.js b/components/chart/donutSocial.js
index ccf0021d..8c4fa478 100644
--- a/components/chart/donutSocial.js
+++ b/components/chart/donutSocial.js
@@ -1,37 +1,32 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
-
-const DonutSocial = () => {
+const DonutSocial = props => {
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
     const [options, setOptions] = useState({
         title: {
             text: "บ้านพักอาศัยของประชากรผู้สูงอายุ"
         },
-        responsive: [{
-            breakpoint: 1000,
-            options: {
-                chart: {
-                    width: 250
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false },
-            }
-        }],
+        legend: {
+            position: 'bottom'
+        },
+        dataLabels: { enabled: false },
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
             }
-        }
+        },
+        labels: ["บ้านของตนเอง", "อาศัยกับครอบครัวเดิม", "อาศัยญาติ/พี่น้อง", "บ้านเช่า", "อื่นๆ"]
     })
 
-    const [dataname, setDataName] = useState([])
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([20, 20, 20, 20])
 
     useEffect(() => {
         fetchData()
@@ -63,62 +58,42 @@ const DonutSocial = () => {
             var data = _.flatten(result).map(Number)
             setSeries(data)
         } catch (err) {
-            console.log(err);
+            props.onToken(true)
         }
     }
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="430"
-                    height="150"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="400"
-                    height="200"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="450"
-                    height="200"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="450"
-                    height="200"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    height="250"
-                    width="450"
-
-                />
-            </div>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/lineHelp.js b/components/chart/lineHelp.js
index ab1f2316..c06be6f5 100644
--- a/components/chart/lineHelp.js
+++ b/components/chart/lineHelp.js
@@ -1,60 +1,43 @@
 import React, { useState, useEffect } from 'react'
-import Chart from "react-apexcharts";
+import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const LineHelp = () => {
+
+  const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
   const [options, setOptions] = useState({
-    chart: {
-      shadow: {
-        enabled: true,
-        color: '#000',
-        top: 18,
-        left: 7,
-        blur: 10,
-        opacity: 1
-      },
-      toolbar: {
-        show: false
-      }
+    title: {
+      text: 'ความต้องการให้หน่วยงานรัฐช่วยเหลือ',
+      align: 'center'
     },
     responsive: [{
-      breakpoint: 900,
+      breakpoint: 1000,
       options: {
-        dataLabels: { enabled: false },
-        legend: {
-          position: 'top',
-          horizontalAlign: 'center',
-          offsetY: -10,
-          offsetX: -5
-
+        plotOptions: {
+          bar: {
+            horizontal: false
+          }
         },
+        legend: {
+          position: "bottom"
+        }
       }
     }],
-    colors: ['#77B6EA', '#545454'],
-    dataLabels: {
-      enabled: true,
-    },
-    stroke: {
-      curve: 'smooth'
-    },
-    title: {
-      text: 'ความต้องการให้หน่วยงานของรัฐช่วยเหลือของประชากรผู้สูงอายุ',
-      align: 'left'
-    },
-    grid: {
-      borderColor: '#e7e7e7',
-      row: {
-        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
-        opacity: 0.5
+    plotOptions: {
+      bar: {
+        horizontal: true,
       },
     },
-    markers: {
-
-      size: 6
+    dataLabels: {
+      enabled: false
     },
-    yaxis: {
-      min: 0,
-      max: 60
+    legend: {
+      position: 'bottom',
+    },
+    fill: {
+      opacity: 1
     },
     tooltip: {
       y: {
@@ -63,18 +46,22 @@ const LineHelp = () => {
         }
       }
     },
-    legend: {
-      position: 'top',
-      horizontalAlign: 'right',
-      floating: true,
-      offsetY: -25,
-      offsetX: -5
+    xaxis: {
+      categories: ["ไม่ต้องการ", "ปัญหาด้านการประกอบอาชีพ", "ปัญหาด้านหนี้สิน", "ปัญหาด้านที่พักอาศัย", "ปัญหาด้านสุขภาพ", "อื่นๆ", "มากกว่า 1 ข้อ", "มากกว่า 3 ข้อ", "ทุกข้อ"]
     },
 
-    colors: ['#0693e3', '#00d084']
   })
 
-  const [series, setSeries] = useState([])
+  const [series, setSeries] = useState([
+    {
+      name: 'เพศชาย',
+      data: [50, 50, 50, 50, 50]
+    },
+    {
+      name: 'เพศหญิง',
+      data: [50, 50, 50, 50, 50]
+    }
+  ])
 
   useEffect(() => {
     fetchData()
@@ -113,56 +100,25 @@ const LineHelp = () => {
   }
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height="400"
-          width="300"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height="400"
-          width="500"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height="400"
-          width="700"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height="400"
-          width="700"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height="325"
-          width="625"
-        />
-      </div>
-    </React.Fragment>
+      {
+        isSmallScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="300"
+            width="300"
+          />
+          :
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="400"
+            width="600"
+          />
+      }
+    </React.Fragment >
   )
 }
 export default LineHelp;
\ No newline at end of file
diff --git a/components/chart/pieChart.js b/components/chart/pieChart.js
index 84ca5c56..7795fe19 100644
--- a/components/chart/pieChart.js
+++ b/components/chart/pieChart.js
@@ -1,37 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
-const PieChart = () => {
+const PieChart = props => {
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
     const [options, setOptions] = useState({
         title: {
             text: "เพศชาย"
         },
         dataLabels: { enabled: false },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 260,
-                    height: 260
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false },
-            }
-        }],
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
             }
-        }
+        },
+        legend: {
+            position: 'bottom'
+        },
+        labels: ["อายุน้อยกว่า 60 ปี",
+            "อายุ 60 ถึง 69 ปี",
+            "อายุ 70 ถึง 79 ปี",
+            "อายุ 80 ถึง 89 ปี",
+            "อายุมากกว่าหรือเท่ากับ 90 ปี"]
     })
 
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([20, 20, 20, 20])
 
     useEffect(() => {
         fetchData()
@@ -40,17 +40,31 @@ const PieChart = () => {
     const fetchData = async () => {
 
         let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
+
         await namelist(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!E9:E13')
         await listData(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!G9:G13')
+
     }
 
     const namelist = async (token, value) => {
         try {
             var list = await Sheetapi.getSheet(token, value)
-            console.log(list);
-            
 
             setOptions({
+                title: {
+                    text: "เพศชาย"
+                },
+                dataLabels: { enabled: false },
+                tooltip: {
+                    y: {
+                        formatter: function (val) {
+                            return val + " คน"
+                        }
+                    }
+                },
+                legend: {
+                    position: 'bottom'
+                },
                 labels: _.flatten(list)
             })
         } catch (err) {
@@ -65,61 +79,41 @@ const PieChart = () => {
             var data = _.flatten(result).map(Number)
             setSeries(data)
         } catch (err) {
-            console.log(err);
+            props.onToken(true)
         }
     }
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="450"
-                    height="250"
-                />
-            </div>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/pieChart2.js b/components/chart/pieChart2.js
index 0d1de1bd..9105103c 100644
--- a/components/chart/pieChart2.js
+++ b/components/chart/pieChart2.js
@@ -1,38 +1,37 @@
-import React, { useState,useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
-const PieChart = () => {
+const PieChart = props => {
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
     const [options, setOptions] = useState({
         title: {
             text: "เพศหญิง"
         },
         dataLabels: { enabled: false },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 260,
-                    height: 260
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false },
-            }
-        }],
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
             }
-        }
+        },
+        legend: {
+            position: 'bottom'
+        },
+        labels: ["อายุน้อยกว่า 60 ปี",
+            "อายุ 60 ถึง 69 ปี",
+            "อายุ 70 ถึง 79 ปี",
+            "อายุ 80 ถึง 89 ปี",
+            "อายุมากกว่าหรือเท่ากับ 90 ปี"]
     })
 
-    const [dataname, setDataName] = useState([])
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([25, 25, 25, 25])
 
 
     useEffect(() => {
@@ -51,10 +50,25 @@ const PieChart = () => {
             var list = await Sheetapi.getSheet(token, value)
 
             setOptions({
+                title: {
+                    text: "เพศหญิง"
+                },
+                dataLabels: { enabled: false },
+                tooltip: {
+                    y: {
+                        formatter: function (val) {
+                            return val + " คน"
+                        }
+                    }
+                },
+                legend: {
+                    position: 'bottom'
+                },
                 labels: _.flatten(list)
             })
         } catch (err) {
             console.log(err);
+
         }
     }
 
@@ -70,195 +84,37 @@ const PieChart = () => {
     }
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="donut"
-                    width="450"
-                    height="250"
-                />
-            </div>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
         </React.Fragment>
     )
 }
-export default PieChart
-// class PieChart extends Component {
-
-//     constructor(props) {
-//         super(props);
-
-//         this.state = {
-//             options: {},
-//             datalist: [],
-//             series: [],
-//         }
-//     }
-
-//     async componentDidMount() {
-//         let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-//         this.access_token = userOauth.data.access_token
-//         await this.listName('ข้อมูลการวิเคราะห์ทางสถิติ!B14:B18')
-//         await this.listData()
-//     }
-
-//     listName = async (value) => {
-//         try {
-//             this.list = await Sheetapi.getSheet(this.access_token, value)
-//             for (let i = 0; i < this.list.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     datalist: [...prevState.datalist, this.list[i][0]],
-//                 }))
-//             }
-
-//             this.setState({
-//                 options: {
-//                     labels: this.state.datalist,
-//                     title: {
-//                         text: "เพศหญิง"
-//                     },
-//                     responsive: [{
-//                         breakpoint: 900,
-//                         options: {
-//                             chart: {
-//                                 width: 260,
-//                                 height: 260
-//                             },
-//                             legend: {
-//                                 position: 'bottom'
-//                             },
-//                             dataLabels: { enabled: false },
-//                         }
-//                     }],
-//                     tooltip: {
-//                         y: {
-//                             formatter: function (val) {
-//                                 return val + " คน"
-//                             }
-//                         }
-//                     }
-//                 }
-//             })
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     listData = async () => {
-//         try {
-
-//             this.woman = await Sheetapi.getSheet(this.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!D14:D18')
-
-//             for (let i = 0; i < this.woman.length; i++) {
-
-//                 this.setState(prevState => ({
-//                     series: [...prevState.series, parseInt(this.woman[i][0])],
-//                 }))
-//             }
-
-//         } catch (err) {
-//             console.log(err);
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <React.Fragment>
-//                 <div className="warp-chart-small">
-//                     <Chart
-//                         options={this.state.options}
-//                         series={this.state.series}
-//                         type="donut"
-//                         width="500"
-//                         height="250"
-//                     />
-
-//                 </div>
-
-//                 <div className="warp-chart-mobile">
-//                     <Chart
-//                         options={this.state.options}
-//                         series={this.state.series}
-//                         type="donut"
-//                         width="500"
-//                         height="250"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-tablets">
-//                     <Chart
-//                         options={this.state.options}
-//                         series={this.state.series}
-//                         type="donut"
-//                         width="500"
-//                         height="250"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-desktops">
-//                     <Chart
-//                         options={this.state.options}
-//                         series={this.state.series}
-//                         type="donut"
-//                         width="500"
-//                         height="250"
-//                     />
-//                 </div>
-
-//                 <div className="warp-chart-large">
-//                     <Chart
-//                         options={this.state.options}
-//                         series={this.state.series}
-//                         type="donut"
-//                         width="450"
-//                         height="250"
-//                     />
-//                 </div>
-//             </React.Fragment>
-//         );
-//     }
-// }
-// export default PieChart;
+export default PieChart;
\ No newline at end of file
diff --git a/components/chart/pieDoc.js b/components/chart/pieDoc.js
index 40ee6982..50e0be00 100644
--- a/components/chart/pieDoc.js
+++ b/components/chart/pieDoc.js
@@ -1,23 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
-
-
+import { useMediaQuery } from 'react-responsive';
 
 const PieDoc = () => {
 
+  const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+  const isMobile = useMediaQuery({ maxWidth: 1280 })
+  const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
   const [options, setOptions] = useState({
-    title: { text: "สถานภาพการรับสวัสดิการจากรัฐของผู้สูงอายุ" },
-    responsive: [{
-      breakpoint: 800,
-      options: {
-        legend: {
-          position: 'bottom'
-        },
-        dataLabels: { enabled: false },
-      }
-    }],
+    title: { text: "สถานภาพการรับสวัสดิการของผู้สูงอายุ" },
 
+    dataLabels: { enabled: false },
     tooltip: {
       y: {
         formatter: function (val) {
@@ -25,13 +20,17 @@ const PieDoc = () => {
         }
       }
     },
+    legend: {
+      position: 'bottom'
+    },
+    labels: ["ไม่ได้รับสวัสดิการจากรัฐ", "อยู่ระหว่างลงทะเบียนรับเงินสงเคราะห์เบี้ยยังชีพ", "ได้รับเบี้ยยังชีพผู้สูงอายุ", "ได้รับเบี้ยยังชีพความพิการ", "ได้รับเบี้ยยังชีพผูู้ป่วย", "มีบัตรสวัสดิการเเห่งรัฐ", "มีบัตรประกันสังคม", "มากกว่าจาก 1 เเหล่ง", "อื่นๆ"],
 
     colors: ['#2196f3', '#00d084', '#ffc107',
       '#eb144c', '#673ab7', '#abb8c3',
       '#f78da7', '#ff6900', '#7bdcb5']
   })
 
-  const [series, setSeries] = useState([])
+  const [series, setSeries] = useState([20, 20, 20, 20])
 
   useEffect(() => {
     fetchData()
@@ -69,55 +68,27 @@ const PieDoc = () => {
 
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="400"
-          height="200"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="600"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="600"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="600"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="600"
-          height="300"
-        />
-      </div>
+      {
+          isMobile ?
+            <Chart
+              options={options}
+              series={series}
+              type="donut"
+              width="400"
+              height="200"
+            />
+            :
+            isSmallScreen ?
+              <Chart
+                options={options}
+                series={series}
+                type="donut"
+                width="200"
+                height="100"
+              />
+              :
+              null
+      }
     </React.Fragment>
   )
 }
diff --git a/components/chart/pieEconomy2.js b/components/chart/pieEconomy2.js
index f67b5ce3..59d49c12 100644
--- a/components/chart/pieEconomy2.js
+++ b/components/chart/pieEconomy2.js
@@ -1,24 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
-const PieEconomy2 = () => {
+const PieEconomy2 = props => {
+
+  const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+  const isMobile = useMediaQuery({ maxWidth: 1280 })
+  const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
   const [options, setOptions] = useState({
     title: { text: "อาชีพของประชากรผู้สูงอายุ" },
-    responsive: [{
-      breakpoint: 480,
-      options: {
-        chart: {
-          width: 290
-        },
-        legend: {
-          position: 'bottom'
-        },
-        dataLabels: { enabled: false },
-      }
-    }],
-
+    dataLabels: { enabled: false },
     tooltip: {
       y: {
         formatter: function (val) {
@@ -26,10 +19,14 @@ const PieEconomy2 = () => {
         }
       }
     },
+    legend: {
+      position: 'bottom'
+    },
+    labels: ["รับจ้าง", "ธุรกิจส่วนตัว", "ค้าขาย", "เกษตรกรรม", "ไม่มีอาชีพ", "อื่นๆ"],
     colors: ['#8ed1fc', '#7bdcb5', '#d3b3e5', '#ffd54f', '#ff8a65', '#90a4ae']
   })
 
-  const [series, setSeries] = useState([])
+  const [series, setSeries] = useState([20, 20, 20, 20])
 
   useEffect(() => {
     fetchData()
@@ -61,60 +58,41 @@ const PieEconomy2 = () => {
       var data = _.flatten(result).map(Number)
       setSeries(data)
     } catch (err) {
-      console.log(err);
+      props.onToken(true)
     }
   }
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="300"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="450"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="450"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="450"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="450"
-          height="300"
-        />
-      </div>
+      {
+        isBigScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="donut"
+            width="400"
+            height="200"
+          />
+          :
+          isMobile ?
+            <Chart
+              options={options}
+              series={series}
+              type="donut"
+              width="300"
+              height="200"
+            />
+            :
+            isSmallScreen ?
+              <Chart
+                options={options}
+                series={series}
+                type="donut"
+                width="200"
+                height="100"
+              />
+              :
+              null
+      }
     </React.Fragment>
   )
 }
diff --git a/components/chart/pieEconomy3.js b/components/chart/pieEconomy3.js
index 7b088f9c..3acf8759 100644
--- a/components/chart/pieEconomy3.js
+++ b/components/chart/pieEconomy3.js
@@ -1,66 +1,32 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 
 const PieEconomy3 = () => {
+  const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+  const isMobile = useMediaQuery({ maxWidth: 1280 })
+  const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
   const [options, setOptions] = useState({
     title: { text: "การออมของประชากรผู้สูงอายุ" },
-    plotOptions: {
-      radialBar: {
-        offsetY: -5,
-        startAngle: 0,
-        endAngle: 270,
-        hollow: {
-          margin: 5,
-          size: '30%',
-          background: 'transparent',
-          image: undefined,
-        },
-        dataLabels: {
-          name: {
-            show: false,
-
-          },
-          value: {
-            show: false,
-          }
+    dataLabels: { enabled: false },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return val + " คน"
         }
       }
     },
-    colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
     legend: {
-      show: true,
-      floating: true,
-      fontSize: '16px',
-      position: 'left',
-      offsetX: 10,
-      offsetY: 70,
-      labels: {
-        useSeriesColors: true,
-      },
-      markers: {
-        size: 0
-      },
-      formatter: function (seriesName, opts) {
-        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex] + " คน "
-      },
-      itemMargin: {
-        horizontal: 1,
-      }
+      position: 'bottom'
     },
-    responsive: [{
-      breakpoint: 480,
-      options: {
-        legend: {
-          show: false
-        }
-      }
-    }
-    ]
+    labels: ["มีการออม", "ไม่มีการออม"],
+    colors: ['#00d084', '#eb144c'],
   })
 
-  const [series, setSeries] = useState([])
+  const [series, setSeries] = useState([50, 50])
 
   useEffect(() => {
     fetchData()
@@ -99,13 +65,38 @@ const PieEconomy3 = () => {
 
 
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height="350"
-      width="400"
-    />
+    <React.Fragment>
+      {
+        isBigScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="donut"
+            width="400"
+            height="200"
+          />
+          :
+          isMobile ?
+            <Chart
+              options={options}
+              series={series}
+              type="donut"
+              width="300"
+              height="200"
+            />
+            :
+            isSmallScreen ?
+              <Chart
+                options={options}
+                series={series}
+                type="donut"
+                width="200"
+                height="100"
+              />
+              :
+              null
+      }
+    </React.Fragment>
   )
 }
 export default PieEconomy3;
diff --git a/components/chart/pieHelp.js b/components/chart/pieHelp.js
index c1039b0c..2e96b51b 100644
--- a/components/chart/pieHelp.js
+++ b/components/chart/pieHelp.js
@@ -1,24 +1,20 @@
-import React, { useState, useEffect }  from 'react';
+import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
-const PieHelp = () => {
+const PieHelp = props => {
+
+  const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+  const isMobile = useMediaQuery({ maxWidth: 1280 })
+  const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
   const [options, setOptions] = useState({
     title: { text: "สภาพความเดือดร้อนในปัจจุบันของผู้สูงอายุ", align: 'left' },
-    responsive: [{
-      breakpoint: 480,
-      options: {
-        chart: {
-          width: 290
-        },
-        legend: {
-          position: 'bottom'
-        },
-        dataLabels: { enabled: false },
-      }
-    }],
-
+    legend: {
+      position: 'bottom'
+    },
+    dataLabels: { enabled: false },
     tooltip: {
       y: {
         formatter: function (val) {
@@ -28,10 +24,11 @@ const PieHelp = () => {
     },
     colors: ['#2196f3', '#00d084', '#ffc107',
       '#eb144c', '#673ab7', '#abb8c3',
-      '#f78da7', '#ff6900', '#7bdcb5']
+      '#f78da7', '#ff6900', '#7bdcb5'],
+    labels: ["ไม่มีรายได้/รายได้น้อย", "การประกอบอาชีพ", "มีหนี้สิน", "ที่พักอาศัย", "ปัญหาสุขภาพ", "อื่นๆ", "มากกว่า 1 ข้อ", "มากกว่า 3 ข้อ", "ทุกข้อ"]
   })
 
-  const [series, setSeries] = useState([])
+  const [series, setSeries] = useState([20, 20, 20, 20])
 
   useEffect(() => {
     fetchData()
@@ -63,62 +60,42 @@ const PieHelp = () => {
       var data = _.flatten(result).map(Number)
       setSeries(data)
     } catch (err) {
-      console.log(err);
+      props.onToken(true)
     }
   }
 
-
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="300"
-          height="350"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="450"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="550"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="600"
-          height="300"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="pie"
-          width="700"
-          height="250"
-        />
-      </div>
+      {
+        isBigScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="donut"
+            width="400"
+            height="200"
+          />
+          :
+          isMobile ?
+            <Chart
+              options={options}
+              series={series}
+              type="donut"
+              width="300"
+              height="200"
+            />
+            :
+            isSmallScreen ?
+              <Chart
+                options={options}
+                series={series}
+                type="donut"
+                width="200"
+                height="100"
+              />
+              :
+              null
+      }
     </React.Fragment>
   )
 }
diff --git a/components/chart/pieHospital2.js b/components/chart/pieHospital2.js
index 2dde1842..9ede9782 100644
--- a/components/chart/pieHospital2.js
+++ b/components/chart/pieHospital2.js
@@ -1,24 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
-
+import { useMediaQuery } from 'react-responsive';
 
 const PieHospital2 = () => {
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
     const [options, setOptions] = useState({
         title: { text: "สภาพความพิการ" },
-
-        responsive: [{
-            breakpoint: 700,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false },
-            }
-        }],
+        dataLabels: { enabled: false },
         tooltip: {
             y: {
                 formatter: function (val) {
@@ -26,12 +19,15 @@ const PieHospital2 = () => {
                 }
             }
         },
+        legend: {
+            position: 'bottom'
+        },
         colors: ['#2196f3', '#00d084', '#ffc107',
-            '#eb144c', '#673ab7', '#abb8c3',
-            '#f78da7', '#ff6900', '#7bdcb5']
+            '#eb144c', '#673ab7', '#ff6900', '#7bdcb5'],
+        labels: ["ไม่เป็นผู้พิการ", "ทางการมองเห็น", "ทางการได้ยินหรือสื่อความหมาย", "ทางกายหรือการเคลื่อนไหว", "ทางจิตใจหรือพฤติกรรม", "ทางสติปัญญาหรือการเรียนรู้", "อื่นๆ"]
     })
 
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([20, 20, 20, 20])
 
     useEffect(() => {
         fetchData()
@@ -69,55 +65,25 @@ const PieHospital2 = () => {
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="300"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="300"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
+            {
+
+                isSmallScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="300"
+                        height="200"
+                    />
+                    :
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+            }
         </React.Fragment>
     )
 }
diff --git a/components/chart/pieService.js b/components/chart/pieService.js
index 074a64f0..a2548222 100644
--- a/components/chart/pieService.js
+++ b/components/chart/pieService.js
@@ -1,22 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const PieService = () => {
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
     const [options, setOptions] = useState({
         title: { text: "การเข้าร่วมกิจกรรมทางสังคม/เทศบาล" },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false }
-            }
-        }],
+        legend: {
+            position: 'bottom'
+        },
+        dataLabels: { enabled: false },
         tooltip: {
             y: {
                 formatter: function (val) {
@@ -24,10 +21,11 @@ const PieService = () => {
                 }
             }
         },
-        colors: ['#ff8a65', '#ffd54f', '#90a4ae']
+        colors: ['#ff8a65', '#ffd54f', '#90a4ae'],
+        labels:  ["เข้าร่วมประจำ", "เข้าร่วมนานๆ ครั้ง", "ไม่เข้าร่วม"]
     })
 
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([25,25,50])
 
     useEffect(() => {
         fetchData()
@@ -62,13 +60,38 @@ const PieService = () => {
         }
     }
     return (
-        <Chart
-            options={options}
-            series={series}
-            type="pie"
-            height="300"
-            width="500"
-        />
+        <React.Fragment>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
+        </React.Fragment>
     )
 }
 export default PieService;
diff --git a/components/chart/pieService2.js b/components/chart/pieService2.js
index 5a43893d..61a3fc4a 100644
--- a/components/chart/pieService2.js
+++ b/components/chart/pieService2.js
@@ -1,22 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const PieService2 = () => {
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
     const [options, setOptions] = useState({
         title: { text: "การเข้าร่วมกิจกรรมทางศาสนกิจ" },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false }
-            }
-        }],
+        legend: {
+            position: 'bottom'
+        },
+        dataLabels: { enabled: false },
         tooltip: {
             y: {
                 formatter: function (val) {
@@ -24,10 +21,11 @@ const PieService2 = () => {
                 }
             }
         },
-        colors: ['#8ed1fc', '#7bdcb5', '#d3b3e5']
+        colors: ['#8ed1fc', '#7bdcb5', '#d3b3e5'],
+        labels: ["เข้าร่วมประจำ", "เข้าร่วมนานๆ ครั้ง", "ไม่เข้าร่วม"]
     })
 
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([20, 25, 50])
 
     useEffect(() => {
         fetchData()
@@ -64,14 +62,38 @@ const PieService2 = () => {
     }
 
     return (
-        <Chart
-            options={options}
-            series={series}
-            type="pie"
-            height="300"
-            width="500"
-
-        />
+        <React.Fragment>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
+        </React.Fragment>
     )
 }
 export default PieService2;
diff --git a/components/chart/pieSocial.js b/components/chart/pieSocial.js
index 291a2628..a8b00605 100644
--- a/components/chart/pieSocial.js
+++ b/components/chart/pieSocial.js
@@ -1,29 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
-
-
+import { useMediaQuery } from 'react-responsive';
 
 const PieSocial = () => {
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
     const [options, setOptions] = useState({
         title: { text: "สภาพบ้านพักอาศัยของประชากรผู้สูงอายุ" },
         legend: {
             position: 'bottom'
         },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false }
-            }
-        }],
-
+        legend: {
+            position: 'bottom'
+        },
+        dataLabels: { enabled: false },
         tooltip: {
             y: {
                 formatter: function (val) {
@@ -31,12 +24,11 @@ const PieSocial = () => {
                 }
             }
         },
-
+        labels: ["เหมาะสม คงทนถาวร", "บ้านที่อยู่อาศัยทรุดโทรม สภาพเก่ามาก", "วัสดุก่อสร้างไม่ถาวร ไม่คงทน", "อื่นๆ"],
         colors: ['#7bdcb5', '#d3b3e5', '#ffd54f', '#90a4ae']
     })
 
-    const [dataname, setDataName] = useState([])
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([20, 20, 20, 20])
 
     useEffect(() => {
         fetchData()
@@ -72,14 +64,38 @@ const PieSocial = () => {
         }
     }
     return (
+       <React.Fragment>
+           {
+                isBigScreen ?
                     <Chart
-                options={options}
-                series={series}
-                type="pie"
-                height="250"
-                width="480"
-
-            />
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
+       </React.Fragment>
     )
 }
 export default PieSocial;
diff --git a/components/chart/pieSocial2.js b/components/chart/pieSocial2.js
index ebfdd945..a2dff686 100644
--- a/components/chart/pieSocial2.js
+++ b/components/chart/pieSocial2.js
@@ -1,25 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
 const PieSocial2 = () => {
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
+
     const [options, setOptions] = useState({
         title: { text: "สภาพบ้านของประชากรผู้สูงอายุ" },
         legend: {
             position: 'bottom'
         },
-        responsive: [{
-            breakpoint: 900,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false }
-            }
-        }],
+        dataLabels: { enabled: false },
 
         tooltip: {
             y: {
@@ -28,12 +23,11 @@ const PieSocial2 = () => {
                 }
             }
         },
-
+        labels: ["สภาพบ้านเหมาะสม เพียงพอต่อการพักอาศัย", "สภาพบ้านคับเเคบ ไม่เพียงพอต่อการพักอาศัย"],
         colors: ['#7bdcb5', '#d3b3e5', '#ffd54f', '#90a4ae']
     })
 
-    const [dataname, setDataName] = useState([])
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([50,50])
 
     useEffect(() => {
         fetchData()
@@ -70,13 +64,38 @@ const PieSocial2 = () => {
     }
 
     return (
-        <Chart
-            options={options}
-            series={series}
-            type="pie"
-            height="250"
-            width="450"
-        />
+        <React.Fragment>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
+        </React.Fragment>
     )
 }
 export default PieSocial2;
diff --git a/components/chart/piehospital.js b/components/chart/piehospital.js
index cd9ab0fd..b821c87e 100644
--- a/components/chart/piehospital.js
+++ b/components/chart/piehospital.js
@@ -1,33 +1,31 @@
 import React, { useState, useEffect } from 'react';
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
+import { useMediaQuery } from 'react-responsive';
 
+const PieHospital = props => {
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 1281 })
+    const isMobile = useMediaQuery({ maxWidth: 1280 })
+    const isSmallScreen = useMediaQuery({ maxWidth: 576 })
 
-const PieHospital = () => {
     const [options, setOptions] = useState({
         title: { text: "สุขภาพของผู้สูงอายุ" },
-        responsive: [{
-            breakpoint: 700,
-            options: {
-                chart: {
-                    width: 300
-                },
-                legend: {
-                    position: 'bottom'
-                },
-                dataLabels: { enabled: false },
-            }
-        }],
+        dataLabels: { enabled: false },
+        legend: {
+            position: 'bottom'
+        },
         tooltip: {
             y: {
                 formatter: function (val) {
                     return val + " คน"
                 }
             }
-        }
+        },
+        labels: ["สมบูรณ์เเข็งเเรง", "ดูเเลช่วยเหลือตนเองได้", "ต้องได้รับการช่วยเหลือบ้าง", "ช่วยเหลือตนเองไม่ได้"]
     })
 
-    const [series, setSeries] = useState([])
+    const [series, setSeries] = useState([25, 25, 25, 25])
 
     useEffect(() => {
         fetchData()
@@ -59,61 +57,42 @@ const PieHospital = () => {
             var data = _.flatten(result).map(Number)
             setSeries(data)
         } catch (err) {
-            console.log(err);
+            props.onToken(true)
         }
     }
 
     return (
         <React.Fragment>
-            <div className="warp-chart-small">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="300"
-                />
-            </div>
-
-            <div className="warp-chart-mobile">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-tablets">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-desktops">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
-
-            <div className="warp-chart-large">
-                <Chart
-                    options={options}
-                    series={series}
-                    type="pie"
-                    width="500"
-                    height="250"
-                />
-            </div>
+            {
+                isBigScreen ?
+                    <Chart
+                        options={options}
+                        series={series}
+                        type="donut"
+                        width="400"
+                        height="200"
+                    />
+                    :
+                    isMobile ?
+                        <Chart
+                            options={options}
+                            series={series}
+                            type="donut"
+                            width="300"
+                            height="200"
+                        />
+                        :
+                        isSmallScreen ?
+                            <Chart
+                                options={options}
+                                series={series}
+                                type="donut"
+                                width="200"
+                                height="100"
+                            />
+                            :
+                            null
+            }
         </React.Fragment>
     )
 }
diff --git a/components/cover.js b/components/cover.js
new file mode 100644
index 00000000..b8cdf7a4
--- /dev/null
+++ b/components/cover.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import Link from 'next/link'
+import { useMediaQuery } from 'react-responsive'
+
+
+const Cover = () => {
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 768.99 })
+
+    return (
+        <div className="warp-cover">
+            <div className="page-content">
+                {
+                    isSmallScreen ?
+                        <div className="container-fluid">
+                            <div className="title">
+                                <h1>เว็บฐานข้อมูลผู้สูงอายุ</h1>
+                                <h1>และอินโฟกราฟิก</h1>
+                                <div className="detail">
+                                    <div className="text-content">
+                                        <h6>ElderlyDB เป็นการนำข้อมูลทางสถิติเกี่ยวกับผู้สูงอายุ</h6>
+                                        <h6>มาเเสดงผลในรูปของกราฟ</h6>
+                                        <h6>รูปแบบต่าง ๆ</h6>
+                                    </div>
+                                </div>
+                                <Link href="/main">
+                                    <h5>เข้าสู่หน้าหลัก</h5>
+                                </Link>
+                            </div>
+                        </div>
+                        :
+                        <div className="container-fluid">
+                            <div className="title">
+                                <h1 className="animated fadeInDown delay-s">ระบบฐานข้อมูลผู้สูงอายุ</h1>
+                                <h1 className="animated fadeInDown delay-s">และอินโฟกราฟิก</h1>
+                                <div className="detail">
+                                    <svg className="animated zoomIn delay-1s" >
+                                        <line x1="0" y1="0" x2="0" y2="100" />
+                                    </svg>
+                                    <div className="text-content">
+                                        <h6 className="animated fadeInDown delay-1s">ElderlyDB เป็นการนำข้อมูลทางสถิติเกี่ยวกับผู้สูงอายุ</h6>
+                                        <h6 className="animated fadeInDown delay-1s">มาเเสดงผลในรูปเเบบของกราฟ</h6>
+                                        <h6 className="animated fadeInDown delay-1s">ในรูปแบบต่าง ๆ  </h6>
+                                    </div>
+                                </div>
+
+                                <Link href="/main">
+                                    <h5 className="animated zoomIn delay-1s" >เข้าสู่หน้าหลัก</h5>
+                                </Link>
+                            </div>
+                            <div className="cover">
+                                <img src="../../static/testcoverNew.png" alt="cover" />
+                            </div>
+                        </div>
+                }
+
+            </div>
+        </div>
+    )
+
+}
+export default Cover
diff --git a/components/error.js b/components/error.js
new file mode 100644
index 00000000..b14a3a73
--- /dev/null
+++ b/components/error.js
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
+import NavBar from './layout/nav';
+
+const Error = () => {
+
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [home, setHome] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "ติดต่อ", href: "/index/contact" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    const [homeMin, setHomeMin] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "ติดต่อ", href: "/index/contact" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    return (
+        <div className="warp-error">
+            <NavBar name="empty" tab={isSmallScreen ? homeMin : home} />
+            <div className="content-error">
+                <img src="/static/empty.jpg" alt="empty" />
+                <div className="title-error">
+                    <h4>ความผิดพลาด 404 หน้ายังไม่พร้อมใช้งาน</h4>
+                    <h4>โปรดกลับสู่หน้าแรก</h4>
+                </div>
+            </div>
+            <Link href="/">
+                <h5>หน้าแรก</h5>
+            </Link>
+        </div>
+    )
+}
+export default Error;
\ No newline at end of file
diff --git a/components/footer.js b/components/footer.js
new file mode 100644
index 00000000..42e8c97c
--- /dev/null
+++ b/components/footer.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <div className="warp-footer">
+            <h6>© 2019 Elderly Database and Infographics.</h6>
+        </div>
+    )
+}
+export default Footer;
diff --git a/components/info.js b/components/info.js
new file mode 100644
index 00000000..a64492d1
--- /dev/null
+++ b/components/info.js
@@ -0,0 +1,333 @@
+import React, { useState, useEffect } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import Sheetapi from '../config/api';
+import moment from 'moment';
+
+moment.locale("th")
+moment().format('LL');
+
+const Info = () => {
+
+    const isTablet = useMediaQuery({ maxDeviceWidth: 1024 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [data, setData] = useState([
+        {
+            title: "เพศชาย",
+            number: 0,
+            color: "primary"
+        },
+        {
+            title: "เพศหญิง",
+            number: 0,
+            color: "primary"
+        },
+        {
+            title: "รวม",
+            number: 0,
+            color: "primary"
+        }
+    ])
+    const [color, setColor] = useState(["primary", "warning", "danger"])
+
+    useEffect(() => {
+        fetchData()
+    }, [data])
+
+    const fetchData = async () => {
+        window.localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
+        let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
+        await dataList(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!B10:D10')
+    }
+
+    const dataList = async (token) => {
+        try {
+            var gender = await Sheetapi.getSheet(token, 'ข้อมูลการวิเคราะห์ทางสถิติ!B9:D9')
+            var number = await Sheetapi.getSheet(token, 'ข้อมูลการวิเคราะห์ทางสถิติ!B10:D10')
+            for (let i = 0; i <= 2; i++) {
+                var value = await {
+                    title: gender[0][i],
+                    number: parseInt(number[0][i]),
+                    color: color[i]
+                }
+                var newData = [...newData, value]
+            }
+            newData.shift()
+            setData(newData)
+
+        } catch (err) {
+            console.log(err);
+        }
+    }
+
+
+
+    return (
+        <React.Fragment>
+            {
+                isSmallScreen ?
+                    <div className="warp-info">
+                        <div className="page-content">
+                            <div className="container-data">
+                                <div className="content-data">
+                                    <div className="other-data">
+                                        <div className="title-other-data">
+                                            <img src="/static/logomain.svg" alt="icon" />
+                                            <h5>ข้อมูลผู้สูงอายุ</h5>
+                                        </div>
+
+                                        <p>วันที่ {moment().add(543, 'year').format('LL')}</p>
+                                        <h6>ที่มา: แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ </h6>
+                                        <h6>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</h6>
+                                    </div>
+                                    <div className="main-data">
+                                        {
+                                            data ? data.map((item, index) => (
+                                                <React.Fragment key={index}>
+                                                    <div className="card-data" >
+                                                        <div className="title">
+                                                            <h5>{item.title}</h5>
+
+                                                            <p>{item.number} คน</p>
+                                                        </div>
+                                                        <div className="progress">
+                                                            <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                                role="progressbar"
+                                                                style={{ width: item.number }}
+                                                                aria-valuenow={item.number}
+                                                                aria-valuemin="0"
+                                                                aria-valuemax="100">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </React.Fragment>
+                                            ))
+                                                :
+                                                <div className="card-data">
+                                                    <div className="title">
+                                                        <h5>{item.title}</h5>
+
+                                                        <p>{item.number} คน</p>
+                                                    </div>
+                                                    <div className="progress">
+                                                        <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                            role="progressbar"
+                                                            style={{ width: item.number }}
+                                                            aria-valuenow={item.number}
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="content-data-agency">
+                                <div className="main-agency-row-mobile">
+                                    <div className="title-main-agency">
+                                        <h6>ตรวจสอบเบี้ยยังชีพผู้สูงอายุ</h6>
+                                    </div>
+                                    <div className="detail-main-agency">
+                                        <a href="http://kathucity.go.th/public/allowance/data/index/menu/194">
+                                            <p className="p-click">โปรดคลิกที่นี่</p>
+                                        </a>
+                                        <p>คำเเนะนำ:<br /> โปรดเตรียมบัตรประชาชนของท่าน <br />เพื่อใช้ในการตรวจสอบข้อมูล</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    :
+                    isTablet || isMobile ?
+                        <div className="warp-info">
+                            <div className="page-content">
+                                <div className="content-data-agency">
+                                    <div className="head-agency">
+                                        <img src="/static/imgContact1.png" alt="logo" />
+                                        <div className="title-agency">
+                                            <h2>เทศบาลเมืองกะทู้</h2>
+                                            <h6>จังหวัดภูเก็ต</h6>
+                                        </div>
+                                    </div>
+                                    <div className="main-agency-row-mobile">
+                                        <div className="title-main-agency">
+                                            <h6>ตรวจสอบเบี้ยยังชีพผู้สูงอายุ</h6>
+                                        </div>
+                                        <div className="detail-main-agency">
+                                            <a href="http://kathucity.go.th/public/allowance/data/index/menu/194">
+                                                <p className="p-click">โปรดคลิกที่นี่</p>
+                                            </a>
+                                            <p>คำเเนะนำ:<br /> โปรดเตรียมบัตรประชาชนของท่าน <br />เพื่อใช้ในการตรวจสอบข้อมูล</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="container-data">
+                                    <div className="title-data">
+                                        <h6>จำนวนผู้สูงอายุ</h6>
+                                    </div>
+                                    <div className="content-data">
+                                        <div className="main-data">
+                                            {
+                                                data ? data.map((item, index) => (
+                                                    <React.Fragment key={index}>
+                                                        <div className="card-data" >
+                                                            <div className="title">
+                                                                <h5>{item.title}</h5>
+
+                                                                <p>{item.number} คน</p>
+                                                            </div>
+                                                            <div className="progress">
+                                                                <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                                    role="progressbar"
+                                                                    style={{ width: item.number }}
+                                                                    aria-valuenow={item.number}
+                                                                    aria-valuemin="0"
+                                                                    aria-valuemax="100">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </React.Fragment>
+                                                ))
+                                                    :
+                                                    <div className="card-data">
+                                                        <div className="title">
+                                                            <h5>{item.title}</h5>
+
+                                                            <p>{item.number} คน</p>
+                                                        </div>
+                                                        <div className="progress">
+                                                            <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                                role="progressbar"
+                                                                style={{ width: item.number }}
+                                                                aria-valuenow={item.number}
+                                                                aria-valuemin="0"
+                                                                aria-valuemax="100">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                            }
+                                        </div>
+
+                                        <div className="other-data">
+                                            <div className="title-other-data">
+                                                <img src="/static/logomain.svg" alt="icon" />
+                                                <h5>ข้อมูลผู้สูงอายุ</h5>
+                                            </div>
+
+                                            <p>วันที่ {moment().add(543, 'year').format('LL')}</p>
+                                            <h6>ที่มา: แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ </h6>
+                                            <h6>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        :
+
+                        <div className="warp-info">
+                            <div className="page-content">
+                                <div className="content-data-agency">
+                                    <div className="head-agency">
+                                        <img src="/static/imgContact1.png" alt="logo" />
+                                        <div className="title-agency">
+                                            <h2>เทศบาลเมืองกะทู้</h2>
+                                            <h6>จังหวัดภูเก็ต</h6>
+                                        </div>
+
+                                    </div>
+                                    <div className="main-agency">
+                                        <div className="main-agency-row">
+                                            <div className="title-main-agency">
+                                                <h6>กองสวัสดิการสังคม</h6>
+                                            </div>
+                                            <div className="detail-main-agency">
+                                                <h6>วิสัยทัศน์</h6>
+                                                <p>"มุ่งเน้นพัฒนาองค์ความรู้ <br />เสริมสร้างการมีส่วนร่วม
+                            ลดปัญหาผู้ด้อยโอกาส<br /> พัฒนาความเข้มแข็งของชุมชนอย่างยั่งยืน"</p>
+                                                <h6>หน้าที่</h6>
+                                                <p>1. ฝ่ายสังคมสงเคราะห์<br />2. ฝ่ายพัฒนาชุมชน <br />3. งานธุรการ</p>
+
+                                            </div>
+                                        </div>
+                                        <div className="main-agency-row">
+                                            <div className="title-main-agency">
+                                                <h6>ตรวจสอบเบี้ยยังชีพผู้สูงอายุ</h6>
+                                            </div>
+                                            <div className="detail-main-agency">
+                                                <a href="http://kathucity.go.th/public/allowance/data/index/menu/194">
+                                                    <p className="p-click">โปรดคลิกที่นี่</p>
+                                                </a>
+                                                <p>คำเเนะนำ: โปรดเตรียมบัตรประชาชนของท่าน เพื่อใช้<br />ในการตรวจสอบข้อมูล</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="container-data">
+                                    <div className="title-data">
+                                        <h6>จำนวนผู้สูงอายุ</h6>
+                                    </div>
+                                    <div className="content-data">
+                                        <div className="main-data">
+                                            {
+                                                data ? data.map((item, index) => (
+                                                    <React.Fragment key={index}>
+                                                        <div className="card-data" >
+                                                            <div className="title">
+                                                                <h5>{item.title}</h5>
+
+                                                                <p>{item.number} คน</p>
+                                                            </div>
+                                                            <div className="progress">
+                                                                <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                                    role="progressbar"
+                                                                    style={{ width: item.number }}
+                                                                    aria-valuenow={item.number}
+                                                                    aria-valuemin="0"
+                                                                    aria-valuemax="100">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </React.Fragment>
+                                                ))
+                                                    :
+                                                    <div className="card-data">
+                                                        <div className="title">
+                                                            <h5>{item.title}</h5>
+
+                                                            <p>{item.number} คน</p>
+                                                        </div>
+                                                        <div className="progress">
+                                                            <div className={`progress-bar bg-${item.color} progress-bar-striped progress-bar-animated`}
+                                                                role="progressbar"
+                                                                style={{ width: item.number }}
+                                                                aria-valuenow={item.number}
+                                                                aria-valuemin="0"
+                                                                aria-valuemax="100">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                            }
+                                        </div>
+
+                                        <div className="other-data">
+                                            <div className="title-other-data">
+                                                <img src="/static/logomain.svg" alt="icon" />
+                                                <h5>ข้อมูลผู้สูงอายุ</h5>
+                                            </div>
+
+                                            <p>วันที่ {moment().add(543, 'year').format('LL')}</p>
+                                            <h6>ที่มา: แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ </h6>
+                                            <h6>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+            }
+        </React.Fragment>
+    )
+}
+export default Info
\ No newline at end of file
diff --git a/components/layout/Map.js b/components/layout/Map.js
index 834595fd..b1eb2a63 100644
--- a/components/layout/Map.js
+++ b/components/layout/Map.js
@@ -28,20 +28,7 @@ const colorScale = scaleLinear()
         "#79d27d"
     ])
 
-const SpinnerPage = () => {
-    return (
-        <React.Fragment>
-            <div>
-                <Typed
-                    strings={['กรุณรอสักครู่...', 'กำลังดาวน์โหลด...']}
-                    typeSpeed={45}
-                />
-            </div>
-        </React.Fragment>
-    );
-}
-
-class StudentMap extends Component {
+class Map extends Component {
     constructor() {
         super()
         this.state = {
@@ -49,7 +36,25 @@ class StudentMap extends Component {
             geographyPaths: [],
             center: [98.3185, 7.9801249],
             zoom: 40,
-            dataList: []
+            dataList: [
+                ["Kamala", "กมลา", "0", "<h6>ตำบล: กมลา </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Kathu", "กะทู้", "0", "<h6>ตำบล: กะทู้ </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Pa Tong", "ป่าตอง", "0", "<h6>ตำบล: ป่าตอง </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Chalong", "ฉลอง", "0", "<h6>ตำบล: ฉลอง </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Ka Ron", "กะรน", "0", "<h6>ตำบล: กะรน </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Ko Kaeo", "เกาะแก้ว", "0", "<h6>ตำบล: เกาะแก้ว </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Ratsada", "รัษฎา", "0", "<h6>ตำบล: รัษฎา </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Rawai", "ราไวย์", "0", "<h6>ตำบล: ราไวย์ </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Talat Nuea", "ตลาดเหนือ", "0", "<h6>ตำบล: ตลาดเหนือ </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Talat Yai", "ตลาดใหญ่", "0", "<h6>ตำบล: ตลาดใหญ่ </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Wichit", "วิชิต", "0", "<h6>ตำบล: วิชิต </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Choeng Tale", "เชิงทะเล", "0", "<h6>ตำบล: เชิงทะเล </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Mai Khao", "ไม้ขาว", "0", "<h6>ตำบล: ไม้ขาว </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Pa Khlok", "ป่าคลอก", "0", "<h6>ตำบล: ป่าคลอก </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Sakhu", "สาคู", "0", "<h6>ตำบล: สาคู </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Si Sunthon", "ศรีสุนทร", "0", "<h6>ตำบล: สาคู </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+                ["Thep Krasatti", "เทพกระษัตรี", "0", "<h6>ตำบล: กมลา </h6>จำนวนผู้สูงอายุ: 0 คน</div>"],
+            ]
 
         }
         this.loadPaths = this.loadPaths.bind(this)
@@ -60,14 +65,9 @@ class StudentMap extends Component {
 
     async componentDidMount() {
         let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-        this.access_token = userOauth.data.access_token
-
-        setTimeout(() => {
-            this.listName('แผนที่!B5:E21')
-        }, 1000)
+        this.access_token = `${userOauth != null ? userOauth.data.access_token : ""}`
+        this.listName('แผนที่!B5:E21')
         this.loadPaths()
-
-
     }
 
     listName = async (v) => {
@@ -75,9 +75,10 @@ class StudentMap extends Component {
 
             this.list = await Sheetapi.getSheet(this.access_token, v)
             this.setState({ dataList: this.list })
+            this.props.onToken(false)
 
         } catch (err) {
-            console.log(err);
+            this.props.onToken(true)
         }
     }
 
@@ -115,9 +116,9 @@ class StudentMap extends Component {
     render() {
 
         const { dataList } = this.state
-        if (dataList.length === 0) {
-            return SpinnerPage()
-        }
+        // if (dataList.length === 0) {
+        //     return SpinnerPage()
+        // }
 
         return (
             <React.Fragment >
@@ -173,7 +174,7 @@ class StudentMap extends Component {
                                                             outline: "none",
                                                         },
                                                         pressed: {
-                                                            fill: "#FF5722",
+                                                            fill: "#c4def6",
                                                             stroke: "#40bf45",
                                                             strokeWidth: 0.075,
                                                             outline: "none",
@@ -202,4 +203,4 @@ class StudentMap extends Component {
     }
 }
 
-export default StudentMap
+export default Map
diff --git a/components/layout/cardcontact.js b/components/layout/cardcontact.js
deleted file mode 100644
index 4762a779..00000000
--- a/components/layout/cardcontact.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import { Tag, TagGroup, Timeline, Carousel } from 'rsuite';
-import 'rsuite/lib/styles/index.less';
-
-class Cardcontact extends React.Component {
-
-    static defaultProps = {
-
-        img: "/static/Profile.svg",
-        title: "",
-        name: "xxx ",
-        sername: "xxxx",
-        position: "",
-        tel: "06-xxxxxx-xx"
-
-    }
-
-    render() {
-
-        const { img, title, name, sername, position, tel } = this.props
-
-        return (
-            <React.Fragment>
-                <div className="warp-card-contact">
-                    <div className="card-contact">
-                        <div className="contact">
-                            <div className="contact-img">
-                                <img src={img} alt="pic" />
-                            </div>
-                            <div className="contact-data">
-                                <h4>{title}{name} {sername}</h4>
-
-                                <TagGroup>
-                                    {
-                                        position == "กองสวัสดิการสังคม" ?
-                                            <Tag color="yellow">กองสวัสดิการสังคม</Tag>
-                                            :
-                                            position == "กองสาธารณสุขและสิ่งแวดล้อม" ?
-                                                <Tag color="green">กองสาธารณสุขและสิ่งแวดล้อม</Tag>
-                                                :
-                                                position == "กองวิชาการและแผนงาน" ?
-                                                    <Tag color="blue">กองวิชาการและแผนงาน</Tag>
-                                                    :
-                                                    position == "กองการศึกษา" ?
-                                                        <Tag color="orange">กองการศึกษา</Tag>
-                                                        :
-                                                        null
-                                    }
-                                </TagGroup>
-                                {/* <text>""</text> */}
-                                <h6>เบอร์โทรติดต่อ: {tel}</h6>
-                            </div>
-
-                            <div className="contact-icon">
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-
-            </React.Fragment>
-
-        )
-    }
-}
-export default Cardcontact;
\ No newline at end of file
diff --git a/components/layout/cardmain.js b/components/layout/cardmain.js
deleted file mode 100644
index 0dab8372..00000000
--- a/components/layout/cardmain.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Sheetapi from '../../config/api'
-import CountUp from 'react-countup';
-import Link from 'next/link';
-import _ from 'lodash'
-
-const CardData = () => {
-
-    const [data, setData] = useState(false)
-
-    useEffect(() => {
-        fetchData()
-    }, [])
-
-    const fetchData = async () => {
-        let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
-        await dataList(userOauth.data.access_token, 'ข้อมูลการวิเคราะห์ทางสถิติ!B10:D10')
-    }
-
-    const dataList = async (token, value) => {
-        try {
-            var list = await Sheetapi.getSheet(token, value)
-            for (let i = 0; i < list.length; i++) {
-                var value = await {
-                    ชาย: list[i][0],
-                    หญิง: list[i][1],
-                    รวม: list[i][2],
-                }
-            }
-            setData([value])
-            //    setData(_.values(value).map(Number))
-        } catch (err) {
-            console.log(err);
-        }
-    }
-
-    return (
-        <div className="warp-card-basic">
-            <div className="card-group">
-                <Link href="/main/mantable">
-                    <div className="card">
-                        <div className="card-data">
-                            <img src="/static/old-man.svg" />
-                            <div className="card-text">
-                                <h5>เพศชาย</h5>
-                                {
-                                    data ? data.map((item, index) =>
-                                        (
-                                            <h4 key={index}>{item.ชาย} คน</h4>
-                                        )
-                                    )
-                                        :
-                                        <h4>0 คน</h4>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                </Link>
-            </div>
-
-            <div className="card-group">
-                <Link href="/main/womantable">
-                    <div className="card">
-                        <div className="card-data">
-                            <img src="/static/old-woman.svg" />
-                            <div className="card-text">
-                                <h5>เพศหญิง</h5>
-                                {
-                                    data ? data.map((item, index) =>
-                                        (
-                                            <h4 key={index}>{item.หญิง} คน</h4>
-                                        )
-                                    )
-                                        : <h4>0 คน</h4>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                </Link>
-            </div>
-
-            <div className="card-group">
-                <Link href='/main/totaltable'>
-                    <div className="card">
-                        <div className="card-data">
-                            <img src="/static/couple.svg" />
-                            <div className="card-text">
-                                <h5>รวม</h5>
-                                {
-                                    data ? data.map((item, index) =>
-                                        (
-                                            <h4 key={index}><CountUp end={item.รวม} /> คน</h4>
-                                        )
-                                    )
-                                        : <h4>0 คน</h4>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                </Link>
-            </div>
-
-        </div>
-    )
-}
-export default CardData;
-
diff --git a/components/layout/chart-source.js b/components/layout/chart-source.js
deleted file mode 100644
index db71d74e..00000000
--- a/components/layout/chart-source.js
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-const ChartSource = () => {
-    return (
-        <React.Fragment>
-            <div className="data-source" >
-                <a
-                    target="_blank"
-                    href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit?usp=sharing">
-                    <img src="/static/logo-google-sheets.svg" />
-                </a>
-
-                <div className="text-source">
-                    <h6 >ที่มา: แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ ผู้พิการเเละผู้ป่วยในชุมชน</h6>
-                    <h6>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</h6>
-                </div>
-
-            </div>
-        </React.Fragment>
-    )
-}
-export default ChartSource;
\ No newline at end of file
diff --git a/components/layout/cover.js b/components/layout/cover.js
deleted file mode 100644
index 48f7c79b..00000000
--- a/components/layout/cover.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-class Cover extends React.Component {
-
-    render() {
-        return (
-            <div className="warp-header">
-                <img src="/static/bg-test4.jpg" alt="cover" />
-                <div className="page-content">
-                    <div className="container-fluid">
-                        <h1 className="animated fadeInDown delay-s">Eldery DB</h1>
-                        <h2 className="animated fadeInDown delay-s">ฐานข้อมูลผู้สูงอายุ และอินโฟกราฟิก</h2>
-                        <Link href="/main">
-                            <button type="button" className="btn btn-primary animated fadeInDown delay-s">เข้าสู่หน้าหลัก</button>
-                        </Link>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-export default Cover
diff --git a/components/layout/dashboard.js b/components/layout/dashboard.js
new file mode 100644
index 00000000..4b62f00f
--- /dev/null
+++ b/components/layout/dashboard.js
@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
+import { Progress } from 'antd';
+import { Layout, Menu } from 'antd';
+import {
+    MenuUnfoldOutlined,
+    MenuFoldOutlined,
+    HomeOutlined,
+} from '@ant-design/icons';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+import { faUser, faHeart, faHospital, faBuilding, faNewspaper } from '@fortawesome/free-regular-svg-icons'
+
+
+import NavBar from './nav';
+import Error from '../error';
+
+const { Header, Sider, Content } = Layout;
+
+const Dashboard = props => {
+
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 769 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
+
+    const [navbar, setNavbar] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "ติดต่อ", href: "/index/contact" },
+        ]
+    )
+
+    const [sidebar, setSidebar] = useState(
+        [
+            { name: "หน้าหลัก", href: "/main" },
+            { name: "ด้านทั่วไป", href: "/main/people" },
+            { name: "ด้านสุขภาพ", href: "/main/hospital" },
+            { name: "ด้านสังคม", href: "/main/social" },
+            { name: "ด้านเศรษฐกิจ", href: "/main/economy" },
+            { name: "ด้านการช่วยเหลือ", href: "/main/service" },
+        ]
+    )
+    const [status, setStatus] = useState(false)
+    const [collapsed, setCollapsed] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [completed, setCompleted] = useState(0)
+    const [userOauth, setUserOauth] = useState()
+
+    useEffect(() => {
+        fetchData()
+        function progress() {
+            setCompleted(oldCompleted => {
+                if (oldCompleted === 100) {
+                    return 0;
+                }
+                const diff = Math.random() * 20;
+                return Math.min(oldCompleted + diff, 100);
+            });
+            setTimeout(() => {
+                setLoading(false);
+            }, isLaptop ? 5000 : isTablet ? 4000 : isMobile ? 3000 : 2000)
+        }
+
+        const timer = setInterval(progress, 500);
+    }, []);
+
+    const fetchData = async () => {
+        setUserOauth(await JSON.parse(localStorage.getItem("myOauth")))
+    }
+
+    const toggle = () => {
+
+        setCollapsed(!collapsed)
+
+    }
+
+    const onConfirm = (order) => {
+        setStatus(order)
+    }
+
+    return (
+        < React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        {
+                            loading ?
+                                <Progress
+                                    strokeColor={{
+                                        from: '#108ee9',
+                                        to: '#87d068',
+                                    }}
+                                    percent={completed}
+                                    status="active"
+                                />
+                                :
+                                userOauth != null ?
+                                    <Layout>
+                                        {
+                                            isTablet ?
+                                                <Sider trigger={null} collapsible collapsed={collapsed}>
+                                                    {
+                                                        collapsed ?
+                                                            <div className="logo">
+                                                                <Link href="/">
+                                                                    <h6>Eldery DB</h6>
+                                                                </Link>
+                                                            </div>
+                                                            :
+                                                            <div className="logo">
+                                                                <Link href="/">
+                                                                    <h2>Eldery DB</h2>
+                                                                </Link>
+                                                            </div>
+                                                    }
+
+                                                    <Menu >
+                                                        {
+                                                            sidebar.map((item, index) => (
+                                                                <Menu.Item key={index}>
+                                                                    <a href={item.href}>
+                                                                        {
+                                                                            index == 0 ?
+                                                                                <HomeOutlined />
+                                                                                :
+                                                                                index == 1 ?
+                                                                                    <span className="anticon">
+                                                                                        <FontAwesomeIcon icon={faUser} />
+                                                                                    </span>
+                                                                                    :
+                                                                                    index == 2 ?
+                                                                                        <span className="anticon">
+                                                                                            <FontAwesomeIcon icon={faHeart} />
+                                                                                        </span>
+                                                                                        :
+                                                                                        index == 3 ?
+                                                                                            <span className="anticon">
+                                                                                                <FontAwesomeIcon icon={faBuilding} />
+                                                                                            </span>
+                                                                                            :
+                                                                                            index == 4 ?
+                                                                                                <span className="anticon">
+                                                                                                    <FontAwesomeIcon icon={faNewspaper} />
+                                                                                                </span>
+                                                                                                :
+                                                                                                <span className="anticon">
+                                                                                                    <FontAwesomeIcon icon={faBullhorn} />
+                                                                                                </span>
+                                                                        }
+                                                                        <span>{item.name}</span>
+                                                                    </a>
+                                                                </Menu.Item>
+
+                                                            ))
+                                                        }
+                                                    </Menu>
+                                                </Sider>
+                                                :
+                                                null
+                                        }
+                                        <Layout className="site-layout">
+                                            {
+                                                isTablet ?
+                                                    <Header className="site-layout-background">
+                                                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+                                                            className: 'trigger',
+                                                            onClick: toggle,
+                                                        })
+
+                                                        }
+                                                        <nav className="layout-header-navbar">
+                                                            {
+                                                                navbar.map((item, index) => (
+                                                                    <a key={index} href={item.href}>
+                                                                        <p>{item.name}</p>
+                                                                    </a>
+                                                                ))
+                                                            }
+
+                                                        </nav>
+                                                    </Header>
+                                                    :
+                                                    <NavBar tab={sidebar} confirm={onConfirm} />
+                                            }
+
+                                            <Content className="site-layout-background" >
+                                                {props.children}
+                                            </Content>
+                                        </Layout>
+                                    </Layout>
+                                    :
+                                    <Error />
+                        }
+                    </React.Fragment>
+            }
+        </ React.Fragment>
+    );
+}
+
+
+export default Dashboard
\ No newline at end of file
diff --git a/components/layout/footer.js b/components/layout/footer.js
deleted file mode 100644
index c98916a1..00000000
--- a/components/layout/footer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-class Footer extends React.Component {
-
-    static defaultProps = {
-        nameFooter: ""
-    }
-
-    render() {
-
-        const { nameFooter } = this.props
-        return (
-            <div className="warp-footer">
-                <div className="chart-source">
-                    {
-                        nameFooter == "chart" || nameFooter == "doc" || nameFooter == "economy" ?
-                            <a
-                                target="_blank"
-                                href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit#gid=1593061825">
-                                <h6>ที่มา: ข้อมูลทั่วไป</h6>
-                            </a>
-                            :
-                            nameFooter == "service" || nameFooter == "help" ?
-                                <a
-                                    target="_blank"
-                                    href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit#gid=624635023">
-                                    <h6>ที่มา: ข้อมูลเกี่ยวกับภาครัฐ</h6>
-                                </a>
-                                :
-                                nameFooter == "hospital" ?
-                                    <a
-                                        target="_blank"
-                                        href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit#gid=1810336135">
-                                        <h6>ที่มา: ข้อมูลด้านสุขภาพ</h6>
-                                    </a>
-                                    :
-                                    nameFooter == "social" ?
-                                        <a
-                                            target="_blank"
-                                            href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit#gid=610206888">
-                                            <h6>ที่มา: ข้อมูลด้านครอบครัวเเละที่อยู่อาศัย</h6>
-                                        </a>
-                                        :
-                                        null
-
-                    }
-                    <p>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</p>
-                </div>
-            </div>
-        )
-    }
-}
-export default Footer
diff --git a/components/layout/icon-data.js b/components/layout/icon-data.js
deleted file mode 100644
index eaf2fad8..00000000
--- a/components/layout/icon-data.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import React from 'react'
-import Circle from 'react-circle';
-
-import Sheetapi from '../../config/api'
-
-const textColor = "#000000";
-const font = 'Prompt, sans-serif';
-const bgColor = "#d9d9d9"
-
-class IconData extends React.Component {
-
-    static defaultProps = {
-        icon: [],
-    
-    }
-
-    constructor(props){
-        super(props);
-        this.state={
-            icon: [
-                { label: "อายุ60ถึง69ปี", color: "#f44336", bgColor:"#fad0c3" },
-                { label: "อายุ70ถึง79ปี", color: "#ffc107", bgColor:"#fef3bd" },
-                { label: "อายุ80ถึง89ปี", color: "#00d084", bgColor:"#c1e1c5" },
-                { label: "อายุ >= 90ปี", color: "#0693e3", bgColor:"#c4def6" }
-            ],
-            data: []
-        }
-    }
-
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-        let userOauth = await JSON.parse(localStorage.getItem("myOauth"))
-
-        this.access_token = userOauth.data.access_token
-        await this.list('sheets!D2:L2')
-
-
-    }
-
-    list = async (value) => {
-
-        try {
-
-            this.list = await Sheetapi.getSheet2(this.access_token, value)
-
-            for (let i = 0; i < this.list.length; i++) {
-                let value = await {
-                    name: this.list[i][0],
-                    อายุ60ถึง69ปี: parseInt(this.list[i][1].replace(",", "")),
-                    อายุ60ถึง69ปีร้อยละ: parseFloat(this.list[i][2].replace(",", "")),
-                    อายุ70ถึง79ปี: parseInt(this.list[i][3].replace(",", "")),
-                    อายุ70ถึง79ปีร้อยละ: parseFloat(this.list[i][4].replace(",", "")),
-                    อายุ80ถึง89ปี: parseInt(this.list[i][5].replace(",", "")),
-                    อายุ80ถึง89ปีร้อยละ: parseFloat(this.list[i][6].replace(",", "")),
-                    อายุมากกว่าหรือเท่ากับ90ปี: parseInt(this.list[i][7].replace(",", "")),
-                    อายุมากกว่าหรือเท่ากับ90ปีร้อยละ: parseFloat(this.list[i][8].replace(",", "")),
-                }
-                this.setState(prevState => ({
-                    data: [...prevState.data, value.อายุ60ถึง69ปีร้อยละ, value.อายุ70ถึง79ปีร้อยละ, value.อายุ80ถึง89ปีร้อยละ, value.อายุมากกว่าหรือเท่ากับ90ปีร้อยละ],
-                }))
-            }
-        } catch (err) {
-            console.log(err);
-        }
-
-    }
-
-    render() {
-        return (
-            <div className="icon-data" >
-                {
-                    this.state.icon.map((item, index) => {
-                        return (
-                            <React.Fragment key={index} >
-                                <div className="icon-content animated fadeInDown delay-1s ">
-
-                                    {
-                                        this.state.data.map((items, indexs) => {
-
-                                            return (
-                                                index == 0 && indexs == 0 ?
-                                                    <Circle key={index}
-                                                        animate={true} // Boolean: Animated/Static progress
-                                                        animationDuration="1s" // String: Length of animation
-                                                        responsive={false} // Boolean: Make SVG adapt to parent size
-                                                        size="100" // String: Defines the size of the circle.
-                                                        lineWidth="25" // String: Defines the thickness of the circle's stroke.
-                                                        progress={items} // String: Update to change the progress and percentage.
-                                                        progressColor={item.color} // String: Color of "progress" portion of circle.
-                                                        bgColor={bgColor} // String: Color of "empty" portion of circle.
-                                                        textColor={textColor} // String: Color of percentage text color.
-                                                        textStyle={{
-                                                            font: { font },
-                                                            fontSize: "5rem" // CSSProperties: Custom styling for percentage.
-                                                        }}
-                                                        percentSpacing={0} // Number: Adjust spacing of "%" symbol and number.
-                                                        roundedStroke={true} // Boolean: Rounded/Flat line ends
-                                                        showPercentage={true} // Boolean: Show/hide percentage.
-                                                        showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
-                                                    />
-                                                    :
-                                                    index == 1 && indexs == 1 ?
-                                                        <Circle key={index}
-                                                            animate={true}
-                                                            animationDuration="1s"
-                                                            responsive={false}
-                                                            size="100"
-                                                            lineWidth="25"
-                                                            progress={items}
-                                                            progressColor={item.color}
-                                                            bgColor={bgColor}
-                                                            textColor={textColor}
-                                                            textStyle={{
-                                                                font: { font },
-                                                                fontSize: "5rem"
-                                                            }}
-                                                            percentSpacing={0}
-                                                            roundedStroke={true}
-                                                            showPercentage={true}
-                                                            showPercentageSymbol={true}
-                                                        />
-                                                        :
-                                                        index == 2 && indexs == 2 ?
-                                                            <Circle key={index}
-                                                                animate={true}
-                                                                animationDuration="1s"
-                                                                responsive={false}
-                                                                size="100"
-                                                                lineWidth="25"
-                                                                progress={items}
-                                                                progressColor={item.color}
-                                                                bgColor={bgColor}
-                                                                textColor={textColor}
-                                                                textStyle={{
-                                                                    font: { font },
-                                                                    fontSize: "5rem"
-                                                                }}
-                                                                percentSpacing={0}
-                                                                roundedStroke={true}
-                                                                showPercentage={true}
-                                                                showPercentageSymbol={true}
-                                                            />
-                                                            :
-                                                            index == 3 && indexs == 3 ?
-                                                                <Circle key={index}
-                                                                    animate={true}
-                                                                    animationDuration="1s"
-                                                                    responsive={false}
-                                                                    size="100"
-                                                                    lineWidth="25"
-                                                                    progress={items}
-                                                                    progressColor={item.color}
-                                                                    bgColor={bgColor}
-                                                                    textColor={textColor}
-                                                                    textStyle={{
-                                                                        font: { font },
-                                                                        fontSize: "5rem"
-                                                                    }}
-                                                                    percentSpacing={0}
-                                                                    roundedStroke={true}
-                                                                    showPercentage={true}
-                                                                    showPercentageSymbol={true}
-                                                                />
-                                                                :
-                                                                null
-                                            )
-                                        })
-
-                                    }
-
-
-                                    <p>{item.label}</p>
-
-                                </div>
-
-                            </React.Fragment>
-                        )
-                    })
-                }
-            </div>
-        )
-    }
-}
-export default IconData;
\ No newline at end of file
diff --git a/components/layout/nav.js b/components/layout/nav.js
new file mode 100644
index 00000000..681097c1
--- /dev/null
+++ b/components/layout/nav.js
@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useMediaQuery } from 'react-responsive';
+import { Drawer } from 'antd';
+
+const NavBar = props => {
+
+    const tab = props.tab
+    const name = props.name
+    const [navbar, setNavbar] = useState("")
+    const [status, setStatus] = useState(false)
+
+    const isBigScreen = useMediaQuery({ minDeviceWidth: 769 })
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 768.99 })
+    const [visible, setVisible] = useState(false)
+    const [placement, setPlacement] = useState("left")
+
+
+    const collapsible = async () => {
+
+        if (!status) {
+            setStatus(true)
+            props.confirm(true)
+        }
+        else {
+            setStatus(false)
+            props.confirm(false)
+        }
+    }
+
+    const showDrawer = () => {
+        setVisible(true)
+    }
+
+    const onClose = () => {
+        setVisible(false)
+    };
+
+    useEffect(() => {
+        window.onscroll = () => {
+            if (window.scrollY <= 10)
+                setNavbar(null)
+            else
+                setNavbar("scroll")
+        };
+    }, [])
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    isBigScreen && name == "index" ?
+                        <nav className={navbar}>
+                            <ul>
+                                <Link href="/">
+                                    <li>
+                                        <h2>Eldery DB</h2>
+                                    </li>
+                                </Link>
+                                <li>
+                                    {
+                                        tab.map((item, index) => {
+                                            return (
+                                                <a href={item.href} key={index} >
+                                                    {
+                                                        item.name == "ติดต่อ" ?
+                                                            <p className="li-buttom-line">{item.name}</p>
+                                                            :
+                                                            item.name == "เข้าสู่หน้าหลัก" ?
+                                                                <p className="li-buttom-line-active">{item.name}</p>
+                                                                :
+                                                                <React.Fragment>
+                                                                    <button className="btn">
+                                                                        <p>{item.name}</p>
+                                                                    </button>
+                                                                </React.Fragment>
+                                                    }
+                                                </a>
+                                            )
+                                        })
+                                    }
+                                </li>
+                            </ul>
+                        </nav>
+                        :
+                        isBigScreen && name == "other" ?
+                            <nav>
+                                <ul>
+                                    <Link href="/">
+                                        <li>
+                                            <p>ย้อนกลับ</p>
+                                        </li>
+                                    </Link>
+                                    <li>
+                                        {
+                                            tab.map((item, index) => {
+                                                return (
+                                                    <a key={index} href={item.href}>
+                                                        {
+                                                            item.name == "เข้าสู่หน้าหลัก" ?
+                                                                <p className="li-buttom-line-active">{item.name}</p>
+                                                                :
+                                                                <React.Fragment>
+                                                                    <button className="btn">
+                                                                        <p>{item.name}</p>
+                                                                    </button>
+                                                                </React.Fragment>
+                                                        }
+                                                    </a>
+                                                )
+                                            })
+                                        }
+                                    </li>
+                                </ul>
+                            </nav>
+                            :
+                            isBigScreen && name == "empty" ?
+                                <nav>
+                                    <ul>
+                                        <Link href="/">
+                                            <li>
+                                                <h2>Eldery DB</h2>
+                                            </li>
+                                        </Link>
+                                        <li>
+                                            {
+                                                tab.map((item, index) => {
+                                                    return (
+                                                        <a key={index} href={item.href}>
+                                                            {
+                                                                <React.Fragment>
+                                                                    <button className="btn">
+                                                                        <p>{item.name}</p>
+                                                                    </button>
+                                                                </React.Fragment>
+                                                            }
+                                                        </a>
+                                                    )
+                                                })
+                                            }
+                                        </li>
+                                    </ul>
+                                </nav>
+                                :
+                                isSmallScreen ?
+                                    <div className="collapsible-menu">
+                                        <div className="warp-nav-sidebar">
+                                            <Link href="/">
+                                                <h2>Eldery DB</h2>
+                                            </Link>
+                                            <div className="box-hamberger">
+                                                <a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
+                                                    <span></span>
+                                                    <span></span>
+                                                    <span></span>
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div className={`menu-content${status ? " show" : ""}`}>
+                                            <ul>
+                                                <li>
+                                                    <nav>
+                                                        <div className="box-hamberger">
+                                                            <a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
+                                                                <span></span>
+                                                                <span></span>
+                                                                <span></span>
+                                                            </a>
+                                                        </div>
+                                                    </nav>
+                                                </li>
+                                                <li className="menu-content-list">
+                                                    {
+                                                        tab.map((item, indexs) => {
+                                                            return (
+                                                                <a key={indexs} href={item.href}>
+                                                                    <h5 >{item.name}</h5>
+                                                                </a>
+                                                            )
+                                                        })
+                                                    }
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    :
+                                    null
+            }
+        </React.Fragment>
+
+    )
+}
+export default NavBar;
\ No newline at end of file
diff --git a/components/layout/sidebar.js b/components/layout/sidebar.js
index 41bdb6aa..394fd50e 100644
--- a/components/layout/sidebar.js
+++ b/components/layout/sidebar.js
@@ -1,54 +1,24 @@
-import React, { useState } from 'react'
-import Link from 'next/link'
+import React, { useState, useEffect } from 'react';
 
-
-const Sidebar = props => {
+const Sidebar = () => {
 
     const [sidebar, setSidebar] = useState(
         [
-            { name: "รายงานความคืบหน้า", nameicon: "Dashboard", img: "/static/dashboard.svg", link: "/main" },
-            { name: "ข้อมูลทางสถิติ", nameicon: "Chart", img: "/static/chart.svg", link: "/main/chart" },
-            { name: "เบี้ยยังชีพผู้สูงอายุ", nameicon: "Allowance", img: "/static/allowance.png", link: "/main/allowance" },
-            { name: "สวัสดิการจากรัฐ", nameicon: "Benefits", img: "/static/document.svg", link: "/main/doc" },
-            { name: "หน่วยงาน", nameicon: "Service", img: "/static/service.svg", link: "/main/service" },
-            { name: "สภาพทางสังคม", nameicon: "", img: "/static/social.svg", link: "/main/social" },
-            { name: "ด้านเศรษฐกิจ", nameicon: "Economy", img: "/static/economy.svg", link: "/main/economy" },
-            { name: "โรงพยาบาล", nameicon: "Hospital", img: "/static/hospital.svg", link: "/main/hospital" },
-            { name: "ช่วยเหลือ", nameicon: "Help", img: "/static/help.svg", link: "/main/help" },
+            { name: "ข้อมูลทั่วไป", href: "/main" },
+            { name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
+            { name: "ข้อมูลด้านสังคม", href: "/main/social" },
+            { name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
+            { name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
         ]
     )
 
-    return (
-        <div className={`wrapper${props.status ? " menuDisplayed" : ""}`}>
-            <div className="sidebar-wrapper">
-                <ul className="sidebar-nav">
-                    {
-                        sidebar.map((items, index) => {
-                            return (
-
-                                <Link key={index} href={items.link}>
-                                    <li ><img src={items.img} /><a>{items.name}</a></li>
-                                </Link>
-                            )
-                        })
-                    }
-                </ul>
+    useEffect(() => {
+       
+    }, [])
 
-                <ul className="non-sidebar-nav">
-                    {
-                        sidebar.map((itemss, indexs) => {
-                            return (
-
-                                <div key={indexs} className="icon-sidebar">
-                                    <li ><img src={itemss.img} /></li>
-                                    <p>{itemss.nameicon}</p>
-                                </div>
-
-                            )
-                        })
-                    }
-                </ul>
-            </div>
+    return (
+        <div className="warp-sidebar">
+          
         </div>
     )
 }
diff --git a/components/layout/table.js b/components/layout/table.js
deleted file mode 100644
index 3fdd9177..00000000
--- a/components/layout/table.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState } from 'react'
-import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
-
-let order = 'desc';
-
-class Table extends React.Component {
-
-    static defaultProps = {
-        data: []
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            text: ''
-        };
-    }
-
-    handleClick = (rowKey) => {
-        alert(this.refs.table.getPageByRowKey(rowKey));
-    }
-
-    handleBtnClick = () => {
-        if (order === 'desc') {
-            this.refs.table.handleSort('asc', 'name');
-            order = 'asc';
-        } else {
-            this.refs.table.handleSort('desc', 'name');
-            order = 'desc';
-        }
-    }
-
-
-    render() {
-        const { data } = this.props
-        return (
-            <div className="warp-table">
-                <div className="table-main">
-                    <BootstrapTable
-                        ref='table'
-                        data={data}
-
-                        pagination={true}
-                        search={true}
-                        searchPlaceholder={"ค้นหา"}
-                    >
-                        <TableHeaderColumn dataField="ลำดับที่"  isKey={true}>ลำดับที่</TableHeaderColumn>
-                        <TableHeaderColumn dataField="คำนำหน้า" >คำนำหน้าชื่อ</TableHeaderColumn>
-                        <TableHeaderColumn dataField="ชื่อ">ชื่อ</TableHeaderColumn>
-                        <TableHeaderColumn dataField="นามสกุล">นามสกุล</TableHeaderColumn>
-                    </BootstrapTable>
-                </div>
-
-
-            </div>
-        )
-    }
-}
-
-export default Table;
\ No newline at end of file
diff --git a/components/nav_index.js b/components/nav_index.js
deleted file mode 100644
index 55636794..00000000
--- a/components/nav_index.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { useState } from 'react'
-import Link from 'next/link'
-import Nav_logo from './nav_logo';
-
-
-
-const Nav_index = props => {
-
-    const [status, setStatus] = useState(false)
-    const [index, setIndex] = useState(
-        [
-            { name: "Dashboard", href: "/main" },
-            { name: "Services", href: "/index/services" },
-            { name: "Contact", href: "/index/contact" },
-        ]
-    )
-    const [listIndex, setListindex] = useState(
-        [
-            { name: "Services", href: "/index/services" },
-            { name: "Contact", href: "/index/contact" }
-        ]
-    )
-
-    const collapsible = async () => {
-        if (!status) {
-            setStatus(true)
-        }
-        else {
-            setStatus(false)
-        }
-    }
-
-    return (
-        <React.Fragment>
-            {
-                props.name == "/" ?
-                    <nav>
-                        <ul>
-                            <Nav_logo />
-                            <div className="warp-manu">
-                                <ul>
-                                    <li>
-                                        {
-                                            index.map((item, index) => {
-                                                return (
-                                                    <Link key={index} href={item.href}>
-                                                        <p >{item.name}</p>
-                                                    </Link>
-                                                )
-                                            })
-                                        }
-                                    </li>
-                                </ul>
-                            </div>
-                        </ul>
-                    </nav>
-                    :
-                    <nav>
-                        <ul>
-                            <div className="warp-table">
-                                <Link href="/">
-                                    <li>
-                                        <p>ย้อนกลับ</p>
-                                    </li>
-                                </Link>
-                            </div>
-
-                            <div className="warp-manu">
-                                <ul>
-                                    <li>
-                                        {
-                                            listIndex.map((item, index) => {
-                                                return (
-                                                    <Link key={index} href={item.href}>
-                                                        <p >{item.name}</p>
-                                                    </Link>
-                                                )
-                                            })
-                                        }
-                                    </li>
-                                </ul>
-                            </div>
-                        </ul>
-                    </nav>
-            }
-
-            <div className="collapsible-menu">
-                <div className="warp-nav-sidebar">
-                    <Nav_logo />
-                    <div className="box-hamberger">
-                        <a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </a>
-                    </div>
-                </div>
-                <div className={`menu-content${status ? " show" : ""}`}>
-                    <ul>
-                        <li >
-                            {
-                                index.map((item, indexs) => {
-                                    return (
-                                        <Link key={indexs} href={item.href}>
-                                            <p >{item.name}</p>
-                                        </Link>
-                                    )
-                                })
-                            }
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-export default Nav_index
\ No newline at end of file
diff --git a/components/nav_logo.js b/components/nav_logo.js
deleted file mode 100644
index 6fb1a03e..00000000
--- a/components/nav_logo.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-
-const Nav_logo = () => {
-    return (
-        <div className="nav-logo">
-            <Link href="/">
-                <li>
-                    <img src="/static/logomain.svg" alt="logo"/>
-                    <h4>Eldery DB</h4>
-                </li>
-            </Link>
-        </div>
-    )
-}
-export default Nav_logo;
\ No newline at end of file
diff --git a/components/nav_main.js b/components/nav_main.js
deleted file mode 100644
index a883827e..00000000
--- a/components/nav_main.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState } from 'react'
-import Nav_logo from './nav_logo';
-import Link from 'next/link'
-
-
-
-const Navbar_main = props => {
-
-    const [status, setStatus] = useState(false)
-    const [index, setIndex] = useState(
-        [
-            { name: "Services", href: "/index/services" },
-            { name: "Contact", href: "/index/contact" },
-        ]
-    )
-
-    const [main, setMain] = useState(
-        [
-            { name: "รายงานความคืบหน้า", href: "/main" },
-            { name: "ข้อมูลทางสถิติ", href: "/main/chart" },
-            { name: "เบี้ยยังชีพผู้สูงอายุ", href: "/main/allowance" },
-            { name: "สวัสดิการจากรัฐ", href: "/main/doc" },
-            { name: "การบริการ", href: "/main/service" },
-            { name: "สภาพทางสังคม", href: "/main/social" },
-            { name: "ด้านเศรษฐกิจ", href: "/main/economy" },
-            { name: "โรงพยาบาล", href: "/main/hospital" },
-            { name: "ช่วยเหลือ", href: "/main/help" }
-        ]
-    )
-
-    const onConfirmClick = () => {
-
-        if (props.status) {
-            if (props.confirm) {
-                props.confirm(false)
-            }
-        }
-        else {
-            if (props.confirm) {
-                props.confirm(true)
-            }
-        }
-    }
-
-    const collapsible = async () => {
-        if (!status) {
-            setStatus(true)
-        }
-        else {
-            setStatus(false)
-        }
-    }
-    return (
-        <div className={`wrapper${props.status ? " menuDisplayed" : ""}`}>
-            <nav className="nav-other">
-                <ul>
-                    <div className="warp-nav-sidebar">
-                        <li>
-                            <div className="box-hamberger">
-                                <a className={`hamberger btn${props.status ? " active" : " not-active"}`} onClick={onConfirmClick} >
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                </a>
-                            </div>
-                        </li>
-                    </div>
-                    <div className="warp-logo-main">
-                        <ul>
-                            <Link href="/">
-                                <img src="/static/logomain.svg" />
-                            </Link>
-
-                        </ul>
-
-                    </div>
-                    <div className="warp-manu">
-                        <ul>
-                            <li>
-                                {
-                                    index.map((item, index) => {
-                                        return (
-                                            <Link key={index} href={item.href}>
-                                                <p>{item.name}</p>
-                                            </Link>
-                                        )
-                                    })
-                                }
-                            </li>
-                        </ul>
-                    </div>
-                </ul>
-            </nav>
-
-            <div className="collapsible-menu">
-                <div className="warp-nav-sidebar">
-                    <Nav_logo />
-                    <div className="box-hamberger">
-                        <a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </a>
-                    </div>
-                </div>
-                <div className={`menu-content${status ? " show" : ""}`}>
-                    <ul>
-                        <li >
-                            {
-                                main.map((item, indexs) => {
-                                    return (
-                                        <Link key={indexs} href={item.href}>
-                                            <p >{item.name}</p>
-                                        </Link>
-                                    )
-                                })
-                            }
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    )
-}
-export default Navbar_main;
\ No newline at end of file
diff --git a/components/nav_table.js b/components/nav_table.js
deleted file mode 100644
index 9a9efb00..00000000
--- a/components/nav_table.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useState } from 'react'
-import Link from 'next/link'
-import AnchorLink from 'react-anchor-link-smooth-scroll'
-import Nav_logo from './nav_logo';
-
-
-const Nav_table = props => {
-
-  const [status, setStatus] = useState(false)
-  const [listIndex, setListindex] = useState(
-    [
-      { name: "Services", href: "/index/services" },
-      { name: "Contact", href: "/index/contact" }
-    ]
-  )
-
-  const collapsible = async () => {
-    if (!status) {
-      setStatus(true)
-    }
-    else {
-      setStatus(false)
-    }
-  }
-
-  return (
-    <React.Fragment>
-      {
-        props.name == "table" ?
-          <nav>
-            <ul>
-              <div className="warp-table">
-                <Link href="/main/doc">
-                  <li>
-                    <p>ย้อนกลับ</p>
-                  </li>
-                </Link>
-              </div>
-
-              <div className="warp-manu">
-                <ul>
-                  <li>
-                    {
-                      listIndex.map((item, index) => {
-                        return (
-                          <Link key={index} href={item.href}>
-                            <p >{item.name}</p>
-                          </Link>
-                        )
-                      })
-                    }
-                  </li>
-                </ul>
-              </div>
-            </ul>
-          </nav>
-          :
-          null
-      }
-
-      <div className="collapsible-menu">
-        <div className="warp-nav-sidebar">
-          <Nav_logo />
-          <div className="box-hamberger">
-            <a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
-              <span></span>
-              <span></span>
-              <span></span>
-            </a>
-          </div>
-        </div>
-        <div className={`menu-content${status ? " show" : ""}`}>
-          <ul>
-            <li >
-              {
-                listIndex.map((item, indexs) => {
-                  return (
-                    <Link key={indexs} href={item.href}>
-                      <p >{item.name}</p>
-                    </Link>
-                  )
-                })
-              }
-            </li>
-          </ul>
-        </div>
-      </div>
-
-
-    </React.Fragment >
-  )
-}
-export default Nav_table
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 06467b3a..21fb45e1 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,8 @@
 const withLess = require('@zeit/next-less')
 const withSass = require('@zeit/next-sass')
-module.exports = withLess(withSass({
+const withCSS = require('@zeit/next-css')
+module.exports = withCSS(withLess(withSass({
     lessLoaderOptions: {
         javascriptEnabled: true
     }
-}))
\ No newline at end of file
+}))) 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a8d5d142..9524d97d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,42 @@
       "resolved": "https://registry.npmjs.org/@ampproject/toolbox-script-csp/-/toolbox-script-csp-1.1.1.tgz",
       "integrity": "sha512-gACGfsVKinCy/977FSrlVgo6jxTZ0lcTCvCnRlNwvSOcxJVm+jJR3sP7/F43fpak9Gsq/EwFaatfnNMbunPc+w=="
     },
+    "@ant-design/colors": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz",
+      "integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
+      "requires": {
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@ant-design/icons": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.0.2.tgz",
+      "integrity": "sha512-fs256mh5tQ0q+o2xNper5dThCZqmWRyQfstf+UrXhotAAv52K+6grh2tzdvsl60fk4GZPLReytwL5rJqATW3uA==",
+      "requires": {
+        "@ant-design/colors": "^3.1.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "classnames": "^2.2.6",
+        "insert-css": "^2.0.0",
+        "rc-util": "^4.9.0"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.0.0.tgz",
+      "integrity": "sha512-Nai+cd3XUrv/z50gSk1FI08j6rENZ1e93rhKeLTBGwa5WrmHvhn2vowa5+voZW2qkXJn1btS6tdvTEDB90M0Pw=="
+    },
+    "@ant-design/react-slick": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.25.5.tgz",
+      "integrity": "sha512-fusHR9LkarCARvYTN6cG3yz2/Ogf+HTaJ2XEihIjsjgm6uE1aSXycRFEVDpOFP1Aib51Z2Iz3tgg/gL+WbK8rQ==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "lodash": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.0.tgz",
@@ -1077,6 +1113,213 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@emotion/hash": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
+      "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/core": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.4.tgz",
+      "integrity": "sha512-1wqm3jBC8mGpVHu0wVOYBX7LUzkPsWxkkTtKSn0Hz66T6TDJkke72mkSIL7akNdjnxy+bRc2Vi6NiJ4YutkDcw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.0",
+        "@material-ui/system": "^4.9.3",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+          "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+          "requires": {
+            "@babel/runtime": "^7.6.3",
+            "csstype": "^2.6.7"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.8.4",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+              "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+              "requires": {
+                "regenerator-runtime": "^0.13.2"
+              }
+            }
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.8.4",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+              "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+              "requires": {
+                "regenerator-runtime": "^0.13.2"
+              }
+            }
+          }
+        }
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz",
+      "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.7.4",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.2.1",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.3.tgz",
+      "integrity": "sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.7.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
+      "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
+    },
+    "@material-ui/utils": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz",
+      "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react": {
+      "version": "16.9.22",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.22.tgz",
+      "integrity": "sha512-7OSt4EGiLvy0h5R7X+r0c7S739TCU/LvWbkNOrm10lUwNHe7XPz5OLhLOSZeCkqO9JSCly1NkYJ7ODTUqVnHJQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
+      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -1291,9 +1534,17 @@
       }
     },
     "acorn": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
-      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw=="
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
+    },
+    "add-dom-event-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
+      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
+      "requires": {
+        "object-assign": "4.x"
+      }
     },
     "ajv": {
       "version": "6.10.2",
@@ -1356,6 +1607,57 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
+    "antd": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.0.2.tgz",
+      "integrity": "sha512-0IBy/a4v1zCUqn8w9DRs7BHO8HsjLKt6QKt5zM/h2uUfIe3hALj5dG7M1mWrG1uu6JR2RxUfDyaCYZZGaijv/g==",
+      "requires": {
+        "@ant-design/icons": "^4.0.0",
+        "@ant-design/react-slick": "~0.25.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "~2.2.6",
+        "copy-to-clipboard": "^3.2.0",
+        "css-animation": "^1.5.0",
+        "lodash": "^4.17.13",
+        "moment": "^2.24.0",
+        "omit.js": "^1.0.2",
+        "prop-types": "^15.7.2",
+        "raf": "^3.4.1",
+        "rc-animate": "~2.10.2",
+        "rc-cascader": "~1.0.0",
+        "rc-checkbox": "~2.1.6",
+        "rc-collapse": "~1.11.3",
+        "rc-dialog": "~7.6.0",
+        "rc-drawer": "~3.1.1",
+        "rc-dropdown": "~3.0.0",
+        "rc-field-form": "~1.0.0",
+        "rc-input-number": "~4.5.4",
+        "rc-mentions": "~1.0.0",
+        "rc-menu": "~8.0.1",
+        "rc-notification": "~4.0.0",
+        "rc-pagination": "~2.0.1",
+        "rc-picker": "~1.1.0",
+        "rc-progress": "~2.5.0",
+        "rc-rate": "~2.5.1",
+        "rc-resize-observer": "^0.1.0",
+        "rc-select": "~10.0.0",
+        "rc-slider": "~9.2.1",
+        "rc-steps": "~3.5.0",
+        "rc-switch": "~1.9.0",
+        "rc-table": "~7.2.0",
+        "rc-tabs": "~10.0.0",
+        "rc-tooltip": "~4.0.0",
+        "rc-tree": "~3.0.0",
+        "rc-tree-select": "~3.0.0",
+        "rc-trigger": "~4.0.0",
+        "rc-upload": "~3.0.0",
+        "rc-util": "^4.20.0",
+        "rc-virtual-list": "~1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.20",
+        "warning": "~4.0.3"
+      }
+    },
     "anymatch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
@@ -1421,6 +1723,11 @@
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
       "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
     },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -1527,6 +1834,11 @@
       "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.0.0.tgz",
       "integrity": "sha512-zyCMBDl4m71feawrxYcVbHxv/UUkqm4nKJiLu3+l9lfiQha6jQ/9dxhrXLnzzBXVFqCTDwiUkZOz9XFbdEGQsg=="
     },
+    "async-validator": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.2.4.tgz",
+      "integrity": "sha512-mTgzMJixkrh+5t2gbYoua8MLy11GHkQqFE6tbhY5Aqc4jEDGsR4BWP+sVQiYDHtzTMB8WIwI/ypObTVPcTZInw=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2246,49 +2558,6 @@
         "supports-color": "^2.0.0"
       }
     },
-    "change-emitter": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
-      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
-    },
-    "chart.js": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
-      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
-      "requires": {
-        "chartjs-color": "^2.1.0",
-        "moment": "^2.10.2"
-      }
-    },
-    "chartjs-color": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
-      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
-      "requires": {
-        "chartjs-color-string": "^0.6.0",
-        "color-convert": "^0.5.3"
-      },
-      "dependencies": {
-        "color-convert": {
-          "version": "0.5.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
-          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
-        }
-      }
-    },
-    "chartjs-color-string": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
-      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
-      "requires": {
-        "color-name": "^1.0.0"
-      }
-    },
-    "chartkick": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/chartkick/-/chartkick-3.2.0.tgz",
-      "integrity": "sha512-EkscIyDBdtUJVIuA2kIIjMq+YkNf4jDWr1fYjDUMZ9IakIJFoJ+9Hl+PW/POutElu8iYbebCEHWsrsXu09o4hw=="
-    },
     "chokidar": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
@@ -2454,11 +2723,24 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2498,6 +2780,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.13.tgz",
+      "integrity": "sha512-o+w9w7A98aAFi/GjK8cxSV+CdASuPa2rR5UWs3+yHkJzWqaKoBEufFNWYaXInCSmUfDCVhesG+v9MTWqOjsxFg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2594,6 +2881,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
@@ -2733,6 +3028,15 @@
         "urix": "^0.1.0"
       }
     },
+    "css-animation": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
+      "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-blank-pseudo": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -2880,6 +3184,11 @@
         "source-list-map": "^2.0.0"
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-prefers-color-scheme": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -2937,13 +3246,32 @@
       }
     },
     "css-selector-tokenizer": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
-      "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz",
+      "integrity": "sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==",
+      "requires": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2",
+        "regexpu-core": "^4.6.0"
+      }
+    },
+    "css-vendor": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
+      "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
       "requires": {
-        "cssesc": "^0.1.0",
-        "fastparse": "^1.1.1",
-        "regexpu-core": "^1.0.0"
+        "@babel/runtime": "^7.6.2",
+        "is-in-browser": "^1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
       }
     },
     "cssdb": {
@@ -2952,9 +3280,9 @@
       "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ=="
     },
     "cssesc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
-      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "cssnano-preset-simple": {
       "version": "1.0.2",
@@ -3069,6 +3397,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz",
+      "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -3087,20 +3420,15 @@
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
       "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
     },
-    "d3-collection": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
-      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
-    },
     "d3-color": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.3.0.tgz",
-      "integrity": "sha512-NHODMBlj59xPAwl2BDiO2Mog6V+PrGRtBfWKqKRrs9MCqlSkIEb0Z/SfY7jW29ReHTDC/j+vwXhnZcXI3+3fbg=="
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
+      "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
     },
     "d3-format": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.1.tgz",
-      "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.3.tgz",
+      "integrity": "sha512-mm/nE2Y9HgGyjP+rKIekeITVgBtX97o1nrvHCWX8F/yBYyevUTvu9vb5pUnKwrcSw7o7GuwMOWjS9gFDs4O+uQ=="
     },
     "d3-geo": {
       "version": "1.6.3",
@@ -3121,48 +3449,34 @@
       }
     },
     "d3-interpolate": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
-      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
       "requires": {
         "d3-color": "1"
       }
     },
-    "d3-path": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.8.tgz",
-      "integrity": "sha512-J6EfUNwcMQ+aM5YPOB8ZbgAZu6wc82f/0WFxrxwV6Ll8wBwLaHLKCqQ5Imub02JriCVVdPjgI+6P3a4EWJCxAg=="
-    },
     "d3-scale": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
-      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz",
+      "integrity": "sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==",
       "requires": {
-        "d3-array": "^1.2.0",
-        "d3-collection": "1",
+        "d3-array": "1.2.0 - 2",
         "d3-format": "1",
-        "d3-interpolate": "1",
+        "d3-interpolate": "^1.2.0",
         "d3-time": "1",
         "d3-time-format": "2"
       }
     },
-    "d3-shape": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.5.tgz",
-      "integrity": "sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==",
-      "requires": {
-        "d3-path": "1"
-      }
-    },
     "d3-time": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.11.tgz",
-      "integrity": "sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
     },
     "d3-time-format": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz",
-      "integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
       "requires": {
         "d3-time": "1"
       }
@@ -3175,11 +3489,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
-    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -3193,11 +3502,6 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
-    "decimal.js-light": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz",
-      "integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg=="
-    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -3262,9 +3566,9 @@
           }
         },
         "kind-of": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         }
       }
     },
@@ -3325,6 +3629,11 @@
         "randombytes": "^2.0.0"
       }
     },
+    "dom-align": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.11.0.tgz",
+      "integrity": "sha512-c5xlri+XyxfgIGjJfayVIXo6j8aYh1jMlNlONh1UPTeGMW8T2kRVDcJMm2SryyPQ9i6FtjWyEnpDxT9SENXZBQ=="
+    },
     "dom-helpers": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
@@ -3333,11 +3642,6 @@
         "@babel/runtime": "^7.1.2"
       }
     },
-    "dom-lib": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-1.2.1.tgz",
-      "integrity": "sha512-sx7X6iK0jidoY0xR/a/a3zOW6aLRuikb8E+3H5l5j4cgYmxXRvH1VcLf7w+FK77F8EAOt7td6ILmh1pyE/xDJA=="
-    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -3386,11 +3690,6 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.332.tgz",
       "integrity": "sha512-AP2HkLhfSOIxP7gDjlyZ4ywGWIcxRMZoU9+JriuVkQe2pSLDdWBsE6+eI6BQOqun1dohLrUTOPHsQLLhhFA7Eg=="
     },
-    "element-resize-event": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/element-resize-event/-/element-resize-event-3.0.3.tgz",
-      "integrity": "sha512-vhGNxT87PdZA6Ak4E0QhArwGzNcSPUwSN7n9wCFLeBlY2NNuuiwguQuQIp7P5oB65PLJ892yKcHiqz1xLWeiug=="
-    },
     "elliptic": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
@@ -3415,14 +3714,6 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -3692,27 +3983,6 @@
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
       "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
     },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.18"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        }
-      }
-    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -4020,12 +4290,12 @@
       }
     },
     "globule": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.1.tgz",
+      "integrity": "sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==",
       "requires": {
         "glob": "~7.1.1",
-        "lodash": "~4.17.10",
+        "lodash": "~4.17.12",
         "minimatch": "~3.0.2"
       }
     },
@@ -4065,10 +4335,10 @@
         }
       }
     },
-    "hamburgers": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.1.3.tgz",
-      "integrity": "sha512-qpfnJwZq6ATAGJEriwuyfVNgT++GG+o+3bBfPYF7F3WY452cYKbaYGUuqwhp+3kHLI6CL4VIBfj8bfbp90Lp1A=="
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
     },
     "har-schema": {
       "version": "2.0.0",
@@ -4239,6 +4509,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -4348,6 +4623,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "insert-css": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
+      "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -4433,12 +4713,9 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
@@ -4456,6 +4733,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4500,11 +4782,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
-    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -4540,26 +4817,6 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      },
-      "dependencies": {
-        "node-fetch": {
-          "version": "1.7.3",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-          "requires": {
-            "encoding": "^0.1.11",
-            "is-stream": "^1.0.1"
-          }
-        }
-      }
-    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -4585,9 +4842,9 @@
       }
     },
     "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
+      "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
     },
     "js-levenshtein": {
       "version": "1.1.6",
@@ -4643,6 +4900,14 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -4662,6 +4927,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.4.tgz",
+      "integrity": "sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz",
+      "integrity": "sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz",
+      "integrity": "sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz",
+      "integrity": "sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz",
+      "integrity": "sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz",
+      "integrity": "sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz",
+      "integrity": "sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz",
+      "integrity": "sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.0.4"
+      }
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -4746,11 +5088,6 @@
         "pify": "^3.0.0"
       }
     },
-    "linear-layout-vector": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz",
-      "integrity": "sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA="
-    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -4821,11 +5158,6 @@
       "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
       "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
     "lodash.isfunction": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
@@ -4858,11 +5190,6 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
-    "lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
-    },
     "lodash.tonumber": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
@@ -4960,10 +5287,13 @@
         "object-visit": "^1.0.0"
       }
     },
-    "math-expression-evaluator": {
-      "version": "1.2.17",
-      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
-      "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw="
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
     },
     "md5.js": {
       "version": "1.3.5",
@@ -5098,9 +5428,9 @@
           }
         },
         "kind-of": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         },
         "to-regex-range": {
           "version": "2.1.1",
@@ -5155,6 +5485,17 @@
         "webpack-sources": "^1.1.0"
       }
     },
+    "mini-store": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-2.0.0.tgz",
+      "integrity": "sha512-EG0CuwpQmX+XL4QVS0kxNwHW5ftSbhygu1qxQH0pipugjnPkbvkalCdQbEihMwtQY6d3MTN+MS0q+aurs+RfLQ==",
+      "requires": {
+        "hoist-non-react-statics": "^2.3.1",
+        "prop-types": "^15.6.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.0.2"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -5292,9 +5633,9 @@
       },
       "dependencies": {
         "kind-of": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         }
       }
     },
@@ -5715,9 +6056,9 @@
       }
     },
     "node-sass": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
-      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
+      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -5726,7 +6067,7 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.15",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
         "nan": "^2.13.2",
@@ -5861,6 +6202,14 @@
         "isobject": "^3.0.1"
       }
     },
+    "omit.js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-1.0.2.tgz",
+      "integrity": "sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==",
+      "requires": {
+        "babel-runtime": "^6.23.0"
+      }
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -8440,6 +8789,394 @@
         }
       }
     },
+    "rc-align": {
+      "version": "3.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0-rc.1.tgz",
+      "integrity": "sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg==",
+      "requires": {
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^4.12.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-animate": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.3.tgz",
+      "integrity": "sha512-A9qQ5Y8BLlM7EhuCO3fWb/dChndlbWtY/P5QvPqBU7h4r5Q2QsvsbpTGgdYZATRDZbTRnJXXfVk9UtlyS7MBLg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x",
+        "raf": "^3.4.0",
+        "rc-util": "^4.15.3",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-cascader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.0.1.tgz",
+      "integrity": "sha512-3mk33+YKJBP1XSrTYbdVLuCC73rUDq5STNALhvua5i8vyIgIxtb5fSl96JdWWq1Oj8tIBoHnCgoEoOYnIXkthQ==",
+      "requires": {
+        "array-tree-filter": "^2.1.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.0.4",
+        "warning": "^4.0.1"
+      }
+    },
+    "rc-checkbox": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.1.8.tgz",
+      "integrity": "sha512-6qOgh0/by0nVNASx6LZnhRTy17Etcgav+IrI7kL9V9kcDZ/g7K14JFlqrtJ3NjDq/Kyn+BPI1st1XvbkhfaJeg==",
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "classnames": "2.x",
+        "prop-types": "15.x",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-collapse": {
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-1.11.8.tgz",
+      "integrity": "sha512-8EhfPyScTYljkbRuIoHniSwZagD5UPpZ3CToYgoNYWC85L2qCbPYF7+OaC713FOrIkp6NbfNqXsITNxmDAmxog==",
+      "requires": {
+        "classnames": "2.x",
+        "css-animation": "1.x",
+        "prop-types": "^15.5.6",
+        "rc-animate": "2.x",
+        "react-is": "^16.7.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-dialog": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-7.6.0.tgz",
+      "integrity": "sha512-N48vBPW8I53WycFHI4KXhuTUkB4mx+hixq1a9tcFMLoE7EhkAjbHvs0vGg+Bh/uFg5V00jmZBgQOIEbhcNal/A==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "rc-animate": "2.x",
+        "rc-util": "^4.16.1"
+      }
+    },
+    "rc-drawer": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-3.1.3.tgz",
+      "integrity": "sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-util": "^4.16.1",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-dropdown": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.0.2.tgz",
+      "integrity": "sha512-T3XP4qL6xmkxn8z52YF2SEPoMHPpBiLf0Kty3mjNdRSyKnlu+0F+3bhDHf6gO1msmqrjURaz8sMNAFDcoFHHnw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "classnames": "^2.2.6",
+        "rc-trigger": "^4.0.0"
+      }
+    },
+    "rc-field-form": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.0.1.tgz",
+      "integrity": "sha512-0m9ydH+XQtEwdTOrUgGqv0q6WCDQKNqwHiUB4fKZUdpLze/7i7gGIDVAc6CUNiTMb2Y5+V+wPtYhF4rBPhsX3g==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "async-validator": "^3.0.3",
+        "rc-util": "^4.17.0",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.7.tgz",
+          "integrity": "sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
+    "rc-hammerjs": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/rc-hammerjs/-/rc-hammerjs-0.6.9.tgz",
+      "integrity": "sha512-4llgWO3RgLyVbEqUdGsDfzUDqklRlQW5VEhE3x35IvhV+w//VPRG34SBavK3D2mD/UaLKaohgU41V4agiftC8g==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "hammerjs": "^2.0.8",
+        "prop-types": "^15.5.9"
+      }
+    },
+    "rc-input-number": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-4.5.6.tgz",
+      "integrity": "sha512-AXbL4gtQ1mSQnu6v/JtMv3UbGRCzLvQznmf0a7U/SAtZ8+dCEAqD4JpJhkjv73Wog53eRYhw4l7ApdXflc9ymg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.0",
+        "prop-types": "^15.5.7",
+        "rc-util": "^4.5.1",
+        "rmc-feedback": "^2.0.0"
+      }
+    },
+    "rc-mentions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.0.1.tgz",
+      "integrity": "sha512-EgXFYsNHk44ifwDcbtd3zX7rJc3lHplfVEVEf8oxZeeyyIzFD0GLs0Z0LWHNs6Gm4wTAHvcR0j4Pd5M7fLtBoA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-menu": "^8.0.1",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.6.0"
+      }
+    },
+    "rc-menu": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.0.2.tgz",
+      "integrity": "sha512-0zae6+LVQf+XTBepSMwwn2Wu+CvRf0eAVh62xl0UcjFBvyA0uGz+dAE0SVR6oUA0q9X+/G14CV1ItZFdwaP6/g==",
+      "requires": {
+        "classnames": "2.x",
+        "mini-store": "^2.0.0",
+        "rc-animate": "^2.10.1",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.13.0",
+        "resize-observer-polyfill": "^1.5.0",
+        "scroll-into-view-if-needed": "^2.2.20",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-notification": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.0.0.tgz",
+      "integrity": "sha512-In9FimkJY+JSIq3/eopPfBpQQr2Zugq5i9Aw9vdiNCGCsAsSO9bGq2dPsn8bamOydNrhc3djljGfmxUUMbcZnA==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-animate": "2.x",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-pagination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-2.0.1.tgz",
+      "integrity": "sha512-jvLb05p1OEBUxRobWFjnrj6vRyvhG8XHouK6qh+eepCHPo7HDzUHHztvUUAWr5f+WnKldAXqdPcGgbM4rCH1OA==",
+      "requires": {
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-picker": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-1.1.5.tgz",
+      "integrity": "sha512-4Ea42Yg/0J95typselVZj4kDu+eNKT1s31tFwAbLNnzCg3l6VUe9jtSLNMkl1rHWICg+RNmeuM0Ua1NAHpXR7Q==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "moment": "^2.24.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.17.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-progress": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-2.5.2.tgz",
+      "integrity": "sha512-ajI+MJkbBz9zYDuE9GQsY5gsyqPF7HFioZEDZ9Fmc+ebNZoiSeSJsTJImPFCg0dW/5WiRGUy2F69SX1aPtSJgA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8"
+      }
+    },
+    "rc-rate": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.5.1.tgz",
+      "integrity": "sha512-3iJkNJT8xlHklPCdeZtUZmJmRVUbr6AHRlfSsztfYTXVlHrv2TcPn3XkHsH+12j812WVB7gvilS2j3+ffjUHXg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.3.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-resize-observer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz",
+      "integrity": "sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "rc-util": "^4.13.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-select": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-10.0.4.tgz",
+      "integrity": "sha512-yYua9bsg23GKrsp99kenqbzxt/Snvg2rIusUs+APhgOV3IBlZhfznOOnqQxFHHZa1sdc5hYt6qsWxjtFm8grtQ==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-animate": "^2.10.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.20.0",
+        "rc-virtual-list": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-slider": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.2.3.tgz",
+      "integrity": "sha512-mlERrweLA4KNFvO0dkhQv3Du0Emq7DyAFV6N7jgrAwfUZsX4eB1T1iJWYMtsguHXbMyje+PACAqwsrfhZIN0bQ==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "rc-tooltip": "^4.0.0",
+        "rc-util": "^4.0.4",
+        "shallowequal": "^1.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-steps": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-3.5.0.tgz",
+      "integrity": "sha512-2Vkkrpa7PZbg7qPsqTNzVDov4u78cmxofjjnIHiGB9+9rqKS8oTLPzbW2uiWDr3Lk+yGwh8rbpGO1E6VAgBCOg==",
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "classnames": "^2.2.3",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.7"
+      }
+    },
+    "rc-switch": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-1.9.0.tgz",
+      "integrity": "sha512-Isas+egaK6qSk64jaEw4GgPStY4umYDbT7ZY93bZF1Af+b/JEsKsJdNOU2qG3WI0Z6tXo2DDq0kJCv8Yhu0zww==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-table": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.2.2.tgz",
+      "integrity": "sha512-92RGM0UWb+dqmfX42obDkNyzZvysLyWoojmI2NVSIJDmDO3jLQFfi0rt1ME9j720pU7by3wbikfNiB36I9KXdg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "component-classes": "^1.2.6",
+        "lodash": "^4.17.5",
+        "mini-store": "^2.0.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.4.1",
+        "rc-resize-observer": "^0.1.2",
+        "rc-util": "^4.20.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-tabs": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-10.0.0.tgz",
+      "integrity": "sha512-kpYho3S8GqHVKuFvsYyShN4GSM+f3RMfgwxmR4lpXA79lzPmIlaLamCGtTnMAOXOVTS3JEltWQCWC8LYY4ITIg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "2.x",
+        "lodash": "^4.17.5",
+        "prop-types": "15.x",
+        "raf": "^3.4.1",
+        "rc-hammerjs": "~0.6.0",
+        "rc-util": "^4.0.4",
+        "resize-observer-polyfill": "^1.5.1",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-tooltip": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-4.0.2.tgz",
+      "integrity": "sha512-Ko56IK1U/CD2rSbfQsaVwOK/wHRGbCGpXEThUvsa3KZqe8ShAB/psMj0woR6IUxRBgYO8ZYS1n2KTm7qLLXnjQ==",
+      "requires": {
+        "rc-trigger": "^4.0.0"
+      }
+    },
+    "rc-tree": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-3.0.2.tgz",
+      "integrity": "sha512-5MJgIuP3R2QOuv+xuvttv0BVC6BJVz4PIqgZzk9oaGCN5WryPI30SrVCB3t0QO58gdf6tTQszI5aGEgN9PLQtQ==",
+      "requires": {
+        "classnames": "2.x",
+        "prop-types": "^15.5.8",
+        "rc-animate": "^2.9.2",
+        "rc-util": "^4.11.0",
+        "rc-virtual-list": "^1.0.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-tree-select": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-3.0.2.tgz",
+      "integrity": "sha512-xowQdNWEUAxtEfJa5X2jcO5iRB/25YlecLwcyPGn04EC0Idwmn94yaji8fM+2QSKWKqvoImppaiRJpA1uljAHg==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-select": "^10.0.0",
+        "rc-tree": "^3.0.0",
+        "rc-util": "^4.17.0"
+      }
+    },
+    "rc-trigger": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.0.2.tgz",
+      "integrity": "sha512-to5S1NhK10rWHIgQpoQdwIhuDc2Ok4R4/dh5NLrDt6C+gqkohsdBCYiPk97Z+NwGhRU8N+dbf251bivX8DkzQg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "raf": "^3.4.1",
+        "rc-align": "^3.0.0-rc.0",
+        "rc-animate": "^2.10.2",
+        "rc-util": "^4.20.0"
+      }
+    },
+    "rc-upload": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-3.0.0.tgz",
+      "integrity": "sha512-GTmLJ2Habrgon26xwtF8nx1FBxu8KUjRC6QW/7a+NVZ6qXIo+s7HnjqwseuG42kz6xGCoSLNpHgIoHW55EwpxA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5"
+      }
+    },
+    "rc-util": {
+      "version": "4.20.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.20.1.tgz",
+      "integrity": "sha512-EGlDg9KPN0POzmAR2hk9ZyFc3DmJIrXwlC8NoDxJguX2LTINnVqwadLIVauLfYgYISMiFYFrSHiFW+cqUhZ5dA==",
+      "requires": {
+        "add-dom-event-listener": "^1.1.0",
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.10",
+        "react-is": "^16.12.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz",
+          "integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA=="
+        }
+      }
+    },
+    "rc-virtual-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-1.0.1.tgz",
+      "integrity": "sha512-lqee1WuBXz6wUGr77g5bB1BHO9JQH+R1DX1oU0JbTLQs7bJl5JWk0xlX6UbB7VMtUss15+XiV7cyvlXVq6xzjg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-util": "^4.8.0"
+      }
+    },
     "react": {
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
@@ -8450,11 +9187,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-anchor-link-smooth-scroll": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.12.tgz",
-      "integrity": "sha512-aaY+9X0yh8YnC0jBfoTKpsiCLdO/Y6pCltww+VB+NnTBPDOvnIdnp1AlazajsDitc1j+cVSQ+yNtaVeTIMQbxw=="
-    },
     "react-apexcharts": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.3.tgz",
@@ -8474,28 +9206,20 @@
         "react-s-alert": "^1.3.2"
       }
     },
-    "react-chartjs-2": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.8.0.tgz",
-      "integrity": "sha512-BPpC+qfnh37DkcXvxRwA1rdD9rX/0AQrwru4VZTLofCCuZBwRsc7PbfxjilvoB6YlHhorwZu40YDWEQkoz7xfQ==",
-      "requires": {
-        "lodash": "^4.17.4",
-        "prop-types": "^15.5.8"
-      }
-    },
-    "react-chartkick": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.3.2.tgz",
-      "integrity": "sha512-IhBhgg+UfAurwZB7kzhu4UF6GjJso5XOe/XZmTVDzqTVrahbTCMaM8bY2VzGl3A/BmqZ3S/38vyiPDvxtOJ/tg==",
-      "requires": {
-        "chartkick": "^3.1.1"
-      }
-    },
     "react-circle": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-circle/-/react-circle-1.1.1.tgz",
       "integrity": "sha512-iphQfy+MRuNuBqJyZlGKbxyBJhDszaiT5eTiilFFPuwo5nsW5k/uH0KCq/sXXBMiJpLJ/Ly3arkUDvrK62Zung=="
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-countup": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-4.2.2.tgz",
@@ -8586,15 +9310,15 @@
         "warning": "^4.0.2"
       }
     },
-    "react-resize-detector": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
-      "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
+    "react-responsive": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
+      "integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
       "requires": {
-        "lodash.debounce": "^4.0.8",
-        "lodash.throttle": "^4.1.1",
-        "prop-types": "^15.6.0",
-        "resize-observer-polyfill": "^1.5.0"
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
       }
     },
     "react-s-alert": {
@@ -8615,23 +9339,11 @@
         "topojson-client": "2.1.0"
       }
     },
-    "react-smooth": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.2.tgz",
-      "integrity": "sha512-pIGzL1g9VGAsRsdZQokIK0vrCkcdKtnOnS1gyB2rrowdLy69lNSWoIjCTWAfgbiYvria8tm5hEZqj+jwXMkV4A==",
-      "requires": {
-        "lodash": "~4.17.4",
-        "prop-types": "^15.6.0",
-        "raf": "^3.4.0",
-        "react-transition-group": "^2.5.0"
-      }
-    },
     "react-tooltip": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.11.1.tgz",
-      "integrity": "sha512-YCMVlEC2KuHIzOQhPplTK5jmBBwoL+PYJJdJKXj7M/h7oevupd/QSVq6z5U7/ehIGXyHsAqvwpdxexDfyQ0o3A==",
+      "version": "3.11.6",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.11.6.tgz",
+      "integrity": "sha512-nTc1yHHaPCHHURvMpf/VNF17pIZiU4zwUGFJBUVr1fZkezFC7E0VPMMVrCfDjt+IpwTHICyzlyx+1FiQ7lw5LQ==",
       "requires": {
-        "classnames": "^2.2.5",
         "prop-types": "^15.6.0"
       }
     },
@@ -8655,20 +9367,6 @@
         "typed.js": "^2.0.6"
       }
     },
-    "react-virtualized": {
-      "version": "9.21.1",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.1.tgz",
-      "integrity": "sha512-E53vFjRRMCyUTEKuDLuGH1ld/9TFzjf/fFW816PE4HFXWZorESbSTYtiZz1oAjra0MminaUU1EnvUxoGuEFFPA==",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "clsx": "^1.0.1",
-        "dom-helpers": "^2.4.0 || ^3.0.0",
-        "linear-layout-vector": "0.0.1",
-        "loose-envify": "^1.3.0",
-        "prop-types": "^15.6.0",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
     "reactstrap": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.0.1.tgz",
@@ -8798,43 +9496,6 @@
         "picomatch": "^2.0.7"
       }
     },
-    "recharts": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.7.1.tgz",
-      "integrity": "sha512-i4vK/ZSICr+dXGmaijuNybc+xhctiX0464xnqauY+OvE6WvU5v+0GYciQvD/HJSObkKG4wY8aRtiuUL9YtXnHQ==",
-      "requires": {
-        "classnames": "^2.2.5",
-        "core-js": "^2.5.1",
-        "d3-interpolate": "^1.3.0",
-        "d3-scale": "^2.1.0",
-        "d3-shape": "^1.2.0",
-        "lodash": "^4.17.5",
-        "prop-types": "^15.6.0",
-        "react-resize-detector": "^2.3.0",
-        "react-smooth": "^1.0.0",
-        "recharts-scale": "^0.4.2",
-        "reduce-css-calc": "^1.3.0"
-      }
-    },
-    "recharts-scale": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.2.tgz",
-      "integrity": "sha512-p/cKt7j17D1CImLgX2f5+6IXLbRHGUQkogIp06VUoci/XkhOQiGSzUrsD1uRmiI7jha4u8XNFOjkHkzzBPivMg==",
-      "requires": {
-        "decimal.js-light": "^2.4.1"
-      }
-    },
-    "recompose": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
-      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
-      "requires": {
-        "change-emitter": "^0.1.2",
-        "fbjs": "^0.8.1",
-        "hoist-non-react-statics": "^2.3.1",
-        "symbol-observable": "^1.0.4"
-      }
-    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -8844,38 +9505,6 @@
         "strip-indent": "^1.0.1"
       }
     },
-    "reduce-css-calc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
-      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
-      "requires": {
-        "balanced-match": "^0.4.2",
-        "math-expression-evaluator": "^1.2.14",
-        "reduce-function-call": "^1.0.1"
-      },
-      "dependencies": {
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
-        }
-      }
-    },
-    "reduce-function-call": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz",
-      "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=",
-      "requires": {
-        "balanced-match": "^0.4.2"
-      },
-      "dependencies": {
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
-        }
-      }
-    },
     "reflect.ownkeys": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
@@ -8917,24 +9546,42 @@
       }
     },
     "regexpu-core": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
-      "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
-      "requires": {
-        "regenerate": "^1.2.1",
-        "regjsgen": "^0.2.0",
-        "regjsparser": "^0.1.4"
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
+      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
+      "requires": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.2.0"
+      },
+      "dependencies": {
+        "regenerate-unicode-properties": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+          "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+          "requires": {
+            "regenerate": "^1.4.0"
+          }
+        },
+        "unicode-match-property-value-ecmascript": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+          "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ=="
+        }
       }
     },
     "regjsgen": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
+      "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg=="
     },
     "regjsparser": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
-      "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
       "requires": {
         "jsesc": "~0.5.0"
       }
@@ -9058,46 +9705,13 @@
         "inherits": "^2.0.1"
       }
     },
-    "rsuite": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-4.1.0.tgz",
-      "integrity": "sha512-MUOYVAeLG3EVJ/4fHKDKR4W0iaC7IS14vgW1LQGCKTer88E5QCQ7GTNJDV8jkC/t2VP1XT11ix+8yX6j86ENFw==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "classnames": ">=2.0.0",
-        "date-fns": "^1.30.1",
-        "dom-lib": "^1.2.1",
-        "element-resize-event": "^3.0.2",
-        "lodash": "^4.17.11",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4",
-        "react-virtualized": "^9.21.0",
-        "recompose": "^0.26.0",
-        "rsuite-table": "^3.6.1",
-        "rsuite-utils": "^2.2.1",
-        "schema-typed": "^1.3.1"
-      }
-    },
-    "rsuite-table": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-3.6.1.tgz",
-      "integrity": "sha512-2wrMDTTaVFWWqxEcaCr8baYiLayfzquWrTLlx4QVZ5rQMZ2l4NwfV4WrTFwcga7o/zUOd1SJeB9/YPzeJWjvOA==",
-      "requires": {
-        "classnames": "^2.2.5",
-        "dom-lib": "^1.2.1",
-        "element-resize-event": "^3.0.2",
-        "lodash": "^4.17.5",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "rsuite-utils": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/rsuite-utils/-/rsuite-utils-2.2.1.tgz",
-      "integrity": "sha512-viDaUWDb6UtrV2YcncrJmJqinf4VmhMr73rU7xfympIBMZ3frfbnWbhxro8zrlLocMDKWbu0MgYF5SGBBIwsYA==",
+    "rmc-feedback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rmc-feedback/-/rmc-feedback-2.0.0.tgz",
+      "integrity": "sha512-5PWOGOW7VXks/l3JzlOU9NIxRpuaSS8d9zA3UULUCuTKnpwBHNvv1jSJzxgbbCQeYzROWUpgKI4za3X4C/mKmQ==",
       "requires": {
-        "classnames": "^2.2.5",
-        "lodash": "^4.17.5",
-        "react-lifecycles-compat": "^3.0.4"
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5"
       }
     },
     "run-queue": {
@@ -9158,11 +9772,6 @@
         "object-assign": "^4.1.1"
       }
     },
-    "schema-typed": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-1.3.1.tgz",
-      "integrity": "sha512-gqYJNjppMNx1Xvre+G1hiXZR4oymGXgqxp0vb+uPrmxfaCa371guqKarL7PD1eN4Dflu7qhr2rJetLA7wW6NVQ=="
-    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -9173,6 +9782,14 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.24",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz",
+      "integrity": "sha512-vsC6SzyIZUyJG8o4nbUDCiIwsPdH6W/FVmjT2avR2hp/yzS53JjGmg/bKD20TkoNajbu5dAQN4xR7yes4qhwtQ==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.13"
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -9310,6 +9927,16 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shell-quote": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
@@ -9606,6 +10233,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@@ -9761,11 +10393,6 @@
         "svg.js": "^2.2.5"
       }
     },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -9918,6 +10545,16 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -9955,6 +10592,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -10053,11 +10695,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "ua-parser-js": {
-      "version": "0.7.20",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
-      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
-    },
     "unfetch": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz",
diff --git a/package.json b/package.json
index 98dc3cec..8a774c2e 100644
--- a/package.json
+++ b/package.json
@@ -9,36 +9,42 @@
     "export": "next build && next export"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@material-ui/core": "^4.9.4",
+    "@material-ui/icons": "^4.9.1",
+    "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
     "@zeit/next-sass": "^1.0.1",
     "animate.css": "^3.7.2",
+    "antd": "^4.0.2",
     "apexcharts": "^3.10.0",
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
-    "chart.js": "^2.8.0",
+    "d3-scale": "^3.2.1",
     "google-maps-react": "^2.0.2",
-    "hamburgers": "^1.1.3",
     "less": "^3.10.3",
     "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "next": "^9.1.7",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
-    "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-apexcharts": "^1.3.3",
     "react-bootstrap-table": "^4.3.1",
-    "react-chartjs-2": "^2.8.0",
-    "react-chartkick": "^0.3.2",
     "react-circle": "^1.1.1",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-countup": "^4.2.2",
     "react-dom": "^16.9.0",
     "react-google-charts": "^3.0.15",
     "react-motion": "^0.5.2",
+    "react-responsive": "^8.0.3",
     "react-simple-maps": "^0.12.1",
     "react-tooltip": "^3.11.1",
     "react-typed": "^1.2.0",
-    "reactstrap": "^8.0.1",
-    "recharts": "^1.7.1",
-    "rsuite": "^4.1.0"
+    "reactstrap": "^8.0.1"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
index 2ca5e8b6..5e6a4709 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,26 +1,8 @@
 import React from 'react'
-import App from 'next/app'
 import '../styles/base.scss'
+import 'antd/dist/antd.less'
 
-
-class MyApp extends App {
-
-  // Only uncomment this method if you have blocking data requirements for
-  // every single page in your application. This disables the ability to
-  // perform automatic static optimization, causing every page in your app to
-  // be server-side rendered.
-  //
-  // static async getInitialProps(appContext) {
-  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
-  //   const appProps = await App.getInitialProps(appContext);
-  //
-  //   return { ...appProps }
-  // }
-
-  render() {
-    const { Component, pageProps } = this.props
-    return <Component {...pageProps} />
-  }
-}
-
-export default MyApp
\ No newline at end of file
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
\ No newline at end of file
diff --git a/pages/_document.js b/pages/_document.js
index e346863f..7bf0c961 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -16,7 +16,7 @@ class MyDocument extends Document {
                     </head>
 
                     <meta charset="utf-8" />
-                    <meta name="theme-color" content="#fff"/>
+                    <meta name="theme-color" content="#fff" />
                     <link rel="manifest" href="../static/manifest.json" />
                     <link rel="shortcut icon" href="/static/logo.png" />
                     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -26,7 +26,8 @@ class MyDocument extends Document {
 
                     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
                     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-                    <link href="https://fonts.googleapis.com/css?family=Kanit|Prompt&display=swap" rel="stylesheet" />
+                    <link href="https://fonts.googleapis.com/css?family=Kanit|Prompt|Frank+Ruhl+Libre&display=swap&subset=latin-ext" rel="stylesheet" />
+                    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
                     <link
                         rel="stylesheet"
diff --git a/pages/index.js b/pages/index.js
index 9feafed3..9b2ffbc0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,30 +1,71 @@
-import React, { useState, useEffect } from 'react'
-import Head from 'next/head'
-import Sheetapi from '../config/api'
-import Cover from '../components/layout/cover';
-import Nav_index from '../components/nav_index';
+import React, { useState, useEffect } from 'react';
+import Head from 'next/head';
+import dynamic from 'next/dynamic';
+import Cover from '../components/cover';
+import NavBar from '../components/layout/nav';
+import { useMediaQuery } from 'react-responsive';
+import About from '../components/about';
+import Footer from '../components/footer';
+import Agency from '../components/agency';
 
 
+const Info = dynamic(
+  () => import('../components/info'),
+  { ssr: false }
+)
+
 const Home = () => {
+  const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+  const [status, setStatus] = useState(false)
+
+  const [home, setHome] = useState(
+    [
+      { name: "เกี่ยวกับเรา", href: "/index/about" },
+      { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+      { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+      { name: "ติดต่อ", href: "/index/contact" },
+      { name: "เข้าสู่หน้าหลัก", href: "/main" }
+    ]
+  )
 
-  useEffect(() => {
-    async function fetchData() {
-      window.localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-    }
-    fetchData();
-  });
+  const [homeMin, setHomeMin] = useState(
+    [
+      { name: "เกี่ยวกับเรา", href: "/index/about" },
+      { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+      { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+      { name: "ติดต่อ", href: "/index/contact" },
+      { name: "เข้าสู่หน้าหลัก", href: "/main" },
+    ]
+  )
+
+  const onConfirm = (order) => {
+    setStatus(order)
+  }
 
   return (
-    <div className="warp-index">
-      <Head>
-        <title>Eldery DB</title>
-        <link rel='icon' href='/static/logomain.svg' />
-      </Head>
-      <Nav_index name="/" />
-      <main>
-        <Cover />
-      </main>
-    </div>
+    <React.Fragment>
+      {
+        typeof document === 'undefined' ?
+          null :
+          <React.Fragment>
+            <Head>
+              <title>Eldery DB</title>
+              <link rel='icon' href='/static/logomain.svg' />
+            </Head>
+            <NavBar name="index" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+            <div className="warp-index">
+                <Cover />
+                <About />
+                <Agency />
+                <Info />
+                <Footer />
+            </div>
+          </React.Fragment>
+
+      }
+    </React.Fragment>
+
   )
 }
 export default Home;
\ No newline at end of file
diff --git a/pages/index/About.js b/pages/index/About.js
new file mode 100644
index 00000000..879b4f71
--- /dev/null
+++ b/pages/index/About.js
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import Head from 'next/head';
+import NavBar from '../../components/layout/nav';
+import { useMediaQuery } from 'react-responsive';
+
+const About = () => {
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+    const [data, setData] = useState([
+
+        {
+            title: "แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ",
+            text: "",
+            subtext: ""
+        },
+        {
+            title: "1. ข้อมูลทั่วไป",
+            text: "ประวัติส่วนตัว เช่น ชื่อ-นามสกุล ช่วงอายุ สัญชาติ ศาสนา การศึกษา",
+            subtext: "รวมไปถึงข้อมูลด้านรายได้ รายจ่าย เเละการออม"
+        },
+        {
+            title: "2. ข้อมูลด้านสุขภาพ",
+            text: "ประวัติด้านการรักษา สภาพความพิการ โรคประจำตัว การตรวจสุภาพ ",
+            subtext: "สถานพยาบาลที่ใช้ประจำ การออกกำลังกาย รวมไปถึงการสูบบุหรี่ หรือดื่มสุรา"
+        },
+        {
+            title: "3. ข้อมูลด้านครอบครัวเเละที่อยู่อาศัย",
+            text: "ข้อมูลเกี่ยวกับที่อยู่อาศัย สภาพบ้านที่อยู่อาศัย เเละจำนวนผู้อาศัยในภายครอบครัว",
+            subtext: ""
+        },
+        {
+            title: "4. ข้อมูลเกี่ยวกับภาครัฐ",
+            text: "ข้อมูลเกี่ยวกับการเข้าร่วมกิจกรรมทางสังคม/เทศบาล หรือทางศาสนกิจ",
+            subtext: "สภาพความเดือดร้อนในปัจจุบัน และความต้องการให้หน่วยงานของรัฐช่วยเหลือ"
+        },
+    ])
+
+    const [header, setHeader] = useState("Elderly DB")
+    const [subHead, setSubHead] = useState("เว็บฐานข้อมูลผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต")
+    const [summary, setSummary] = useState("เว็บไซต์ฐานข้อมูลผู้สูงอายุ เป็นการนำข้อมูลทางสถิติเกี่ยวกับผู้สูงอายุมาเเสดงผลในรูปของกราฟรูปแบบต่าง ๆ")
+
+    const [status, setStatus] = useState(false)
+
+    const [home, setHome] = useState(
+        [
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    const [homeMin, setHomeMin] = useState(
+        [
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" },
+        ]
+    )
+
+    const onConfirm = (order) => {
+        setStatus(order)
+    }
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery DB</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+                        <div className="warp-about-page">
+                            <div className="page-content">
+                                {
+                                    isSmallScreen ?
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h4>{header}</h4>
+                                                <h5>{subHead}</h5>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <img className="" src="/static/testcoverAbout.jpg" />
+                                                <div className="data-detail-content">
+                                                    {
+                                                        data.map((item, index) => (
+                                                            <div className="title-content " key={index}>
+                                                                <h6 className="header-title-content">{item.title}</h6>
+                                                                <h6 className="sub-title-content">{item.text}</h6>
+                                                                <h6 className="sub-title-content">{item.subtext}</h6>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                        :
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h1 className="name-header">{header}</h1>
+                                                <h4 className="">{subHead}</h4>
+                                                <div className="title-about">
+                                                    <h6 className="">{summary}</h6>
+                                                </div>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <img className="" src="/static/testcoverAbout.jpg" />
+                                                <div className="data-detail-content">
+                                                    {
+                                                        data.map((item, index) => (
+                                                            <div className="title-content " key={index}>
+                                                                <h6 className="header-title-content">{item.title}</h6>
+                                                                <h6 className="sub-title-content">{item.text}</h6>
+                                                                <h6 className="sub-title-content">{item.subtext}</h6>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                }
+                            </div>
+                        </div>
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
+}
+export default About;
\ No newline at end of file
diff --git a/pages/index/Allowance.js b/pages/index/Allowance.js
new file mode 100644
index 00000000..698456c9
--- /dev/null
+++ b/pages/index/Allowance.js
@@ -0,0 +1,322 @@
+import React, { useState } from 'react';
+import Head from 'next/head';
+import NavBar from '../../components/layout/nav';
+import { useMediaQuery } from 'react-responsive';
+import { Steps } from 'antd';
+const { Step } = Steps;
+
+const Allowance = () => {
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+    const [header, setHeader] = useState("เบี้ยยังชีพผู้สูงอายุ")
+    const [subHead, setSubHead] = useState("อำเภอกะทู้ จังหวัดภูเก็ต")
+
+    const [data, setData] = useState([
+        {
+            title: "เบี้ยยังชีพผู้สูงอายุ ",
+            description: "เบี้ยยังชีพผู้สูงอายุคืออะไร"
+        },
+        {
+            title: "ใครบ้างมีสิทธิได้รับเบี้ยยังชีพผู้สูงอายุ",
+            description: "สิทธิในการรับเบี้ยยังชีพผู้สูงอายุ"
+        },
+        {
+            title: "การลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ",
+            description: "สามารถลงได้ที่ไหน ต้องทำอย่างไร และรับเงินเบี้ยยังชีพผ่านทางช่องทางไหนได้บ้าง"
+        },
+        {
+            title: "หลักฐานในการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ",
+            description: " ในกรณีผู้สูงอายุมารับด้วยตนเอง หรือให้ผู้เเทนมารับ"
+        },
+        {
+            title: "เบี้ยยังชีพที่ผู้สูงอายุจะได้รับ",
+            description: "การจ่ายเบี้ยยังชัพผู้สูงอายุแบบบันไดตามช่วงอายุ"
+        },
+        {
+            title: "การเซ็นสําเนาที่ถูกต้อง",
+            description: "วิธีการเซ็นสำเนาบัตรประชาชน สำเนาทะเบียนบ้าน และสมุดบัญชีเงินฝากธนาคาร"
+        },
+    ])
+
+    const [status, setStatus] = useState(false)
+
+    const [home, setHome] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    const [homeMin, setHomeMin] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" },
+        ]
+    )
+
+    const [current, setCurrent] = useState(0)
+
+    const onConfirm = (order) => {
+        setStatus(order)
+    }
+
+    const onChangeStep = current => {
+        setCurrent(current)
+    }
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery DB</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+                        <div className="warp-allowance-page">
+                            <div className="page-content">
+                                {
+                                    isSmallScreen ?
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h4>{header}</h4>
+                                                <h5>{subHead}</h5>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <Steps current={current} direction="vertical" onChange={onChangeStep}>
+                                                    {data.map((item, index) => (
+                                                        <Step key={index} title={item.title} description={item.descriptionn} />
+                                                    ))
+                                                    }
+                                                </Steps>
+                                                {
+                                                    current == 0 ?
+                                                        <div className="data-detail-content">
+                                                            <img src="/static/imgAllowance.png" />
+                                                            <div className="title-content">
+                                                                <h6 className="header-title-content">เบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                <div className="sub-title-content">
+                                                                    <h6>คือ สวัสดิการขั้นพื้นฐานที่ภาครัฐจัดสรรไว้ให้กับผู้สูงอายุ เพื่อเป็นเงินช่วยเหลือ</h6>
+                                                                    <h6> และแบ่งเบาภาระค่าใช้จ่ายการดำรงชีวิตในแต่ละเดือน</h6>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        :
+                                                        current == 1 ?
+                                                            <div className="data-detail-content">
+                                                                <div className="title-content">
+                                                                    <h6 className="header-title-content">ใครบ้างมีสิทธิได้รับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                    <h6>คุณสมบัติของผู้ที่จะได้รับเงินช่วยเหลือต้องมีเกณฑ์ ดังต่อไปนี้</h6>
+                                                                    <div className="sub-title-content">
+                                                                        <h6>1. มีสัญชาติไทย</h6>
+                                                                        <h6>2. มีอายุ 59 ปีบริบูรณ์ขึ้นไป</h6>
+                                                                        <h6>3. ต้องไม่เคยได้รับสิทธิประโยชน์จากหน่วยงานของรัฐ หรือรัฐวิสาหกิจ</h6>
+                                                                    </div>
+                                                                    <h6 className="header-title-content">ตัวอย่างการคำนวณอายุ</h6>
+                                                                    <h6>การลงทะเบียนของปี 2560 ต้องเป็นผู้สูงอายุที่เกิดก่อนวันที่ 1 ตุลาคม 2501</h6>
+                                                                    <h6>ส่วนผู้สูงอายุที่ทะเบียนราษฎรระบุเฉพาะปีเกิด </h6>
+                                                                    <h6>ให้ถือว่าเกิดวันที่ 1 มกราคม ของปีนั้น ๆ</h6>
+                                                                    <h6 className="header-title-content">สิทธิประโยชน์จากหน่วยงานของรัฐ หรือรัฐวิสาหกิจ</h6>
+                                                                    <h6>ไม่ว่าจะเป็น เงินบำนาญ เบี้ยหวัด บำนาญพิเศษ รวมถึงเงินอื่น ๆ ในลักษณะเดียวกัน เช่น</h6>
+
+                                                                    <h6>- ผู้สูงอายุที่อยู่ในสถานสงเคราะห์ของรัฐ หรือองค์กรปกครองส่วนท้องถิ่น</h6>
+                                                                    <h6>- ผู้ที่ได้รับเงินเดือน ค่าตอบแทน รายได้ประจำ หรือผลประโยชน์ตอบแทนอย่างอื่น</h6>
+                                                                    <h6>ที่รัฐจัดให้เป็นประจำ</h6>
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            current == 2 ?
+                                                                <div className="data-detail-content">
+                                                                    <div className="title-content">
+                                                                        <h6 className="header-title-content">การลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                        <h6>สำหรับผู้สูงอายุที่มีคุณสมบัติตามเกณฑ์ที่กำหนด</h6>
+                                                                        <h6>สามารถไปลงทะเบียนรับเบี้ยยังชีพด้วยตัวเองได้ตั้งแต่วันที่ 1-30 พฤศจิกายน ของทุกปี</h6>
+                                                                        <div className="sub-title-content">
+                                                                            <h6>1. ผู้สูงอายุในกรุงเทพฯ ลงทะเบียน ณ สำนักงานเขตที่มีชื่ออยู่ในทะเบียนบ้าน</h6>
+                                                                            <h6>2. ผู้สูงอายุต่างจังหวัดยื่นได้ที่สำนักงานเทศบาล หรือองค์การบริหารส่วนตำบล (อบต.) </h6>
+                                                                            <h6 className="sub-content">ที่ผู้สูงอายุมีชื่ออยู่ในทะเบียนบ้าน</h6>
+                                                                        </div>
+                                                                        <h6 className="header-title-content">ช่องทางในการรับเงินเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                        <div className="sub-title-content">
+                                                                            <h6>1. รับเป็นเงินสดด้วยตนเอง</h6>
+                                                                            <h6>2. ให้ผู้แทนที่ได้รับมอบอำนาจรับแทน</h6>
+                                                                            <h6>3. โอนเข้าบัญชีธนาคารในนามของผู้สูงอายุ</h6>
+                                                                            <h6>4. โอนเข้าบัญชีธนาคารในนามของผู้แทนที่ได้รับมอบอำนาจจากผู้สูงอาย</h6>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                current == 3 ?
+                                                                    <div className="data-detail-content">
+                                                                        <div className="title-content">
+                                                                            <h6 className="header-title-content">หลักฐานในการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                            <div className="sub-title-content">
+                                                                                <h6>1. บัตรประจำตัวประชาชนตัวจริงพร้อมสำเนา หรือบัตรอื่นที่ออก</h6>
+                                                                                <h6 className="sub-content">โดยหน่วยงานของรัฐที่มีรูปถ่าย</h6>
+                                                                                <h6>2. ทะเบียนบ้านตัวจริงพร้อมสำเนา</h6>
+                                                                                <h6>3. สมุดบัญชีเงินฝากธนาคารตัวจริงพร้อมสำเนา สำหรับผู้ขอรับเงินผ่านธนาคาร</h6>
+                                                                            </div>
+                                                                            <h6 className="header-title-content">กรณีที่ผู้สูงอายุไม่สามารถมาจดทะเบียนได้ด้วยตนเอง</h6>
+                                                                            <h6> สามารถมอบอำนาจเป็นลายลักษณ์อักษรให้ผู้อื่นเป็นผู้ยื่นคำขอขึ้นทะเบียนรับเงินแทนได้</h6>
+                                                                            <h6>โดยผู้แทนจะต้องมีหนังสือมอบอำนาจพร้อมสำเนาบัตรประจำตัวประชาชน</h6>
+                                                                            <h6>ของผู้รับมอบอำนาจมายื่นคำขอขึ้นทะเบียนด้วย</h6>
+                                                                        </div>
+                                                                    </div>
+                                                                    :
+                                                                    current == 4 ?
+                                                                        <div className="data-detail-content">
+                                                                            <div className="title-content">
+                                                                                <h6 className="header-title-content">เบี้ยยังชีพที่ผู้สูงอายุจะได้รับ</h6>
+                                                                                <h6>ปัจจุบันการจ่ายเบี้ยยังชีพผู้สูงอายุ จะเป็นแบบขั้นบันไดตามช่วงอายุ</h6>
+                                                                                <h6>โดยผู้สูงอายุจะได้รับเงินช่วยเหลือเป็นรายเดือนต่อเนื่องไปจนกว่าจะเสียชีวิต </h6>
+                                                                                <h6>ซึ่งแบ่งได้ตามนี้</h6>
+                                                                                <div className="sub-title-content">
+                                                                                    <h6>- ช่วงอายุ 60 - 69 ปี ได้รับเงิน 600 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 70 - 79 ปี ได้รับเงิน 700 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 80 - 89 ปี ได้รับเงิน 800 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 90 ปีขึ้นไป ได้รับเงิน 1,000 บาทต่อเดือน</h6>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        :
+                                                                        null
+                                                }
+                                            </div>
+                                        </div>
+                                        :
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h3>{header}</h3>
+                                                <h3>{subHead}</h3>
+                                            </div>
+                                            <div className="detail-content">
+                                                <Steps current={current} direction="vertical" onChange={onChangeStep}>
+                                                    {data.map((item, index) => (
+                                                        <Step key={index} title={item.title} description={item.description} />
+                                                    ))
+                                                    }
+                                                </Steps>
+                                                {
+                                                    current == 0 ?
+                                                        <div className="data-detail-content">
+                                                            <img src="/static/imgAllowance.png" />
+                                                            <div className="title-content">
+                                                                <h6 className="header-title-content">เบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                <div className="sub-title-content">
+                                                                    <h6>คือ สวัสดิการขั้นพื้นฐานที่ภาครัฐจัดสรรไว้ให้กับผู้สูงอายุ เพื่อเป็นเงินช่วยเหลือ</h6>
+                                                                    <h6> และแบ่งเบาภาระค่าใช้จ่ายการดำรงชีวิตในแต่ละเดือน</h6>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        :
+                                                        current == 1 ?
+                                                            <div className="data-detail-content">
+                                                                <div className="title-content">
+                                                                    <h6 className="header-title-content">ใครบ้างมีสิทธิได้รับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                    <h6>คุณสมบัติของผู้ที่จะได้รับเงินช่วยเหลือต้องมีเกณฑ์ ดังต่อไปนี้</h6>
+                                                                    <div className="sub-title-content">
+                                                                        <h6>1. มีสัญชาติไทย</h6>
+                                                                        <h6>2. มีอายุ 59 ปีบริบูรณ์ขึ้นไป</h6>
+                                                                        <h6>3. ต้องไม่เคยได้รับสิทธิประโยชน์จากหน่วยงานของรัฐ หรือรัฐวิสาหกิจ</h6>
+                                                                    </div>
+                                                                    <h6 className="header-title-content">ตัวอย่างการคำนวณอายุ</h6>
+                                                                    <h6>การลงทะเบียนของปี 2560 ต้องเป็นผู้สูงอายุที่เกิดก่อนวันที่ 1 ตุลาคม 2501</h6>
+                                                                    <h6>ส่วนผู้สูงอายุที่ทะเบียนราษฎรระบุเฉพาะปีเกิด </h6>
+                                                                    <h6>ให้ถือว่าเกิดวันที่ 1 มกราคม ของปีนั้น ๆ</h6>
+                                                                    <h6 className="header-title-content">สิทธิประโยชน์จากหน่วยงานของรัฐ หรือรัฐวิสาหกิจ</h6>
+                                                                    <h6>ไม่ว่าจะเป็น เงินบำนาญ เบี้ยหวัด บำนาญพิเศษ รวมถึงเงินอื่น ๆ ในลักษณะเดียวกัน เช่น</h6>
+
+                                                                    <h6>- ผู้สูงอายุที่อยู่ในสถานสงเคราะห์ของรัฐ หรือองค์กรปกครองส่วนท้องถิ่น</h6>
+                                                                    <h6>- ผู้ที่ได้รับเงินเดือน ค่าตอบแทน รายได้ประจำ หรือผลประโยชน์ตอบแทนอย่างอื่น</h6>
+                                                                    <h6>ที่รัฐจัดให้เป็นประจำ</h6>
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            current == 2 ?
+                                                                <div className="data-detail-content">
+                                                                    <div className="title-content">
+                                                                        <h6 className="header-title-content">การลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                        <h6>สำหรับผู้สูงอายุที่มีคุณสมบัติตามเกณฑ์ที่กำหนด</h6>
+                                                                        <h6>สามารถไปลงทะเบียนรับเบี้ยยังชีพด้วยตัวเองได้ตั้งแต่วันที่ 1-30 พฤศจิกายน ของทุกปี</h6>
+                                                                        <div className="sub-title-content">
+                                                                            <h6>1. ผู้สูงอายุในกรุงเทพฯ ลงทะเบียน ณ สำนักงานเขตที่มีชื่ออยู่ในทะเบียนบ้าน</h6>
+                                                                            <h6>2. ผู้สูงอายุต่างจังหวัดยื่นได้ที่สำนักงานเทศบาล หรือองค์การบริหารส่วนตำบล (อบต.) </h6>
+                                                                            <h6 className="sub-content">ที่ผู้สูงอายุมีชื่ออยู่ในทะเบียนบ้าน</h6>
+                                                                        </div>
+                                                                        <h6 className="header-title-content">ช่องทางในการรับเงินเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                        <div className="sub-title-content">
+                                                                            <h6>1. รับเป็นเงินสดด้วยตนเอง</h6>
+                                                                            <h6>2. ให้ผู้แทนที่ได้รับมอบอำนาจรับแทน</h6>
+                                                                            <h6>3. โอนเข้าบัญชีธนาคารในนามของผู้สูงอายุ</h6>
+                                                                            <h6>4. โอนเข้าบัญชีธนาคารในนามของผู้แทนที่ได้รับมอบอำนาจจากผู้สูงอาย</h6>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                current == 3 ?
+                                                                    <div className="data-detail-content">
+                                                                        <div className="title-content">
+                                                                            <h6 className="header-title-content">หลักฐานในการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                                                            <div className="sub-title-content">
+                                                                                <h6>1. บัตรประจำตัวประชาชนตัวจริงพร้อมสำเนา หรือบัตรอื่นที่ออก</h6>
+                                                                                <h6 className="sub-content">โดยหน่วยงานของรัฐที่มีรูปถ่าย</h6>
+                                                                                <h6>2. ทะเบียนบ้านตัวจริงพร้อมสำเนา</h6>
+                                                                                <h6>3. สมุดบัญชีเงินฝากธนาคารตัวจริงพร้อมสำเนา สำหรับผู้ขอรับเงินผ่านธนาคาร</h6>
+                                                                            </div>
+                                                                            <h6 className="header-title-content">กรณีที่ผู้สูงอายุไม่สามารถมาจดทะเบียนได้ด้วยตนเอง</h6>
+                                                                            <h6> สามารถมอบอำนาจเป็นลายลักษณ์อักษรให้ผู้อื่นเป็นผู้ยื่นคำขอขึ้นทะเบียนรับเงินแทนได้</h6>
+                                                                            <h6>โดยผู้แทนจะต้องมีหนังสือมอบอำนาจพร้อมสำเนาบัตรประจำตัวประชาชน</h6>
+                                                                            <h6>ของผู้รับมอบอำนาจมายื่นคำขอขึ้นทะเบียนด้วย</h6>
+                                                                        </div>
+                                                                    </div>
+                                                                    :
+                                                                    current == 4 ?
+                                                                        <div className="data-detail-content">
+                                                                            <div className="title-content">
+                                                                                <h6 className="header-title-content">เบี้ยยังชีพที่ผู้สูงอายุจะได้รับ</h6>
+                                                                                <h6>ปัจจุบันการจ่ายเบี้ยยังชีพผู้สูงอายุ จะเป็นแบบขั้นบันไดตามช่วงอายุ</h6>
+                                                                                <h6>โดยผู้สูงอายุจะได้รับเงินช่วยเหลือเป็นรายเดือนต่อเนื่องไปจนกว่าจะเสียชีวิต </h6>
+                                                                                <h6>ซึ่งแบ่งได้ตามนี้</h6>
+                                                                                <div className="sub-title-content">
+                                                                                    <h6>- ช่วงอายุ 60 - 69 ปี ได้รับเงิน 600 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 70 - 79 ปี ได้รับเงิน 700 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 80 - 89 ปี ได้รับเงิน 800 บาทต่อเดือน</h6>
+                                                                                    <h6>- ช่วงอายุ 90 ปีขึ้นไป ได้รับเงิน 1,000 บาทต่อเดือน</h6>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        :
+                                                                        current == 5 ?
+                                                                            <div className="data-detail-content">
+                                                                                <div className="title-content">
+                                                                                    <h6 className="header-title-content">การเซ็นสําเนาที่ถูกต้อง</h6>
+                                                                                    <div className="sub-title-content">
+                                                                                        <h6>1. ขีดเส้นคร่อมบนตัวสำเนาในส่วนที่เป็นข้อมูล</h6>
+                                                                                        <h6 className="sub-content">เกี่ยวกับเจ้าของเอกสาร หรือไม่ก็ได้</h6>
+                                                                                        <h6>2. ควรระบุวัตถุประสงค์ในการนำไปใช้ให้ชัดเจนว่า เอกสารฉบับนั้นใช้สำหรับทำอะไร เช่น</h6>
+                                                                                        <h6 className="sub-content">“ใช้เฉพาะการสมัครงานเท่านั้น” หรือ “ใช้สำหรับติดต่อเรื่อง…เท่านั้น”</h6>
+                                                                                        <h6>3. ระบุ วัน เดือน ปี ณ วันที่ยื่นเรื่อง</h6>
+                                                                                        <h6>4. เขียนข้อความทั้งหมดด้วยหมึกสีดำ</h6>
+                                                                                        <h6>5. ต้องเขียนข้อความทั้งหมดลงบนสำเนาส่วนที่เป็นบัตร</h6>
+                                                                                    </div>
+
+                                                                                </div>
+                                                                            </div>
+                                                                            :
+                                                                            null
+                                                }
+                                            </div>
+                                        </div>
+                                }
+                            </div>
+                        </div>
+                    </React.Fragment >
+            }
+        </React.Fragment>
+    )
+}
+export default Allowance;
\ No newline at end of file
diff --git a/pages/index/Contact.js b/pages/index/Contact.js
new file mode 100644
index 00000000..5c0c0b60
--- /dev/null
+++ b/pages/index/Contact.js
@@ -0,0 +1,290 @@
+import React, { useState, useEffect } from 'react';
+import Head from 'next/head';
+import NavBar from '../../components/layout/nav';
+import { useMediaQuery } from 'react-responsive';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Skeleton, Card, Avatar, message, Tooltip } from 'antd';
+import { FacebookFilled, EnvironmentFilled, CopyFilled, EllipsisOutlined } from '@ant-design/icons';
+const { Meta } = Card;
+
+const Contact = () => {
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+    const [header, setHeader] = useState("การติดต่อหน่วยงาน")
+    const [subHead, setSubHead] = useState("อำเภอกะทู้ จังหวัดภูเก็ต")
+
+    const [department, setDepartment] = useState([
+        {
+            img: "/static/imgContact1.png",
+            name: "สำนักงานเทศบาลเมืองกะทู้",
+            detail: "12 ม.2 ถ.วิชิตสงคราม ต.กะทู้ อ.กะทู้ จ.ภูเก็ต โทร.076-321500",
+            tel: "076321500",
+            link: "https://www.facebook.com/kathu.municipality",
+            map: "https://www.google.com/maps/place/%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%97%E0%B8%A8%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B9%80%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%87%E0%B8%81%E0%B8%B0%E0%B8%97%E0%B8%B9%E0%B9%89/@7.9111378,98.3452833,17z/data=!3m1!4b1!4m5!3m4!1s0x3050305d21d9042d:0x24ca59f8b15d6fde!8m2!3d7.9111378!4d98.347472"
+        },
+        {
+            img: "/static/imgContact2.png",
+            name: "สถานีตำรวจภูธรกะทู้",
+            detail: "51/22 ม.6 ถ.วิชิตสงคราม ต.กะทู้ อ.กะทู้ จ.ภูเก็ต โทร.076-323300",
+            tel: "076323300",
+            link: "https://www.facebook.com/Kathu.Phuket.Police",
+            map: "https://www.google.com/maps/place/%E0%B8%AA%E0%B8%96%E0%B8%B2%E0%B8%99%E0%B8%B5%E0%B8%95%E0%B8%B3%E0%B8%A3%E0%B8%A7%E0%B8%88%E0%B8%A0%E0%B8%B9%E0%B8%98%E0%B8%A3%E0%B8%81%E0%B8%B0%E0%B8%97%E0%B8%B9%E0%B9%89/@7.9084711,98.3305519,17z/data=!3m1!4b1!4m5!3m4!1s0x30503042d20d8c13:0x53b56df584a63ddb!8m2!3d7.9084711!4d98.3327406"
+        },
+        {
+            img: "/static/imgContact3.png",
+            name: "ที่ว่าการอำเภอกะทู้",
+            detail: "51/16 ถ.วิชิตสงคราม ต.กะทู้ อ.กะทู้ จ.ภูเก็ต โทร.076-321133",
+            tel: "076321133",
+            link: "https://www.facebook.com/tevakarnaumpor",
+            map: "https://www.google.co.th/maps/place/%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B3%E0%B9%80%E0%B8%A0%E0%B8%AD%E0%B8%81%E0%B8%B0%E0%B8%97%E0%B8%B9%E0%B9%89+Kathu+District+Office/@7.9100774,98.3360604,16z/data=!4m8!1m2!2m1!1z4LiX4Li14LmI4Lin4LmI4Liy4LiB4Liy4Lij4Lit4Liz4LmA4Lig4Lit4LiB4Liw4LiX4Li54LmJICDguIjguLHguIfguKvguKfguLHguJTguKDguLnguYDguIHguYfguJU!3m4!1s0x3050305d2835917d:0x9a921465196e83a6!8m2!3d7.9090171!4d98.3334266?hl=th&authuser=0"
+        },
+    ])
+
+    const [help, setHelp] = useState([
+        {
+            img: "/static/imgContact4.png",
+            name: "โรงพยาบาลส่งเสริมสุขภาพตำบล ตำบลกะทู้",
+            detail: "59/3 ม.4 ต.กะทู้ อ.กะทู้ จ.ภูเก็ต โทร.076-321548",
+            tel: "076321548",
+            map: "https://www.google.com/maps/place/%E0%B9%82%E0%B8%A3%E0%B8%87%E0%B8%9E%E0%B8%A2%E0%B8%B2%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%B8%E0%B8%82%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%81%E0%B8%B0%E0%B8%97%E0%B8%B9%E0%B9%89/@7.916979,98.3415863,17z/data=!3m1!4b1!4m5!3m4!1s0x30503057af5e0b47:0xb21089b5f78f4817!8m2!3d7.916979!4d98.343775"
+        },
+        {
+            img: "/static/imgContact5.png",
+            name: "โรงพยาบาลป่าตอง",
+            detail: " 57 ถ.ใสน้ำเย็น ต.ป่าตอง อ.กะทู้ จ.ภูเก็ต เปิด 24 ชม. โทร.076-3426334",
+            tel: "0763426334",
+            map: "https://www.google.co.th/maps/place/%E0%B9%82%E0%B8%A3%E0%B8%87%E0%B8%9E%E0%B8%A2%E0%B8%B2%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%9B%E0%B9%88%E0%B8%B2%E0%B8%95%E0%B8%AD%E0%B8%87/@7.896479,98.2996783,17z/data=!3m1!4b1!4m5!3m4!1s0x30503aa248747279:0xe0ff9b6f01619ceb!8m2!3d7.896479!4d98.301867?hl=th&authuser=0"
+        },
+
+    ])
+
+    const [status, setStatus] = useState(false)
+
+    const [home, setHome] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    const [homeMin, setHomeMin] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "สังคมผู้สูงอายุ", href: "/index/society" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" },
+        ]
+    )
+
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 1500)
+    }, [])
+
+    const success = () => {
+        message.success('คัดลอกสำเร็จ');
+    }
+
+    const text = <span>prompt text</span>;
+
+    const buttonWidth = 70;
+
+    const onConfirm = (order) => {
+        setStatus(order)
+    }
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery DB</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+                        <div className="warp-contact-page">
+                            <div className="page-content">
+                                {
+                                    isSmallScreen ?
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h4>{header}</h4>
+                                                <h5>{subHead}</h5>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <div className="data-detail-content">
+                                                    {
+                                                        department.map((item, index) => (
+                                                            <Card
+                                                                style={{ width: 350, marginTop: 15 }}
+                                                                actions={[
+
+                                                                    <Tooltip placement="bottom" title="เฟซบุ๊ก">
+                                                                        <a href={item.link} target="_blank">
+                                                                            <FacebookFilled key="fb" />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="แผนที่">
+                                                                        <a href={item.map} target="_blank">
+                                                                            <EnvironmentFilled />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
+                                                                        <CopyToClipboard text={item.tel} >
+                                                                            <CopyFilled key="Copy" onClick={success} />
+                                                                        </CopyToClipboard>
+                                                                    </Tooltip>,
+
+                                                                ]}
+                                                            >
+                                                                <Skeleton loading={loading} avatar active >
+                                                                    <Meta
+                                                                        avatar={
+                                                                            <Avatar src={item.img} />
+                                                                        }
+                                                                        title={item.name}
+                                                                        subTitle={item.detail}
+                                                                        description={item.detail}
+                                                                    />
+                                                                </Skeleton>
+                                                            </Card>
+                                                        ))
+                                                    }
+                                                </div>
+
+                                                <div className="data-detail-content">
+                                                    {
+                                                        help.map((item, index) => (
+                                                            <Card
+                                                                style={{ width: 400, marginTop: 15 }}
+                                                                actions={[
+
+                                                                    <Tooltip placement="bottom" title="แผนที่">
+                                                                        <a href={item.map} target="_blank">
+                                                                            <EnvironmentFilled />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
+                                                                        <CopyToClipboard text={item.tel} >
+                                                                            <CopyFilled key="Copy" onClick={success} />
+                                                                        </CopyToClipboard>
+                                                                    </Tooltip>,
+
+                                                                ]}
+                                                            >
+                                                                <Skeleton loading={loading} avatar active >
+                                                                    <Meta
+                                                                        avatar={
+                                                                            <Avatar src={item.img} />
+                                                                        }
+                                                                        title={item.name}
+                                                                        subTitle={item.detail}
+                                                                        description={item.detail}
+                                                                    />
+                                                                </Skeleton>
+                                                            </Card>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                        :
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h3>{header}</h3>
+                                                <h3>{subHead}</h3>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <div className="data-detail-content">
+                                                    {
+                                                        department.map((item, index) => (
+                                                            <Card
+                                                                style={{ width: 300, marginTop: 15 }}
+                                                                actions={[
+
+                                                                    <Tooltip placement="bottom" title="เฟซบุ๊ก">
+                                                                        <a href={item.link} target="_blank">
+                                                                            <FacebookFilled key="fb" />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="แผนที่">
+                                                                        <a href={item.map} target="_blank">
+                                                                            <EnvironmentFilled />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
+                                                                        <CopyToClipboard text={item.tel} >
+                                                                            <CopyFilled key="Copy" onClick={success} />
+                                                                        </CopyToClipboard>
+                                                                    </Tooltip>,
+
+                                                                ]}
+                                                            >
+                                                                <Skeleton loading={loading} avatar active >
+                                                                    <Meta
+                                                                        avatar={
+                                                                            <Avatar src={item.img} />
+                                                                        }
+                                                                        title={item.name}
+                                                                        subTitle={item.detail}
+                                                                        description={item.detail}
+                                                                    />
+                                                                </Skeleton>
+                                                            </Card>
+                                                        ))
+                                                    }
+                                                </div>
+
+                                                <div className="data-detail-content">
+                                                    {
+                                                        help.map((item, index) => (
+                                                            <Card
+                                                                style={{ width: 400, marginTop: 15 }}
+                                                                actions={[
+
+                                                                    <Tooltip placement="bottom" title="แผนที่">
+                                                                        <a href={item.map} target="_blank">
+                                                                            <EnvironmentFilled />
+                                                                        </a>
+                                                                    </Tooltip>,
+                                                                    <Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
+                                                                        <CopyToClipboard text={item.tel} >
+                                                                            <CopyFilled key="Copy" onClick={success} />
+                                                                        </CopyToClipboard>
+                                                                    </Tooltip>,
+
+                                                                ]}
+                                                            >
+                                                                <Skeleton loading={loading} avatar active >
+                                                                    <Meta
+                                                                        avatar={
+                                                                            <Avatar src={item.img} />
+                                                                        }
+                                                                        title={item.name}
+                                                                        subTitle={item.detail}
+                                                                        description={item.detail}
+                                                                    />
+                                                                </Skeleton>
+                                                            </Card>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                }
+                            </div>
+                        </div>
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
+}
+export default Contact;
\ No newline at end of file
diff --git a/pages/index/Society.js b/pages/index/Society.js
new file mode 100644
index 00000000..d35f2ba1
--- /dev/null
+++ b/pages/index/Society.js
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import Head from 'next/head';
+import NavBar from '../../components/layout/nav';
+import { useMediaQuery } from 'react-responsive';
+
+const Society = () => {
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+    const [data, setData] = useState([
+        {
+            title: "ศูนย์การเรียนรู้สำหรับผู้สูงอายุ",
+            amount: "มีทั้งหมด 14 เเห่ง",
+            text: "การเรียนรู้ เพื่อการพัฒนาศักยภาพผู้สูงอายุ",
+            subtext: "ไม่ว่าจะเป็นตัวผู้สูงอายุเอง หรือผู้ที่อาศัยอยู่กับผู้สูงอายุ"
+        },
+        {
+            title: "สถานพยาบาล",
+            amount: "มีทั้งหมด 7 เเห่ง",
+            text: "โดยเป็นสถานพยาบาลที่มีช่องทางพิเศษบริการผู้สูงอายุ",
+            subtext: "ทำให้สามารถเข้าถึงการบริการสุขภาพได้สะดวก รวดเร็ว"
+        },
+        {
+            title: "กิจกรรมสำหรับผู้สูงอายุในด้านต่างๆ",
+            amount: "",
+            text: "เช่น ด้านฝึกอาชีพ สุขภาพ นันทนาการ เป็นต้น",
+            subtext: ""
+        },
+    ])
+
+    const [header, setHeader] = useState("การจัดการเกี่ยวกับสังคมผู้สูงอายุ")
+    const [subHead, setSubHead] = useState("ภายในอำเภอกะทู้ จังหวัดภูเก็ต")
+
+    const [status, setStatus] = useState(false)
+
+    const [home, setHome] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" }
+        ]
+    )
+
+    const [homeMin, setHomeMin] = useState(
+        [
+            { name: "เกี่ยวกับเรา", href: "/index/about" },
+            { name: "เบี้ยยังชีพ", href: "/index/allowance" },
+            { name: "เข้าสู่หน้าหลัก", href: "/main" },
+        ]
+    )
+
+    const onConfirm = (order) => {
+        setStatus(order)
+    }
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery DB</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+                        <div className="warp-society-page">
+                            <div className="page-content">
+                                {
+                                    isSmallScreen ?
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h4>{header}</h4>
+                                                <h5>{subHead}</h5>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <img src="/static/gifcover2.gif" />
+                                                <div className="data-detail-content">
+                                                    {
+                                                        data.map((item, index) => (
+                                                            <div className="title-content" key={index}>
+                                                                <div className="header-title-content">
+                                                                    <h6 >{item.title}</h6>
+                                                                </div>
+                                                                <h5>{item.amount}</h5>
+                                                                <h6>{item.text}</h6>
+                                                                <h6>{item.subtext}</h6>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                        :
+                                        <div className="container-fluid">
+                                            <div className="head-content">
+                                                <h3>{header}</h3>
+                                                <h3>{subHead}</h3>
+                                            </div>
+
+                                            <div className="detail-content">
+                                                <img src="/static/gifcover2.gif" />
+                                                <div className="data-detail-content">
+                                                    {
+                                                        data.map((item, index) => (
+                                                            <div className="title-content" key={index}>
+                                                                <div className="header-title-content">
+                                                                    <h6 >{item.title}</h6>
+                                                                    <h5>{item.amount}</h5>
+                                                                </div>
+                                                                <h6>{item.text}</h6>
+                                                                <h6>{item.subtext}</h6>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                }
+                            </div>
+                        </div>
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
+}
+export default Society;
\ No newline at end of file
diff --git a/pages/index/contact.js b/pages/index/contact.js
deleted file mode 100644
index 3344c38a..00000000
--- a/pages/index/contact.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react'
-import { Carousel } from 'rsuite';
-import Nav_index from '../../components/nav_index'
-import Cardcontact from '../../components/layout/cardcontact'
-import Sheetapi from '../../config/api'
-
-
-class Contact extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      userlist: [],
-      img: [
-        { img: "/static/contact1.jpg" },
-        { img: "/static/contact2.jpg" },
-        { img: "/static/contact3.jpg" },
-        { img: "/static/contact4.jpg" },
-        { img: "/static/contact5.jpg" },
-      ]
-    }
-  }
-
-  async componentDidMount() {
-    let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-    this.access_token = userOauth.data.access_token
-    await this.userList('การติดต่อสำนักงานเทศบาลเมืองกะทู้!B4:G')
-  }
-
-  userList = async (value) => {
-    try {
-      this.list = await Sheetapi.getSheet(this.access_token, value)
-
-      for (let i = 0; i < this.list.length; i++) {
-        let value = await {
-          รูปภาพ: this.list[i][0],
-          คำนำหน้าชื่อ: this.list[i][1],
-          ชื่อ: this.list[i][2],
-          นามสกุล: this.list[i][3],
-          ตำเเหน่ง: this.list[i][4],
-          เบอร์ติดต่อ: this.list[i][5],
-
-
-        }
-        this.setState(prevState => ({
-          userlist: [...prevState.userlist, value]
-        }))
-      }
-
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  render() {
-    const { userlist, img } = this.state
-
-    return (
-      <div className="warp-detail">
-        <Nav_index />
-        <div className="page-detail">
-          <div className="container-detail">
-            <div className="item-header">
-              <h3>การติดต่อสำนักงานเทศบาลเมืองกะทู้</h3>
-              <h4>ตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-            </div>
-          </div>
-          <div className="page-content-contact">
-            <div className="container-fluid-contact">
-
-              {
-                userlist.map((item, index) => {
-                  return (
-                    <Cardcontact
-                      img={item.รูปภาพ}
-                      title={item.คำนำหน้าชื่อ}
-                      name={item.ชื่อ}
-                      sername={item.นามสกุล}
-                      position={item.ตำเเหน่ง}
-                      tel={item.เบอร์ติดต่อ}
-                    />
-                  )
-                })
-              }
-            </div>
-
-
-            <div className="timeline-contact">
-              <Carousel autoplay className="custom-slider">
-                {
-                  img.map((item, index) => {
-                    return (
-                      <img
-                        src={item.img}
-                        height="250"
-                      />
-                    )
-                  })
-                }
-
-              </Carousel>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-export default Contact;
\ No newline at end of file
diff --git a/pages/index/services.js b/pages/index/services.js
deleted file mode 100644
index 6a91c50f..00000000
--- a/pages/index/services.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from 'react'
-import Nav_index from '../../components/nav_index'
-import { Steps, ButtonGroup, Button, Message } from 'rsuite';
-import 'rsuite/lib/styles/index.less';
-
-const styles = {
-    width: '200px',
-    display: 'inline-table',
-    verticalAlign: 'top'
-};
-
-class Services extends React.Component {
-
-    constructor() {
-        super();
-        this.state = {
-            step: 0,
-            message: 0
-        };
-        this.decline = this.decline.bind(this);
-        this.increase = this.increase.bind(this);
-    }
-    changePercent(nextstep) {
-        const step = nextstep < 0 ? 0 : nextstep > 3 ? 3 : nextstep;
-
-        this.setState({
-            step,
-            message: step
-        });
-    }
-    decline() {
-        this.changePercent(this.state.step - 1);
-    }
-    increase() {
-        this.changePercent(this.state.step + 1);
-    }
-
-
-    render() {
-
-        const { step, message } = this.state;
-        return (
-            <div className="warp-detail">
-                <Nav_index />
-                <div className="page-detail">
-                    <div className="container-detail">
-                        <div className="item-header">
-                            <h3>การบริการ และการช่วยเหลือ</h3>
-
-                            <h4>การลงทะเบียน เเละยื่นคำขอรับเบี้ยยังชีพผู้สูงอายุ</h4>
-                        </div>
-                    </div>
-                    <div className="page-content-services">
-
-                        <div className="normal">
-                            <ButtonGroup>
-                                <Button onClick={this.decline} disabled={step === 0} appearance={step !== 0 ? "primary" : ""}>
-                                    <h5>Previous</h5>
-                                </Button>
-                                <Button onClick={this.increase} disabled={step === 3} >
-                                    <h5>Next</h5>
-                                </Button>
-                            </ButtonGroup>
-
-                            <Steps current={step} vertical style={styles} >
-                                <Steps.Item title="ลงทะเบียน" description="ลงทะเบียนผ่าน เเบบคำขอลงทะเบียนรับเงินเบี้ยยังชีพผู้สูงอายุ" />
-                                <Steps.Item title="ตรวจสอบคุณสมบัติ" description="จากทะเบียนราษฎร" />
-                                <Steps.Item title="บันทึกข้อมูล" description="ลงฐานข้อมูล" />
-                                <Steps.Item title="เสนออนุมัติ" description="แจ้งผู้ยื่นขอ / ประกาศรายชื่อผู้มีสิทธิ" />
-                            </Steps>
-                        </div>
-
-                        <div className="normal-message">
-
-                            <Message
-                                type="info"
-                                title="การลงทะเบียนรับเงินเบี้ยยังชีพผู้สูงอายุ"
-                                description={
-                                    <p>
-                                        <h4>หลักฐาน</h4>
-                                        <h5>
-                                            1. บัตรประจำตัวประชาชน หรือบัตรที่มีรูปถ่ายที่ออกโดยหน่วยงานรัฐพร้อมสำเนา<br />
-                                            2. ทะเบียนบ้านพร้อมสำเนา<br />
-                                            3. สมุดบัญชีธนาคาร พร้อมสำเนา (กรณีรับเงินผ่านธนาคาร)
-                                            </h5>
-
-                                        <br />
-                                        <h4>แบบฟอร์มที่เกี่ยวข้อง</h4>
-
-                                        <a href="#">เเบบคำขอลงทะเบียนรับเงินเบี้ยยังชีพผู้สูงอายุ</a>
-                                        <a href="#">หนังสือมอบอำนาจ</a>
-                                    </p>
-                                }
-                            />
-
-                            {
-                                message == 1 ?
-                                    <Message
-                                        type="warning"
-                                        title="คุณสมบัติ"
-                                        description={
-                                            <p>
-                                                <h5>
-                                                    1. มีสัญชาติไทย อายุหกสิบปีบริบูรณ์ขึ้นไป<br />
-                                                    2. มีภูมิลำเนาอยู่ในเขตองค์การปกครองส่วนท้องถิ่นตามทะเบียนบ้าน<br />
-                                                    3. ไม่เป็นผู้ได้รับสวัสดิการ หรือสิทธิประโยชน์อื่นใดจากหน่วยงานของรัฐ<br />
-                                                    รัฐวิสาหกิจ หรือองค์กรปกครองส่วนท้องถิ่น เช่น ผู้ได้รับเงินบำนาญ เบี้ยวัด<br />
-                                                    ผู้ที่อยู่อาศัยในสถานสงเคราะห์ของรัฐ หรือองค์กรปกครองส่วนท้องถิ่น
-
-                                                </h5>
-                                                <p>ยกเว้นผู้พิการ เเละผู้ป่วยเอดส์</p>
-                                            </p>
-                                        }
-                                    />
-                                    :
-                                    message == 3 ?
-                                        <Message
-                                            type="success"
-                                            title="ประกาศรายชื่อผู้ที่มีสิทธิ"
-                                            description={
-                                                <p>
-                                                    <br />
-                                                    <a href="/main/mantable">รายชื่อเพศชาย</a>
-                                                    <a href="/main/womantable">รายชื่อเพศหญิง</a>
-                                                    <a href="/main/totaltable">รายชื่อรวม</a>
-                                                </p>
-                                            }
-                                        />
-                                        :
-                                        null
-                            }
-
-                        </div>
-
-                        <div className="mobile-message">
-                            <Message
-                                type="info"
-                                title="การลงทะเบียนรับเงินเบี้ยยังชีพผู้สูงอายุ"
-                                description={
-                                    <p>
-                                        <h4>หลักฐาน</h4>
-                                        <h5>
-                                            1. บัตรประจำตัวประชาชน หรือบัตรที่มีรูปถ่ายที่ออกโดยหน่วยงานรัฐพร้อมสำเนา<br />
-                                            2. ทะเบียนบ้านพร้อมสำเนา<br />
-                                            3. สมุดบัญชีธนาคาร พร้อมสำเนา (กรณีรับเงินผ่านธนาคาร)
-                                            </h5>
-
-                                        <br />
-                                        <h4>แบบฟอร์มที่เกี่ยวข้อง</h4>
-
-                                        <a href="#">เเบบคำขอลงทะเบียนรับเงินเบี้ยยังชีพผู้สูงอายุ</a>
-                                        <a href="#">หนังสือมอบอำนาจ</a>
-                                    </p>
-                                }
-                            />
-
-
-                            <Message
-                                type="warning"
-                                title="คุณสมบัติ"
-                                description={
-                                    <p>
-                                        <h5>
-                                            1. มีสัญชาติไทย อายุหกสิบปีบริบูรณ์ขึ้นไป<br />
-                                            2. มีภูมิลำเนาอยู่ในเขตองค์การปกครองส่วนท้องถิ่นตามทะเบียนบ้าน<br />
-                                            3. ไม่เป็นผู้ได้รับสวัสดิการ หรือสิทธิประโยชน์อื่นใดจากหน่วยงานของรัฐ<br />
-                                            รัฐวิสาหกิจ หรือองค์กรปกครองส่วนท้องถิ่น เช่น ผู้ได้รับเงินบำนาญ เบี้ยวัด<br />
-                                            ผู้ที่อยู่อาศัยในสถานสงเคราะห์ของรัฐ หรือองค์กรปกครองส่วนท้องถิ่น
-                                        </h5>
-                                        <p>ยกเว้นผู้พิการ เเละผู้ป่วยเอดส์</p>
-                                    </p>
-                                }
-                            />
-
-                            <Message
-                                type="success"
-                                title="ประกาศรายชื่อผู้ที่มีสิทธิ"
-                                description={
-                                    <p>
-                                        <br />
-                                        <a href="/main/mantable">รายชื่อเพศชาย</a>
-                                        <a href="/main/womantable">รายชื่อเพศหญิง</a>
-                                        <a href="/main/totaltable">รายชื่อรวม</a>
-                                    </p>
-                                }
-                            />
-
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-export default Services;
diff --git a/pages/main.js b/pages/main.js
index 9625a953..40fe23b3 100644
--- a/pages/main.js
+++ b/pages/main.js
@@ -1,44 +1,18 @@
-import React, { useState } from 'react'
-import dynamic from 'next/dynamic'
-import Map from '../components/layout/Map';
-import Navbar_main from '../components/nav_main';
-import Sidebar from '../components/layout/sidebar';
+import React from 'react'
+import Dashboard from '../components/layout/dashboard';
 
-const BarMap = dynamic(
-    () => import('../components/chart/barMap'),
-    { ssr: false }
-)
-
-const Main = () => {
-
-    const [status, setStatus] = useState(true)
-
-    const onConfirm = (order) => {
-        setStatus(order)
-    }
+const MainPage = () => {
 
     return (
-        <div className="warp-main">
-            <Navbar_main confirm={onConfirm} status={status} />
-            <Sidebar status={status} />
-            <div className={`wrapper${status ? " menuDisplayed" : ""}`}>
-                <div className="page-content-wrapper">
-                    <div className="container-fluid">
-                        <h1 className="text-center">สังคมผู้สูงอายุ</h1>
-                        <h2 className="small text-center">จำนวนประชากรผู้สูงอายุภายในจังหวัดภูเก็ต</h2>
-                        <div className="warp-map">
-                            <div className="map-Img">
-                                <Map />
-                            </div>
-
-                            <div className="map-content">
-                                <BarMap />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <Dashboard>
+                        Main
+                    </Dashboard>
+            }
+        </React.Fragment>
     )
 }
-export default Main;
\ No newline at end of file
+export default MainPage;
\ No newline at end of file
diff --git a/pages/main/allowance.js b/pages/main/allowance.js
deleted file mode 100644
index c3603a2e..00000000
--- a/pages/main/allowance.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {useState} from 'react'
-import CardData from '../../components/layout/cardmain';
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import _ from 'lodash'
-
-const Allowance = props => {
-    
-    const [status,setStatus] = useState(true)
-    
-    const onConfirm = (order) => {
-        setStatus(order)
-    }
-
-    return (
-        <div className="warp-main">
-            <Navbar_main confirm={onConfirm} status={status} />
-            <Sidebar status={status} />
-            <div className={`wrapper${status ? " menuDisplayed" : ""}`}>
-                <div className="page-content-wrapper">
-                    <div className="container-fluid">
-                        <h1 className="text-center">การรับเบี้ยยังชีพผู้สูงอายุ</h1>
-                        <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                        <CardData />
-                        <div className="data-source" >
-                            <a
-                                target="_blank"
-                                href="https://docs.google.com/spreadsheets/d/15bzSXCpQI7qVZyW3-kCQsQ1Qg_6ssRSTa5X4aNavIp8/edit?usp=sharing">
-                                <img src="/static/logo-google-sheets.svg" />
-                            </a>
-
-                            <div className="text-source">
-                                <h6 >ที่มา: แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ ผู้พิการเเละผู้ป่วยในชุมชน</h6>
-                                <h6>เทศบาลเมืองกะทู้ จังหวัดภูเก็ต</h6>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    )
-}
-export default Allowance
-
diff --git a/pages/main/chart.js b/pages/main/chart.js
deleted file mode 100644
index 85c7c66d..00000000
--- a/pages/main/chart.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import dynamic from 'next/dynamic'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
-
-const Barchart = dynamic(
-    () => import('../../components/chart/barChart'),
-    { ssr: false }
-)
-
-const Piechart = dynamic(
-    () => import('../../components/chart/pieChart'),
-    { ssr: false }
-)
-
-const Piechart2 = dynamic(
-    () => import('../../components/chart/pieChart2'),
-    { ssr: false }
-)
-
-const Chart = () => {
-
-    const [status, setStatus] = useState(true)
-
-    const onConfirm = (order) => {
-        setStatus(order)
-    }
-
-    return (
-        <div className="warp-main">
-            <Navbar_main confirm={onConfirm} status={status} />
-            <Sidebar status={status} />
-            <div className={`wrapper${status ? " menuDisplayed" : ""}`}>
-                <div className="page-content-wrapper">
-                    <div className="container-fluid">
-                        <h1 className="text-center">ข้อมูลทางสถิติ</h1>
-                        <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                        <div className="warp-chart">
-                            <div className="chart-contents">
-                                <Piechart />
-                            </div>
-                            <div className="chart-contents">
-                                <Piechart2 />
-                            </div>
-                        </div>
-
-                        <div className="warp-chart">
-                            <div className="chart-contents">
-                                <Barchart />
-                            </div>
-                        </div>
-                        <Footer nameFooter="chart" />
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    )
-}
-export default Chart
diff --git a/pages/main/doc.js b/pages/main/doc.js
deleted file mode 100644
index c39ac3bc..00000000
--- a/pages/main/doc.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import dynamic from 'next/dynamic'
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
-
-const PieDoc = dynamic(
-    () => import('../../components/chart/pieDoc'),
-    { ssr: false }
-)
-
-class Doc extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            status: true
-        }
-    }
-
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
-    }
-
-    render() {
-
-        return (
-
-            <div className="warp-main">
-                <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                <Sidebar status={this.state.status} />
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">สวัสดิการจากรัฐ</h1>
-                            <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                            <br />
-                            <div className="warp-chart">
-                                <PieDoc />
-                            </div>
-                            <Footer nameFooter="doc" />
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        )
-    }
-}
-export default Doc
-
diff --git a/pages/main/economy.js b/pages/main/economy.js
index 4b93a505..d273e0ed 100644
--- a/pages/main/economy.js
+++ b/pages/main/economy.js
@@ -1,112 +1,118 @@
-import React from 'react'
-import Sheetapi from '../../config/api'
-import dynamic from 'next/dynamic'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
-
-const PieEconomy = dynamic(
-    () => import('../../components/chart/pieEconomy'),
-    { ssr: false }
-)
-
-const PieEconomy2 = dynamic(
-    () => import('../../components/chart/pieEconomy2'),
-    { ssr: false }
-)
-
-const PieEconomy3 = dynamic(
-    () => import('../../components/chart/pieEconomy3'),
-    { ssr: false }
-)
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import _ from 'lodash';
+import Dashboard from '../../components/layout/dashboard';
+import { useMediaQuery } from 'react-responsive';
+import Empty from '../../components/Empty';
 
 const BarEconomy = dynamic(
     () => import('../../components/chart/barEconomy'),
     { ssr: false }
 )
 
-const BarEconomy2 = dynamic(
+const BarEconomy3 = dynamic(
     () => import('../../components/chart/barEconomy2'),
     { ssr: false }
 )
 
-const BarEconomy3 = dynamic(
+const BarEconomy2 = dynamic(
     () => import('../../components/chart/barEconomy3'),
     { ssr: false }
 )
 
+const PieEconomy = dynamic(
+    () => import('../../components/chart/pieEconomy2'),
+    { ssr: false }
+)
 
-class Economy extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            status: true
-        }
-    }
+const PieEconomy2 = dynamic(
+    () => import('../../components/chart/pieEconomy3'),
+    { ssr: false }
+)
 
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
-    }
+const Economy = () => {
 
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
+    const [tokenError, setTokenError] = useState(false)
 
+    const statusToken = (token) => {
+        setTokenError(token)
     }
 
-    render() {
+    return (
+
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <Dashboard>
+                            <div className="warp-main">
+                                {
+                                    !tokenError ?
+                                        <React.Fragment>
+                                            <div className="page-content-main">
+                                                <div className="container-fluid-main">
+                                                    <h1 className="text-center">ข้อมูลด้านเศรษฐกิจ</h1>
+                                                    <h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
+                                                    {
+                                                        isLaptop || isTablet ?
+                                                            <div className="info-main">
+                                                                <div className="warp-chart-main ">
+                                                                    <div className="chart-row">
+                                                                        <PieEconomy onToken={statusToken} />
+                                                                        <BarEconomy />
+                                                                    </div>
+                                                                    <div className="chart-row">
+                                                                        <PieEconomy2 />
+                                                                        <BarEconomy2 />
+                                                                    </div>
+
+                                                                    <div className="chart-row">
+                                                                        <BarEconomy3 />
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            isMobile ?
+                                                                <div className="info-main">
+                                                                    <div className="warp-chart-main ">
+                                                                        <div className="chart-col">
+                                                                            <PieEconomy onToken={statusToken} />
+                                                                            <BarEconomy />
+                                                                            <PieEconomy2 />
+                                                                            <BarEconomy2 />
+                                                                            <BarEconomy3 />
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                null
+                                                    }
+                                                </div>
+                                            </div>
+                                        </React.Fragment>
+                                        :
+                                        <Empty />
+                                }
+                            </div>
+                        </Dashboard>
 
-        return (
-            <div className="warp-main">
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                    <Sidebar status={this.state.status} />
+                    </React.Fragment>
+            }
 
+        </React.Fragment>
 
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">ด้านเศรษฐกิจ</h1>
-                            <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
 
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <PieEconomy />
-                                </div>
-                                <div className="chart-contents">
-                                    <PieEconomy2 />
-                                </div>
 
-                            </div>
-
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <BarEconomy />
-                                </div>
-                                <div className="chart-contents">
-                                    <BarEconomy2 />
-                                </div>
-                            </div>
-
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <BarEconomy3 />
-                                </div>
-                                <div className="chart-contents">
-                                    <PieEconomy3 />
-                                </div>
-                            </div>
-                            <Footer nameFooter="economy" />
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        )
-    }
+    )
 }
 export default Economy;
diff --git a/pages/main/help.js b/pages/main/help.js
deleted file mode 100644
index 101efbc2..00000000
--- a/pages/main/help.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Sheetapi from '../../config/api'
-import dynamic from 'next/dynamic'
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
-
-const Linechart = dynamic(
-    () => import('../../components/chart/lineHelp'),
-    { ssr: false }
-)
-
-const Piechart = dynamic(
-    () => import('../../components/chart/pieHelp'),
-    { ssr: false }
-)
-
-class Help extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            status: true
-        }
-    }
-
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-
-    }
-
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
-    }
-
-
-    render() {
-
-        return (
-
-            <div className="warp-main">
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                    <Sidebar status={this.state.status} />
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">การช่วยเหลือของหน่วยงานภาครัฐ</h1>
-                            <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <Piechart />
-                                </div>
-                                <div className="chart-contents">
-                                    <Linechart />
-                                </div>
-                            </div>
-                            <Footer nameFooter="help" />
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        )
-    }
-}
-export default Help
-
diff --git a/pages/main/hospital.js b/pages/main/hospital.js
index 33443771..e96e332b 100644
--- a/pages/main/hospital.js
+++ b/pages/main/hospital.js
@@ -1,105 +1,152 @@
-import React from 'react'
-import Sheetapi from '../../config/api'
-import dynamic from 'next/dynamic'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import _ from 'lodash';
+import Dashboard from '../../components/layout/dashboard';
+import { useMediaQuery } from 'react-responsive';
+import Empty from '../../components/Empty';
 
-const PieHospital = dynamic(
-    () => import('../../components/chart/piehospital'),
+const BarHospital = dynamic(
+    () => import('../../components/chart/barHospital3'),
     { ssr: false }
 )
 
-const PieHospital2 = dynamic(
-    () => import('../../components/chart/pieHospital2'),
+const BarHospital2 = dynamic(
+    () => import('../../components/chart/barHospital4'),
     { ssr: false }
 )
 
-const Barchart = dynamic(
-    () => import('../../components/chart/barHospital'),
+const BarHospital3 = dynamic(
+    () => import('../../components/chart/barHospital2'),
     { ssr: false }
 )
 
-const BarHospital2 = dynamic(
-    () => import('../../components/chart/barHospital2'),
+const PieHospital = dynamic(
+    () => import('../../components/chart/piehospital'),
     { ssr: false }
 )
 
-const BarHospital3 = dynamic(
-    () => import('../../components/chart/barHospital3'),
+const PieHospital2 = dynamic(
+    () => import('../../components/chart/pieHospital2'),
     { ssr: false }
 )
 
-const BarHospital4 = dynamic(
-    () => import('../../components/chart/barHospital4'),
+const PieHospital3 = dynamic(
+    () => import('../../components/chart/barHospital'),
     { ssr: false }
 )
 
-class Hospital extends React.Component {
+const Hospital = () => {
 
-    constructor(props) {
-        super(props);
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
-        this.state = {
-            status: true
-        }
+    const [status, setStatus] = useState(false)
+    const [tokenError, setTokenError] = useState(false)
+
+    const statusMain = (order) => {
+        setStatus(order)
     }
 
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
+    const statusToken = (token) => {
+        setTokenError(token)
     }
 
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <Dashboard>
+                            <div className="warp-main">
+                                {
+                                    !tokenError ?
+                                        <React.Fragment>
+                                            {/* <Dashboard onStatusMain={statusMain} statusMain={status} /> */}
+                                            <div className="page-content-main">
+                                                <div className="container-fluid-main">
+                                                    <h1 className="text-center">ข้อมูลด้านสุขภาพ</h1>
+                                                    <h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
 
-    }
+                                                    {isLaptop ?
+                                                        <div className="info-main">
+                                                            <div className="warp-chart-main ">
+                                                                <div className="chart-row">
+                                                                    <PieHospital onToken={statusToken} />
+                                                                    <BarHospital />
+                                                                </div>
 
-    render() {
-
-        return (
-            <div className="warp-main">
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                    <Sidebar status={this.state.status} />
-
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">โรงพยาบาลเเละการดูแลรักษา</h1>
-                            <h4 className="text-center">ประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                            <h2 className="small text-center"></h2>
-                            <div className="warp-chart">
-                                <div className="chart-pic">
-                                    <PieHospital />
-                                </div>
-                                <div className="chart-pic">
-                                    <PieHospital2 />
-                                </div>
-                            </div>
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <BarHospital2 />
-                                </div>
-                                <div className="chart-contents">
-                                    <Barchart />
-                                </div>
-                            </div>
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <BarHospital3 />
-                                </div>
-                                <div className="chart-contents">
-                                    <BarHospital4 />
-                                </div>
+                                                                <div className="chart-row">
+                                                                    <PieHospital2 />
+                                                                    <BarHospital2 />
+                                                                </div>
+
+                                                                <div className="chart-row">
+                                                                    <PieHospital3 />
+                                                                    <BarHospital3 />
+                                                                </div>
+
+                                                            </div>
+
+                                                        </div>
+                                                        :
+                                                        isTablet ?
+                                                            <div className="info-main">
+                                                                <div className="warp-chart-main ">
+                                                                    <div className="chart-row">
+                                                                        <PieHospital onToken={statusToken} />
+                                                                        <BarHospital />
+                                                                    </div>
+
+                                                                    <div className="chart-row">
+                                                                        <PieHospital2 />
+                                                                        <BarHospital2 />
+                                                                    </div>
+
+                                                                    <div className="chart-row">
+                                                                        <PieHospital3 />
+                                                                        <BarHospital3 />
+                                                                    </div>
+
+                                                                </div>
+
+                                                            </div>
+                                                            :
+                                                            isMobile ?
+                                                                <div className="info-main">
+
+                                                                    <div className="warp-chart-main">
+                                                                        <div className="chart-col">
+                                                                            <PieHospital onToken={statusToken} />
+                                                                            <BarHospital />
+                                                                            <PieHospital2 />
+                                                                            <BarHospital2 />
+                                                                            <PieHospital3 />
+                                                                            <BarHospital3 />
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                null
+                                                    }
+                                                </div>
+                                            </div>
+                                        </React.Fragment>
+                                        :
+                                        <Empty />
+                                }
                             </div>
-                            <Footer nameFooter="hospital" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
+                        </Dashboard>
+
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
 }
 export default Hospital;
\ No newline at end of file
diff --git a/pages/main/mantable.js b/pages/main/mantable.js
deleted file mode 100644
index de4271ba..00000000
--- a/pages/main/mantable.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Nav_table from '../../components/nav_table';
-import Table from '../../components/layout/table'
-import Sheetapi from '../../config/api'
-
-
-class Mantable extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: []
-        }
-    }
-
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-        let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-        this.access_token = userOauth.data.access_token
-        await this.list('เพศชาย!A8:E')
-    }
-
-    list = async (value) => {
-
-        try {
-
-            this.list = await Sheetapi.getSheet(this.access_token, value)
-
-            for (let i = 0; i < this.list.length; i++) {
-                let value = await {
-                    ลำดับที่: this.list[i][0],
-                    คำนำหน้า: this.list[i][2],
-                    ชื่อ: this.list[i][3],
-                    นามสกุล: this.list[i][4],
-
-                }
-                this.setState(prevState => ({
-                    data: [...prevState.data, value]
-                }))
-            }
-        } catch (err) {
-            console.log(err);
-        }
-
-    }
-
-    render() {
-        const { data } = this.state
-
-
-        return (
-            <React.Fragment>
-                <Nav_table name="table" />
-                <Table
-                    data={data}
-                />
-            </React.Fragment>
-        )
-    }
-}
-export default Mantable
\ No newline at end of file
diff --git a/pages/main/people.js b/pages/main/people.js
new file mode 100644
index 00000000..14e605c3
--- /dev/null
+++ b/pages/main/people.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import Head from 'next/head';
+import _ from 'lodash';
+import { useMediaQuery } from 'react-responsive';
+import Map from '../../components/layout/Map';
+import Empty from '../../components/Empty';
+import Dashboard from '../../components/layout/dashboard';
+
+
+const BarMap = dynamic(
+    () => import('../../components/chart/barMap'),
+    { ssr: false }
+)
+
+const Barchart = dynamic(
+    () => import('../../components/chart/barChart'),
+    { ssr: false }
+)
+
+const Piechart = dynamic(
+    () => import('../../components/chart/pieChart'),
+    { ssr: false }
+)
+
+const Piechart2 = dynamic(
+    () => import('../../components/chart/pieChart2'),
+    { ssr: false }
+)
+
+const People = () => {
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
+
+        ;
+
+    const [status, setStatus] = useState(false)
+    const [userOauth, setUserOauth] = useState()
+    const [tokenError, setTokenError] = useState(false)
+
+    const statusToken = (token) => {
+        setTokenError(token)
+    }
+
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <Dashboard>
+                            <div className="warp-main">
+                                {
+                                    !tokenError ?
+                                        <React.Fragment>
+                                            <div className="page-content-main">
+                                                <div className="container-fluid-main">
+                                                    <h1 className="text-center">ข้อมูลด้านทั่วไป</h1>
+                                                    <h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
+                                                    {
+                                                        isLaptop ?
+
+                                                            <div className="info-main">
+                                                                <div className="warp-map">
+                                                                    <Map onToken={statusToken} />
+                                                                </div>
+                                                                <div className="warp-chart-main">
+                                                                    <div className="chart-row">
+                                                                        <Piechart onToken={statusToken} />
+                                                                        <Piechart2 />
+                                                                    </div>
+                                                                    <Barchart />
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            isTablet ?
+                                                                <div className="info-main">
+                                                                    <div className="warp-chart-main">
+                                                                        <BarMap onToken={statusToken} />
+                                                                        <div className="chart-row">
+                                                                            <Piechart />
+                                                                            <Piechart2 />
+                                                                        </div>
+                                                                        <Barchart />
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                isMobile ?
+                                                                    <div className="info-main">
+
+                                                                        <div className="warp-chart-main">
+                                                                            <BarMap onToken={statusToken} />
+                                                                            <div className="chart-col">
+                                                                                <Piechart onToken={statusToken} />
+                                                                                <Piechart2 />
+                                                                            </div>
+                                                                            <Barchart />
+                                                                        </div>
+                                                                    </div>
+                                                                    :
+                                                                    null
+                                                    }
+                                                </div>
+                                            </div>
+                                        </React.Fragment>
+                                        :
+                                        <Empty />
+                                }
+                            </div >
+                        </Dashboard>
+
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
+}
+export default People;
\ No newline at end of file
diff --git a/pages/main/service.js b/pages/main/service.js
index 4b040e96..13080c15 100644
--- a/pages/main/service.js
+++ b/pages/main/service.js
@@ -1,10 +1,25 @@
-import React from 'react'
-import Sheetapi from '../../config/api'
-import dynamic from 'next/dynamic'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import _ from 'lodash';
+import Dashboard from '../../components/layout/dashboard';
+import { useMediaQuery } from 'react-responsive';
+import Empty from '../../components/Empty';
+
+const PieHelp = dynamic(
+    () => import('../../components/chart/pieHelp'),
+    { ssr: false }
+)
+
+const LineHelp = dynamic(
+    () => import('../../components/chart/lineHelp'),
+    { ssr: false }
+)
+
+const PieDoc = dynamic(
+    () => import('../../components/chart/pieDoc'),
+    { ssr: false }
+)
 
 const PieService = dynamic(
     () => import('../../components/chart/pieService'),
@@ -16,56 +31,106 @@ const PieService2 = dynamic(
     { ssr: false }
 )
 
+const Service = () => {
 
-class Service extends React.Component {
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
-    constructor(props) {
-        super(props);
+    const [status, setStatus] = useState(false)
+    const [tokenError, setTokenError] = useState(false)
 
-        this.state = {
-            status: true
-        }
+    const statusMain = (order) => {
+        setStatus(order)
     }
-
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
+    const statusToken = (token) => {
+        setTokenError(token)
     }
 
+    return (
 
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <Dashboard>
+                            <div className="warp-main">
+                                {
+                                    !tokenError ?
+                                        <React.Fragment>
+                                            <div className="page-content-main">
+                                                <div className="container-fluid-main">
+                                                    <h1 className="text-center">หน่วยงานภาครัฐ</h1>
+                                                    <h2 className="small text-center">สวัสดิการ การเข้าร่วมกิจกรรม และการช่วยเหลือ</h2>
+                                                    {
+                                                        isLaptop ?
+                                                            <div className="info-main">
+                                                                <div className="warp-chart-main ">
+                                                                    <div className="chart-row">
+                                                                        <PieHelp onToken={statusToken} />
+                                                                        <LineHelp />
+                                                                    </div>
+                                                                    <div className="chart-row">
+                                                                        <PieDoc />
+                                                                        <PieService />
+                                                                        <PieService2 />
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            isTablet ?
+                                                                <div className="info-main">
+                                                                    <div className="warp-chart-main ">
+                                                                        <div className="chart-row">
+                                                                            <PieHelp onToken={statusToken} />
+                                                                            <LineHelp />
+                                                                        </div>
+                                                                        <div className="chart-col">
+                                                                            <PieDoc />
+                                                                        </div>
+                                                                        <div className="chart-row">
+                                                                            <PieService />
+                                                                            <PieService2 />
+                                                                        </div>
 
-    }
-
-    render() {
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                isMobile ?
+                                                                    <div className="info-main">
+                                                                        <div className="warp-chart-main ">
+                                                                            <div className="chart-col">
+                                                                                <PieHelp onToken={statusToken} />
+                                                                                <LineHelp />
+                                                                                <PieDoc />
+                                                                                <PieService />
+                                                                                <PieService2 />
+                                                                            </div>
+                                                                            <div className="chart-row">
 
-        return (
-            <div className="warp-main">
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                    <Sidebar status={this.state.status} />
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">หน่วยงานเเละการบริการ</h1>
-                            <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                            <h2 className="small text-center"></h2>
-                            <div className="warp-chart">
-                                <div className="chart-pic">
-                                    <PieService />
-                                </div>
-                                <div className="chart-pic">
-                                    <PieService2 />
-                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    :
+                                                                    null
+                                                    }
+                                                </div>
+                                            </div>
+                                        </React.Fragment>
+                                        :
+                                        <Empty />
+                                }
                             </div>
-                            <Footer nameFooter="service" />
-                        </div>
-                    </div>
-                </div>
+                        </Dashboard>
 
-            </div>
-        )
-    }
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
 }
 export default Service
diff --git a/pages/main/social.js b/pages/main/social.js
index 0e466f09..ae61c437 100644
--- a/pages/main/social.js
+++ b/pages/main/social.js
@@ -1,90 +1,125 @@
-import React from 'react'
-import Sheetapi from '../../config/api'
-import dynamic from 'next/dynamic'
-import Navbar_main from '../../components/nav_main';
-import Sidebar from '../../components/layout/sidebar';
-import Footer from '../../components/layout/footer';
-import _ from 'lodash'
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import _ from 'lodash';
+import Dashboard from '../../components/layout/dashboard';
+import { useMediaQuery } from 'react-responsive';
+import Empty from '../../components/Empty';
 
 const BarSocial = dynamic(
     () => import('../../components/chart/barSocial'),
     { ssr: false }
 )
 
-const DonutSocial = dynamic(
-    () => import('../../components/chart/donutSocial'),
+const PieSocial2 = dynamic(
+    () => import('../../components/chart/pieSocial'),
     { ssr: false }
 )
 
-
 const PieSocial = dynamic(
-    () => import('../../components/chart/pieSocial'),
+    () => import('../../components/chart/pieSocial2'),
     { ssr: false }
 )
 
-const PieSocial2 = dynamic(
-    () => import('../../components/chart/pieSocial2'),
+const DonutSocial = dynamic(
+    () => import('../../components/chart/donutSocial'),
     { ssr: false }
 )
 
-class Social extends React.Component {
 
-    constructor(props) {
-        super(props);
+const Social = () => {
 
-        this.state = {
-            status: true
-        }
-    }
-
-    onConfirm = (order) => {
-        this.setState({
-            status: order,
-        })
-    }
+    const isLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+    const isTablet = useMediaQuery({ minWidth: 768 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
+    const [tokenError, setTokenError] = useState(false)
 
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-
+    const statusToken = (token) => {
+        setTokenError(token)
     }
 
-    render() {
-
-        return (
-            <div className="warp-main">
-                <div className={`wrapper${this.state.status ? " menuDisplayed" : ""}`}>
-                    <Navbar_main confirm={this.onConfirm} status={this.state.status} />
-                    <Sidebar status={this.state.status} />
-
-
-                    <div className="page-content-wrapper">
-                        <div className="container-fluid">
-                            <h1 className="text-center">สภาพทางสังคม</h1>
-                            <h4 className="text-center">ของประชากรผู้สูงอายุภายในตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต</h4>
-                            <h2 className="small text-center"></h2>
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <BarSocial />
-                                </div>
-                                <div className="chart-contents">
-                                    <DonutSocial />
-                                </div>
-                            </div>
-                            <div className="warp-chart">
-                                <div className="chart-contents">
-                                    <PieSocial />
-                                </div>
-                                <div className="chart-contents">
-                                    <PieSocial2 />
-                                </div>
+    return (
+        <React.Fragment>
+            {
+                typeof document === 'undefined' ?
+                    null :
+                    <React.Fragment>
+                        <Head>
+                            <title>Eldery Dashboard</title>
+                            <link rel='icon' href='/static/logomain.svg' />
+                        </Head>
+                        <Dashboard>
+                            <div className="warp-main">
+                                {
+                                    !tokenError ?
+                                        <React.Fragment>
+                                            <div className="page-content-main">
+                                                <div className="container-fluid-main">
+                                                    <h1 className="text-center">ข้อมูลด้านสังคม</h1>
+                                                    <h2 className="small text-center">ของประชากรผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h2>
+
+                                                    {
+                                                        isLaptop ?
+                                                            <div className="info-main">
+                                                                <div className="warp-chart-main ">
+                                                                    <div className="chart-row">
+                                                                        <DonutSocial onToken={statusToken} />
+                                                                        <BarSocial />
+
+                                                                    </div>
+
+                                                                    <div className="chart-row">
+                                                                        <PieSocial />
+                                                                        <PieSocial2 />
+                                                                    </div>
+
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            isTablet ?
+                                                                <div className="info-main">
+                                                                    <div className="warp-chart-main ">
+                                                                        <div className="chart-row">
+                                                                            <DonutSocial onToken={statusToken} />
+                                                                            <BarSocial />
+
+                                                                        </div>
+
+                                                                        <div className="chart-row">
+                                                                            <PieSocial />
+                                                                            <PieSocial2 />
+                                                                        </div>
+
+                                                                    </div>
+                                                                </div>
+                                                                :
+                                                                isMobile ?
+                                                                    <div className="info-main">
+                                                                        <div className="warp-chart-main ">
+                                                                            <div className="chart-col">
+                                                                                <DonutSocial onToken={statusToken} />
+                                                                                <BarSocial />
+                                                                                <PieSocial />
+                                                                                <PieSocial2 />
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    :
+                                                                    null
+                                                    }
+                                                </div>
+                                            </div>
+                                        </React.Fragment>
+                                        :
+                                        <Empty />
+                                }
                             </div>
-                            <Footer nameFooter="social" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
+                        </Dashboard>
+
+                    </React.Fragment>
+            }
+        </React.Fragment>
+    )
 }
 export default Social;
diff --git a/pages/main/totaltable.js b/pages/main/totaltable.js
deleted file mode 100644
index 7df1b9fe..00000000
--- a/pages/main/totaltable.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import Nav_table from '../../components/nav_table';
-import Table from '../../components/layout/table'
-import Sheetapi from '../../config/api'
-
-class Totaltable extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: []
-        }
-    }
-
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-        let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-        this.access_token = userOauth.data.access_token
-        await this.list('ข้อมูลทั่วไป!A9:F')
-    }
-
-    list = async (value) => {
-
-        try {
-
-            this.list = await Sheetapi.getSheet(this.access_token, value)
-
-            for (let i = 0; i < this.list.length; i++) {
-                let value = await {
-                    ลำดับที่: this.list[i][0],
-                    คำนำหน้า: this.list[i][3],
-                    ชื่อ: this.list[i][4],
-                    นามสกุล: this.list[i][5],
-
-                }
-                this.setState(prevState => ({
-                    data: [...prevState.data, value]
-                }))
-            }
-        } catch (err) {
-            console.log(err);
-        }
-
-    }
-
-    render() {
-        return (
-            <div className="warp-main">
-                <Nav_table name="table" />
-                <Table
-                    data={this.state.data}
-                />
-            </div>
-        )
-    }
-}
-export default Totaltable
\ No newline at end of file
diff --git a/pages/main/womantable.js b/pages/main/womantable.js
deleted file mode 100644
index 9e677569..00000000
--- a/pages/main/womantable.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react'
-import Nav_table from '../../components/nav_table';
-import Table from '../../components/layout/table'
-import Sheetapi from '../../config/api'
-
-class Womantable extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: []
-        }
-    }
-
-    async componentDidMount() {
-        await localStorage.setItem("myOauth", JSON.stringify(await Sheetapi.postSheetValues()))
-        let userOauth = JSON.parse(localStorage.getItem("myOauth"))
-        this.access_token = userOauth.data.access_token
-        await this.list('เพศหญิง!A8:E')
-    }
-
-    list = async (value) => {
-
-        try {
-
-            this.list = await Sheetapi.getSheet(this.access_token, value)
-
-            for (let i = 0; i < this.list.length; i++) {
-                let value = await {
-                    ลำดับที่: this.list[i][0],
-                    คำนำหน้า: this.list[i][2],
-                    ชื่อ: this.list[i][3],
-                    นามสกุล: this.list[i][4],
-
-                }
-                this.setState(prevState => ({
-                    data: [...prevState.data, value]
-                }))
-            }
-        } catch (err) {
-            console.log(err);
-        }
-
-    }
-
-    render() {
-        return (
-            <div className="warp-main">
-                <Nav_table name="table" />
-
-                <Table
-                    data={this.state.data}
-                />
-
-
-            </div>
-        )
-    }
-}
-export default Womantable
\ No newline at end of file
diff --git a/static/Profile.svg b/static/Profile.svg
deleted file mode 100644
index 21b48d03..00000000
--- a/static/Profile.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40 3C19.5655 3 3 19.5655 3 40C3 50.8966 7.71036 60.693 15.206 67.4641C16.8713 60.4519 21.4936 54.5763 27.6046 51.141C25.012 48.2992 23.4347 44.5572 23.4347 40.4474C23.4347 31.5205 30.8766 24.3289 40.0003 24.3289C49.1239 24.3289 56.5659 31.5205 56.5659 40.4474C56.5659 44.5405 55.0014 48.2687 52.4276 51.1062C54.5089 52.2531 56.3328 53.7581 58.1038 55.352L58.1233 55.3696L58.1419 55.3882C61.4496 58.6959 63.8564 62.7633 64.838 67.4244C72.308 60.6547 77 50.8753 77 40C77 19.5655 60.4345 3 40 3ZM50.6951 50.2665C50.6856 50.2626 50.676 50.2586 50.6665 50.2546L50.6368 50.3259C47.9598 53.0368 44.1897 54.7289 40.0003 54.7289C31.8407 54.7289 25.2718 48.31 25.2718 40.4474C25.2718 32.5849 31.8407 26.166 40.0003 26.166C48.1599 26.166 54.7288 32.5849 54.7288 40.4474C54.7288 44.2437 53.1974 47.7034 50.6951 50.2665ZM50.9177 52.5703C52.9985 53.619 54.8412 55.1076 56.7462 56.8209C60.0628 60.1442 62.3536 64.2414 63.079 68.9217C56.7517 73.9774 48.7289 77 40 77C31.2783 77 23.2613 73.9823 16.9364 68.934C18.286 61.8417 22.9112 55.8785 29.113 52.596C32.028 55.0701 35.8393 56.566 40.0003 56.566C44.1757 56.566 47.9989 55.0598 50.9177 52.5703ZM1 40C1 18.4609 18.4609 1 40 1C61.5391 1 79 18.4609 79 40C79 61.5391 61.5391 79 40 79C18.4609 79 1 61.5391 1 40Z" fill="#414142"/>
-</svg>
diff --git a/static/about1.png b/static/about1.png
deleted file mode 100644
index a85bdfd3..00000000
Binary files a/static/about1.png and /dev/null differ
diff --git a/static/active.svg b/static/active.svg
deleted file mode 100644
index c8bababe..00000000
--- a/static/active.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m213.332031 512c-44.09375 0-80-35.882812-80-80 0-8.832031 7.167969-16 16-16s16 7.167969 16 16c0 26.476562 21.546875 48 48 48s48-21.523438 48-48c0-8.832031 7.167969-16 16-16s16 7.167969 16 16c0 44.117188-35.902343 80-80 80zm0 0"/><path d="m389.332031 448h-352c-20.585937 0-37.332031-16.746094-37.332031-37.332031 0-10.925781 4.757812-21.269531 13.054688-28.375.535156-.46875 1.109374-.894531 1.707031-1.28125 31.316406-27.328125 49.238281-66.644531 49.238281-108.160157v-59.519531c0-69.480469 47.082031-129.128906 114.496094-145.066406 8.617187-1.984375 17.238281 3.285156 19.265625 11.90625 2.023437 8.597656-3.308594 17.214844-11.882813 19.242187-52.929687 12.5-89.878906 59.347657-89.878906 113.917969v59.519531c0 51.542969-22.59375 100.3125-61.929688 133.78125-.320312.257813-.597656.492188-.941406.726563-.574218.726563-1.128906 1.835937-1.128906 3.308594 0 2.898437 2.433594 5.332031 5.332031 5.332031h352c2.902344 0 5.335938-2.433594 5.335938-5.332031 0-1.496094-.554688-2.582031-1.152344-3.308594-.320313-.234375-.621094-.46875-.917969-.726563-19.113281-16.296874-34.199218-35.964843-44.820312-58.472656-3.796875-7.980468-.386719-17.515625 7.613281-21.3125 8.066406-3.796875 17.515625-.339844 21.292969 7.636719 8.445312 17.835937 20.285156 33.496094 35.261718 46.59375.554688.382813 1.132813.789063 1.621094 1.214844 8.34375 7.105469 13.101563 17.449219 13.101563 28.375 0 20.585937-16.746094 37.332031-37.335938 37.332031zm0 0"/><path d="m373.332031 277.332031c-76.457031 0-138.664062-62.207031-138.664062-138.664062 0-76.460938 62.207031-138.667969 138.664062-138.667969 76.460938 0 138.667969 62.207031 138.667969 138.667969 0 76.457031-62.207031 138.664062-138.667969 138.664062zm0-245.332031c-58.816406 0-106.664062 47.851562-106.664062 106.667969 0 58.816406 47.847656 106.664062 106.664062 106.664062 58.816407 0 106.667969-47.847656 106.667969-106.664062 0-58.816407-47.851562-106.667969-106.667969-106.667969zm0 0"/><path d="m378.667969 202.667969c-8.832031 0-16-7.167969-16-16v-69.335938h-10.667969c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h26.667969c8.832031 0 16 7.167969 16 16v85.335938c0 8.832031-7.167969 16-16 16zm0 0"/></svg>
\ No newline at end of file
diff --git a/static/activehover.svg b/static/activehover.svg
deleted file mode 100644
index 6c5a0025..00000000
--- a/static/activehover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m373.332031 0c-76.457031 0-138.664062 62.207031-138.664062 138.667969 0 76.457031 62.207031 138.664062 138.664062 138.664062 76.460938 0 138.667969-62.207031 138.667969-138.664062 0-76.460938-62.207031-138.667969-138.667969-138.667969zm21.335938 186.667969c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-69.335938h-10.667969c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h26.667969c8.832031 0 16 7.167969 16 16zm0 0" fill="#f44336"/><path d="m298.667969 426.667969c0 47.128906-38.207031 85.332031-85.335938 85.332031-47.128906 0-85.332031-38.203125-85.332031-85.332031 0-47.128907 38.203125-85.335938 85.332031-85.335938 47.128907 0 85.335938 38.207031 85.335938 85.335938zm0 0" fill="#ffa000"/><path d="m380.160156 319.660156c-2.28125.082032-4.523437.339844-6.828125.339844-99.988281 0-181.332031-81.34375-181.332031-181.332031 0-35.136719 10.21875-67.863281 27.585938-95.679688-2.09375-.085937-4.140626-.320312-6.253907-.320312-82.34375 0-149.332031 66.984375-149.332031 149.332031v59.476562c0 42.21875-18.496094 82.070313-50.945312 109.503907-8.296876 7.082031-13.054688 17.429687-13.054688 28.351562 0 20.589844 16.746094 37.335938 37.332031 37.335938h352c20.589844 0 37.335938-16.746094 37.335938-37.335938 0-10.921875-4.757813-21.269531-13.269531-28.542969-13.761719-11.648437-24.855469-25.683593-33.238282-41.128906zm0 0" fill="#ffc107"/></svg>
\ No newline at end of file
diff --git a/static/agency.jpg b/static/agency.jpg
new file mode 100644
index 00000000..4bcc71b3
Binary files /dev/null and b/static/agency.jpg differ
diff --git a/static/allowance.png b/static/allowance.png
deleted file mode 100644
index 13c4dc21..00000000
Binary files a/static/allowance.png and /dev/null differ
diff --git a/static/arrow.svg b/static/arrow.svg
new file mode 100644
index 00000000..15decdab
--- /dev/null
+++ b/static/arrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px"><g><g>
+	<g>
+		<path d="M508.875,248.458l-160-160c-4.167-4.167-10.917-4.167-15.083,0c-4.167,4.167-4.167,10.917,0,15.083l141.792,141.792    H10.667C4.771,245.333,0,250.104,0,256s4.771,10.667,10.667,10.667h464.917L333.792,408.458c-4.167,4.167-4.167,10.917,0,15.083    c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125l160-160C513.042,259.375,513.042,252.625,508.875,248.458z    " data-original="#000000" class="active-path" data-old_color="#000000" fill="#00AF80"/>
+	</g>
+</g></g> </svg>
diff --git a/static/bg-test4.jpg b/static/bg-test4.jpg
deleted file mode 100644
index 32a87a4b..00000000
Binary files a/static/bg-test4.jpg and /dev/null differ
diff --git a/static/bg.jpg b/static/bg.jpg
deleted file mode 100644
index ed6fc9cd..00000000
Binary files a/static/bg.jpg and /dev/null differ
diff --git a/static/box1.jpg b/static/box1.jpg
new file mode 100644
index 00000000..085d6d66
Binary files /dev/null and b/static/box1.jpg differ
diff --git a/static/box2.jpg b/static/box2.jpg
new file mode 100644
index 00000000..597bc8d2
Binary files /dev/null and b/static/box2.jpg differ
diff --git a/static/box3.jpg b/static/box3.jpg
new file mode 100644
index 00000000..a9f2d858
Binary files /dev/null and b/static/box3.jpg differ
diff --git a/static/box4.jpg b/static/box4.jpg
new file mode 100644
index 00000000..cf84777a
Binary files /dev/null and b/static/box4.jpg differ
diff --git a/static/chart.svg b/static/chart.svg
deleted file mode 100644
index be8f3b6a..00000000
--- a/static/chart.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 486.742 486.742" style="enable-background:new 0 0 486.742 486.742;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M33,362.371v78.9c0,4.8,3.9,8.8,8.8,8.8h61c4.8,0,8.8-3.9,8.8-8.8v-138.8l-44.3,44.3
-			C57.9,356.071,45.9,361.471,33,362.371z"/>
-		<path d="M142,301.471v139.8c0,4.8,3.9,8.8,8.8,8.8h61c4.8,0,8.8-3.9,8.8-8.8v-82.3c-13.9-0.3-26.9-5.8-36.7-15.6L142,301.471z"/>
-		<path d="M251,350.271v91c0,4.8,3.9,8.8,8.8,8.8h61c4.8,0,8.8-3.9,8.8-8.8v-167.9l-69.9,69.9
-			C257,345.971,254.1,348.271,251,350.271z"/>
-		<path d="M432.7,170.171l-72.7,72.7v198.4c0,4.8,3.9,8.8,8.8,8.8h61c4.8,0,8.8-3.9,8.8-8.8v-265.6c-2-1.7-3.5-3.2-4.6-4.2
-			L432.7,170.171z"/>
-		<path d="M482.6,41.371c-2.9-3.1-7.3-4.7-12.9-4.7c-0.5,0-1.1,0-1.6,0c-28.4,1.3-56.7,2.7-85.1,4c-3.8,0.2-9,0.4-13.1,4.5
-			c-1.3,1.3-2.3,2.8-3.1,4.6c-4.2,9.1,1.7,15,4.5,17.8l7.1,7.2c4.9,5,9.9,10,14.9,14.9l-171.6,171.7l-77.1-77.1
-			c-4.6-4.6-10.8-7.2-17.4-7.2c-6.6,0-12.7,2.6-17.3,7.2L7.2,286.871c-9.6,9.6-9.6,25.1,0,34.7l4.6,4.6c4.6,4.6,10.8,7.2,17.4,7.2
-			s12.7-2.6,17.3-7.2l80.7-80.7l77.1,77.1c4.6,4.6,10.8,7.2,17.4,7.2c6.6,0,12.7-2.6,17.4-7.2l193.6-193.6l21.9,21.8
-			c2.6,2.6,6.2,6.2,11.7,6.2c2.3,0,4.6-0.6,7-1.9c1.6-0.9,3-1.9,4.2-3.1c4.3-4.3,5.1-9.8,5.3-14.1c0.8-18.4,1.7-36.8,2.6-55.3
-			l1.3-27.7C487,49.071,485.7,44.571,482.6,41.371z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/contact1.jpg b/static/contact1.jpg
deleted file mode 100644
index 0a25e173..00000000
Binary files a/static/contact1.jpg and /dev/null differ
diff --git a/static/contact2.jpg b/static/contact2.jpg
deleted file mode 100644
index d4207c04..00000000
Binary files a/static/contact2.jpg and /dev/null differ
diff --git a/static/contact3.jpg b/static/contact3.jpg
deleted file mode 100644
index c71f9e47..00000000
Binary files a/static/contact3.jpg and /dev/null differ
diff --git a/static/contact4.jpg b/static/contact4.jpg
deleted file mode 100644
index e1634720..00000000
Binary files a/static/contact4.jpg and /dev/null differ
diff --git a/static/contact5.jpg b/static/contact5.jpg
deleted file mode 100644
index da80d44e..00000000
Binary files a/static/contact5.jpg and /dev/null differ
diff --git a/static/couple.svg b/static/couple.svg
deleted file mode 100644
index e94bd6f2..00000000
--- a/static/couple.svg
+++ /dev/null
@@ -1,194 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
-<path style="fill:#0096DC;" d="M246.859,267.026l-44.109-11.027H78.5l-44.11,11.027c-15.803,3.951-26.89,18.15-26.89,34.44v176.408
-	h266.25V301.467C273.75,285.176,262.663,270.977,246.859,267.026z"/>
-<path style="fill:#B48764;" d="M246.859,267.026l-27.931-6.982c-5.428,13.258-26.161,57.387-73.184,90.131
-	c-3.034,2.112-7.204,2.112-10.238,0c-47.023-32.745-67.756-76.873-73.184-90.131l-27.932,6.983
-	c-15.803,3.951-26.89,18.15-26.89,34.44v176.408h266.25V301.467C273.75,285.176,262.663,270.976,246.859,267.026z"/>
-<rect x="96.25" y="211.621" style="fill:#D29B6E;" width="88.75" height="53.25"/>
-<path style="fill:#F0C087;" d="M220.5,122.874V96.249c0-34.311-27.815-62.125-62.125-62.125h-35.5
-	c-34.31,0-62.125,27.814-62.125,62.125v26.625c-9.803,0-17.75,7.947-17.75,17.75s7.947,17.75,17.75,17.75
-	c0,44.114,35.761,79.875,79.875,79.875s79.875-35.761,79.875-79.875c9.803,0,17.75-7.947,17.75-17.75S230.303,122.874,220.5,122.874
-	z"/>
-<path style="fill:#E6AF78;" d="M105.125,158.374V96.249c0-32.813,25.457-59.617,57.688-61.901c-1.472-0.105-2.939-0.224-4.438-0.224
-	h-35.5c-34.31,0-62.125,27.814-62.125,62.125v26.625c-9.803,0-17.75,7.947-17.75,17.75s7.947,17.75,17.75,17.75
-	c0,44.114,35.761,79.875,79.875,79.875c7.708,0,15.136-1.151,22.188-3.188C129.506,225.438,105.125,194.78,105.125,158.374z"/>
-<g>
-	<path style="fill:#D5DCED;" d="M78.5,71.843c0-9.803-7.947-17.75-17.75-17.75S43,62.039,43,71.843c0,3.616,1.094,6.971,2.951,9.776
-		c-9.358,2.605-16.264,11.098-16.264,21.286c0,12.254,9.933,22.188,22.188,22.188s22.188-9.934,22.188-22.188
-		c0-5.794-2.273-11.024-5.91-14.975C74.247,85.118,78.5,78.994,78.5,71.843z"/>
-	<path style="fill:#D5DCED;" d="M202.75,71.843c0-9.803,7.947-17.75,17.75-17.75s17.75,7.947,17.75,17.75
-		c0,3.616-1.094,6.971-2.951,9.776c9.358,2.605,16.264,11.098,16.264,21.286c0,12.254-9.933,22.188-22.188,22.188
-		s-22.188-9.934-22.188-22.188c0-5.794,2.273-11.024,5.91-14.975C207.003,85.118,202.75,78.994,202.75,71.843z"/>
-</g>
-<g>
-	<path style="fill:#0096DC;" d="M47.753,314.002l-33.388-33.388C10.057,286.529,7.5,293.74,7.5,301.466v176.409h53.25V345.38
-		C60.75,333.611,56.075,322.324,47.753,314.002z"/>
-	<path style="fill:#0096DC;" d="M233.497,314.002l33.388-33.388c4.308,5.915,6.865,13.126,6.865,20.852v176.409H220.5V345.38
-		C220.5,333.611,225.175,322.324,233.497,314.002z"/>
-</g>
-<g>
-	<path style="fill:#00AAF0;" d="M87.375,238.249l53.25,26.625l-19.751,26.335c-3.481,4.641-10.406,4.749-14.03,0.219L78.5,255.999
-		L87.375,238.249z"/>
-	<path style="fill:#00AAF0;" d="M193.875,238.249l-53.25,26.625l19.751,26.335c3.481,4.641,10.406,4.749,14.03,0.219l28.343-35.429
-		L193.875,238.249z"/>
-</g>
-<g>
-	<path style="fill:#C7CFE2;" d="M442.375,247.124c14.705,0,26.625,11.92,26.625,26.625c0,0.542-0.127,1.048-0.159,1.581
-		c10.399,3.623,17.909,13.409,17.909,25.044c0,14.705-11.92,26.625-26.625,26.625H415.75v-53.25
-		C415.75,259.044,427.67,247.124,442.375,247.124z"/>
-	<path style="fill:#C7CFE2;" d="M318.125,247.124c-14.705,0-26.625,11.92-26.625,26.625c0,0.542,0.127,1.048,0.159,1.581
-		c-10.399,3.623-17.909,13.409-17.909,25.044c0,14.705,11.92,26.625,26.625,26.625h44.375v-53.25
-		C344.75,259.044,332.83,247.124,318.125,247.124z"/>
-</g>
-<path style="fill:#966D50;" d="M476.605,324.716l-49.698-19.879c-5.054-2.022-8.802-6.199-10.362-11.223l-0.795-19.865h-71
-	l-0.796,19.865c-1.558,5.024-5.308,9.201-10.362,11.223l-49.698,19.879C267.047,331.455,256,347.772,256,365.917v111.961
-	l248.5-0.004V365.917C504.5,347.772,493.453,331.455,476.605,324.716z"/>
-<path style="fill:#FFDC64;" d="M476.605,324.713l-38.835-15.534c-13.839,16.312-34.456,26.692-57.521,26.692
-	c-23.066,0-43.682-10.38-57.52-26.692l-38.835,15.534C267.047,331.451,256,347.769,256,365.914v111.96l248.5-0.003V365.914
-	C504.5,347.769,493.453,331.452,476.605,324.713z"/>
-<circle style="fill:#D5DCED;" cx="380.25" cy="167.251" r="97.62"/>
-<path style="fill:#C7CFE2;" d="M344.75,167.249c0-43.044,27.893-79.506,66.563-92.492c-9.768-3.28-20.19-5.133-31.063-5.133
-	c-53.917,0-97.625,43.708-97.625,97.625s43.708,97.625,97.625,97.625c10.873,0,21.295-1.853,31.063-5.133
-	C372.643,246.755,344.75,210.293,344.75,167.249z"/>
-<path style="fill:#C39772;" d="M380.25,300.374L380.25,300.374c-44.114,0-79.875-35.761-79.875-79.875v-18.666
-	c0-9.454,5.074-18.123,13.208-22.941c11.866-7.03,21.006-16.652,26.234-22.943c2.811-3.382,7.707-4.193,11.351-1.731
-	c44.471,30.046,108.957,23.574,108.957,57.407v8.875C460.125,264.613,424.364,300.374,380.25,300.374z"/>
-<path style="fill:#B48764;" d="M344.75,220.499v-67.458c-1.865,0.394-3.631,1.341-4.933,2.908
-	c-5.228,6.291-14.368,15.913-26.234,22.943c-8.134,4.819-13.208,13.487-13.208,22.941v15.806c0,36.682,23.613,70.192,58.99,79.892
-	c15.252,4.182,29.828,3.482,43.073-0.345C369.13,287.563,344.75,256.905,344.75,220.499z"/>
-<g>
-	<path style="fill:#FFFFFF;" d="M415.75,198.311c-7.345,0-13.313,5.967-13.313,13.313s5.967,13.313,13.313,13.313
-		s13.313-5.967,13.313-13.313S423.095,198.311,415.75,198.311z"/>
-	<path style="fill:#FFFFFF;" d="M344.75,198.311c-7.345,0-13.313,5.967-13.313,13.313s5.967,13.313,13.313,13.313
-		s13.313-5.967,13.313-13.313S352.095,198.311,344.75,198.311z"/>
-</g>
-<g>
-	<path style="fill:#FFC850;" d="M300.375,380.249l-37.646-37.646c-4.255,6.871-6.729,14.868-6.729,23.311v111.96l44.375-0.001
-		V380.249z"/>
-	<path style="fill:#FFC850;" d="M460.125,380.249l37.646-37.646c4.255,6.871,6.729,14.868,6.729,23.311v111.96l-44.375-0.001
-		V380.249z"/>
-	<path style="fill:#FFC850;" d="M380.25,371.374c38.467,0,72.445-18.899,93.407-47.841l-35.887-14.355
-		c-13.839,16.312-34.456,26.692-57.521,26.692s-43.682-10.38-57.521-26.692l-35.887,14.355
-		C307.805,352.475,341.783,371.374,380.25,371.374z"/>
-</g>
-<path d="M250.681,274.825c0.726,0.22,1.458,0.325,2.179,0.325c3.217,0,6.192-2.087,7.174-5.326c1.202-3.964-1.037-8.151-5.001-9.354
-	l-49.108-14.892l-5.342-10.684c-1.665-3.331-5.472-4.872-8.916-3.805v-1.859c20.336-14.691,34.137-37.895,36.094-64.352
-	c9.53-2.663,17.029-10.412,18.599-20.072c0.991-6.093-0.303-12.092-3.265-17.078c9.48-4.963,15.968-14.893,15.968-26.314
-	c0-10.358-5.489-19.796-14.024-25.113c0.471-1.936,0.712-3.931,0.712-5.949c0-13.923-11.327-25.25-25.25-25.25
-	c-3.34,0-6.528,0.658-9.448,1.841c-14.453-13.13-32.959-20.32-52.677-20.32h-35.5c-19.631,0-38.214,7.202-52.679,20.319
-	c-2.92-1.183-6.107-1.84-9.446-1.84c-13.923,0-25.25,11.327-25.25,25.25c0,2.019,0.241,4.014,0.712,5.949
-	c-8.536,5.317-14.024,14.755-14.024,25.113c0,11.415,6.48,21.339,15.95,26.305c-2.955,4.969-4.242,10.966-3.247,17.087
-	c1.57,9.66,9.069,17.409,18.599,20.072c1.953,26.421,15.72,49.596,36.01,64.29v1.893c-3.422-1.016-7.181,0.529-8.833,3.832
-	l-5.338,10.675l-51.01,15.303C9.773,265.236,0,278.372,0,293.559v184.315c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5V293.559
-	c0-0.55,0.025-1.094,0.07-1.634l29.979,29.979c5.289,5.289,8.201,12.32,8.201,19.799v136.17c0,4.142,3.358,7.5,7.5,7.5
-	s7.5-3.358,7.5-7.5v-136.17c0-11.486-4.473-22.284-12.595-30.406l-33.028-33.028c1.768-1.32,3.781-2.363,6.003-3.029l33.791-10.137
-	c2.646,7.437,22.296,58.513,74.044,93.011c1.26,0.84,2.71,1.26,4.16,1.26s2.9-0.42,4.16-1.26
-	c53.481-35.654,72.559-88.359,74.129-92.922L250.681,274.825z M190.521,248.312l3.375,6.75l-25.345,31.682
-	c-0.348,0.435-0.766,0.524-1.096,0.516c-0.307-0.005-0.744-0.104-1.078-0.55l-14.359-19.146L190.521,248.312z M230.75,70.353
-	c0,2.002-0.59,3.951-1.705,5.636c-1.325,2.001-1.612,4.515-0.772,6.763s2.704,3.958,5.015,4.602
-	c6.344,1.766,10.775,7.548,10.775,14.061c0,8.099-6.589,14.688-14.688,14.688s-14.688-6.589-14.688-14.688
-	c0-3.629,1.395-7.144,3.928-9.896c1.624-1.764,2.306-4.198,1.836-6.549s-2.036-4.336-4.212-5.34
-	c-3.638-1.679-5.989-5.32-5.989-9.277c0-5.652,4.598-10.25,10.25-10.25S230.75,64.701,230.75,70.353z M47.962,87.355
-	c2.312-0.644,4.176-2.354,5.015-4.602s0.552-4.762-0.772-6.763c-1.115-1.685-1.705-3.634-1.705-5.636
-	c0-5.652,4.598-10.25,10.25-10.25S71,64.701,71,70.353c0,3.957-2.351,7.599-5.989,9.277c-2.177,1.004-3.743,2.989-4.212,5.34
-	c-0.47,2.351,0.212,4.785,1.836,6.549c2.533,2.752,3.928,6.267,3.928,9.896c0,8.099-6.589,14.688-14.688,14.688
-	s-14.688-6.589-14.688-14.688C37.188,94.903,41.618,89.121,47.962,87.355z M68.25,158.374c0-4.142-3.358-7.5-7.5-7.5
-	c-5.516,0-10.269-3.643-11.054-8.474c-0.895-5.504,2.473-10.567,7.833-11.775c0.29-0.065,0.569-0.151,0.843-0.247
-	c13.254-2.972,23.19-14.825,23.19-28.962c0-4.587-1.076-9.066-3.104-13.125C83.19,83.622,86,77.182,86,70.353
-	c0-5.063-1.504-9.78-4.08-13.737c11.447-9.69,25.814-14.992,40.955-14.992h35.5c15.208,0,29.532,5.276,40.967,14.974
-	c-2.584,3.961-4.092,8.684-4.092,13.755c0,6.829,2.81,13.269,7.542,17.938c-2.029,4.059-3.104,8.538-3.104,13.125
-	c0,14.422,10.34,26.47,23.995,29.134c0.23,0.094,0.466,0.179,0.709,0.251c4.289,1.281,8.126,5.676,7.163,11.6
-	c-0.785,4.831-5.538,8.474-11.054,8.474c-4.142,0-7.5,3.358-7.5,7.5c0,39.908-32.467,72.375-72.375,72.375
-	S68.25,198.282,68.25,158.374z M140.625,245.749c12.844,0,25.047-2.791,36.042-7.79v0.509l-36.042,18.021L104.5,238.427v-0.503
-	C115.516,242.946,127.749,245.749,140.625,245.749z M88.353,253.063l2.376-4.751l38.504,19.252l-14.359,19.146
-	c-0.334,0.446-0.771,0.545-1.078,0.55c-0.328,0.026-0.748-0.081-1.096-0.516l-25.145-31.431
-	C87.938,254.613,88.207,253.854,88.353,253.063z M140.625,342.77c-33.576-23.863-51.647-55.094-59.327-71.267l19.689,24.611
-	c3.133,3.916,7.778,6.146,12.779,6.146c0.088,0,0.176-0.001,0.264-0.002c5.101-0.08,9.782-2.467,12.843-6.548l6.251-8.335v30.75
-	c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-30.75l6.251,8.335c3.061,4.082,7.742,6.468,12.843,6.548
-	c0.088,0.001,0.176,0.002,0.264,0.002c5.001,0,9.646-2.23,12.779-6.146l19.749-24.687
-	C192.392,287.556,174.375,318.796,140.625,342.77z"/>
-<path d="M164.2,189.724c2.609-3.217,2.117-7.94-1.1-10.549c-3.217-2.61-7.94-2.117-10.549,1.1c-3.19,3.934-7.425,6.1-11.925,6.1
-	s-8.735-2.166-11.925-6.1c-2.608-3.217-7.332-3.709-10.549-1.1c-3.217,2.609-3.709,7.332-1.1,10.549
-	c6.005,7.404,14.598,11.65,23.575,11.65S158.194,197.127,164.2,189.724z"/>
-<path d="M105.125,133.124c-4.142,0-7.5,3.358-7.5,7.5v8.875c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-8.875
-	C112.625,136.482,109.267,133.124,105.125,133.124z"/>
-<path d="M176.125,156.999c4.142,0,7.5-3.358,7.5-7.5v-8.875c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v8.875
-	C168.625,153.641,171.983,156.999,176.125,156.999z"/>
-<path d="M252.428,295.071c-2.929-2.929-7.678-2.929-10.606,0l-16.227,16.227C217.473,319.42,213,330.218,213,341.704v136.17
-	c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-136.17c0-7.479,2.913-14.511,8.201-19.799l16.227-16.227
-	C255.357,302.749,255.357,298,252.428,295.071z"/>
-<path d="M380.25,263.499c8.977,0,17.569-4.247,23.575-11.65c2.609-3.217,2.117-7.94-1.1-10.549c-3.217-2.61-7.941-2.117-10.549,1.1
-	c-3.19,3.934-7.425,6.1-11.925,6.1s-8.735-2.166-11.925-6.1c-2.608-3.217-7.332-3.709-10.549-1.1s-3.709,7.332-1.1,10.549
-	C362.681,259.252,371.273,263.499,380.25,263.499z"/>
-<path d="M300.375,372.749c-4.142,0-7.5,3.358-7.5,7.5v97.625c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-97.625
-	C307.875,376.107,304.517,372.749,300.375,372.749z"/>
-<path d="M460.125,372.749c-4.142,0-7.5,3.358-7.5,7.5v97.625c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-97.625
-	C467.625,376.107,464.267,372.749,460.125,372.749z"/>
-<path d="M486.928,321.496c4.685-5.942,7.322-13.349,7.322-21.122c0-12.639-6.932-23.95-17.779-29.834
-	c0.02-0.41,0.029-0.819,0.029-1.228c0-9.749-4.72-18.673-12.425-24.165c0.51-1.73,0.984-3.472,1.384-5.236
-	c0.972-4.283,1.592-8.809,1.883-13.769c11.805-17.418,18.033-37.738,18.033-58.893c0-57.966-47.159-105.125-105.125-105.125
-	s-105.125,47.159-105.125,105.125c0,21.157,6.229,41.477,18.034,58.894c0.291,4.963,0.911,9.488,1.882,13.767
-	c0.4,1.763,0.874,3.505,1.384,5.236C288.72,250.638,284,259.562,284,269.312c0,0.409,0.01,0.818,0.029,1.228
-	c-10.848,5.884-17.779,17.196-17.779,29.834c0,7.773,2.638,15.18,7.322,21.122c-15.456,9.274-25.072,25.933-25.072,44.421v111.961
-	c0,4.142,3.358,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.5V365.917c0-15.166,9.099-28.605,23.18-34.238l1.435-0.574
-	c22.183,29.98,56.357,47.769,92.136,47.769c36.268,0,69.693-17.379,92.129-47.771l1.441,0.576
-	c14.082,5.633,23.18,19.072,23.18,34.238v111.957c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5V365.917
-	C512,347.429,502.384,330.77,486.928,321.496z M461.5,269.312c0,1.109-0.19,2.327-0.6,3.832c-1.055,3.879,1.136,7.9,4.968,9.116
-	c8.004,2.541,13.382,9.82,13.382,18.114c0,5.669-2.508,10.989-6.789,14.607l-42.769-17.108c-1.54-0.616-2.87-1.585-3.924-2.799
-	c3.255-1.984,6.39-4.18,9.372-6.59c9.635-7.788,17.475-17.552,23.034-28.48C460.28,262.574,461.5,265.834,461.5,269.312z
-	 M348.36,301.822c10.102,3.957,20.928,6.052,31.89,6.052s21.788-2.095,31.89-6.052c2.663,4.237,6.544,7.602,11.228,9.652
-	c-11.661,10.825-26.915,16.899-43.119,16.899c-16.187,0-31.449-6.079-43.114-16.901C341.819,309.422,345.698,306.057,348.36,301.822
-	z M290.125,167.249c0-49.695,40.43-90.125,90.125-90.125s90.125,40.43,90.125,90.125c0,12.641-2.597,24.93-7.593,36.272
-	c-10.806-23.253-34.824-29.769-58.189-36.091c-18.889-5.111-38.421-10.397-55.159-23.787c-1.769-1.415-4.084-1.956-6.294-1.469
-	c-2.212,0.486-4.086,1.945-5.099,3.971c-0.078,0.155-7.935,15.603-23.271,23.271c-3.705,1.852-5.207,6.357-3.354,10.062
-	c1.852,3.705,6.356,5.208,10.062,3.354c12.207-6.104,20.618-15.796,25.36-22.506c17.47,11.742,36.666,16.937,53.837,21.583
-	c5.636,1.525,10.823,2.971,15.564,4.478c-0.164-0.003-0.326-0.012-0.49-0.012c-9.14,0-17.161,4.881-21.593,12.174
-	c-4.146-2.134-8.905-3.299-13.906-3.299c-5.002,0-9.762,1.165-13.907,3.299c-4.433-7.292-12.454-12.174-21.593-12.174
-	c-13.923,0-25.25,11.327-25.25,25.25s11.327,25.25,25.25,25.25c12.976,0,23.693-9.84,25.091-22.45
-	c2.447-2.604,6.273-4.175,10.409-4.175c4.135,0,7.961,1.571,10.408,4.175c1.398,12.61,12.115,22.45,25.091,22.45
-	c13.923,0,25.25-11.327,25.25-25.25c0-7.294-3.112-13.872-8.074-18.485c10.726,5.845,17.323,14.005,19.768,28.417
-	c-0.126,0.503-0.206,1.025-0.226,1.564c-0.179,5.001-0.715,9.407-1.637,13.471c-3.57,15.733-12.492,30.019-25.121,40.228
-	c-12.995,10.504-28.714,16.056-45.46,16.056s-32.466-5.552-45.46-16.056c-12.629-10.208-21.55-24.495-25.121-40.228
-	c-0.92-4.056-1.456-8.458-1.636-13.458c-0.072-1.986-0.911-3.769-2.227-5.067C295.542,203.066,290.125,185.524,290.125,167.249z
-	 M426,211.624c0,5.652-4.598,10.25-10.25,10.25s-10.25-4.598-10.25-10.25s4.598-10.25,10.25-10.25S426,205.972,426,211.624z
-	 M344.75,221.874c-5.652,0-10.25-4.598-10.25-10.25s4.598-10.25,10.25-10.25s10.25,4.598,10.25,10.25
-	S350.402,221.874,344.75,221.874z M294.632,282.26c3.832-1.216,6.022-5.237,4.968-9.116c-0.41-1.505-0.6-2.723-0.6-3.832
-	c0-3.478,1.22-6.738,3.326-9.308c5.559,10.929,13.399,20.692,23.034,28.48c2.982,2.41,6.116,4.607,9.372,6.59
-	c-1.054,1.214-2.385,2.183-3.925,2.799l-42.768,17.107c-4.281-3.618-6.788-8.938-6.788-14.607
-	C281.25,292.08,286.628,284.801,294.632,282.26z M380.25,363.874c-30.23,0-58.166-13.965-77.672-38.554l19.46-7.783
-	c14.887,16.476,35.845,25.837,58.213,25.837c22.389,0,43.325-9.358,58.211-25.838l19.467,7.787
-	C438.414,349.904,410.431,363.874,380.25,363.874z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/cover-img.png b/static/cover-img.png
deleted file mode 100644
index 63f8580d..00000000
Binary files a/static/cover-img.png and /dev/null differ
diff --git a/static/cover-img2.png b/static/cover-img2.png
deleted file mode 100644
index dba76e77..00000000
Binary files a/static/cover-img2.png and /dev/null differ
diff --git a/static/cover-img3.png b/static/cover-img3.png
deleted file mode 100644
index 70e0d2f5..00000000
Binary files a/static/cover-img3.png and /dev/null differ
diff --git a/static/cover-img4.png b/static/cover-img4.png
deleted file mode 100644
index b3f7191a..00000000
Binary files a/static/cover-img4.png and /dev/null differ
diff --git a/static/cover-img5.png b/static/cover-img5.png
deleted file mode 100644
index cb5e975e..00000000
Binary files a/static/cover-img5.png and /dev/null differ
diff --git a/static/cover-img6.png b/static/cover-img6.png
deleted file mode 100644
index 785ee57d..00000000
Binary files a/static/cover-img6.png and /dev/null differ
diff --git a/static/cover-img7.png b/static/cover-img7.png
deleted file mode 100644
index f20072b9..00000000
Binary files a/static/cover-img7.png and /dev/null differ
diff --git a/static/cover-img8.png b/static/cover-img8.png
deleted file mode 100644
index 1a4618b5..00000000
Binary files a/static/cover-img8.png and /dev/null differ
diff --git a/static/dashboard.svg b/static/dashboard.svg
deleted file mode 100644
index c67867ae..00000000
--- a/static/dashboard.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
-<g>
-	<g>
-		<g>
-			<rect x="213.333" y="0" width="170.667" height="128"/>
-			<rect x="0" y="0" width="170.667" height="213.333"/>
-			<rect x="0" y="256" width="170.667" height="128"/>
-			<rect x="213.333" y="170.667" width="170.667" height="213.333"/>
-		</g>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/document.svg b/static/document.svg
deleted file mode 100644
index cc5cc0ec..00000000
--- a/static/document.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 299.998 299.998" style="enable-background:new 0 0 299.998 299.998;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M149.995,0.001C67.156,0.001,0,67.16,0,149.999s67.156,149.997,149.995,149.997s150.003-67.161,150.003-149.997
-			C299.997,67.157,232.834,0.001,149.995,0.001z M217.205,217.204c0,10.066-8.159,18.225-18.223,18.225h-97.967
-			c-10.068,0-18.225-8.159-18.225-18.225V82.79c0-10.066,8.159-18.225,18.225-18.225h76.892v36.45h39.298V217.204z M185.688,93.232
-			V64.563l31.517,28.669H185.688z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/economy.svg b/static/economy.svg
deleted file mode 100644
index b796681f..00000000
--- a/static/economy.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Capa_1" enable-background="new 0 0 510.12 510.12" height="512" viewBox="0 0 510.12 510.12" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m144.246 9.22c-46.3 14.43-86.71 45.06-112.89 86.63h78.35c6.701-29.31 17.694-61.743 34.54-86.63z"/><path d="m299.626 95.85h78.35c-26.19-41.57-66.59-72.2-112.89-86.63 16.85 24.892 27.842 57.333 34.54 86.63z"/><path d="m310.816 184.39c15.33-4.23 31.48-6.49 48.14-6.49 17.1 0 33.66 2.38 49.35 6.83.01 0 .01.01.01.01-.917-14.678-6.095-38.224-14.76-58.89h-88.23c2.9 18.72 4.76 38.37 5.49 58.54z"/><path d="m103.996 125.85h-88.23c-20.235 48.009-21.651 105.98 0 157.5h88.23c-7.825-50.522-7.835-106.917 0-157.5z"/><path d="m109.706 313.35h-78.35c26.19 41.58 66.59 72.22 112.9 86.64-16.794-24.773-27.825-57.224-34.55-86.64z"/><path d="m268.796 95.85c-3.66-14.69-8.1-28.38-13.26-40.76-14.37-34.48-33.38-55.08-50.86-55.09h-.02c-17.48.01-36.49 20.61-50.87 55.09-5.16 12.38-9.59 26.07-13.26 40.76z"/><path d="m281.106 195.5c-.41-24.25-2.5-47.73-6.13-69.65h-140.62c-8.304 50.047-8.319 107.363 0 157.5h60.06c17.74-38.42 48.55-69.62 86.69-87.85z"/><path d="m140.526 313.35c7.018 28.091 20.436 65.976 41.72 85.41-6.299-27.996-5.852-57.524 1.43-85.41z"/><path d="m358.956 207.9c-83.345 0-151.11 67.798-151.11 151.11 0 83.105 67.568 151.11 151.11 151.11 83.32 0 151.11-67.79 151.11-151.11 0-83.256-67.739-151.11-151.11-151.11zm15 234.38v14.81c0 8.28-6.72 15-15 15s-15-6.72-15-15v-14.81c-6.945 0-21.626 1.09-38.33-10.49-6.787-4.712-8.512-14.057-3.77-20.88 4.4-6.349 13.31-8.803 21.04-3.65 4.477 3.043 9.756 4.964 15.09 5.02h39.98c10.571 0 19.13-8.541 19.13-19.13 0-10.55-8.58-19.14-19.13-19.14-19.999 0-19.257 0-38.02 0-26.962 0-49.13-21.925-49.13-49.14 0-24.779 18.355-49.13 53.14-49.13v-14.81c0-8.28 6.72-15 15-15s15 6.72 15 15v14.81c26.664 0 42.921 15.133 46.34 21.39 3.23 5.86 2.22 13.37-2.89 18.16-14.987 14.008-21.393-9.341-40.79-9.55h-36.67c-10.598 0-19.13 8.576-19.13 19.13 0 10.56 8.58 19.14 19.13 19.14h34.39c33.375 0 52.76 23.511 52.76 49.14 0 24.096-17.571 49.13-53.14 49.13z"/></svg>
\ No newline at end of file
diff --git a/static/empty.jpg b/static/empty.jpg
new file mode 100644
index 00000000..420aae13
Binary files /dev/null and b/static/empty.jpg differ
diff --git a/static/gifcover.gif b/static/gifcover.gif
new file mode 100644
index 00000000..55356171
Binary files /dev/null and b/static/gifcover.gif differ
diff --git a/static/gifcover2.gif b/static/gifcover2.gif
new file mode 100644
index 00000000..4d432205
Binary files /dev/null and b/static/gifcover2.gif differ
diff --git a/static/help.svg b/static/help.svg
deleted file mode 100644
index 31bcc840..00000000
--- a/static/help.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
-<path d="M26,0C11.663,0,0,11.663,0,26s11.663,26,26,26s26-11.663,26-26S40.337,0,26,0z M28,41c0,1.104-0.896,2-2,2s-2-0.896-2-2v-2
-	c0-1.104,0.896-2,2-2s2,0.896,2,2V41z M30.874,24.567C29.102,25.711,28,27.853,28,30.158V33c0,1.104-0.896,2-2,2s-2-0.896-2-2
-	v-2.842c0-3.706,1.76-7.053,4.706-8.952c1.46-0.942,2.317-2.541,2.293-4.277c-0.036-2.635-2.293-4.892-4.928-4.928
-	c-1.366-0.067-2.622,0.492-3.582,1.438C21.529,14.387,21,15.651,21,17c0,1.104-0.896,2-2,2s-2-0.896-2-2
-	c0-2.428,0.952-4.703,2.681-6.408C21.378,8.918,23.617,8,25.998,8c0.043,0,0.086,0.001,0.13,0.001
-	c4.824,0.067,8.804,4.047,8.871,8.871C35.043,19.996,33.501,22.873,30.874,24.567z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/home.svg b/static/home.svg
deleted file mode 100644
index 495d5b77..00000000
--- a/static/home.svg
+++ /dev/null
@@ -1,50 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="495.398px" height="495.398px" viewBox="0 0 495.398 495.398" style="enable-background:new 0 0 495.398 495.398;"
-	 xml:space="preserve">
-<g>
-	<g>
-		<g>
-			<path d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391
-				v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158
-				c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747
-				c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z"/>
-			<path d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401
-				c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79
-				c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z"/>
-		</g>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/hospital.svg b/static/hospital.svg
deleted file mode 100644
index 098e744c..00000000
--- a/static/hospital.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 455 455" style="enable-background:new 0 0 455 455;" xml:space="preserve">
-<g>
-	<polygon points="370.5,158.498 310.5,158.498 310.5,227.498 241.5,227.498 241.5,287.498 310.5,287.498 310.5,356.498 
-		370.5,356.498 370.5,287.498 439.5,287.498 439.5,227.498 370.5,227.498 	"/>
-	<path d="M211.5,197.498h69v-69h120v69h34.799c12.468-20,19.701-42.674,19.701-67.53C455,60.686,398.847,4.51,329.579,4.51
-		c-42.087,0-79.329,20.731-102.079,52.544C204.75,25.24,167.508,4.501,125.421,4.501C56.153,4.501,0,60.664,0,129.947
-		c0,30.118,10.612,57.752,28.299,79.376L227.5,450.499l53-64.169v-68.832h-69V197.498z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/imgAllowance.png b/static/imgAllowance.png
new file mode 100644
index 00000000..5219a10b
Binary files /dev/null and b/static/imgAllowance.png differ
diff --git a/static/imgContact1.png b/static/imgContact1.png
new file mode 100644
index 00000000..b8e87bd1
Binary files /dev/null and b/static/imgContact1.png differ
diff --git a/static/imgContact2.png b/static/imgContact2.png
new file mode 100644
index 00000000..6d0a9c75
Binary files /dev/null and b/static/imgContact2.png differ
diff --git a/static/imgContact3.png b/static/imgContact3.png
new file mode 100644
index 00000000..0c678797
Binary files /dev/null and b/static/imgContact3.png differ
diff --git a/static/imgContact4.png b/static/imgContact4.png
new file mode 100644
index 00000000..768961c5
Binary files /dev/null and b/static/imgContact4.png differ
diff --git a/static/imgContact5.png b/static/imgContact5.png
new file mode 100644
index 00000000..1a766fd1
Binary files /dev/null and b/static/imgContact5.png differ
diff --git a/static/logo-google-sheets.svg b/static/logo-google-sheets.svg
deleted file mode 100644
index 4b3ec32e..00000000
--- a/static/logo-google-sheets.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M21,6l-6-6H5C3.8954306,0,3,0.8954305,3,2v20c0,1.1045704,0.8954306,2,2,2h14c1.1045704,0,2-0.8954296,2-2   V6z" fill="#19B870"/><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="16.80896" x2="22.2063599" y1="4.2216797" y2="9.6190796"><stop offset="0" style="stop-color:#000000;stop-opacity:0.1"/><stop offset="1" style="stop-color:#000000;stop-opacity:0"/></linearGradient><path d="M17,6c-0.5444336,0-1.0367432-0.2190552-1.3973999-0.5719604L21,10.8254395V6H17z" fill="url(#SVGID_1_)"/><path d="M19,23.75H5c-1.1045532,0-2-0.8954468-2-2V22c0,1.1045532,0.8954468,2,2,2h14c1.1045532,0,2-0.8954468,2-2   v-0.25C21,22.8545532,20.1045532,23.75,19,23.75z" opacity="0.1"/><path d="M15,0v4c0,1.1045694,0.8954306,2,2,2h4L15,0z" fill="#80D8B0"/><path d="M17,5.75c-1.1045532,0-2-0.8954468-2-2V4c0,1.1045532,0.8954468,2,2,2h4l-0.25-0.25H17z" opacity="0.1"/><path d="M15,0H5C3.8954468,0,3,0.8953857,3,2v0.25c0-1.1046143,0.8954468-2,2-2h10" fill="#FFFFFF" opacity="0.2"/><path d="M7,9v10h10V9H7z M16,12h-3.5v-2H16V12z M12.5,13H16v2h-3.5V13z M11.5,15H8v-2h3.5V15z M11.5,10v2H8v-2H11.5   z M8,16h3.5v2H8V16z M12.5,18v-2H16v2H12.5z" fill="#FFFFFF"/><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_2_" x1="0.2100637" x2="22.9961185" y1="7.5385189" y2="18.1638298"><stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/><stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/></linearGradient><path d="M21,6l-6-6H5C3.8954306,0,3,0.8954305,3,2v20c0,1.1045704,0.8954306,2,2,2h14   c1.1045704,0,2-0.8954296,2-2V6z" fill="url(#SVGID_2_)"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
\ No newline at end of file
diff --git a/static/man.png b/static/man.png
deleted file mode 100644
index 60fa2264..00000000
Binary files a/static/man.png and /dev/null differ
diff --git a/static/old-man.svg b/static/old-man.svg
deleted file mode 100644
index 83c7596a..00000000
--- a/static/old-man.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="511pt" viewBox="-53 0 511 511.99973" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m362.316406 342.464844c-100.191406-50.859375-218.636718-50.859375-318.824218 0-21.773438 11.054687-35.492188 33.398437-35.492188 57.816406v94.25c0 5.488281 4.453125 9.941406 9.941406 9.941406h369.925782c5.488281 0 9.941406-4.453125 9.941406-9.941406v-94.25c-.003906-24.417969-13.722656-46.765625-35.492188-57.816406zm0 0" fill="#d7dee3"/><path d="m362.316406 342.464844c-8.554687-4.339844-17.246094-8.285156-26.042968-11.882813v56.25c9.210937 11.265625 14.503906 25.550781 14.503906 40.640625v77h37.085937c5.492188 0 9.941407-4.449218 9.941407-9.941406v-94.25c0-24.417969-13.71875-46.765625-35.488282-57.816406zm0 0" fill="#ccd2d6"/><g fill="#fed6a6"><path d="m202.914062 333.464844 41.921876-36.453125v-64.550781h-83.867188v64.53125zm0 0"/><path d="m114.171875 113.992188h-15.246094c-12.9375 0-23.414062 10.492187-23.414062 23.429687v11.082031c0 12.9375 10.476562 23.425782 23.414062 23.425782h15.246094zm0 0"/><path d="m291.632812 113.992188h15.25c12.9375 0 23.410157 10.492187 23.410157 23.429687v11.082031c0 12.9375-10.472657 23.425782-23.410157 23.425782h-15.25zm0 0"/></g><path d="m202.902344 10.382812c-54.574219.027344-98.777344 44.332032-98.671875 98.910157l.144531 77.945312c0 61.09375 68.800781 90.742188 98.527344 91.292969 29.726562-.550781 98.527344-30.199219 98.527344-91.292969l.148437-77.945312c.105469-54.582031-44.101563-98.882813-98.675781-98.910157zm0 0" fill="#ffe3c2"/><path d="m252.019531 23.476562-.125 163.757813c0 47.355469-41.328125 75.808594-73.761719 86.476563 9.414063 3.09375 18.082032 4.695312 24.769532 4.820312 29.726562-.554688 98.527344-30.199219 98.527344-91.296875l.144531-77.941406c.074219-36.695313-19.882813-68.742188-49.554688-85.816407zm0 0" fill="#fed6a6"/><path d="m336.273438 330.558594c-16.332032-6.683594-33.042969-12.09375-49.992188-16.222656l-77.710938 109.300781c-3.695312 5.199219-11.441406 5.125-15.039062-.144531l-74.417969-109.054688c-16.804687 4.117188-33.378906 9.492188-49.578125 16.121094v173.910156h266.738282zm0 0" fill="#d08f61"/><path d="m336.273438 330.558594c-2.019532-.828125-4.046876-1.632813-6.082032-2.421875-.039062-.015625-.078125-.03125-.117187-.046875-8.167969-3.164063-16.421875-6.011719-24.75-8.542969-.0625-.015625-.121094-.035156-.183594-.054687-6.246094-1.894532-12.535156-3.617188-18.859375-5.15625l-24.164062 33.988281c18.140624 5.738281 35.925781 12.96875 53.171874 21.722656 8.253907 4.128906 15.347657 9.894531 20.984376 16.78125zm0 0" fill="#c67f4f"/><path d="m298.082031 26.800781c-37.625-30.746093-81.433593-15.488281-81.433593-15.488281 68.191406 18.539062 84.925781 102.609375 84.925781 102.609375s16.941406 1.363281 22.753906-14.078125c6.601563-17.523438-2.851563-53.925781-26.246094-73.042969zm0 0" fill="#ccd2d6"/><path d="m107.726562 26.800781c37.625-30.746093 81.433594-15.488281 81.433594-15.488281-68.191406 18.539062-84.925781 102.609375-84.925781 102.609375s-16.941406 1.363281-22.753906-14.078125c-6.601563-17.523438 2.851562-53.925781 26.246093-73.042969zm0 0" fill="#d7dee3"/><path d="m202.902344 278.53125c-1.589844-.027344-3.296875-.144531-5.09375-.34375v29.875c0 8.488281 3.472656 16.25 9.167968 21.871094l37.859376-32.921875v-30.335938c-15.6875 7.742188-31.304688 11.660157-41.933594 11.855469zm0 0" fill="#efc79c"/><path d="m252.847656 361.363281 33.433594-47.023437-24.148438-18.898438c-4.902343-3.609375-11.652343-3.335937-16.246093.65625l-42.984375 37.378906 44.367187 26.953126c1.730469 1.050781 3.726563 1.332031 5.578125.933593zm0 0" fill="#b2b9bf"/><path d="m262.144531 348.289062 24.128907-33.957031-24.140626-18.890625c-4.902343-3.609375-11.652343-3.335937-16.246093.65625l-38.910157 33.835938c4.261719 4.207031 9.765626 7.214844 16.003907 8.421875 13.179687 2.558593 26.25 5.886719 39.140625 9.96875zm0 0" fill="#a0a9af"/><path d="m158.558594 360.429688 44.367187-26.953126-42.984375-37.378906c-4.59375-3.996094-11.34375-4.269531-16.246094-.65625l-24.582031 18.996094 31.28125 45.84375c2.398438 1.578125 5.574219 1.71875 8.164063.148438zm0 0" fill="#b2b9bf"/><path d="m200.945312 151.71875c-4.140624 0-7.496093 3.355469-7.496093 7.5v22.019531c0 6.042969 4.917969 10.960938 10.960937 10.960938h7.253906c4.144532 0 7.5-3.355469 7.5-7.5 0-4.140625-3.355468-7.496094-7.5-7.496094h-3.21875v-17.984375c0-4.144531-3.355468-7.5-7.5-7.5zm0 0"/><path d="m165.96875 210.152344c-3.503906 2.214844-4.542969 6.847656-2.328125 10.347656 7.605469 12.019531 22.648437 19.488281 39.265625 19.488281 16.613281 0 31.660156-7.46875 39.265625-19.488281 2.214844-3.5 1.171875-8.132812-2.324219-10.347656-3.5-2.210938-8.132812-1.171875-10.351562 2.328125-4.804688 7.597656-15.246094 12.507812-26.589844 12.507812-11.347656 0-21.785156-4.910156-26.59375-12.507812-2.214844-3.5-6.847656-4.539063-10.34375-2.328125zm0 0"/><path d="m245.816406 148.769531c0 4.140625 3.355469 7.496094 7.5 7.496094 4.140625 0 7.496094-3.355469 7.496094-7.496094v-10.035156c0-4.140625-3.355469-7.5-7.496094-7.5-4.144531 0-7.5 3.359375-7.5 7.5zm0 0"/><path d="m152.492188 131.234375c-4.144532 0-7.5 3.359375-7.5 7.5v10.035156c0 4.140625 3.355468 7.496094 7.5 7.496094 4.140624 0 7.496093-3.355469 7.496093-7.496094v-10.035156c0-4.140625-3.355469-7.5-7.496093-7.5zm0 0"/><path d="m241.78125 66.011719h-77.757812c-4.140626 0-7.5 3.359375-7.5 7.5s3.359374 7.5 7.5 7.5h77.757812c4.144531 0 7.5-3.359375 7.5-7.5s-3.359375-7.5-7.5-7.5zm0 0"/><path d="m232.125 100.386719c0-4.140625-3.355469-7.5-7.5-7.5h-43.445312c-4.144532 0-7.5 3.359375-7.5 7.5s3.355468 7.5 7.5 7.5h43.445312c4.144531 0 7.5-3.359375 7.5-7.5zm0 0"/><path d="m365.707031 335.808594c-8.515625-4.324219-59.261719-24.164063-76.070312-28.339844l-22.882813-17.902344c-.058594-.046875-.113281-.089844-.171875-.132812-4.253906-3.132813-9.328125-4.429688-14.246093-3.921875v-14.222657c5.191406-2.78125 10.363281-5.976562 15.371093-9.59375 18.804688-13.59375 41.222657-37.539062 41.222657-74.417968l.015624-7.886719c16.085938-1.066406 28.847657-14.5 28.847657-30.859375v-11.082031c0-10.246094-5.003907-19.34375-12.699219-24.976563 2.527344-2.589844 4.707031-5.859375 6.253906-9.957031 3.941406-10.46875 3.296875-25.375-1.765625-40.894531-5.375-16.472656-14.875-30.890625-26.757812-40.601563-36.554688-29.867187-77.914063-19.96875-86.917969-17.304687-4.320312-.53125-8.683594-.800782-13.007812-.800782-4.3125 0-8.675782.269532-13 .800782-9.003907-2.664063-50.363282-12.5625-86.917969 17.308594-11.878907 9.707031-21.382813 24.125-26.753907 40.597656-5.0625 15.523437-5.707031 30.425781-1.765624 40.894531 1.542968 4.097656 3.726562 7.367187 6.25 9.957031-7.691407 5.632813-12.699219 14.730469-12.699219 24.976563v11.082031c0 16.359375 12.761719 29.792969 28.847656 30.859375l.015625 7.875c0 36.890625 22.417969 60.835937 41.222656 74.429687 5.007813 3.621094 10.179688 6.8125 15.371094 9.59375v14.21875c-4.910156-.5-9.976562.796876-14.222656 3.925782-.046875.035156-.09375.066406-.136719.105468l-23.332031 18.027344c-16.675782 4.164063-67.175782 23.921875-75.683594 28.242188-24.421875 12.398437-39.59375 37.113281-39.59375 64.503906v94.25c0 9.613281 7.824219 17.4375 17.4375 17.4375h369.925781c9.617188 0 17.441407-7.824219 17.441407-17.4375v-94.25c0-27.390625-15.171876-52.105469-39.597657-64.503906zm-108.09375-34.351563 18.40625 14.402344-26.460937 37.214844-33.984375-20.648438 35.230469-30.640625c1.9375-1.683594 4.726562-1.816406 6.808593-.328125zm-16.769531 63.875-38.300781 53.867188c-.441407.625-1.054688.746093-1.457031.746093-.421876-.003906-1.015626-.140624-1.445313-.773437l-36.128906-52.949219 39.402343-23.9375zm-72.375-71.730469v-15.375c13.078125 5.140626 25.339844 7.664063 34.292969 7.832032h.140625.140625c8.953125-.167969 21.214843-2.691406 34.292969-7.832032v15.398438l-34.421876 29.933594zm154.328125-145.070312c0 8.074219-6.035156 14.765625-13.824219 15.792969l.082032-42.65625c7.75 1.0625 13.742187 7.734375 13.742187 15.78125zm-29.460937-115.894531c21.425781 17.507812 29.191406 50.734375 23.976562 64.59375-2.105469 5.589843-6.460938 7.828125-9.976562 8.710937-2.257813-8.3125-7.136719-23.527344-16.066407-39.929687-12.328125-22.636719-28.324219-39.914063-47.054687-51.035157 14.125.179688 32.253906 3.878907 49.121094 17.660157zm-210.324219 115.894531v-11.082031c0-8.042969 5.988281-14.714844 13.742187-15.777344l.078125 42.652344c-7.789062-1.027344-13.820312-7.71875-13.820312-15.792969zm5.484375-51.300781c-5.21875-13.859375 2.550781-47.085938 23.976562-64.59375 16.871094-13.785157 34.996094-17.484375 49.121094-17.660157-18.730469 11.121094-34.726562 28.394532-47.054688 51.035157-8.925781 16.386719-13.800781 31.589843-16.0625 39.90625-3.507812-.890625-7.886718-3.132813-9.980468-8.6875zm23.378906 90.019531-.136719-72.527344c1.761719-7.824218 19.425781-79.328125 78.703125-95.953125 4.140625-.566406 8.328125-.855469 12.460938-.859375 4.140625.003906 8.332031.292969 12.46875.859375 59.105468 16.582031 76.917968 88.113281 78.699218 95.953125l-.136718 72.542969c0 56.75-65.816406 83.234375-91.027344 83.796875-25.214844-.5625-91.03125-27.046875-91.03125-83.8125zm36.324219 114.21875c2.085937-1.5 4.882812-1.371094 6.824219.316406l35.230468 30.640625-35.210937 21.394531-25.75-37.742187zm242.109375 193.09375c0 1.34375-1.097656 2.4375-2.441406 2.4375h-44.09375v-22.90625c0-4.144531-3.359376-7.5-7.5-7.5-4.144532 0-7.5 3.355469-7.5 7.5v22.90625h-251.742188v-96.28125c0-4.140625-3.355469-7.5-7.5-7.5-4.140625 0-7.496094 3.359375-7.496094 7.5v96.28125h-44.09375c-1.347656 0-2.441406-1.09375-2.441406-2.4375v-94.253906c0-21.707032 12.027344-41.300782 31.386719-51.128906 4.9375-2.507813 10.003906-4.921876 15.148437-7.222657v23.847657c0 4.140624 3.355469 7.5 7.496094 7.5 4.144531 0 7.5-3.359376 7.5-7.5v-30.144532c12.660156-4.964844 25.6875-9.203125 38.839844-12.636718l71.382812 104.605468c3.089844 4.527344 8.207032 7.261719 13.6875 7.3125.054688.003906.105469.003906.160156.003906 5.421876 0 10.519532-2.628906 13.667969-7.054687l74.652344-105c13.328125 3.457031 26.523437 7.738281 39.351563 12.769531v103.515625c0 4.140625 3.355468 7.5 7.5 7.5 4.140624 0 7.496093-3.359375 7.496093-7.5v-97.21875c5.140625 2.296875 10.207031 4.714844 15.152344 7.222657 19.355469 9.828124 31.382813 29.421874 31.382813 51.128906v94.253906zm0 0"/></svg>
\ No newline at end of file
diff --git a/static/old-woman.svg b/static/old-woman.svg
deleted file mode 100644
index 1ec4e64f..00000000
--- a/static/old-woman.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="511pt" viewBox="-95 1 511 511.999" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m294.902344 196.742188c11.03125-4.675782 18.773437-15.605469 18.773437-28.34375 0-13.601563-8.820312-25.132813-21.050781-29.207032-3.207031-1.066406-5.433594-3.980468-5.429688-7.359375v-.332031c0-9.257812-4.089843-17.558594-10.554687-23.203125-3.328125-2.902344-4.636719-7.46875-3.28125-11.667969.960937-2.976562 1.480469-6.152344 1.480469-9.445312 0-13.78125-9.050782-25.4375-21.53125-29.363282-4.347656-1.367187-7.152344-5.464843-7.171875-10.023437-.007813-1.710937-.15625-3.453125-.460938-5.222656-2.292969-13.273438-13.21875-23.648438-26.597656-25.222657-5.546875-.652343-10.84375.175782-15.546875 2.136719-3.3125 1.378907-7.074219.523438-9.511719-2.109375-5.621093-6.070312-13.660156-9.875-22.589843-9.875-7.65625 0-14.65625 2.796875-20.039063 7.421875-2.96875 2.550781-7.277344 2.761719-10.613281.71875-4.671875-2.859375-10.167969-4.507812-16.046875-4.507812-17.003907 0-30.785157 13.785156-30.785157 30.785156v.074219c.007813 2.066406-1.777343 3.632812-3.835937 3.453125-.871094-.074219-1.753906-.113281-2.644531-.113281-15.28125 0-27.964844 11.132812-30.375 25.734374-.5 3.039063-2.363282 5.703126-5.117188 7.085938-7.246094 3.644531-20.359375 12.460938-20.910156 28.75-.152344 4.457031.882812 8.695312 2.636719 12.523438 1.527343 3.332031 1.046875 7.199218-1.222657 10.078124-4.121093 5.238282-6.582031 11.84375-6.582031 19.023438 0 3.808594.691407 7.449219 1.953125 10.816406 2.253906 5.992188.460938 12.769532-4.660156 16.609375-9.746094 7.308594-15.855469 19.203125-15.125 32.484375 1.027344 18.554688 15.691406 33.820313 34.191406 35.570313.128906.011719.257813.015625.386719.023437-3.933594 6.136719-6.074219 13.527344-5.652344 21.445313.957031 18.09375 15.519531 32.898437 33.601563 34.117187 21.105468 1.425782 38.671875-15.273437 38.671875-36.078125 0-2.738281-.3125-5.398437-.886719-7.960937 3.484375-4.613282 5.703125-10.226563 6.125-16.296875 1.242188-17.992188-12.984375-32.96875-30.710938-32.96875 0-12.054688 147.140626-6.660157 147.140626 8.628906 0 5.121094 1.257812 9.945313 3.46875 14.195313-15.230469 4.9375-26.039063 19.695312-24.929688 36.8125 1.160156 17.894531 15.628906 32.429687 33.515625 33.664062 21.136719 1.460938 38.734375-15.25 38.734375-36.074219 0-5.574219-1.265625-10.851562-3.519531-15.5625-1.414063-2.949219-.683594-6.496093 1.929687-8.464843 7.339844-5.523438 12.195313-14.234376 12.367188-24.019532.0625-3.570312-.484375-7-1.542969-10.203125-1.125-3.410156.644531-7.125 3.949219-8.527343zm0 0" fill="#efefef"/><path d="m292.140625 438.738281v58.207031c0 4.164063-3.382813 7.546876-7.546875 7.546876h-233.074219c-4.171875 0-7.554687-3.382813-7.554687-7.546876v-58.207031c0-29.5 19.378906-55.496093 47.65625-63.925781l13.402344-3.992188c6.238281-1.851562 11.460937-5.699218 15.066406-10.730468.339844-.460938.648437-.933594.960937-1.414063 2.5625-4.0625 4.113281-8.789062 4.375-13.78125.027344-.492187.039063-.984375.039063-1.484375v-24.453125l78.558594-15.894531v38.367188c0 7.097656 2.601562 13.714843 7.046874 18.789062.121094.148438.25.300781.390626.449219 3.421874 3.765625 7.878906 6.648437 12.992187 8.179687l20.039063 5.964844c28.28125 8.429688 47.648437 34.425781 47.648437 63.925781zm0 0" fill="#ffdba9"/><path d="m244.492188 374.8125-20.039063-5.964844c-5.113281-1.53125-9.570313-4.414062-12.992187-8.175781-.140626-.152344-.269532-.300781-.390626-.453125-4.445312-5.074219-7.046874-11.691406-7.046874-18.789062v-38.367188l-78.558594 15.898438v8.332031l50.488281-10.214844v38.367187c0 7.097657 2.605469 13.714844 7.050781 18.789063.117188.152344.25.300781.390625.449219 3.421875 3.765625 7.875 6.648437 12.992188 8.179687l20.039062 5.964844c28.277344 8.429687 47.648438 34.425781 47.648438 63.925781v51.742188h20.519531c4.164062 0 7.546875-3.382813 7.546875-7.546875v-58.210938c0-29.5-19.367187-55.496093-47.648437-63.925781zm0 0" fill="#ffc473"/><path d="m292.625 139.191406c-3.207031-1.066406-5.433594-3.980468-5.429688-7.359375v-.332031c0-9.257812-4.085937-17.558594-10.554687-23.199219-3.328125-2.90625-4.636719-7.472656-3.28125-11.671875.960937-2.976562 1.484375-6.148437 1.484375-9.445312 0-13.777344-9.054688-25.4375-21.535156-29.363282-4.347656-1.367187-7.152344-5.464843-7.171875-10.019531-.003907-1.710937-.152344-3.457031-.460938-5.226562-2.292969-13.273438-13.21875-23.648438-26.597656-25.222657-5.546875-.652343-10.839844.175782-15.546875 2.136719-3.3125 1.378907-7.074219.527344-9.511719-2.105469-5.621093-6.074218-13.660156-9.878906-22.585937-9.878906-2.574219 0-5.066406.324219-7.453125.917969 62.425781 32.304687 105.09375 97.472656 105.09375 172.609375 0 43.289062-14.167969 83.265625-38.109375 115.5625 3.726562 1.65625 7.777344 2.707031 12.019531 3 21.136719 1.460938 38.734375-15.25 38.734375-36.074219 0-5.574219-1.265625-10.851562-3.519531-15.5625-1.410157-2.949219-.683594-6.496093 1.929687-8.464843 7.339844-5.523438 12.195313-14.234376 12.367188-24.019532.0625-3.570312-.484375-7-1.539063-10.203125-1.128906-3.40625.644531-7.121093 3.945313-8.523437 11.035156-4.679688 18.773437-15.605469 18.773437-28.347656 0-13.597657-8.820312-25.132813-21.050781-29.207032zm0 0" fill="#e1e1e3"/><path d="m204.023438 303.0625v29.097656c-14.644532 10.550782-32.613282 16.757813-52.03125 16.757813-9.25 0-18.179688-1.410157-26.566407-4.023438.027344-.492187.039063-.980469.039063-1.480469v-24.453124zm0 0" fill="#ffc473"/><path d="m241.136719 102.746094v135.667968c0 49.234376-39.914063 89.148438-89.148438 89.148438-49.226562 0-89.136719-39.914062-89.136719-89.148438v-135.667968l95.878907-38.039063zm0 0" fill="#ffdba9"/><path d="m250.375 226.933594h-9.242188v-60.777344h9.242188c15.78125 0 28.574219 12.792969 28.574219 28.574219v3.628906c0 15.78125-12.792969 28.574219-28.574219 28.574219zm0 0" fill="#ffc473"/><path d="m292.140625 438.738281v58.207031c0 4.164063-3.382813 7.546876-7.546875 7.546876h-233.074219c-4.171875 0-7.554687-3.382813-7.554687-7.546876v-58.207031c0-29.5 19.378906-55.496093 47.65625-63.925781l13.402344-3.992188c6.238281-1.851562 11.460937-5.699218 15.066406-10.730468.277344 1.839844 3.351562 18.375 23.3125 28.136718 18.449218 9.027344 20.46875 34.144532 20.679687 40.429688.03125.8125.703125 1.441406 1.503907 1.441406.808593 0 1.46875-.632812 1.5-1.441406.210937-6.285156 2.230468-31.402344 20.679687-40.429688 19.558594-9.570312 22.914063-25.636718 23.304687-28.007812.117188.148438.25.300781.390626.449219 3.421874 3.765625 7.878906 6.648437 12.992187 8.179687l20.039063 5.964844c28.28125 8.429688 47.648437 34.425781 47.648437 63.925781zm0 0" fill="#ef5361"/><path d="m244.492188 374.8125-20.039063-5.964844c-5.113281-1.53125-9.570313-4.414062-12.992187-8.175781-.140626-.152344-.269532-.300781-.390626-.453125-.324218 1.96875-2.695312 13.359375-14.664062 22.648438l20.019531 5.960937c28.277344 8.429687 47.648438 34.425781 47.648438 63.925781v51.742188h20.519531c4.164062 0 7.546875-3.382813 7.546875-7.546875v-58.210938c0-29.5-19.367187-55.496093-47.648437-63.925781zm0 0" fill="#dc4250"/><path d="m257.015625 164.917969c-15.203125 0-27.527344-12.324219-27.527344-27.527344 0-.238281.011719-.476563.015625-.714844-12.207031-2.820312-21.308594-13.75-21.308594-26.8125 0-4.765625 1.214844-9.25 3.347657-13.15625.652343-1.195312-.242188-2.621093-1.601563-2.53125-.578125.035157-1.160156.054688-1.746094.054688-10.453124 0-19.539062-5.828125-24.199218-14.410157-.648438-1.195312-2.339844-1.195312-2.984375 0-4.660157 8.582032-13.75 14.410157-24.203125 14.410157-7.074219 0-13.523438-2.671875-18.398438-7.0625-.726562-.652344-1.847656-.554688-2.453125.214843-5.039062 6.402344-12.859375 10.515626-21.640625 10.515626-5.835937 0-11.242187-1.816407-15.695312-4.914063-1.152344-.800781-2.726563-.003906-2.726563 1.402344 0 14.015625-9.808593 25.734375-22.933593 28.679687-1.089844.242188-1.648438 1.417969-1.164063 2.421875 1.730469 3.601563 2.707031 7.636719 2.707031 11.902344 0 15.203125-12.328125 27.523437-27.527344 27.523437l9.761719-62.171874 61.488281-43.375 67.304688-5.339844 40.707031 12.679687 22.402344 38.191407 6.617187 36.550781zm0 0" fill="#efefef"/><path d="m321.179688 168.398438c0-16.585938-10.933594-31.363282-26.480469-36.425782.003906-.15625.003906-.316406.003906-.472656 0-12.050781-5.535156-23.15625-14.972656-30.375 1.742187-4.433594 2.621093-9.105469 2.621093-13.9375 0-17.515625-12.121093-32.808594-28.769531-37.089844.136719-2.390625.046875-4.796875-.261719-7.199218-2.367187-18.058594-17.265624-32.015626-35.425781-33.191407-6.160156-.402343-12.265625.667969-17.875 3.113281-7.21875-8.082031-17.667969-12.820312-28.589843-12.820312-9.507813 0-18.671876 3.566406-25.691407 9.90625-6.199219-4.066406-13.53125-6.273438-21.003906-6.273438-19.738281 0-36.035156 15.003907-38.082031 34.203126-18.785156.398437-34.636719 14.503906-37.140625 33.167968-7.808594 3.757813-25.234375 14.492188-25.953125 35.644532-.199219 5.75 1.144531 11.617187 3.902344 17.136718-5.871094 6.914063-9.074219 15.585938-9.074219 24.742188 0 6.535156 1.628906 12.835937 4.746093 18.472656-14.78125 8.519531-23.519531 24.472656-22.5625 41.859375 1.035157 18.816406 13.839844 34.84375 31.191407 40.574219-1.539063 4.507812-2.332031 9.261718-2.332031 14.089844 0 24.074218 19.589843 43.664062 43.671874 43.664062 3.351563 0 6.65625-.386719 9.875-1.132812 9.921876 10.128906 21.824219 17.890624 34.980469 22.832031v14.523437c0 3.984375-1.128906 7.878906-3.21875 11.199219-.011719.015625-.019531.03125-.03125.046875-.539062.550781-.996093 1.175781-1.34375 1.863281-2.6875 3.402344-6.28125 5.859375-10.480469 7.105469l-13.40625 3.992188c-15.433593 4.601562-28.683593 13.859374-38.308593 26.769531-9.625 12.910156-14.710938 28.246093-14.710938 44.351562 0 4.144531 3.359375 7.503907 7.507813 7.503907 4.144531 0 7.503906-3.359376 7.503906-7.503907 0-25.980469 17.390625-49.308593 42.292969-56.730469l13.398437-3.992187c3.503906-1.039063 6.820313-2.621094 9.835938-4.648437 3.75 6.992187 10.613281 15.492187 23.105468 21.605468 14.828126 7.257813 16.332032 29.546875 16.480469 33.949219.171875 4.871094 4.125 8.683594 9.003907 8.683594 4.882812 0 8.835937-3.816407 9.003906-8.691407.148437-4.394531 1.648437-26.683593 16.480468-33.941406 12.910157-6.320312 19.8125-15.1875 23.476563-22.308594 2.4375 1.414063 5.035156 2.5625 7.761719 3.378907l20.039062 5.964843c24.898438 7.421876 42.285156 30.75 42.285156 56.730469l-.039062 58.246094-233.125-.039063v-26.167968c0-4.144532-3.359375-7.507813-7.503906-7.507813-4.148438 0-7.507813 3.363281-7.507813 7.507813v26.167968c0 8.300782 6.757813 15.054688 15.0625 15.054688h233.074219c8.300781 0 15.054688-6.753906 15.054688-15.054688v-58.207031c0-16.105469-5.085938-31.441406-14.707032-44.351562-9.625-12.910157-22.867187-22.167969-38.304687-26.769531l-20.03125-5.960938c-3.363281-1.007812-6.410157-2.84375-8.886719-5.3125-.570312-1.066406-1.390625-1.980469-2.390625-2.667969-.933594-1.089843-1.441406-1.734375-1.691406-2.226562-.421875-.835938-.886719-2.648438-1.660157-5.648438-1.03125-4.015625-5.121093-6.4375-9.136718-5.40625s-6.4375 5.121094-5.40625 9.136719c1.777344 6.921875 2.464844 8.941406 5.394531 12.582031-1.625 4.660157-6.167969 13.40625-18.359375 19.371094-9.375 4.589844-15.230469 12.296875-18.882812 20.269531-3.652344-7.972656-9.507813-15.679687-18.886719-20.269531-12.832031-6.28125-17.1875-15.636719-18.582031-20.035156 3.167968-5.492188 4.855468-11.691407 4.855468-18.039063v-10.230468c6.238282 1.246093 12.609375 1.882812 19.015625 1.882812 20.410157 0 39.917969-6.285156 56.417969-18.167969 6.042969-4.347656 11.539062-9.363281 16.414062-14.945312 6.335938 3.40625 13.488282 5.238281 20.734376 5.238281 24.082031 0 43.671874-19.589844 43.671874-43.664062 0-6.445313-1.390624-12.703126-4.070312-18.4375 9.015625-7.066407 14.648438-17.957032 14.839844-29.46875.082031-4.152344-.5-8.21875-1.730469-12.140626 13.867187-6.035156 22.914063-19.632812 22.914063-35.078124zm-49.417969 67.457031c-1.980469.964843-3.4375 2.753906-3.984375 4.890625-.542969 2.136718-.121094 4.40625 1.15625 6.203125 3.453125 4.863281 5.28125 10.59375 5.28125 16.574219 0 15.796874-12.859375 28.648437-28.660156 28.648437-4.082032 0-8.015626-.835937-11.640626-2.449219 9.660157-15.34375 14.734376-32.917968 14.734376-51.304687v-3.976563h1.726562c15.789062 0 29.234375-10.195312 34.113281-24.347656.363281 1.710938.53125 3.46875.496094 5.257812-.144531 8.609376-5.332031 16.65625-13.222656 20.503907zm-124.269531-48.703125v-4.261719c0-12.015625 9.773437-21.789063 21.789062-21.789063h4.265625c12.011719 0 21.785156 9.773438 21.785156 21.789063v4.261719c0 12.015625-9.773437 21.789062-21.785156 21.789062h-4.265625c-12.015625 0-21.789062-9.773437-21.789062-21.789062zm26.054687-41.066406h-4.265625c-17.929688 0-32.894531 12.886718-36.140625 29.882812h-12.59375c-3.25-16.996094-18.214844-29.882812-36.144531-29.882812h-3.46875c.710937-2.804688 1.078125-5.722657 1.078125-8.699219 0-3.070313-.390625-6.082031-1.171875-9 10.640625-4.523438 18.625-13.925781 21.449218-25.101563 3.820313 1.398438 7.878907 2.121094 12.023438 2.121094 8.890625 0 17.25-3.292969 23.652344-9.171875 5.59375 3.578125 12.113281 5.507813 18.84375 5.507813 9.882812 0 19.136718-4.148438 25.691406-11.21875 5.105469 5.511718 11.867188 9.25 19.292969 10.628906-.726563 2.835937-1.101563 5.761718-1.101563 8.707031 0 14.445313 8.652344 27.058594 21.628906 32.382813.84375 5.988281 3.226563 11.640624 6.863282 16.402343h-27.980469c-6.75-7.6875-16.644531-12.558593-27.65625-12.558593zm-115.195313 36.804687c0-12.015625 9.773438-21.789063 21.789063-21.789063h4.261719c12.015625 0 21.789062 9.773438 21.789062 21.789063v4.261719c0 12.015625-9.773437 21.789062-21.789062 21.789062h-4.261719c-12.015625 0-21.789063-9.773437-21.789063-21.789062zm190.296876-9.226563h1.726562c11.617188 0 21.066406 9.449219 21.066406 21.066407v3.628906c0 11.617187-9.449218 21.066406-21.066406 21.066406h-1.726562zm41.089843 16.984376c-1.230469.375-2.359375.964843-3.367187 1.71875-1.222656-18.796876-16.894532-33.71875-35.996094-33.71875h-1.835938c-.324218-1.992188-1.429687-3.714844-2.996093-4.851563-.027344-.019531-.042969-.039063-.074219-.058594-5.304688-3.746093-8.472656-9.859375-8.472656-16.351562 0-.125.007812-.25.015625-.40625.144531-3.605469-2.296875-6.804688-5.8125-7.617188-9.121094-2.109375-15.496094-10.128906-15.496094-19.503906 0-3.34375.847656-6.65625 2.457031-9.605469 1.605469-2.957031 1.476563-6.546875-.335937-9.371094-1.804688-2.8125-4.996094-4.414062-8.351563-4.199218-.421875.03125-.84375.042968-1.273437.042968-7.359375 0-14.113281-4.027343-17.601563-10.472656-1.601562-2.996094-4.703125-4.855468-8.09375-4.855468-3.394531 0-6.496094 1.859374-8.074218 4.816406-3.507813 6.484375-10.261719 10.511718-17.621094 10.511718-4.949219 0-9.703125-1.828124-13.378906-5.140624-1.878907-1.695313-4.394532-2.546876-6.917969-2.332032-2.523438.210938-4.871094 1.476563-6.453125 3.480469-3.816406 4.867187-9.554688 7.65625-15.746094 7.65625-4.117188 0-8.074219-1.242187-11.429688-3.582031-2.828124-1.984375-6.484374-2.230469-9.539062-.644532-3.058594 1.589844-4.953125 4.722657-4.953125 8.222657 0 10.167969-7.191406 19.148437-17.097656 21.359375-2.765625.621094-5.054688 2.4375-6.28125 4.980468-1.226563 2.546876-1.21875 5.46875.007812 7.996094 1.3125 2.726563 1.980469 5.640625 1.980469 8.664063 0 5.207031-1.988281 10.078125-5.601562 13.847656-10.804688 6.421875-18.0625 18.203125-18.0625 31.65625v4.265625c0 20.292969 16.511718 36.800781 36.804687 36.800781h4.265625c19 0 34.679688-14.472656 36.601562-32.972656h11.671876c.421874 4.085937 1.523437 7.972656 3.179687 11.554687.152344.390626.332031.761719.539063 1.117188 6.0625 12.027344 18.523437 20.304688 32.882812 20.304688h4.265625c12.296875 0 23.195313-6.070313 29.882813-15.359376.199218-.246093.378906-.507812.550781-.777343 4.015625-5.894531 6.371093-13.011719 6.371093-20.667969v-4.265625c0-3.183594-.410156-6.277344-1.171874-9.226563h24.445312v53.273438c0 .050781.007812.101562.007812.15625v11.328125c0 17.867187-5.664062 34.832031-16.386718 49.058594-4.96875 6.597656-10.890625 12.398437-17.609375 17.230469-13.929688 10.035156-30.40625 15.339843-47.644531 15.339843-7.058594 0-14.066407-.902343-20.832032-2.683593-15.5625-4.09375-29.476562-12.664063-40.238281-24.78125-11.269531-12.703126-18.207031-28.304688-20.0625-45.113282-.457031-4.121094-4.164063-7.097656-8.285156-6.640625-4.121094.453125-7.09375 4.164063-6.640625 8.285157 1.714844 15.535156 7.105468 30.183593 15.71875 43.019531-15.128906-.757813-27.207032-13.300781-27.207032-28.609375 0-5.484375 1.566407-10.824219 4.523438-15.441406 1.425781-2.226563 1.574219-5.039063.394531-7.402344-1.183593-2.367188-3.519531-3.9375-6.15625-4.132813-.125-.011719-.253906-.015625-.394531-.023437-14.730469-1.46875-26.429688-13.691406-27.246094-28.488282-.703125-12.726562 6.339844-24.304687 17.949219-29.492187 3.027344-1.359375 5.246094-3.96875 6.089844-7.164063.835937-3.164062.207031-6.488281-1.71875-9.121093-2.933594-4.007813-4.480469-8.757813-4.480469-13.730469 0-6.210938 2.425781-12.058594 6.828125-16.460938 3.523437-3.519531 4.195313-8.960937 1.628906-13.230468-1.59375-2.65625-3.460937-6.835938-3.296875-11.675782.1875-5.449218 2.726563-15.652343 17.691406-22.738281 4.457032-2.125 7.492188-6.347656 8.121094-11.285156 1.480469-11.570313 11.410156-20.296875 23.089844-20.296875.683594 0 1.363281.03125 2.03125.09375 3.089844.269531 6.167969-.769531 8.4375-2.859375 2.25-2.066406 3.53125-5.003906 3.515625-8.023437v-.128907c0-12.835937 10.445313-23.273437 23.28125-23.273437 5.386719 0 10.4375 1.777344 14.613281 5.15625 4.492188 3.613281 11.015625 3.105468 14.835938-1.136719 4.410156-4.863281 10.695312-7.65625 17.25-7.65625 7.46875 0 14.300781 3.453125 18.742187 9.472656 3.222657 4.371094 9.222657 5.675781 13.925781 3.046875 3.894532-2.152344 8.332032-3.136718 12.820313-2.84375 11.027344.714844 20.074219 9.191406 21.511719 20.148438.292968 2.273437.261718 4.558594-.09375 6.773437-.480469 2.929688.210937 5.851563 1.945312 8.222657 1.726563 2.363281 4.28125 3.898437 7.203125 4.328124 11.316407 1.664063 19.847657 11.5625 19.847657 23.023438 0 3.695312-.84375 7.234375-2.5 10.503906-2.523438 4.941406-.808594 11.117188 3.898437 14.0625 6.859375 4.285156 10.957031 11.667969 10.957031 19.75 0 .8125-.042968 1.625-.128906 2.449219-.59375 5.503906 3.023438 10.546875 8.394531 11.726563 10.550781 2.335937 18.210938 11.890624 18.210938 22.71875-.003907 10.292968-6.609375 19.234374-16.429688 22.25zm0 0"/><path d="m99.992188 185.019531c0 4.894531-3.96875 8.863281-8.859376 8.863281-4.894531 0-8.863281-3.96875-8.863281-8.863281 0-4.890625 3.96875-8.859375 8.863281-8.859375 4.890626 0 8.859376 3.96875 8.859376 8.859375zm0 0"/><path d="m176.449219 185.019531c0 4.894531-3.964844 8.863281-8.859375 8.863281-4.894532 0-8.859375-3.96875-8.859375-8.863281 0-4.890625 3.964843-8.859375 8.859375-8.859375 4.894531 0 8.859375 3.96875 8.859375 8.859375zm0 0"/><path d="m115.253906 276.546875c3.089844 1.332031 9.46875 3.5625 17.476563 3.5625 4.40625 0 9.304687-.675781 14.421875-2.546875 11.042968-4.050781 17.578125-11.738281 20.492187-15.960938 2.355469-3.414062 1.496094-8.089843-1.917969-10.445312-3.414062-2.355469-8.085937-1.496094-10.441406 1.917969-1.902344 2.753906-6.15625 7.769531-13.300781 10.386719-9.339844 3.421874-17.648437.648437-20.789063-.703126-3.808593-1.644531-8.222656.113282-9.863281 3.921876-1.644531 3.808593.113281 8.222656 3.921875 9.867187zm0 0"/><path d="m172.972656 466.507812c0 4.890626-3.96875 8.859376-8.859375 8.859376-4.894531 0-8.859375-3.96875-8.859375-8.859376 0-4.894531 3.964844-8.859374 8.859375-8.859374 4.890625 0 8.859375 3.964843 8.859375 8.859374zm0 0"/></svg>
\ No newline at end of file
diff --git a/static/project1.jpg b/static/project1.jpg
deleted file mode 100644
index 0c8dc9a4..00000000
Binary files a/static/project1.jpg and /dev/null differ
diff --git a/static/project2.png b/static/project2.png
deleted file mode 100644
index 01efe8e3..00000000
Binary files a/static/project2.png and /dev/null differ
diff --git a/static/project3.png b/static/project3.png
deleted file mode 100644
index 5eeac75b..00000000
Binary files a/static/project3.png and /dev/null differ
diff --git a/static/service.svg b/static/service.svg
deleted file mode 100644
index 0979fc9d..00000000
--- a/static/service.svg
+++ /dev/null
@@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M271.029,0c-33.091,0-61,27.909-61,61s27.909,61,61,61s60-27.909,60-61S304.12,0,271.029,0z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M337.621,122c-16.485,18.279-40.096,30-66.592,30c-26.496,0-51.107-11.721-67.592-30
-			c-14.392,15.959-23.408,36.866-23.408,60v15c0,8.291,6.709,15,15,15h151c8.291,0,15-6.709,15-15v-15
-			C361.029,158.866,352.013,137.959,337.621,122z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M144.946,460.404L68.505,307.149c-7.381-14.799-25.345-20.834-40.162-13.493l-19.979,9.897
-			c-7.439,3.689-10.466,12.73-6.753,20.156l90,180c3.701,7.423,12.704,10.377,20.083,6.738l19.722-9.771
-			C146.291,493.308,152.354,475.259,144.946,460.404z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M499.73,247.7c-12.301-9-29.401-7.2-39.6,3.9l-82,100.8c-5.7,6-16.5,9.6-22.2,9.6h-69.901c-8.401,0-15-6.599-15-15
-			s6.599-15,15-15c20.09,0,42.332,0,60,0c16.5,0,30-13.5,30-30s-13.5-30-30-30c-70.446,0-3.25,0-78.6,0
-			c-7.476,0-11.204-4.741-17.1-9.901c-23.209-20.885-57.949-30.947-93.119-22.795c-19.528,4.526-32.697,12.415-46.053,22.993
-			l-0.445-0.361L89.016,281.03L174.28,452h25.248h146.501c28.2,0,55.201-13.5,72.001-36l87.999-126
-			C515.929,276.799,513.229,257.601,499.73,247.7z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/social.svg b/static/social.svg
deleted file mode 100644
index be8c2efa..00000000
--- a/static/social.svg
+++ /dev/null
@@ -1,51 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="80.13px" height="80.13px" viewBox="0 0 80.13 80.13" style="enable-background:new 0 0 80.13 80.13;" xml:space="preserve"
-	>
-<g>
-	<path d="M48.355,17.922c3.705,2.323,6.303,6.254,6.776,10.817c1.511,0.706,3.188,1.112,4.966,1.112
-		c6.491,0,11.752-5.261,11.752-11.751c0-6.491-5.261-11.752-11.752-11.752C53.668,6.35,48.453,11.517,48.355,17.922z M40.656,41.984
-		c6.491,0,11.752-5.262,11.752-11.752s-5.262-11.751-11.752-11.751c-6.49,0-11.754,5.262-11.754,11.752S34.166,41.984,40.656,41.984
-		z M45.641,42.785h-9.972c-8.297,0-15.047,6.751-15.047,15.048v12.195l0.031,0.191l0.84,0.263
-		c7.918,2.474,14.797,3.299,20.459,3.299c11.059,0,17.469-3.153,17.864-3.354l0.785-0.397h0.084V57.833
-		C60.688,49.536,53.938,42.785,45.641,42.785z M65.084,30.653h-9.895c-0.107,3.959-1.797,7.524-4.47,10.088
-		c7.375,2.193,12.771,9.032,12.771,17.11v3.758c9.77-0.358,15.4-3.127,15.771-3.313l0.785-0.398h0.084V45.699
-		C80.13,37.403,73.38,30.653,65.084,30.653z M20.035,29.853c2.299,0,4.438-0.671,6.25-1.814c0.576-3.757,2.59-7.04,5.467-9.276
-		c0.012-0.22,0.033-0.438,0.033-0.66c0-6.491-5.262-11.752-11.75-11.752c-6.492,0-11.752,5.261-11.752,11.752
-		C8.283,24.591,13.543,29.853,20.035,29.853z M30.589,40.741c-2.66-2.551-4.344-6.097-4.467-10.032
-		c-0.367-0.027-0.73-0.056-1.104-0.056h-9.971C6.75,30.653,0,37.403,0,45.699v12.197l0.031,0.188l0.84,0.265
-		c6.352,1.983,12.021,2.897,16.945,3.185v-3.683C17.818,49.773,23.212,42.936,30.589,40.741z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/static/testcover.svg b/static/testcover.svg
new file mode 100644
index 00000000..14aeacf2
--- /dev/null
+++ b/static/testcover.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="master-artboard" viewBox="0 0 1064.9635009765625 1056.2042236328125" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="1064.9635009765625px" height="1056.2042236328125px" enable-background="new 0 0 1400 1400" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="ee-background" x="0" y="0" width="1064.9635009765625" height="1056.2042236328125" style="fill: white; fill-opacity: 0; pointer-events: none;"/>
+
+
+<g transform="matrix(1, 0, 0, 1, -166.42333984375, -260.58391284942627)">
+	<g>
+		<defs>
+			<path d="M 136.600006 320.700012 H 1311.000031 V 1310 H 136.600006 V 320.700012 Z" id="SVGID_1_"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use overflow="visible" xlink:href="#SVGID_1_"/>
+		</clipPath>
+		<g clip-path="url(#SVGID_2_)">
+			<path fill="#67BAB4" d="M1009.2,826.2c0.6,2.2,3.9-1.8,1.7-1.2c-40.6,11.8-82.2,21.4-124.5,22.5s-85.5-6.6-122.3-27.4&#10;&#9;&#9;&#9;&#9;c-16.3-9.2-31.6-21.1-49.8-25.8c-18.2-4.7-40.9,0.4-48.8,17.4c-17.7,37.7-4.4,87.4,17.2,123c29.3,48.1,91.4,63.7,147.6,67.5&#10;&#9;&#9;&#9;&#9;c81.3,5.4,167.9-7.1,232-57.5c5.8-4.5,11.8-10.2,12.2-17.6c0.3-5.1-2.2-9.9-4.7-14.3C1053,882.5,1031.4,852.9,1009.2,826.2z"/>
+			<path fill="#B4FCF5" d="M806.6,992l-11.9-2.3c-1.1-0.2-1.6,1.5-0.5,1.7l11.9,2.3C807.2,993.9,807.7,992.2,806.6,992z"/>
+			<path fill="#E0A94F" d="M935.3,940.6c-13.8,37.4-32.7,73.3-58.9,103.4c-26.2,30.1-60,54.2-98.2,65.4c-21.8,6.4-44.5,8.5-67,11.5&#10;&#9;&#9;&#9;&#9;c-10.7-24.4-22.3-48.3-34.8-71.8c30.7-3.6,62.7-7.7,88.3-25.1c10-6.8,18.7-15.5,26.8-24.4c29.3-32.2,53.3-68.8,76.5-105.7&#10;&#9;&#9;&#9;&#9;c8.3-13.1,16.6-26.4,27.2-37.7c10.6-11.3,23.8-20.7,38.9-24.3c-0.5,0,0.2-1.2,0.6-1.1c0.5,0.1,0.8,0.6,0.9,1.1&#10;&#9;&#9;&#9;&#9;c5.3,14.7,4.3,30.9,1.2,46.1c-3.1,15.3-8.1,30.1-10.7,45.5c-0.6,3.3-1,6.7-0.2,10C926.8,936.7,932,940,935.3,940.6z"/>
+			<path fill="#EDBB5F" d="M1218.7,1331.7c17.9-53.6-9.6-194.4-9.2-212.6c1.4-58.8-13.5-101.7-21.8-159.9&#10;&#9;&#9;&#9;&#9;c-2.5-17.4-5.4-34.7-11.1-51.3c-4.5-13.1-10.7-25.6-17.2-37.8c-10.5-19.8-21.9-39.4-38.1-54.8c-28.2-26.9-69.3-38.4-108.1-34.3&#10;&#9;&#9;&#9;&#9;c0.5-5.1-0.1-8.3-3.9-11.9c-9,2.8-17.7,6.3-26.1,10.5c-6.9,3.5-13.6,7.4-20.7,10.5c-12.3,5.3-27.7,9-41.2,8.4&#10;&#9;&#9;&#9;&#9;c-26.8,48.1-33.8,104.4-38.7,159.2c-8,90.6-17.9,266.7-16.7,357.7c2.1-2.3,28.1,36.8,26.6,34.1c15.9,23.9,33.4-19.6,61.3-13&#10;&#9;&#9;&#9;&#9;c28,6.6,61.5,6.6,90.1,3.2c19.4-2.3,35,11.1,52,1.6c18.9-10.5,30.7,8.6,52,4.9c7.9-1.4,19-13.9,26.9-14.6&#10;&#9;&#9;&#9;&#9;c8-0.8,18.4,31.4,23.3,25.1C1204.1,1349.3,1212.8,1338.9,1218.7,1331.7z"/>
+			<path fill="#ED9A7A" d="M972.6,868.7c17.5,2.4,37.9,0.1,48.5-14.1c8.1-10.9,8.2-25.6,7.8-39.2c-0.7-31.3-1.5-62.6-2.2-94&#10;&#9;&#9;&#9;&#9;c-30.6,1.8-59.7,20-74.8,46.7c-2.9,5.1-7.4,11.5-13,9.6c-0.7,16.4-1.4,32.7-2.1,49.1c-0.3,8-0.6,16.5,3,23.6&#10;&#9;&#9;&#9;&#9;C945.7,862.1,959.7,866.9,972.6,868.7z"/>
+			<path fill="#EEE1CE" d="M946.8,650.8c-10.5-15.8-23.6-30-38.5-41.8c-10.8-8.5-23.6-16.1-37.3-15c-7.7,0.6-14.8,4-21.3,8.1&#10;&#9;&#9;&#9;&#9;c-11.1,7-21.1,17-24.8,29.7s0.8,28.1,12.4,34.4c-17.4,12.6-16.4,43.4,1.9,54.8c-10.4,12.3-8.1,33.2,4.8,42.9&#10;&#9;&#9;&#9;&#9;c-8.6,21.2,9.5,46.6,32.1,50.5c22.5,3.9,45.3-9.5,58.8-28c13.4-18.5,19.1-41.4,23.4-63.9c2.8-14.5,5.1-29.5,1.7-43.8&#10;&#9;&#9;&#9;&#9;C957.6,668.6,952.5,659.4,946.8,650.8z"/>
+			<path fill="#EEE1CE" d="M1083.8,618.7c4.1,1.3,8.4-0.8,12.4-2.4c12-4.6,26.5-3.9,36.6,4c10.1,7.9,13.9,23.8,6.5,34.3&#10;&#9;&#9;&#9;&#9;c10.1-5.3,24.3,0.3,28.1,11.1s-4,24-15.3,26c11.7,0.3,22.3,10.7,22.9,22.4s-8.9,23-20.5,24.6c13.7,5.6,20.7,23.7,14.4,37.1&#10;&#9;&#9;&#9;&#9;c-6.3,13.4-24.7,19.6-37.8,12.6c8.1,8.1,5,23.3-4.4,29.8s-22.6,5.3-32.6-0.4c-3,8.8-12.1,15.1-21.4,14.7&#10;&#9;&#9;&#9;&#9;c-9.3-0.4-17.9-7.4-20.2-16.4c-7.4,6.9-20.4,3.2-26.6-4.8c-6.2-8.1-7.4-18.7-8.3-28.9c-4.4-50.4-5.6-103.9,18.2-148.6&#10;&#9;&#9;&#9;&#9;c4-7.5,8.9-14.9,16.1-19.5s17.1-5.8,24.1-0.9C1078.7,615.3,1080.8,617.8,1083.8,618.7z"/>
+			<path fill="#F4A987" d="M287.2,758.3c-0.3,0.6,0.9,0.1,0.9-0.6c0-7.6-2.6-14.9-3.8-22.4c-2.1-12.4-0.4-25.2,2.1-37.5&#10;&#9;&#9;&#9;&#9;c2.4-12.3,5.6-24.7,3.9-37.1c-0.2-1.3-0.5-2.7-1.6-3.5c-0.8-0.6-1.8-0.7-2.8-0.6c-4.6,0.4-8,4.2-11.8,6.9s-9.7,4-12.5,0.3&#10;&#9;&#9;&#9;&#9;c-0.8-1.1-1.2-2.4-1.5-3.7c-1.4-5.1-2.8-10.1-3.6-15.3c-1.5-9.2-1.2-18.7-2.7-28c-1.1-6.7-3.1-13.2-5.9-19.4&#10;&#9;&#9;&#9;&#9;c-5.3-11.3-14.9-21.9-27.3-22.7c-8.7-0.5-17,3.9-23.6,9.7c-15.4,13.4-23.3,34-24.6,54.3c-1.2,20.4,3.7,40.7,10.7,59.8&#10;&#9;&#9;&#9;&#9;c5.3,14.3,11.9,28.4,22.1,39.7c6.8,7.5,12.8,16,19.6,23.5c6.8,7.5,14.9,14.2,24.6,17.1c9.7,2.9,21.1,1.5,28.4-5.4&#10;&#9;&#9;&#9;&#9;C282.3,769.2,285.8,764.3,287.2,758.3z"/>
+			<path fill="#7CCFCB" d="M367.1,1382.1c-12.3-91.7,15.7-297.4,24.5-369.5c7.1-58.5,17.3-117.6,42.9-170.6s68.8-100,124.8-118.4&#10;&#9;&#9;&#9;&#9;c6.4,20.5,15.8,44,34,55.4c34.1,21.4,89.1-4.9,114.1,26.6c8.8,11.1,10.4,26.2,11.6,40.4c6.1,68.1,28.7,133.3,37.2,201.2&#10;&#9;&#9;&#9;&#9;c13.3,105.6,25.1,320.1,82.1,357.9c-22.1,39-14.7-63.7-48.9-34.6c-33.9,28.8-72,56.7-116.3,61.1c-32,3.2-64.1-3.7-95.5-10.5&#10;&#9;&#9;&#9;&#9;c-39.2-8.5-78.9-17.1-114.8-35.1S372.4,1421.9,367.1,1382.1z"/>
+			<path fill="#9CE2DD" d="M652.5,830.1c-24.3,4.3-50.6,6.2-72.6-5c-6-3.1-11.7-7.3-14.6-13.3c-3.1-6.3-2.8-13.7-4.1-20.6&#10;&#9;&#9;&#9;&#9;c-1.8-9.1-6.4-17.3-8.7-26.3c-1.5-6.2-1.9-12.7-2.9-19c-0.9-5.3-2.3-10.8-6-14.9c-3.6-4-9.9-6.1-14.6-3.5&#10;&#9;&#9;&#9;&#9;c-3.3,1.9-5.3,5.6-5.9,9.4s-0.1,7.6,0.4,11.4c3.2,25.2,4.3,51.2,14.6,74.4c2.4,5.5,5.3,10.7,8.4,15.8c2.4,4.1,4.9,8.1,8.3,11.4&#10;&#9;&#9;&#9;&#9;c3.4,3.4,7.7,6,12.1,7.9c11.9,5.3,25.2,6.7,38.2,7.4c12.6,0.7,25.4,0.7,37.8-1.7c12.4-2.4,24.5-7.5,33.8-16&#10;&#9;&#9;&#9;&#9;c12.3-11.4,18.6-27.9,22.4-44.2c0.8-3.6,1.6-7.4,0.6-11c-1-3.6-4.1-6.9-7.8-6.7c-5,0.2-7.7,5.6-9.4,10.3&#10;&#9;&#9;&#9;&#9;c-1.7,4.7-3.5,9.4-5.2,14.1c-1.8,4.8-3.7,9.9-7.4,13.4C665.2,827.6,658.7,829,652.5,830.1z"/>
+			<path fill="#ED9A7A" d="M624.4,844.9c18.5-0.7,38.6-4.2,51.2-17.7c18.2-19.4,13.8-50.1,8.2-76.1c-1.5-7.1-3.1-14.3-4.6-21.4&#10;&#9;&#9;&#9;&#9;c-19.7-4.8-39.6-9.6-57.8-18.6c-18.2-9-34.7-22.6-43.5-40.9c-5.5-11.4-7.8-24.5-15.5-34.6c-8.1-10.7-21.9-16.8-35.2-15.6&#10;&#9;&#9;&#9;&#9;c3.5,42.1,7.1,84.2,10.6,126.4c1.4,16.9,2.9,33.9,8.3,50s15.2,31.2,29.8,39.8C590.3,844.4,607.8,845.5,624.4,844.9z"/>
+			<path fill="#F4A987" d="M745.9,453.5c26.9,57.4,39.9,121.3,37.5,184.6c-1,28-5.4,56.9-20.9,80.2c-22.7,34.1-67.7,50.1-108,42.9&#10;&#9;&#9;&#9;&#9;c-40.4-7.2-75.4-35.2-96.1-70.7c-10.2-17.5-17.4-37.3-17.1-57.5l-0.1-4c-15.4,5.7-33.9,1.3-45.1-10.7&#10;&#9;&#9;&#9;&#9;c-11.2-12-14.3-30.8-7.6-45.7c3.1-6.9,8.3-13.1,15.3-16c7-2.9,15.8-1.8,21.1,3.6c7-47.2,37.9-90.1,80.6-111.1&#10;&#9;&#9;&#9;&#9;c31-15.2,67.4-19.1,101-10.8C718.7,441.4,734.9,447.6,745.9,453.5z"/>
+			<path fill="#F4A987" d="M872.3,535.8c-24.1,51.5-35.8,108.8-33.7,165.6c0.9,25.1,4.8,51.1,18.7,72c20.4,30.6,60.7,45,96.9,38.5&#10;&#9;&#9;&#9;&#9;c36.2-6.5,67.6-31.6,86.2-63.4c9.2-15.7,15.6-33.5,15.3-51.6l0.1-3.6c13.8,5.1,30.5,1.2,40.5-9.6s12.8-27.6,6.8-41&#10;&#9;&#9;&#9;&#9;c-2.8-6.2-7.5-11.8-13.8-14.3s-14.2-1.6-18.9,3.3c-6.3-42.3-34-80.9-72.4-99.7c-27.8-13.7-60.5-17.1-90.6-9.7&#10;&#9;&#9;&#9;&#9;C896.7,524.9,882.2,530.5,872.3,535.8z"/>
+			<path fill="#EEE1CE" d="M744.9,410.5c4.6-6.9,8.3-14.5,11-22.4c1.1-3.4-2.2-6.6-5.5-5.2c-19.5,7.8-42.4,5.2-63.7,2.2&#10;&#9;&#9;&#9;&#9;c-20.6-2.9-41.2-5.8-61.8-8.7c-19.8-2.8-40.4-5.6-59.7,0.1c-15.4,4.5-29.8,15.9-35.1,30.6c-5.7-0.5-11.3,0-16.6,2.4&#10;&#9;&#9;&#9;&#9;c-9.9,4.4-16.3,14-21.2,23.6c-19.7,38.4-22.6,85-8,125.6c5.5,15.3,14.8,31,30.1,36.5c19.2,7,41.2-5.2,51.9-22.5&#10;&#9;&#9;&#9;&#9;c10.7-17.4,12.7-38.6,13.9-59c0.6-11.6,1.1-23.4,0.4-35.1c1,0.1,1.9-0.1,2.8-0.6c42.6,20.5,93,24.1,138,9.8&#10;&#9;&#9;&#9;&#9;c11.2-3.5,22.2-8.3,30.9-16.1c14.8-13.5,20.3-33.9,22.5-54c0.3-3.1-2.8-5.6-5.7-4.4c-6.2,2.6-13.3,3.6-20.3,4.1&#10;&#9;&#9;&#9;&#9;C745.1,417.5,742.9,413.5,744.9,410.5z"/>
+			<path fill="#F2895F" d="M890,724.9c6.7,1.9,14,2.1,20.8,0.5c1.6-0.4,3.3-0.9,4.6-1.9c2.9-2.3,3.2-6.5,3-10.2&#10;&#9;&#9;&#9;&#9;c-0.5-13.4-4.1-27.6-13.1-37.2c-1.8-1.9-5.1-1.2-6.1,1.2c-4.9,12.6-9.3,25.3-13.3,38.2c-0.7,2.4-1.4,5.2,0.1,7.1&#10;&#9;&#9;&#9;&#9;C887,723.9,888.5,724.5,890,724.9z"/>
+			<path fill="#EEE1CE" d="M760.2,647.3c-21.5-5.8-45-4.2-65.4,4.9c-11.7,5.2-22.5,12.7-35.1,15.2c-17.5,3.5-36.7-4.4-46.7-19.1&#10;&#9;&#9;&#9;&#9;c-4-5.8-6.6-12.5-9.9-18.7c-7.1-13.2-19.2-25.1-34.1-26.4c-13.6-1.2-24.9,13.6-28.1,26.2c0.2-0.1,0.3-0.1,0.5-0.2l0.1,4&#10;&#9;&#9;&#9;&#9;c-0.3,20.3,6.9,40.1,17.1,57.5c20.7,35.4,55.7,63.5,96.1,70.7c40.4,7.2,85.3-8.8,108-42.9c15.1-22.7,19.6-50.9,20.8-78.2&#10;&#9;&#9;&#9;&#9;C777.4,646.5,768.7,649.6,760.2,647.3z"/>
+			<path fill="#67BAB4" d="M463.3,768.7c11.9-1.1,24.1-0.3,35.3,4c35.8,13.6,50.4,59.7,40.3,96.7c-10,37-38.2,66.1-67,91.3&#10;&#9;&#9;&#9;&#9;C446.4,983,419,1004,387.3,1016s-68.4,14-98.8-1.1c-35-17.4-56.2-54-70.3-90.4c-23.8-61.4-33.6-128.2-28.4-193.8&#10;&#9;&#9;&#9;&#9;c33.9-2.2,67.7-4.3,101.6-6.5c5.4,33.1,15.9,65.4,30.8,95.4c6.9,13.9,17.1,28.9,32.6,30.3c13.6,1.2,25.8-9,33.3-20.4&#10;&#9;&#9;&#9;&#9;s12.3-24.6,21-35.2C422.2,778.5,442.8,770.6,463.3,768.7z"/>
+			<path fill="#EEE1CE" d="M920.9,489.7c3.6,3.2,6.7,7.1,7.7,11.8c1,4.5,0,9.1-1.2,13.6c-11.3,43.8-34.7,84.5-66.8,116.4&#10;&#9;&#9;&#9;&#9;c-7.4,7.3-19.1,14.4-27.3,7.9c-3.4-2.7-4.9-7.1-6.1-11.2c-7-24.3-8.4-50.2-4.2-75.1c3.9-23.4,13.6-47,32.3-61.6&#10;&#9;&#9;&#9;&#9;S903.1,474,920.9,489.7z"/>
+			<path fill="#EEE1CE" d="M976.4,472.8c0,0-44.5,5.3-56.9,34.7c-12.5,29.4,13.3,94.3,63.2,128.1c49.8,33.8,102.3,1.8,120.1-19.6&#10;&#9;&#9;&#9;&#9;S1115.2,463.9,976.4,472.8z"/>
+			<path fill="#56493D" d="M954,715.5c-25.7,0-46.7-22.1-46.7-49.2s20.9-49.2,46.7-49.2c25.7,0,46.7,22.1,46.7,49.2&#10;&#9;&#9;&#9;&#9;S979.7,715.5,954,715.5z M954,624.3c-21.8,0-39.5,18.9-39.5,42.1s17.7,42.1,39.5,42.1s39.5-18.9,39.5-42.1S975.8,624.3,954,624.3&#10;&#9;&#9;&#9;&#9;z"/>
+			<path fill="#F4A987" d="M992.5,1157.2c-2.6,1.7-3.4,5-3.5,8.1c-0.4,8.8,3.4,17.7,9.9,23.7c-9.9,3.7-20.6,6.1-31.1,5.2&#10;&#9;&#9;&#9;&#9;c-15.5-1.5-29.3-10.1-44.4-13.9c-7.2-1.8-16.9-1.3-19.2,5.8c-1.4,4.3,0.9,9,3.6,12.6c18.5,25.6,53.4,32.7,84.9,33.2&#10;&#9;&#9;&#9;&#9;c14.7,0.2,29.8-0.6,43.5-5.9s26.1-15.9,30.4-30c0.9-2.8,1.4-5.9,0.7-8.8c-1.5-6-8.1-11-6.4-17c-20.7,2.8-40.2-9.9-60.8-13.5&#10;&#9;&#9;&#9;&#9;C997.6,1156,994.7,1155.8,992.5,1157.2z"/>
+			<path fill="#E0A94F" d="M1181.3,891.8c-9.8-20.4-21.8-40.4-39.1-55c-17.3-14.6-40.9-23.2-63-18.3c-22.1,4.9-41.2,25.4-40,48.1&#10;&#9;&#9;&#9;&#9;c2,38.3,19.1,73.3,41.1,104.7c6.2,8.9,13.1,17.4,19.1,26.4c6.7,9.9,12.4,20.5,18.1,31c3.4,6.3,6.8,12.6,8.7,19.5&#10;&#9;&#9;&#9;&#9;c4.9,18.2-1.8,37.8-12.3,53.4c-17.8,26.5-47,44.8-78.4,50.1c0.6,2.7,1,5.4,1.5,8.1c3.8,21.1,12.5,41,22.2,60.1&#10;&#9;&#9;&#9;&#9;c0.4,0.8,0.8,1.6,1.2,2.5c28-6.6,55.6-15.1,80.7-29c30-16.7,56.4-42,68.4-74.1c7.3-19.3,9.1-40.3,9.2-61&#10;&#9;&#9;&#9;&#9;C1219,1000.8,1206.1,943.4,1181.3,891.8z"/>
+			<path fill="#F4A987" d="M1097.5,912.4c21.3-1.3,35.3-22.8,42.3-42.9c3.4-9.8,6.1-19.9,7.9-30.1c2.1-11.8-3.9-23.5-14.6-28.9&#10;&#9;&#9;&#9;&#9;c-19.2-9.8-40.9-14.8-62.5-14.5c-13.8,0.2-25.4,11.1-26.3,24.9c-1.2,17.8,1.4,35.8,7.6,52.5&#10;&#9;&#9;&#9;&#9;C1059.4,893.4,1076.1,913.6,1097.5,912.4z"/>
+			<path fill="#7C582C" d="M617.5,550.5c-0.4,0-0.8-0.1-1.2-0.2c-1.9-0.7-2.8-2.7-2.2-4.5c2.6-7.4,8.5-13.5,15.8-16.5&#10;&#9;&#9;&#9;&#9;c6.4-2.6,13.8-2.7,20.3-0.3c0.9,0,1.8,0.2,2.5,0.9l0.8,0.7c1.3,1.2,1.6,3.2,0.6,4.6c-1,1.5-2.9,2-4.5,1.2&#10;&#9;&#9;&#9;&#9;c-5.3-2.6-11.6-2.8-17-0.6c-5.4,2.2-9.8,6.8-11.8,12.3C620.4,549.6,619,550.5,617.5,550.5z"/>
+			<path fill="#7C582C" d="M756.8,529.4c-0.8,0-1.7-0.3-2.4-0.9c-6.8-6.1-17.3-7.7-25.6-3.9c-1.8,0.8-3.9,0-4.7-1.8&#10;&#9;&#9;&#9;&#9;c-0.8-1.8,0-3.9,1.8-4.7c10.8-4.9,24.5-2.8,33.3,5.1c1.5,1.3,1.6,3.6,0.3,5C758.7,529,757.8,529.4,756.8,529.4z"/>
+			<path fill="#7C582C" d="M639.9,582c-1.4,0-2.8-0.9-3.3-2.3c-1.7-4.7-0.9-10.3,2.2-14.3c3.5-4.5,9.7-6.8,15.5-5.6&#10;&#9;&#9;&#9;&#9;c5.5,1.1,10.2,5.2,12.3,10.6c0.7,1.8-0.2,3.9-2,4.6c-1.8,0.7-3.9-0.2-4.6-2c-1.2-3.1-4-5.5-7.1-6.2c-3.1-0.6-6.6,0.6-8.4,3&#10;&#9;&#9;&#9;&#9;c-1.6,2.1-2,5.1-1.1,7.5c0.7,1.8-0.3,3.9-2.1,4.6C640.7,581.9,640.3,582,639.9,582z"/>
+			<path fill="#7C582C" d="M727.4,569.2c-1.8,0-3.4-1.4-3.5-3.2c-0.5-5,1.8-10.2,5.9-13.2c4.6-3.5,11.2-4,16.4-1.4&#10;&#9;&#9;&#9;&#9;c5,2.5,8.5,7.7,9.1,13.4c0.2,2-1.2,3.7-3.2,3.9c-2,0.2-3.7-1.2-3.9-3.2c-0.4-3.3-2.4-6.4-5.2-7.8c-2.8-1.4-6.5-1.1-8.9,0.7&#10;&#9;&#9;&#9;&#9;c-2.1,1.6-3.3,4.4-3.1,6.9c0.2,2-1.3,3.7-3.2,3.9C727.6,569.2,727.5,569.2,727.4,569.2z"/>
+			<path fill="#7C582C" d="M874.6,670c-1.9,0-3.5-1.5-3.6-3.4c-0.2-3.3-2.1-6.5-4.8-8.1c-2.7-1.6-6.4-1.5-8.9,0.2&#10;&#9;&#9;&#9;&#9;c-2.1,1.5-3.5,4.2-3.4,6.8c0.1,2-1.5,3.6-3.4,3.7c-2,0.1-3.6-1.5-3.7-3.4c-0.2-5,2.4-10.1,6.6-12.9c4.7-3.2,11.4-3.4,16.4-0.5&#10;&#9;&#9;&#9;&#9;c4.9,2.8,8.1,8.1,8.4,13.9c0.1,2-1.4,3.6-3.4,3.7C874.7,670,874.6,670,874.6,670z"/>
+			<path fill="#7C582C" d="M960.9,673.8c-1.9,0-3.5-1.5-3.6-3.4c-0.2-3.3-2.1-6.5-4.8-8.1c-2.7-1.6-6.4-1.5-8.9,0.2&#10;&#9;&#9;&#9;&#9;c-2.1,1.5-3.5,4.2-3.4,6.8c0.1,2-1.5,3.6-3.4,3.7c-2,0.1-3.6-1.5-3.7-3.4c-0.2-5,2.4-10.1,6.6-12.9c4.7-3.2,11.4-3.4,16.4-0.5&#10;&#9;&#9;&#9;&#9;c4.9,2.8,8.1,8.1,8.4,13.9c0.1,2-1.4,3.6-3.4,3.7C961,673.7,961,673.8,960.9,673.8z"/>
+			<path fill="#F4A987" d="M753.2,678.8c-0.9-3.7-4-6.4-7.8-7.1c-12.7-2.1-26.1,1.1-38.8,4.4c-7.4,1.9-14.8,3.8-22.1,5.7&#10;&#9;&#9;&#9;&#9;c-7,1.8-11.8,8.4-10.8,15.5c0,0.1,0,0.1,0,0.2c1.8,12.6,2.6,13.1,6.7,19.6c1.2,1.4,2.6,2.7,4.1,3.8c5.6,4.2,12.6,5.9,19.5,6.6&#10;&#9;&#9;&#9;&#9;c12.1,1.2,24.9-0.8,34.7-7.9C751,710.5,756.8,693.6,753.2,678.8z"/>
+			<path fill="#F2895F" d="M729.1,621.4c-6.8,3.6-14.5,5.5-22.3,5.4c-1.8,0-3.7-0.2-5.4-1c-3.6-1.8-4.9-6.3-5.6-10.3&#10;&#9;&#9;&#9;&#9;c-2.6-14.7-2.1-30.9,5.6-43.4c1.5-2.4,5-2.4,6.5-0.1c8.3,12.5,16.1,25.2,23.4,38.3c1.3,2.4,2.7,5.2,1.5,7.7&#10;&#9;&#9;&#9;&#9;C732.2,619.7,730.6,620.6,729.1,621.4z"/>
+			<path fill="#FFFFFF" d="M746.8,672.1c-0.5-0.1-0.9-0.3-1.4-0.3c-12.7-2.1-26.1,1.1-38.8,4.4c-7.4,1.9-14.8,3.8-22.1,5.7&#10;&#9;&#9;&#9;&#9;c-1.6,0.4-3,1.1-4.3,1.9c4.2,5.3,11.1,8.5,17.8,10.4c11.7,3.4,25.3,3.9,35.3-3.2c3.1-2.3,5.8-5.2,8-8.4&#10;&#9;&#9;&#9;&#9;C743.4,679.3,745.3,675.8,746.8,672.1z"/>
+			<path fill="#56493D" d="M891.7,658.7c-0.6-1.3-0.6-2.7,0.1-3.9c1.1-1.9,3.6-3,5.6-3.2c4.4-0.4,9,0.2,13.1,1.8l-1.9,5&#10;&#9;&#9;&#9;&#9;c-3.4-1.3-7.1-1.8-10.8-1.5c-0.7,0.1-1.3,0.4-1.5,0.6c0.2-0.2,0.3-0.7,0.1-1.1L891.7,658.7z"/>
+			<path fill="#56493D" d="M997.1,651.6c-2.4,0-4.7-1.4-5.7-3.7c-1.4-3.1,0-6.8,3.2-8.2c14.3-6.3,33.2-13.8,53.2-15.5&#10;&#9;&#9;&#9;&#9;c21.2-1.8,40.7,3.3,55.1,14.3c2.7,2.1,3.2,6,1.1,8.7c-2.1,2.7-6,3.2-8.7,1.1c-11.9-9.1-28.3-13.3-46.4-11.7&#10;&#9;&#9;&#9;&#9;c-18,1.5-35,8.2-49.2,14.5C998.8,651.4,997.9,651.6,997.1,651.6z"/>
+			<path fill="#FFFFFF" d="M957.6,768c-5.6,6-12.6,8.3-19.5,9.6c-7.7,1.4-15.7,1.5-22.8-2.8c-7.1-4.3-13.2-13.8-13.7-25.1&#10;&#9;&#9;&#9;&#9;c22.4-3.6,44.9-5,67.4-4.1C966.4,754.2,962.8,762.4,957.6,768z"/>
+			<path fill="#AA9987" d="M570.1,629.2c-0.6-1.7-1.3-3.3-2.4-4.7c-0.6-0.8-1.5-1.2-2.4-0.6c-0.8,0.5-1.2,1.6-0.6,2.4&#10;&#9;&#9;&#9;&#9;c0.9,1.2,1.5,2.5,2,3.8C567.4,632.3,570.8,631.4,570.1,629.2z"/>
+			<path fill="#AA9987" d="M586.6,633.9c-0.1-1-0.7-1.8-1.8-1.8c-0.9,0-1.9,0.8-1.8,1.8c0.2,1.8,0.5,3.6,0.7,5.3&#10;&#9;&#9;&#9;&#9;c0.1,1,0.7,1.8,1.8,1.8c0.9,0,1.9-0.8,1.8-1.8C587.1,637.4,586.9,635.6,586.6,633.9z"/>
+			<path fill="#AA9987" d="M559.8,647.7c-0.6-1.4-1.1-2.8-1.7-4.2c-0.4-0.9-1.2-1.5-2.2-1.2c-0.9,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.6,1.4,1.1,2.8,1.7,4.2c0.4,0.9,1.2,1.5,2.2,1.2C559.4,649.7,560.1,648.6,559.8,647.7z"/>
+			<path fill="#AA9987" d="M565.7,668.6c-1.2-2-2.4-3.9-3.6-5.9c-1.2-2-4.3-0.2-3.1,1.8c1.2,2,2.4,3.9,3.6,5.9&#10;&#9;&#9;&#9;&#9;C563.8,672.3,566.9,670.5,565.7,668.6z"/>
+			<path fill="#AA9987" d="M579,653.6c-0.4-1.2-0.9-2.4-1.3-3.5c-0.3-0.9-1.2-1.5-2.2-1.2c-0.9,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.4,1.2,0.9,2.4,1.3,3.5c0.3,0.9,1.2,1.5,2.2,1.2C578.6,655.5,579.3,654.5,579,653.6z"/>
+			<path fill="#AA9987" d="M588.3,676.9c-0.6-1.4-1.3-2.7-1.9-4.1c-0.4-0.9-1.7-1.1-2.4-0.6c-0.9,0.5-1.1,1.6-0.6,2.4&#10;&#9;&#9;&#9;&#9;c0.6,1.4,1.3,2.7,1.9,4.1c0.4,0.9,1.7,1.1,2.4,0.6C588.5,678.8,588.7,677.7,588.3,676.9z"/>
+			<path fill="#AA9987" d="M606.9,667.8c-0.6-1.6-1.3-3.1-1.9-4.7c-0.4-0.9-1.2-1.5-2.2-1.2c-0.9,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.6,1.6,1.3,3.1,1.9,4.7c0.4,0.9,1.2,1.5,2.2,1.2C606.5,669.7,607.2,668.7,606.9,667.8z"/>
+			<path fill="#AA9987" d="M581.2,698.2c-0.6-1.4-0.9-2.9-1-4.4c-0.1-2.3-3.7-2.3-3.6,0c0.1,2.2,0.6,4.2,1.5,6.2&#10;&#9;&#9;&#9;&#9;c0.4,0.9,1.7,1.1,2.4,0.6C581.5,700.1,581.6,699.1,581.2,698.2z"/>
+			<path fill="#AA9987" d="M603.4,701.4c-1.1-1.3-1.7-2.9-1.9-4.6c-0.1-1-1.3-1.5-2.2-1.2c-1,0.3-1.4,1.2-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.3,2.3,1.4,4.4,2.8,6.1c0.6,0.8,1.9,0.6,2.5,0C604.2,703.2,604,702.2,603.4,701.4z"/>
+			<path fill="#AA9987" d="M620.8,680.3c-0.1-0.2-0.3-0.4-0.4-0.6c0-0.1-0.1-0.1-0.1-0.1c0.1-0.8-0.5-1.6-1.3-1.8&#10;&#9;&#9;&#9;&#9;c-1-0.3-1.9,0.3-2.2,1.2c-0.2,0.7-0.2,1.4,0.2,2c0,0,0,0,0,0c-0.2,0.6-0.2,1.2,0.1,1.7c0.6,0.9,1.4,1.3,2.4,1.1&#10;&#9;&#9;&#9;&#9;c1.1-0.2,1.6-1.3,1.6-2.3C621.2,681.2,621,680.7,620.8,680.3z"/>
+			<path fill="#AA9987" d="M622.7,707.1c-0.8-1.1-1.4-2.4-1.6-3.8c-0.1-1-0.7-1.8-1.8-1.8c-0.9,0-1.9,0.8-1.8,1.8&#10;&#9;&#9;&#9;&#9;c0.2,2,0.9,3.9,2.1,5.6c0.6,0.8,1.5,1.2,2.4,0.6C622.9,709,623.3,707.8,622.7,707.1z"/>
+			<path fill="#AA9987" d="M606.1,726.1c-1.1-2.3-1.8-4.7-2.3-7.3c-0.4-2.3-3.8-1.3-3.4,0.9c0.5,2.8,1.4,5.5,2.6,8.1&#10;&#9;&#9;&#9;&#9;C604,729.9,607.1,728.1,606.1,726.1z"/>
+			<path fill="#AA9987" d="M624.7,732.4c-0.7-1.7-1.4-3.5-2.1-5.2c-0.4-0.9-1.2-1.5-2.2-1.2c-0.9,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.7,1.7,1.4,3.5,2.1,5.2c0.4,0.9,1.2,1.5,2.2,1.2C624.3,734.4,625.1,733.3,624.7,732.4z"/>
+			<path fill="#AA9987" d="M644.2,713.4c-1-0.8-1.9-1.8-2.4-2.9c-0.4-0.9-1.2-1.5-2.2-1.2c-0.8,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.7,1.8,1.8,3.3,3.3,4.5c0.8,0.6,1.8,0.8,2.5,0C644.9,715.3,645,714,644.2,713.4z"/>
+			<path fill="#AA9987" d="M647.6,689.3c-0.7-1.4-1-2.9-0.9-4.5c0.1-2.3-3.4-2.3-3.6,0c-0.1,2.2,0.4,4.3,1.4,6.3&#10;&#9;&#9;&#9;&#9;C645.5,693.2,648.6,691.4,647.6,689.3z"/>
+			<path fill="#AA9987" d="M645.5,739c-1.1-2.3-2.1-4.7-3.2-7c-0.9-2.1-4-0.3-3.1,1.8c1.1,2.3,2.1,4.7,3.2,7&#10;&#9;&#9;&#9;&#9;C643.4,742.9,646.4,741.1,645.5,739z"/>
+			<path fill="#AA9987" d="M664.8,723.1c-1-1.8-1.9-3.6-2.9-5.4c-1.1-2-4.2-0.2-3.1,1.8c1,1.8,1.9,3.6,2.9,5.4&#10;&#9;&#9;&#9;&#9;C662.9,726.9,665.9,725.1,664.8,723.1z"/>
+			<path fill="#AA9987" d="M666.9,698.6c-0.6-2-1-3.9-1.1-6c-0.1-2.3-3.7-2.3-3.6,0c0.1,2.4,0.5,4.7,1.2,6.9&#10;&#9;&#9;&#9;&#9;C664.2,701.7,667.7,700.8,666.9,698.6z"/>
+			<path fill="#AA9987" d="M689.1,669.2c-0.6-1.4-1.3-2.7-1.9-4.1c-0.4-0.9-1.7-1.1-2.4-0.6c-0.9,0.5-1.1,1.6-0.6,2.4&#10;&#9;&#9;&#9;&#9;c0.6,1.4,1.3,2.7,1.9,4.1c0.4,0.9,1.7,1.1,2.4,0.6C689.3,671.1,689.5,670,689.1,669.2z"/>
+			<path fill="#AA9987" d="M712.9,662c-0.8-1.2-1.2-2.5-1-4c0.2-1-0.2-1.9-1.2-2.2c-0.9-0.2-2,0.3-2.2,1.2c-0.4,2.4,0,4.7,1.3,6.7&#10;&#9;&#9;&#9;&#9;C711.1,665.7,714.1,663.9,712.9,662z"/>
+			<path fill="#AA9987" d="M738.9,659c-0.4-1.4-0.8-2.8-1.2-4.1c-0.6-2.2-4.1-1.3-3.4,0.9c0.4,1.4,0.8,2.8,1.2,4.1&#10;&#9;&#9;&#9;&#9;C736.1,662.1,739.6,661.2,738.9,659z"/>
+			<path fill="#AA9987" d="M761.7,660.5v5.9c0,2.3,3.6,2.3,3.6,0v-5.9C765.3,658.2,761.7,658.2,761.7,660.5z"/>
+			<path fill="#AA9987" d="M769.9,681.9c-1,0-1.7,0.8-1.8,1.8c-0.2,1.8-0.4,3.6-0.5,5.3c-0.1,1,0.9,1.8,1.8,1.8c1,0,1.7-0.8,1.8-1.8&#10;&#9;&#9;&#9;&#9;c0.2-1.8,0.4-3.6,0.5-5.3C771.8,682.7,770.8,681.9,769.9,681.9z"/>
+			<path fill="#AA9987" d="M758.1,708.7c-0.5,2-1.1,4-1.6,6c-0.6,2.2,2.8,3.2,3.4,0.9c0.5-2,1.1-4,1.6-6&#10;&#9;&#9;&#9;&#9;C762.1,707.4,758.7,706.4,758.1,708.7z"/>
+			<path fill="#AA9987" d="M738.6,729.3c-0.2-2.3-3.7-2.3-3.6,0c0.1,1.6-0.2,3-1,4.4c-1.2,2,1.9,3.8,3.1,1.8&#10;&#9;&#9;&#9;&#9;C738.3,733.7,738.8,731.5,738.6,729.3z"/>
+			<path fill="#AA9987" d="M713.6,741.3c-0.9-0.2-2,0.3-2.2,1.2c-0.2,1.2-0.5,2.4-0.7,3.5c-0.2,0.9,0.3,1.9,1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.9,0.2,2-0.3,2.2-1.2c0.2-1.2,0.5-2.4,0.7-3.5C715,742.5,714.6,741.5,713.6,741.3z"/>
+			<path fill="#AA9987" d="M688.7,736.6c-0.6-1.6-1.2-3.2-1.8-4.7c-0.3-0.9-1.2-1.5-2.2-1.2c-0.9,0.2-1.6,1.3-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.6,1.6,1.2,3.2,1.8,4.7c0.3,0.9,1.2,1.5,2.2,1.2C688.3,738.5,689.1,737.5,688.7,736.6z"/>
+			<path fill="#F99573" d="M858,706.6c-19,0-19,29.5,0,29.5S877.1,706.6,858,706.6z"/>
+			<path fill="#AA9987" d="M664.4,757.3c-0.5-1.8-0.9-3.5-1.4-5.3c-0.6-2.2-4-1.3-3.4,0.9c0.5,1.8,0.9,3.5,1.4,5.3&#10;&#9;&#9;&#9;&#9;C661.6,760.5,665,759.6,664.4,757.3z"/>
+			<path fill="#AA9987" d="M691.9,759.1c-0.6-2-1.3-3.9-1.9-5.9c-0.7-2.2-4.1-1.2-3.4,0.9c0.6,2,1.3,3.9,1.9,5.9&#10;&#9;&#9;&#9;&#9;C689.2,762.2,692.6,761.2,691.9,759.1z"/>
+			<path fill="#AA9987" d="M635.5,753.7c-0.8-2.5-1.3-5.1-1.4-7.8c-0.1-2.3-3.6-2.3-3.6,0c0.1,3,0.6,5.9,1.5,8.7&#10;&#9;&#9;&#9;&#9;C632.8,756.8,636.2,755.9,635.5,753.7z"/>
+			<path fill="#AA9987" d="M563.1,691.5c-0.3-1.8-0.5-3.5-0.8-5.3c-0.1-1-1.3-1.5-2.2-1.2c-1,0.3-1.4,1.2-1.2,2.2&#10;&#9;&#9;&#9;&#9;c0.3,1.8,0.5,3.5,0.8,5.3c0.1,1,1.3,1.5,2.2,1.2C562.8,693.4,563.2,692.5,563.1,691.5z"/>
+			<path fill="#AA9987" d="M553.9,624.7c-0.7-1.6-1.5-3.2-2.2-4.8c-0.4-0.9-1.7-1.1-2.4-0.6c-0.9,0.5-1,1.6-0.6,2.4&#10;&#9;&#9;&#9;&#9;c0.7,1.6,1.5,3.2,2.2,4.8c0.4,0.9,1.7,1.1,2.4,0.6C554.1,626.6,554.3,625.6,553.9,624.7z"/>
+			<path fill="#AA9987" d="M582,615c-0.4-1.8-0.8-3.6-1.2-5.3c-0.5-2.2-3.9-1.3-3.4,0.9c0.4,1.8,0.8,3.6,1.2,5.3&#10;&#9;&#9;&#9;&#9;C579.1,618.2,582.5,617.2,582,615z"/>
+			<path fill="#F99573" d="M997.1,704.6c-21.7,0-21.7,33.6,0,33.6S1018.8,704.6,997.1,704.6z"/>
+			<path fill="#56493D" d="M852.7,708c-24,0-43.4-22.1-43.4-49.2c0-27.1,19.5-49.2,43.4-49.2c24,0,43.4,22.1,43.4,49.2&#10;&#9;&#9;&#9;&#9;C896.2,685.9,876.7,708,852.7,708z M852.7,616.8c-20,0-36.3,18.9-36.3,42.1c0,23.2,16.3,42.1,36.3,42.1c20,0,36.3-18.9,36.3-42.1&#10;&#9;&#9;&#9;&#9;C889.1,635.6,872.8,616.8,852.7,616.8z"/>
+			<path fill="#AA9987" d="M531.4,429c-19.9,4.8-24.9,31.7-28.2,48.6c-4.7,24-3.2,49,3,72.6c0.6,2.2,4,1.3,3.4-0.9&#10;&#9;&#9;&#9;&#9;c-5.4-20.3-6.8-41-4.4-61.9c2-17.2,6.9-50.1,27.1-54.9C534.6,431.9,533.6,428.5,531.4,429z"/>
+			<path fill="#AA9987" d="M523.9,420.1c-20-1.1-30.6,29.9-34.7,45c-7.2,26.2-3.6,54.2,2.1,80.4c0.5,2.2,3.9,1.3,3.4-0.9&#10;&#9;&#9;&#9;&#9;c-4.8-22-7.7-44.4-4.5-66.8c1.5-10.7,4.8-21,9.4-30.7c4.4-9.3,12.4-24,24.3-23.4C526.2,423.8,526.2,420.2,523.9,420.1z"/>
+			<path fill="#AA9987" d="M539.8,442.4c-7.9,1.3-11.2,11.8-14.1,18.2c-4.2,9.6-6.3,19.9-7.6,30.2c-3.1,25.3,2.2,51,7,75.8&#10;&#9;&#9;&#9;&#9;c0.4,2.3,3.9,1.3,3.4-0.9c-4-20.7-7.9-41.5-7.6-62.7c0.1-10,1.6-19.9,4.1-29.6c1.8-6.9,6.9-26.1,15.7-27.6&#10;&#9;&#9;&#9;&#9;C543,445.4,542.1,442,539.8,442.4z"/>
+			<path fill="#AA9987" d="M544.2,481.3c1.2-8.2,1.8-19.5,8.3-25.4c1.7-1.5-0.8-4-2.5-2.5c-5.1,4.5-6.2,10.5-7.5,17&#10;&#9;&#9;&#9;&#9;c-2,10.1-3.2,20.3-4,30.5c-1.6,20.3-0.3,40.8,3,60.9c0.4,2.3,3.8,1.3,3.4-0.9c-2.9-17.7-3.9-35.4-3.3-53.2&#10;&#9;&#9;&#9;&#9;C542,498.8,543,490,544.2,481.3z"/>
+			<path fill="#AA9987" d="M560.1,477c-0.1-2.3-3.7-2.3-3.6,0c1.3,25,0.6,49.9-2.2,74.7c-0.3,2.3,3.3,2.3,3.6,0&#10;&#9;&#9;&#9;&#9;C560.7,526.9,561.4,502,560.1,477z"/>
+			<path fill="#AA9987" d="M724.3,402.2c-16.8,2.2-33.7,2.6-50.6,1.1c-18.5-1.7-36.1-7-54.1-11.1c-25-5.7-55-6-72.8,15.4&#10;&#9;&#9;&#9;&#9;c-1.5,1.7,1,4.3,2.5,2.5c20.5-24.6,54.6-18.3,81.8-11.5c31,7.8,61.3,11.3,93.2,7.1C726.5,405.4,726.6,401.8,724.3,402.2z"/>
+			<path fill="#AA9987" d="M713.7,415.4c-15.1,3.4-30.2,4.7-45.7,3.9c-16.6-0.8-32.5-5.6-48.7-9.2c-21.1-4.7-45.2-5-61.5,11.2&#10;&#9;&#9;&#9;&#9;c-1.6,1.6,0.9,4.1,2.5,2.5c21.1-21,52.3-11.7,77.6-5.6c25.4,6.1,51.2,6.4,76.7,0.6C716.9,418.3,715.9,414.9,713.7,415.4z"/>
+			<path fill="#AA9987" d="M744.3,431.1c-32.3,12.2-66.9,10.8-100.1,3.2c-25.9-5.9-54.8-14.6-78.5,2.5c-1.8,1.3-0.1,4.4,1.8,3.1&#10;&#9;&#9;&#9;&#9;c27.4-19.7,62-4.1,91.5,1c28.8,5,58.7,4,86.2-6.4C747.4,433.7,746.5,430.3,744.3,431.1z"/>
+			<path fill="#AA9987" d="M732.9,455.6c-26.3,18.2-59,10.8-87.5,2.7c-15-4.3-29.8-8.5-45.3-10.2c-10-1.1-20.7,0.2-27.8,8.1&#10;&#9;&#9;&#9;&#9;c-1.5,1.7,1,4.2,2.5,2.5c10.7-12,30.6-6.8,44.2-3.8c15,3.3,29.6,8.4,44.5,11.9c23.7,5.6,50.3,6.2,71.1-8.1&#10;&#9;&#9;&#9;&#9;C736.6,457.4,734.8,454.3,732.9,455.6z"/>
+			<path fill="#B4FCF5" d="M195.1,741.1c0.2-1.1-1.5-1.6-1.7-0.5c-0.4,2.3-0.6,4.6-0.4,6.9c0.1,1.1,1.9,1.1,1.8,0&#10;&#9;&#9;&#9;&#9;C194.7,745.3,194.7,743.2,195.1,741.1z"/>
+			<path fill="#B4FCF5" d="M194.8,754.7c0-1.1-1.8-1.1-1.8,0c0,2.2,0.2,4.3,0.5,6.5c0.2,1.1,1.9,1.1,1.8,0&#10;&#9;&#9;&#9;&#9;C195,759.1,194.8,756.9,194.8,754.7z"/>
+			<path fill="#B4FCF5" d="M193.4,768.9v8.6c0,1.1,1.8,1.1,1.8,0v-8.6C195.1,767.8,193.4,767.8,193.4,768.9z"/>
+			<path fill="#B4FCF5" d="M196.4,790.3c-0.8-2.1-1.2-4.3-1.1-6.6c0.1-1.1-1.7-1.1-1.8,0c-0.1,2.4,0.2,4.8,1.1,7.1&#10;&#9;&#9;&#9;&#9;C195.1,791.9,196.8,791.4,196.4,790.3z"/>
+			<path fill="#B4FCF5" d="M197.4,804.2c-0.6-2.2-0.8-4.5-0.6-6.8c0.1-1.1-1.7-1.1-1.8,0c-0.2,2.5,0.1,4.9,0.7,7.3&#10;&#9;&#9;&#9;&#9;C196,805.8,197.7,805.3,197.4,804.2z"/>
+			<path fill="#B4FCF5" d="M199.3,817.9c-0.7-2.2-1.2-4.5-1.4-6.8c-0.1-1.1-1.9-1.1-1.8,0c0.2,2.5,0.7,4.9,1.5,7.3&#10;&#9;&#9;&#9;&#9;C197.9,819.4,199.6,819,199.3,817.9z"/>
+			<path fill="#B4FCF5" d="M201.4,832.3c-1-2.5-1.4-5.1-1.4-7.9c0-1.1-1.8-1.1-1.8,0c0,2.9,0.5,5.7,1.5,8.3&#10;&#9;&#9;&#9;&#9;C200.1,833.8,201.8,833.4,201.4,832.3z"/>
+			<path fill="#B4FCF5" d="M204.5,847.1c-0.8-2.1-1.4-4.3-1.9-6.5c-0.2-1.1-1.9-0.6-1.7,0.5c0.5,2.2,1.1,4.4,1.9,6.5&#10;&#9;&#9;&#9;&#9;C203.1,848.6,204.9,848.2,204.5,847.1z"/>
+			<path fill="#B4FCF5" d="M207.5,863.8c-0.8-2.8-1.3-5.5-1.5-8.4c-0.1-1.1-1.8-1.1-1.8,0c0.2,3,0.7,6,1.5,8.9&#10;&#9;&#9;&#9;&#9;C206.1,865.4,207.8,864.9,207.5,863.8z"/>
+			<path fill="#B4FCF5" d="M211.3,880.8c-0.9-2.8-1.5-5.7-1.9-8.7c-0.2-1.1-1.9-0.6-1.7,0.5c0.4,2.9,1,5.8,1.9,8.7&#10;&#9;&#9;&#9;&#9;C209.9,882.3,211.6,881.9,211.3,880.8z"/>
+			<path fill="#B4FCF5" d="M217.1,897.5c-1-3-1.9-6.1-2.5-9.2c-0.2-1.1-2-0.6-1.7,0.5c0.7,3.1,1.5,6.2,2.5,9.2&#10;&#9;&#9;&#9;&#9;C215.8,899.1,217.5,898.6,217.1,897.5z"/>
+			<path fill="#B4FCF5" d="M222.3,912.5l-2.2-7.2c-0.3-1.1-2.1-0.6-1.7,0.5c0.7,2.4,1.5,4.8,2.2,7.2&#10;&#9;&#9;&#9;&#9;C220.9,914.1,222.6,913.6,222.3,912.5z"/>
+			<path fill="#B4FCF5" d="M229,928.4c-1.1-2.5-2.6-5.1-3-7.8c-0.2-1.1-1.9-0.6-1.7,0.5c0.5,2.9,2.1,5.6,3.2,8.3&#10;&#9;&#9;&#9;&#9;C227.9,930.4,229.5,929.5,229,928.4z"/>
+			<path fill="#B4FCF5" d="M235.4,942.1c-1-2.3-2-4.6-3-7c-0.5-1-2-0.1-1.5,0.9c1,2.3,2,4.6,3,7&#10;&#9;&#9;&#9;&#9;C234.4,944.1,235.9,943.2,235.4,942.1z"/>
+			<path fill="#B4FCF5" d="M242.3,955.8c-1.1-1.9-2-3.8-2.7-5.9c-0.4-1.1-2.1-0.6-1.7,0.5c0.8,2.2,1.7,4.3,2.9,6.3&#10;&#9;&#9;&#9;&#9;C241.3,957.7,242.9,956.8,242.3,955.8z"/>
+			<path fill="#B4FCF5" d="M250.2,969.5c-1.3-1.9-2.4-3.9-3.4-6.1c-0.5-1-2-0.1-1.5,0.9c0.9,2.1,2.1,4.2,3.4,6.1&#10;&#9;&#9;&#9;&#9;C249.3,971.4,250.8,970.5,250.2,969.5z"/>
+			<path fill="#B4FCF5" d="M258.3,980.4c-1.8-1.3-3.2-3-4-5.1c-0.4-1.1-2-0.1-1.5,0.9c1,2.3,2.6,4.2,4.7,5.7&#10;&#9;&#9;&#9;&#9;C258.4,982.6,259.2,981,258.3,980.4z"/>
+			<path fill="#B4FCF5" d="M268.6,990.2c-1.7-0.7-2.9-1.9-3.7-3.5c-0.5-1-2-0.1-1.5,0.9c0.9,1.9,2.4,3.3,4.3,4.2&#10;&#9;&#9;&#9;&#9;C268.8,992.2,269.7,990.7,268.6,990.2z"/>
+			<path fill="#B4FCF5" d="M280.8,1000.6c-1.8-1.1-3.5-2.4-4.8-4c-0.8-0.9-2,0.4-1.3,1.3c1.5,1.7,3.2,3.2,5.2,4.3&#10;&#9;&#9;&#9;&#9;C280.9,1002.7,281.8,1001.1,280.8,1000.6z"/>
+			<path fill="#B4FCF5" d="M296.6,1009.2c-2.4-0.8-4.6-1.9-6.6-3.4c-0.9-0.7-1.8,0.9-0.9,1.5c2.1,1.6,4.5,2.8,7,3.6&#10;&#9;&#9;&#9;&#9;C297.2,1011.3,297.7,1009.6,296.6,1009.2z"/>
+			<path fill="#B4FCF5" d="M313.7,1013.3c-2.9-0.3-5.7-0.8-8.6-1.4c-1.1-0.2-1.6,1.5-0.5,1.7c3,0.6,6,1.1,9,1.5&#10;&#9;&#9;&#9;&#9;C314.8,1015.2,314.8,1013.5,313.7,1013.3z"/>
+			<path fill="#B4FCF5" d="M330.4,1015.9c-2.7-0.1-5.4-0.6-8-1.3c-1.1-0.3-1.6,1.4-0.5,1.7c2.8,0.7,5.6,1.2,8.5,1.3&#10;&#9;&#9;&#9;&#9;C331.6,1017.8,331.6,1016,330.4,1015.9z"/>
+			<path fill="#B4FCF5" d="M347,1015.5c-2.5,0.3-4.9,0.4-7.4,0.2c-1.1-0.1-1.1,1.7,0,1.8c2.5,0.2,4.9,0.1,7.4-0.2&#10;&#9;&#9;&#9;&#9;C348.2,1017.1,348.2,1015.3,347,1015.5z"/>
+			<path fill="#B4FCF5" d="M365.7,1011.7c-3.2,1.4-6.5,2-10,1.9c-1.1,0-1.1,1.8,0,1.8c3.8,0.1,7.4-0.6,10.9-2.1&#10;&#9;&#9;&#9;&#9;C367.6,1012.8,366.7,1011.3,365.7,1011.7z"/>
+			<path fill="#B4FCF5" d="M379.4,1006.8c-2.1,0.8-4.2,1.6-6.3,2.2c-1.1,0.3-0.6,2,0.5,1.7c2.1-0.6,4.2-1.3,6.3-2.2&#10;&#9;&#9;&#9;&#9;C380.9,1008.1,380.5,1006.4,379.4,1006.8z"/>
+			<path fill="#B4FCF5" d="M391.7,1002.1c-1.9,1.1-4,1.9-6.1,2.4c-1.1,0.3-0.6,2,0.5,1.7c2.3-0.6,4.5-1.4,6.5-2.6&#10;&#9;&#9;&#9;&#9;C393.5,1003.1,392.7,1001.5,391.7,1002.1z"/>
+			<path fill="#B4FCF5" d="M405.7,995.8c-2.2,1.2-4.4,2.2-6.7,3.1c-1.1,0.4-0.6,2.1,0.5,1.7c2.4-1,4.8-2.1,7.1-3.3&#10;&#9;&#9;&#9;&#9;C407.6,996.8,406.7,995.2,405.7,995.8z"/>
+			<path fill="#B4FCF5" d="M420.4,987.7c-2.4,1.5-4.9,2.8-7.4,4.1c-1,0.5-0.1,2.1,0.9,1.5c2.5-1.3,5-2.6,7.4-4.1&#10;&#9;&#9;&#9;&#9;C422.3,988.7,421.4,987.1,420.4,987.7z"/>
+			<path fill="#B4FCF5" d="M434.4,977.4c-2.4,1.6-4.8,3.2-7.2,4.8c-1,0.6-0.1,2.2,0.9,1.5c2.4-1.6,4.8-3.2,7.2-4.8&#10;&#9;&#9;&#9;&#9;C436.2,978.3,435.3,976.8,434.4,977.4z"/>
+			<path fill="#B4FCF5" d="M448.9,966c-2.4,1.9-4.8,3.7-7.4,5.5c-0.9,0.6-0.1,2.2,0.9,1.5c2.6-1.8,5.2-3.7,7.7-5.8&#10;&#9;&#9;&#9;&#9;C451.1,966.5,449.8,965.3,448.9,966z"/>
+			<path fill="#B4FCF5" d="M462.6,955.1c-2.4,1.6-4.6,3.4-6.5,5.5c-0.8,0.8,0.5,2.1,1.3,1.3c1.8-2,3.9-3.7,6.2-5.2&#10;&#9;&#9;&#9;&#9;C464.5,956,463.6,954.4,462.6,955.1z"/>
+			<path fill="#B4FCF5" d="M475,942.5c-2,2.3-4.2,4.5-6.5,6.6c-0.9,0.8,0.4,2,1.3,1.3c2.3-2.1,4.5-4.3,6.5-6.6&#10;&#9;&#9;&#9;&#9;C477.1,942.9,475.8,941.7,475,942.5z"/>
+			<path fill="#B4FCF5" d="M484.8,932.3c-1.7,1.7-3.3,3.3-5,5c-0.8,0.8,0.4,2.1,1.3,1.3c1.7-1.7,3.3-3.3,5-5&#10;&#9;&#9;&#9;&#9;C486.8,932.7,485.6,931.5,484.8,932.3z"/>
+			<path fill="#B4FCF5" d="M497.9,918.2c-2,3-4.3,5.9-6.9,8.5c-0.8,0.8,0.5,2.1,1.3,1.3c2.6-2.7,5-5.7,7.1-8.8&#10;&#9;&#9;&#9;&#9;C500.1,918.1,498.6,917.2,497.9,918.2z"/>
+			<path fill="#B4FCF5" d="M508.6,904.9c-1.9,2.5-4,4.9-6.1,7.3c-0.8,0.8,0.5,2.1,1.3,1.3c2.2-2.4,4.4-5,6.4-7.6&#10;&#9;&#9;&#9;&#9;C510.8,904.9,509.3,904,508.6,904.9z"/>
+			<path fill="#B4FCF5" d="M518.4,890.8c-1.6,2.8-3.3,5.5-5.2,8.1c-0.7,0.9,0.9,1.8,1.5,0.9c1.8-2.6,3.6-5.4,5.2-8.1&#10;&#9;&#9;&#9;&#9;C520.5,890.7,519,889.8,518.4,890.8z"/>
+			<path fill="#B4FCF5" d="M525.9,875c-0.8,2.9-1.8,5.6-3.2,8.2c-0.5,1,1,1.9,1.5,0.9c1.4-2.8,2.6-5.6,3.4-8.7&#10;&#9;&#9;&#9;&#9;C527.9,874.4,526.2,873.9,525.9,875z"/>
+			<path fill="#B4FCF5" d="M531.2,859.3c-0.5,2.7-1.2,5.3-2.2,7.9c-0.4,1.1,1.3,1.5,1.7,0.5c1-2.6,1.7-5.2,2.2-7.9&#10;&#9;&#9;&#9;&#9;C533.1,858.7,531.4,858.2,531.2,859.3z"/>
+			<path fill="#B4FCF5" d="M532.6,843.9c-0.1,2.3-0.2,4.6-0.2,6.8c0,1.1,1.7,1.1,1.8,0c0.1-2.3,0.2-4.6,0.2-6.8&#10;&#9;&#9;&#9;&#9;C534.4,842.7,532.6,842.7,532.6,843.9z"/>
+			<path fill="#B4FCF5" d="M534,830.3c-0.4-1.1-2.1-0.6-1.7,0.5c0.7,1.7,1,3.5,0.9,5.3c-0.1,1.1,1.7,1.1,1.8,0&#10;&#9;&#9;&#9;&#9;C535,834.1,534.7,832.2,534,830.3z"/>
+			<path fill="#B4FCF5" d="M752.3,976.9c-2.9-0.5-5.7-1.4-8.4-2.6c-1-0.5-1.9,1.1-0.9,1.5c2.8,1.3,5.7,2.3,8.8,2.8&#10;&#9;&#9;&#9;&#9;C753,978.8,753.5,977.1,752.3,976.9z"/>
+			<path fill="#B4FCF5" d="M771.5,983c-3.6-0.6-7-1.6-10.3-3.2c-1-0.5-1.9,1-0.9,1.5c3.4,1.6,7,2.8,10.7,3.4&#10;&#9;&#9;&#9;&#9;C772.2,984.9,772.6,983.1,771.5,983z"/>
+			<path fill="#B4FCF5" d="M788.9,987.4c-3.1-0.7-6.3-1.5-9.4-2.2c-1.1-0.3-1.6,1.4-0.5,1.7c3.1,0.7,6.3,1.5,9.4,2.2&#10;&#9;&#9;&#9;&#9;C789.5,989.4,790,987.6,788.9,987.4z"/>
+		</g>
+	</g>
+</g>
+<path fill="#F2895F" d="M930.9,415c2.6,0.4,5.2-0.8,7.5-2c15-7.5,29.5-15.9,43.3-25.4c6.1-4.1,12.1-8.6,16.2-14.7&#10;&#9;c4.1-6.1,5.8-14.3,2.6-20.9c-5.5-11.2-21.9-12.1-32.9-6.2c-11,5.9-18.7,16.3-28.5,24.1c-4.5-10.9-9.2-22-16.5-31.3&#10;&#9;s-17.8-16.8-29.6-17.9c-1.7-0.2-3.6-0.1-5,0.9c-1.4,1-2.1,2.8-2.5,4.5c-3.6,14.7,3.1,29.9,10.6,43.1c8,14.1,17.1,27.5,27.2,40.1&#10;&#9;C925.4,411.9,927.7,414.5,930.9,415z" transform="matrix(1, 0, 0, 1, -166.42333984375, -260.58391284942627)"/>
+<path fill="#F2895F" d="M832.4,328.1c1.6-0.8,2.5-2.4,3.3-3.9c5.3-9.8,9.9-19.9,13.7-30.3c1.7-4.6,3.3-9.3,3.2-14.1&#10;&#9;c-0.1-4.9-2.3-9.9-6.6-12.3c-7.2-4-16.5,1.8-20.2,9.2c-3.7,7.4-3.9,16-6.2,23.9c-6.6-4.2-13.4-8.4-20.9-10.7s-16-2.3-22.8,1.6&#10;&#9;c-1,0.6-2,1.3-2.4,2.4c-0.4,1.1,0,2.3,0.4,3.4c3.7,9.3,13.1,15,22.2,19.3c9.7,4.6,19.7,8.3,30,11.3&#10;&#9;C828.3,328.5,830.5,329,832.4,328.1z" transform="matrix(1, 0, 0, 1, -166.42333984375, -260.58391284942627)"/>
+</svg>
\ No newline at end of file
diff --git a/static/testcoverAbout.jpg b/static/testcoverAbout.jpg
new file mode 100644
index 00000000..2ccd6f14
Binary files /dev/null and b/static/testcoverAbout.jpg differ
diff --git a/static/testcoverNew.png b/static/testcoverNew.png
new file mode 100644
index 00000000..3b8775c7
Binary files /dev/null and b/static/testcoverNew.png differ
diff --git a/static/woment.png b/static/woment.png
deleted file mode 100644
index a0784635..00000000
Binary files a/static/woment.png and /dev/null differ
diff --git a/styles/about.scss b/styles/about.scss
new file mode 100644
index 00000000..5af10a1b
--- /dev/null
+++ b/styles/about.scss
@@ -0,0 +1,215 @@
+$font-header: "Frank Ruhl Libre" !important;
+$font-text-sub: #978bab !important;
+
+.warp-about {
+  .page-content {
+    padding-top: 3rem;
+    
+    @media (max-width: 575.98px) {
+     padding-top: 1rem;
+    }
+
+    .container-fluid {
+      display: flex;
+      flex-direction: column;
+      .head-content {
+        h3 {
+          font-size: 2rem !important;
+          margin-bottom: 1rem !important;
+        }
+      }
+      .detail-content {
+        display: flex;
+        justify-content: center;
+        margin: 2rem 3rem;
+
+        @media (max-width: 575.98px) {
+          flex-direction: column;
+          align-items: center;
+          margin: 0;
+        }
+        img {
+          height: 20rem;
+          margin-right: 1rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+            height: 15rem;
+            width: 15rem;
+          }
+        }
+
+        .data-detail-content {
+          display: flex;
+          flex-direction: column;
+
+          @media (max-width: 575.98px) {
+            margin-top: 1rem;
+          }
+
+          .title-content {
+            padding: 0 3rem;
+
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+
+            .header-title-content {
+              font-weight: bold !important;
+            }
+
+            h6 {
+              text-align: start;
+              opacity: 0.8;
+              margin-bottom: 0.5rem !important;
+              font-weight: lighter;
+            }
+          }
+          .more-content {
+            padding: 0 3rem;
+            display: flex;
+            @media (max-width: 575.98px) {
+              justify-content: center;
+            }
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+
+            h6 {
+              margin-top: 1rem;
+              font-weight: bold;
+              text-align: center;
+            }
+
+            img {
+              cursor: pointer;
+              margin-top: 0.5rem;
+              margin-left: 1rem;
+              width: 2rem;
+              height: auto;
+            }
+            .hvr-wobble-horizontal:hover {
+              animation-name: hvr-wobble-horizontal;
+              animation-duration: 1s;
+              animation-timing-function: ease-in-out;
+              animation-iteration-count: 1;
+              display: inline-block;
+              vertical-align: middle;
+              transform: perspective(1px) translateZ(0);
+            }
+
+            @keyframes hvr-wobble-horizontal {
+              17% {
+                transform: translateX(8px);
+              }
+              34% {
+                transform: translateX(-6px);
+              }
+              50% {
+                transform: translateX(4px);
+              }
+              70% {
+                transform: translateX(-2px);
+              }
+              80% {
+                transform: translateX(1px);
+              }
+              100% {
+                transform: translateX(0);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.warp-about-page {
+  .page-content {
+    padding-top: 3rem;
+
+
+    .container-fluid {
+      display: flex;
+      flex-direction: column;
+      .head-content {
+        h1.name-header {
+          font-family: $font-header;
+        }
+
+        .title-about {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          h6 {
+            margin-top: 0.5rem;
+            color: $font-text-sub;
+            font-style: italic;
+          }
+        }
+      }
+      .detail-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 2rem 3rem;
+
+        @media (max-width: 575.98px) {
+          flex-direction: column;
+        }
+        img {
+          height: 20rem;
+          margin-right: 1rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+            height: 18rem;
+          }
+        }
+
+        .data-detail-content {
+          margin-left: 2rem;
+          display: flex;
+          flex-direction: column;
+
+          @media (max-width: 575.98px) {
+            margin-top: 1rem;
+            margin-left: 0;
+          }
+
+          .title-content {
+            padding: 0 3rem;
+
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+
+            .header-title-content {
+              font-weight: bold !important;
+            }
+
+            .sub-title-content {
+              margin-left: 1rem;
+            }
+
+            h6 {
+              text-align: start;
+              opacity: 0.8;
+              margin-bottom: 0.5rem !important;
+              font-weight: lighter;
+            }
+          }
+          .more-content {
+            padding: 0 3rem;
+            display: flex;
+
+            h6 {
+              margin-top: 1rem;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/styles/agency.scss b/styles/agency.scss
new file mode 100644
index 00000000..3383124b
--- /dev/null
+++ b/styles/agency.scss
@@ -0,0 +1,124 @@
+$primary-color: #39b54a !important;
+$font-text-sub: #978bab !important;
+$font-color-text-in-border: white !important;
+
+.warp-agency {
+  user-select: none;
+  margin: 1rem;
+  .head-agency {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 2rem 1rem;
+    svg {
+      margin: 1rem 0;
+      height: 1rem;
+      stroke: $primary-color;
+      stroke-width: 10;
+    }
+
+    .title-agency {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      h6 {
+        color: $font-text-sub;
+        font-style: italic;
+
+        sup {
+          color: red;
+        }
+      }
+    }
+  }
+
+  .content-agency {
+    display: flex;
+    justify-content: space-evenly;
+    margin: 1rem;
+    .content-agency-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1rem;
+      border: 1px solid $primary-color;
+      border-radius: 2rem;
+      img {
+        width: 15rem;
+        height: 12rem;
+        margin-bottom: 1rem;
+      }
+      .agency-box {
+        border: 1px solid $primary-color;
+        border-radius: 0.5rem;
+        background-color: $primary-color;
+        width: 2rem;
+        height: 2rem;
+        h6 {
+          text-align: center;
+          color: $font-color-text-in-border;
+          padding: 0.5rem 0;
+          margin-bottom: 0 !important;
+        }
+      }
+      p {
+        margin: 1rem;
+        text-align: center;
+      }
+    }
+  }
+
+  .content-agency-mobile {
+    display: flex;
+    justify-content: space-evenly;
+    margin: 1rem;
+
+    @media (max-width: 575.98px) {
+      justify-content: start !important;
+    }
+
+    img {
+      width: 20rem;
+      height: 15rem;
+    }
+  }
+
+  .ant-steps-dot.ant-steps-small .ant-steps-item-tail::after {
+    background-color: $primary-color;
+  }
+
+  .ant-steps-icon-dot {
+    background: $primary-color;
+  }
+
+  .ant-steps-item-title {
+    color: black !important;
+  }
+
+  //isMobile
+  .ant-steps {
+    width: 50% !important;
+  }
+  .ant-steps-item-content {
+    width: 20rem !important;
+  }
+  .ant-steps-item-title {
+    width: 20rem !important;
+    @media (max-width: 575.98px) {
+      margin-left: 1rem;
+    }
+  }
+
+  .ant-steps-item-description {
+    width: 20rem !important;
+
+    @media (max-width: 575.98px) {
+      margin-left: 1rem;
+      width: 17rem !important;
+    }
+  }
+
+  .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
+    background-color: $primary-color;
+  }
+}
diff --git a/styles/base.scss b/styles/base.scss
index 8419ebe9..537b6bad 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -1,34 +1,54 @@
-@import "./card.scss";
-@import "./chart.scss";
-@import "./hamburgers.scss";
+@import "./nav.scss";
 @import "./index.scss";
+@import "./cover.scss";
+@import "./about.scss";
+@import "./agency.scss";
+@import "./info.scss";
+@import "./footer.scss";
+
+//Index
+@import "./index/society.scss";
+@import "./index/allowance.scss";
+@import "./index/contact.scss";
+
+//Main
+@import "./dashboard.scss";
 @import "./main.scss";
-@import "./menu-icon.scss";
-@import "./nav.scss";
+@import "./chart.scss";
+@import "./hamburgers.scss";
+
 @import "./sidebar.scss";
 @import "./map.scss";
 
-@import "./index/services.scss";
-@import "./index/contact.scss";
-@import "./index//project.scss";
+//Other
+@import "./error.scss";
+@import "./empty.scss";
 
 $font: "Prompt", sans-serif;
 
 body {
   font-family: $font !important;
-  h1, h2, h3, h4, h5, h6, p, text{
-      font-family: $font !important;
-      color: black !important;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  text {
+    user-select: none;
+    font-family: $font !important;
+    color: black !important;
   }
 }
 
 h1 {
-  color: black;
-  font-size: 3rem !important;
+  font-size: 2.5rem !important;
   text-align: center;
   margin-block-start: 0;
   margin-block-end: 0;
   padding: 0.5rem;
+  margin-bottom: 0 !important;
 
   @media (max-width: 1199.98px) {
     font-size: 2rem !important;
@@ -40,10 +60,9 @@ h1 {
 }
 
 h2 {
-  color: black;
-  font-size: 1.7rem !important;
+  font-size: 1.5rem !important;
   text-align: center;
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
   padding: 0.5rem;
 
   @media (max-width: 1199.98px) {
@@ -56,43 +75,31 @@ h2 {
 }
 
 h3 {
-  color: black;
   font-size: 1.75rem;
   text-align: center;
-  margin: 0.5rem;
 }
 
 h4 {
-  color: black;
   font-size: 1.5rem;
   text-align: center;
-  padding-bottom: 0.5rem;
 }
 
 h5 {
-  color: black;
   font-size: 1rem !important;
   text-align: center;
-  margin-bottom: 0.5rem;
 }
 
 h6 {
-  color: black;
   font-size: 1rem !important;
   text-align: center;
-  margin-bottom: 1rem !important;
 }
 
 p {
   user-select: none;
   font-size: 1rem !important;
-  color: gray;
-
 }
 
 text {
-  color: gray;
-  margin: 0.7rem 0 !important;
   font-size: 1rem;
 
   @media (max-width: 991.98px) {
@@ -100,10 +107,6 @@ text {
   }
 }
 
-a {
-  color: black;
-}
-
 a:hover {
   text-decoration-line: none !important;
 }
@@ -113,39 +116,9 @@ img {
 }
 
 ul {
+  margin-left: 1rem;
   margin-bottom: 0 !important;
   margin-block-end: 0;
   padding-inline-start: 0.5rem !important;
   padding-inline-end: 0.5rem !important;
 }
-
-.btn-outline-center {
-  margin: 2rem 1rem;
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: #007bff;
-  background-color: transparent;
-  border: 1px solid #007bff;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-}
-
-.btn-outline-center:hover {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
-}
-
-.btn-primary{
-  color: white !important;
-}
diff --git a/styles/card.scss b/styles/card.scss
deleted file mode 100644
index b4f63e98..00000000
--- a/styles/card.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-.card-chart {
-  display: flex;
-  justify-content: center;
-}
-
-//Card
-.warp-card-basic {
-  margin: 1rem;
-  display: flex;
-  justify-content: center;
-
-  .card-group {
-    width: 50%;
-    padding: 0 1rem;
-    margin: 0 1rem;
-
-    @media screen and (max-width: 600px) {
-      .card-group {
-        width: 100%;
-        display: block;
-        margin-bottom: 20px;
-      }
-    }
-
-    .card {
-      display: flex;
-      justify-content: center;
-      border-radius: 1rem;
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-      padding: 1rem;
-      text-align: center;
-      background-color: white;
-      cursor: pointer;
-
-      img {
-        margin: 0.5rem;
-        width: 5rem;
-        height: 5rem;
-        cursor: pointer;
-      }
-
-      .card-data {
-        display: flex;
-
-        @media (max-width: 1199.98px) {
-          flex-direction: column;
-          align-items: center;
-        }
-
-        img {
-          margin: 0.5rem;
-          width: 5rem;
-          height: 5rem;
-          cursor: pointer;
-        }
-        .card-text {
-          user-select: none;
-          width: 100%;
-          height: auto;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-          margin: 0.5rem;
-
-          @media (max-width: 1199.98px) {
-            align-items: center;
-          }
-
-          h4 {
-            @media (max-width: 920px) {
-              font-size: 1.5rem !important;
-            }
-          }
-        }
-      }
-    }
-
-    .card:hover {
-      box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.05);
-    }
-  }
-  @media (max-width: 575.98px) {
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-.warp-card-help {
-  margin-top: 1rem;
-  .card {
-    width: 50%;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    border-radius: 0.5rem;
-    .card-body {
-      .card-title {
-        text-align: start;
-        margin-left: 0 !important;
-      }
-      .card-subtitle {
-        text-align: start;
-        margin-top: 0.5rem;
-        // color: black !important;
-      }
-      p {
-        color: black;
-        margin: 1rem 0;
-      }
-    }
-  }
-}
-
-.warp-card {
-  margin: 1rem;
-  display: flex;
-  justify-content: center;
-
-  .card-group {
-    padding: 0 1rem;
-    margin: 0 1rem;
-
-    @media screen and (max-width: 600px) {
-      .card-group {
-        width: 100%;
-        display: block;
-        margin-bottom: 20px;
-      }
-    }
-
-    .card {
-      display: flex;
-      justify-content: center;
-      border-radius: 1rem;
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-      padding: 1rem;
-      text-align: left;
-      background-color: white;
-      cursor: pointer;
-
-      .card-header {
-        text-align: left;
-      }
-
-      .card-title {
-        text-align: left;
-      }
-
-      .card-data {
-        display: flex;
-
-        @media (max-width: 1199.98px) {
-          flex-direction: column;
-          align-items: center;
-        }
-
-        img {
-          margin: 0.5rem;
-          width: 5rem;
-          height: 5rem;
-          cursor: pointer;
-        }
-        .card-text {
-          user-select: none;
-          width: 100%;
-          height: auto;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-          margin: 0.5rem;
-
-          @media (max-width: 1199.98px) {
-            align-items: center;
-          }
-        }
-      }
-    }
-
-    .card:hover {
-      box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.05);
-    }
-  }
-}
diff --git a/styles/chart.scss b/styles/chart.scss
index 8ab9ea33..f5bd2412 100644
--- a/styles/chart.scss
+++ b/styles/chart.scss
@@ -1,82 +1,3 @@
-.warp-chart {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 1rem;
-
-  @media (max-width: 1199.98px) {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .chart-contents {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: white;
-    border-radius: 0.5rem;
-    padding: 1.5rem 1rem 1rem 1rem;
-    margin: 0 2rem 2rem 2rem;
-
-    @media (max-width: 991.98px) {
-      margin: 1rem !important;
-    }
-  }
-
-  .chart-pic {
-    margin: 0.5rem 1rem;
-
-    foreignObject {
-      .apexcharts-legend.center.position-right {
-        position: fixed !important;
-        top: 10px !important;
-        left: 1px;
-      }
-      .apexcharts-legend.center.position-right {
-        top: 3rem !important;
-      }
-    }
-  }
-}
-
-.chart-center {
-  margin: 0;
-}
-
-.warp-footer {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  min-height: 2rem;
-  margin-top: 3rem;
-  .chart-source {
-    margin-right: 1rem;
-    margin-bottom: 0.5rem;
-    padding-right: 0.5rem;
-    text-align: end !important;
-    width: auto;
-
-    @media (max-width: 575.98px) {
-      text-align: center !important;
-    }
-
-    a {
-      cursor: pointer;
-      h6 {
-        cursor: pointer;
-        user-select: none;
-        display: contents;
-        text-align: end;
-        margin-bottom: 0.5rem !important;
-      }
-    }
-
-    p {
-      margin-bottom: 0 !important;
-    }
-  }
-}
-
 //Apexcharts
 .apexcharts-legend-text {
   font-family: "Prompt", sans-serif !important ;
@@ -121,49 +42,4 @@ path {
   font-family: "Prompt", sans-serif !important ;
 }
 
-//////////////////////////////////////////////////////////////////
-
-//Small
-.warp-chart-small {
-  display: none;
-
-  @media (max-width: 575.98px) {
-    display: flex !important;
-  }
-}
-
-//Mobile
-.warp-chart-mobile {
-  display: none;
-
-  @media (min-width: 576px) and (max-width: 767.98px) {
-    display: flex !important;
-  }
-}
-
-//Tablets
-.warp-chart-tablets {
-  display: none;
-
-  @media (min-width: 768px) and (max-width: 991.98px) {
-    display: flex !important;
-  }
-}
-
-//Desktops
-.warp-chart-desktops {
-  display: none;
-
-  @media (min-width: 992px) and (max-width: 1199.98px) {
-    display: flex !important;
-  }
-}
-
-//Large
-.warp-chart-large {
-  display: none;
-
-  @media (min-width: 1200px) {
-    display: flex !important;
-  }
-}
+//////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/styles/cover.scss b/styles/cover.scss
new file mode 100644
index 00000000..5432ca3d
--- /dev/null
+++ b/styles/cover.scss
@@ -0,0 +1,121 @@
+$font-header: "Frank Ruhl Libre" !important;
+$font-color: #071d40 !important;
+$primary-color: #39b54a !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
+
+
+.warp-cover {
+  // margin-top: 5rem;
+  // position: relative;
+  // text-align: center;
+  // line-height: 0;
+  // min-height: 80vh;
+  // height: auto;
+
+  // img {
+  //   object-fit: cover;
+  //   width: 100%;
+  //   height: 80vh;
+  //   opacity: 0.6;
+  //   @media (max-width: 575.98px) {
+  //     height: 50vh;
+  //   }
+  // }
+
+  .page-content {
+    display: flex;
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-top: 3rem;
+
+    .container-fluid {
+      display: flex;
+      .title {
+        padding-left: 9rem;
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        @media (min-width: 767px) and (max-width: 1024px) {
+          padding-left: 5rem;
+          width: 50%;
+        }
+
+        h1 {
+          font-weight: bold;
+          color: $font-color;
+        }
+        h5 {
+          border: $border-bg-color;
+          cursor: pointer;
+          margin-top: 1rem;
+          background: $bg-color;
+          color: white !important;
+          border-radius: 2rem;
+          padding: 1rem 2rem;
+        }
+        h5:hover {
+          color: $font-color;
+          border: $border-bg-color;
+          background: white !important;
+        }
+
+        .detail {
+          display: flex;
+          margin: 1rem 0.5rem;
+          svg {
+            height: 5.5rem;
+            width: 1rem;
+            stroke: $primary-color;
+            stroke-width: 3;
+          }
+
+          .text-content {
+            display: flex;
+            flex-direction: column;
+            h6 {
+              color: $font-color;
+              text-align: start;
+              padding-top: 0.5rem;
+              margin-bottom: 0rem !important;
+            }
+          }
+        }
+      }
+      .cover {
+        display: flex;
+        justify-content: center;
+        width: 60%;
+
+        @media (max-width: 1199.98px) {
+          width: 50%;
+        }
+
+        img {
+          width: auto;
+          height: 25rem;
+        }
+      }
+    }
+  }
+  @media (max-width: 768.99px) {
+    .title {
+      display: flex;
+      align-items: center !important;
+      padding-left: 0 !important;
+      width: 100% !important;
+      text-align: center;
+
+      .text-content {
+        align-items: center;
+        text-align: center !important;
+        h6{
+          align-items: center;
+          text-align: center !important;
+        }
+      }
+    }
+  }
+}
diff --git a/styles/dashboard.scss b/styles/dashboard.scss
new file mode 100644
index 00000000..32e278aa
--- /dev/null
+++ b/styles/dashboard.scss
@@ -0,0 +1,116 @@
+$font-header: "Frank Ruhl Libre" !important;
+$bg-color: white !important;
+$font-color: rgba(0, 0, 0, 0.65) !important;
+$hover-color: #1890ff;
+$primary-color: #39b54a !important;
+
+.ant-layout {
+    width: 100%;
+    min-height: 100vh;
+    height: auto;
+    .logo {
+        cursor: pointer;
+        margin: 1rem;
+        h2 {
+            font-family: $font-header;
+        }
+        h6 {
+            font-family: $font-header;
+        }
+    }
+
+    #components-layout-demo-custom-trigger .trigger {
+        font-size: 18px;
+        line-height: 64px;
+        padding: 0 24px;
+        cursor: pointer;
+        transition: color 0.3s;
+    }
+
+    #components-layout-demo-custom-trigger .trigger:hover {
+        color: $hover-color;
+    }
+
+    .site-layout .site-layout-background {
+        background: $bg-color;
+    }
+
+    .ant-menu {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1rem;
+    }
+    .ant-layout-header {
+        display: flex;
+        align-items: center;
+        padding: 1rem !important;
+        svg {
+            height: 1.5rem;
+            width: 1.5rem;
+        }
+
+        nav {
+            min-height: auto;
+        }
+        .layout-header-navbar {
+            display: flex;
+            justify-content: flex-end;
+
+            p {
+                color: $font-color;
+                cursor: pointer;
+                margin-bottom: 0;
+                margin: 0.5rem 1rem!important;
+            }
+            p:hover {
+                color: $primary-color;
+            }
+        }
+    }
+
+    .ant-menu-inline-collapsed > .ant-menu-item {
+        display: flex;
+        justify-content: center;
+    }
+
+    .ant-menu-item {
+        span {
+            margin-right: 0 !important;
+        }
+
+        svg {
+            margin-right: 10px;
+        }
+    }
+
+    .ant-menu-item > a:hover {
+        color: $primary-color;
+    }
+
+    .ant-menu-item:active {
+        background-color: #dcedc8;
+    }
+
+    .ant-menu-item > a:only-child {
+        display: flex;
+        align-items: center;
+    }
+
+    .ant-menu-vertical .ant-menu-item:not(:last-child) {
+        display: flex;
+    }
+
+    .ant-layout-sider {
+        background: $bg-color;
+    }
+
+    .ant-menu-item.ant-menu-item-only-child .anticon {
+        margin-right: 10px;
+    }
+
+    .ant-layout-content {
+        margin: 24px 16px;
+        padding: 24;
+        min-height: auto !important;
+    }
+}
diff --git a/styles/detail.scss b/styles/detail.scss
deleted file mode 100644
index 6375906f..00000000
--- a/styles/detail.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.warp-detail {
-  position: absolute;
-  width: 100%;
-  min-height: 100vh;
-  height: auto;
-  background-color: #f3f5f7;
-
-  .page-detail {
-    padding: 2rem 1rem 0 1rem !important;
-
-    .container-detail {
-      border-radius: 1rem;
-      background-color: white;
-      text-align: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-
-      .item-header {
-        width: 50rem;
-        padding: 3rem 0;
-      }
-
-      .btn-close {
-        width: 3rem;
-        padding: 1rem;
-        .close {
-          font-size: 2rem;
-          span {
-            user-select: none;
-          }
-        }
-
-        .close:focus {
-          outline: none;
-        }
-      }
-    }
-
-    .container-fluid {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.page-content-detail {
-  display: flex;
-  width: 100%;
-  min-height: 30vh;
-  height: auto;
-  position: relative;
-  .container-fluid {
-    text-align: center;
-    margin-top: 2rem;
-    padding-right: 10px;
-    padding-left: 10px;
-
-    @media (max-width: 1024px) {
-      flex-direction: column !important;
-    }
-
-    h2 {
-      margin-top: 1.5rem;
-      margin-bottom: 2rem;
-    }
-    .textarea-center {
-      margin: 1rem 2rem;
-      text-align: center;
-
-      text {
-        margin: 0.7rem 0;
-        color: black !important;
-      }
-    }
-
-    .warp-card {
-      .card-group {
-        .card {
-          box-shadow: 0 0 0 0 !important;
-
-          img {
-            width: 5rem;
-            height: 5rem;
-
-            @media (max-width: 991.98px) {
-              width: 4rem;
-              height: 4rem;
-            }
-          }
-        }
-
-        .card:hover {
-          box-shadow: 0 0 0 0 !important;
-        }
-      }
-    }
-  }
-
-  .container-fluid.non {
-    .non {
-      display: none;
-    }
-  }
-}
-
-
diff --git a/styles/empty.scss b/styles/empty.scss
new file mode 100644
index 00000000..53dc98fd
--- /dev/null
+++ b/styles/empty.scss
@@ -0,0 +1,83 @@
+$font-header: "Frank Ruhl Libre" !important;
+$font-color: #071d40 !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
+
+.warp-empty {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  nav {
+    width: 100%;
+    margin-bottom: 4rem;
+    ul {
+      margin-left: 0;
+      display: flex;
+      justify-content: space-between;
+
+      li {
+        h2 {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .collapsible-menu {
+    width: 100%;
+    margin-bottom: 4rem;
+  }
+  .content-empty {
+    img {
+      object-fit: cover;
+    }
+
+    .title-empty {
+      display: flex;
+      flex-direction: column;
+      margin: 1rem;
+
+      h4 {
+        user-select: none;
+      }
+    }
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      img {
+        width: 15rem;
+        height: 15rem;
+      }
+      .title-empty {
+        margin: 0;
+        margin-top: 1rem !important;
+        h4 {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+
+  h5 {
+    cursor: pointer;
+    background-color: white;
+    border: $border-bg-color;
+    border-radius: 2rem;
+    padding: 1rem 2rem;
+  }
+  h5:hover {
+    color: white !important;
+    background: $bg-color;
+  }
+
+  @media (max-width: 768px) {
+    h5 {
+      font-size: 0.7rem !important;
+      padding: 1rem;
+    }
+  }
+}
diff --git a/styles/error.scss b/styles/error.scss
new file mode 100644
index 00000000..ec9565dc
--- /dev/null
+++ b/styles/error.scss
@@ -0,0 +1,78 @@
+.warp-error {
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    nav {
+        width: 100%;
+        margin-bottom: 4rem;
+        ul {
+            margin-left: 0;
+            display: flex;
+            justify-content: space-between;
+
+            li {
+                h2 {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .collapsible-menu {
+        width: 100%;
+        margin-bottom: 4rem;
+    }
+    .content-error {
+        img {
+            object-fit: cover;
+        }
+
+        .title-error {
+            display: flex;
+            flex-direction: column;
+            margin: 1rem;
+
+            h4 {
+                user-select: none;
+            }
+        }
+
+        @media (max-width: 768px) {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            img {
+                width: 15rem;
+                height: 15rem;
+            }
+            .title-error {
+                margin: 0;
+                margin-top: 1rem !important;
+                h4 {
+                    font-size: 1rem;
+                }
+            }
+        }
+    }
+
+    h5 {
+        cursor: pointer;
+        background-color: white;
+        border: $border-bg-color;
+        border-radius: 2rem;
+        padding: 1rem 2rem;
+    }
+    h5:hover {
+        color: white !important;
+        background: $bg-color;
+    }
+
+    @media (max-width: 768px) {
+        h5 {
+            font-size: 0.7rem !important;
+            padding: 1rem;
+        }
+    }
+}
diff --git a/styles/footer.scss b/styles/footer.scss
new file mode 100644
index 00000000..09ca8771
--- /dev/null
+++ b/styles/footer.scss
@@ -0,0 +1,15 @@
+$primary-color: #f8f3f3 !important;
+$font-color: white !important;
+
+.warp-footer {
+  padding: 0.5rem 0;
+  width: 100%;
+  height: 3rem;
+  bottom: 0;
+  color: $font-color;
+  background-color: $primary-color;
+
+  h6{
+    margin-top: 0.5rem;
+  }
+}
\ No newline at end of file
diff --git a/styles/hamburgers.scss b/styles/hamburgers.scss
index 1dffb0b0..351d1de9 100644
--- a/styles/hamburgers.scss
+++ b/styles/hamburgers.scss
@@ -1,30 +1,33 @@
+$primary-color: #39b54a !important;
+
 .box-hamberger {
-  width: 3.5rem;
-  height: 3rem;
-  padding-bottom: 1rem !important;
+  width: 2.5rem;
+  height: auto;
+
+  a.btn{
+    padding: 0.5rem;
+  }
 
   a.hamberger {
     position: relative;
     left: 1.5rem;
-    top: 2rem;
+    top: 1rem;
   }
 
   .btn.hamberger {
-    margin: 0.5rem 0 ;
-    margin-bottom: 0 !important;
     display: flex;
     flex-direction: column;
     width: 100%;
     transform: translate(-50%, -50%);
     cursor: pointer;
-    padding-bottom: 1rem;
+    
   }
 
   span {
     width: 100%;
     border-radius: 3px;
     height: 0.1rem;
-    background: #0693e3;
+    background: $primary-color;
     transition: all 0.3s;
     position: relative;
   }
diff --git a/styles/index.scss b/styles/index.scss
index e87c4967..f34846fd 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -3,69 +3,6 @@
   min-height: 100vh;
   height: auto;
 }
-
-.warp-header {
-  position: relative;
-  text-align: center;
-  line-height: 0;
-  min-height: 80vh;
-  height: auto;
-
-  img {
-    object-fit: cover;
-    width: 100%;
-    height: 91vh;
-    opacity: 0.6;
-  }
-
-  .page-content {
-    display: flex;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    .container-fluid {
-      margin-top: 0;
-      text-align: center;
-      padding-right: 10px;
-      padding-left: 10px;
-
-      h2 {
-        margin-top: 1.5rem;
-        margin-bottom: 2rem;
-      }
-    }
-  }
-}
-
-.page-content {
-  display: flex;
-  width: 100%;
-  min-height: 50vh;
-  position: relative;
-  .container-fluid {
-    text-align: center;
-    margin-top: 2rem;
-    padding-right: 10px;
-    padding-left: 10px;
-
-    h2 {
-      margin-top: 1.5rem;
-      margin-bottom: 2rem;
-    }
-    .textarea-center {
-      margin: 1rem 2rem;
-      text-align: center;
-
-      text {
-        margin: 0.7rem 0;
-        color: black !important;
-      }
-    }
-  }
-}
-
 .gm-style-iw-d {
   a {
     h6 {
diff --git a/styles/index/allowance.scss b/styles/index/allowance.scss
new file mode 100644
index 00000000..8840712e
--- /dev/null
+++ b/styles/index/allowance.scss
@@ -0,0 +1,202 @@
+$primary-color: #39b54a !important;
+
+.warp-allowance-page {
+  .page-content {
+    padding-top: 3rem;
+
+    .container-fluid {
+      display: flex;
+      flex-direction: column;
+      .head-content {
+        h1.name-header {
+          font-family: $font-header;
+        }
+
+        .title-about {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          h6 {
+            margin-top: 0.5rem;
+            color: $font-text-sub;
+            font-style: italic;
+          }
+        }
+      }
+      .detail-content {
+        display: flex;
+        justify-content: center;
+        // align-items: center;
+        margin: 2rem 3rem;
+
+        @media (max-width: 575.98px) {
+          margin-top: 1rem !important;
+          flex-direction: column;
+          margin: 0 1rem;
+        }
+        img {
+          height: 20rem;
+          margin-right: 1rem;
+          margin-bottom: 1rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+            height: 18rem;
+          }
+        }
+
+        .data-detail-content {
+          width: 50%;
+          margin-left: 2rem;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+
+          @media (max-width: 575.98px) {
+            width: 100%;
+            margin-top: 1rem;
+            margin-left: 0;
+          }
+
+          .title-content {
+            padding: 0 3rem;
+            margin-bottom: 1rem;
+
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+
+            .header-title-content {
+              margin-top: 1rem;
+              font-weight: bold !important;
+            }
+
+            .sub-title-content {
+              margin-left: 1rem;
+
+              .sub-content {
+                margin-left: 1rem;
+              }
+            }
+
+            h6 {
+              text-align: start;
+              opacity: 0.8;
+              margin-bottom: 0.5rem !important;
+              font-weight: lighter;
+            }
+          }
+          .more-content {
+            padding: 0 3rem;
+            display: flex;
+
+            h6 {
+              margin-top: 1rem;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-steps {
+    width: 50%;
+  }
+
+  .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
+    background-color: $primary-color;
+  }
+  .ant-steps-item-title {
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+
+    .ant-steps-item-subtitle {
+      margin-left: 0;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+
+  //Icon
+  .ant-steps-item-process {
+    .ant-steps-item-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .ant-steps-item-finish {
+    .ant-steps-item-icon {
+      border-color: $primary-color;
+    }
+    .ant-steps-item-icon > .ant-steps-icon {
+      color: $primary-color;
+    }
+  }
+
+  .ant-steps
+    .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
+    > .ant-steps-item-container[role="button"]:hover
+    .ant-steps-item-icon {
+    border-color: $primary-color;
+  }
+
+  .ant-steps
+    .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
+    > .ant-steps-item-container[role="button"]:hover
+    .ant-steps-item-icon
+    .ant-steps-icon {
+    color: $primary-color;
+  }
+
+  .ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after {
+    height: 2rem;
+    background: $primary-color;
+    @media (max-width: 575.98px) {
+      height: inherit;
+    }
+  }
+
+  //Content
+  .ant-steps-item-content {
+    outline: none;
+    margin-bottom: 1rem;
+  }
+
+  .ant-steps
+    .ant-steps-item:not(.ant-steps-item-active)
+    > .ant-steps-item-container[role="button"]:hover
+    .ant-steps-item-title,
+  .ant-steps
+    .ant-steps-item:not(.ant-steps-item-active)
+    > .ant-steps-item-container[role="button"]:hover
+    .ant-steps-item-subtitle,
+  .ant-steps
+    .ant-steps-item:not(.ant-steps-item-active)
+    > .ant-steps-item-container[role="button"]:hover
+    .ant-steps-item-description {
+    color: $primary-color;
+  }
+
+  //Min
+  .ant-steps-item-title {
+    @media (max-width: 575.98px) {
+      width: 30rem;
+    }
+  }
+  .ant-steps-item-container {
+    @media (max-width: 575.98px) {
+      display: flex;
+      width: 20rem;
+    }
+  }
+
+  .ant-steps-item-content {
+    @media (max-width: 575.98px) {
+      display: flex;
+      margin: 0;
+      width: 20rem;
+    }
+  }
+}
diff --git a/styles/index/contact.scss b/styles/index/contact.scss
index 7df7153b..d3d8f08c 100644
--- a/styles/index/contact.scss
+++ b/styles/index/contact.scss
@@ -1,112 +1,120 @@
-.page-content-contact {
-  display: flex;
-  margin: 3rem 1rem;
-
-  .container-fluid-contact {
-    width: 40%;
-    @media (max-width: 1199.98px) {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
+$primary-color: #39b54a !important;
+$bg-color: #f0f2f5 !important;
 
-  .warp-card-contact {
+.warp-contact-page {
     width: 100%;
-    margin: 1rem 0;
-    .card-contact {
-      width: 100%;
-      min-height: 15vh;
-      height: auto;
-      border-radius: 1rem;
-      border: 1px solid #03a9f4;
-      background-color: white;
-      .contact {
-        display: flex;
-        margin: 1rem;
-        width: auto;
-
-        .contact-img {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 1rem;
-          width: 20%;
-          background-color: white;
-          display: flex;
-          justify-content: center;
-          img {
-            width: 4rem;
-            height: 4rem;
-          }
-        }
+    height: 100vh;
+    // background: $bg-color;
 
-        .contact-data {
-          width: 60%;
-          margin-left: 1rem;
-          h4 {
-            text-align: start;
-          }
-
-          h6 {
-            text-align: start;
-            margin-bottom: 0 !important;
-          }
-          .rs-tag-group {
-            padding: 0.5rem 0;
-          }
-
-          @media (max-width: 575.98px) {
-            width: 100%;
-            margin-left: 0;
+    .page-content {
+        padding-top: 3rem;
+
+        .container-fluid {
             display: flex;
             flex-direction: column;
-            align-items: center;
-          }
-        }
+            .head-content {
+                h1.name-header {
+                    font-family: $font-header;
+                }
 
-        .contact-icon {
-          width: 20%;
-        }
+                .title-about {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    h6 {
+                        margin-top: 0.5rem;
+                        color: $font-text-sub;
+                        font-style: italic;
+                    }
+                }
+            }
+            .detail-content {
+                display: flex;
+                flex-direction: column;
+                margin: 2rem 3rem;
+
+                @media (max-width: 575.98px) {
+                    margin: 0;
+                }
+
+                .data-detail-content {
+                    display: flex;
+                    justify-content: space-evenly;
+                    margin-bottom: 2rem;
+
+                    @media (max-width: 768px) {
+                        flex-direction: column;
+                        align-items: center;
+                        // margin-top: 1rem;
+                    }
+
+                    .title-content {
+                        padding: 0 3rem;
 
-        @media (max-width: 575.98px) {
-          flex-direction: column;
-          align-items: center;
+                        @media (max-width: 768px) {
+                            padding: 0;
+                        }
+
+                        .header-title-content {
+                            font-weight: bold !important;
+                        }
+
+                        .sub-title-content {
+                            margin-left: 1rem;
+                        }
+
+                        h6 {
+                            text-align: start;
+                            opacity: 0.8;
+                            margin-bottom: 0.5rem !important;
+                            font-weight: lighter;
+                        }
+                    }
+                    .more-content {
+                        padding: 0 3rem;
+                        display: flex;
+
+                        h6 {
+                            margin-top: 1rem;
+                            font-weight: bold;
+                            text-align: center;
+                        }
+                    }
+                }
+            }
         }
-      }
-      @media (max-width: 1199.98px) {
-        min-height: 10vh !important;
-      }
     }
 
-    @media (max-width: 1199.98px) {
-      width: 70%;
+    .ant-card-actions > li {
+        display: flex;
+        justify-content: center;
     }
-
-    @media (max-width: 575.98px) {
-      width: 100% !important;
+    .ant-card-actions > li:not(:last-child) {
+        border-right: none;
     }
-  }
-
-  .timeline-contact {
-    display: flex;
-    justify-content: center;
-    width: 60%;
-    height: 10vh;
-    padding: 1rem 1rem 1rem 2rem;
-    .rs-carousel {
-      height: 50vh;
-      width: 90%;
+    .ant-skeleton-content .ant-skeleton-paragraph > li + li {
+        margin-top: 0;
     }
 
-    @media (max-width: 1199.98px) {
-      display: none;
-    }
-  }
+    // .ant-card-actions > li > span a:not(.ant-btn):hover,
+    // .ant-card-actions > li > span > .anticon:hover {
+    //     color: $primary-color;
+    // }
+
+    // .ant-card {
+    //     border-radius: 1rem;
+    // }
 
-  @media (max-width: 1199.98px) {
-    justify-content: center;
-    align-items: center;
-  }
+    // .ant-card-bordered {
+    //     border-color: $primary-color;
+    // }
+    // .ant-card-actions {
+    //     border-top: 1px solid $primary-color;
+    //     border-radius: 0 0 1rem 1rem;
+    // }
+    .ant-card-bordered {
+        @media (max-width: 1024px) {
+            margin: 1rem;
+        }
+    }
 }
diff --git a/styles/index/project.scss b/styles/index/project.scss
deleted file mode 100644
index 9bc1e476..00000000
--- a/styles/index/project.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-.warp-detail {
-  position: absolute;
-  width: 100%;
-  min-height: 100vh;
-  height: auto;
-  background-color: #f3f5f7;
-
-  .page-detail {
-    padding: 2rem 1rem 0 1rem !important;
-
-    .container-detail {
-      border-radius: 1rem;
-      background-color: white;
-      text-align: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-
-      .item-header {
-        text-align: start;
-        width: 50rem;
-        padding: 3rem 0;
-
-        .card-text {
-          text-align: center;
-        }
-        .text-group {
-          padding-left: 2rem;
-        }
-      }
-
-      .btn-close {
-        width: 3rem;
-        padding: 1rem;
-        .close {
-          font-size: 2rem;
-          span {
-            user-select: none;
-          }
-        }
-
-        .close:focus {
-          outline: none;
-        }
-      }
-    }
-
-    .container-fluid {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.page-content-detail {
-  display: flex;
-  width: 100%;
-  min-height: 30vh;
-  height: auto;
-  position: relative;
-  .container-fluid {
-    text-align: center;
-    margin-top: 2rem;
-    padding-right: 10px;
-    padding-left: 10px;
-
-    @media (max-width: 1270px) {
-      flex-direction: column !important;
-    }
-
-    h2 {
-      margin-top: 1.5rem;
-      margin-bottom: 2rem;
-    }
-    .textarea-center {
-      margin: 1rem 2rem;
-      text-align: center;
-
-      text {
-        margin: 0.7rem 0;
-        color: black !important;
-      }
-    }
-
-    .warp-card {
-      .card-group {
-        .card {
-          cursor: default;
-          box-shadow: 0 0 0 0 !important;
-          align-items: center;
-
-          img {
-            width: 20rem;
-            height: 10rem;
-
-            @media (max-width: 991.98px) {
-              width: 10rem;
-              height: 5rem;
-            }
-          }
-
-          .card-body {
-            text-align: center;
-
-            .card-title {
-              user-select: none;
-              text-align: center;
-              margin-bottom: 0.5rem !important;
-            }
-            .card-text {
-              margin-bottom: 0.5rem;
-              text {
-                text-align: start !important;
-              }
-            }
-
-            .btn {
-              cursor: pointer;
-            }
-          }
-        }
-
-        .card:hover {
-          box-shadow: 0 0 0 0 !important;
-        }
-      }
-    }
-  }
-
-  .container-fluid.non {
-    .non {
-      display: none;
-    }
-  }
-}
diff --git a/styles/index/services.scss b/styles/index/services.scss
deleted file mode 100644
index e240f117..00000000
--- a/styles/index/services.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-$margin-rs-steps: 2rem;
-$font-rs-title: 1.2rem;
-$font-rs-description: 1rem;
-
-.page-content-services {
-    display: flex;
-    margin: 3rem 1rem;
-  
-    .rs-btn-group {
-      margin: 1rem 0.5rem 2rem 0.5rem;
-    }
-  
-    .normal {
-      width: 50%;
-      .rs-steps.rs-steps-vertical {
-        display: contents !important;
-  
-        .rs-steps-item-title {
-          font-size: $font-rs-title;
-        }
-  
-        .rs-steps-item-description {
-          font-size: $font-rs-description;
-        }
-  
-        .rs-steps-item.rs-steps-item-status-wait {
-          margin-left: $margin-rs-steps;
-        }
-  
-        .rs-steps-item.rs-steps-item-status-process {
-          margin-left: $margin-rs-steps;
-        }
-  
-        .rs-steps-item.rs-steps-item-status-finish {
-          margin-left: $margin-rs-steps;
-        }
-      }
-      @media (max-width: 1023px) {
-        display: none !important;
-      }
-    }
-  
-    .normal-message {
-      margin-top: 3rem;
-      width: 50%;
-  
-      .rs-message {
-        border-radius: 1rem;
-        padding: 1rem;
-      }
-  
-      h5.rs-message-header {
-        text-align: start;
-        font-size: $font-rs-title !important;
-      }
-  
-      .rs-message-body {
-        p {
-          color: black;
-          p {
-            line-height: 1.5rem;
-            font-size: 0.7rem !important;
-            color: red;
-          }
-          h4,
-          h5 {
-            text-align: start;
-            font-weight: 300;
-          }
-        }
-  
-        a {
-          margin-right: 0.5rem;
-          text-decoration: none !important;
-        }
-      }
-  
-      @media (max-width: 1023px) {
-        display: none;
-      }
-    }
-  
-    .mobile {
-      display: none;
-      @media (max-width: 1023px) {
-        display: block;
-      }
-  
-      .rs-steps.rs-steps-vertical {
-        width: 100% !important;
-      }
-    }
-  
-    .mobile-message {
-      display: none;
-      @media (max-width: 1023px) {
-        display: block;
-        width: 100%;
-        margin-top: 3rem;
-        .rs-message {
-          border-radius: 1rem;
-          padding: 1rem;
-        }
-  
-        h5.rs-message-header {
-          text-align: start;
-          font-size: $font-rs-title !important;
-        }
-  
-        .rs-message-body {
-          p {
-            color: black;
-            p {
-              line-height: 1.5rem;
-              font-size: 0.7rem !important;
-              color: red;
-            }
-            h4,
-            h5 {
-              text-align: start;
-              font-weight: 300;
-            }
-          }
-  
-          a {
-            margin-right: 0.5rem;
-            text-decoration: none !important;
-          }
-        }
-      }
-    }
-  
-    @media (max-width: 1023px) {
-      display: block;
-    }
-  }
-  
\ No newline at end of file
diff --git a/styles/index/society.scss b/styles/index/society.scss
new file mode 100644
index 00000000..82ad5361
--- /dev/null
+++ b/styles/index/society.scss
@@ -0,0 +1,79 @@
+.warp-society-page {
+  .page-content {
+    padding-top: 3rem;
+
+    .container-fluid {
+      display: flex;
+      flex-direction: column;
+      .head-content {
+        h3 {
+          font-size: 2rem !important;
+          margin-bottom: 1rem !important;
+        }
+      }
+      .detail-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 2rem 3rem;
+
+        @media (max-width: 575.98px) {
+          flex-direction: column;
+        }
+        img {
+          height: 20rem;
+          margin-right: 1rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+            height: 18rem;
+          }
+        }
+
+        .data-detail-content {
+          margin-top: 1rem;
+          display: flex;
+          flex-direction: column;
+
+          @media (max-width: 575.98px) {
+            margin-top: 1rem;
+          }
+
+          .title-content {
+            padding: 0 3rem;
+            margin-bottom: 1rem;
+
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+            
+            h5{
+              text-align: start;
+              font-weight: lighter !important;
+            }
+
+            .header-title-content {
+              display: flex;
+              h6 {
+                font-weight: bold !important;
+              }
+              h5 {
+                font-size: 1rem !important;
+                margin-left: 1rem;
+                opacity: 0.8;
+                margin-bottom: 0.5rem !important;
+                font-weight: lighter;
+              }
+            }
+
+            h6 {
+              text-align: start;
+              opacity: 0.8;
+              margin-bottom: 0.5rem !important;
+              font-weight: lighter;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/styles/info.scss b/styles/info.scss
new file mode 100644
index 00000000..9f71e123
--- /dev/null
+++ b/styles/info.scss
@@ -0,0 +1,231 @@
+$primary-color: #39b54a !important;
+$border: 1px solid #e4e2f0;
+$font-text-p: #978bab !important;
+$small-text: 0.9rem !important;
+
+.warp-info {
+  margin: 3rem 1rem;
+  .page-content {
+    display: flex;
+    justify-content: space-evenly;
+
+    @media (max-width: 575.98px) {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .container-data {
+      @media (max-width: 1024px) {
+        width: 60%;
+        padding: 1rem;
+      }
+
+      @media (max-width: 575.98px) {
+        width: 100%;
+        padding: 0.5rem;
+      }
+
+      width: 50%;
+      padding: 0 4rem 0 2rem;
+      .title-data {
+        display: flex;
+        padding: 1rem;
+
+        h6 {
+          margin-bottom: 0 !important;
+          text-align: start;
+        }
+      }
+
+      .content-data {
+        display: flex;
+        justify-content: start;
+        @media (max-width: 575.98px) {
+          flex-direction: column;
+        }
+
+        // padding: 1rem;
+        border: $border;
+        border-radius: 1rem;
+
+        .main-data {
+          padding: 1rem;
+          display: flex;
+          flex-direction: column;
+          margin-right: 2rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+          }
+
+          .card-data {
+            margin: 0;
+            .title {
+              display: flex;
+              justify-content: space-between;
+
+              h5 {
+                text-align: start;
+                margin-bottom: 0 !important;
+              }
+              p {
+                color: $font-text-p;
+                margin-bottom: 0 !important;
+              }
+            }
+          }
+        }
+
+        .progress {
+          height: 0.5rem;
+          margin: 0.5rem;
+          margin-bottom: 1rem !important;
+        }
+
+        .other-data {
+          border-left: $border;
+          padding: 1rem;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          @media (max-width: 575.98px) {
+            align-items: center;
+            border-left: none;
+          }
+
+          .title-other-data {
+            display: flex;
+
+            h5 {
+              padding-top: 0.5rem;
+              margin-bottom: 0.5rem !important;
+            }
+
+            img {
+              width: 1.5rem;
+              height: 1.5rem;
+              margin-right: 1rem;
+            }
+          }
+          p {
+            font-size: $small-text;
+            color: $font-text-p;
+            margin-bottom: 0.5rem !important;
+          }
+          h6 {
+            font-size: $small-text;
+            text-align: start;
+            margin-bottom: 0.5rem !important;
+          }
+        }
+      }
+    }
+
+    .content-data-agency {
+      @media (max-width: 1024px) {
+        width: 40%;
+      }
+
+      @media (max-width: 575.98px) {
+        width: 100%;
+      }
+
+      width: 50%;
+      .head-agency {
+        display: flex;
+        align-items: center;
+        padding-left: 3rem;
+        margin-bottom: 1rem;
+        @media (max-width: 575.98px) {
+          padding-left: 1rem;
+          justify-content: flex-start;
+        }
+
+        h2 {
+          padding: 0;
+        }
+        img {
+          width: 5rem;
+          height: 5rem;
+        }
+
+        .title-agency {
+          display: flex;
+          flex-direction: column;
+          padding: 1rem;
+          align-items: flex-start;
+        }
+
+        @media (max-width: 575.98px) {
+          margin-bottom: 0;
+        }
+      }
+      .main-agency {
+        display: flex;
+        flex-direction: column;
+
+        .main-agency-row {
+          display: flex;
+          justify-content: space-evenly;
+          .title-main-agency {
+            padding: 0 2rem;
+            h6 {
+              font-weight: bold !important;
+            }
+          }
+          .detail-main-agency {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            h6 {
+              font-weight: bold !important;
+              text-align: start;
+            }
+
+            a {
+              p.p-click {
+                cursor: pointer;
+                color: $primary-color;
+                margin-bottom: 0;
+                font-weight: bold;
+              }
+              p.p-click:hover {
+                color: #79d2ae !important;
+              }
+            }
+            p {
+              margin-bottom: 0 !important;
+            }
+          }
+        }
+      }
+
+      .main-agency-row-mobile {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding-left: 4rem;
+
+        @media (max-width: 575.98px) {
+          margin-top: 1rem;
+          padding-left: 1rem;
+        }
+
+        .detail-main-agency {
+          a {
+            p.p-click {
+              cursor: pointer;
+              color: $primary-color;
+              margin-bottom: 0;
+              font-weight: bold;
+            }
+            p.p-click:hover {
+              color: #79d2ae !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/styles/main.scss b/styles/main.scss
index 4a103c14..51b114e3 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1,151 +1,71 @@
-//Table
-.warp-table {
-  display: flex;
+.warp-main {
+  // min-height: 100vh;
+  height: auto;
 
-  .table-main {
-    position: relative;
-    margin: 5rem;
-    .react-bs-table-container {
-      .react-bs-table {
-        background-color: white;
-      }
-
-      .react-bs-table-bordered {
-        border-radius: 0.2rem 0.2rem 0 0;
-        .react-bs-container-header {
-          background-color: #cccccc;
-          border-radius: 0.2rem 0.2rem 0 0;
-
-          table {
-            thead {
-              tr {
-                th {
-                  text-align: center !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-/* Main Content */
-.page-content-wrapper {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: 100vh;
-  position: relative;
-  padding: 0 15px;
-  transition: all 0.5s;
-  background-color: #f3f5f7;
-  // background: linear-gradient(to right, rgb(116, 235, 213), rgb(172, 182, 229));
-  padding-left: 5rem;
-
-  @media (max-width: 991.98px) {
-    padding-left: 1rem;
-  }
-
-  .container-fluid {
-    margin-top: 5rem;
-    padding: 0;
+  .page-content-main {
+    // padding-left: 150px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 0 15px;
+    transition: all 0.5s;
 
     @media (max-width: 768px) {
-      margin-top: 1rem !important;
+     padding-top: 1rem;
     }
-  }
 
-  .data-source {
-    display: flex;
-    justify-content: center;
-    margin: 2rem 0;
-    img {
-      width: 3rem;
-      height: 3rem;
-      cursor: pointer;
-      @media (max-width: 575.98px) {
-        width: 2rem;
-        height: 2rem;
+    .container-fluid-main {
+      
+      @media (max-width: 1224px) {
+        margin-left: 0 !important;
+        margin-left: 1rem !important;
       }
-    }
-    .text-source {
-      display: flex;
-      flex-direction: column;
-      margin: 1rem;
-
-      h6 {
-        user-select: none;
-        @media (max-width: 575.98px) {
-          font-size: 0.7rem !important;
-        }
+      width: 100%;
+      // margin-left: 150px;
+      // margin-right: 1rem;
+      margin-top: 2rem;
+      padding: 0;
+
+      @media (max-width: 768px) {
+        margin-top: 1rem !important;
+        margin: 0 !important;
       }
-    }
-  }
-
-  .warp-icon-data {
-    display: flex;
-    justify-content: center;
-
-    .icon-data {
-      display: flex;
-
-      .icon-content {
-        margin: 1rem 2rem;
-
-        svg {
-          margin: 0 1rem;
-        }
 
-        p {
-          color: black;
-          margin: 1rem;
-        }
-        .circle-bg {
-          fill: none;
-          stroke: #eee;
-          stroke-width: 5px;
-        }
-
-        .progress-ring__circle {
-          fill: none;
-          transform: rotate(-90, 60, 60);
-          stroke-width: 4px;
-
-          animation: change 1s linear;
-        }
+      .info-main {
+        display: flex;
+        justify-content: center;
+        margin-top: 2rem !important;
+        margin: 1rem;
+
+        .warp-chart-main {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 1rem;
+          .chart-row {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+          }
 
-        @keyframes change {
-          from {
-            stroke-dasharray: 90, 250;
-          } /*0%*/
-          to {
-            stroke-dasharray: 250, 250;
-          } /*100%*/
+          .chart-col{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 2rem;
+          }
         }
       }
     }
   }
 }
 
-.wrapper.menuDisplayed .page-content-wrapper {
-  padding-left: 215px;
-  @media (max-width: 991.98px) {
-    padding-left: 1rem;
-  }
+.ant-progress-outer{
+  padding: 0 0.5rem !important;
 }
 
-.text-center {
-  user-select: none;
-  .card {
-    padding: 1rem;
-    max-width: 50%;
-    width: auto;
-    height: auto;
-    margin: 1rem 0;
-    border-radius: 0.7rem;
-  }
+.ant-progress-text{
+  display: none !important;
 }
 
 .__react_component_tooltip.type-dark.place-top:after {
diff --git a/styles/map.scss b/styles/map.scss
index 652cfbd7..cd09c54d 100644
--- a/styles/map.scss
+++ b/styles/map.scss
@@ -1,48 +1,38 @@
 .warp-map {
-    display: flex;
-    margin: 1rem 0;
-    align-items: center;
-    text-align: center;
-  
-    @media (max-width: 1199.98px) {
-      flex-direction: column;
-      align-items: center;
-    }
-  
-    .map-Img {
-      display: flex;
-      justify-content: center;
-      width: 40%;
-      text-align: center;
-  
-      @media (max-width: 1199.98px) {
-        width: 100%;
-      }
-  
-      svg {
-        width: 600px;
-        height: 600px;
-  
-        @media (max-width: 575.98px) {
-          width: 800px;
-          height: 400px;
-        }
-      }
-    }
-  
-    .map-content {
-      display: flex;
-      justify-content: center;
-      width: 60%;
-      text-align: center;
-    }
-  
-    .chart-contents {
-      display: flex;
-      background-color: white;
-      border-radius: 0.5rem;
-      margin: 0.5rem 1rem;
-      padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin-right: 0 !important;
+
+  @media (max-width: 1199.98px) {
+    width: 100%;
+  }
+
+  svg {
+    width: 400px;
+    height: 500px;
+
+    @media (max-width: 575.98px) {
+      width: 300px;
+      height: 400px;
     }
   }
-  
\ No newline at end of file
+}
+
+.warp-small-map {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin-right: 0 !important;
+
+  svg {
+    width: 300px;
+    height: 400px;
+  }
+ 
+}
+
+.warp-load-map {
+  width: 400px;
+  height: 500px;
+}
diff --git a/styles/menu-icon.scss b/styles/menu-icon.scss
deleted file mode 100644
index 4574683d..00000000
--- a/styles/menu-icon.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.warp-menu {
-  display: flex;
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-
-  justify-content: center;
-
-  .menu {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding: 0;
-
-    @media (max-width: 991.98px) {
-      padding: 1rem !important;
-    }
-
-    .warp-icon {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      border-radius: 0.5rem;
-      margin: 0 1rem;
-      background-color: white;
-      padding: 0.5rem 0;
-
-      @media (max-width: 575.98px) {
-        flex-direction: column;
-        align-items: center;
-        background-color: #f5f9fc;
-      }
-
-      .icon {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 5rem;
-
-        @media (max-width: 991.98px) {
-          padding: 0 !important;
-          margin: 0 1.5rem !important;
-        }
-
-        @media (max-width: 1199.98px) {
-          margin: 0 2rem;
-        }
-
-        .icon-img {
-          img {
-            width: 3rem;
-            height: 3rem;
-            margin: 1rem;
-          }
-          img.hover {
-            display: none;
-          }
-        }
-
-        .icon-img:hover {
-          img.hover {
-            display: inherit !important;
-          }
-          img {
-            display: none !important;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/styles/nav.scss b/styles/nav.scss
index 413f4cb3..c132b031 100644
--- a/styles/nav.scss
+++ b/styles/nav.scss
@@ -1,131 +1,82 @@
-//logoMain
-.warp-logo-main {
-  ul {
-    padding: 0.5rem;
-    img {
-      cursor: pointer;
-      width: 3rem;
-      height: 3rem;
-    }
-  }
-}
+$font-color: #071d40 !important;
+$font-header: "Frank Ruhl Libre" !important;
+$font-base: "Prompt", sans-serif;
+$primary-color: #39b54a !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
+$line-color: #e8e9fe;
 
-//manu
-.warp-manu {
+nav {
   width: 100%;
+  height: 5rem;
   ul {
+    user-select: none;
+    padding: 0.5rem;
     display: flex;
-    justify-content: flex-end !important;
-    list-style: none;
+    justify-content: space-between;
   }
 }
 
-nav {
+//Navbar-Scroll
+// nav {
+//   position: fixed;
+//   width: 100%;
+//   min-height: 5rem;
+//   top: 0;
+//   z-index: 1000;
+//   ul {
+//     user-select: none;
+//     padding: 0.5rem;
+//     display: flex;
+//     justify-content: space-between;
+//   }
+// }
+
+// nav.scroll {
+//   position: fixed;
+//   width: 100%;
+//   top: 0;
+//   z-index: 1000;
+//   background-color: greenyellow;
+//   transition: background-color 0.4s ease-out;
+// }
+
+.warp-main {
   ul {
-    .warp-table {
-      width: 20%;
-    }
-  }
-}
-
-li {
-  display: flex;
-  cursor: pointer;
-  p {
-    font-size: 1.1rem !important;
     cursor: pointer;
-    color: black !important;
-    margin: 1rem 1.5rem !important;
-    margin-top: 1.7rem !important;
-  }
-  p:hover {
-    color: #bedadc;
-  }
-}
-
-//Index
-nav {
-  background-color: white;
-  width: 100%;
-  min-height: 3vh;
-  height: auto;
-  display: flex;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
-  z-index: 99;
-
-  @media (max-width: 993px) {
-    display: none !important;
-  }
-
-  //logo
-  ul {
-    width: 100%;
-    display: flex;
-
-    .nav-logo {
-      min-width: 40%;
-      list-style: none;
-      display: flex;
-      li {
-        margin-bottom: 0.5rem;
-
-        img {
-          margin-top: 1rem;
-          width: 5rem;
-          height: 2.5rem;
-        }
-        h4{
-          margin: 0;
-          margin-top: 1.8rem;
-        }
+    user-select: none;
+    margin-left: 0;
+    li.hamberger-active {
+      padding-left: 250px;
+      img {
+        width: 4rem;
+        height: 2rem;
       }
     }
-  }
-}
-
-nav.nav-main {
-  min-height: 2vh;
-  line-height: 2vh;
-}
-
-nav.nav-other {
-  position: fixed;
-  min-height: 2vh;
-  line-height: 2vh;
 
-  .warp-nav-sidebar {
-    width: 100%;
-  }
-
-  ul {
-    width: 100%;
-    list-style: none;
-    .warp-table {
-      width: 100%;
+    li.hamberger-non-active {
+      img {
+        width: 4rem;
+        height: 2rem;
+      }
     }
   }
 }
 
 .collapsible-menu {
-  @media (min-width: 993px) {
-    display: none;
-  }
-
+  height: 4rem;
+  padding: 1rem 0;
   background-color: rgb(255, 255, 255);
   box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
 
-  label {
-    text-align: center;
-    font-size: 1.5rem;
-    display: block;
-    cursor: pointer;
-    // background: url(menu.png) no-repeat left center;
-    padding: 1rem;
-    margin-bottom: 0 !important;
-  }
+  .warp-nav-sidebar {
+    display: flex;
+    padding: 0 1rem;
+    justify-content: space-between;
 
-  label:hover {
-    color: salmon;
+    h2 {
+      font-family: $font-header;
+    }
   }
 
   .menu-content {
@@ -139,6 +90,7 @@ nav.nav-other {
 
       li {
         p {
+          color: $font-color;
           display: block;
           padding: 10px;
           text-decoration: none;
@@ -147,48 +99,127 @@ nav.nav-other {
     }
   }
   .menu-content.show {
-    max-height: 100vh;
+    display: block;
+    min-height: 100vh;
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+
+    opacity: 1;
+    background-color: #b3e5cc;
+    visibility: visible;
+
+    nav {
+      min-height: 2rem;
+      display: flex;
+      justify-content: flex-end;
+      padding: 0.5rem 1rem;
+    }
+
     ul {
+      display: block;
+      height: 100vh;
+      width: 100%;
+      margin-left: 0 !important;
       padding: 0 !important;
       li {
         display: flex;
         flex-direction: column;
-        p {
+        width: 100%;
+        h5 {
           margin: 0.5rem !important;
         }
-        p:hover {
-          color: #c4def6 !important;
+        h5:hover {
+          color: $primary-color;
+        }
+      }
+      .menu-content-list {
+        height: 100vh;
+        margin-top: 2rem;
+        a{
+          width: 100%;
+          margin: 1rem 0;
         }
       }
     }
   }
+}
 
-  .warp-nav-sidebar {
-    width: 100% !important;
+ul {
+  margin-left: 4rem;
+  user-select: none;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+
+  li {
     display: flex;
-    justify-content: center;
+    align-items: center;
 
-    .nav-logo {
-      margin-bottom: 1rem;
-      li {
-        img {
-          margin-top: 1rem;
-          width: 5rem;
-          height: 2.5rem;
-        }
-        h4{
-          margin-top: 1.8rem;
-        }
+    .btn:focus {
+      box-shadow: none;
+
+      p:focus {
+        box-shadow: none;
       }
     }
+    h2 {
+      cursor: pointer !important;
+      font-size: 2rem !important;
+      padding: 0 1rem !important;
+      font-family: $font-header;
+    }
+    p {
+      cursor: pointer;
+      color: $font-color;
+      margin: 1rem !important;
+    }
+    p:hover {
+      color: $primary-color;
+    }
 
-    .box-hamberger {
-      width: 3.5rem;
-      height: 4rem;
+    p.li-buttom-line {
+      border: $border-bg-color;
+      border-radius: 1.5rem;
+      padding: 0.5rem 2rem !important;
+      margin: 0 0.5rem 0 2rem !important;
+    }
 
-      a.hamberger {
-        top: 2.4rem;
-      }
+    p.li-buttom-line:hover {
+      color: white !important;
+      background: $bg-color;
+    }
+
+    p.li-buttom-line-active {
+      border: $border-bg-color;
+      border-radius: 1.5rem;
+      padding: 0.5rem 2rem !important;
+      margin: 0 1rem 0 0.5rem !important;
+      background: $bg-color;
+      color: white !important;
+    }
+    p.li-buttom-line-active:hover {
+      margin: 0 1rem 0 0.5rem !important;
+      color: $font-color;
+      border: $border-bg-color;
+      background: white !important;
     }
   }
 }
+
+//SideBar
+.ant-drawer-wrapper-body {
+  user-select: none;
+}
+
+.ant-drawer-body {
+  p:hover {
+    color: $primary-color;
+  }
+}
diff --git a/styles/sidebar.scss b/styles/sidebar.scss
index a1002bbc..38512739 100644
--- a/styles/sidebar.scss
+++ b/styles/sidebar.scss
@@ -1,162 +1,11 @@
-//sidebar
-.warp-main {
-  nav {
-    transition: all 0.5s;
-    ul {
-      justify-content: flex-start;
-    }
-    .toggle {
-      padding-left: 230px;
-    }
-  }
-}
-
-.sidebar-wrapper {
-  @media (max-width: 768px) {
-    position: absolute;
-  }
-
-  z-index: 1;
-  position: fixed;
-  width: 0;
-  height: 100vh;
-  overflow-y: hidden;
-  background: white;
-  box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.2);
-  opacity: 0.9;
-  transition: all 0.5s;
-  width: 4rem;
-
-  .sidebar-nav {
-    display: none;
-  }
-
-  .non-sidebar-nav {
-    width: 100%;
-    position: absolute;
-    top: 5rem;
-    padding: 0;
-    list-style: none;
-    transition: all 0.5s;
-
-    @media (max-width: 768px) {
-      top: 1rem !important;
-    }
-
-    .icon-sidebar {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      img {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin: 0.5rem;
-        cursor: pointer;
-      }
-      p {
-        font-size: 0.7rem !important;
-      }
-    }
-  }
-
-  @media (max-width: 992px) {
-    display: none;
-  }
-}
-
-.sidebar-wrapper:hover {
-  width: 200px;
-  opacity: 1 !important;
-
-  @media (max-width: 768px) {
-    width: 210px !important;
-  }
-
-  .sidebar-nav {
-    cursor: pointer;
-    position: absolute;
-    top: 4rem;
-    display: flex;
-    flex-direction: column;
-
-    @media (max-width: 768px) {
-      top: 1rem !important;
-    }
-  }
+$primary-color: #39b54a !important;
 
-  .non-sidebar-nav {
-    display: none;
-    .icon-sidebar {
-      display: none !important;
-    }
-  }
-}
-
-.menu-toggle {
-  transition: all 0.3s;
-  font-size: 2em;
-}
-/* Change the width of the sidebar to display it*/
-.wrapper.menuDisplayed .sidebar-wrapper {
-  width: 200px;
-
-  @media (max-width: 768px) {
-    width: 210px !important;
-  }
-
-  @media (max-width: 575.98px) {
-    width: 100% !important;
-  }
-  .non-sidebar-nav {
-    display: none;
-  }
-  .sidebar-nav {
-    position: absolute;
-    top: 3.9rem;
-    display: flex;
-    flex-direction: column;
-
-    @media (max-width: 768px) {
-      top: 1rem !important;
-    }
-  }
-}
-
-/* Sidebar styling */
-.sidebar-nav {
-  padding: 0 !important;
-  list-style: none;
-  transition: all 0.5s;
-  width: 100%;
-  text-align: center;
-}
-
-.sidebar-nav li {
-  display: flex;
-  justify-content: flex-start;
-  line-height: 40px;
-  width: 100%;
-  transition: all 0.3s;
-  padding: 10px;
-  box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.2);
-}
-
-.sidebar-nav li img {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: 0.5rem;
-  cursor: pointer;
-}
-
-.sidebar-nav li a {
-  display: block;
-  text-decoration: none;
-  // color:#ddd;
-  color: black !important;
+.ant-drawer-wrapper-body {
   user-select: none;
 }
 
-.sidebar-nav li:hover {
-  background: #b3cbe5;
-  box-shadow: 0 4px 4px -4px #333;
+.ant-drawer-body {
+  p:hover {
+    color: $primary-color;
+  }
 }