diff --git a/package.json b/package.json
index 1f4e3a6..96526b3 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-github-btn": "^1.0.6",
+    "smooth-scroll-into-view-if-needed": "^1.1.23",
     "styled-components": "^4.3.2",
     "styled-reset": "^4.0.0"
   },
diff --git a/src/App.js b/src/App.js
index 465894f..712daad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,8 +3,10 @@ import ColorTitle from './components/ColorTitle';
 import Color from './components/Color';
 import ColorParam from './components/ColorParam';
 import InfoModal from './components/InfoModal';
+import IconInfo from './components/IconInfo';
 import Header from './components/Header';
 import styled from 'styled-components';
+import useModal from './hooks';
 import colors from './assets/colors.json';
 import allColors from './assets/colors.full.json';
 const Wrapper = styled.section`
@@ -34,6 +36,7 @@ const SelectedColor = JSON.parse(localStorage.getItem('SELECTED_COLOR') || 'null
 };
 const TheColors = process.env.NODE_ENV === 'production' ? allColors : colors;
 const App = () => {
+  const { visible: modalVisible, showModal, closeModal } = useModal();
   const [currColor, setCurrColor] = useState(SelectedColor);
   useEffect(() => {
     document.body.style.backgroundColor = currColor.hex;
@@ -50,9 +53,10 @@ const App = () => {
       <Wrapper>
         <nav>
           <ul className="colors">
-            {TheColors.map(color => {
+            {TheColors.map((color, idx) => {
               return (
                 <Color
+                  seq={idx + 1}
                   isCurr={currColor.name == color.name}
                   setCurrColor={handleColorClick}
                   {...color}
@@ -66,7 +70,8 @@ const App = () => {
         <ColorTitle {...currColor}></ColorTitle>
         <Header />
       </Wrapper>
-      <InfoModal />
+      <IconInfo showInfoModal={showModal} />
+      <InfoModal visible={modalVisible} bgColor={currColor.hex} closeModal={closeModal} />
     </>
   );
 };
diff --git a/src/Global.style.js b/src/Global.style.js
index aa63f83..f8940fd 100644
--- a/src/Global.style.js
+++ b/src/Global.style.js
@@ -27,17 +27,13 @@ const GlobalStyle = createGlobalStyle`
   }
   body{
     -webkit-overflow-scrolling: touch;
-    overflow:scroll;
+    overflow:hidden;
     margin:0 auto;
-    min-height:100vh;
-    position: relative;
     background-image: url(${BodyBg});
-    transition:background-color .8s ease-in;
+    transition:background-color 1.6s;
 
   }
