diff --git a/.idea/modules.xml b/.idea/modules.xml
index e490129..1f24386 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/twstartups.iml" filepath="$PROJECT_DIR$/.idea/twstartups.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/twstartup.iml" filepath="$PROJECT_DIR$/.idea/twstartup.iml" />
     </modules>
   </component>
 </project>
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 701b0f4..9e1f194 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -14,7 +14,7 @@ script:
 deploy:
   provider: pages
   local-dir: docs
-  repo: TWstartups/twstartups.github.io
+  repo: TWstartups/twstartup.github.io
   skip-cleanup: true
   github-token: $GITHUB_TOKEN
   keep-history: true
diff --git a/README.md b/README.md
index 7f04a48..a1a8820 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,18 @@
 <div align="center">
   <!-- <img src='https://github.com/mapitout/design/blob/master/assets/logo.png?raw=true' width='120px' alt='mapitout-logo.png'/> -->
-  <h1>TWstartups</h1>
+  <h1>TWstartup</h1>
   <p>
     a platform for US VCs to receive more information and reach out to asian startups like Taiwan. In the other hand, we also provide taiwanese start ups resources to expand overseas.
   </p>
 </div>
 
-[![Build Status](https://travis-ci.com/TWstartups/twstartups.svg?branch=master)](https://travis-ci.com/TWstartups/twstartups)
+[![Build Status](https://travis-ci.com/TWstartups/twstartup.svg?branch=master)](https://travis-ci.com/TWstartups/twstartup)
 
 ## Initial Setup
 
 ```
-$ git clone git@github.com:TWstartups/twstartups.github.io.git
-$ cd twstartups
+$ git clone git@github.com:TWstartups/twstartup.github.io.git
+$ cd twstartup
 $ ./scripts/setup.sh
 ```
 
diff --git a/client/.env.production b/client/.env.production
index 5b48122..7cf96bd 100644
--- a/client/.env.production
+++ b/client/.env.production
@@ -1,3 +1,3 @@
-REACT_APP_URL=https://twstartups.herokuapp.com
-REACT_APP_API_URL=https://twstartups.herokuapp.com
+REACT_APP_URL=https://twstartup.herokuapp.com
+REACT_APP_API_URL=https://twstartup.herokuapp.com
 NODE_ENV=production
\ No newline at end of file
diff --git a/client/public/index.html b/client/public/index.html
index ec78557..c1b5d1e 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -27,6 +27,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <script src="https://apis.google.com/js/platform.js" async defer></script>
     <title>React App</title>
   </head>
diff --git a/client/src/assets/scss/styles.scss b/client/src/assets/scss/styles.scss
index 03e658e..dbd8028 100644
--- a/client/src/assets/scss/styles.scss
+++ b/client/src/assets/scss/styles.scss
@@ -2,7 +2,7 @@ $main-color: #54d1db;
 $red-color: #de624f;
 @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @import './form.scss';
-@import './companyDetail.scss';
+
 body {
   background-color: #FAFAFA;
 }
diff --git a/client/src/components/company/companyDetail/CompanyIntro.js b/client/src/components/company/companyDetail/CompanyIntro.js
index 02552c4..1818f5e 100644
--- a/client/src/components/company/companyDetail/CompanyIntro.js
+++ b/client/src/components/company/companyDetail/CompanyIntro.js
@@ -12,7 +12,7 @@ class CompanyIntro extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showIntroModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -26,21 +26,23 @@ class CompanyIntro extends React.Component {
     })
   }
 
-  renderList = (keyPoints) => {
-    return keyPoints.map(key => {
-      return <ul key={key}>{key}</ul>
-    })
+  renderList = (keyPoints = []) => {
+    if (keyPoints.length > 0) {
+      return (<div className="key-points">
+        <div className='session-header'>Key points</div>
+        {this.renderEditbtn()}
+        {keyPoints.map((k, i) => <div className='key-point-item' key={i}>{k}</div>)}
+      </div>)
+    } else {
+      return <div></div>
+    }
   }
 
   render () {
     return (
       <div className="intro-container">
-        <div>
-          <div className="one-liner">{this.props.company.introduction}</div>
-          {this.renderEditbtn()}
-        </div>
         <ul className="bullet-list">
-          {(this.props.company && this.props.company.keyPoints) && this.renderList(this.props.company.keyPoints)}
+          {this.props.company && this.renderList(this.props.company.keyPoints)}
         </ul>
         {this.state.showIntroModal && <KeyPointModal hideModal={this.hideModal}/>}
       </div>
diff --git a/client/src/components/company/companyDetail/Team.js b/client/src/components/company/companyDetail/Team.js
index 33b1b36..b93b159 100644
--- a/client/src/components/company/companyDetail/Team.js
+++ b/client/src/components/company/companyDetail/Team.js
@@ -20,7 +20,7 @@ class Team extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showTeamModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -32,26 +32,22 @@ class Team extends React.Component {
     if (exes && exes.length > 0) {
       return exes.map((exe, id) => {
         return (
-          <div className="exe" key={exe._id}>
+          <div className="exe col-sm-12 col-md-4" key={exe._id}>
             <ImageZone
-              className="executive"
+              className="executive circle"
               src={exe.image}
               type="executive"
               editable={this.props.checkOwnership}
               query={{ type: 'executive', companyId: compnayId, exeIndex: id }}
-              dimension={{ width: '300px', height: '300px' }}
+              dimension={{ width: '70%' }}
             />
             <div className="exe-title">{exe.title}</div>
             <div className="exe-name">
               {exe.firstName}{' '}
               {exe.lastName}
             </div>
-            <a href={exe.link}>
-              <img
-                alt="executive"
-                className="linkedin-logo"
-                src={require('../../../assets/images/linedin.png')}
-              ></img>
+            <a className='info-link' href={exe.link}>
+              <i className='fa fa-linkedin'/>
             </a>
             {this.state.showTeamModal && <TeamModal hideModal={this.hideModal}/>}
           </div>
@@ -64,8 +60,9 @@ class Team extends React.Component {
     const { _id, executives } = this.props.company
     return (
       <div className="team-container">
-        <h2 className="team-title">Executive Team{this.renderEditbtn()}</h2>
-        <div className="team-group">
+        <h2 className="session-header">Executive Team</h2>
+        {this.renderEditbtn()}
+        <div className="team-group row">
           {this.renderExecutive(executives, _id)}
         </div>
       </div>
diff --git a/client/src/components/company/companyDetail/TopProfile.js b/client/src/components/company/companyDetail/TopProfile.js
index f55e5d3..9454614 100644
--- a/client/src/components/company/companyDetail/TopProfile.js
+++ b/client/src/components/company/companyDetail/TopProfile.js
@@ -4,6 +4,14 @@ import ImageZone from '../imageZone'
 import ProfileModal from '../modals/ProfileModal'
 import { fetchComp } from '../../../actions'
 
+// const socialLinkIcons = {
+//   facebook: 'facebook',
+//   instagram: 'instagram',
+//   linkedIn: 'linkedin',
+//   twitter: 'twitter',
+//   angelList: 'angellist'
+// }
+
 class TopProfile extends React.Component {
   state = {
     showProfileModal: false
@@ -14,7 +22,7 @@ class TopProfile extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showProfileModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -30,47 +38,43 @@ class TopProfile extends React.Component {
 
   render () {
     const {
-      companyEmail,
       companyNameEn,
+      introduction,
+      companyEmail,
       website,
+      socialLinks,
       logo,
       _id
     } = this.props.company
+    const socialLinksArr = Object.keys(socialLinks || {})
+    console.log(socialLinksArr)
     return (
       <div className="top-profile-container">
-        <div className="top-profile">
-          <div className="" style={{ textAlign: 'center' }}>
-            <ImageZone className="company-img" src={logo} editable={this.props.checkOwnership} query={{ companyId: _id, type: 'logo' }} dimension={{ width: '200px', height: '200px' }}/>
+        <div className="">
+          <div className="session" style={{ textAlign: 'center' }}>
+            <ImageZone className="company-img circle" src={logo} editable={this.props.checkOwnership} query={{ companyId: _id, type: 'logo' }} dimension={{ height: '100', width: '100' }} style={{ width: '250px' }}/>
           </div>
-          <div className="company-info">
+          <div className="session company-info">
+            <div className="companyNameEn">{companyNameEn}{this.props.company && this.renderEditbtn()}</div>
+
+            <div className="introduction">{introduction}</div>
             <div>
-              {/* eslint-disable-next-line camelcase */}
-              <div className="name-group">
-                <div className="company-name">{companyNameEn}</div>
-                <div className="edit-btn">{this.props.company && this.renderEditbtn()}</div>
-              </div>
-              <div className="ui blue labels">
-                <div className="ui label">Happy</div>
-                <div className="ui label">Smart</div>
-                <div className="ui label">Insane</div>
-                <div className="ui label">Exciting</div>
-              </div>
-            </div>
-            <div className="btn-group">
-              <div
-                className="ui teal button"
-                onClick={() => window.open(`${website}`)}
-              >
+              <div className="info-link highlight" onClick={() => window.open(website)}>
+                <i className="fa fa-globe" aria-hidden="true" />
                 Website
               </div>
-              <a
-                className="ui yellow button"
-                // eslint-disable-next-line camelcase
-                href={`mailto:${companyEmail}`}
-              >
-                Contact
-              </a>
             </div>
+            {companyEmail && <a className="info-link" href={`mailto:${companyEmail}`} rel="noopener noreferrer" target='_blank'>
+              <i className="fa fa-envelope" aria-hidden="true"/>
+            </a>}
+            {socialLinksArr.map(s => (<span key={s}>
+              {socialLinks[s] &&
+                <a className="info-link" rel="noopener noreferrer" href={socialLinks[s]} target='_blank'>
+                  <i className={`fa fa-${s.toLowerCase()}`} aria-hidden="true"/>
+                </a>}
+            </span>)
+            )}
+            <div></div>
           </div>
         </div>
         {this.state.showProfileModal && <ProfileModal hideModal={this.hideModal} />}
diff --git a/client/src/components/company/companyDetail/index.js b/client/src/components/company/companyDetail/index.js
index 35fd661..15926c0 100644
--- a/client/src/components/company/companyDetail/index.js
+++ b/client/src/components/company/companyDetail/index.js
@@ -3,10 +3,11 @@ import { connect } from 'react-redux'
 import { fetchComp } from '../../../actions'
 import '../index.scss'
 import TopProfile from './TopProfile'
-import CompanyIntro from './CompanyIntro'
 import ImageZone from '../imageZone'
+import CompanyIntro from './CompanyIntro'
 import Team from './Team'
 import Events from './Events'
+import './style.scss'
 
 class Company extends React.Component {
   componentDidMount () {
@@ -14,21 +15,47 @@ class Company extends React.Component {
     this.props.fetchComp(this.props.match.params.id)
   }
 
+  renderProfileEditbtn = () => {
+    if (this.checkOwnership()) {
+      return (
+        <button
+          onClick={() => this.setState({ showProfileModal: true })}
+          className="circular ui icon button"
+        >
+          <i className="edit outline icon"></i>
+        </button>
+      )
+    }
+  };
+
+  renderUploadProfilebtn = () => {
+    if (this.checkOwnership()) {
+      return (
+        <button onClick={() => this.setState({ showUploadProfileModal: true })} className='circular ui icon button'>
+          <i className='edit outline icon'/>
+        </button>
+      )
+    }
+  }
+
   checkOwnership = () => {
     const { user, company } = this.props
     return user.type === 'super' || ((user._id && company.owners) && (company.owners.indexOf(user._id) > -1))
   }
 
   render () {
+    console.log('this.props.company', this.props.company)
     if (!this.props.company) {
       return <div>Loading</div>
     }
     // eslint-disable-next-line camelcase
     const { bannerImg, _id } = this.props.company
     return (
-      <div className="company-container">
+      <div className="component-details-component container">
         <TopProfile checkOwnership={this.checkOwnership()}/>
         <CompanyIntro checkOwnership={this.checkOwnership()}/>
+        {/* <KeyPoints keyPoints={this.props.company.keyPoints}/> */}
+        <h2 className="session-header">Banner</h2>
         <ImageZone className="banner-img" src={bannerImg} editable={this.checkOwnership()} query={{ companyId: _id, type: 'bannerImg' }} dimension={{ width: 400, height: 1000 }} style={{ maxWidth: '1000px', width: '100%' }}/>
         <Team checkOwnership={this.checkOwnership()}/>
         <Events checkOwnership={this.checkOwnership()}/>
diff --git a/client/src/assets/scss/companyDetail.scss b/client/src/components/company/companyDetail/style.scss
similarity index 65%
rename from client/src/assets/scss/companyDetail.scss
rename to client/src/components/company/companyDetail/style.scss
index afa4478..b1bd09f 100644
--- a/client/src/assets/scss/companyDetail.scss
+++ b/client/src/components/company/companyDetail/style.scss
@@ -1,57 +1,81 @@
+@import "../../../assets/scss/styles";
 
-
-
-.company-container {
-  margin: 0 15vw;
-  margin-top: 150px;
+.component-details-component {
+  margin-top: 50px;
   .top-profile-container {
-  
-    .top-profile {
-      display:flex;
-      flex-direction:row;   
-      justify-content: flex-start;
-      .company-info {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: flex-start;
-        margin-left: 100px;
-        .name-group {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          margin-bottom: 10px;
-          justify-content:space-between;
-          .edit-btn {
-            margin:10px;
-          }
-          .company-name {
-            font-size: 40px;
-            font-weight: bold;
+    .session {
+      text-align: center;
+      .company-img {
+        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+        margin: auto;
+      }
+    }
+    .company-info {
+      div {
+      }
+      .companyNameEn {
+        font-size: 3rem;
+        padding-top: 30px;
+        font-weight: 900;
+      }
+      .introduction {
+        font-size: 1.6rem;
+        opacity: 0.8;
+        padding: 30px 0px 20px;
+      }
+      .info-link {
+        padding: 15px 25px;
+        background: rgba(black, 0.1);
+        display: inline-block;
+        margin: 5px;
+        border-radius: 100px;
+        color: black;
+        cursor: pointer;
+        font-size: 1.4rem;
+        text-transform: capitalize;
+        &.highlight {
+          font-weight: 600;
+          background: $main-color;
+          margin-bottom: 20px;
+          i {
+            margin-right: 5px;
           }
         }
+        &:hover{
+          opacity: 0.8;
+        }
+        &:active{
+          transform: scale(0.97);
+        }
       }
     }
   }
-  .intro-container {
-    margin-top:80px;
-    .one-liner {
-      font-size:2rem;
-    }
-    .bullet-list {
-      li {
-        padding:5px;
-      }
-
+  .session-header {
+    font-weight: 800;
+    font-size: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    opacity: 0.2;
+    padding-bottom: 20px;
+    width: 100%;
+    text-align: center;
+  }
+  .key-points {
+    margin-top: 50px;
+    text-align: center;
+    .key-point-item {
+      padding: 10px 0px;
+      font-size: 2rem;
+      line-height: 3rem;
+      font-weight: 800;
     }
-
   }
   .banner-img {
-    margin-top: 100px;
     width: 100%;
     max-width: 1000px;
     height: 400px;
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+    margin: auto;
   }
   .team-container {
     margin-top: 100px;
@@ -61,19 +85,39 @@
       font-size:32px;
     }
     .team-group {
-      display: flex;
-      flex-direction:row;
-      justify-content:space-between;
       .exe {
-        display: flex;
-        flex-direction:column;
-        justify-content:center;
         text-align: center;
         .executive {
           box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
           width:250px;
           height:250px;
           border-radius:50%;
+          margin: auto;
+        }
+        .info-link {
+          padding: 15px 25px;
+          background: rgba(black, 0.1);
+          display: inline-block;
+          margin: 5px;
+          border-radius: 100px;
+          color: black;
+          cursor: pointer;
+          font-size: 1.4rem;
+          text-transform: capitalize;
+          &.highlight {
+            font-weight: 600;
+            background: $main-color;
+            margin-bottom: 20px;
+            i {
+              margin-right: 5px;
+            }
+          }
+          &:hover{
+            opacity: 0.8;
+          }
+          &:active{
+            transform: scale(0.97);
+          }
         }
         .exe-title {
           font-size:30px;
@@ -86,12 +130,12 @@
         }
         .linkedin-logo {
           margin:15px 0px;
-          width:50px;  
+          width:50px;
         }
       }
     }
   }
-  
+
   .event-container {
     margin:100px 0px;
     .event-title {
@@ -195,7 +239,7 @@
           margin-right:20px;
         }
         .event-note {
-          
+
         }
 
       }
diff --git a/client/src/components/company/imageZone/images.scss b/client/src/components/company/imageZone/images.scss
index 3ba9dd0..d02c088 100644
--- a/client/src/components/company/imageZone/images.scss
+++ b/client/src/components/company/imageZone/images.scss
@@ -1,12 +1,3 @@
 .image-zone-component {
-  &.company-img {
-    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
-    height: 200px;
-    width: 200px;
-    border-radius: 10px;
-    overflow: hidden;
-    img{
-      width: 100%;
-    }
-  }
+
 }
\ No newline at end of file
diff --git a/client/src/components/company/imageZone/index.scss b/client/src/components/company/imageZone/index.scss
index 0b3589c..8cbc2ae 100644
--- a/client/src/components/company/imageZone/index.scss
+++ b/client/src/components/company/imageZone/index.scss
@@ -14,6 +14,7 @@
     display: none;
   }
   &.circle {
+    border-radius: 1000px;
     .dropzone,.dropzone-layer {
       border-radius: 1000px;
     }
diff --git a/deploy.sh b/deploy.sh
index 8605948..a552228 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -14,4 +14,4 @@ git push origin master
 echo ">>frontend deploy successfully"
 
 echo "|| client-> https://twstartup.com"
-echo "|| server-> https://server.twstartup.com"
\ No newline at end of file
+echo "|| server-> https://server.twstartup.com"
diff --git a/server/candidate/email.js b/server/candidate/email.js
index 5ea7f25..25cf75f 100644
--- a/server/candidate/email.js
+++ b/server/candidate/email.js
@@ -34,9 +34,9 @@ export default {
           Data: 'You are approved'
         }
       },
-      Source: 'twstartups.service@gmail.com', /* required */
+      Source: 'twstartup.service@gmail.com', /* required */
       ReplyToAddresses: [
-        'twstartups.service@gmail.com'
+        'twstartup.service@gmail.com'
         /* more items */
       ]
     }).promise()
diff --git a/server/candidate/emailTemplate.js b/server/candidate/emailTemplate.js
index 1006876..7f6f34b 100644
--- a/server/candidate/emailTemplate.js
+++ b/server/candidate/emailTemplate.js
@@ -7,7 +7,7 @@ export default {
       <link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
     </head>
     <body aria-readonly="false">
-    <p>Hi,${username}</br>Your company is approved. </br> We will ask you to provide more information to furnish up your profile: <a href="https://twstartups.github.io/twstartups/#/">https://twstartups.github.io/twstartups/#/</a></br>Please visit <a href="https://twstartups.github.io/twstartups/#/">here</a> for public company page.</br></p>
+    <p>Hi,${username}</br>Your company is approved. </br> We will ask you to provide more information to furnish up your profile: <a href="https://twstartup.github.io/twstartup/#/">https://twstartup.github.io/twstartup/#/</a></br>Please visit <a href="https://twstartup.github.io/twstartup/#/">here</a> for public company page.</br></p>
     <p>Best,</br>twstartup team</p>
     </body>
     </html>`
diff --git a/server/config.js b/server/config.js
index 8536759..9e779e6 100644
--- a/server/config.js
+++ b/server/config.js
@@ -7,7 +7,7 @@ if (process.env.NODE_ENV !== 'production') {
 export default {
   jwt_secret: process.env.JWT_SECRET || 'jwt_secret',
   mongoose: {
-    uri: process.env.MONGODB_URI || 'mongodb://localhost/twstartups'
+    uri: process.env.MONGODB_URI || 'mongodb://localhost/twstartup'
   },
   twilio: {
     sid: process.env.TWILIO_SID,
diff --git a/server/server.js b/server/server.js
index 26d8939..0170a04 100644
--- a/server/server.js
+++ b/server/server.js
@@ -19,6 +19,7 @@ mongoose.connect(config.mongoose.uri, {
   .then(() => console.log('MongoDB connected...'))
   .catch((err) => console.log(`MongoDB connection error: ${err}`))
 
+
 const originList = ['http://localhost:3000', 'https://twstartup.com']
 const coresOptions = {
   origin: function (origin, callback) {