diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.html
index b7cb50e95..2f59b1951 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.html
@@ -1,22 +1,22 @@
-<p>
-  Select a cluster or resource pool to run this virtual container host.
-  <br> Advanced options are available to specify additional requirements.
-</p>
 
-<form [formGroup]="form"
+
+<form [formGroup]="form" class="clr-form clr-form-compact"
       novalidate>
+      <p>
+        Select a cluster or resource pool to run this virtual container host.
+        <br> Advanced options are available to specify additional requirements.
+      </p>
   <section class="form-block mb-0" id='compute-capacity'>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label class="required">
+        <label class="clr-control-label clr-col-12 clr-col-md-4 required">
           Compute resource
+          <b>*</b>
         </label>
 
-      </div>
-      <div class="col-xs-6" id="compute-resource-selector">
-        <ng-container>
+      <div class="clr-control-container clr-col-12 clr-col-md-6" id="compute-resource-selector">
+        <clr-tree>
           <clr-tree-node class="form-control rootNode" *ngFor="let serverInfo of serversInfo">
             <button #btnEl class="clr-treenode-link cc-resource">
               <clr-icon shape="block"></clr-icon>
@@ -43,7 +43,7 @@
               </ng-container>
             </ng-template>
           </clr-tree-node>
-        </ng-container>
+        </clr-tree>
       </div>
     </div>
 
@@ -58,15 +58,13 @@
       </clr-signpost-content>
     </clr-signpost>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="cpu-limit-selector">
+        <label for="cpu-limit-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           CPU
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="cpu-limit-selector"
                aria-haspopup="true"
@@ -74,11 +72,13 @@
                class="form-control tooltip tooltip-validation tooltip-lg tooltip-top-left"
                [class.invalid]="form.get('cpuLimit').invalid && (form.get('cpuLimit').dirty || form.get('cpuLimit').touched)">
 
-          <input id="cpu-limit-selector"
-                 class="form-control"
+            <div class="clr-input-wrapper">
+              <input id="cpu-limit-selector"
+                 class="clr-input"
                  type="text"
                  formControlName="cpuLimit">
-
+            </div>
+          
           <span class="tooltip-content" *ngIf="form.get('cpuLimit').hasError('required')">
             CPU limit cannot be empty
           </span>
@@ -95,9 +95,7 @@
             CPU limit cannot be bigger than {{ resourceLimits['cpu']['maxUsage'] }} MHz
           </span>
 
-          <small class="text-muted">
-            Max: {{ resourceLimits.cpu.maxUsage || '-' }} MHz, Min: {{ resourceLimits.cpu.minUsage || '-' }} MHz
-          </small>
+          <span class="clr-subtext">Max: {{ resourceLimits.cpu.maxUsage || '-' }} MHz, Min: {{ resourceLimits.cpu.minUsage || '-' }} MHz</span>
 
         </label>
 
@@ -107,15 +105,13 @@
 
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="memory-limit-selector">
+        <label for="memory-limit-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           Memory
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="memory-limit-selector"
                aria-haspopup="true"
@@ -123,10 +119,12 @@
                class="form-control tooltip tooltip-validation tooltip-lg tooltip-top-left"
                [class.invalid]="form.get('memoryLimit').invalid && (form.get('memoryLimit').dirty || form.get('memoryLimit').touched)">
 
-          <input id="memory-limit-selector"
-                 class="form-control"
-                 type="text"
-                 formControlName="memoryLimit">
+            <div class="clr-input-wrapper">
+              <input id="memory-limit-selector"
+              class="clr-input"
+              type="text"
+              formControlName="memoryLimit">
+            </div>
 
           <span class="tooltip-content" *ngIf="form.get('memoryLimit').hasError('required')">
             Memory limit cannot be empty
@@ -144,9 +142,8 @@
             Memory limit cannot be bigger than {{ resourceLimits['memory']['maxUsage'] }} MB
           </span>
 
