diff --git a/src/components/ActionCard/Comment.jsx b/src/components/ActionCard/Comment.jsx
index 16298d527..b07ae899f 100644
--- a/src/components/ActionCard/Comment.jsx
+++ b/src/components/ActionCard/Comment.jsx
@@ -17,7 +17,7 @@ const Comment = ({avatarUrl, authorName, date, children, active, self}) => (
           {date}
         </div>
       </div>
-      <div className="comment-body">
+      <div className="comment-body draftjs-post">
         <p>
           {children}
         </p>
diff --git a/src/components/FileList/FileList.scss b/src/components/FileList/FileList.scss
index 7c50bae31..9fbca84b8 100644
--- a/src/components/FileList/FileList.scss
+++ b/src/components/FileList/FileList.scss
@@ -4,8 +4,8 @@
   // reset styles of panel class, we need panel class to activate the modal-overlay
   border: none;
   box-shadow: none;
-  > h4 {
 
+  > h4 {
     @include roboto-medium;
     font-size: 15px;
     color: $tc-gray-50;
@@ -20,10 +20,12 @@
   padding: 15px 0;
   width: 100%;
   align-items: stretch;
+
   .icon-col {
     padding-top: 3px;
     width: 60px;
   }
+
   .content-col {
     flex: 2;
 
@@ -31,34 +33,43 @@
       @include roboto-bold;
       font-size: 15px;
       color: $tc-gray-80;
+      max-width: 380px;
     }
+
     p {
       @include roboto;
       font-size: 13px;
-      color: $tc-gray-60;
-      line-height: 25px;
+      font-weight: 400;
+      color: $tc-gray-70;
+      line-height: 20px;
     }
+
     .title {
       width: 100%;
       display: flex;
       line-height: 25px;
     }
+
     .size {
       @include roboto;
       font-size: 15px;
       color: $tc-gray-60;
       margin-left: auto;
     }
+
     .edit-icons {
       margin-left: 5px;
+
       i {
         cursor: pointer;
       }
     }
+
     .title-edit {
       display: flex;
       align-items: center;
       margin-bottom: 10px;
+
       input {
         @include roboto-bold;
         font-size: 15px;
@@ -83,22 +94,25 @@
       resize: none;
     }
   }
+
   .icon-trash,
   .icon-edit {
     margin-left: 13px;
     vertical-align: middle;
   }
+
   .icon-trash {
     margin-left: 22px;
   }
+
   .icon-save {
     margin-right: 25px;
   }
+
   .icon-close {
     margin-right: 10px;
   }
 }
 
 .delete-file-modal {
-
 }
\ No newline at end of file
diff --git a/src/projects/create/components/NewProjectForm.scss b/src/projects/create/components/NewProjectForm.scss
index 780f82d3a..d8c0a1756 100644
--- a/src/projects/create/components/NewProjectForm.scss
+++ b/src/projects/create/components/NewProjectForm.scss
@@ -6,7 +6,7 @@
 }
 
 .ReactModalPortal {
-  transition: 200ms ease-in-out
+  transition: 200ms ease-in-out;
 }
 
 .project-creation-dialog-overlay {
@@ -14,7 +14,6 @@
 }
 
 .content {
-
   .container {
     position: relative;
     margin: 0px auto 20px;
@@ -25,7 +24,7 @@
 
     &.container-margin {
       margin: 50px auto;
-      box-shadow: 0px 0px 14px 1px rgba(38,38,40,0.15);
+      box-shadow: 0px 0px 14px 1px rgba(38, 38, 40, 0.15);
     }
 
     .btn-close {
@@ -36,6 +35,7 @@
       height: 14px;
       cursor: pointer;
     }
+
     h2 {
       @include roboto-light;
       color: $tc-gray-60;
@@ -47,6 +47,7 @@
         margin-bottom: 30px;
       }
     }
+
     .what-you-like-to-do {
       padding: 45px 0 20px;
 
@@ -54,7 +55,7 @@
         display: flex;
         margin: 0 auto 30px;
 
-        span{
+        span {
           width: 33.3%;
           cursor: pointer;
           @include roboto-light;
@@ -62,14 +63,16 @@
           line-height: 20px;
           color: $tc-gray-50;
           text-align: center;
-          &.active{
+
+          &.active {
             color: $tc-black;
           }
         }
       }
+
       .type-selector {
         display: flex;
-        
+
         .selector {
           width: 33.3%;
           cursor: pointer;
@@ -87,38 +90,42 @@
             border-radius: 50%;
             background: $tc-gray-neutral-dark;
           }
-          
+
           &.active {
             &:before {
               display: none;
             }
 
-            h3, p, span{
+            h3,
+            p,
+            span {
               color: $tc-black;
             }
           }
 
-          h3, p {
+          h3,
+          p {
             @include roboto-light;
             color: $tc-gray-50;
             line-height: 25px;
             text-align: center;
           }
+
           h3 {
             font-size: 20px;
-
           }
-          p {
 
+          p {
             font-size: 15px;
 
-            strong{
+            strong {
               @include roboto-bold;
             }
           }
         }
       }
     }
+
     .pick-target-devices {
       padding: 0px 50px;
 
@@ -169,75 +176,85 @@
           display: flex;
           flex-flow: row wrap;
           justify-content: space-between;
-          overflow:hidden;
+          overflow: hidden;
           margin-bottom: 20px;
 
           a {
             -webkit-flex: initial;
             flex: initial;
-            height:155px;
-            width:135px;
+            height: 155px;
+            width: 135px;
             border: 1px solid $tc-gray-20;
             border-radius: 4px;
             cursor: pointer;
-            &.active{
+
+            &.active {
               background: $tc-dark-blue-10;
               border: 1px solid $tc-dark-blue-30;
             }
-            &:hover{
+
+            &:hover {
               border: 1px solid $tc-dark-blue-70;
             }
-            span.icon{
-              display:block;
+
+            span.icon {
+              display: block;
               height: 50px;
-              margin:30px auto 20px auto;
+              margin: 30px auto 20px auto;
             }
-            span.title{
-              display:block;
+
+            span.title {
+              display: block;
               margin-top: 20px;
               @include roboto-bold;
               color: $tc-gray-90;
               font-size: 13px;
-              text-align:center;
+              text-align: center;
             }
-            small{
-              display:block;
+
+            small {
+              display: block;
               font-size: 11px;
-              text-align:center;
+              text-align: center;
               color: $tc-gray-50;
               @include roboto;
-              margin-top:10px;
+              margin-top: 10px;
             }
+
             &.phone {
-              span.icon{
+              span.icon {
                 background: url('../../images/phone.svg') no-repeat 0 0;
                 width: 33px;
                 background-size: 33px 50px;
               }
             }
+
             &.tablet {
-              span.icon{
+              span.icon {
                 background: url('../../images/tablet.svg') no-repeat 0 0;
                 width: 43px;
                 background-size: 43px 50px;
               }
             }
+
             &.desktop {
-              span.icon{
+              span.icon {
                 background: url('../../images/desktop.svg') no-repeat 0 0;
                 width: 55px;
                 background-size: 55px 50px;
               }
             }
+
             &.apple-watch {
-              span.icon{
+              span.icon {
                 background: url('../../images/watch-apple.svg') no-repeat 0 0;
                 width: 38px;
                 background-size: 38px 50px;
               }
             }
+
             &.android-watch {
-              span.icon{
+              span.icon {
                 background: url('../../images/watch-android.svg') no-repeat 0 0;
                 width: 38px;
                 background-size: 38px 50px;
@@ -255,6 +272,7 @@
         }
       }
     }
+
     .section-divider {
       background-color: $tc-gray-20;
       width: 100%;
@@ -262,7 +280,8 @@
       height: 1px;
       margin: 50px auto;
     }
-    .project-info{
+
+    .project-info {
       margin: 50px auto 20px;
       width: 600px;
 
@@ -270,30 +289,35 @@
         margin-bottom: 20px;
       }
 
-      &.padding-top-30{
+      &.padding-top-30 {
         padding-top: 60px;
       }
+
       .row {
         margin-bottom: 20px;
+
         input::-ms-clear {
           display: none;
         }
-        &.center{
+
+        &.center {
           display: table;
           margin: 0 auto;
-          label{
+
+          label {
             display: inline;
           }
-          input{
+
+          input {
             display: inline;
             width: 100px;
             background: $tc-white;
-            color: $tc-gray-30;
           }
         }
       }
-      label{
-        display:block;
+
+      label {
+        display: block;
         margin-bottom: 5px;
         text-transform: none;
         @include tc-label-md;
@@ -301,55 +325,60 @@
         font-size: 13px;
       }
 
-      .error-message{
-        display:block;
+      .error-message {
+        display: block;
         margin: 5px 0;
         @include roboto;
         color: $tc-gray-70;
         font-size: 13px;
-        line-height:20px;
-        font-style:italic;
+        line-height: 20px;
+        font-style: italic;
         border: 1px solid $tc-red-30;
         background: $tc-red-10;
         color: $tc-red-70;
-        padding:10px;
+        padding: 10px;
         border-radius: 2px;
-        strong{
+
+        strong {
           @include roboto-bold;
         }
       }
 
-      input, textarea {
-        display:block;
+      input,
+      textarea {
+        @include tc-label-md;
+        display: block;
         color: $tc-black;
         background: $tc-gray-neutral-light;
         border-color: $tc-gray-20;
-        @include tc-label-md;
-        font-size:15px;
-        line-height:20px;
+        font-size: 15px;
+        line-height: 20px;
 
-        &[disabled]{
+        &[disabled] {
           background: $tc-white;
           border-color: $tc-gray-20;
           color: $tc-gray-30;
         }
-        &:hover{
+
+        &:hover {
           border-color: $tc-gray-40;
           background: $tc-gray-neutral-light;
-          color: $tc-gray-50;
+          color: $tc-black;
         }
-         &:focus{
+
+        &:focus {
           background: $tc-white;
           border-color: $tc-dark-blue-70;
           box-shadow: 0px 0px 2px 1px $tc-dark-blue-30;
         }
 
-        &.error{
+        &.error {
           color: $tc-gray-50;
-          border-color: $tc-gray-30 ;
+          border-color: $tc-gray-30;
           border-left: 3px solid $tc-red-70;
           background: $tc-gray-neutral-light;
-          &:focus{
+
+          &:focus {
             background: $tc-white;
             border-color: $tc-dark-blue-70;
             border-left: 1px solid $tc-dark-blue-70 !important;
@@ -357,22 +386,23 @@
           }
         }
       }
-      input{
 
-        &.tc-file-field__inputs--code{
+      input {
+        &.tc-file-field__inputs--code {
           background-color: $tc-white;
         }
-        &.tc-file-field__inputs--fill{
+
+        &.tc-file-field__inputs--fill {
           background-color: $tc-gray-neutral-light;
         }
-
       }
 
-      textarea{
+      textarea {
         height: 100px;
         box-shadow: none;
       }
     }
+
     .button-area {
       display: flex;
       justify-content: center;
@@ -380,15 +410,16 @@
       a {
         height: 40px;
         width: 137px;
-        display:block;
-        margin:30px auto;
-        text-align:center;
+        display: block;
+        margin: 30px auto;
+        text-align: center;
         text-transform: none;
         font-family: 'Roboto Bold';
         font-size: 15px;
-        padding:0!important;
+        padding: 0 !important;
         border: none;
-        &.disabled{
+
+        &.disabled {
           color: $tc-white;
           background: $tc-gray-10;
         }
@@ -399,25 +430,32 @@
       width: 100%;
       max-width: 600px;
       margin: 50px auto 0px auto;
+
       .row {
         margin-bottom: 20px;
+
         label {
           @include tc-label-md;
         }
+
         textarea {
           height: 80px;
           resize: none;
         }
+
         input::-ms-clear {
           display: none;
         }
+
         &.center {
           display: flex;
           justify-content: center;
           align-items: center;
+
           label {
             width: 170px;
           }
+
           input {
             width: 100px;
             margin: 0px;
@@ -456,17 +494,17 @@ $track-color: $tc-gray-neutral-dark;
   input[type=range] {
     -webkit-appearance: none;
     cursor: pointer;
-    border: none!important;
-    box-shadow: none!important;
+    border: none !important;
+    box-shadow: none !important;
     width: $track-width;
     display: block;
     margin: 0 auto;
-    padding:0 !important;
+    padding: 0 !important;
 
     &:focus {
       outline: none;
-      border: none!important;
-      box-shadow: none!important;
+      border: none !important;
+      box-shadow: none !important;
     }
 
     // Chrome + Safari styles
@@ -520,7 +558,7 @@ $track-color: $tc-gray-neutral-dark;
       outline: none;
       outline-offset: -1px;
     }
-    
+
     // MS IE11+ styles
     &::-ms-track {
       width: $track-width;
@@ -554,6 +592,7 @@ $track-color: $tc-gray-neutral-dark;
       border-radius: 4px;
       background-color: $tc-gray-neutral-dark;
     }
+
     &::ms-tooltip {
       display: block;
       padding: 30px;
diff --git a/src/projects/detail/components/EditProjectForm.jsx b/src/projects/detail/components/EditProjectForm.jsx
index d01696a52..d216fbae6 100644
--- a/src/projects/detail/components/EditProjectForm.jsx
+++ b/src/projects/detail/components/EditProjectForm.jsx
@@ -154,7 +154,7 @@ class EditProjectForm extends Component {
             isEdittable={isEdittable} onSave={ this.saveFeatures }
           />
           <div onClick={ this.hideFeaturesDialog } className="feature-selection-dialog-close">
-            <Icons.XMarkIcon />
+            Save and close <Icons.XMarkIcon />  
           </div>
         </Modal>
       </div>
diff --git a/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx b/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
index 0fa371468..0636f90b0 100644
--- a/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
+++ b/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
@@ -24,7 +24,9 @@ const FeaturePreview = props => {
   // }
   return (
     <div className="feature-preview flex-grow">
-      <img src={ previewImg } />
+      <div className="feature-preview-img">
+        <img src={ previewImg } />
+      </div>
     </div>
   )
 }
diff --git a/src/projects/detail/components/FeatureSelector/FeaturePreview.scss b/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
index 8cf8943ca..8238de1a9 100644
--- a/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
+++ b/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
@@ -2,14 +2,25 @@
 
 .feature-preview {
   text-align: center;
-  padding: (8 * $base-unit) (12 * $base-unit) ;
-  background: url('./images/Device-iPhone.svg') no-repeat;
+  /*padding: (8 * $base-unit) (12 * $base-unit) ;*/
+  /*background: url('./images/Device-iPhone.svg') no-repeat;*/
   background-color: #FBFDFF;
   background-position: 50% 22px;
-  padding-top: 88px;
+  padding: 8 * $base-unit;
   border-left: 1px solid $tc-dark-blue-30;
-
+  .feature-preview-img {
+    background: url('./images/Device-iPhone.svg') no-repeat;
+    /*padding: (8 * $base-unit) (12 * $base-unit) ;*/
+    padding: 22% 7%;
+    width: 100%;
+    max-width: 273px;
+    background-size: contain;
+  }
   img {
-    max-height: 500px;
+    display: inline-block;
+    width: 100%;
+    max-width: 235px;
+
+    /*max-height: 500px;*/
   }
 }
\ No newline at end of file
diff --git a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
index 1f33817ca..b0b967a53 100644
--- a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
+++ b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
@@ -8,12 +8,15 @@
   border-bottom: 1px dashed $tc-gray-30;
   padding: 15px 0;
   width: 100%;
+
   .icon-col {
     padding-top: 3px;
     padding-right: 10px;
   }
+
   .content-col {
     width: 100%;
+
     > h5 {
       @include roboto-medium;
       font-size: 15px;
@@ -21,27 +24,30 @@
       color: $tc-gray-80;
       margin-bottom: 15px;
     }
+
     > p {
       @include roboto;
       font-size: 13px;
-      color: $tc-gray-60;
-      letterSpacing: 0;
-      line-height: 25px;
+      color: $tc-gray-70;
+      font-weight: 400;
+      line-height: 20px;
+
       &.bigger {
         font-size: 15px;
       }
     }
+
     .child-component {
       margin-top: 10px;
 
       textarea {
         min-height: 80px;
         max-width: 100%;
-        color: $tc-gray-50;
         text-align: left;
         text-indent: 0;
         margin-bottom: 20px;
       }
+
       .checkbox-group-item label {
         font-weight: 400;
         color: $tc-black;
diff --git a/src/projects/detail/containers/Specification.scss b/src/projects/detail/containers/Specification.scss
index 805b850bd..dc243cae4 100644
--- a/src/projects/detail/containers/Specification.scss
+++ b/src/projects/detail/containers/Specification.scss
@@ -1,25 +1,16 @@
 @import 'tc-includes';
 
 //TODO  Additional variables - need to find a home for these
-
-
 $gray-color: $tc-gray-50;
 $title-color: $tc-gray-80;
+
 @mixin flexBox {
   display: box;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  -o-flex-direction: row;
   flex-direction: row;
   width: auto;
 }
+
 @mixin flexWidth($number) {
   -webkit-box-flex: $number;
   -moz-box-flex: $number;
@@ -29,11 +20,11 @@ $title-color: $tc-gray-80;
 }
 
 .feature-selection-dialog-overlay {
-  position          : fixed;
-  top               : 0;
-  left              : 0;
-  right             : 0;
-  bottom            : 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 21;/* +1 of the z-index of the topbar */
 }
 
@@ -42,13 +33,35 @@ $title-color: $tc-gray-80;
   left: 0px;
   height: 100%;
 }
+
 .feature-selection-dialog-close {
+  @include roboto;
   cursor: pointer;
   position: absolute;
-  top: 25px;
+  top: 20px;
   right: 25px;
-  width: 14px;
-  height: 14px;
+  width: 185px;
+  height: 20px;
+  line-height: 20px;
+  text-align: right;
+  color: $tc-gray-60;
+  transition: all 200ms ease-in-out;
+
+  .x-mark-icon {
+    display: inline-block;
+    margin: 0 0 0 5px;
+    vertical-align: text-bottom;
+    transition: all 200ms ease-in-out;
+  }
+
+  &:hover {
+    color: $tc-black;
+    cursor: pointer;
+
+    .x-mark-icon {
+      fill: $tc-black;
+    }
+  }
 }
 
 .two-col-content.content {
@@ -56,17 +69,23 @@ $title-color: $tc-gray-80;
     height: 30px;
   }
   /* .tc-file-field__inputs */
-  .tc-file-field__inputs,.tc-textarea {
-    background: #FAFAFB;
+  .tc-file-field__inputs,
+  .tc-textarea {
+    background: $tc-gray-neutral-light;
+    border-color: $tc-gray-20;
+    color: $tc-black;
+
     &::-webkit-input-placeholder {
       color: #888894;
       text-transform: none;
     }
+
     &:-moz-placeholder {
       color: #888894;
       opacity: 1;
       text-transform: none;
     }
+
     &:-ms-input-placeholder {
       color: #888894;
       text-transform: none;
@@ -74,31 +93,35 @@ $title-color: $tc-gray-80;
   }
   /* .dashed-bottom-border */
   .dashed-bottom-border {
-    border-bottom: 1px dashed #C3C3C8;
+    border-bottom: 1px dashed #c3c3c8;
     padding: 15px 0;
     position: relative;
   }
   /* .bottom-border-titles */
   .bottom-border-titles {
-    border-bottom: 1px solid $gray-color;
-    padding-bottom: 10px;
+    border-bottom: 1px solid $tc-gray-30;
+    padding-bottom: $base-unit;
     margin: 30px 0 20px 0;
     position: relative;
+
     .title {
       @include roboto;
       font-size: 20px;
       line-height: 30px;
     }
+
     .section-actions {
       position: absolute;
       right: 0;
       top: 0;
       padding: 0 15px;
+
       &.hide {
         display: none;
       }
     }
   }
+
   .container {
     @include flexBox;
     background-color: transparent;
@@ -109,25 +132,29 @@ $title-color: $tc-gray-80;
     /* .left-area */
     .left-area {
       @include flexWidth(1);
-      .left-area-footer{
-        padding: 0 40px 0 20px;
+
+      .left-area-footer {
         @include roboto;
+        padding: 0 40px 0 20px;
         font-size: 13px;
         line-height: 30px;
         color: $tc-gray-50;
-        span{
+
+        span {
           float: right;
         }
       }
     }
+
     .right-area {
       @include flexWidth(2);
       border-radius: 4px;
       position: relative;
+
       .title {
-        color: $title-color;
+        color: $tc-gray-80;
         @include roboto;
-        font-weight: 600;
+        font-weight: 400;
       }
 
       .right-area-item {
@@ -146,34 +173,40 @@ $title-color: $tc-gray-80;
           color: $gray-color;
           line-height: 30px;
           margin-bottom: 20px;
+
           .optional,
           .required {
+            @include roboto;
             position: absolute;
             right: 0;
-            @include roboto;
             font-size: 13px;
             float: right;
             padding: 0 20px;
             border-radius: 20px 0 0 20px;
           }
+
           .required {
             background: $tc-orange-70;
             color: #fff;
           }
+
           .optional {
             background: $tc-gray-10;
             color: $gray-color;
           }
         }
+
         .gray-text {
           @include roboto;
           font-size: 15px;
           color: $gray-color;
           line-height: 25px;
         }
+
         &.design-specification-two {
           padding-bottom: 1px;
         }
+
         &.option-groups {
           padding-bottom: 46px;
         }
@@ -182,51 +215,56 @@ $title-color: $tc-gray-80;
       .tab-nav {
         .center-area {
           margin: 0 0 0 111px;
+
           .btn-nav {
             padding: 0 15px;
             float: left;
             @include roboto;
             font-size: 13px;
-            color: #47474F;
+            color: #47474f;
             line-height: 16px;
           }
         }
       }
+
       .section-additional-notes {
         .textarea-title {
           @include roboto;
           font-size: 13px;
-          color: #5D5D66;
+          color: #5d5d66;
           line-height: 20px;
           padding-bottom: 10px;
         }
+
         textarea {
           height: 80px;
           max-width: 100%;
-          color: $gray-color;
           text-align: left;
           text-indent: 0;
-          resize: none;
+          resize: vertical;
         }
       }
     }
+
     .contents-list {
       .right-area {
         padding-left: 40px;
+
         .title {
           @include roboto-bold;
           font-size: 15px;
-          letterSpacing: 0px;
+          letter-spacing: 0px;
           line-height: 25px;
         }
+
         .txt {
           @include roboto;
           font-size: 13px;
-          color: $gray-color;
-          letterSpacing: 0px;
+          color: $tc-gray-80;
           line-height: 25px;
         }
       }
+
       &.part-one {
         .icons {
           width: 16px;
@@ -234,9 +272,11 @@ $title-color: $tc-gray-80;
           float: left;
           margin-top: 3px;
         }
+
         .icon-box {
           background-position: -28px -29px;
         }
+
         .icon-magic {
           background-position: -4px -52px;
         }
@@ -249,42 +289,47 @@ $title-color: $tc-gray-80;
       .content-boxes {
         display: block;
       }
+
       .bg-contents,
       .btn-gray-border {
         display: none;
       }
     }
+
     .bg-contents {
       @include roboto-medium;
       font-size: 15px;
-      color: #B47DD6;
-      background: #F8F2FB;
-      letterSpacing: 10px;
+      color: #b47dd6;
+      background: #f8f2fb;
+      // letter-spacing: 10px;
       width: 100%;
       height: 40px;
       line-height: 40px;
       text-align: center;
     }
+
     .content-boxes {
       display: none;
     }
+
     .textarea-title {
       @include roboto;
       font-size: 13px;
-      color: #5D5D66;
+      color: $tc-gray-70;
       line-height: 20px;
       padding-bottom: 10px;
     }
+
     textarea {
       min-height: 80px;
       max-width: 100%;
-      color: $gray-color;
       text-align: left;
       text-indent: 0;
       margin-bottom: 20px;
+      resize: vertical;
     }
-
   }
+
   .section-footer {
     display: flex;
     align-items: center;
@@ -294,7 +339,6 @@ $title-color: $tc-gray-80;
     margin-top: -70px;
     margin-bottom: 20px;
     border-radius: $corner-radius * 2;
-
   }
 
   .section-footer-spec {
@@ -309,235 +353,273 @@ $title-color: $tc-gray-80;
 
   /* .section-file-interface */
   .section-file-interface {
-      .tc-textarea {
-          padding: 5px 10px;
-          font-size: 13px;
-          background: #FAFAFB;
-          color: #888894;
-          min-height: 55px;
-          max-width: 100%;
-          line-height: 20px;
-          resize: none;
-      }
-      .dashed-bottom-border {
-          border-top: 1px dashed #C3C3C8;
-          border-bottom: none;
-      }
-      .textarea-boxes {
-          display: none;
-      }
-      .row {
-          &.hover-after {
-              .edit-box {
-                  display: block;
-                  float: right;
-              }
-          }
-          &.edit-status {
-              .tc-file-field__inputs,
-              .textarea-boxes,
-              .edit-box {
-                  display: block;
-              }
-
-              .title,.txt,.right-txt {
-                  display: none;
-              }
-              .status {
-                  .icon-pen {
-                      background-position: -24px 0;
-                      margin-top: 4px;
-                  }
-                  .icon-delete {
-                      background-position: -24px -48px;
-                      margin-top: 4px;
-                  }
-              }
-          }
+    .tc-textarea {
+      padding: 5px 10px;
+      font-size: 13px;
+      background: $tc-gray-neutral-light;
+      min-height: 55px;
+      max-width: 100%;
+      line-height: 20px;
+      resize: vertical;
+    }
+
+    .dashed-bottom-border {
+      border-top: 1px dashed $tc-gray-20;
+      border-bottom: none;
+    }
+
+    .textarea-boxes {
+      display: none;
+    }
+
+    .row {
+      &.hover-after {
+        .edit-box {
+          display: block;
+          float: right;
+        }
       }
-      .edit-box {
+
+      &.edit-status {
+        .tc-file-field__inputs,
+        .textarea-boxes,
+        .edit-box {
+          display: block;
+        }
+
+        .title,
+        .txt,
+        .right-txt {
           display: none;
-          .icons {
-              width: 24px;
-              height: 24px;
-              vertical-align: middle;
-              margin-top: -2px;
-              margin-left: 10px;
-          }
+        }
+
+        .status {
           .icon-pen {
-              background-position: -48px 0;
+            background-position: -24px 0;
+            margin-top: 4px;
           }
+
           .icon-delete {
-              background-position: -72px 0;
-          }
-      }
-      .contents-list {
-          .titles {
-              @include roboto-medium;
-              font-size: 15px;
-              color: $gray-color;
-              line-height: 20px;
-              margin-bottom: 2px;
+            background-position: -24px -48px;
+            margin-top: 4px;
           }
+        }
       }
-      .icon-zip {
-          background-position: -51px -27px;
-          width: 42px;
-          height: 42px;
-          float: left;
-          margin-top: 3px;
+    }
+
+    .edit-box {
+      display: none;
+
+      .icons {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        margin-top: -2px;
+        margin-left: 10px;
       }
+
       .icon-pen {
-          background-position: 0 0;
+        background-position: -48px 0;
       }
-      .right-area {
-          &.padding-left60 {
-              padding-left: 60px;
-          }
-          .tc-file-field__inputs {
-              width: 80%;
-              margin-right: 100px;
-              display: none;
-              @include roboto-bold;
-              &.height100 {
-                  height: 100px;
-                  line-height: 10px;
-              }
-              &.width {
-                  width: 100%;
-              }
-          }
-          .zip-title-bar {
-              position: relative;
-              .status {
-                  float: right;
-                  .txt {
-                      @include roboto;
-                      font-size: 15px;
-                      color: $gray-color;
-                      letterSpacing: 0px;
-                      line-height: 20px;
-                  }
-              }
-              &:after {
-                  clear: right;
-              }
+
+      .icon-delete {
+        background-position: -72px 0;
+      }
+    }
+
+    .contents-list {
+      .titles {
+        @include roboto-medium;
+        font-size: 15px;
+        color: $gray-color;
+        line-height: 20px;
+        margin-bottom: 2px;
+      }
+    }
+
+    .icon-zip {
+      background-position: -51px -27px;
+      width: 42px;
+      height: 42px;
+      float: left;
+      margin-top: 3px;
+    }
+
+    .icon-pen {
+      background-position: 0 0;
+    }
+
+    .right-area {
+      &.padding-left60 {
+        padding-left: 60px;
+      }
+
+      .tc-file-field__inputs {
+        width: 80%;
+        margin-right: 100px;
+        display: none;
+        @include roboto-bold;
+
+        &.height100 {
+          height: 100px;
+          line-height: 10px;
+        }
+
+        &.width {
+          width: 100%;
+        }
+      }
+
+      .zip-title-bar {
+        position: relative;
+
+        .status {
+          float: right;
+
+          .txt {
+            @include roboto;
+            font-size: 15px;
+            color: $gray-color;
+            letter-spacing: 0px;
+            line-height: 20px;
           }
+        }
 
+        &:after {
+          clear: right;
+        }
       }
+    }
   }
   /* .dashed-boxes */
   .dashed-boxes {
-      border: 1px dashed #C3C3C8;
-      text-align: center;
-      margin-bottom: 20px;
-      background: #FAFAFB;
-      border-radius: 2px;
-      .title {
-          @include roboto-medium;
+    border: 1px dashed #c3c3c8;
+    text-align: center;
+    margin-bottom: 20px;
+    background: #fafafb;
+    border-radius: 2px;
+
+    .title {
+      @include roboto-medium;
+      font-size: 15px;
+      letter-spacing: 0px;
+      line-height: 20px;
+    }
+
+    .gray-txt {
+      @include roboto;
+      font-size: 15px;
+      color: #747480;
+      line-height: 20px;
+    }
+
+    .btn-boxes {
+      margin-top: 10px;
+    }
+
+    .tc-btn-primary {
+      position: relative;
+      cursor: pointer;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 13px;
+      display: inline-block;
+    }
+
+    .file-box {
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      position: absolute;
+      left: 0;
+      top: 0;
+      margin: 0;
+      z-index: 555;
+    }
+
+    .icon-file {
+      background-position: -4px -28px;
+      width: 15px;
+      height: 17px;
+      vertical-align: middle;
+    }
+
+    &.drag-boxes {
+      padding: 20px 0;
+    }
+
+    &.flie-list-boxes {
+      .flie-list {
+        border-bottom: 1px dashed #c3c3c8;
+        padding-bottom: 5px;
+      }
+
+      .row {
+        text-align: left;
+        padding: 10px 20px;
+
+        .file-name {
+          @include roboto-bold;
           font-size: 15px;
-          letterSpacing: 0px;
+          color: $title-color;
+          letter-spacing: 0px;
           line-height: 20px;
-      }
-      .gray-txt {
+          padding-left: 7px;
+        }
+
+        .upload-status {
           @include roboto;
           font-size: 15px;
-          color: #747480;
+          color: $gray-color;
+          // letter-spacing: 0px;
           line-height: 20px;
-      }
-      .btn-boxes {
-          margin-top: 10px;
-      }
-          .tc-btn-primary {
-              position: relative;
-              cursor: pointer;
-              height: 30px;
-              line-height: 30px;
-              padding: 0 13px;
-              display: inline-block;
-          }
-      .file-box {
-          opacity: 0;
+          float: right;
+        }
+
+        .white-bar {
           width: 100%;
-          height: 100%;
-          cursor: pointer;
-          position: absolute;
-          left: 0;
-          top: 0;
-          margin: 0;
-          z-index: 555;
-      }
-      .icon-file {
-          background-position: -4px -28px;
-          width: 15px;
-          height: 17px;
-          vertical-align: middle;
-      }
-      &.drag-boxes {
-          padding: 20px 0;
-      }
-      &.flie-list-boxes {
-          .flie-list {
-              border-bottom: 1px dashed #C3C3C8;
-              padding-bottom: 5px;
-          }
-          .row {
-              text-align: left;
-              padding: 10px 20px;
-              .file-name {
-                  @include roboto-bold;
-                  font-size: 15px;
-                  color: $title-color;
-                  letterSpacing: 0px;
-                  line-height: 20px;
-                  padding-left: 7px;
-              }
-              .upload-status {
-                  @include roboto;
-                  font-size: 15px;
-                  color: $gray-color;
-                  letterSpacing: 0px;
-                  line-height: 20px;
-                  float: right;
-              }
-              .white-bar {
-                  width: 100%;
-                  height: 4px;
-                  margin-top: 5px;
-                  background: #DCDCE0;
-                  border-radius: 12px;
-                  position: relative;
-                  .blue-bar {
-                      background: #59A7FF;
-                      border-right: 2px solid #fafafb;
-                      border-radius: 10px 0px 0px 10px;
-                      height: 4px;
-                      position: absolute;
-                      left: 0;
-                      top: 0;
-                      &.width23 {
-                          width: 23%;
-                      }
-                      &.width75 {
-                          width: 75%;
-                      }
-                  }
-              }
-          }
-          .file-list-bottom {
-              .txt {
-                color: $title-color;
-                @include roboto-bold;
-              }
-              padding: 20px 0;
+          height: 4px;
+          margin-top: 5px;
+          background: #dcdce0;
+          border-radius: 12px;
+          position: relative;
+
+          .blue-bar {
+            background: #59a7ff;
+            border-right: 2px solid #fafafb;
+            border-radius: 10px 0px 0px 10px;
+            height: 4px;
+            position: absolute;
+            left: 0;
+            top: 0;
+
+            &.width23 {
+              width: 23%;
+            }
+
+            &.width75 {
+              width: 75%;
+            }
           }
+        }
+      }
+
+      .file-list-bottom {
+        .txt {
+          color: $title-color;
+          @include roboto-bold;
+        }
+        padding: 20px 0;
       }
+    }
   }
   /* .section-form-option */
   .section-form-option {
     .bottom-border-titles {
-        margin-bottom: 20px;
+      margin-bottom: 20px;
     }
+
     .titles {
       text-align: left;
       @include roboto-bold;
@@ -545,76 +627,94 @@ $title-color: $tc-gray-80;
       color: $title-color;
       line-height: 25px;
     }
+
     .gray-txt {
       @include roboto;
       font-size: 15px;
       color: #747480;
       line-height: 20px;
     }
+
     .content-boxes {
       margin-top: -20px;
     }
+
     .checkbox-group {
-        margin-top: 10px;
+      margin-top: 10px;
     }
+
     .group-item {
       display: inline-block;
       vertical-align: middle;
       margin-right: 42px;
     }
+
     .radios-group {
       margin-top: 10px;
     }
+
     .radio {
       float: left;
     }
+
     .ul-list {
-        .hide {
-          display: none;
-        }
-        li {
-          position: relative;
-          .text,.point {
-            @include roboto-medium;
-            font-size: 15px;
-            color: #262628;
-            line-height: 18px;
-            padding: 10px 0;
-            @include roboto-bold;
-            color: $title-color;
-          }
-        }
-        .btn-delete {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          margin-top: -14px;
-          &:hover .icon-delete {
-            background-position: -96px 0;
-            width: 24px;
-            height: 24px;
-          }
-        }
+      .hide {
+        display: none;
+      }
+
+      li {
+        position: relative;
+
+        .text,
         .point {
-          display: inline-block;
-          margin-right: 20px;
+          @include roboto-medium;
+          font-size: 15px;
+          color: #262628;
+          line-height: 18px;
+          padding: 10px 0;
+          @include roboto-bold;
+          color: $title-color;
         }
-        .icons.icon-delete {
-          background-position: -24px -48px;
+      }
+
+      .btn-delete {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        margin-top: -14px;
+
+        &:hover .icon-delete {
+          background-position: -96px 0;
           width: 24px;
           height: 24px;
         }
+      }
+
+      .point {
+        display: inline-block;
+        margin-right: 20px;
+      }
+
+      .icons.icon-delete {
+        background-position: -24px -48px;
+        width: 24px;
+        height: 24px;
+      }
     }
+
     .input-box {
       margin-top: 15px;
     }
+
     .btn-input-boxes {
       position: relative;
       margin-top: 15px;
       padding-right: 64px;
+
       .tc-file-field__inputs {
         width: 100%;
       }
+
       .btn-gray-border {
         width: 54px;
         position: absolute;