-  #root{
-    min-height:100vh;
-  }
+
 
   @media screen and (min-width: 320px){
       html {
diff --git a/src/assets/img/bg.texture.png b/src/assets/img/bg.texture.png
index 39a084a..e37f2bc 100644
Binary files a/src/assets/img/bg.texture.png and b/src/assets/img/bg.texture.png differ
diff --git a/src/components/Color.js b/src/components/Color.js
index 8b2224a..6844c94 100644
--- a/src/components/Color.js
+++ b/src/components/Color.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
 import CirclePercent from './CirclePercent';
 const Wrapper = styled.li.attrs(({ color }) => ({
   style: { borderTopColor: color }
@@ -13,11 +15,11 @@ const Wrapper = styled.li.attrs(({ color }) => ({
   margin: 0.4rem;
   cursor: pointer;
   transition: all 0.5s;
-  &:hover,
-  &.curr {
-    box-shadow: 0 0 4px black;
+  &:hover {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
   }
   &.curr {
+    box-shadow: 0 0 4px black;
     text-shadow: 0 0 10px black;
   }
   .line1 {
@@ -29,6 +31,16 @@ const Wrapper = styled.li.attrs(({ color }) => ({
     .name {
       color: ${({ color }) => color};
       writing-mode: vertical-lr;
+      align-self: flex-end;
+      font-size: 0.8rem;
+      margin-left: 0.2rem;
+      font-weight: 800;
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+      .seq {
+        opacity: 0.5;
+      }
     }
     .cmyk {
       display: flex;
@@ -86,16 +98,19 @@ const Wrapper = styled.li.attrs(({ color }) => ({
   }
 `;
 
-const Color = ({ setCurrColor, isCurr, hex, name, pinyin, CMYK, RGB }) => {
+const Color = ({ setCurrColor, seq = 1, isCurr, hex, name, pinyin, CMYK, RGB }) => {
   const [r, g, b] = RGB;
   const [c, m, y, k] = CMYK;
+  const handleColorClick = ({ target }) => {
+    scrollIntoView(target, {
+      behavior: 'smooth',
+      block: 'center',
+      scrollMode: 'if-needed'
+    });
+    setCurrColor(hex);
+  };
   return (
-    <Wrapper
-      rgb={RGB}
-      className={isCurr && 'curr'}
-      onClick={setCurrColor.bind(null, hex)}
-      color={hex}
-    >
+    <Wrapper rgb={RGB} className={isCurr && 'curr'} onClick={handleColorClick} color={hex}>
       <div className="line1">
         <div className="cmyk">
           <i className="circle c">
@@ -111,7 +126,10 @@ const Color = ({ setCurrColor, isCurr, hex, name, pinyin, CMYK, RGB }) => {
             <CirclePercent progress={k} />
           </i>
         </div>
-        <h2 className="name">{name}</h2>
+        <h2 className="name">
+          <span className="seq">{seq}</span>
+          <span className="txt">{name}</span>
+        </h2>
       </div>
       <div className="line2">
         <p className="hex">{hex}</p>
diff --git a/src/components/ColorParam.js b/src/components/ColorParam.js
index c0d5521..0df25ac 100644
--- a/src/components/ColorParam.js
+++ b/src/components/ColorParam.js
@@ -13,6 +13,15 @@ const Wrapper = styled.section`
     &.rgb {
       color: #fff;
       text-align: right;
+      &.r {
+        color: rgb(255, 0, 0, 0.8);
+      }
+      &.g {
+        color: rgb(0, 255, 0, 0.8);
+      }
+      &.b {
+        color: rgb(0, 0, 255, 0.8);
+      }
     }
     &:before {
       content: attr(data-id);
diff --git a/src/components/IconInfo.js b/src/components/IconInfo.js
new file mode 100644
index 0000000..6aa4865
--- /dev/null
+++ b/src/components/IconInfo.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.aside`
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.62);
+`;
+
+const IconInfo = ({ showInfoModal }) => {
+  return (
+    <Wrapper onClick={showInfoModal}>
+      <svg
+        t="1567818024968"
+        className="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="2007"
+        width="30"
+        height="30"
+      >
+        <path
+          d="M512 0C229.226667 0 0 229.226667 0 512s229.226667 512 512 512 512-229.226667 512-512S794.773333 0 512 0z m0 938.666667C276.736 938.666667 85.333333 747.264 85.333333 512S276.736 85.333333 512 85.333333s426.666667 191.402667 426.666667 426.666667-191.402667 426.666667-426.666667 426.666667z m0-725.333334c-37.546667 0-64 31.573333-64 64s26.453333 64 64 64c37.525333 0 64-29.034667 64-64 0-34.986667-26.474667-64-64-64z m-42.666667 597.333334h85.333334V426.666667h-85.333334v384z"
+          p-id="2008"
+          fill="#eee"
+        ></path>
+      </svg>
+    </Wrapper>
+  );
+};
+
+export default IconInfo;
diff --git a/src/components/InfoModal.js b/src/components/InfoModal.js
index 58f250c..b0456b3 100644
--- a/src/components/InfoModal.js
+++ b/src/components/InfoModal.js
@@ -1,12 +1,112 @@
+/* eslint-disable react/jsx-no-target-blank */
 import React from 'react';
 import styled from 'styled-components';
-
+import GitHubButton from 'react-github-btn';
 const Wrapper = styled.section`
-  height: 20vh;
-  background: #333;
-  color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: none;
+  z-index: 999;
+
+  &.visible {
+    display: block;
+  }
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+  .info {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    padding: 0.8rem 1rem;
+    width: 80vw;
+    box-shadow: 0 0 9px black;
+    border-radius: 8px;
+    text-shadow: 0 0 8px black;
+    background-color: ${({ bgColor }) => {
+      return bgColor;
+    }};
+    > h2 {
+      text-transform: uppercase;
+      font-size: 1.4rem;
+      margin-bottom: 1rem;
+      font-weight: 800;
+    }
+    > p {
+      font-size: 0.6rem;
+      line-height: 1.4;
+      margin-bottom: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      a {
+        padding: 0 0.4rem;
+      }
+      &.btns {
+        margin-top: 2rem;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 44%;
+        text-shadow: none;
+      }
+    }
+  }
 `;
-export default function InfoModal() {
-  return <Wrapper>Info</Wrapper>;
+export default function InfoModal({ visible, closeModal, bgColor }) {
+  console.log('bgcolor', bgColor);
+
+  return (
+    <Wrapper bgColor={bgColor} className={visible && 'visible'}>
+      <div className="mask" onClick={closeModal}></div>
+      <div className="info">
+        <h2>chinese colors</h2>
+        <p>
+          <span>
+            Inspired by
+            <a href="http://nipponcolors.com" target="_blank">
+              Nipponcolors
+            </a>
+            &
+            <a href="http://zhongguose.com" target="_blank">
+              http://zhongguose.com
+            </a>
+          </span>
+          <span>
+            Copyright © 2019 by
+            <a href="//yangerxiao.com" target="_blank">
+              Tristan
+            </a>
+          </span>
+        </p>
+        <p>
+          <span>参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957.</span>
+          <span>Adobe RGB / CMYK FORGA39, Dot Gain 15% Screenshot</span>
+        </p>
+        <p className="btns">
+          <GitHubButton
+            href="https://github.com/zerosoul/chinese-colors"
+            data-show-count="true"
+            aria-label="Star zerosoul/chinese-colors on GitHub"
+          >
+            Star
+          </GitHubButton>
+          <GitHubButton
+            href="https://github.com/zerosoul/chinese-colors/fork"
+            data-show-count="true"
+            aria-label="Fork zerosoul/chinese-colors on GitHub"
+          >
+            Fork
+          </GitHubButton>
+        </p>
+      </div>
+    </Wrapper>
+  );
 }
diff --git a/src/hooks.js b/src/hooks.js
new file mode 100644
index 0000000..7f67b6c
--- /dev/null
+++ b/src/hooks.js
@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [visible, setVisible] = useState(false);
+  const closeModal = () => {
+    setVisible(false);
+  };
+  const showModal = () => {
+    setVisible(true);
+  };
+  return { visible, closeModal, showModal };
+};
+
+export default useModal;
diff --git a/yarn.lock b/yarn.lock
index f3b2336..3c5dd01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2201,6 +2201,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.npm.taobao.org/compute-scroll-into-view/download/compute-scroll-into-view-1.0.11.tgz#7ff0a57f9aeda6314132d8994cce7aeca794fecf"
+  integrity sha1-f/Clf5rtpjFBMtiZTM567KeU/s8=
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3674,6 +3679,11 @@ git-raw-commits@^1.3.0:
     split2 "^2.0.0"
     through2 "^2.0.0"
 
+github-buttons@^2.2.10:
+  version "2.2.10"
+  resolved "https://registry.npm.taobao.org/github-buttons/download/github-buttons-2.2.10.tgz#7ddf66679b4c23e4c4558fedbba6d8aa48241cd6"
+  integrity sha1-fd9mZ5tMI+TEVY/tu6bYqkgkHNY=
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -6492,6 +6502,13 @@ react-error-overlay@^6.0.1:
   resolved "https://registry.npm.taobao.org/react-error-overlay/download/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
   integrity sha1-uNPPm7mRwCiDIlxIBEyz7iBBPg8=
 
+react-github-btn@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/react-github-btn/download/react-github-btn-1.0.6.tgz#4b5d2de86b2ca791ae113ab424321149966895d8"
+  integrity sha1-S10t6Gssp5GuETq0JDIRSZZoldg=
+  dependencies:
+    github-buttons "^2.2.10"
+
 react-is@^16.6.0, react-is@^16.8.1:
   version "16.9.0"
   resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@@ -6947,6 +6964,13 @@ schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.2.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+scroll-into-view-if-needed@2.2.20:
+  version "2.2.20"
+  resolved "https://registry.npm.taobao.org/scroll-into-view-if-needed/download/scroll-into-view-if-needed-2.2.20.tgz#3a46847a72233a3af9770e55df450f2a7f2e2a0e"
+  integrity sha1-OkaEenIjOjr5dw5V30UPKn8uKg4=
+  dependencies:
+    compute-scroll-into-view "1.0.11"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -7135,6 +7159,13 @@ slide@~1.1.3:
   resolved "https://registry.npm.taobao.org/slide/download/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
   integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
 
+smooth-scroll-into-view-if-needed@^1.1.23:
+  version "1.1.23"
+  resolved "https://registry.npm.taobao.org/smooth-scroll-into-view-if-needed/download/smooth-scroll-into-view-if-needed-1.1.23.tgz#e2a3073e5f90deab0aca23f9316beb41230371a4"
+  integrity sha1-4qMHPl+Q3qsKyiP5MWvrQSMDcaQ=
+  dependencies:
+    scroll-into-view-if-needed "2.2.20"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npm.taobao.org/snapdragon-node/download/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"