-          <small class="text-muted">
-            Max: {{ resourceLimits.memory.maxUsage || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB
-          </small>
+          <span class="clr-subtext">Max: {{ resourceLimits.memory.maxUsage || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB</span>
+
 
         </label>
 
@@ -158,7 +155,7 @@
 
   </section>
 
-  <a class="btn btn-link pl-0"
+  <a class="advanced btn btn-link pl-0"
      (click)="toggleAdvancedMode()">
     {{ inAdvancedMode ? 'Basic' : 'Advanced' }}
     <clr-icon [attr.shape]="inAdvancedMode ? 'caret up' : 'caret down'"></clr-icon>
@@ -180,15 +177,13 @@
       Virtual Container Host settings
     </label>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="cpu-reservation-selector">
+        <label for="cpu-reservation-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           CPU reservation
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="cpu-reservation-selector"
                aria-haspopup="true"
@@ -196,10 +191,12 @@
                class="form-control tooltip tooltip-validation tooltip-lg tooltip-top-left"
                [class.invalid]="form.get('cpuReservation').invalid && (form.get('cpuReservation').dirty || form.get('cpuReservation').touched)">
 
-          <input id="cpu-reservation-selector"
-                 class="form-control"
-                 type="text"
-                 formControlName="cpuReservation">
+              <div class="clr-input-wrapper">
+                <input id="cpu-reservation-selector"
+                class="clr-input"
+                type="text"
+                formControlName="cpuReservation">
+              </div>
 
           <span class="tooltip-content" *ngIf="form.get('cpuReservation').hasError('required')">
             CPU reservation cannot be empty
@@ -217,9 +214,8 @@
             CPU reservation cannot be bigger than {{ resourceLimits['cpu']['unreservedForPool'] }} MHz
           </span>
 
-          <small class="text-muted">
-            Max: {{ resourceLimits.cpu.unreservedForPool || '-' }} MHz, Min: {{ resourceLimits.cpu.minUsage || '-' }} MHz
-          </small>
+          <span class="clr-subtext">Max: {{ resourceLimits.cpu.unreservedForPool || '-' }} MHz, Min: {{ resourceLimits.cpu.minUsage || '-' }} MHz</span>
+
 
         </label>
 
@@ -229,18 +225,17 @@
 
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="cpu-shares-selector">
+        <label for="cpu-shares-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           CPU shares
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-        <div class="select form-control">
+        <div class="clr-select-wrapper">
           <select id="cpu-shares-selector"
+                  class="clr-select"
                   formControlName="cpuShares">
             <option value="low">Low</option>
             <option value="normal">Normal</option>
@@ -251,15 +246,13 @@
       </div>
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="memory-reservation-selector">
+        <label for="memory-reservation-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           Memory reservation
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="memory-reservation-selector"
                aria-haspopup="true"
@@ -267,10 +260,12 @@
                class="form-control tooltip tooltip-validation tooltip-lg tooltip-top-left"
                [class.invalid]="form.get('memoryReservation').invalid && (form.get('memoryReservation').dirty || form.get('memoryReservation').touched)">
 
-          <input id="memory-reservation-selector"
-                 class="form-control"
-                 type="text"
-                 formControlName="memoryReservation">
+              <div class="clr-input-wrapper">
+                <input id="memory-reservation-selector"
+                class="clr-input"
+                type="text"
+                formControlName="memoryReservation">
+              </div>
 
           <span class="tooltip-content" *ngIf="form.get('memoryReservation').hasError('required')">
             Memory limit cannot be empty
@@ -288,9 +283,7 @@
             Memory limit cannot be bigger than {{ resourceLimits['memory']['unreservedForPool'] }} MB
           </span>
 
-          <small class="text-muted">
-            Max: {{ resourceLimits.memory.unreservedForPool || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB
-          </small>
+          <span class="clr-subtext">Max: {{ resourceLimits.memory.unreservedForPool || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB</span>
 
         </label>
 
@@ -300,18 +293,17 @@
 
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="memory-shares-selector">
+        <label for="memory-shares-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           Memory shares
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-        <div class="select form-control">
+        <div class="clr-select-wrapper">
           <select id="memory-shares-selector"
+                  class="clr-select"
                   formControlName="memoryShares">
             <option value="low">Low</option>
             <option value="normal">Normal</option>
@@ -326,15 +318,13 @@
       VCH endpoint VM settings
     </label>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="vm-cpu-selector">
+        <label for="vm-cpu-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           CPUs
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="vm-cpu-selector"
                aria-haspopup="true"
@@ -343,7 +333,7 @@
                [class.invalid]="form.get('endpointCpu').invalid && (form.get('endpointCpu').dirty || form.get('endpointCpu').touched)">
 
           <input id="vm-cpu-selector"
-                 class="form-control"
+                 class="clr-input"
                  type="text"
                  formControlName="endpointCpu">
 
@@ -365,15 +355,13 @@
 
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row">
 
-        <label for="vm-memory-selector">
+        <label for="vm-memory-selector" class="clr-control-label clr-col-12 clr-col-md-4">
           Memory
         </label>
 
-      </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <label for="vm-memory-selector"
                aria-haspopup="true"
@@ -381,11 +369,13 @@
                class="form-control tooltip tooltip-validation tooltip-lg tooltip-top-left"
                [class.invalid]="form.get('endpointMemory').invalid && (form.get('endpointMemory').dirty || form.get('endpointMemory').touched)">
 
-          <input id="vm-memory-selector"
-                 class="form-control"
-                 type="text"
-                 formControlName="endpointMemory">
-
+              <div class="clr-input-wrapper">
+                <input id="vm-memory-selector"
+                class="clr-input"
+                type="text"
+                formControlName="endpointMemory">
+              </div>
+          
           <span class="tooltip-content" *ngIf="form.get('endpointMemory').hasError('required')">
             Memory limit cannot be empty
           </span>
@@ -402,9 +392,7 @@
             Memory limit cannot be bigger than {{ resourceLimits['memory']['maxUsage'] }} MB
           </span>
 
-          <small class="text-muted">
-            Max: {{ resourceLimits.memory.maxUsage || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB
-          </small>
+          <span class="clr-subtext">Max: {{ resourceLimits.memory.maxUsage || '-' }} MB, Min: {{ resourceLimits.memory.minUsage || '-' }} MB</span>
 
         </label>
 
@@ -416,15 +404,13 @@
 
     <!-- VM-Host Affinity -->
     <ng-container *ngIf="selectedResourceIsCluster">
-      <div class="form-group row">
-        <div class="col-xs-4">
-          <label for="vm-host-affinity" class="affinity-label">
+      <div class="clr-form-control clr-row">
+          <label for="vm-host-affinity" class="affinity-label clr-control-label clr-col-12 clr-col-md-4">
             {{ i18n.translate('vch.computeCapacity.vmHostAffinity.title') }}
           </label>
-        </div>
-        <div class="col-xs-8">
+        <div class="clr-control-container clr-col-12 clr-col-md-8">
             <div class="checkbox">
-              <input type="checkbox" id="vm-host-affinity" formControlName="vmHostAffinity"
+              <input type="checkbox" class="clr-input" id="vm-host-affinity" formControlName="vmHostAffinity"
                    [attr.disabled]="(!vmGroupNameIsValid || !isClusterDrsEnabled) ? '' : null">
               <label class="text-nowrap"
                      [ngClass]="{'affinity-disabled': (!vmGroupNameIsValid || !isClusterDrsEnabled)}"
@@ -442,13 +428,13 @@
               </span>
 
               <div class="affinity-alerts" *ngIf="(!isClusterDrsEnabled || !vmGroupNameIsValid)">
-                <div class="row">
-                  <div class="col-xs-1">
+                <div class="clr-form-control clr-row">
+                  <div class="clr-control-container clr-col-12 clr-col-md-1">
                     <div class="alert-icon-wrapper">
                       <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
                     </div>
                   </div>
-                  <div class="col-xs-11">
+                  <div class="clr-control-container clr-col-12 clr-col-md-11">
                     <div class="alert-items">
                       <div class="alert-item static" *ngIf="!vmGroupNameIsValid">
                         <div class="alert-text">
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.scss
index 117b6f9ec..938969416 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/compute-capacity/compute-capacity.scss
@@ -53,3 +53,28 @@
 .affinity-alerts .alert-item {
   margin-bottom: 0px;
 }
+
+.advanced {
+  margin-left: -0.5rem;
+}
+
+#cpu-shares-selector {
+  width: 6.95rem;
+}
+
+#memory-shares-selector {
+  width: 6.95rem;
+}
+
+b {
+  color: #c92100;
+}
+
+.form .form-block>label, form .form-block>label {
+  font-size: .666667rem;
+  letter-spacing: .01em;
+  font-weight: 400;
+  color: #000;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.html
index c7041ee13..7def54e23 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.html
@@ -9,18 +9,17 @@
 </clr-alert>
 <p>Provide the name and log configuration for this new Virtual Container Host (VCH).</p>
 
-<form [formGroup]="form" novalidate>
+<form [formGroup]="form" novalidate class="clr-form clr-form-compact">
   <section class="form-block">
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label for="nameInput" class="required">
+        <label for="nameInput" class="clr-control-label clr-col-12 clr-col-md-3 required">
           VCH name
+          <b>*</b>
         </label>
 
-      </div>
-      <div class="col-xs-7">
+      <div class="clr-control-container clr-col-12 clr-col-md-7">
 
         <label for="nameInput"
                aria-haspopup="true"
@@ -29,7 +28,7 @@
                [class.invalid]="form.get('name').invalid">
 
           <input id="nameInput"
-                 class="form-control"
+                 class="clr-input"
                  type="text"
                  placeholder="Enter virtual container host name"
                  formControlName="name">
@@ -63,39 +62,26 @@
       </clr-signpost>
 
     </div>
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label for="nameInput">
+        <label for="nameInput" class="clr-control-label clr-col-12 clr-col-md-3">
           Container VM name template
         </label>
 
-      </div>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
         <input id="container-name-convention-prefix"
-               class="form-control"
+               class="clr-input"
                type="text"
                placeholder="Prefix"
                formControlName="containerNameConventionPrefix">
 
-        <small class="text-muted text-nowrap" style="line-height: 1.5em">
-          Example container VM names generated by this VCH using this template:<br>
-          <span *ngIf="form.get('containerNameConvention').value === '{name}'" class="my-0">
-            {{ form.get('containerNameConventionPrefix').value }}spleepy_kowalevski{{ form.get('containerNameConventionPostfix').value }}<br>
-            {{ form.get('containerNameConventionPrefix').value }}jolly_nobel{{ form.get('containerNameConventionPostfix').value }}
-          </span>
-          <span *ngIf="form.get('containerNameConvention').value === '{id}'" class="my-0">
-            {{ form.get('containerNameConventionPrefix').value }}4c01db0b339c{{ form.get('containerNameConventionPostfix').value }}<br>
-            {{ form.get('containerNameConventionPrefix').value }}d7886598dbe2{{ form.get('containerNameConventionPostfix').value }}
-          </span>
-        </small>
-
       </div>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-        <div class="select form-control">
+        <div class="clr-select-wrapper">
           <select id="container-name-convention-selector"
+                  class="clr-select"
                   formControlName="containerNameConvention">
             <option value="{name}">Docker name</option>
             <option value="{id}">Container ID</option>
@@ -103,10 +89,10 @@
         </div>
 
       </div>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
         <input id="container-name-convention-postfix"
-               class="form-control"
+               class="clr-input"
                type="text"
                placeholder="Suffix"
                formControlName="containerNameConventionPostfix">
@@ -120,25 +106,40 @@
             </span>
         </clr-signpost-content>
       </clr-signpost>
-
     </div>
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
+      </div>
+      <div class="clr-control-container clr-col-12 clr-col-md-7">
+        <small class="text-muted text-nowrap" style="line-height: 1.5em">
+          Example container VM names generated by this VCH using this template:<br>
+          <span *ngIf="form.get('containerNameConvention').value === '{name}'" class="my-0">
+            {{ form.get('containerNameConventionPrefix').value }}spleepy_kowalevski{{ form.get('containerNameConventionPostfix').value }}<br>
+            {{ form.get('containerNameConventionPrefix').value }}jolly_nobel{{ form.get('containerNameConventionPostfix').value }}
+          </span>
+          <span *ngIf="form.get('containerNameConvention').value === '{id}'" class="my-0">
+            {{ form.get('containerNameConventionPrefix').value }}4c01db0b339c{{ form.get('containerNameConventionPostfix').value }}<br>
+            {{ form.get('containerNameConventionPrefix').value }}d7886598dbe2{{ form.get('containerNameConventionPostfix').value }}
+          </span>
+        </small>
+      </div>
+    </div>
   </section>
 
   <p>Set level of logging and an endpoint for log aggregation.</p>
 
   <section class="form-block">
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label for="debug-level-selector">Debug</label>
+        <label for="debug-level-selector" class="clr-control-label clr-col-12 clr-col-md-3">Debug</label>
 
-      </div>
-      <div class="col-xs-5">
+      <div class="clr-control-container clr-col-12 clr-col-md-5">
 
-        <div class="select form-control">
+        <div class="clr-select-wrapper">
           <select id="debug-level-selector"
+                  class="clr-select"
                   formControlName="debug">
             <option value="0">0 - Verbose logging is disabled</option>
             <option value="1">1 - Provides extra verbosity in the logs</option>
@@ -160,16 +161,15 @@
 
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label for="debug-level-selector">Syslog</label>
+        <label for="debug-level-selector" class="clr-control-label clr-col-12 clr-col-md-3">Syslog</label>
 
-      </div>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
-        <div class="select form-control">
+        <div class="clr-select-wrapper">
           <select id="syslog-transport-selector"
+                  class="clr-select"
                   formControlName="syslogTransport">
             <option value="tcp">tcp</option>
             <option value="udp">udp</option>
@@ -178,17 +178,17 @@
 
       </div>
       <span class="mx-0 px-0">://</span>
-      <div class="col-xs-3">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
 
         <input id="syslog-host-selector"
-               class="form-control"
+               class="clr-input"
                placeholder="IP or FQDN"
                type="text"
                formControlName="syslogHost">
 
       </div>
       <span class="mx-0 px-0">:</span>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
         <label for="syslog-port-selector"
                aria-haspopup="true"
@@ -197,7 +197,7 @@
                [class.invalid]="form.get('syslogPort').invalid && (form.get('syslogPort').dirty || form.get('syslogPort').touched)">
 
           <input id="syslog-port-selector"
-                 class="form-control"
+                 class="clr-input"
                  placeholder="Port"
                  type="text"
                  formControlName="syslogPort">
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.scss
index bf71899fe..e4fc45e84 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/general/general.scss
@@ -2,3 +2,11 @@
   margin-top: 0;
   margin-bottom: 0;
 }
+
+.text-muted {
+  color: #818a91!important;
+}
+
+b {
+  color: #c92100;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.html
index 9fa226127..25e0aca26 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.html
@@ -10,22 +10,21 @@
     <clr-icon shape="pop-out"></clr-icon>
   </a>
 
-  <form class="pt-0" [formGroup]="form" novalidate>
+  <form class="clr-form clr-form-compact" [formGroup]="form" novalidate>
     <section class="form-block my-0" id='networks'>
 
       <label>Required VCH Networks</label>
       <!-- start form control for bridge network -->
-      <div class="row form-group mb-0 relative-po">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
 
-          <label class="required" for="bridge-network-selector">
+          <label class="clr-control-label clr-col-12 clr-col-md-3 required" for="bridge-network-selector">
             Bridge network
+            <b>*</b>
           </label>
-        </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <div class="select form-control">
-            <select id="bridge-network-selector" formControlName="bridgeNetwork">
+          <div class="clr-select-wrapper">
+            <select id="bridge-network-selector" class="clr-select" formControlName="bridgeNetwork">
               <option value="">Not configured</option>
               <option [value]="portgroup['text']" *ngFor="let portgroup of portgroups">
                 {{ portgroup.text }}
@@ -34,19 +33,19 @@
           </div>
 
         </div>
-        <div class="col-xs-3 text-right">
+        <div class="clr-control-label clr-col-12 clr-col-md-3 text-right">
 
           <label for="bridge-network-range-selector">
             Bridge network range
           </label>
 
         </div>
-        <div class="col-xs">
+        <div class="clr-control-container clr-col-12 clr-col-md-1">
 
           <label for="bridge-network-range-selector" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-left"
             [class.invalid]="form.get('bridgeNetworkRange').invalid && (form.get('bridgeNetworkRange').dirty || form.get('bridgeNetworkRange').touched)">
 
-            <input id="bridge-network-range-selector" class="form-control" type="text" formControlName="bridgeNetworkRange">
+            <input id="bridge-network-range-selector" class="clr-input" type="text" formControlName="bridgeNetworkRange">
 
             <span class="tooltip-content" *ngIf="form.get('bridgeNetworkRange').hasError('required')">
               Bridge network range cannot be empty
@@ -67,21 +66,21 @@
 
         </div>
       </div>
-      <div class="row form-group mb-0">
-        <div class="col-xs offset-xs-3"></div>
-        <div class="col-xs text-right">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-container clr-col-12 clr-col-md-6"></div>
+        <div class="clr-control-label clr-col-12 clr-col-md-3 text-right">
 
           <label for="bridge-network-width">
             Bridge network width
           </label>
 
         </div>
-        <div class="col-xs">
+        <div class="clr-control-container clr-col-12 clr-col-md-1">
 
           <label for="bridge-network-width" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('bridgeNetworkWidth').invalid && (form.get('bridgeNetworkWidth').dirty || form.get('bridgeNetworkWidth').touched)">
 
-            <input class="form-control" id="bridge-network-width" type="text" formControlName="bridgeNetworkWidth">
+            <input class="clr-input" id="bridge-network-width" type="text" formControlName="bridgeNetworkWidth">
             <span class="tooltip-content" *ngIf="form.get('bridgeNetworkWidth').hasError('max')">
               Bridge network width's maximum cannot exceed 30
             </span>
@@ -99,18 +98,19 @@
       </div>
        <!-- end form control for bridge network -->
        <!-- start  form control for public network -->
-      <div class="row form-group mb-0">
-        <div class="col-xs-3">
+       <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label class="required" for="public-network-selector">
             Public network
+            <b>*</b>
           </label>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <div class="select form-control">
-            <select id="public-network-selector" formControlName="publicNetwork">
+          <div class="clr-select-wrapper">
+            <select id="public-network-selector" class="clr-select" formControlName="publicNetwork">
               <option value="">Not configured</option>
               <option [value]="portgroup['text']" *ngFor="let portgroup of portgroups">
                 {{ portgroup.text }}
@@ -119,25 +119,25 @@
           </div>
 
         </div>
-        <div class="col-xs-3 text-right">
+        <div class="clr-control-container clr-col-12 clr-col-md-3 text-right">
 
           <div class="radio-inline">
-            <input id="pub-dhcp" type="radio" value="dhcp" formControlName="publicNetworkType">
+            <input id="pub-dhcp" type="radio" value="dhcp" class="clr-radio" formControlName="publicNetworkType">
             <label for="pub-dhcp">DHCP</label>
           </div>
 
           <div class="radio-inline">
-            <input id="pub-static" type="radio" value="static" formControlName="publicNetworkType">
+            <input id="pub-static" type="radio" value="static" class="clr-radio" formControlName="publicNetworkType">
             <label for="pub-static">Static IP</label>
           </div>
 
         </div>
-        <div class="col-xs">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
           <label for="public-network-ip" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('publicNetworkIp').invalid && (form.get('publicNetworkIp').dirty || form.get('publicNetworkIp').touched)">
 
-            <input id="public-network-ip" class="form-control" type="text" placeholder="CIDR" formControlName="publicNetworkIp">
+            <input id="public-network-ip" class="clr-input" type="text" placeholder="CIDR" formControlName="publicNetworkIp">
 
             <span class="tooltip-content" *ngIf="form.get('publicNetworkIp').hasError('required')">
               Public network CIDR cannot be empty
@@ -152,21 +152,21 @@
         </div>
       </div>
 
-      <div class="row form-group mb-0">
-        <div class="col-xs offset-xs-3"></div>
-        <div class="col-xs text-right">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-container clr-col-12 clr-col-md-6"></div>
+        <div class="clr-control-label clr-col-12 clr-col-md-3 text-right">
 
           <label for="public-network-gateway">
             Gateway
           </label>
 
         </div>
-        <div class="col-xs">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
           <label for="public-network-gateway" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('publicNetworkGateway').invalid && (form.get('publicNetworkGateway').dirty || form.get('publicNetworkGateway').touched)">
 
-            <input class="form-control" id="public-network-gateway" type="text" formControlName="publicNetworkGateway" placeholder="IP address">
+            <input class="clr-input" id="public-network-gateway" type="text" formControlName="publicNetworkGateway" placeholder="IP address">
 
             <span class="tooltip-content" *ngIf="form.get('publicNetworkGateway').hasError('required')">
               Public network gateway cannot be empty
@@ -181,20 +181,20 @@
         </div>
 
       </div>
-      <div class="row form-group mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label for="dns-server-selector">
             DNS server
           </label>
 
         </div>
-        <div class="col-xs-5">
+        <div class="clr-control-container clr-col-12 clr-col-md-6">
 
           <label for="dns-server-selector" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('dnsServer').invalid && (form.get('dnsServer').dirty || form.get('dnsServer').touched)">
 
-            <input id="dns-server-selector" class="form-control" placeholder="Comma separated IP addresses" type="text" formControlName="dnsServer">
+            <input id="dns-server-selector" class="clr-input" placeholder="Comma separated IP addresses" type="text" formControlName="dnsServer">
 
             <span class="tooltip-content" *ngIf="form.get('dnsServer').hasError('required')">
               DNS IP addresses cannot be empty
@@ -231,18 +231,18 @@
 
       <label>Optional VCH Networks</label>
 
-      <div class="row form-group mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label for="client-network-selector">
             Client network
           </label>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <div class="select form-control">
-            <select id="client-network-selector" formControlName="clientNetwork">
+          <div class="clr-select-wrapper">
+            <select id="client-network-selector" class="clr-select" formControlName="clientNetwork">
               <option value="">Not configured</option>
               <option [value]="portgroup['text']" *ngFor="let portgroup of portgroups">
                 {{ portgroup.text }}
@@ -258,18 +258,18 @@
           </small>
         </span>
 
-        <div class="col-xs-3 text-right" *ngIf="form.get('clientNetwork').value">
+        <div class="clr-control-container clr-col-12 clr-col-md-3 text-right" *ngIf="form.get('clientNetwork').value">
           <div class="radio-inline">
-            <input id="client-dhcp" type="radio" value="dhcp" formControlName="clientNetworkType">
+            <input id="client-dhcp" type="radio" value="dhcp" class="clr-radio" formControlName="clientNetworkType">
             <label for="client-dhcp">DHCP</label>
           </div>
 
           <div class="radio-inline">
-            <input id="client-static" type="radio" value="static" formControlName="clientNetworkType">
+            <input id="client-static" type="radio" value="static" class="clr-radio" formControlName="clientNetworkType">
             <label for="client-static">Static IP</label>
           </div>
         </div>
-        <div class="col-xs" *ngIf="form.get('clientNetwork').value">
+        <div class="clr-control-container clr-col-12 clr-col-md-3" *ngIf="form.get('clientNetwork').value">
 
           <label for="client-network-ip" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('clientNetworkIp').invalid && (form.get('clientNetworkIp').dirty || form.get('clientNetworkIp').touched)">
@@ -288,17 +288,17 @@
 
         </div>
       </div>
-      <div class="row form-group" *ngIf="form.get('clientNetwork').value">
-        <div class="col-xs-4 text-right">
+      <div class="clr-form-control clr-row" *ngIf="form.get('clientNetwork').value">
+        <div class="clr-control-label clr-col-12 clr-col-md-4 text-right">
           <label for="client-network-routing">
             Routing destination:Gateway
           </label>
         </div>
-        <div class="col-xs routing-conf col-xs-8">
+        <div class="routing-conf clr-control-container clr-col-12 clr-col-md-8">
           <label for="client-network-routing" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('clientNetworkRouting').invalid && (form.get('clientNetworkRouting').dirty || form.get('clientNetworkRouting').touched)">
 
-            <input class="form-control" id="client-network-routing" type="text" placeholder="Comma delimited CIDRs" formControlName="clientNetworkRouting">
+            <input class="clr-input" id="client-network-routing" type="text" placeholder="Comma delimited CIDRs" formControlName="clientNetworkRouting">
 
             <span class="tooltip-content" *ngIf="form.get('clientNetworkRouting').hasError('clientNetworkRoutingRequired')">
               Client network routing destination cannot be empty
@@ -312,7 +312,7 @@
           <label for="client-network-gateway" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('clientNetworkGateway').invalid && (form.get('clientNetworkGateway').dirty || form.get('clientNetworkGateway').touched)">
 
-            <input class="form-control" id="client-network-gateway" type="text" placeholder="IP address" formControlName="clientNetworkGateway">
+            <input class="clr-input" id="client-network-gateway" type="text" placeholder="IP address" formControlName="clientNetworkGateway">
 
             <span class="tooltip-content" *ngIf="form.get('clientNetworkGateway').hasError('clientNetworkGatewayRequired')">
               Client network gateway cannot be empty
@@ -325,18 +325,18 @@
         </div>
       </div>
 
-      <div class="row form-group mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label for="management-network-selector">
             Management network
           </label>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <div class="select form-control">
-            <select id="management-network-selector" formControlName="managementNetwork">
+          <div class="clr-select-wrapper">
+            <select id="management-network-selector" class="clr-select" formControlName="managementNetwork">
               <option value="">Not configured</option>
               <option [value]="portgroup['text']" *ngFor="let portgroup of portgroups">
                 {{ portgroup.text }}
@@ -352,20 +352,20 @@
           </small>
         </span>
 
-        <div class="col-xs-3 text-right" *ngIf="form.get('managementNetwork').value">
+        <div class="clr-control-container clr-col-12 clr-col-md-3 text-right" *ngIf="form.get('managementNetwork').value">
 
           <div class="radio-inline">
-            <input id="mgmt-dhcp" type="radio" value="dhcp" formControlName="managementNetworkType">
+            <input id="mgmt-dhcp" type="radio" value="dhcp" class="clr-radio" formControlName="managementNetworkType">
             <label for="mgmt-dhcp">DHCP</label>
           </div>
 
           <div class="radio-inline">
-            <input id="mgmt-static" type="radio" value="static" formControlName="managementNetworkType">
+            <input id="mgmt-static" type="radio" value="static" class="clr-radio" formControlName="managementNetworkType">
             <label for="mgmt-static">Static IP</label>
           </div>
 
         </div>
-        <div class="col-xs" *ngIf="form.get('managementNetwork').value">
+        <div class="clr-control-container clr-col-12 clr-col-md-3" *ngIf="form.get('managementNetwork').value">
 
           <label for="management-network-ip" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('managementNetworkIp').invalid && (form.get('managementNetworkIp').dirty || form.get('managementNetworkIp').touched)">
@@ -384,16 +384,16 @@
 
         </div>
       </div>
-      <div class="row form-group" *ngIf="form.get('managementNetwork').value">
-        <div class="col-xs-4 text-right">
+      <div class="clr-form-control clr-row" *ngIf="form.get('managementNetwork').value">
+        <div class="clr-control-label clr-col-12 clr-col-md-4 text-right">
           <label for="management-network-routing">
             Routing destination:Gateway
           </label>
         </div>
-        <div class="col-xs-8 col-xs routing-conf">
+        <div class="clr-control-container clr-col-12 clr-col-md-8 routing-conf">
           <label for="management-network-routing" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('managementNetworkRouting').invalid && (form.get('managementNetworkRouting').dirty || form.get('managementNetworkRouting').touched)">
-            <input class="form-control" id="management-network-routing" type="text" placeholder="Comma delimited CIDRs" formControlName="managementNetworkRouting">
+            <input class="clr-input" id="management-network-routing" type="text" placeholder="Comma delimited CIDRs" formControlName="managementNetworkRouting">
             <span class="tooltip-content" *ngIf="form.get('managementNetworkRouting').hasError('managementNetworkRoutingRequired')">
               Management network routing destination cannot be empty
             </span>
@@ -404,7 +404,7 @@
           <span>:</span>
           <label for="management-network-gateway" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('managementNetworkGateway').invalid && (form.get('managementNetworkGateway').dirty || form.get('managementNetworkGateway').touched)">
-            <input class="form-control" id="management-network-gateway" type="text" placeholder="IP address" formControlName="managementNetworkGateway">
+            <input class="clr-input" id="management-network-gateway" type="text" placeholder="IP address" formControlName="managementNetworkGateway">
             <span class="tooltip-content" *ngIf="form.get('managementNetworkGateway').hasError('managementNetworkGatewayRequired')">
               Management network gateway cannot be empty
             </span>
@@ -415,30 +415,30 @@
         </div>
       </div>
 
-      <div class="form-group row mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label for="http-proxy-selector">
             HTTP proxy
           </label>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <input id="http-proxy-selector" class="form-control" formControlName="httpProxy" placeholder="IP or FQDN" type="text">
+          <input id="http-proxy-selector" class="clr-input" formControlName="httpProxy" placeholder="IP or FQDN" type="text">
 
         </div>
 
         <span class="mx-0 px-0">:</span>
 
-        <div class="col-xs-1">
+        <div class="clr-control-container clr-col-12 clr-col-md-1">
 
 
 
           <label for="http-proxy-port-selector" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('httpProxyPort').invalid && (form.get('httpProxyPort').dirty || form.get('httpProxyPort').touched)">
 
-            <input id="http-proxy-port-selector" formControlName="httpProxyPort" placeholder="Port" type="text">
+            <input id="http-proxy-port-selector" class="clr-input" formControlName="httpProxyPort" placeholder="Port" type="text">
 
             <span class="tooltip-content" *ngIf="form.get('httpProxyPort').hasError('maxlength')">
               Port cannot be more than 5 digits long
@@ -452,33 +452,29 @@
 
         </div>
         <!-- To set previous columns widths, we need to set space for 2 dynamic width columns -->
-        <div class="col-xs"></div>
-        <div class="col-xs"></div>
+        <div class="clr-control-container clr-col-12 clr-col-md-3"></div>
+        <div class="clr-control-container clr-col-12 clr-col-md-2"></div>
       </div>
-      <div class="form-group row">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label for="https-proxy-selector">
             HTTPS proxy
           </label>
 
         </div>
-        <div class="col-xs-3">
-
-          <input id="https-proxy-selector" class="form-control" placeholder="IP or FQDN" type="text" formControlName="httpsProxy">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-          <small class="text-muted text-nowrap">
-            Note: This proxy settings are used only when pulling images, and not for any other purpose.
-          </small>
+          <input id="https-proxy-selector" class="clr-input" placeholder="IP or FQDN" type="text" formControlName="httpsProxy">
 
         </div>
         <span class="mx-0 px-0">:</span>
-        <div class="col-xs-1">
+        <div class="clr-control-container clr-col-12 clr-col-md-1">
 
           <label for="https-proxy-port-selector" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('httpsProxyPort').invalid && (form.get('httpsProxyPort').dirty || form.get('httpsProxyPort').touched)">
 
-            <input id="https-proxy-port-selector" placeholder="Port" type="text" formControlName="httpsProxyPort">
+            <input id="https-proxy-port-selector" class="clr-input" placeholder="Port" type="text" formControlName="httpsProxyPort">
 
             <span class="tooltip-content" *ngIf="form.get('httpsProxyPort').hasError('maxlength')">
               Port cannot be more than 5 digits long
@@ -492,10 +488,19 @@
 
         </div>
         <!-- To set previous columns widths, we need to set space for 2 dynamic width columns -->
-        <div class="col-xs"></div>
-        <div class="col-xs"></div>
+        <div class="clr-control-container clr-col-12 clr-col-md-3"></div>
+        <div class="clr-control-container clr-col-12 clr-col-md-2"></div>
       </div>
+      <div class="lr-form-control clr-row">
+        <div class="clr-control-container clr-col-12 clr-col-md-3"></div>
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
+          <small class="text-muted text-nowrap">
+            Note: This proxy settings are used only when pulling images, and not for any other purpose.
+          </small>
+
+        </div>
+      </div>
     </section>
     <section class="form-block" *ngIf="inAdvancedMode">
 
@@ -503,18 +508,18 @@
 
       <div class="mb-2" formArrayName="containerNetworks" *ngFor="let containerNetwork of form.get('containerNetworks').controls; let i=index">
 
-        <div class="form-group row mb-0" [formGroupName]="i">
-          <div class="col-xs-3">
+        <div class="clr-form-control clr-row" [formGroupName]="i">
+          <div class="clr-control-label clr-col-12 clr-col-md-3">
 
             <label for="container-network-selector">
               Container network
             </label>
 
           </div>
-          <div class="col-xs-3">
+          <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-            <div class="select form-control">
-              <select id="container-network-selector" formControlName="containerNetwork">
+            <div class="clr-select-wrapper">
+              <select id="container-network-selector" class="clr-select" formControlName="containerNetwork">
                 <option value="">Not configured</option>
                 <option [value]="portgroup['text']" *ngFor="let portgroup of portgroups">
                   {{ portgroup.text }}
@@ -523,25 +528,25 @@
             </div>
 
           </div>
-          <div class="col-xs-3 text-right">
+          <div class="clr-control-container clr-col-12 clr-col-md-3 text-right">
 
             <div class="radio-inline">
-              <input type="radio" value="dhcp" formControlName="containerNetworkType" [id]="'cont-dhcp-' + i">
+              <input type="radio" value="dhcp" class="clr-radio" formControlName="containerNetworkType" [id]="'cont-dhcp-' + i">
               <label [for]="'cont-dhcp-' + i">DHCP</label>
             </div>
 
             <div class="radio-inline">
-              <input type="radio" value="static" formControlName="containerNetworkType" [id]="'cont-static-' + i">
+              <input type="radio" value="static" class="clr-radio" formControlName="containerNetworkType" [id]="'cont-static-' + i">
               <label [for]="'cont-static-' + i">IP Range</label>
             </div>
 
           </div>
-          <div class="col-xs">
+          <div class="clr-control-container clr-col-12 clr-col-md-2">
 
             <label for="container-network-ip-range" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
               [class.invalid]="form.get('containerNetworks').controls[i].controls.containerNetworkIpRange.invalid && (form.get('containerNetworks').controls[i].controls.containerNetworkIpRange.dirty || form.get('containerNetworks').controls[i].controls.containerNetworkIpRange.touched)">
 
-              <input class="form-control" id="container-network-ip-range" type="text" placeholder="IP range or CIDR" formControlName="containerNetworkIpRange">
+              <input class="clr-input" id="container-network-ip-range" type="text" placeholder="IP range or CIDR" formControlName="containerNetworkIpRange">
 
               <span class="tooltip-content" *ngIf="form.get('containerNetworks').controls[i].controls.containerNetworkIpRange.hasError('required')">
                 Container network IP range cannot be empty
@@ -557,20 +562,20 @@
           </div>
         </div>
 
-        <div class="form-group row mb-0" [formGroupName]="i">
-          <div class="col-xs">
+        <div class="clr-form-control clr-row" [formGroupName]="i">
+          <div class="clr-control-label clr-col-12 clr-col-md-3">
 
             <label for="container-network-dns">
               DNS
             </label>
 
           </div>
-          <div class="col-xs">
+          <div class="clr-control-container clr-col-12 clr-col-md-3">
 
             <label for="container-network-dns" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
               [class.invalid]="form.get('containerNetworks').controls[i].controls.containerNetworkDns.invalid && (form.get('containerNetworks').controls[i].controls.containerNetworkDns.dirty || form.get('containerNetworks').controls[i].controls.containerNetworkDns.touched)">
 
-              <input class="form-control" id="container-network-dns" type="text" placeholder="IP address" formControlName="containerNetworkDns">
+              <input class="clr-input" id="container-network-dns" type="text" placeholder="IP address" formControlName="containerNetworkDns">
 
               <span class="tooltip-content" *ngIf="form.get('containerNetworks').controls[i].controls.containerNetworkDns.hasError('required')">
                 Container network DNS cannot be empty
@@ -583,19 +588,19 @@
             </label>
 
           </div>
-          <div class="col-xs text-right">
+          <div class="clr-control-label clr-col-12 clr-col-md-3 text-right">
 
             <label for="container-network-gateway">
               Gateway
             </label>
 
           </div>
-          <div class="col-xs">
+          <div class="clr-control-container clr-col-12 clr-col-md-3">
 
             <label for="container-network-gateway" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left"
               [class.invalid]="form.get('containerNetworks').controls[i].controls.containerNetworkGateway.invalid && (form.get('containerNetworks').controls[i].controls.containerNetworkGateway.dirty || form.get('containerNetworks').controls[i].controls.containerNetworkGateway.touched)">
 
-              <input class="form-control" id="container-network-gateway" type="text" placeholder="CIDR" formControlName="containerNetworkGateway">
+              <input class="clr-input" id="container-network-gateway" type="text" placeholder="CIDR" formControlName="containerNetworkGateway">
 
               <span class="tooltip-content" *ngIf="form.get('containerNetworks').controls[i].controls.containerNetworkGateway.hasError('required')">
                 Container network gateway cannot be empty
@@ -610,20 +615,20 @@
           </div>
         </div>
 
-        <div class="form-group row mb-0" [formGroupName]="i">
-          <div class="col-xs-3">
+        <div class="clr-form-control clr-row" [formGroupName]="i">
+          <div class="clr-control-label clr-col-12 clr-col-md-3">
 
             <label for="container-network-label">
               Label
             </label>
 
           </div>
-          <div class="col-xs-3">
+          <div class="clr-control-container clr-col-12 clr-col-md-3">
 
             <label for="container-network-label" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-right"
               [class.invalid]="form.get('containerNetworks').controls[i].controls.containerNetworkLabel.invalid && (form.get('containerNetworks').controls[i].controls.containerNetworkLabel.dirty || form.get('containerNetworks').controls[i].controls.containerNetworkLabel.touched)">
 
-              <input class="form-control" id="container-network-label" type="text" placeholder="Network label" formControlName="containerNetworkLabel">
+              <input class="clr-input" id="container-network-label" type="text" placeholder="Network label" formControlName="containerNetworkLabel">
 
               <span class="tooltip-content" *ngIf="form.get('containerNetworks').controls[i].controls.containerNetworkLabel.hasError('required')">
                 Container network label cannot be empty
@@ -637,18 +642,18 @@
           </div>
         </div>
 
-        <div class="form-group row mb-0" [formGroupName]="i">
-          <div class="col-xs-3">
+        <div class="clr-form-control clr-row" [formGroupName]="i">
+          <div class="clr-control-label clr-col-12 clr-col-md-3">
 
             <label for="container-network-firewall">
               Firewall policy
             </label>
 
           </div>
-          <div class="col-xs-3">
+          <div class="clr-control-container clr-col-12 clr-col-md-3">
 
-            <div class="select form-control">
-              <select id="container-network-firewall" formControlName="containerNetworkFirewall">
+            <div class="clr-select-wrapper">
+              <select id="container-network-firewall" class="clr-select" formControlName="containerNetworkFirewall">
                 <option value="closed">Closed</option>
                 <option value="outbound">Outbound</option>
                 <option value="peers">Peers</option>
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.scss
index 32bddaf4b..ac936a9f2 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/networks/networks.scss
@@ -31,3 +31,23 @@
 .relative-po {
   position: relative !important;
 }
+
+.text-muted {
+  color: #818a91!important;
+}
+
+.text-nowrap {
+  white-space: nowrap!important;
+}
+
+b {
+  color: #c92100;
+}
+
+.form .form-block>label, form .form-block>label {
+  font-size: .666667rem;
+  letter-spacing: .01em;
+  font-weight: 400;
+  color: #000;
+  margin-bottom: 0.25rem;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.html
index 75d928d22..ca38c729b 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.html
@@ -3,18 +3,19 @@
   Specify a non-administrative account to limit permissions for day-to-day VCH operations.
 </p>
 
-<form [formGroup]="form" novalidate>
+<form [formGroup]="form" class="clr-form clr-form-compact" novalidate>
   <section class="form-block" id='ops-user'>
 
-    <div class="form-group row mb-0">
-      <div class="col-xs-4">
+    <div class="clr-form-control clr-row mb-0">
+      <div class="clr-control-label clr-col-12 clr-col-md-4">
 
         <label class="required" for="ops-user">
           vSphere user credentials
+          <b>*</b>
         </label>
 
       </div>
-      <div class="col-xs-5">
+      <div class="clr-control-container clr-col-12 clr-col-md-5">
 
         <label for="ops-user"
                aria-haspopup="true"
@@ -23,7 +24,7 @@
                [class.invalid]="form.get('opsUser').invalid && (form.get('opsUser').dirty || form.get('opsUser').touched)">
 
           <input id="ops-user"
-                 class="form-control"
+                 class="clr-input"
                  type="text"
                  placeholder="username@domain.local"
                  formControlName="opsUser">
@@ -36,8 +37,9 @@
 
       </div>
     </div>
-    <div class="form-group row">
-      <div class="col-xs-5 offset-xs-4">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-container clr-col-12 clr-col-md-4"></div>
+      <div class="clr-control-container clr-col-12 clr-col-md-5">
 
         <label for="ops-password"
                aria-haspopup="true"
@@ -46,7 +48,7 @@
                [class.invalid]="form.get('opsPassword').invalid && (form.get('opsPassword').dirty || form.get('opsPassword').touched)">
 
           <input id="ops-password"
-                 class="form-control"
+                 class="clr-input"
                  type="password"
                  placeholder="Password"
                  formControlName="opsPassword">
@@ -59,10 +61,11 @@
 
       </div>
     </div>
-    <div class="form-group row">
-      <div class="col-xs-5 offset-xs-4">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-container clr-col-12 clr-col-md-4"></div>
+      <div class="clr-control-container clr-col-12 clr-col-md-5">
 
-        <div class="checkbox">
+        <div class="clr-checkbox-wrapper">
           <input type="checkbox" id="ops-grant-perms" formControlName="opsGrantPerms">
           <label class="text-nowrap" for="ops-grant-perms">Grant this user any necessary permissions</label>
         </div>
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.scss
index e69de29bb..35fa719a9 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/operations-user/operations-user.scss
@@ -0,0 +1,3 @@
+b {
+    color: #c92100;
+  }
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html
index c2e6d58d9..00a89e017 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html
@@ -1,24 +1,27 @@
-<form class="pt-0" [formGroup]="form" novalidate>
+<form class="clr-form clr-form-compact" [formGroup]="form" novalidate>
   <p class="mt-0">Define the access to this VCH for registries.</p>
   <section class="form-block" id="registry">
-    <div class="toggle-switch">
-      <input type="checkbox" id="use-whitelist-registry" formControlName="useWhitelistRegistry">
-      <label for="use-whitelist-registry">Whitelist registry mode</label>
+    <div class="clr-control-label clr-col-12 clr-col-md-3 form-block my-0">
+      <label class="my-0" for="use-client-auth">Whitelist registry mode</label>
+    </div>
+    <div class="clr-toggle-wrapper">
+      <input type="checkbox" id="use-whitelist-registry" class="clr-toggle" formControlName="useWhitelistRegistry">
+      <label for="use-whitelist-registry"></label>
     </div>
     <div class="mb-2" *ngIf="form.get('useWhitelistRegistry').value">
       <p class="mt-1 mb-2">This VCH can access only those registries in the following whitelist.</p>
       <div formArrayName="whitelistRegistries"
            *ngFor="let whitelistRegistry of form.get('whitelistRegistries')['controls']; let i=index">
-        <div [formGroupName]="i" class="form-group row mb-0">
-          <div class="col-xs-3">
-            <label *ngIf="i === 0" class="required">Whitelist registries</label>
+        <div [formGroupName]="i" class="clr-form-control clr-row">
+          <div class="clr-control-label clr-col-12 clr-col-md-3">
+            <label *ngIf="i === 0" class="required">Whitelist registries<b>*</b></label>
           </div>
-          <div class="col-xs-5">
+          <div class="clr-control-container clr-col-12 clr-col-md-5">
             <label aria-haspopup="true"
                    role="tooltip"
                    class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
                    [class.invalid]="form.get('whitelistRegistries')['controls'][i]['controls'].whitelistRegistry.invalid && (form.get('whitelistRegistries')['controls'][i]['controls'].whitelistRegistry.dirty || form.get('whitelistRegistries')['controls'][i]['controls'].whitelistRegistry.touched)">
-              <input class="form-control"
+              <input class="clr-input"
                      type="text"
                      placeholder="IP/FQDN:Port, CIDR or wildcard domain"
                      formControlName="whitelistRegistry">
@@ -30,15 +33,15 @@
               </span>
             </label>
           </div>
-          <div class="col-xs-2">
-            <div class="select form-control">
-              <select formControlName="whitelistRegType">
+          <div class="clr-control-container clr-col-12 clr-col-md-2">
+            <div class="clr-select-wrapper">
+              <select formControlName="whitelistRegType" class="clr-select">
                 <option value="secure">Secure</option>
                 <option value="insecure">Insecure</option>
               </select>
             </div>
           </div>
-          <div class="col-xs-1 px-0 add-remove-actions">
+          <div class="clr-control-container clr-col-12 clr-col-md-1 px-0 add-remove-actions">
             <clr-icon class="is-solid"
                       shape="times-circle"
                       (click)="removeFormArrayEntry('whitelistRegistries', i)"
@@ -59,20 +62,20 @@
       <p class="mt-0 mb-1">Add registries which this VCH should not verify and access via HTTP if HTTPS fails.</p>
       <div formArrayName="insecureRegistries"
            *ngFor="let insecureRegistry of form.get('insecureRegistries')['controls']; let j=index">
-        <div [formGroupName]="j" class="form-group row mb-0">
-          <div class="col-xs-4">
-            <input class="form-control"
+        <div [formGroupName]="j" class="clr-form-control clr-row mb-0">
+          <div class="clr-control-container clr-col-12 clr-col-md-4">
+            <input class="clr-input"
                    type="text"
                    placeholder="IP or FQDN"
                    formControlName="insecureRegistryIp">
           </div>
           <span class="mx-0 px-0">:</span>
-          <div class="col-xs-2">
+          <div class="clr-control-container clr-col-12 clr-col-md-2">
             <label aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md tooltip-top-left"
                    [class.invalid]="form.get('insecureRegistries')['controls'][j]['controls'].insecureRegistryPort.invalid && (form.get('insecureRegistries')['controls'][j]['controls'].insecureRegistryPort.dirty || form.get('insecureRegistries')['controls'][j]['controls'].insecureRegistryPort.touched)">
-              <input class="form-control"
+              <input class="clr-input"
                      placeholder="Port"
                      type="text"
                      formControlName="insecureRegistryPort">
@@ -84,7 +87,7 @@
               </span>
             </label>
           </div>
-          <div class="col-xs-1 px-0 add-remove-actions">
+          <div class="clr-control-container clr-col-12 clr-col-md-1 px-0 add-remove-actions">
             <clr-icon class="is-solid"
                       shape="times-circle"
                       (click)="removeFormArrayEntry('insecureRegistries', j)"
@@ -110,19 +113,19 @@
       </div>
     </div>
     <div formArrayName="registryCas" *ngFor="let registryCa of form.get('registryCas')['controls']; index as i; last as isLast">
-      <div [formGroupName]="i" class="form-group row mb-0">
-        <div class="col-xs-6 text-truncate">
+      <div [formGroupName]="i" class="clr-form-control clr-row mb-0">
+        <div class="clr-control-container clr-col-12 clr-col-md-6 text-truncate">
           <span class="text-muted" *ngIf="!registryCaContents[i]">Select X.509 certificate pem file</span>
           <span *ngIf="registryCaContents[i]">
             {{ registryCaContents[i].name }}, expires: {{ registryCaContents[i].expires | date : 'mediumDate'}}
           </span>
           <input id="registry-ca-{{i}}"
-                 class="form-control hidden-xs-up"
+                 class="clr-input hidden-xs-up"
                  type="file"
                  formControlName="registryCa"
                  (change)="addFileContent($event, 'registryCas', i, isLast)">
         </div>
-        <div class="col-xs px-0 add-remove-actions">
+        <div class="clr-control-label clr-col-12 clr-col-md-3 px-0 add-remove-actions">
           <label class="btn btn-link my-0" for="registry-ca-{{i}}">
             {{ registryCaContents[i] ? 'Replace' : 'Select' }}
           </label>
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.scss
index 59733f075..5d4445f15 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.scss
@@ -15,3 +15,31 @@
     }
   }
 }
+
+.mt-0 {
+  margin-top: 0!important;
+}
+
+.mb-1 {
+  margin-bottom: 1rem!important;
+}
+
+.mb-2 {
+  margin-bottom: 1.5rem!important;
+}
+
+.hidden-xs-up {
+  display: none!important;
+}
+
+b {
+  color: #c92100;
+}
+
+.form .form-block>label, form .form-block>label {
+  font-size: .666667rem;
+  letter-spacing: .01em;
+  font-weight: 400;
+  color: #000;
+  margin-bottom: 0.25rem;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html
index a9fe6e9ca..72156c968 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html
@@ -1,22 +1,18 @@
-<form class="pt-0" [formGroup]="form" novalidate>
+<form class="clr-form clr-form-compact" [formGroup]="form" novalidate>
   <p class="mt-0">Define the Docker API access to this VCH for management and docker clients.</p>
   <section class="form-block">
-    <div class="row flex-items-xs-middle">
-      <div class="col-xs-3 form-block my-0">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-label clr-col-12 clr-col-md-3 form-block my-0">
         <label class="my-0" for="use-client-auth">Client Certificates</label>
       </div>
-      <div class="col-xs">
-        <div class="form-group mb-0 row">
-          <div class="col-xs">
-            <div class="toggle-switch toggle-switch--no-label">
-              <input type="checkbox" id="use-client-auth" formControlName="useClientAuth">
-              <label for="use-client-auth"></label>
-            </div>
-            <span class="text-muted">
-              {{ form.get('useClientAuth').value ? 'Clients will need to authenticate' : 'Clients do not need to authenticate' }}
-            </span>
-          </div>
-        </div>
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
+        <div class="clr-toggle-wrapper toggle-switch--no-label">
+          <input type="checkbox" id="use-client-auth" class="clr-toggle" formControlName="useClientAuth">
+          <label for="use-client-auth"></label>
+        </div>
+        <span class="text-muted">
+          {{ form.get('useClientAuth').value ? 'Clients will need to authenticate' : 'Clients do not need to authenticate' }}
+        </span>
       </div>
     </div>
     <p class="mt-0 mb-1">
@@ -34,10 +30,11 @@
         </div>
       </clr-alert>
       <div formArrayName="tlsCas" *ngFor="let tlsCa of form.controls.tlsCas.controls; index as i; last as isLast">
-        <div [formGroupName]="i" class="form-group row mb-0">
-          <div class="col-xs-6 text-truncate">
+        <div [formGroupName]="i" class="clr-form-control clr-row">
+          <div class="clr-control-container clr-col-12 clr-col-md-6 text-truncate">
             <span class="text-muted" *ngIf="!tlsCaContents[i]" [ngClass]="{'required': i === 0}">
               Select X.509 certificate pem file
+              <b>*</b>
             </span>
             <span *ngIf="tlsCaContents[i]">
               {{ tlsCaContents[i].name }}, expires: {{ tlsCaContents[i].expires | date : 'mediumDate'}}
@@ -45,7 +42,7 @@
             <input id="tls-ca-{{i}}" class="hidden-xs-up" type="file" (change)="addFileContent($event, 'tlsCas', i, isLast)">
             <input type="hidden" formControlName="tlsCa">
           </div>
-          <div class="col-xs px-0 add-remove-actions">
+          <div class="lr-control-container clr-col-12 clr-col-md-3 add-remove-actions">
             <label class="btn btn-link my-0" for="tls-ca-{{i}}">
               {{ tlsCaContents[i] ? 'Replace' : 'Select' }}
             </label>
@@ -58,30 +55,30 @@
   </section>
   <section class="form-block" id="security">
     <label>Server Certificates</label>
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-label clr-col-12 clr-col-md-3">
         <label>Source of certificates</label>
       </div>
-      <div class="col-xs">
+      <div class="clr-control-container clr-col-12 clr-col-md-6">
         <div class="radio-inline">
-          <input type="radio" value="autogenerated" formControlName="serverCertSource" id="server-autogen">
+          <input type="radio" class="clr-radio" value="autogenerated" formControlName="serverCertSource" id="server-autogen">
           <label for="server-autogen">Auto-generate</label>
         </div>
         <div class="radio-inline">
-          <input type="radio" value="existing" formControlName="serverCertSource" id="server-existing">
+          <input type="radio" class="clr-radio" value="existing" formControlName="serverCertSource" id="server-existing">
           <label for="server-existing">Existing</label>
         </div>
       </div>
     </div>
     <div *ngIf="form.get('serverCertSource').value === 'autogenerated'">
-      <div class="form-group row mb-0">
-        <div class="col-xs-3">
-          <label class="required" for="tls-cname">Common Name (CN)</label>
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
+          <label class="required" for="tls-cname">Common Name (CN)<b>*</b></label>
         </div>
-        <div class="col-xs-4">
+        <div class="clr-control-container clr-col-12 clr-col-md-4">
           <label for="tls-cname" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('tlsCname').invalid && (form.get('tlsCname').dirty || form.get('tlsCname').touched)">
-            <input id="tls-cname" class="form-control" type="text" placeholder="*.local" formControlName="tlsCname">
+            <input id="tls-cname" class="clr-input" type="text" placeholder="*.local" formControlName="tlsCname">
             <span class="tooltip-content" *ngIf="form.get('tlsCname').hasError('required')">
               Common Name (CN) cannot be empty
             </span>
@@ -93,22 +90,22 @@
           </clr-signpost-content>
         </clr-signpost>
       </div>
-      <div class="form-group row mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
           <label for="organization">Organization (O)</label>
         </div>
-        <div class="col-xs-4">
-          <input id="organization" class="form-control" type="text" formControlName="organization">
+        <div class="clr-control-container clr-col-12 clr-col-md-4">
+          <input id="organization" class="clr-input" type="text" formControlName="organization">
         </div>
       </div>
-      <div class="form-group row">
-        <div class="col-xs-3">
-          <label class="required" for="certificate-key-size">Certificate key size</label>
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
+          <label class="required" for="certificate-key-size">Certificate key size<b>*</b></label>
         </div>
-        <div class="col-xs-2">
+        <div class="clr-control-container clr-col-12 clr-col-md-2">
           <label for="certificate-key-size" aria-haspopup="true" role="tooltip" class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
             [class.invalid]="form.get('certificateKeySize').invalid && (form.get('certificateKeySize').dirty || form.get('certificateKeySize').touched)">
-            <input id="certificate-key-size" class="form-control" type="text" formControlName="certificateKeySize">
+            <input id="certificate-key-size" class="clr-input" type="text" formControlName="certificateKeySize">
             <span class="tooltip-content" *ngIf="form.get('certificateKeySize').hasError('required')">
               Certificate key size cannot be empty
             </span>
@@ -127,11 +124,11 @@
           <span class="alert-text">{{ tlsServerError }}</span>
         </div>
       </clr-alert>
-      <div class="form-group row mb-0">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
           <label class="required" for="tls-server-cert">Server certificate</label>
         </div>
-        <div class="col-xs-6">
+        <div class="clr-control-container clr-col-12 clr-col-md-6">
           <span class="text-muted" *ngIf="!tlsServerCertContents">Select X.509 certificate pem file</span>
           <span *ngIf="tlsServerCertContents">
             {{ tlsServerCertContents.name }}, expires: {{ tlsServerCertContents.expires | date : 'mediumDate'}}
@@ -145,11 +142,11 @@
           </label>
         </div>
       </div>
-      <div class="form-group row">
-        <div class="col-xs-3">
+      <div class="clr-form-control clr-row">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
           <label class="required" for="tls-server-key">Server private key</label>
         </div>
-        <div class="col-xs-6">
+        <div class="clr-control-container clr-col-12 clr-col-md-6">
           <span class="text-muted" *ngIf="!tlsServerKeyContents">Select unencrypted key pem file</span>
           <span *ngIf="tlsServerKeyContents">
             {{ tlsServerKeyContents.name }}, algorithm: {{ tlsServerKeyContents.algorithm}}
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.scss
index ef21b2ac0..40cef3975 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.scss
@@ -24,3 +24,23 @@
 .toggle-switch--no-label {
   margin-right: 0;
 }
+
+.text-muted {
+  color: #818a91!important;
+}
+
+.hidden-xs-up {
+  display: none!important;
+}
+
+b {
+  color: #c92100;
+}
+
+.form .form-block>label, form .form-block>label {
+  font-size: .666667rem;
+  letter-spacing: .01em;
+  font-weight: 400;
+  color: #000;
+  margin-bottom: 0.25rem;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.html
index 704dcb014..3977a16bf 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.html
@@ -1,6 +1,6 @@
 <div class="spinner" *ngIf="datastoresLoading"></div>
 
-<form class="pt-0" [formGroup]="form" novalidate *ngIf="!datastoresLoading">
+<form class="clr-form clr-form-compact" [formGroup]="form" novalidate *ngIf="!datastoresLoading">
   <section class="form-block my-0"  id='storage-capacity'>
 
     <label>
@@ -11,18 +11,17 @@
       Select the image datastore to be used to hold container images and an optional folder.
     </p>
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label class="required" for="image-store-selector">
+        <label class="required" for="image-store-selector" class="clr-control-label  clr-col-12 clr-col-md-3">
           Datastore
+          <b>*</b>
         </label>
 
-      </div>
-      <div class="col-xs-4">
+      <div class="clr-control-container clr-col-12 clr-col-md-4">
 
-        <div class="select form-control">
-          <select id="image-store-selector" formControlName="imageStore">
+        <div class="clr-select-wrapper">
+          <select id="image-store-selector" class="clr-select" formControlName="imageStore">
             <option value="">Not selected</option>
             <option [value]="datastore.name" *ngFor="let datastore of datastores; trackBy: datastoreTrackByFn">
               {{ datastore.name }} ({{ datastore?.info?.freeSpace }} free)
@@ -33,18 +32,16 @@
       </div>
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label for="file-folder-selector">
+        <label for="file-folder-selector" class="clr-control-label clr-col-12 clr-col-md-3">
           File folder
         </label>
 
-      </div>
-      <div class="col-xs-4">
+      <div class="clr-control-container clr-col-12 clr-col-md-4">
 
         <input id="file-folder-selector"
-               class="form-control"
+               class="clr-input"
                type="text"
                placeholder="Existing or new folder name"
                formControlName="fileFolder">
@@ -52,16 +49,14 @@
       </div>
     </div>
 
-    <div class="form-group row">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row">
 
-        <label class="image-size-label">
+        <label class="image-size-label clr-control-label clr-col-12 clr-col-md-3">
           Max Container VM<br>
           image size
         </label>
 
-      </div>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
         <label for="base-image-size"
                aria-haspopup="true"
@@ -69,10 +64,12 @@
                class="form-control tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="form.get('baseImageSize').invalid && (form.get('baseImageSize').dirty || form.get('baseImageSize').touched)">
 
-          <input type="text"
-                 id="base-image-size"
-                 formControlName="baseImageSize"
-                 class="form-control">
+               <div class="clr-input-wrapper">
+                  <input type="text"
+                  id="base-image-size"
+                  formControlName="baseImageSize"
+                  class="clr-input">
+               </div>
 
           <span class="tooltip-content" *ngIf="form.get('baseImageSize').hasError('required')">
             Base image size cannot be empty
@@ -82,17 +79,15 @@
             Base image size should be numeric
           </span>
 
-          <small class="text-muted text-nowrap">
-            This limit cannot be changed after deploying the VCH
-          </small>
+          <span class="clr-subtext">This limit cannot be changed after deploying the VCH</span>
 
         </label>
 
       </div>
-      <div class="col-xs-2">
+      <div class="clr-control-container clr-col-12 clr-col-md-2">
 
-        <div class="select form-control">
-          <select formControlName="baseImageSizeUnit">
+        <div class="clr-select-wrapper">
+          <select formControlName="baseImageSizeUnit" class="clr-select">
             <option value="MiB">MB</option>
             <option selected value="GiB">GB</option>
           </select>
@@ -123,32 +118,31 @@
       Make selected datastores available for docker volumes
     </p>
 
-    <div class="form-group row mb-2">
-      <div class="col-xs">
-        <div class="toggle-switch">
-          <input type="checkbox" id="enable-anonymous-volumes" formControlName="enableAnonymousVolumes">
-          <label for="enable-anonymous-volumes">Enable anonymous volumes</label>
-        </div>
+    <div class="mb-2 clr-form-control clr-row">
+      <div class="clr-toggle-wrapper">
+        <input type="checkbox" id="enable-anonymous-volumes" class="clr-toggle" formControlName="enableAnonymousVolumes">
+        <label for="enable-anonymous-volumes">Enable anonymous volumes</label>
       </div>
     </div>
 
     <div class="mb-1" formArrayName="volumeStores">
 
-      <div class="form-group row mb-0"
+      <div class="clr-form-control clr-row"
            [formGroupName]="i"
            *ngFor="let volumeStore of form.controls.volumeStores.controls; let i=index">
-        <div class="col-xs-3">
+        <div class="clr-control-label clr-col-12 clr-col-md-3">
 
           <label [ngClass]="{'required': form.get('enableAnonymousVolumes').value && i === 0}">
             Volume datastore
+            <b *ngIf="form.get('enableAnonymousVolumes').value && i === 0">*</b>
           </label>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
           <small class="vol-datastore-header" *ngIf="i === 0">Datastore</small>
-          <div class="select form-control">
-            <select formControlName="volDatastore">
+          <div class="clr-select-wrapper">
+            <select formControlName="volDatastore" class="clr-select">
               <option value="">Not selected</option>
               <option [value]="datastore.name" *ngFor="let datastore of datastores">
                 {{ datastore.name }} ({{ datastore?.info?.freeSpace }} free)
@@ -157,18 +151,18 @@
           </div>
 
         </div>
-        <div class="col-xs-3">
+        <div class="clr-control-container clr-col-12 clr-col-md-3">
 
           <small class="vol-datastore-header" *ngIf="i === 0">Folder</small>
-          <input class="form-control"
+          <input class="clr-input"
                  type="text"
                  placeholder="Optional folder name"
                  formControlName="volFileFolder">
 
         </div>
-        <div class="col-xs">
+        <div class="clr-control-container clr-col-12 clr-col-md-2">
 
-          <small class="vol-datastore-header" *ngIf="i === 0">Volume store name</small>
+          <small class="vol-datastore-header" *ngIf="i === 0">Name</small>
           <label class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
                  for="docker-volname-selector"
                  aria-haspopup="true"
@@ -177,7 +171,7 @@
                  *ngIf="(form.get('enableAnonymousVolumes').value && i > 0) || (!form.get('enableAnonymousVolumes').value)">
 
             <input id="docker-volname-selector"
-                   class="form-control"
+                   class="clr-input"
                    type="text"
                    placeholder="Volume name"
                    formControlName="dockerVolName">
@@ -195,7 +189,7 @@
           <span *ngIf="form.get('enableAnonymousVolumes').value && i === 0">Default</span>
 
         </div>
-        <div class="col-xs-1 px-0 vol-datastore-actions">
+        <div class="clr-control-container clr-col-12 clr-col-md-1 px-0 vol-datastore-actions">
 
           <clr-icon class="is-solid"
                     shape="times-circle"
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.scss b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.scss
index 81617e22a..4ed30fcde 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.scss
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/storage-capacity/storage-capacity.scss
@@ -1,7 +1,8 @@
 .vol-datastore {
   &-header {
-    position: absolute;
+    position: relative;
     top: -20px;
+    width: 0px;
     font-weight: bold;
   }
 
@@ -15,3 +16,15 @@
   margin-top: 10px;
   line-height: 16px;
 }
+
+.mb-1 {
+  margin-bottom: 1rem!important;
+}
+
+.mb-2 {
+  margin-bottom: 1.5rem!important;
+}
+
+b {
+  color: #c92100;
+}
\ No newline at end of file
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/summary/summary.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/summary/summary.html
index 56e39c865..e48d10d95 100644
--- a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/summary/summary.html
+++ b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/summary/summary.html
@@ -1,7 +1,7 @@
-<form [formGroup]="form" novalidate>
+<form [formGroup]="form" class="clr-form clr-form-compact" novalidate>
   <section class="form-block" id='summary'>
-    <div class="form-group row">
-      <div class="col-xs-12">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-container clr-col-12 clr-col-md-12">
         <clr-stack-view id="vch-payload-stackview">
           <!-- name -->
           <clr-stack-block>
@@ -462,13 +462,14 @@
       </div>
     </div>
     <!-- Copy CLI -->
-    <div class="row p1 mb10">
-      <div class="col-xs-3">
+    <div class="clr-form-control clr-row p1 mb10">
+      <div class="clr-control-label clr-col-12 clr-col-md-3">
         <label for="target-os">Copy CLI command</label>
       </div>
-      <div class="col-xs-3">
-        <div class="select">
+      <div class="clr-control-container clr-col-12 clr-col-md-3">
+        <div class="clr-select-wrapper">
           <select id="target-os"
+                  class="clr-select"
                   formControlName="targetOS">
             <option value="">Select Platform</option>
             <option value="windows">Windows</option>
@@ -477,15 +478,15 @@
           </select>
         </div>
       </div>
-      <div class="col-xs-6">
+      <div class="clr-control-container clr-col-12 clr-col-md-6">
         <clr-icon class="cursor-pointer"
                   shape="clipboard"
                   (click)="copyCliCommandToClipboard()"></clr-icon>
       </div>
     </div>
-    <div class="row mb10"
+    <div class="clr-form-control clr-row mb10"
          *ngIf="copySucceeded !== null">
-      <div class="col-xs-12">
+      <div class="clr-control-container clr-col-12 clr-col-md-12">
         <div class="alert"
              [class.alert-success]="copySucceeded === true"
              [class.alert-danger]="copySucceeded === false">
@@ -502,9 +503,10 @@
         </div>
       </div>
     </div>
-    <div class="form-group row">
-      <div class="col-xs-12">
+    <div class="clr-form-control clr-row">
+      <div class="clr-control-container clr-col-12 clr-col-md-12">
         <textarea id="cliCommand"
+                  class="clr-textarea"
                   readonly
                   formControlName="cliCommand"></textarea>
       </div>
diff --git a/h5c/vic/src/vic-webapp/src/app/summary-portlet/summary-portlet.component.ts b/h5c/vic/src/vic-webapp/src/app/summary-portlet/summary-portlet.component.ts
index 70c8a78be..964afd01e 100644
--- a/h5c/vic/src/vic-webapp/src/app/summary-portlet/summary-portlet.component.ts
+++ b/h5c/vic/src/vic-webapp/src/app/summary-portlet/summary-portlet.component.ts
@@ -31,7 +31,7 @@ import { VM_PROPERTIES_TO_EXTRACT } from '../shared/constants/vm.constants';
   selector: 'vic-summary-portlet',
   template: `
     <div *ngIf="!gs.isPluginMode()">
-        <button (click)="toggleVmType()">Toggle VM Type</button>
+        <button class="btn btn-link" (click)="toggleVmType()">Toggle VM Type</button>
     </div>
     <vic-vch-portlet [activeVm]="activeVm" *ngIf="activeVm && activeVm.isVCH"></vic-vch-portlet>
     <vic-container-portlet [activeVm]="activeVm" *ngIf="activeVm && activeVm.isContainer"></vic-container-portlet>