diff --git a/app/styles/components/_pipeline.scss b/app/styles/components/_pipeline.scss
index 7779fda32..58a974bad 100644
--- a/app/styles/components/_pipeline.scss
+++ b/app/styles/components/_pipeline.scss
@@ -135,13 +135,11 @@
     left: 0;
     right: 0;
     margin: auto;
+    z-index: -1;
   }
   >.steps-wrap {
     padding: 4px;
-    // margin-right: 10px;
-    // &.active{
-    // border: 2px dashed $border;
-    // }
+    text-align: center;
   }
   .step-content {
     position: relative;
@@ -291,6 +289,12 @@
   position: relative;
   top: 0;
   height: 36.5px;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   .label-wrap{
     position: absolute;
     left: 0;
@@ -306,4 +310,4 @@
 }
 .timestamp{
   color: whitesmoke;
-}
\ No newline at end of file
+}
diff --git a/lib/pipeline/addon/components/pipeline-stages/template.hbs b/lib/pipeline/addon/components/pipeline-stages/template.hbs
index 63455ef42..5da1a6774 100644
--- a/lib/pipeline/addon/components/pipeline-stages/template.hbs
+++ b/lib/pipeline/addon/components/pipeline-stages/template.hbs
@@ -23,11 +23,11 @@
         dragEndHook=(action "dragEnd")
         }}
             {{#if (eq index 0)}}
-              <div class="stage-name text-muted clip">
+              <div class="stage-name clip">
                 {{index-add index}}. {{item.name}}
               </div>
             {{else}}
-              <div class="stage-name text-muted clip" style="curosor: pointer;" {{action 'editStage' index}}>
+              <div class="stage-name clip" style="curosor: pointer;" {{action 'editStage' index}}>
                 <a href="javascript:void(0);">{{index-add index}}. {{item.name}}</a>
               </div>
             {{/if}}
@@ -69,7 +69,7 @@
   {{else}}
     {{#each pipeline.stages as |item index|}}
     <div class="stage-wrap">
-      <div class="stage-name text-muted clip" {{action 'editStage' index}}>
+      <div class="stage-name clip" {{action 'editStage' index}}>
         {{index-add index}}. {{item.name}}
       </div>
         {{pipeline-steps
@@ -92,7 +92,7 @@
     {{/each}}
   {{/if}}
 </section>
-{{!-- 
+{{!--
 {{pipeline-input-var-hint
   hintAry=envvars
   loading=envvarsLoading
diff --git a/lib/pipeline/addon/components/pipeline-steps/template.hbs b/lib/pipeline/addon/components/pipeline-steps/template.hbs
index 913566900..d16a6ec03 100644
--- a/lib/pipeline/addon/components/pipeline-steps/template.hbs
+++ b/lib/pipeline/addon/components/pipeline-steps/template.hbs
@@ -13,7 +13,7 @@
             isDraggable=false
             class="step-content"
             content=item
-            overrideClass='sortObject' 
+            overrideClass='sortObject'
             isSortable=true
             sortingScope=sortingScope
             dragStartAction="dragStart"
@@ -37,12 +37,11 @@
     {{/if}}
     {{#if editable}}
       {{#unless (eq stepMode 'scm')}}
-        <div class="step-add step-content" {{action 'addStep'}}>
-          <a href="javascript:void(0);" class="text-small">
-            {{t 'newPipelineStage.addStep'}}
-          </a>
-        </div>
+        <button class="mt-10 btn bg-link icon-btn p-0" {{action 'addStep'}} style="margin: 0 auto;">
+          <span class="darken"><i class="icon icon-plus text-small"/></span>
+          <span>{{t 'newPipelineStage.addStep'}}</span>
+        </button>
       {{/unless}}
     {{/if}}
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/lib/pipeline/addon/components/pipeline-trigger/template.hbs b/lib/pipeline/addon/components/pipeline-trigger/template.hbs
index 44ba878b5..b44a14150 100644
--- a/lib/pipeline/addon/components/pipeline-trigger/template.hbs
+++ b/lib/pipeline/addon/components/pipeline-trigger/template.hbs
@@ -1,16 +1,17 @@
+<hr/>
 <div class="inline-form">
   <label>{{t 'newPipelineStep.stepType.scm.trigger'}}</label>
   <div class="pt-10"></div>
   <div class="inline-form">
     {{input disabled=disabled type="checkbox" id="webhook" checked=pipeline.triggerWebhook}}
-    <label for="webhook">
+    <label class="acc-label" for="webhook">
       {{t 'newPipelineStage.trigger.webhook'}}
     </label>
   </div>
   <div class="pt-10"></div>
   <div class="inline-form">
     {{input disabled=disabled type="checkbox" id="cron" checked=state.setCustomCron}}
-    <label for="cron">
+    <label class="acc-label" for="cron">
       {{t 'newPipelineStage.trigger.cron'}}
     </label>
   </div>
@@ -29,16 +30,16 @@
     <div class="inline-form pl-10">
       {{radio-button id="everyday" disabled=disabled selection=cronType value="everyday"}}
       <label for="everyday">
-        {{t 'newPipelineStage.trigger.everyday'}} <div class="inline-block">{{input 
-        class="form-control input-sm" 
+        {{t 'newPipelineStage.trigger.everyday'}} <div class="inline-block">{{input
+        class="form-control input-sm"
         type="number"
         min='0'
         max='11'
         value=cron.hour
         disabled=(if (eq cronType 'everyday') disabled true)
       }}</div> : <div class="inline-block">{{input
-        class="form-control input-sm" 
-        type="number" 
+        class="form-control input-sm"
+        type="number"
         value=cron.min
         min='0'
         max='59'
@@ -50,8 +51,8 @@
     <div class="inline-form pl-10">
       {{radio-button id="custom" disabled=disabled selection=cronType value="custom"}}
       <label for="custom">
-        {{t 'newPipelineStage.trigger.custom'}} <div class="inline-block" style="display: relative;top:0">{{input 
-        class="form-control input-sm" 
+        {{t 'newPipelineStage.trigger.custom'}} <div class="inline-block" style="display: relative;top:0">{{input
+        class="form-control input-sm"
         type="text"
         value=customCron
         disabled=(if (eq cronType 'custom') disabled true)
@@ -63,6 +64,6 @@
         {{/if}}
       {{/if}}
     </div>
-    
+
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/lib/pipeline/addon/components/settings-git/template.hbs b/lib/pipeline/addon/components/settings-git/template.hbs
index 172d1daca..ae7984d9a 100644
--- a/lib/pipeline/addon/components/settings-git/template.hbs
+++ b/lib/pipeline/addon/components/settings-git/template.hbs
@@ -69,7 +69,7 @@
 
 {{#unless model.githubConfig}}
   <section class="box mt-30">
-    <h3>{{t 'authPage.github.notAuthenticated.headerVariable' GitHub='GitHub'}}</h3>
+    <h3>{{t 'authPage.github.notAuthenticated.headerVariable'}}</h3>
     <hr/>
     <p>
       <ol class="alphalist ml-40">
@@ -98,7 +98,7 @@
               {{#if (eq selectedOauthType 'gitlab')}}
                 {{t 'authPage.github.notAuthenticated.ul.li2.ul.li1_2' appName="Rancher Pipeline" htmlSafe=true}}
               {{/if}}
-              
+
             </li>
             {{#if (eq selectedOauthType 'github')}}
             <li>
@@ -108,10 +108,10 @@
             {{/if}}
             <li>
               {{#if (eq selectedOauthType 'github')}}
-                <b>{{t 'authPage.github.notAuthenticated.ul.li2.ul.li4'}}</b> 
+                <b>{{t 'authPage.github.notAuthenticated.ul.li2.ul.li4'}}</b>
               {{/if}}
               {{#if (eq selectedOauthType 'gitlab')}}
-                <b>{{t 'authPage.github.notAuthenticated.ul.li2.ul.li4_2'}}</b> 
+                <b>{{t 'authPage.github.notAuthenticated.ul.li2.ul.li4_2'}}</b>
               {{/if}}
               <span id="auth-callback-url">{{destinationUrl}} {{copy-to-clipboard size='small' clipboardText=destinationUrl}}</span></li>
           </ul>
@@ -154,7 +154,7 @@
             {{#liquid-if isEnterprise}}
             <label class="acc-label pb-5">{{t 'authPage.github.notAuthenticated.form.enterpriseHost.labelText'}}{{field-required}}</label>
              {{#if (eq selectedOauthType 'github')}} {{input type="text" value=oauthModel.hostName classNames="form-control" placeholder=(t 'authPage.github.notAuthenticated.form.enterpriseHost.placeholder')}}
-             {{/if}} 
+             {{/if}}
              {{#if (eq selectedOauthType 'gitlab')}} {{input type="text" value=oauthModel.hostName classNames="form-control" placeholder=(t 'authPage.github.notAuthenticated.form.enterpriseHost.placeholder2')}}
              {{/if}}
             {{/liquid-if}}
diff --git a/lib/pipeline/addon/components/step-scm/template.hbs b/lib/pipeline/addon/components/step-scm/template.hbs
index 1aac6df4d..24d1c7056 100644
--- a/lib/pipeline/addon/components/step-scm/template.hbs
+++ b/lib/pipeline/addon/components/step-scm/template.hbs
@@ -4,11 +4,11 @@
   <div class="pt-20"></div>
   <div class="inline-form">
     <label>{{t 'newPipelineStep.stepType.scm.user'}}{{field-required}}</label>
-    <div class="pt-10"></div>
+
     {{#if accountsInfo}}
     <div class="row">
       <div class="col span-12">
-        {{#identity-block 
+        {{#identity-block
           principal=profileComponent
           link=false
         }}
@@ -33,63 +33,64 @@
     {{/if}}
   </div>
 
-  <div class="pt-20"></div>
-  <div class="inline-form">
-    <label>
-      {{t 'pipelineHistories.repository'}}{{field-required}} 
-      {{#if (not-eq modalOpts.type 'review')}}
-      {{#unless state.repoRefresh}}
-        {{#tooltip-element 
-        type="tooltip-basic"
-        model='Refresh repository'
-        tooltipTemplate='tooltip-static'
-        aria-describedby="tooltip-base"
-        tooltipFor="audit-log"}}
-        <button {{action "reloadRepo"}} class="btn bg-transparent"><i class="icon icon-refresh"></i></button>
-        {{/tooltip-element}}
-      {{/unless}}
-      {{/if}}
-    </label>
-    <div class="pt-10"></div>
-    {{#if (eq modalOpts.type 'review')}}
-      {{input class="form-control" value=selectedModel.sourceCodeConfig.url disabled=(if (eq modalOpts.type 'review') true false)}}
-    {{else}}
-      {{#if state.repoRefresh}}
-        <i class="icon icon-spinner icon-spin"></i>
-      {{else}}
-        {{searchable-select
-          content=repositories
-          value=selectedModel.sourceCodeConfig.url 
-          optionLabelPath="url"
-          optionValuePath="url"
-          readOnly=readOnly
-        }}
-      {{/if}}
-    {{/if}}
-  </div>
-  <div class="pt-20"></div>
-  <div class="inline-form">
-    <label>{{t 'newPipelineStep.stepType.scm.branch'}}{{field-required}}</label>
-    <div class="pt-10"></div>
-    {{#each branchTypes as |type| }}
-      <div class="pipeline-input-group">
-        <div class="label-wrap">
-          {{radio-button disabled=(if (eq modalOpts.type 'review') true false) id=type.value selection=selectedModel.sourceCodeConfig.branchCondition value=type.value}}
-          <label for={{type.value}}>
-            {{type.label}}
-          </label>
-        </div>
-        {{#if (not-eq type.value 'all')}}
-          <div class="input-wrap">
-            {{input class="form-control js-disable-hint js-auto-focus" value=selectedModel.sourceCodeConfig.branch placeholder="master" disabled=(if (eq modalOpts.type 'review') true (if (eq type.value selectedModel.sourceCodeConfig.branchCondition) false true))}}
-          </div>
-        {{/if}}
-        </div>
-      <div class="mb-10"></div>
-    {{/each}}
+<hr/>
 
+  <div class="row">
+    <div class="col span-6">
+      <label>
+        {{t 'pipelineHistories.repository'}}{{field-required}}
+        {{#if (not-eq modalOpts.type 'review')}}
+        {{#unless state.repoRefresh}}
+          {{#tooltip-element
+          type="tooltip-basic"
+          model='Refresh repository'
+          tooltipTemplate='tooltip-static'
+          aria-describedby="tooltip-base"
+          tooltipFor="audit-log"}}
+          <button {{action "reloadRepo"}} class="btn bg-transparent"><i class="icon icon-refresh"></i></button>
+          {{/tooltip-element}}
+        {{/unless}}
+        {{/if}}
+      </label>
+
+      {{#if (eq modalOpts.type 'review')}}
+        {{input class="form-control" value=selectedModel.sourceCodeConfig.url disabled=(if (eq modalOpts.type 'review') true false)}}
+      {{else}}
+        {{#if state.repoRefresh}}
+          <i class="icon icon-spinner icon-spin"></i>
+        {{else}}
+          {{searchable-select
+            content=repositories
+            value=selectedModel.sourceCodeConfig.url
+            optionLabelPath="url"
+            optionValuePath="url"
+            readOnly=readOnly
+          }}
+        {{/if}}
+      {{/if}}
+    </div>
+
+    <div class="col span-6">
+      <label>{{t 'newPipelineStep.stepType.scm.branch'}}{{field-required}}</label>
+
+      {{#each branchTypes as |type| }}
+        <div class="pipeline-input-group">
+          <div class="label-wrap">
+            {{radio-button disabled=(if (eq modalOpts.type 'review') true false) id=type.value selection=selectedModel.sourceCodeConfig.branchCondition value=type.value}}
+            <label class="acc-label" for={{type.value}}>
+              {{type.label}}
+            </label>
+          </div>
+          {{#if (not-eq type.value 'all')}}
+            <div class="input-wrap">
+              {{input class="form-control js-disable-hint js-auto-focus" value=selectedModel.sourceCodeConfig.branch placeholder="master" disabled=(if (eq modalOpts.type 'review') true (if (eq type.value selectedModel.sourceCodeConfig.branchCondition) false true))}}
+            </div>
+          {{/if}}
+          </div>
+      {{/each}}
+    </div>
   </div>
-  <div class="pt-10"></div>
+
   {{#pipeline-trigger
     selectedModel=selectedModel
     modalOpts=modalOpts
diff --git a/lib/pipeline/addon/models/pipeline.js b/lib/pipeline/addon/models/pipeline.js
index 482995dbe..ff23dba20 100644
--- a/lib/pipeline/addon/models/pipeline.js
+++ b/lib/pipeline/addon/models/pipeline.js
@@ -64,8 +64,8 @@ let Pipeline = Resource.extend({
       { label:   'action.viewConfig',     icon: 'icon icon-files',          action: 'viewCode',         enabled: !!l.exportConfig, bulkable: false },
       { label:   'action.exportConfig',   icon: 'icon icon-download',       action: 'exportConfig',     enabled: !!l.exportConfig, bulkable: false },
       { divider: true },
-      { label: 'action.activate', icon: 'icon icon-plus-circle', action: 'activate', enabled: !isActive, bulkable: !isActive},
-      { label: 'action.deactivate', icon: 'icon icon-minus-circle', action: 'deactivate', enabled: isActive, bulkable: isActive},
+      { label: 'action.activate', icon: 'icon icon-play', action: 'activate', enabled: !isActive, bulkable: !isActive},
+      { label: 'action.deactivate', icon: 'icon icon-stop', action: 'deactivate', enabled: isActive, bulkable: isActive},
       { divider: true },
       { label: 'action.remove', icon: 'icon icon-trash', action: 'remove', enabled: true, bulkable: true },
     ];
diff --git a/lib/pipeline/addon/pipelines/template.hbs b/lib/pipeline/addon/pipelines/template.hbs
index c3f0873c7..13c7fe6dc 100644
--- a/lib/pipeline/addon/pipelines/template.hbs
+++ b/lib/pipeline/addon/pipelines/template.hbs
@@ -1,11 +1,7 @@
 {{#containers-header tags=tags simpleMode=true showGroup=false}}
-  {{!-- {{#link-to "pipelines.project.import" classNames="btn btn-sm bg-default mr-10"}}{{t 'pipelinesPage.import'}}{{/link-to}} --}}
-  <div class="btn bg-link btn-sm icon-btn p-0">
-  {{#link-to "new-pipeline" class="btn bg-link icon-btn p-0"}}
-    <span class="darken"><i class="icon icon-plus text-small"/></span>
-    <span>{{t 'pipelinesPage.add'}}</span>
+  {{#link-to "new-pipeline" class="btn bg-primary btn-sm"}}
+    {{t 'pipelinesPage.add'}}
   {{/link-to}}
-  </div>
 {{/containers-header}}
 
 <div class="mt-10"></div>
diff --git a/lib/pipeline/translations/en-us.yaml b/lib/pipeline/translations/en-us.yaml
index 7d8d395ca..be6931d92 100644
--- a/lib/pipeline/translations/en-us.yaml
+++ b/lib/pipeline/translations/en-us.yaml
@@ -18,7 +18,7 @@ generic:
 # Resource Actions
 ##############################
 action:
-  approve: Approve  
+  approve: Approve
   rerun: Rerun
   run: Run Once
 
@@ -118,7 +118,7 @@ newPipelineStage:
   modeSerial: serial
   parallelTip: Make steps running simultaneously
   serialTip: Make steps running sequentially
-  conditions: Conditions 
+  conditions: Conditions
   requireApproval: Requires Approval
   approvers: Approvers
   env: Env
@@ -152,7 +152,7 @@ newPipelineStep:
       settingWarning2: click here
       settingWarning3: to load your repository
       note: Note
-      finishOauth1: Have finished the OAuth? 
+      finishOauth1: Have finished the OAuth?
       finishOauth2: click here
       finishOauth3: to load your repository
       trigger: Optional build trigger
@@ -167,7 +167,7 @@ newPipelineStep:
       buildPath: Build Context(relative to workspace)
       push: push to registry
       pushTo: This image will be pushed to
-      pushWarning1: The registry 
+      pushWarning1: The registry
       pushWarning2: haven't been authenticated, click
       pushWarning3: to authenticate it.
       scope: "Scope: Available to all namespaces in this project"
@@ -200,7 +200,7 @@ authPage:
     enterprise: GitHub Enterprise
     header:
       enabled:
-        label: "{github} is enabled"
+        label: "GitHub is enabled"
         required: |
           {appName} is configured to allow access to {orgs, plural,
             =0 {no organizations}
@@ -241,7 +241,7 @@ authPage:
         disable: Disable access control
     notAuthenticated:
       header: "1. Setup a GitHub Application"
-      headerVariable: "1. Setup a {GitHub} Application"
+      headerVariable: "1. Setup a GitHub Application"
       ul:
         li1:
           text: 'For standard GitHub, <a href="https://github.com/settings/developers" target="_blank">click here</a> to go applications settings in a new window.'