diff --git a/app/configuration/controllers/certificate-controller.html b/app/configuration/controllers/certificate-controller.html
index 89ea28f..faedce2 100644
--- a/app/configuration/controllers/certificate-controller.html
+++ b/app/configuration/controllers/certificate-controller.html
@@ -3,9 +3,10 @@
   <div class="row column">
     <h1>SSL certificates</h1>
   </div>
-  <div ng-repeat="certificate in certificates|filter:{isExpiring:true}" class="row column">
+  <div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column">
     <div class="small-12 alert alert-warning" role="alert">
-        <div class="icon__warning inline"></div> The uploaded {{certificate.Description}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one day!' : getDays(certificate.ValidNotAfter) + ' days!'}} Consider replacing it with a new certificate.
+      <icon aria-hidden="true" file="icon-warning.svg" /> The uploaded {{certificate.Description}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one
+      day!' : getDays(certificate.ValidNotAfter) + ' days!'}}. Consider replacing it with a new certificate.
     </div>
   </div>
   <div ng-repeat="certificate in certificates|filter:{isExpired:true}" class="row column">
@@ -14,12 +15,14 @@
     </div>
   </div>
   <div class="row column">
-    <button type="button" class="btn  btn-tertiary"
-      ng-disabled="availableCertificateTypes.length === 0"
-      ng-click="addCertificateModal=true">
-      <icon file="icon-plus.svg"></icon>
+    <button type="button" class="btn  btn-tertiary" ng-disabled="availableCertificateTypes.length === 0" ng-click="addCertificateModal=true">
+      <icon class="icon-add" file="icon-plus.svg"></icon>
       Add new certificate
     </button>
+    <button type="button" class="btn btn-tertiary" ng-click="addCSRModal=true">
+      <icon class="icon-add" file="icon-plus.svg"></icon>
+      Generate CSR
+    </button>
   </div>
   <div class="row column">
     <div class="small-12 certificate__table">
@@ -44,56 +47,246 @@
           </div>
         </div>
       </div>
-      <div ng-if="certificates.length < 1" class="empty__logs" >There have been no certificates added.</div>
+      <div ng-if="certificates.length < 1" class="empty__logs">There have been no certificates added.</div>
       <div ng-repeat="certificate in certificates">
-        <certificate cert="certificate" reload="loadCertificates()")></certificate>
+        <certificate cert="certificate" reload="loadCertificates()" )></certificate>
       </div>
     </div>
   </div>
   <section class="modal add__certificate__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCertificateModal}">
-    <div class="page-header ">
-      <h3>Add new certificate</h3>
-    </div>
-    <div class="modal__content">
-      <form name="add__cert__form" id="add__cert__form" ng-class="{'submitted': submitted}">
-        <div class="row column">
+    <form name="add__cert__form" id="add__cert__form" ng-class="{'submitted': submitted}">
+      <div class="modal__content">
+        <button class="certificate__close-modal" ng-click="addCertificateModal = false; add__cert__form.$setUntouched()">
+          <icon aria-hidden="true" file="icon-close.svg">
+        </button>
+        <h2 class="page-header">Add new certificate</h2>
+        <div class="row column add-certificate__section ">
           <div class="small-12">
