diff --git a/src/components/Experiment/ArtifactManager.jsx b/src/components/Experiment/ArtifactManager.jsx
index 6f5a0387..1212b368 100644
--- a/src/components/Experiment/ArtifactManager.jsx
+++ b/src/components/Experiment/ArtifactManager.jsx
@@ -27,7 +27,7 @@ class ArtifactManager extends React.Component {
             target="_blank"
             rel="noreferrer"
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Open Artifact Manager
           </a>
         </div>
diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
index a454413d..0f85bd56 100644
--- a/src/components/Experiment/Slices.jsx
+++ b/src/components/Experiment/Slices.jsx
@@ -169,7 +169,7 @@ class Slices extends React.Component {
           this.props.parent === "Projects" &&
           this.props.isProjectExpired && 
           <div className="alert alert-warning mt-3" role="alert">
-            <i className="fa fa-exclamation-triangle mr-2"></i>
+            <i className="fa fa-exclamation-triangle me-2"></i>
             This project is expired and no operations are allowed. Please renew the project if you need create slice.
           </div>
         }
@@ -218,7 +218,7 @@ class Slices extends React.Component {
           !this.props.isProjectExpired &&
             <div>
               <div className="d-flex flex-row">
-                <Link to={`/new-slice/${this.props.projectId}`} className="btn btn-primary mr-4">
+                <Link to={`/new-slice/${this.props.projectId}`} className="btn btn-primary me-4">
                   Create Slice in Portal
                 </Link>
                 <a
diff --git a/src/components/Experiment/Tokens.jsx b/src/components/Experiment/Tokens.jsx
index 1a5505e0..2e523d0c 100644
--- a/src/components/Experiment/Tokens.jsx
+++ b/src/components/Experiment/Tokens.jsx
@@ -25,7 +25,7 @@ class Tokens extends React.Component {
             target="_blank"
             rel="noreferrer"
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Open FABRIC Credential Manager
           </a>
         </div>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1caa8516..d4251a64 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -70,7 +70,7 @@ class Footer extends React.Component {
               src={trustedciBadge}
               width="175"
               height="175"
-              className="d-inline-block align-top mr-2"
+              className="d-inline-block align-top me-2"
               alt=""
             />
           </Col>
@@ -87,7 +87,7 @@ class Footer extends React.Component {
                 src={nsfLogo}
                 width="45"
                 height="45"
-                className="d-inline-block align-top mr-2"
+                className="d-inline-block align-top me-2"
                 alt=""
               />
               <u className="text-sm-size">FABRIC is funded by NSF grants CNS-1935966, CNS-2029176, CNS-2029200, CNS-2029235, CNS-2029260, CNS-2029261 and CNS-2330891.</u>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 29bf8f75..91724593 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -287,7 +287,7 @@ const Header = (props) => {
         </Nav>
         {
         props.userStatus === "active" && !window.location.href.includes("/search-results") &&
-        <form className="form-inline my-2 mr-2 my-lg-0">
+        <form className="form-inline d-flex flex-row align-items-center">
           <input
             className="form-control"
             type="search"
@@ -298,7 +298,7 @@ const Header = (props) => {
           />
            <div className="input-group-append">
               <button
-                className="btn btn-outline-secondary"
+                className="btn btn-sm btn-outline-secondary"
                 type="button"
                 onClick={handleSearch}
               >
@@ -308,24 +308,24 @@ const Header = (props) => {
          </form>
       }
       { props.userStatus !== "active" ? 
-        <form className="form-inline my-2 my-lg-0">
+        <form className="form-inline">
           <NavLink to="/login">
             <button
               onClick={handleLogin}
-              className="btn btn-outline-success my-2 my-sm-0 mr-2"
+              className="btn btn-outline-success"
             >
               Log in
             </button>
           </NavLink>
           <NavLink to="/signup/1">
             <button
-              className="btn btn-outline-primary my-2 my-sm-0"
+              className="btn btn-outline-primary"
             >
               Sign up
             </button>
           </NavLink>
         </form> :
-        <form className="form-inline my-2 my-lg-0">
+        <form className="form-inline">
           <ProfileModal userName={props.userName} userEmail={props.userEmail} />
         </form>
       }
diff --git a/src/components/Home/CapabilityIcons.jsx b/src/components/Home/CapabilityIcons.jsx
index c8b2dba6..fe5346d8 100644
--- a/src/components/Home/CapabilityIcons.jsx
+++ b/src/components/Home/CapabilityIcons.jsx
@@ -83,17 +83,17 @@ const CapabilityIcons = () => {
       <div className="fabric-capability-button">
         <Link to="/about/about-fabric">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>About FABRIC
+            <i className="fa fa-sign-in me-2"></i>About FABRIC
           </button>
         </Link>
         <a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>Knowledge Base
+            <i className="fa fa-sign-in me-2"></i>Knowledge Base
           </button>
         </a>
         <Link to="/community/publications">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>Cite FABRIC
+            <i className="fa fa-sign-in me-2"></i>Cite FABRIC
           </button>
         </Link>
       </div>
diff --git a/src/components/Home/DynamicMetrics.jsx b/src/components/Home/DynamicMetrics.jsx
index 8dc18031..6c9aa929 100644
--- a/src/components/Home/DynamicMetrics.jsx
+++ b/src/components/Home/DynamicMetrics.jsx
@@ -82,7 +82,7 @@ class DynamicMetrics extends React.Component {
     return (
       <div className="w-100 home-metrix">
         <div className="d-flex flex-column align-item-center justify-content-center px-5 mb-2">
-          <div className="mr-5 align-self-center">
+          <div className="me-5 align-self-center">
             <img
               src={FABRICLogo}
               height="100"
@@ -123,7 +123,7 @@ class DynamicMetrics extends React.Component {
                     {i.name}
                     {
                       i.link && <Link to={i.link}>
-                        <i className="fa fa-sign-in ml-2"></i>
+                        <i className="fa fa-sign-in ms-2"></i>
                       </Link>
                     }
                   </div>
diff --git a/src/components/Home/FacilityUpdates.jsx b/src/components/Home/FacilityUpdates.jsx
index b6752fb0..36889753 100644
--- a/src/components/Home/FacilityUpdates.jsx
+++ b/src/components/Home/FacilityUpdates.jsx
@@ -32,7 +32,7 @@ class FacilityUpdates extends React.Component {
     return (
       <div>
         {
-          updates.length === 0 ? <div className="mt-3 ml-4">No Facility Update available.</div> : 
+          updates.length === 0 ? <div className="mt-3 ms-4">No Facility Update available.</div> : 
           <FacilityUpdateCard showSpinner={showSpinner} updates={updates} />
         }
       </div>
diff --git a/src/components/Home/Partners.jsx b/src/components/Home/Partners.jsx
index 591fea60..428f9eca 100644
--- a/src/components/Home/Partners.jsx
+++ b/src/components/Home/Partners.jsx
@@ -62,7 +62,7 @@ const Partners = () => {
           src={RENCI}
           key={`partners-logo-renci`}
           height="95"
-          className="d-inline-block align-top mr-4"
+          className="d-inline-block align-top me-4"
           alt=""
         />
         {
diff --git a/src/components/Home/RecentNews.jsx b/src/components/Home/RecentNews.jsx
index 7a89c983..8df36d1c 100644
--- a/src/components/Home/RecentNews.jsx
+++ b/src/components/Home/RecentNews.jsx
@@ -32,7 +32,7 @@ class RecentNews extends React.Component {
     return (
       <div>
         {
-          news.length === 0 ? <div className="mt-3 ml-4">No recent news available.</div> : 
+          news.length === 0 ? <div className="mt-3 ms-4">No recent news available.</div> : 
           <NewsCard showSpinner={showSpinner} news={news} />
         }
       </div>
diff --git a/src/components/ProfileModal.jsx b/src/components/ProfileModal.jsx
index f5310a28..280c6638 100644
--- a/src/components/ProfileModal.jsx
+++ b/src/components/ProfileModal.jsx
@@ -52,7 +52,7 @@ function ProfileModal(props) {
           <div className="divider div-transparent"></div>
           <div className="d-flex justify-content-center">
               <button
-                className="btn btn-sm btn-outline-primary mr-3"
+                className="btn btn-sm btn-outline-primary me-3"
                 onClick={toggleModal}
               >
                 <NavLink to="/user">
diff --git a/src/components/Project/Community/CommunityTags.jsx b/src/components/Project/Community/CommunityTags.jsx
index 05b0bf61..73f708da 100644
--- a/src/components/Project/Community/CommunityTags.jsx
+++ b/src/components/Project/Community/CommunityTags.jsx
@@ -87,19 +87,19 @@ class Community extends React.Component {
           </div>
         </div>
         }
-        <div className="ml-1">
+        <div className="ms-1">
             <ul className="input-tag__tags">
               {
                 communities.length > 0 &&
                 communities.map((community, index) => 
                 <li
                   key={`community-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   {community}
                   {
                     canUpdate &&          <i
-                    className="fa fa-times ml-2"
+                    className="fa fa-times ms-2"
                     onClick={() => {
                       this.props.onCommunityUpdate("remove", community);
                     }}
diff --git a/src/components/Project/Community/Funding.jsx b/src/components/Project/Community/Funding.jsx
index 22b7fd84..312fa657 100644
--- a/src/components/Project/Community/Funding.jsx
+++ b/src/components/Project/Community/Funding.jsx
@@ -158,20 +158,20 @@ class Funding extends React.Component {
           </div>
         </div>
         }
-        <div className="ml-1">
+        <div className="ms-1">
             <ul className="input-tag__tags">
               {
                 fundings.length > 0 &&
                 fundings.map((funding, index) => 
                 <li
                   key={`funding-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   { this.parseFundingStr(funding) }
                   {
                     canUpdate && 
                     <i
-                      className="fa fa-times ml-2"
+                      className="fa fa-times ms-2"
                       onClick={() => {this.props.onFundingUpdate("remove", funding);}}
                     ></i>
                   }
diff --git a/src/components/Project/NewProjectForm.jsx b/src/components/Project/NewProjectForm.jsx
index 538927b9..b31c761a 100644
--- a/src/components/Project/NewProjectForm.jsx
+++ b/src/components/Project/NewProjectForm.jsx
@@ -9,7 +9,7 @@ import { createProject } from "../../services/projectService";
 import { default as portalData } from "../../services/portalData.json";
 
 const ToastMessageWithLink = ({newProject}) => (
-  <div className="ml-2">
+  <div className="ms-2">
     <p className="text-white">Project created successfully.</p>
     <Link to={`/projects/${newProject.uuid}`}>
       <button className="btn btn-sm btn-outline-light">
@@ -237,7 +237,7 @@ class NewProjectForm extends Form {
                           <div className="mt-1">{user.name}</div>
                         }
                         <button
-                          className="btn btn-sm btn-outline-primary ml-2"
+                          className="btn btn-sm btn-outline-primary ms-2"
                           onClick={() => this.handleAddUser(user)}
                         >
                           <i className="fa fa-plus"></i>
@@ -255,11 +255,11 @@ class NewProjectForm extends Form {
               usersToAdd.map((user, index) => 
               <li
                 key={`user-to-add-${index}`}
-                className="mr-2 my-2"
+                className="me-2 my-2"
               >
                 {user.email ? `${user.name}(${user.email})` : user.name}
               <i
-                className="fa fa-times ml-2"
+                className="fa fa-times ms-2"
                 onClick={() => {
                   this.handleDeleteUser(user.name);
                 }}
diff --git a/src/components/Project/Personnel/AddPersonnel.jsx b/src/components/Project/Personnel/AddPersonnel.jsx
index a9721bfc..5a19aebe 100644
--- a/src/components/Project/Personnel/AddPersonnel.jsx
+++ b/src/components/Project/Personnel/AddPersonnel.jsx
@@ -193,7 +193,7 @@ class AddPersonnel extends Component {
                             <div className="mt-1">{user.name}</div>
                           }
                           <button
-                            className="btn btn-sm btn-outline-primary ml-2"
+                            className="btn btn-sm btn-outline-primary ms-2"
                             onClick={() => this.handleAddUser(user)}
                           >
                             <i className="fa fa-plus"></i>
@@ -246,7 +246,7 @@ class AddPersonnel extends Component {
                               <div className="mt-1">{user.name}</div>
                             }
                             <button
-                              className="btn btn-sm btn-outline-primary ml-2"
+                              className="btn btn-sm btn-outline-primary ms-2"
                               onClick={() => this.handleAddUser(user)}
                             >
                               <i className="fa fa-plus"></i>
@@ -276,10 +276,10 @@ class AddPersonnel extends Component {
                   {
                     usersFailedToFind.length > 0 &&
                     <div className="alert alert-warning max-height-overflow-scroll">
-                      <i className="fa fa-exclamation-triangle mr-2"></i>
+                      <i className="fa fa-exclamation-triangle me-2"></i>
                       We couldn't find the users below. Please make sure:  1. email is the first column of the CSV file; 2. name and email information 
                       are correct; 3. users have sucessfully enrolled as active FABRIC users.
-                      <ul className="list-group mt-2 ml-4">
+                      <ul className="list-group mt-2 ms-4">
                         {
                           usersFailedToFind.map((memberStr, index) => {
                             return (
@@ -300,7 +300,7 @@ class AddPersonnel extends Component {
             {
               searchCompleted && !showSpinner &&
               <div className="alert alert-success my-2" role="alert">
-                <i className="fa fa-check mr-2"></i>
+                <i className="fa fa-check me-2"></i>
                 Users below are uploaded successfully! Please click the <b>Add</b> button to complete adding to project members.
               </div>
             }
@@ -310,11 +310,11 @@ class AddPersonnel extends Component {
                 usersToAdd.map((user, index) => 
                 <li
                   key={`user-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   {user.email ? `${user.name}(${user.email})` : user.name}
                 <i
-                  className="fa fa-times ml-2"
+                  className="fa fa-times ms-2"
                   onClick={() => {
                     this.handleDeleteUser(user.name);
                   }}
@@ -323,7 +323,7 @@ class AddPersonnel extends Component {
               }
             </ul>
             <button
-              className="btn btn-sm btn-outline-primary mr-3 mt-1"
+              className="btn btn-sm btn-outline-primary me-3 mt-1"
               onClick={() => this.props.onUpdateUsers(personnelType, this.getIDs(usersToAdd), "add")}
               disabled={ usersToAdd.length === 0}
             >
diff --git a/src/components/Project/Personnel/ProjectTokenHolders.jsx b/src/components/Project/Personnel/ProjectTokenHolders.jsx
index 2d2e9ac5..854be17e 100644
--- a/src/components/Project/Personnel/ProjectTokenHolders.jsx
+++ b/src/components/Project/Personnel/ProjectTokenHolders.jsx
@@ -100,13 +100,13 @@ class ProjectTokenHolders extends Component {
           </div>
         {
           !isTokenHolder && !isFO && !projectExpired && <button
-            className="btn btn-sm btn-outline-success mr-2 my-3"
+            className="btn btn-sm btn-outline-success me-2 my-3"
             onClick={() => window.open(
               `${portalData.jiraLinks.longlivedTokenRequest}?${urlSuffix}`,
               "_blank")
             }
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Request Long-lived Token Access
           </button>
         }
diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
index ca645117..78f5d664 100644
--- a/src/components/Project/ProjectBasicInfoTable.jsx
+++ b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -85,7 +85,7 @@ class ProjectBasicInfoTable extends Component {
                 delay={{ show: 100, hide: 300 }}
                 overlay={this.renderTooltip("fabrix-matrix", fabricMatrixTooltip)}
               >
-                <i className="fa fa-question-circle text-secondary ml-2"></i>
+                <i className="fa fa-question-circle text-secondary ms-2"></i>
               </OverlayTrigger>
           </label>
           <input
@@ -128,7 +128,7 @@ class ProjectBasicInfoTable extends Component {
                 <tr>
                   <td>Project ID</td>
                   <td>
-                    <span className="mr-2">{ project.uuid }</span>
+                    <span className="me-2">{ project.uuid }</span>
                     <CopyButton
                       id={project.uuid}
                       text=""
@@ -141,7 +141,7 @@ class ProjectBasicInfoTable extends Component {
                   <td>
                     Project Permissions <a
                     href={`${portalData.learnArticles.guideToProjectPermissions}#project-permissions`}
-                    target="_blank" rel="noreferrer" className="ml-1">
+                    target="_blank" rel="noreferrer" className="ms-1">
                       <i className="fa fa-question-circle mx-2"></i>
                     </a>
                   </td>
diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
index 5b3a3dae..774beb2b 100644
--- a/src/components/Project/ProjectProfile.jsx
+++ b/src/components/Project/ProjectProfile.jsx
@@ -51,7 +51,7 @@ class ProjectProfile extends Component {
             <button
               className="btn btn-sm btn-outline-primary my-3"
             >
-              <i className="fa fa-sign-in mr-2"></i>
+              <i className="fa fa-sign-in me-2"></i>
               Back to Project List
             </button>
           </Link>
@@ -61,7 +61,7 @@ class ProjectProfile extends Component {
             <tr>
               <td>Project ID</td>
               <td>
-                <span className="mr-2">{ project.uuid }</span>
+                <span className="me-2">{ project.uuid }</span>
                 <CopyButton
                   id={project.uuid}
                   text=""
@@ -163,7 +163,7 @@ class ProjectProfile extends Component {
               {
                 project.communities && project.communities.length > 0 && project.communities.map((community, index) => {
                   return (<span
-                      className="badge badge-pill badge-primary mr-1"
+                      className="badge badge-pill badge-primary me-1"
                       key={`project-community-${index}`}
                     >
                       {community}
diff --git a/src/components/Project/ProjectTags.jsx b/src/components/Project/ProjectTags.jsx
index 9abf6de8..c427d8dd 100644
--- a/src/components/Project/ProjectTags.jsx
+++ b/src/components/Project/ProjectTags.jsx
@@ -37,7 +37,7 @@ class ProjectTags extends React.Component {
             tags.map(tag => <li key={`project-tag-${tag}`}>
               {tag}
             <i
-              className="fa fa-times ml-2"
+              className="fa fa-times ms-2"
               onClick={() => {
                 this.handleTagDelete(tag);
               }}
diff --git a/src/components/Project/ProjectsTable.jsx b/src/components/Project/ProjectsTable.jsx
index 44d44a9d..92018f7f 100644
--- a/src/components/Project/ProjectsTable.jsx
+++ b/src/components/Project/ProjectsTable.jsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import Table from "../common/Table";
 import shortenStr from "../../utils/shortenStr";
+import Badge from 'react-bootstrap/Badge';
 
 class ProjectsTable extends Component {
   columns = {
@@ -28,12 +29,7 @@ class ProjectsTable extends Component {
         content: (project) => (
           <span>
             {project.communities.map((community, index) => {
-              return <span
-                className="badge badge-pill badge-primary mr-1"
-                key={`project-community-${index}`}
-              >
-                {community}
-              </span>
+              return <Badge bg="primary"  key={`project-community-${index}`}>{community}</Badge>
             })}
           </span>
         )
@@ -69,12 +65,7 @@ class ProjectsTable extends Component {
         content: (project) => (
           <span>
             {project.communities.map((community, index) => {
-              return <span
-                className="badge badge-pill badge-primary mr-1"
-                key={`project-community-${index}`}
-              >
-                {community}
-              </span>
+              return <Badge bg="primary" className="me-1" key={`project-community-${index}`}>{community}</Badge>
             })}
           </span>
         )
diff --git a/src/components/Project/Public/PublicProjectProfile.jsx b/src/components/Project/Public/PublicProjectProfile.jsx
index 73ccb392..a788e76f 100644
--- a/src/components/Project/Public/PublicProjectProfile.jsx
+++ b/src/components/Project/Public/PublicProjectProfile.jsx
@@ -75,7 +75,7 @@ class PublicProjectProfile extends Component {
               {
                 project.communities && project.communities.length > 0 && project.communities.map((community, index) => {
                   return (<span
-                      className="badge badge-pill badge-primary mr-1"
+                      className="badge badge-pill badge-primary me-1"
                       key={`project-community-${index}`}
                     >
                       {community}
@@ -92,7 +92,7 @@ class PublicProjectProfile extends Component {
         </div>
         <Link to="/experiments/public-projects">
           <button className="btn btn-sm btn-outline-primary my-4">
-            <i className="fa fa-sign-in mr-2"></i> Back to Project List
+            <i className="fa fa-sign-in me-2"></i> Back to Project List
           </button>
         </Link>
       </div>
diff --git a/src/components/Project/Storage/StorageCard.jsx b/src/components/Project/Storage/StorageCard.jsx
index 87d9e96e..9f48358e 100644
--- a/src/components/Project/Storage/StorageCard.jsx
+++ b/src/components/Project/Storage/StorageCard.jsx
@@ -41,7 +41,7 @@ class StorageCard extends React.Component {
         <div className="mb-2"><b>Expiration Date</b>: {data.expires_on ? data.expires_on : "Unknown"}</div>
         <div className="mb-2">
           <b>
-            <span className="mr-2">Requested By:</span>
+            <span className="me-2">Requested By:</span>
             {
               data.requested_by_uuid && userName ?  
               <Link to={`/users/${data.requested_by_uuid}`}>
diff --git a/src/components/Resource/DetailTable.jsx b/src/components/Resource/DetailTable.jsx
index 1215fe33..0fe976e1 100644
--- a/src/components/Resource/DetailTable.jsx
+++ b/src/components/Resource/DetailTable.jsx
@@ -97,7 +97,7 @@ const DetailTable = props => {
               {
                 resource &&
                 <span
-                  className={`badge badge-pill badge-${statusMapping[resource.status.state].colorName} px-2 ml-2`}
+                  className={`badge badge-pill badge-${statusMapping[resource.status.state].colorName} px-2 ms-2`}
                 >
                   { statusMapping[resource.status.state].state }
                 </span>
diff --git a/src/components/Resource/SiteDetailPage.jsx b/src/components/Resource/SiteDetailPage.jsx
index b72fe170..db3b0acb 100644
--- a/src/components/Resource/SiteDetailPage.jsx
+++ b/src/components/Resource/SiteDetailPage.jsx
@@ -156,7 +156,7 @@ class SiteDetailPage extends React.Component {
            <button
              className="btn btn-sm btn-outline-primary my-3"
            >
-             <i className="fa fa-sign-in mr-2"></i>
+             <i className="fa fa-sign-in me-2"></i>
              Back to Resources Overview
            </button>
          </Link>
@@ -164,8 +164,8 @@ class SiteDetailPage extends React.Component {
        {
         ["Maint", "PreMaint", "PartMaint"].includes(data.status["state"]) &&
         <div className="alert alert-primary mb-2" role="alert">
-          <i className="fa fa-exclamation-triangle mr-2"></i> 
-          Please check the <i className="fa fa-sign-in ml-1 mr-2"></i> 
+          <i className="fa fa-exclamation-triangle me-2"></i> 
+          Please check the <i className="fa fa-sign-in ms-1 me-2"></i> 
           <a href={portalData.fabricAnnouncementsForumLink} target="_blank" rel="noopener noreferrer">
            FABRIC Announcements Forum
           </a> for more detailed site maintenance information.
@@ -278,7 +278,7 @@ class SiteDetailPage extends React.Component {
          {
           localStorage.getItem("userStatus") === "active" && 
           <div className="d-flex flex-row justify-content-center align-items-center">
-            <span className="mr-2">From</span>
+            <span className="me-2">From</span>
             <CalendarDateTime
               id="siteDetailCalendar1"
               name="siteDetailCalendar"
@@ -286,7 +286,7 @@ class SiteDetailPage extends React.Component {
               time={startTime && startTime.toString().replace(/-/g, "/")}
               onTimeChange={this.handleStartChange}
             />
-            <span className="ml-4 mr-2">To</span>
+            <span className="ms-4 me-2">To</span>
             <CalendarDateTime
               id="siteDetailCalendar2"
               name="siteDetailCalendar"
@@ -295,13 +295,13 @@ class SiteDetailPage extends React.Component {
               onTimeChange={this.handleEndChange}
             />
             <button
-              className="btn btn-sm btn-success ml-4"
+              className="btn btn-sm btn-success ms-4"
               onClick={this.handleRefreshTime}
             >
               Refresh
             </button>
             <button
-              className="btn btn-sm btn-primary ml-3"
+              className="btn btn-sm btn-primary ms-3"
               onClick={this.handleResetTime}
             >
               Reset
@@ -330,7 +330,7 @@ class SiteDetailPage extends React.Component {
                   <h5>
                     Host Resources 
                   </h5>
-                  <span className="badge badge-primary ml-3 mb-2">{hosts && `${hosts.length} hosts`}</span>
+                  <span className="badge badge-primary ms-3 mb-2">{hosts && `${hosts.length} hosts`}</span>
                 </div>
               <Accordion.Root className="AccordionRoot" type="single" defaultValue="item-1" collapsible>
               {
diff --git a/src/components/Resource/SummaryTable.jsx b/src/components/Resource/SummaryTable.jsx
index 370968b6..e4210128 100644
--- a/src/components/Resource/SummaryTable.jsx
+++ b/src/components/Resource/SummaryTable.jsx
@@ -74,7 +74,7 @@ class SummaryTable extends Component {
                 <i className="fa fa-search"></i>
               </button> */}
             </div>
-            {/* <button className="btn btn-sm btn-secondary ml-2">
+            {/* <button className="btn btn-sm btn-secondary ms-2">
               <i className="fa fa-filter"></i>
             </button> */}
           </div>
diff --git a/src/components/Resource/Topomap.jsx b/src/components/Resource/Topomap.jsx
index 87a74ed4..3798b9ec 100644
--- a/src/components/Resource/Topomap.jsx
+++ b/src/components/Resource/Topomap.jsx
@@ -121,7 +121,7 @@ const Topomap = props => {
         </ZoomableGroup>
       </ComposableMap>
       <div className="controls mt-1 d-flex justify-content-center">
-        <button className="btn btn-sm btn-outline-primary mr-1" onClick={handleZoomIn}>
+        <button className="btn btn-sm btn-outline-primary me-1" onClick={handleZoomIn}>
           <i className="fa fa-plus"></i>
         </button>
         <button className="btn btn-sm btn-outline-primary" onClick={handleZoomOut}>
diff --git a/src/components/Signup/DenyEnrollment.jsx b/src/components/Signup/DenyEnrollment.jsx
index 61d68bdd..d7c3aae0 100644
--- a/src/components/Signup/DenyEnrollment.jsx
+++ b/src/components/Signup/DenyEnrollment.jsx
@@ -13,7 +13,7 @@ const DenyEnrollment = () => {
       </div>
       <div className="text-center">
       <div className="alert alert-warning" role="alert">
-        <i className="fa fa-exclamation-triangle mr-2"></i> Please note that the FABRIC team works standard business hours in US Eastern timezone. We generally do not handle requests on weekends or during holidays.
+        <i className="fa fa-exclamation-triangle me-2"></i> Please note that the FABRIC team works standard business hours in US Eastern timezone. We generally do not handle requests on weekends or during holidays.
       </div>
         <a href={portalData.jiraLinks["initiateAccountPetition"]}>
           <button
diff --git a/src/components/Signup/Step1.jsx b/src/components/Signup/Step1.jsx
index 0058e599..8741d20a 100644
--- a/src/components/Signup/Step1.jsx
+++ b/src/components/Signup/Step1.jsx
@@ -22,7 +22,7 @@ const Step1 = () => {
       </div>
       <div className="text-center">
       <div className="alert alert-warning" role="alert">
-      <i className="fa fa-exclamation-triangle mr-2"></i> Before choosing ORCID, Google, Microsoft or GitHub from the list in CILogon page, <b>please try to find your home institution first</b>. Selecting one of these four providers requires additional human-in-the-loop assistance and review and will delay your registration.
+      <i className="fa fa-exclamation-triangle me-2"></i> Before choosing ORCID, Google, Microsoft or GitHub from the list in CILogon page, <b>please try to find your home institution first</b>. Selecting one of these four providers requires additional human-in-the-loop assistance and review and will delay your registration.
       <br></br>
       (<b>Note</b>: depending on the speed of your Internet connection the list may take a moment to populate beyond the default ORCID).
       </div>
diff --git a/src/components/SliceViewer/DetailForm.jsx b/src/components/SliceViewer/DetailForm.jsx
index a7257a22..6f99e2c7 100644
--- a/src/components/SliceViewer/DetailForm.jsx
+++ b/src/components/SliceViewer/DetailForm.jsx
@@ -21,7 +21,7 @@ export default class DetailForm extends Component {
       </Tooltip>
     );
     return (
-      <div className="w-100 card ml-4">
+      <div className="w-100 card ms-4">
         <form>
           <div className="card-header">
             Details
@@ -63,7 +63,7 @@ export default class DetailForm extends Component {
                           delay={{ show: 100, hide: 300 }}
                           overlay={renderTooltip("lease-end-tooltip", "You can extend up to 15 days as of now.")}
                         >
-                          <i className="fa fa-question-circle text-secondary ml-2"></i>
+                          <i className="fa fa-question-circle text-secondary ms-2"></i>
                         </OverlayTrigger>
                       }
                     </label>
@@ -86,7 +86,7 @@ export default class DetailForm extends Component {
                           />
                         </div>
                         <button
-                          className="btn btn-sm btn-outline-primary mt-2 mr-3"
+                          className="btn btn-sm btn-outline-primary mt-2 me-3"
                           onClick={this.props.onSliceExtend}
                         >
                           Extend
@@ -125,14 +125,14 @@ export default class DetailForm extends Component {
                   <div className="row mb-2">
                   <label>SSH Command <a
                     href={`${portalData.learnArticles.guideToLoginToFabricVMs}#project-permissions`} 
-                    target="_blank" rel="noreferrer" className="ml-1">
+                    target="_blank" rel="noreferrer" className="ms-1">
                       <i className="fa fa-question-circle mx-2"></i>
                     </a>
                     {
                       slice.state === "StableOK" &&
                       <button
                         type="button"
-                        className="btn btn-sm btn-outline-primary ml-2"
+                        className="btn btn-sm btn-outline-primary ms-2"
                         data-toggle="modal"
                         data-target="#TerminalFormModalCenter"
                       >
@@ -144,7 +144,7 @@ export default class DetailForm extends Component {
                     {this.sshCommand(data.properties.MgmtIp, data.properties.ImageRef)}
                     <CopyButton
                       id={this.sshCommand(data.properties.MgmtIp, data.properties.ImageRef)}
-                      btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+                      btnStyle={"btn btn-sm btn-secondary ms-2 py-0 px-1"}
                       showCopiedValue={false}
                       text=""
                     />
diff --git a/src/components/SliceViewer/Graph.jsx b/src/components/SliceViewer/Graph.jsx
index d7d239c4..a45754ca 100644
--- a/src/components/SliceViewer/Graph.jsx
+++ b/src/components/SliceViewer/Graph.jsx
@@ -108,12 +108,12 @@ export default class Graph extends Component {
                 delay={{ show: 100, hide: 300 }}
                 overlay={renderTooltip("slice-download-tooltip", "Export the topology setup as JSON file.")}
               >
-                <button onClick={this.props.onSaveJSON} className="btn btn-sm btn-outline-primary ml-2">
+                <button onClick={this.props.onSaveJSON} className="btn btn-sm btn-outline-primary ms-2">
                   Download JSON
                 </button>
               </OverlayTrigger>
             }
-            <button onClick={this.savePNG} className="btn btn-sm btn-outline-primary ml-2">Download PNG</button>
+            <button onClick={this.savePNG} className="btn btn-sm btn-outline-primary ms-2">Download PNG</button>
             {
               this.props.isNewSlice && 
               <OverlayTrigger
@@ -124,7 +124,7 @@ export default class Graph extends Component {
                 <button
                   onClick={this.props.onUseDraft}
                   disabled={!localStorage.getItem("sliceDraft")}
-                  className="btn btn-sm btn-outline-success ml-2"
+                  className="btn btn-sm btn-outline-success ms-2"
                 >
                   Use Draft
                 </button>
@@ -138,7 +138,7 @@ export default class Graph extends Component {
                 overlay={renderTooltip("slice-save-draft-tooltip",
                   "Save this slice draft in your current browser. Newly saved draft will override the previous one.")}
               >
-                <button onClick={this.props.onSaveDraft} className="btn btn-sm btn-outline-success ml-2">
+                <button onClick={this.props.onSaveDraft} className="btn btn-sm btn-outline-success ms-2">
                   Save Draft
                 </button>
               </OverlayTrigger>
diff --git a/src/components/SliceViewer/NewSliceDetailForm.jsx b/src/components/SliceViewer/NewSliceDetailForm.jsx
index 470996d4..30f90722 100644
--- a/src/components/SliceViewer/NewSliceDetailForm.jsx
+++ b/src/components/SliceViewer/NewSliceDetailForm.jsx
@@ -321,7 +321,7 @@ export default class NewSliceDetailForm extends Component {
                   </div>
                   <div className="col-1 pt-4 pb-2 d-flex flex-row">
                     <button
-                      className="btn btn-sm btn-danger ml-auto"
+                      className="btn btn-sm btn-danger ms-auto"
                       type="button"
                       onClick={this.handleNodeDelete}
                     >
@@ -346,7 +346,7 @@ export default class NewSliceDetailForm extends Component {
                   {
                     data.properties.type !== "ServicePort" && this.isCPAvailable() &&
                     <button
-                      className="btn btn-sm btn-success ml-auto"
+                      className="btn btn-sm btn-success ms-auto"
                       type="button"
                       onClick={this.handleSelect}
                     >
@@ -356,7 +356,7 @@ export default class NewSliceDetailForm extends Component {
                    {
                     data.properties.type === "ServicePort" && 
                     <button
-                      className="btn btn-sm btn-danger ml-auto"
+                      className="btn btn-sm btn-danger ms-auto"
                       type="button"
                       onClick={this.handleNodeDelete}
                     >
@@ -381,7 +381,7 @@ export default class NewSliceDetailForm extends Component {
                 </div>
                 <div className="col-2 pt-4 pb-2 d-flex flex-row">
                   <button
-                    className="btn btn-sm btn-danger ml-auto"
+                    className="btn btn-sm btn-danger ms-auto"
                     type="button"
                     onClick={this.handleNodeDelete}
                   >
diff --git a/src/components/SliceViewer/ProjectTags.jsx b/src/components/SliceViewer/ProjectTags.jsx
index 32003213..3986a75e 100644
--- a/src/components/SliceViewer/ProjectTags.jsx
+++ b/src/components/SliceViewer/ProjectTags.jsx
@@ -56,7 +56,7 @@ export default class SideLinks extends Component {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <b>Permissions</b><i className="fa fa-question-circle ml-1"></i>
+                  <b>Permissions</b><i className="fa fa-question-circle ms-1"></i>
                 </a>
               </td>
               <td>
@@ -67,7 +67,7 @@ export default class SideLinks extends Component {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <i className="fa fa-question-circle mr-2"></i>
+                    <i className="fa fa-question-circle me-2"></i>
                     permission tags 
                   </a>. Please use only SharedNICs and L2Bridge for this slice.
                 </span> : 
@@ -78,7 +78,7 @@ export default class SideLinks extends Component {
                       overlay={renderTooltip("pl-tooltip", tagKeyValuePairs[tag])}
                       key={`project-tag-${tag}`}
                     >
-                      <span className="badge badge-primary mr-2 project-tag">{tag}</span>
+                      <span className="badge badge-primary me-2 project-tag">{tag}</span>
                     </OverlayTrigger>
                 )
               }
diff --git a/src/components/SliceViewer/SideLinks.jsx b/src/components/SliceViewer/SideLinks.jsx
index 425b278e..73ad63a6 100644
--- a/src/components/SliceViewer/SideLinks.jsx
+++ b/src/components/SliceViewer/SideLinks.jsx
@@ -86,7 +86,7 @@ export default class SideLinks extends Component {
                   delay={{ show: 100, hide: 300 }}
                   overlay={renderTooltip("network-service-tooltip", portalData.helperText.networkServiceDescription)}
                 >
-                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  <i className="fa fa-question-circle text-secondary ms-2"></i>
                 </OverlayTrigger>
               </label>
               <select
@@ -129,7 +129,7 @@ export default class SideLinks extends Component {
                   this.props.selectedCPs.map(cp => <li key={`selectedCP${cp.id}`}>
                     {cp.properties.name}
                   <i
-                    className="fa fa-times ml-2"
+                    className="fa fa-times ms-2"
                     onClick={() => {
                       this.raiseRemoveCP(cp.id);
                     }}
@@ -146,7 +146,7 @@ export default class SideLinks extends Component {
           </div>
         }
         <div className="my-2 d-flex flex-row">
-          <div className="d-flex flex-column text-center mr-2">
+          <div className="d-flex flex-column text-center me-2">
             <button
               className="btn btn-sm btn-success mb-2"
               disabled={!validationResult.isValid}
diff --git a/src/components/SliceViewer/SideNodes.jsx b/src/components/SliceViewer/SideNodes.jsx
index 56c48e41..3bf065fd 100644
--- a/src/components/SliceViewer/SideNodes.jsx
+++ b/src/components/SliceViewer/SideNodes.jsx
@@ -363,7 +363,7 @@ class SideNodes extends React.Component {
                       delay={{ show: 100, hide: 300 }}
                       overlay={renderTooltip("site-tooltip", portalData.helperText.sitesDescription)}
                     >
-                      <i className="fa fa-question-circle text-secondary ml-2"></i>
+                      <i className="fa fa-question-circle text-secondary ms-2"></i>
                     </OverlayTrigger>
                   </label>
                   <Select
@@ -381,7 +381,7 @@ class SideNodes extends React.Component {
                       delay={{ show: 100, hide: 300 }}
                       overlay={renderTooltip("node-tooltip", portalData.helperText.nodeDescription)}
                     >
-                      <i className="fa fa-question-circle text-secondary ml-2"></i>
+                      <i className="fa fa-question-circle text-secondary ms-2"></i>
                     </OverlayTrigger>
                   </label>
                   <select
@@ -404,7 +404,7 @@ class SideNodes extends React.Component {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip("site-tooltip", portalData.helperText.nodeNameDescription)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                     </label>
                     <input
@@ -449,7 +449,7 @@ class SideNodes extends React.Component {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip("node-tooltip", portalData.helperText.bandwidthDescription)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                     </label>
                     <input type="number" className="form-control form-control-sm" id="inputBandwidth"
@@ -490,7 +490,7 @@ class SideNodes extends React.Component {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip("node-tooltip", portalData.helperText.customImagesDescription)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                     </label>
                     <select
@@ -534,7 +534,7 @@ class SideNodes extends React.Component {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip("boot-script-tooltip", portalData.helperText.bootScriptDescription)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                     </label>
                     <textarea
diff --git a/src/components/SliceViewer/SingleComponent.jsx b/src/components/SliceViewer/SingleComponent.jsx
index ee5b4873..9497c186 100644
--- a/src/components/SliceViewer/SingleComponent.jsx
+++ b/src/components/SliceViewer/SingleComponent.jsx
@@ -81,7 +81,7 @@ export default class SingleComponent extends Component {
                     delay={{ show: 100, hide: 300 }}
                     overlay={renderTooltip("component-tooltip", portalData.helperText.componentDescription)}
                   >
-                    <i className="fa fa-question-circle text-secondary ml-2"></i>
+                    <i className="fa fa-question-circle text-secondary ms-2"></i>
                   </OverlayTrigger>
                 </label>
                 <select
diff --git a/src/components/SliceViewer/SliceEditorDetailForm.jsx b/src/components/SliceViewer/SliceEditorDetailForm.jsx
index c8a22997..a238045c 100644
--- a/src/components/SliceViewer/SliceEditorDetailForm.jsx
+++ b/src/components/SliceViewer/SliceEditorDetailForm.jsx
@@ -308,7 +308,7 @@ export default class SliceEditorDetailForm extends Component {
                   </div>
                   <div className="col-1 pt-4 pb-2 d-flex flex-row">
                     <button
-                      className="btn btn-sm btn-danger ml-auto"
+                      className="btn btn-sm btn-danger ms-auto"
                       type="button"
                       onClick={this.handleNodeDelete}
                     >
@@ -333,7 +333,7 @@ export default class SliceEditorDetailForm extends Component {
                   {
                     data.properties.type !== "ServicePort" && this.isCPAvailable() &&
                     <button
-                      className="btn btn-sm btn-success ml-auto"
+                      className="btn btn-sm btn-success ms-auto"
                       type="button"
                       onClick={this.handleSelect}
                     >
@@ -343,7 +343,7 @@ export default class SliceEditorDetailForm extends Component {
                    {
                     data.properties.type === "ServicePort" && 
                     <button
-                      className="btn btn-sm btn-danger ml-auto"
+                      className="btn btn-sm btn-danger ms-auto"
                       type="button"
                       onClick={this.handleNodeDelete}
                     >
@@ -368,7 +368,7 @@ export default class SliceEditorDetailForm extends Component {
                 </div>
                 <div className="col-2 pt-4 pb-2 d-flex flex-row">
                   <button
-                    className="btn btn-sm btn-danger ml-auto"
+                    className="btn btn-sm btn-danger ms-auto"
                     type="button"
                     onClick={this.handleNodeDelete}
                   >
diff --git a/src/components/SliceViewer/SliceViewerErrorBoundary.jsx b/src/components/SliceViewer/SliceViewerErrorBoundary.jsx
index fd26f348..2f0fd53d 100644
--- a/src/components/SliceViewer/SliceViewerErrorBoundary.jsx
+++ b/src/components/SliceViewer/SliceViewerErrorBoundary.jsx
@@ -77,16 +77,16 @@ export default class SliceViewerErrorBoundary extends Component {
           <div className="mx-5 mb-4 slice-viewer-container">
             <div className="d-flex flex-row justify-content-between align-items-center mt-2">
               <div className="d-flex flex-row justify-content-between align-items-center">
-                <h2 className="mr-3">
+                <h2 className="me-3">
                   <b>{slice.name}</b>
-                  <span className={`badge badge-${stateColors[slice.state]} ml-2`}>
+                  <span className={`badge badge-${stateColors[slice.state]} ms-2`}>
                     {slice.state}
                   </span>
                   <a
                     href={portalData.learnArticles.guideToSliceBuilderSections["states"]}
                     target="_blank"
                     rel="noreferrer"
-                    className="ml-1"
+                    className="ms-1"
                   >
                     <i className="fa fa-question-circle mx-2" />
                   </a>
@@ -104,9 +104,9 @@ export default class SliceViewerErrorBoundary extends Component {
                 }
                 <Link to="/experiments#slices">
                   <button
-                    className="btn btn-sm btn-outline-primary my-3 ml-3"
+                    className="btn btn-sm btn-outline-primary my-3 ms-3"
                   >
-                    <i className="fa fa-sign-in mr-2"></i>
+                    <i className="fa fa-sign-in me-2"></i>
                     Back to Slice List
                   </button>
                 </Link>
@@ -130,7 +130,7 @@ export default class SliceViewerErrorBoundary extends Component {
                   <li className="my-3">
                   If you believe you encountered a bug in the way the Portal visualizes or manages your slice, please <b>report this issue</b> in the <b>
                       <a href="https://learn.fabric-testbed.net/forums/forum/fabric-general-questions-and-discussion/" target="_blank" rel="noreferrer">
-                      <i className="fa fa-sign-in mr-1"></i> FABRIC forum</a></b> and the FABRIC 
+                      <i className="fa fa-sign-in me-1"></i> FABRIC forum</a></b> and the FABRIC 
                     development team will debug it soon. (Remember to include the <b>Slice ID: <i>{this.props.sliceID}</i></b> in the post.).
                   </li>
                   </ul>
@@ -138,21 +138,21 @@ export default class SliceViewerErrorBoundary extends Component {
                     <CopyButton
                       id={this.props.sliceID}
                       text={"Copy Slice ID"}
-                      btnStyle={"btn btn-sm btn-primary ml-2"}
+                      btnStyle={"btn btn-sm btn-primary ms-2"}
                       showCopiedValue={true}
                     />
                     <Link to="/experiments#slices">
                       <button
-                        className="btn btn-sm btn-primary my-3 ml-3"
+                        className="btn btn-sm btn-primary my-3 ms-3"
                       >
-                        <i className="fa fa-sign-in mr-2"></i>
+                        <i className="fa fa-sign-in me-2"></i>
                         Back to Slice List
                       </button>
                     </Link>
                   </div>
                 </div>
               </div>
-              <div className="w-100 card ml-4">
+              <div className="w-100 card ms-4">
                 <form>
                   <div className="card-header">
                     Details
@@ -184,7 +184,7 @@ export default class SliceViewerErrorBoundary extends Component {
                                 delay={{ show: 100, hide: 300 }}
                                 overlay={renderTooltip("lease-end-tooltip", "You can extend up to 15 days as of now.")}
                               >
-                                <i className="fa fa-question-circle text-secondary ml-2"></i>
+                                <i className="fa fa-question-circle text-secondary ms-2"></i>
                               </OverlayTrigger>
                             }
                           </label>
@@ -207,7 +207,7 @@ export default class SliceViewerErrorBoundary extends Component {
                                 />
                               </div>
                               <button
-                                className="btn btn-sm btn-outline-primary mt-2 mr-3"
+                                className="btn btn-sm btn-outline-primary mt-2 me-3"
                                 onClick={this.props.onSliceExtend}
                               >
                                 Extend
diff --git a/src/components/SliceViewer/SliverKeyMultiSelect.jsx b/src/components/SliceViewer/SliverKeyMultiSelect.jsx
index 6abbcf45..40981835 100644
--- a/src/components/SliceViewer/SliverKeyMultiSelect.jsx
+++ b/src/components/SliceViewer/SliverKeyMultiSelect.jsx
@@ -7,7 +7,7 @@ export default class SliverKeyMultiSelect extends Component {
       <div className="mt-2">
         {
           keys.map(key =>
-          <div className="form-check mb-2 mr-3" key={`sliver-key-${key.uuid}`}>
+          <div className="form-check mb-2 me-3" key={`sliver-key-${key.uuid}`}>
             <input
               className="form-check-input"
               type="checkbox"
diff --git a/src/components/SliceViewer/TerminalFormModal.jsx b/src/components/SliceViewer/TerminalFormModal.jsx
index b952a9fb..d6ac2b44 100644
--- a/src/components/SliceViewer/TerminalFormModal.jsx
+++ b/src/components/SliceViewer/TerminalFormModal.jsx
@@ -125,7 +125,7 @@ class TerminalFormModal extends Form {
                   aria-label="Close"
                   onClick={this.clickCloseModalBtn}
                 >
-                  <i className="fa fa-sign-in mr-2"></i>
+                  <i className="fa fa-sign-in me-2"></i>
                   Open Terminal
                 </button>
               </a>
@@ -154,7 +154,7 @@ class TerminalFormModal extends Form {
                   <input type="text" className="form-control" defaultValue={localStorage.getItem("bastionLogin")} disabled/>
                 </div>
                 <div className="alert alert-primary mt-2 mb-1" role="alert">
-                  <i className="fa fa-exclamation-triangle mr-1"></i> 
+                  <i className="fa fa-exclamation-triangle me-1"></i> 
                   Your private keys will only be used to establish connection and will not be stored.
                 </div>
                 <div className="row mx-1 mt-2">
@@ -198,7 +198,7 @@ class TerminalFormModal extends Form {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip(sliverTooltip.id, sliverTooltip.content)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                     </label> 
                     <textarea
@@ -224,7 +224,7 @@ class TerminalFormModal extends Form {
                         delay={{ show: 100, hide: 300 }}
                         overlay={renderTooltip(bastionTooltip.id, bastionTooltip.content)}
                       >
-                        <i className="fa fa-question-circle text-secondary ml-2"></i>
+                        <i className="fa fa-question-circle text-secondary ms-2"></i>
                       </OverlayTrigger>
                   </label>
                   <textarea
diff --git a/src/components/SshKey/KeyCard.jsx b/src/components/SshKey/KeyCard.jsx
index 0c387006..a888fffa 100644
--- a/src/components/SshKey/KeyCard.jsx
+++ b/src/components/SshKey/KeyCard.jsx
@@ -31,7 +31,7 @@ const handleDelete = async (uuid, type) => {
 
 const KeyCard = ({ data, disableKeyDelete }) => {
   return (
-    <div className="card border-primary mr-1 mb-4 key-card">
+    <div className="card border-primary me-1 mb-4 key-card">
       <div className="card-body">
         {
           content.map((row, index) => {
@@ -44,7 +44,7 @@ const KeyCard = ({ data, disableKeyDelete }) => {
         }
         <div className="d-flex flex-row mt-2">
           <a
-            className="btn btn-sm btn-outline-primary mr-3"
+            className="btn btn-sm btn-outline-primary me-3"
             href={`data:text/json;charset=utf-8,${encodeURIComponent(
               generatePublicKey(data).replace(/^"(.*)"$/, '$1')
             )}`}
diff --git a/src/components/SshKey/KeyModal.jsx b/src/components/SshKey/KeyModal.jsx
index 472ad262..63392355 100644
--- a/src/components/SshKey/KeyModal.jsx
+++ b/src/components/SshKey/KeyModal.jsx
@@ -28,7 +28,7 @@ const KeyModal = ({ data, name }) => {
         <li className="mb-3">
           Private Key:
           <a
-            className="btn btn-sm btn-outline-primary ml-3"
+            className="btn btn-sm btn-outline-primary ms-3"
             href={`data:text/json;charset=utf-8,${encodeURIComponent(private_key)}`}
             download={`${name}`}
           ><i className="fa fa-download"></i> Download </a>
@@ -36,13 +36,13 @@ const KeyModal = ({ data, name }) => {
         <li className="mb-3">
           Public Key: 
           <a
-            className="btn btn-sm btn-outline-primary ml-4"
+            className="btn btn-sm btn-outline-primary ms-4"
             href={`data:text/json;charset=utf-8,${encodeURIComponent(public_key)}`}
             download={`${name}.pub`}
           ><i className="fa fa-download"></i> Download </a>
         </li>
         <div className="alert alert-warning" role="alert">
-          <i className="fa fa-exclamation-triangle mr-2"></i>
+          <i className="fa fa-exclamation-triangle me-2"></i>
           The private key will be no longer accessible through the portal once you closed this window.
           Please download and keep your private keys safe.
         </div>  
diff --git a/src/components/SshKey/KeyTabs.jsx b/src/components/SshKey/KeyTabs.jsx
index a5f570e2..ddd23f69 100644
--- a/src/components/SshKey/KeyTabs.jsx
+++ b/src/components/SshKey/KeyTabs.jsx
@@ -21,7 +21,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
             <button
               className="btn btn-sm btn-outline-primary my-3"
             >
-              <i className="fa fa-sign-in mr-2"></i>
+              <i className="fa fa-sign-in me-2"></i>
               Manage SSH Keys
             </button>
           </Link>
@@ -39,7 +39,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
         to login to your VMs via bastion hosts.
       </div>
       <div className="alert alert-primary" role="alert">
-        <span className="mr-2"><b>Bastion login</b>: {localStorage.getItem("bastionLogin")}</span>
+        <span className="me-2"><b>Bastion login</b>: {localStorage.getItem("bastionLogin")}</span>
         <CopyButton
           id={localStorage.getItem("bastionLogin")}
           text=""
@@ -76,7 +76,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
                 parent === "Keys" &&
                 sliverKeys.length > portalData.keyLimit &&
                 <div className="alert alert-warning" role="alert">
-                  <i className="fa fa-exclamation-triangle mr-2"></i>
+                  <i className="fa fa-exclamation-triangle me-2"></i>
                   You have reached the limit of {portalData.keyLimit} sliver keys.
                 </div>
               }
@@ -106,7 +106,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
                 parent === "Keys" &&
                 bastionKeys.length > portalData.keyLimit &&
                 <div className="alert alert-warning" role="alert">
-                  <i className="fa fa-exclamation-triangle mr-2"></i>
+                  <i className="fa fa-exclamation-triangle me-2"></i>
                   You have reached the limit of {portalData.keyLimit} bastion keys.
                 </div>
               }
diff --git a/src/components/UserProfile/GlobalRoles.jsx b/src/components/UserProfile/GlobalRoles.jsx
index df35ea84..9ea96402 100644
--- a/src/components/UserProfile/GlobalRoles.jsx
+++ b/src/components/UserProfile/GlobalRoles.jsx
@@ -47,7 +47,7 @@ class GlobalRoles extends React.Component {
                   delay={{ show: 100, hide: 300 }}
                   overlay={renderTooltip("pl-tooltip", portalData.helperText.projectLeadDescription)}
                 >
-                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  <i className="fa fa-question-circle text-secondary ms-2"></i>
                 </OverlayTrigger>
               </td>
               <td className="text-center">
@@ -62,7 +62,7 @@ class GlobalRoles extends React.Component {
                   delay={{ show: 100, hide: 300 }}
                   overlay={renderTooltip("fo-tooltip", portalData.helperText.facilityOperatorDescription)}
                 >
-                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  <i className="fa fa-question-circle text-secondary ms-2"></i>
                 </OverlayTrigger>
               </td>
               <td className="text-center">
@@ -77,7 +77,7 @@ class GlobalRoles extends React.Component {
                   delay={{ show: 100, hide: 300 }}
                   overlay={renderTooltip("fo-tooltip", portalData.helperText.activeUserDescription)}
                 >
-                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  <i className="fa fa-question-circle text-secondary ms-2"></i>
                 </OverlayTrigger>
               </td>
               <td className="text-center">
@@ -92,7 +92,7 @@ class GlobalRoles extends React.Component {
                   delay={{ show: 100, hide: 300 }}
                   overlay={renderTooltip("fo-tooltip", portalData.helperText.jupyterhubDescription)}
                 >
-                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  <i className="fa fa-question-circle text-secondary ms-2"></i>
                 </OverlayTrigger>
               </td>
               <td className="text-center">
@@ -111,7 +111,7 @@ class GlobalRoles extends React.Component {
               "_blank")
             }
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Request to be Project Lead
           </button>
          }
diff --git a/src/components/UserProfile/MyRoles.jsx b/src/components/UserProfile/MyRoles.jsx
index 62754e45..b8bdcdde 100644
--- a/src/components/UserProfile/MyRoles.jsx
+++ b/src/components/UserProfile/MyRoles.jsx
@@ -11,10 +11,10 @@ class MyRoles extends React.Component {
           <h1>My Roles</h1>
           <button
             type="button"
-            className="btn btn-sm btn-outline-primary h-50 ml-3"
+            className="btn btn-sm btn-outline-primary h-50 ms-3"
             onClick={() => this.props.onRoleRefresh()}
           >
-            <i className="fa fa-refresh mr-2"></i>
+            <i className="fa fa-refresh me-2"></i>
             Refresh Roles
           </button>
         </div>
diff --git a/src/components/common/CountdownTimer.js b/src/components/common/CountdownTimer.js
index 1123e093..e7731977 100644
--- a/src/components/common/CountdownTimer.js
+++ b/src/components/common/CountdownTimer.js
@@ -23,7 +23,7 @@ const CountdownTimer = (props) => {
 
   return (
     <div className="alert alert-primary mb-2" role="alert">
-      <i className="fa fa-exclamation-triangle mr-2"></i> 
+      <i className="fa fa-exclamation-triangle me-2"></i> 
       {props.text} The page will automatically refresh in 
       <span className="countdown-timer">{timeLeft}</span> seconds, or 
       <span
diff --git a/src/components/common/Form/Form.jsx b/src/components/common/Form/Form.jsx
index 89b053a1..1fd507ec 100644
--- a/src/components/common/Form/Form.jsx
+++ b/src/components/common/Form/Form.jsx
@@ -210,7 +210,7 @@ class Form extends Component {
               delay={{ show: 100, hide: 300 }}
               overlay={renderTooltip("select-tooltip", tooltip)}
             >
-              <i className="fa fa-question-circle text-secondary ml-2"></i>
+              <i className="fa fa-question-circle text-secondary ms-2"></i>
             </OverlayTrigger>
           </label> :
           <label htmlFor={name}>{label}</label>
diff --git a/src/components/common/Form/Input.jsx b/src/components/common/Form/Input.jsx
index 02ed7893..08bb72ec 100644
--- a/src/components/common/Form/Input.jsx
+++ b/src/components/common/Form/Input.jsx
@@ -19,7 +19,7 @@ const Input = ({ name, label, error, disabled, tooltip, ...rest }) => {
             delay={{ show: 100, hide: 300 }}
             overlay={renderTooltip(tooltip.id, tooltip.content)}
           >
-            <i className="fa fa-question-circle text-secondary ml-2"></i>
+            <i className="fa fa-question-circle text-secondary ms-2"></i>
           </OverlayTrigger>
         }
       </label>
diff --git a/src/components/common/Form/InputTag.jsx b/src/components/common/Form/InputTag.jsx
index b5b20ce0..032c84a8 100644
--- a/src/components/common/Form/InputTag.jsx
+++ b/src/components/common/Form/InputTag.jsx
@@ -44,7 +44,7 @@ class InputTag extends React.Component {
               <li key={tag}>
                 {tag}
                 <i
-                  className="fa fa-times ml-2"
+                  className="fa fa-times ms-2"
                   onClick={() => {
                     this.raiseRemoveTag(i);
                   }}
diff --git a/src/components/common/Form/Select.jsx b/src/components/common/Form/Select.jsx
index 63719e93..a2acfec3 100644
--- a/src/components/common/Form/Select.jsx
+++ b/src/components/common/Form/Select.jsx
@@ -18,7 +18,7 @@ const Select = ({ name, label, currentOption, options, error, disabled, tooltip,
             delay={{ show: 100, hide: 300 }}
             overlay={renderTooltip("select-tooltip", tooltip)}
           >
-            <i className="fa fa-question-circle text-secondary ml-2"></i>
+            <i className="fa fa-question-circle text-secondary ms-2"></i>
           </OverlayTrigger>
         </label> :
         <label htmlFor={name}>{label}</label>
diff --git a/src/components/common/Form/Switch.jsx b/src/components/common/Form/Switch.jsx
index 50b61fde..8247e1b9 100644
--- a/src/components/common/Form/Switch.jsx
+++ b/src/components/common/Form/Switch.jsx
@@ -25,7 +25,7 @@ const Switch = ({ name, label, error, disabled, tooltip, ...rest }) => {
             delay={{ show: 100, hide: 300 }}
             overlay={renderTooltip(tooltip.id, tooltip.content)}
           >
-            <i className="fa fa-question-circle text-secondary ml-2"></i>
+            <i className="fa fa-question-circle text-secondary ms-2"></i>
           </OverlayTrigger>
         }
       </label>
diff --git a/src/components/common/Form/Textarea.jsx b/src/components/common/Form/Textarea.jsx
index af754083..5490cafd 100644
--- a/src/components/common/Form/Textarea.jsx
+++ b/src/components/common/Form/Textarea.jsx
@@ -19,7 +19,7 @@ const Textarea = ({ name, label, error, disabled, tooltip, ...rest }) => {
             delay={{ show: 100, hide: 300 }}
             overlay={renderTooltip(tooltip.id, tooltip.content)}
           >
-            <i className="fa fa-question-circle text-secondary ml-2"></i>
+            <i className="fa fa-question-circle text-secondary ms-2"></i>
           </OverlayTrigger>
         }
       </label>
diff --git a/src/components/common/Form/TimePicker.jsx b/src/components/common/Form/TimePicker.jsx
index a6cb4507..1088cfd2 100644
--- a/src/components/common/Form/TimePicker.jsx
+++ b/src/components/common/Form/TimePicker.jsx
@@ -5,7 +5,7 @@ const TimePicker = ({ name, label, error, ...rest }) => {
   return (
     <div className="form-group">
       <label htmlFor={name}>{label}:</label>
-      <CalendarDateTime id={name} className="ml-2"/>
+      <CalendarDateTime id={name} className="ms-2"/>
     </div>
   );
 };
diff --git a/src/components/common/Form/Wysiwyg.jsx b/src/components/common/Form/Wysiwyg.jsx
index 46c321d1..bb53f4c5 100644
--- a/src/components/common/Form/Wysiwyg.jsx
+++ b/src/components/common/Form/Wysiwyg.jsx
@@ -30,7 +30,7 @@ export default function Wysiwyg({ name, content, label, error, disabled, tooltip
             delay={{ show: 100, hide: 300 }}
             overlay={renderTooltip("select-tooltip", tooltip)}
           >
-            <i className="fa fa-question-circle text-secondary ml-2"></i>
+            <i className="fa fa-question-circle text-secondary ms-2"></i>
           </OverlayTrigger>
         </label> :
         <label htmlFor={name}>{label}</label>
diff --git a/src/components/common/InputCheckboxes.jsx b/src/components/common/InputCheckboxes.jsx
index 7d6804af..31f4d7f0 100644
--- a/src/components/common/InputCheckboxes.jsx
+++ b/src/components/common/InputCheckboxes.jsx
@@ -7,7 +7,7 @@ const InputCheckboxes = props => {
   return ( 
     <div className={`w-100 mt-2 d-flex flex-${optionDirection} flex-wrap`}>
       {
-        showSelectAll &&  <div className="form-check mb-2 mr-2">
+        showSelectAll &&  <div className="form-check mb-2 me-2">
           <input
             className="form-check-input"
             type="checkbox"
@@ -24,7 +24,7 @@ const InputCheckboxes = props => {
       }
       {
         allOptions.map(option =>
-        <div className="form-check mb-2 mr-3" key={option}>
+        <div className="form-check mb-2 me-3" key={option}>
           <input
             className="form-check-input"
             type="checkbox"
diff --git a/src/components/common/RadioBtnGroup.jsx b/src/components/common/RadioBtnGroup.jsx
index b40be521..71f2b45f 100644
--- a/src/components/common/RadioBtnGroup.jsx
+++ b/src/components/common/RadioBtnGroup.jsx
@@ -11,7 +11,7 @@ const RadioBtnGroup = ({ values, onChange, ...rest }) => {
       {values.map((item, index) => {
         return (
           <div
-            className="form-check-inline mr-4"
+            className="form-check-inline me-4"
             key={`radio-btn-${index}`}
             onClick={() => onChange(item.value)}
           >
diff --git a/src/components/common/SpinnerFullPage.jsx b/src/components/common/SpinnerFullPage.jsx
index 682cee76..0aa887de 100644
--- a/src/components/common/SpinnerFullPage.jsx
+++ b/src/components/common/SpinnerFullPage.jsx
@@ -42,7 +42,7 @@ function SpinnerFullPage(props){
             className="d-flex flex-column align-items-center justify-content-center"
           >
             <div className="d-flex flex-column align-items-center justify-content-center mx-5 px-5">
-              <span className="mr-2 mb-2">{text}</span>
+              <span className="me-2 mb-2">{text}</span>
               <Spinner animation="border" role="status" variant="white" />
             </div>
             {
diff --git a/src/components/common/SpinnerWithText.jsx b/src/components/common/SpinnerWithText.jsx
index 4f973b0f..680232d4 100644
--- a/src/components/common/SpinnerWithText.jsx
+++ b/src/components/common/SpinnerWithText.jsx
@@ -13,7 +13,7 @@ const SpinnerWithText = (props) => {
         variant="primary"
         className="mt-1"
       />
-      <span className="text-primary ml-2"><b>{props.text}</b></span>
+      <span className="text-primary ms-2"><b>{props.text}</b></span>
     </div>
   );
 };
diff --git a/src/components/common/Tab.jsx b/src/components/common/Tab.jsx
index 87125156..58ceaeb9 100644
--- a/src/components/common/Tab.jsx
+++ b/src/components/common/Tab.jsx
@@ -40,7 +40,7 @@ class Tab extends Component {
         <div className="d-flex">
           <span>{label}</span>
           {
-            badge && <span className={`badge badge-${color} ml-2 align-self-center`}>{badge}</span>
+            badge && <span className={`badge badge-${color} ms-2 align-self-center`}>{badge}</span>
           }
         </div>
       </div>
diff --git a/src/pages/CheckCookie.jsx b/src/pages/CheckCookie.jsx
index c0a8d488..3bd3a0c4 100644
--- a/src/pages/CheckCookie.jsx
+++ b/src/pages/CheckCookie.jsx
@@ -64,7 +64,7 @@ class CheckCookies extends Component {
                 className="btn btn-outline-primary mt-2"
                 onClick={this.handleLogin}
               >
-                <i className="fa fa-sign-in mr-2"></i>
+                <i className="fa fa-sign-in me-2"></i>
                 Log In
               </button>
             </NavLink>
@@ -82,7 +82,7 @@ class CheckCookies extends Component {
                 <tr>
                   <td>Cookie Name</td>
                   <td>
-                    <span className="mr-2">{ cookie.cookie_name }</span>
+                    <span className="me-2">{ cookie.cookie_name }</span>
                   </td>
                 </tr>
                 {
@@ -90,7 +90,7 @@ class CheckCookies extends Component {
                   <tr>
                     <td>User Name</td>
                     <td>
-                      <span className="mr-2">
+                      <span className="me-2">
                         {cookie.cookie_attributes.name}
                       </span>
                     </td>
@@ -101,7 +101,7 @@ class CheckCookies extends Component {
                   <tr>
                     <td>Email</td>
                     <td>
-                      <span className="mr-2">{ cookie.cookie_attributes.email }</span>
+                      <span className="me-2">{ cookie.cookie_attributes.email }</span>
                     </td>
                   </tr>
                 }
@@ -110,7 +110,7 @@ class CheckCookies extends Component {
                   <tr>
                     <td>CILogon ID</td>
                     <td>
-                      <span className="mr-2">{ cookie.cookie_attributes.sub }</span>
+                      <span className="me-2">{ cookie.cookie_attributes.sub }</span>
                     </td>
                   </tr>
                 }
@@ -119,7 +119,7 @@ class CheckCookies extends Component {
                   <tr>
                     <td>UUID</td>
                     <td>
-                      <span className="mr-2">{ cookie.fabric_attributes.uuid }</span>
+                      <span className="me-2">{ cookie.fabric_attributes.uuid }</span>
                     </td>
                   </tr>
                 }
@@ -139,9 +139,9 @@ class CheckCookies extends Component {
             }
             <button
               onClick={e => this.copyCookie(e)}
-              className="btn btn-sm btn-outline-primary mr-2 mt-2 mb-4"
+              className="btn btn-sm btn-outline-primary me-2 mt-2 mb-4"
             >
-              <i className="fa fa-copy mr-2"></i>
+              <i className="fa fa-copy me-2"></i>
               Copy Cookie
             </button>
             <a
@@ -149,7 +149,7 @@ class CheckCookies extends Component {
               target="_blank" rel="noopener noreferrer"
               className="btn btn-primary"
             >
-              <i className="fa fa-sign-in mr-2" />
+              <i className="fa fa-sign-in me-2" />
               FABRIC Account Help Portal
             </a>
           </div>
diff --git a/src/pages/NewSliceForm.jsx b/src/pages/NewSliceForm.jsx
index 3106e457..3ce0823c 100644
--- a/src/pages/NewSliceForm.jsx
+++ b/src/pages/NewSliceForm.jsx
@@ -440,7 +440,7 @@ class NewSliceForm extends React.Component {
           <div>
             <div className="d-flex flex-row justify-content-between mt-2">
               <div className="align-self-start d-flex flex-row">
-                <h2 className="ml-5 my-2">
+                <h2 className="ms-5 my-2">
                   Slice Builder
                 </h2>
                 <a
@@ -453,11 +453,11 @@ class NewSliceForm extends React.Component {
                   User Guide
                 </a>
               </div>
-              <Link to={`/projects/${this.props.match.params.project_id}`} className="align-self-end mr-5">
+              <Link to={`/projects/${this.props.match.params.project_id}`} className="align-self-end me-5">
                 <button
                   className="btn btn-sm btn-outline-primary my-3"
                 >
-                  <i className="fa fa-sign-in mr-2"></i>
+                  <i className="fa fa-sign-in me-2"></i>
                   Back to Project
                 </button>
               </Link>
@@ -628,11 +628,11 @@ class NewSliceForm extends React.Component {
                                     </Link>first. Then click the refresh button.
                                   </span>
                                   <button
-                                    className="btn btn-sm btn-outline-primary ml-auto"
+                                    className="btn btn-sm btn-outline-primary ms-auto"
                                     type="button"
                                     onClick={() => this.refreshSSHKey()}
                                   >
-                                    <i className="fa fa-refresh mr-2"></i>
+                                    <i className="fa fa-refresh me-2"></i>
                                     Refresh Keys
                                   </button>
                                 </div>
@@ -646,7 +646,7 @@ class NewSliceForm extends React.Component {
                                   "The slice graph will be automatically saved to Draft when creating slice.")}
                               >
                                 <button
-                                  className="btn btn-sm btn-success ml-auto"
+                                  className="btn btn-sm btn-success ms-auto"
                                   type="button"
                                   disabled={!validationResult.isValid}
                                   onClick={() => this.handleCreateSlice()}
diff --git a/src/pages/ProjectForm.jsx b/src/pages/ProjectForm.jsx
index 5a4115e3..18e2e7a0 100644
--- a/src/pages/ProjectForm.jsx
+++ b/src/pages/ProjectForm.jsx
@@ -33,7 +33,7 @@ import {
 } from "../services/projectService";
 
 const ToastMessageWithLink = ({projectId, message}) => (
-  <div className="ml-2">
+  <div className="ms-2">
     <p className="text-white">{ message }</p>
     <Link to={`/projects/${projectId}`}>
       <button className="btn btn-sm btn-outline-light">
@@ -652,31 +652,31 @@ class ProjectForm extends Form {
               <div className="d-flex flex-row justify-content-end">
                 <button
                   type="button"
-                  className="btn btn-sm btn-outline-success mr-2 my-3"
+                  className="btn btn-sm btn-outline-success me-2 my-3"
                   onClick={() => window.open(
                     `${portalData.jiraLinks.projectPermissionRequest}?${urlSuffix}`,
                     "_blank")
                   }
                 >
-                  <i className="fa fa-sign-in mr-2"></i>
+                  <i className="fa fa-sign-in me-2"></i>
                   Request Permissions
                 </button>
                 <button
                   type="button"
-                  className="btn btn-sm btn-outline-success mr-2 my-3"
+                  className="btn btn-sm btn-outline-success me-2 my-3"
                   onClick={() => window.open(
                     `${portalData.jiraLinks.storageRequest}?${urlSuffix}`,
                     "_blank")
                   }
                 >
-                  <i className="fa fa-sign-in mr-2"></i>
+                  <i className="fa fa-sign-in me-2"></i>
                   Request Storage
                 </button>
                 <Link to="/experiments#projects">
                   <button
                     className="btn btn-sm btn-outline-primary my-3"
                   >
-                    <i className="fa fa-sign-in mr-2"></i>
+                    <i className="fa fa-sign-in me-2"></i>
                     Back to Project List
                   </button>
                 </Link>
@@ -686,7 +686,7 @@ class ProjectForm extends Form {
                 <button
                   className="btn btn-sm btn-outline-primary my-3"
                 >
-                  <i className="fa fa-sign-in mr-2"></i>
+                  <i className="fa fa-sign-in me-2"></i>
                   Back to Project List
                 </button>
               </Link>
@@ -699,7 +699,7 @@ class ProjectForm extends Form {
               role="alert"
             >
               <span>
-                <i className="fa fa-exclamation-triangle mr-2"></i>
+                <i className="fa fa-exclamation-triangle me-2"></i>
                 This project is expired and no operations are allowed. Please submit a ticket to renew the project.
               </span>
               <button
@@ -710,7 +710,7 @@ class ProjectForm extends Form {
                   "_blank")
                 }
               >
-                <i className="fa fa-sign-in mr-2"></i>
+                <i className="fa fa-sign-in me-2"></i>
                 Renew Project
               </button>
             </div>
@@ -723,7 +723,7 @@ class ProjectForm extends Form {
               role="alert"
             >
               <div>
-                <i className="fa fa-exclamation-triangle mr-2"></i>
+                <i className="fa fa-exclamation-triangle me-2"></i>
                 This project is going to expire in a month on {utcToLocalTimeParser(data.expired)}. 
                 {
                   canUpdate ? <span> Please submit a ticket to renew the project.</span> : 
@@ -739,7 +739,7 @@ class ProjectForm extends Form {
                       "_blank")
                     }
                   >
-                    <i className="fa fa-sign-in mr-2"></i>
+                    <i className="fa fa-sign-in me-2"></i>
                     Renew Project
                   </button> : <div></div>
               }
diff --git a/src/pages/PublicationTracker.jsx b/src/pages/PublicationTracker.jsx
index 20731098..64e58c7a 100644
--- a/src/pages/PublicationTracker.jsx
+++ b/src/pages/PublicationTracker.jsx
@@ -35,7 +35,7 @@ class PublicationTracker extends Component {
       content: (publication) => (
       <div>
          {
-            <span className="mr-3">{publication.year}</span>
+            <span className="me-3">{publication.year}</span>
          }
       </div>
       ), 
diff --git a/src/pages/SliceEditor.jsx b/src/pages/SliceEditor.jsx
index 48d9cd7f..d6e454c5 100644
--- a/src/pages/SliceEditor.jsx
+++ b/src/pages/SliceEditor.jsx
@@ -110,7 +110,7 @@ class SliceEditor extends React.Component {
           <div>
             <div className="d-flex flex-row justify-content-between mt-2">
               <div className="align-self-start d-flex flex-row">
-                <h2 className="ml-5 my-2">
+                <h2 className="ms-5 my-2">
                   { originalSlice.name }
                 </h2>
                 <a
@@ -123,11 +123,11 @@ class SliceEditor extends React.Component {
                   User Guide
                 </a>
               </div>
-              <Link to={`/projects/${this.props.match.params.project_id}`} className="align-self-end mr-5">
+              <Link to={`/projects/${this.props.match.params.project_id}`} className="align-self-end me-5">
                 <button
                   className="btn btn-sm btn-outline-primary my-3"
                 >
-                  <i className="fa fa-exchange mr-2"></i>
+                  <i className="fa fa-exchange me-2"></i>
                   View Mode
                 </button>
               </Link>
diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx
index bab861f4..f61e2c8a 100644
--- a/src/pages/SliceViewer.jsx
+++ b/src/pages/SliceViewer.jsx
@@ -183,16 +183,16 @@ class SliceViewer extends Component {
             <div className="mx-5 mb-4 slice-viewer-container">
               <div className="d-flex flex-row justify-content-between align-items-center mt-2">
                 <div className="d-flex flex-row justify-content-between align-items-center">
-                  <h2 className="mr-3">
+                  <h2 className="me-3">
                     <b>{slice.name}</b>
-                    <span className={`badge badge-${stateColors[slice.state]} ml-2`}>
+                    <span className={`badge badge-${stateColors[slice.state]} ms-2`}>
                       {slice.state}
                     </span>
                     <a
                       href={portalData.learnArticles.guideToSliceBuilderSections["states"]}
                       target="_blank"
                       rel="noreferrer"
-                      className="ml-1"
+                      className="ms-1"
                     >
                       <i className="fa fa-question-circle mx-2" />
                     </a>
@@ -201,9 +201,9 @@ class SliceViewer extends Component {
                 <div className="d-flex flex-row justify-content-between align-items-center">
                     {/* <Link to={`/slice-editor/${slice.slice_id}/${slice.project_id}`}>
                       <button
-                        className="btn btn-sm btn-outline-primary my-3 mr-3"
+                        className="btn btn-sm btn-outline-primary my-3 me-3"
                       >
-                        <i className="fa fa-exchange mr-2"></i>
+                        <i className="fa fa-exchange me-2"></i>
                         Edit Mode
                       </button>
                     </Link> */}
@@ -218,9 +218,9 @@ class SliceViewer extends Component {
                   }
                   <Link to="/experiments#slices">
                     <button
-                      className="btn btn-sm btn-outline-primary my-3 ml-3"
+                      className="btn btn-sm btn-outline-primary my-3 ms-3"
                     >
-                      <i className="fa fa-sign-in mr-2"></i>
+                      <i className="fa fa-sign-in me-2"></i>
                       Back to Slice List
                     </button>
                   </Link>
diff --git a/src/pages/static/AboutFABRIC.jsx b/src/pages/static/AboutFABRIC.jsx
index 3d588eb4..7f0082c8 100644
--- a/src/pages/static/AboutFABRIC.jsx
+++ b/src/pages/static/AboutFABRIC.jsx
@@ -58,7 +58,7 @@ const AboutFABRIC = () => {
           src={nsfLogo}
           width="40"
           height="40"
-          className="d-inline-block align-top mr-3"
+          className="d-inline-block align-top me-3"
           alt=""
         />
           <div className="text-center text-md-size">
diff --git a/src/pages/static/Help.jsx b/src/pages/static/Help.jsx
index 333dd639..133a2616 100644
--- a/src/pages/static/Help.jsx
+++ b/src/pages/static/Help.jsx
@@ -36,12 +36,12 @@ export default class Help extends React.Component{
                 own, please post a question in the appropriate section of our <a href={portalData.knowledgeBaseForumLink} target="_blank" rel="noopener noreferrer">Forums</a>.
                 </p>
                 <div>
-                  <a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary mr-4">
-                    <i className="fa fa-sign-in mr-2"></i>
+                  <a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary me-4">
+                    <i className="fa fa-sign-in me-2"></i>
                     Knowledge Base
                   </a>
                   <a href={portalData.knowledgeBaseForumLink} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary">
-                    <i className="fa fa-sign-in mr-2"></i>
+                    <i className="fa fa-sign-in me-2"></i>
                     Forums
                   </a>
                 </div>
@@ -60,7 +60,7 @@ export default class Help extends React.Component{
                     or logging into your experiment's resources via bastion hosts, please use our <a href={portalData.jiraLinks.accountIssue} target="_blank" rel="noopener noreferrer">FABRIC Account Help Portal</a> or email us at <b>account-help@fabric-testbed.net</b>.
                   </p>
                   <Link to="/check-cookie" className="btn btn-outline-primary">
-                    <i className="fa fa-sign-in mr-2"></i>
+                    <i className="fa fa-sign-in me-2"></i>
                     Check Account Information
                   </Link>
               </div>
@@ -80,8 +80,8 @@ export default class Help extends React.Component{
                 <p>
                 Haven't found an answer to your question on the Forums or Knowledge Base? Set up time with members of the FABRIC Team during their Office Hours.
                 </p>
-                <a href={portalData.officeHourBookingLink} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary mr-2">
-                  <i className="fa fa-sign-in mr-2"></i>
+                <a href={portalData.officeHourBookingLink} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary me-2">
+                  <i className="fa fa-sign-in me-2"></i>
                   Book Office Hours
                 </a>
               </div>
@@ -101,8 +101,8 @@ export default class Help extends React.Component{
                   href={portalData.educatorForumLink} target="_blank" rel="noopener noreferrer">educator forum</a> as a place to ask questions and 
                   share your experiences.
                 </p>
-                <a href={portalData.jiraLinks.educationProjectRequest} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary mr-2">
-                  <i className="fa fa-sign-in mr-2"></i>
+                <a href={portalData.jiraLinks.educationProjectRequest} target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary me-2">
+                  <i className="fa fa-sign-in me-2"></i>
                   Tell us about your class
                 </a>
               </div>
diff --git a/src/pages/static/JupyterHubAccess.jsx b/src/pages/static/JupyterHubAccess.jsx
index 7b299267..3bdca672 100644
--- a/src/pages/static/JupyterHubAccess.jsx
+++ b/src/pages/static/JupyterHubAccess.jsx
@@ -13,7 +13,7 @@ const JupyterHubAccess = () => {
         </p>
         <Link to="/">
           <button className="btn btn-outline-primary mt-4 btn-sm">
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Homepage
           </button>
         </Link>
diff --git a/src/pages/static/LoginRequired.jsx b/src/pages/static/LoginRequired.jsx
index 2a8765d7..ee09ead5 100644
--- a/src/pages/static/LoginRequired.jsx
+++ b/src/pages/static/LoginRequired.jsx
@@ -27,7 +27,7 @@ const LoginRequired = () => {
             className="btn btn-outline-primary mt-5"
             onClick={handleLogin}
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Log In
           </button>
         </NavLink>
diff --git a/src/pages/static/MeasurementMetrics.jsx b/src/pages/static/MeasurementMetrics.jsx
index 72f82f27..73ffa499 100644
--- a/src/pages/static/MeasurementMetrics.jsx
+++ b/src/pages/static/MeasurementMetrics.jsx
@@ -54,7 +54,7 @@ const MeasurementMetrics = ()=> {
                 <button
                   className="btn btn-sm btn-outline-primary mt-2"
                 >
-                  <i className="fa fa-sign-in mr-2"></i> Open Tool
+                  <i className="fa fa-sign-in me-2"></i> Open Tool
                 </button>
               </a>
             </div>
diff --git a/src/pages/static/NotFound.jsx b/src/pages/static/NotFound.jsx
index 5d40b4ea..46ac03cd 100644
--- a/src/pages/static/NotFound.jsx
+++ b/src/pages/static/NotFound.jsx
@@ -13,7 +13,7 @@ const NotFound = () => {
         </p>
         <Link to="/">
           <button className="btn btn-outline-primary mt-4 btn-sm">
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Homepage
           </button>
         </Link>
diff --git a/src/pages/static/Publications.jsx b/src/pages/static/Publications.jsx
index 952d2f31..ee65638c 100644
--- a/src/pages/static/Publications.jsx
+++ b/src/pages/static/Publications.jsx
@@ -20,7 +20,7 @@ const Publications = () => {
           id={
             `Baldin, Ilya, Anita Nikolich, James Griffioen, Indermohan Inder S. Monga, Kuang-Ching Wang, Tom Lehman, and Paul Ruth. “FABRIC: A national-scale programmable experimental network infrastructure.” IEEE Internet Computing 23, no. 6 (2019): 38-47.`
           }
-          btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+          btnStyle={"btn btn-sm btn-secondary ms-2 py-0 px-1"}
           showCopiedValue={false}
           text=""
         />
@@ -53,7 +53,7 @@ const Publications = () => {
               publisher={IEEE}
             }`
           }
-          btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+          btnStyle={"btn btn-sm btn-secondary ms-2 py-0 px-1"}
           showCopiedValue={false}
           text=""
         />