-          <label for="cert__type">Certificate type</label>
-          <select id="cert__type" name="cert__type" ng-model="newCertificate.selectedType" required>
-            <option class="courier-bold" ng-value="">Select an option</option>
-            <option class="courier-bold" ng-value="type" ng-repeat="type in availableCertificateTypes">{{type.Description}}</option>
-          </select>
-          <div ng-messages="add__cert__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__cert__form.cert__type.$touched || submitted}">
-            <p ng-message="required">Field is required</p>
-          </div>
-          </div>
-        </div>
-        <div class="row column">
-          <div class="small-12">
-            <label class ="select__new-label" for="upload_cert_new">Certificate file</label>
-          </div>
-          <div class="row column file__upload">
-            <label for='upload_cert_new'>
-              <input name="upload_cert_new" id="upload_cert_new" type="file" file="newCertificate.file" class="hide"/>
-              <span class="btn btn-secondary select__new-button">Choose file</span>
-            </label>
-          </div>
-          <div class="row column">
-            <div ng-if="newCertificate.file" class="small-7 file__name">
-              <span>{{newCertificate.file.name}}</span>
-              <icon file="icon-close.svg"
-                ng-if="newCertificate.file.name"
-                ng-click="newCertificate.file = '';"
-                class="float-right"></icon>
+            <label for="cert__type">Certificate type</label>
+            <select id="cert__type" name="cert__type" ng-model="newCertificate.selectedType" required>
+              <option class="courier-bold" ng-value="">Select an option</option>
+              <option class="courier-bold" ng-value="type" ng-repeat="type in availableCertificateTypes">
+                {{type.Description}}</option>
+            </select>
+            <div ng-messages="add__cert__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__cert__form.cert__type.$touched || submitted }">
+              <p ng-message="required">Field is required</p>
             </div>
           </div>
         </div>
-      </form>
-    </div>
-    <div class="modal__button-wrapper">
-      <button class="btn btn-secondary" ng-click="addCertificateModal = false; newCertificate={};add__cert__form.$setUntouched();">Cancel</button>
-      <button class="btn btn-primary" ng-class="{'disabled' : add__cert__form.$invalid || !newCertificate.file}" ng-click="submitted = true; uploadCertificate();">Save</button>
-    </div>
+        <div class="row column add-certificate__section">
+          <div class="small-12">
+            <label class="select__new-label" for="upload_cert_new">Certificate file</label>
+          </div>
+          <div class="row column file__upload add-certificate__section ">
+            <label for='upload_cert_new'>
+              <input name="upload_cert_new" id="upload_cert_new" type="file" file="newCertificate.file" class="hide" />
+              <span class="btn btn-secondary select__new-button">Choose file</span>
+            </label>
+          </div>
+          <div class="row column add-certificate__section ">
+            <div ng-if="newCertificate.file" class="small-7 file__name">
+              <span>{{newCertificate.file.name}}</span>
+              <icon file="icon-close.svg" ng-if="newCertificate.file.name" ng-click="newCertificate.file = '';" class="float-right"></icon>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal__button-wrapper">
+        <button class="btn btn-secondary" ng-click="addCertificateModal = false; newCertificate={};add__cert__form.$setUntouched();">Cancel</button>
+        <button class="btn btn-primary" ng-disabled="add__cert__form.$invalid || !newCertificate.file" ng-click="submitted = true; uploadCertificate();">Save</button>
+      </div>
+    </form>
   </section>
-  <div class="modal-overlay" tabindex="-1" ng-class="{'active': addCertificateModal}"></div>
-</div>
+
+  <section class="modal add-csr__modal" aria-hidden="true" role="dialog" ng-class="{'active': addCSRModal}">
+    <!--Close button for displaying CSR Code, we need a close button within form to reset form validation correctly-->
+    <button class="certificate__close-modal" ng-click="resetCSRModal();" ng-if="displayCSRCode==true">
+      <icon aria-hidden="true" file="icon-close.svg">
+    </button>
+
+    <!-- CSR Code display content-->
+
+    <div ng-if="displayCSRCode==true">
+      <h2 class="page-header">Certificate Signing Request (CSR)</h2>
+      <div class="modal__content add-csr__container">
+        <span id="csrCode" class="add-csr__container-csr-code">{{csrCode}}</span>
+      </div>
+      <div class="modal__button-wrapper">
+        <button class="btn btn-secondary" clipboard text="csrCode" on-copied="copySuccess(event)" on-error="copyfailed(err)">
+          <span ng-if="!copied">Copy</span>
+          <span ng-if="copied">
+            <icon aria-hidden="true" file="icon-check.svg"></icon>
+            <span>Copied</span>
+          </span>
+        </button>
+        <button class="btn btn-primary" ng-click="addCSRModal = false;">
+          <a ng-href="data:text/json;charset=utf-8,{{csrCode}}" download="csrCode.txt" class="add-csr__text-download">
+            Download</a>
+        </button>
+      </div>
+
+    </div>
+
+
+
+    <form name="add__csr__form" id="add__csr__form" novalidate ng-if="displayCSRCode==false">
+      <div class="modal__content add-csr__container">
+        <button class="certificate__close-modal" ng-click="resetCSRModal(); add__csr__form.$setUntouched()">
+          <icon aria-hidden="true" file="icon-close.svg">
+        </button>
+        <h2 class="page-header">Generate a Certificate Signing Request (CSR)</h2>
+        <div class="row">
+          <fieldset class="column medium-8 add-csr__section">
+            <legend class="add-csr__section-title">General</legend>
+            <div class="row">
+              <div class="column medium-6">
+                <label for="cert__type" class="add-csr__label">Certificate Type *</label>
+                <select class="add-csr__select" id="cert__type" name="cert__type" ng-model="newCSR.certificateCollection" required>
+                  <option class="courier-bold" ng-value="default" ng-model="selectOption">Select an option</option>
+                  <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes">
+                    {{type.Description}}</option>
+                </select>
+                <div ng-messages="add__csr__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__csr__form.cert__type.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+              <div class="column medium-6">
+                <label for="countryCode" class="add-csr__label">Country *</label>
+                <select class="add-csr__select" id="countryCode" name="countryCode" ng-model="newCSR.countryCode" required>
+                  <option class="courier-bold" ng-value="" ng-model="selectOption">Select an option</option>
+                  <option class="courier-bold" ng-value="country" ng-repeat="country in countryList">{{country.Name}}
+                  </option>
+                </select>
+                <div ng-messages="add__csr__form.countryCode.$error" class="form-error" ng-class="{'visible' : add__csr__form.countryCode.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="state" class="add-csr__label">State *</label>
+                <input class="add-csr__input" ng-model="newCSR.state" type="text" id="state" name="state" required></input>
+                <div ng-messages="add__csr__form.state.$error" class="form-error" ng-class="{'visible' : add__csr__form.state.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="city" class="add-csr__label">City *</label>
+                <input class="add-csr__input" id="city" name="city" ng-model="newCSR.city" type="text" required></input>
+                <div ng-messages="add__csr__form.city.$error" class="form-error" ng-class="{'visible' : add__csr__form.city.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="companyName" class="add-csr__label">Company Name *</label>
+                <input class="add-csr__input" type="text" ng-model="newCSR.organization" id="companyName" name="companyName" required></input>
+                <div ng-messages="add__csr__form.companyName.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyName.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="companyUnit" class="add-csr__label">Company Unit *</label>
+                <input class="add-csr__input" ng-model="newCSR.companyUnit" name="companyUnit" id="companyUnit" type="text" required></input>
+                <div ng-messages="add__csr__form.companyUnit.$error" class="form-error" ng-class="{'visible' : add__csr__form.companyUnit.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="commonName" class="add-csr__label">Common Name *</label>
+                <input class="add-csr__input" ng-model="newCSR.commonName" name="commonName" type="text" id="commonName" required></input>
+                <div ng-messages="add__csr__form.commonName.$error" class="form-error" ng-class="{'visible' : add__csr__form.commonName.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <label for="challengePassword" class="add-csr__label">Challenge Password</label>
+                <input class="add-csr__input-no-validation" id="challengePassword" ng-model="newCSR.challengePassword" type="text"></input>
+              </div>
+
+              <div class="column medium-6">
+                <label for="contactPerson" class="add-csr__label">Contact Person</label>
+                <input class="add-csr__input-no-validation" id="contactPerson" ng-model="newCSR.contactPerson" type="text"></input>
+              </div>
+
+              <div class="column medium-6">
+                <label for="emailAddress" class="add-csr__label">Email Address</label>
+                <input class="add-csr__input-no-validation" id="emailAddress" ng-model="newCSR.emailAddress" type="text"></input>
+              </div>
+
+              <div class="column medium-6">
+                <div>
+                  <label id="alternate-name-label" for="alternateName" class="add-csr__label">Alternate Name</label>
+                  <input class="add-csr__input-no-validation" ng-model="newCSR.firstAlternativeName" id="alternateName" name="alternativeName"
+                    type="text"></input>
+                </div>
+                <div class="add-csr__additional-alt-names" ng-repeat="name in names">
+                  <input id="alternate-name-input-{{$index}}" aria-describedby="alternate-name-label" class="add-csr__input-no-validation"
+                    ng-model="name.Value" type="text"></input>
+                  <button aria-label="Delete alternate name field" aria-controls="alternate-name-input-{{$index}}" class="btn btn-tertiary add-csr__alt-name-delete-btn"
+                    ng-click="deleteOptionalRow($index)" ng-disabled="multiSelected">
+                    <icon aria-hidden="true" file="icon-trashcan.svg">
+                  </button>
+                </div>
+              </div>
+
+              <div class="column medium-6">
+                <button class="btn btn-tertiary add-csr__alt-name-add-btn" ng-click="addOptionalRow()">
+                  <icon file="icon-plus.svg"></icon>
+                  Add another alternate name
+                </button>
+              </div>
+            </div>
+          </fieldset>
+
+          <fieldset class="column medium-4 add-csr__section add-csr__section--border ">
+            <legend class="add-csr__section-title">Private key</legend>
+            <div class="add-csr__container-private-key">
+              <div class="add-csr__content-private-key">
+                <label for="keyPairAlgorithm" class="add-csr__label">Key Pair Algorithm *</label>
+                <select class="add-csr__select" ng-model="newCSR.keyPairAlgorithm" id="keyPairAlgorithm" name="keyPairAlgorithm" required>
+                  <option class="courier-bold" ng-value="" ng-model="selectOption">Select an option</option>
+                  <option class="courier-bold" ng-value="data" ng-repeat="data in keyPairAlgorithm">{{data}}</option>
+                </select>
+                <div ng-messages="add__csr__form.keyPairAlgorithm.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyPairAlgorithm.$touched}">
+                  <p ng-message="required">Field is required</p>
+                </div>
+
+                <div ng-if="newCSR.keyPairAlgorithm == 'EC'">
+                  <label for="keyCurveId" class="add-csr__label">Key Curve ID</label>
+                  <select class="add-csr__select" ng-model="newCSR.keyCurveId" id="keyCurveId" name="keyCurveId" required>
+                    <option class="courier-bold" ng-value="">None</option>
+                    <option class="courier-bold" ng-value="data" ng-repeat="data in keyCurveId">{{data}}</option>
+                  </select>
+                  <div ng-messages="add__csr__form.keyCurveId.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyCurveId.$touched}">
+                    <p ng-message="required">Field is required</p>
+                  </div>
+                </div>
+
+
+                <div ng-if="newCSR.keyPairAlgorithm =='RSA'">
+                  <label for="keyBitLength" class="add-csr__label">Key Bit Length *</label>
+                  <select class="add-csr__select" ng-model="newCSR.keyBitLength" id="keyBitLength" name="keyBitLength" required>
+                    <option class="courier-bold" ng-value="">Select an option</option>
+                    <option class="courier-bold" ng-value="data" ng-repeat="data in keyBitLength">{{data}}</option>
+                  </select>
+                  <div ng-messages="add__csr__form.keyBitLength.$error" class="form-error" ng-class="{'visible' : add__csr__form.keyBitLength.$touched}">
+                    <p ng-message="required">Field is required</p>
+                  </div>
+                </div>
+
+              </div>
+          </fieldset>
+          </div>
+        </div>
+        <div class="modal__button-wrapper">
+          <button class="btn btn-secondary" ng-click="resetCSRModal();add__csr__form.$setUntouched();">Cancel</button>
+          <button class="btn btn-primary" ng-click="csrSubmitted = true; getCSRCode();add__csr__form.$setUntouched();" ng-disabled="add__csr__form.$invalid">Generate CSR</button>
+        </div>
+      </div>
+    </form>
+  </section>
+  <div class="modal-overlay" tabindex="-1" ng-class="{'active': addCertificateModal || addCSRModal}"></div>
\ No newline at end of file
diff --git a/app/configuration/controllers/certificate-controller.js b/app/configuration/controllers/certificate-controller.js
index 7fa42a1..589035c 100644
--- a/app/configuration/controllers/certificate-controller.js
+++ b/app/configuration/controllers/certificate-controller.js
@@ -10,14 +10,25 @@
   'use strict';
 
   angular.module('app.configuration').controller('certificateController', [
-    '$scope', 'APIUtils', '$q', 'Constants', 'toastService',
-    function($scope, APIUtils, $q, Constants, toastService) {
+    '$scope', 'APIUtils', '$q', 'Constants', 'toastService', '$timeout',
+    function($scope, APIUtils, $q, Constants, toastService, $timeout) {
       $scope.loading = false;
       $scope.certificates = [];
       $scope.availableCertificateTypes = [];
+      $scope.allCertificateTypes = Constants.CERTIFICATE_TYPES;
       $scope.addCertificateModal = false;
+      $scope.addCSRModal = false;
       $scope.newCertificate = {};
+      $scope.newCSR = {};
       $scope.submitted = false;
+      $scope.csrSubmitted = false;
+      $scope.csrCode = '';
+      $scope.displayCSRCode = false;
+      $scope.keyBitLength = Constants.CERTIFICATE.KEY_BIT_LENGTH;
+      $scope.keyPairAlgorithm = Constants.CERTIFICATE.KEY_PAIR_ALGORITHM;
+      $scope.keyCurveId = Constants.CERTIFICATE.KEY_CURVE_ID;
+      $scope.countryList = Constants.COUNTRIES;
+
 
       $scope.loadCertificates = function() {
         $scope.certificates = [];
@@ -99,6 +110,96 @@
         }
       };
 
+      // add optional name
+      $scope.names = [];
+      $scope.addOptionalRow = function() {
+        $scope.names.push({Value: ''})
+      };
+
+      // remove optional name row
+      $scope.deleteOptionalRow = function(index) {
+        $scope.names.splice(index, 1);
+        if ($scope.names.length == 0) {
+          $scope.names = [];
+        }
+      };
+
+
+      // create a CSR object to send to the backend
+      $scope.getCSRCode = function() {
+        var addCSR = {};
+        let alternativeNames = $scope.names.map(name => name.Value);
+
+        // if user provided a first alternative name then push to alternative
+        // names array
+        $scope.newCSR.firstAlternativeName ?
+            alternativeNames.push($scope.newCSR.firstAlternativeName) :
+            $scope.newCSR.firstAlternativeName = '';
+
+
+        addCSR.CertificateCollection = {
+          '@odata.id': $scope.newCSR.certificateCollection.location
+        };
+        addCSR.CommonName = $scope.newCSR.commonName;
+        addCSR.ContactPerson = $scope.newCSR.contactPerson || '';
+        addCSR.City = $scope.newCSR.city;
+        addCSR.AlternativeNames = alternativeNames || [];
+        addCSR.ChallengePassword = $scope.newCSR.challengePassword || '';
+        addCSR.Email = $scope.newCSR.emailAddress || '';
+        addCSR.Country = $scope.newCSR.countryCode.code;
+        addCSR.Organization = $scope.newCSR.organization;
+        addCSR.OrganizationalUnit = $scope.newCSR.companyUnit;
+        addCSR.KeyCurveId = $scope.newCSR.keyCurveId || '';
+        addCSR.KeyBitLength = $scope.newCSR.keyBitLength
+        addCSR.KeyPairAlgorithm = $scope.newCSR.keyPairAlgorithm || '';
+        addCSR.State = $scope.newCSR.state;
+
+        APIUtils.createCSRCertificate(addCSR).then(
+            function(data) {
+              $scope.displayCSRCode = true;
+              $scope.csrCode = data;
+            },
+            function(error) {
+              $scope.addCSRModal = false;
+              toastService.error('Unable to generate CSR. Try again.');
+              console.log(JSON.stringify(error));
+            })
+      };
+
+      // resetting the modal when user clicks cancel/closes the
+      // modal
+      $scope.resetCSRModal = function() {
+        $scope.addCSRModal = false;
+        $scope.displayCSRCode = false;
+        $scope.newCSR.certificateCollection = $scope.selectOption;
+        $scope.newCSR.commonName = '';
+        $scope.newCSR.contactPerson = '';
+        $scope.newCSR.city = '';
+        $scope.names = [];
+        $scope.newCSR.challengePassword = '';
+        $scope.newCSR.emailAddress = '';
+        $scope.newCSR.countryCode = '';
+        $scope.newCSR.keyCurveId = '';
+        $scope.newCSR.firstAlternativeName = '';
+        $scope.newCSR.keyBitLength = $scope.selectOption;
+        $scope.newCSR.keyPairAlgorithm = $scope.selectOption;
+        $scope.newCSR.organization = '';
+        $scope.newCSR.companyUnit = '';
+        $scope.newCSR.state = '';
+      };
+
+      // copies the CSR code
+      $scope.copySuccess = function(event) {
+        $scope.copied = true;
+        $timeout(function() {
+          $scope.copied = false;
+        }, 5000);
+      };
+      $scope.copyFailed = function(err) {
+        console.log(JSON.stringify(err));
+      };
+
+
       var updateAvailableTypes = function(certificate) {
         // TODO: at this time only one of each type of certificate is allowed.
         // When this changes, this will need to be updated.
diff --git a/app/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index a113781..650465f 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -108,6 +108,14 @@
   background: $background-02;
 }
 
+
+.certificate__close-modal {
+  float: right;
+  position: relative;
+  bottom: 1rem;
+  left: 2rem;
+}
+
 .add__certificate__modal {
   select {
     margin-bottom: 0;
@@ -126,3 +134,107 @@
     padding: 0.5em;
   }
 }
+
+.add-certificate__section {
+  padding-left: 0;
+}
+
+// Combinator needed to match specificity
+// of default modal settings
+.modal.add-csr__modal {
+  width: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+  z-index: 1001;
+}
+
+.add-csr__section:first-of-type {
+  padding-left: 0;
+}
+
+.add-csr__section:last-of-type {
+  margin-top: 2rem;
+  padding-right: 0;
+
+  @media (min-width: 640px) {
+    margin-top: 0;
+  }
+}
+
+.add-csr__section-title {
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+.add-csr__section--border {
+  @media (min-width: 640px) {
+    padding-left: 2rem;
+    border-left: 1px solid $base-02--04;
+  }
+}
+
+.add-csr__label {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.add-csr__text-helper {
+  color: $base-02--02;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.2;
+  margin-bottom: .5em;
+}
+
+input.add-csr__input,
+select.add-csr__select {
+  width: 100%;
+  margin-bottom: 0;
+  max-height: none;
+  height: auto;
+}
+
+.select.add-csr__select  {
+  line-height: 1.15;
+}
+
+input.add-csr__input-no-validation {
+  margin-bottom: 1.7rem;
+}
+
+.add-csr__additional-alt-names {
+  display: flex;
+}
+
+.add-csr__alt-name-add-btn {
+  padding: 0;
+  @media (min-width: 640px) {
+    margin: 1.9rem 0;
+  }
+}
+
+.add-csr__alt-name-delete-btn {
+  width: 20px;
+  height: 30px;
+  padding: 0;
+
+  icon {
+    margin-right: 0;
+  }
+}
+
+.add-csr-code__header {
+  margin-top: 1em;
+}
+
+.add-csr__container-csr-code {
+  white-space: pre-wrap;
+}
+
+.add-csr__text-download {
+  color: $base-02--08;
+}
+
+select.add-csr__multiselect {
+  height: 14rem;
+}