diff --git a/package-lock.json b/package-lock.json
index ecad85e6..b65ccda9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@hathor/wallet-lib": "1.8.0",
         "@unleash/proxy-client-react": "1.0.4",
         "axios": "1.7.2",
-        "bootstrap": "4.6.2",
+        "bootstrap": "5.3.3",
         "d3-selection": "3.0.0",
         "d3-zoom": "3.0.0",
         "font-awesome": "4.7.0",
@@ -2706,6 +2706,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "12.3.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-12.3.0.tgz",
@@ -7144,9 +7155,9 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "funding": [
         {
           "type": "github",
@@ -7157,9 +7168,9 @@
           "url": "https://opencollective.com/bootstrap"
         }
       ],
+      "license": "MIT",
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
diff --git a/package.json b/package.json
index 4e38e9ad..e2271a11 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "@hathor/wallet-lib": "1.8.0",
     "@unleash/proxy-client-react": "1.0.4",
     "axios": "1.7.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "5.3.3",
     "d3-selection": "3.0.0",
     "d3-zoom": "3.0.0",
     "font-awesome": "4.7.0",
diff --git a/src/components/AddressHistory.js b/src/components/AddressHistory.js
index 99faa7d4..7eb64651 100644
--- a/src/components/AddressHistory.js
+++ b/src/components/AddressHistory.js
@@ -95,13 +95,13 @@ class AddressHistory extends SortableTable {
         if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
           statusElement = (
             <span>
-              Token creation <i className={`fa ml-3 fa-long-arrow-down`}></i>
+              Token creation <i className={`fa ms-3 fa-long-arrow-down`}></i>
             </span>
           );
         } else {
           statusElement = (
             <span>
-              Received <i className={`fa ml-3 fa-long-arrow-down`}></i>
+              Received <i className={`fa ms-3 fa-long-arrow-down`}></i>
             </span>
           );
         }
@@ -110,13 +110,13 @@ class AddressHistory extends SortableTable {
         if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
           statusElement = (
             <span>
-              Token deposit <i className={`fa ml-3 fa-long-arrow-up`}></i>
+              Token deposit <i className={`fa ms-3 fa-long-arrow-up`}></i>
             </span>
           );
         } else {
           statusElement = (
             <span>
-              Sent <i className={`fa ml-3 fa-long-arrow-up`}></i>
+              Sent <i className={`fa ms-3 fa-long-arrow-up`}></i>
             </span>
           );
         }
@@ -136,20 +136,20 @@ class AddressHistory extends SortableTable {
       }
       return (
         <tr key={tx.tx_id} className={trClass} onClick={e => this.props.onRowClicked(tx.tx_id)}>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {hathorLib.transactionUtils.getTxType(tx)}
           </td>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
           </td>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {dateFormatter.parseTimestamp(tx.timestamp)}
           </td>
           <td className="state">{statusElement}</td>
           <td className="value">
             <span className="">{prettyValue}</span>
           </td>
-          <td className="d-lg-none d-table-cell pr-3" colSpan="3">
+          <td className="d-lg-none d-table-cell pe-3" colSpan="3">
             {hathorLib.transactionUtils.getTxType(tx)}
             <br />
             {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
diff --git a/src/components/AddressHistoryLegacy.js b/src/components/AddressHistoryLegacy.js
index 867dd328..c63c1802 100644
--- a/src/components/AddressHistoryLegacy.js
+++ b/src/components/AddressHistoryLegacy.js
@@ -99,7 +99,7 @@ class AddressHistory extends React.Component {
             <ul className="pagination">
               <li
                 ref="txPrevious"
-                className={!this.props.hasBefore ? 'page-item mr-3 disabled' : 'page-item mr-3'}
+                className={!this.props.hasBefore ? 'page-item me-3 disabled' : 'page-item me-3'}
               >
                 <Link
                   className="page-link"
@@ -173,13 +173,13 @@ class AddressHistory extends React.Component {
           if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
             statusElement = (
               <span>
-                Token creation <i className={`fa ml-3 fa-long-arrow-down`}></i>
+                Token creation <i className={`fa ms-3 fa-long-arrow-down`}></i>
               </span>
             );
           } else {
             statusElement = (
               <span>
-                Received <i className={`fa ml-3 fa-long-arrow-down`}></i>
+                Received <i className={`fa ms-3 fa-long-arrow-down`}></i>
               </span>
             );
           }
@@ -188,13 +188,13 @@ class AddressHistory extends React.Component {
           if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
             statusElement = (
               <span>
-                Token deposit <i className={`fa ml-3 fa-long-arrow-up`}></i>
+                Token deposit <i className={`fa ms-3 fa-long-arrow-up`}></i>
               </span>
             );
           } else {
             statusElement = (
               <span>
-                Sent <i className={`fa ml-3 fa-long-arrow-up`}></i>
+                Sent <i className={`fa ms-3 fa-long-arrow-up`}></i>
               </span>
             );
           }
@@ -213,13 +213,13 @@ class AddressHistory extends React.Component {
 
         return (
           <tr key={tx.tx_id} className={trClass} onClick={e => this.props.onRowClicked(tx.tx_id)}>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {hathorLib.transactionUtils.getTxType(tx)}
             </td>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
             </td>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {dateFormatter.parseTimestamp(tx.timestamp)}
             </td>
             <td className={tx.is_voided ? 'voided state' : 'state'}>{statusElement}</td>
@@ -227,7 +227,7 @@ class AddressHistory extends React.Component {
             <td className="value">
               <span className={tx.is_voided ? 'voided' : ''}>{prettyValue}</span>
             </td>
-            <td className="d-lg-none d-table-cell pr-3" colSpan="3">
+            <td className="d-lg-none d-table-cell pe-3" colSpan="3">
               {hathorLib.transactionUtils.getTxType(tx)}
               <br />
               {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 98b3fde7..0e1765f8 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -58,7 +58,7 @@ function Navigation({ history }) {
 
   return (
     <div className="main-nav">
-      <nav className="navbar navbar-expand-lg navbar-dark pl-3 pl-lg-0">
+      <nav className="navbar navbar-expand-lg navbar-dark ps-3 ps-lg-0">
         <div className="d-flex flex-column align-items-center">
           <Link className="navbar-brand" to="/" href="/">
             <img src={logo} alt="" />
@@ -67,8 +67,8 @@ function Navigation({ history }) {
         <button
           className="navbar-toggler"
           type="button"
-          data-toggle="collapse"
-          data-target="#navbarSupportedContent"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent"
           aria-expanded="false"
           aria-label="Toggle navigation"
@@ -76,7 +76,7 @@ function Navigation({ history }) {
           <span className="navbar-toggler-icon" />
         </button>
         <div className="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul className="navbar-nav mr-auto">
+          <ul className="navbar-nav me-auto">
             <li className="nav-item">
               <NavLink
                 to="/"
@@ -94,7 +94,7 @@ function Navigation({ history }) {
                   className="nav-link dropdown-toggle"
                   id="navbarDropdown"
                   role="button"
-                  data-toggle="dropdown"
+                  data-bs-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                 >
@@ -143,7 +143,7 @@ function Navigation({ history }) {
                 className="nav-link dropdown-toggle"
                 id="navbarDropdown"
                 role="button"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
               >
@@ -165,10 +165,10 @@ function Navigation({ history }) {
               </div>
             </li>
           </ul>
-          <div className="navbar-right d-flex flex-row align-items-center navigation-search">
+          <div className="d-flex flex-row align-items-center ms-auto navigation-search">
             <div className="d-flex flex-row align-items-center">
               <input
-                className="form-control mr-2"
+                className="form-control me-2"
                 type="search"
                 placeholder="Search tx or address"
                 aria-label="Search"
diff --git a/src/components/Network.js b/src/components/Network.js
index 9feaf997..c32a54b9 100644
--- a/src/components/Network.js
+++ b/src/components/Network.js
@@ -329,7 +329,7 @@ class Network extends React.Component {
               Select a peer to check its network status.
             </span>
           </button>
-          <button className="btn btn-hathor ml-auto" onClick={this.loadData}>
+          <button className="btn btn-hathor ms-auto" onClick={this.loadData}>
             Reload data
           </button>
         </div>
diff --git a/src/components/SortableTable.js b/src/components/SortableTable.js
index 12946c07..8c599851 100644
--- a/src/components/SortableTable.js
+++ b/src/components/SortableTable.js
@@ -73,8 +73,8 @@ class SortableTable extends React.Component {
               ref="pagePrevious"
               className={
                 !this.props.hasBefore || this.props.calculatingPage
-                  ? 'page-item mr-3 disabled'
-                  : 'page-item mr-3'
+                  ? 'page-item me-3 disabled'
+                  : 'page-item me-3'
               }
             >
               <button onClick={e => this.props.onPreviousPageClicked(e)} className="page-link">
diff --git a/src/components/feature_activation/FeatureDataRow.js b/src/components/feature_activation/FeatureDataRow.js
index 234ba7fd..62a5817d 100644
--- a/src/components/feature_activation/FeatureDataRow.js
+++ b/src/components/feature_activation/FeatureDataRow.js
@@ -16,10 +16,10 @@ class FeatureDataRow extends React.Component {
 
     return (
       <tr>
-        <td className="d-lg-table-cell pr-3">{bit}</td>
-        <td className="d-lg-table-cell pr-3">{prettySignal}</td>
-        <td className="d-lg-table-cell pr-3">{feature || '—'}</td>
-        <td className="d-lg-table-cell pr-3">{prettyState || '—'}</td>
+        <td className="d-lg-table-cell pe-3">{bit}</td>
+        <td className="d-lg-table-cell pe-3">{prettySignal}</td>
+        <td className="d-lg-table-cell pe-3">{feature || '—'}</td>
+        <td className="d-lg-table-cell pe-3">{prettyState || '—'}</td>
       </tr>
     );
   }
diff --git a/src/components/feature_activation/FeatureRow.js b/src/components/feature_activation/FeatureRow.js
index 775d76a3..0a617e5a 100644
--- a/src/components/feature_activation/FeatureRow.js
+++ b/src/components/feature_activation/FeatureRow.js
@@ -17,21 +17,21 @@ class FeatureRow extends React.Component {
 
     return (
       <tr>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.name}</td>
-        <td className="d-lg-table-cell pr-3">{prettyState}</td>
-        <td className="d-lg-table-cell pr-3">{acceptance_percentage}</td>
-        <td className="d-lg-table-cell pr-3">{(this.props.feature.threshold * 100).toFixed(0)}%</td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">{this.props.feature.name}</td>
+        <td className="d-lg-table-cell pe-3">{prettyState}</td>
+        <td className="d-lg-table-cell pe-3">{acceptance_percentage}</td>
+        <td className="d-lg-table-cell pe-3">{(this.props.feature.threshold * 100).toFixed(0)}%</td>
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.start_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.minimum_activation_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.timeout_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.lock_in_on_timeout.toString()}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.version}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.feature.lock_in_on_timeout.toString()}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.feature.version}</td>
       </tr>
     );
   }
diff --git a/src/components/feature_activation/Features.js b/src/components/feature_activation/Features.js
index 1bd03171..100fd0f2 100644
--- a/src/components/feature_activation/Features.js
+++ b/src/components/feature_activation/Features.js
@@ -129,7 +129,7 @@ class Features extends React.Component {
           <ul className="pagination">
             <li
               ref="featurePrevious"
-              className={`page-item mr-3 ${this.hasBefore() ? '' : 'disabled'}`}
+              className={`page-item me-3 ${this.hasBefore() ? '' : 'disabled'}`}
             >
               <Link
                 className="page-link"
@@ -209,7 +209,7 @@ class Features extends React.Component {
           <div className="f-flex flex-column align-items-start common-div bordered-wrapper mt-3 mt-lg-0 w-100 feature-column-descriptions">
             <div>
               <label>Column descriptions: </label>
-              <a href="true" className="ml-1" onClick={e => this.toggleColumnDescriptions(e)}>
+              <a href="true" className="ms-1" onClick={e => this.toggleColumnDescriptions(e)}>
                 {this.state.showColumnDescriptions ? 'Click to hide' : 'Click to show'}
               </a>
             </div>
diff --git a/src/components/token/TokenAlerts.js b/src/components/token/TokenAlerts.js
index c7d333c5..ae3a2df7 100644
--- a/src/components/token/TokenAlerts.js
+++ b/src/components/token/TokenAlerts.js
@@ -15,7 +15,7 @@ const TokenAlerts = props => {
 
     return (
       <div className="alert alert-danger backup-alert" role="alert">
-        <i className="fa fa-exclamation-triangle mr-2" title="Banned Token"></i>
+        <i className="fa fa-exclamation-triangle me-2" title="Banned Token"></i>
         {tokenBannedMessage}
       </div>
     );
diff --git a/src/components/token/TokenAutoCompleteField.js b/src/components/token/TokenAutoCompleteField.js
index 38b707de..ae517275 100644
--- a/src/components/token/TokenAutoCompleteField.js
+++ b/src/components/token/TokenAutoCompleteField.js
@@ -177,7 +177,7 @@ class TokenAutoCompleteField extends React.Component {
   _renderInputForm() {
     if (this.state.selectedItem) {
       return (
-        <div className="selectedItemWrapper mr-2 form-control">
+        <div className="selectedItemWrapper me-2 form-control">
           <div className="autocomplete-selected-item">
             <span>
               {this.state.selectedItem.name} ({this.state.selectedItem.symbol}) -{' '}
@@ -195,7 +195,7 @@ class TokenAutoCompleteField extends React.Component {
 
     return (
       <input
-        className="form-control mr-2 autocomplete-input"
+        className="form-control me-2 autocomplete-input"
         type="search"
         value={this.state.searchText}
         onKeyUp={this.onSearchTextKeyUp}
diff --git a/src/components/token/TokenBalanceRow.js b/src/components/token/TokenBalanceRow.js
index 501e52f3..06688d70 100644
--- a/src/components/token/TokenBalanceRow.js
+++ b/src/components/token/TokenBalanceRow.js
@@ -28,14 +28,14 @@ class TokenBalanceRow extends React.Component {
   render() {
     return (
       <tr onClick={e => this.onRowClicked(this.props.address)}>
-        <td className="d-lg-table-cell pr-3">{this.props.address}</td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">{this.props.address}</td>
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.total, this.props.decimalPlaces)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.unlocked, this.props.decimalPlaces)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.locked, this.props.decimalPlaces)}
         </td>
       </tr>
diff --git a/src/components/token/TokenConfig.js b/src/components/token/TokenConfig.js
index 39861545..2e9178f0 100644
--- a/src/components/token/TokenConfig.js
+++ b/src/components/token/TokenConfig.js
@@ -71,7 +71,7 @@ const TokenConfig = props => {
             {getShortConfigurationString()}
             <CopyToClipboard text={configurationString} onCopy={copied}>
               <i
-                className="fa fa-lg fa-clone pointer ml-1 float-right"
+                className="fa fa-lg fa-clone pointer ms-1 float-right"
                 title="Copy to clipboard"
               ></i>
             </CopyToClipboard>
@@ -85,7 +85,7 @@ const TokenConfig = props => {
             href="true"
           >
             Download
-            <i className="fa fa-download ml-1 float-right" title="Download QRCode"></i>
+            <i className="fa fa-download ms-1 float-right" title="Download QRCode"></i>
           </a>
         </p>
       </div>
diff --git a/src/components/token/TokenMarkers.js b/src/components/token/TokenMarkers.js
index d01232f5..83f7d3ce 100644
--- a/src/components/token/TokenMarkers.js
+++ b/src/components/token/TokenMarkers.js
@@ -14,7 +14,7 @@ const TokenMarkers = props => {
     }
 
     return (
-      <button className="info-hover-wrapper btn btn-link pl-2">
+      <button className="info-hover-wrapper btn btn-link ps-2">
         <i className="fa fa-check-circle fa-lg text-info" title="Verified"></i>
         <span className="subtitle info-hover-popover">
           This is a verified token. <a href="https://hathor.network">Learn more.</a>
@@ -37,7 +37,7 @@ const TokenMarkers = props => {
       );
     }
 
-    return <button className="info-hover-wrapper btn btn-link pl-2">{banIcon}</button>;
+    return <button className="info-hover-wrapper btn btn-link ps-2">{banIcon}</button>;
   };
 
   return (
diff --git a/src/components/token/TokenRow.js b/src/components/token/TokenRow.js
index 830776c3..8c3e2f8c 100644
--- a/src/components/token/TokenRow.js
+++ b/src/components/token/TokenRow.js
@@ -24,13 +24,13 @@ class TokenRow extends React.Component {
   render() {
     return (
       <tr onClick={e => this.onRowClicked(this.props.token.uid)}>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {hathorLib.helpersUtils.getShortHash(this.props.token.uid)}
         </td>
-        <td className="d-lg-table-cell pr-3">{this.props.token.name}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.token.symbol}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.token.nft ? 'NFT' : 'Custom Token'}</td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">{this.props.token.name}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.token.symbol}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.token.nft ? 'NFT' : 'Custom Token'}</td>
+        <td className="d-lg-table-cell pe-3">
           {dateFormatter.parseTimestamp(this.props.token.transaction_timestamp)}
         </td>
       </tr>
diff --git a/src/components/token/TokenSearchField.js b/src/components/token/TokenSearchField.js
index 66ee3054..7aa77f69 100644
--- a/src/components/token/TokenSearchField.js
+++ b/src/components/token/TokenSearchField.js
@@ -8,7 +8,7 @@ class TokenSearchField extends React.Component {
       <div className="d-flex flex-row align-items-center navigation-search-token">
         <div className="d-flex flex-row align-items-center col-12">
           <input
-            className="form-control mr-2 search-input"
+            className="form-control me-2 search-input"
             type="search"
             value={this.props.searchText}
             onKeyUp={this.props.onSearchTextKeyUp}
diff --git a/src/components/tx/Transactions.js b/src/components/tx/Transactions.js
index 4dacac29..7edc6125 100644
--- a/src/components/tx/Transactions.js
+++ b/src/components/tx/Transactions.js
@@ -180,8 +180,8 @@ class Transactions extends React.Component {
                 ref="txPrevious"
                 className={
                   !this.state.hasBefore || this.state.transactions.length === 0
-                    ? 'page-item mr-3 disabled'
-                    : 'page-item mr-3'
+                    ? 'page-item me-3 disabled'
+                    : 'page-item me-3'
                 }
               >
                 <Link
diff --git a/src/components/tx/TxAlerts.js b/src/components/tx/TxAlerts.js
index 06a7125f..2bc09b4b 100644
--- a/src/components/tx/TxAlerts.js
+++ b/src/components/tx/TxAlerts.js
@@ -15,7 +15,7 @@ const TxAlerts = props => {
 
     return (
       <div className="alert alert-danger backup-alert" role="alert">
-        <i className="fa fa-exclamation-triangle mr-2" title="Transaction from a Banned Token"></i>
+        <i className="fa fa-exclamation-triangle me-2" title="Transaction from a Banned Token"></i>
         {txTokenBannedMessage}
       </div>
     );
diff --git a/src/components/tx/TxData.js b/src/components/tx/TxData.js
index 3278307f..5670d843 100644
--- a/src/components/tx/TxData.js
+++ b/src/components/tx/TxData.js
@@ -570,7 +570,7 @@ class TxData extends React.Component {
           >
             <label className="graph-label">{this.state.graphs[graphIndex].label}:</label>
             {this.props.transaction.parents && this.props.transaction.parents.length ? (
-              <a href="true" className="ml-1" onClick={e => this.toggleGraph(e, graphIndex)}>
+              <a href="true" className="ms-1" onClick={e => this.toggleGraph(e, graphIndex)}>
                 {this.state.graphs[graphIndex].showNeighbors ? 'Click to hide' : 'Click to show'}
               </a>
             ) : null}
@@ -708,7 +708,7 @@ class TxData extends React.Component {
     const renderNCActions = () => {
       const actionsCount = get(this.props.transaction, 'nc_context.actions.length', 0);
       return (
-        <div className="d-flex flex-column align-items-start common-div bordered-wrapper mr-3">
+        <div className="d-flex flex-column align-items-start common-div bordered-wrapper me-3">
           <div>
             <label>Actions ({actionsCount})</label>
           </div>
@@ -733,7 +733,7 @@ class TxData extends React.Component {
         return null;
       }
       return (
-        <div className="d-flex flex-column align-items-start common-div bordered-wrapper mr-3">
+        <div className="d-flex flex-column align-items-start common-div bordered-wrapper me-3">
           <div>
             <label>Nano Contract ID:</label>{' '}
             <Link to={`/nano_contract/detail/${this.props.transaction.nc_id}`}>
@@ -789,7 +789,7 @@ class TxData extends React.Component {
         <div className="d-flex flex-column flex-lg-row align-items-start mb-3 common-div bordered-wrapper w-100">
           <div className="mt-3 graph-div" key="feature-activation">
             <label className="graph-label">Feature Activation:</label>
-            <a href="true" className="ml-1" onClick={e => this.toggleFeatureActivation(e)}>
+            <a href="true" className="ms-1" onClick={e => this.toggleFeatureActivation(e)}>
               {this.state.showFeatureActivation ? 'Click to hide' : 'Click to show'}
             </a>
             {this.state.showFeatureActivation &&
@@ -841,7 +841,7 @@ class TxData extends React.Component {
             {this.props.transaction.hash}
           </div>
           <div className="d-flex flex-column flex-lg-row align-items-start mt-3 mb-3">
-            <div className="d-flex flex-column align-items-start common-div bordered-wrapper mr-lg-3 w-100">
+            <div className="d-flex flex-column align-items-start common-div bordered-wrapper me-lg-3 w-100">
               <div>
                 <label>Type:</label> {hathorLib.transactionUtils.getTxType(this.props.transaction)}{' '}
                 {isNFTCreation() && '(NFT)'} <TxMarkers tx={this.props.transaction} />
@@ -886,7 +886,7 @@ class TxData extends React.Component {
               renderNCActions()}
           </div>
           <div className="d-flex flex-column flex-lg-row align-items-start mb-3 w-100">
-            <div className="f-flex flex-column align-items-start common-div bordered-wrapper mr-lg-3 w-100">
+            <div className="f-flex flex-column align-items-start common-div bordered-wrapper me-lg-3 w-100">
               <div>
                 <label>Inputs ({this.props.transaction.inputs.length})</label>
               </div>
@@ -901,7 +901,7 @@ class TxData extends React.Component {
           </div>
           {this.state.tokens.length > 0 && renderTokenList()}
           <div className="d-flex flex-column flex-lg-row align-items-start mb-3">
-            <div className="f-flex flex-column align-items-start common-div bordered-wrapper mr-lg-3 w-100">
+            <div className="f-flex flex-column align-items-start common-div bordered-wrapper me-lg-3 w-100">
               <div>
                 <label>Parents:</label>
               </div>
@@ -911,7 +911,7 @@ class TxData extends React.Component {
               <div>
                 <label>Children: </label>
                 {this.props.meta.children.length > 0 && (
-                  <a href="true" className="ml-1" onClick={e => this.toggleChildren(e)}>
+                  <a href="true" className="ms-1" onClick={e => this.toggleChildren(e)}>
                     {this.state.children ? 'Click to hide' : 'Click to show'}
                   </a>
                 )}
@@ -936,7 +936,7 @@ class TxData extends React.Component {
           </a>
           {this.state.raw ? (
             <CopyToClipboard text={this.props.transaction.raw} onCopy={this.copied}>
-              <i className="fa fa-clone pointer ml-1" title="Copy raw tx to clipboard"></i>
+              <i className="fa fa-clone pointer ms-1" title="Copy raw tx to clipboard"></i>
             </CopyToClipboard>
           ) : null}
           <p className="mt-3" ref="rawTx" style={{ display: 'none' }}>
diff --git a/src/components/tx/TxMarkers.js b/src/components/tx/TxMarkers.js
index bc0356e8..69cd989b 100644
--- a/src/components/tx/TxMarkers.js
+++ b/src/components/tx/TxMarkers.js
@@ -21,7 +21,7 @@ const TxMarkers = props => {
     }
 
     return (
-      <button className="info-hover-wrapper btn btn-link pl-1">
+      <button className="info-hover-wrapper btn btn-link ps-1">
         <i className="fa fa-certificate text-info" title={tx.meta.context}></i>
         <span className="subtitle info-hover-popover">{tx.meta.context}</span>
       </button>
diff --git a/src/components/tx/TxRow.js b/src/components/tx/TxRow.js
index b9a588d8..e7484587 100644
--- a/src/components/tx/TxRow.js
+++ b/src/components/tx/TxRow.js
@@ -18,11 +18,11 @@ class TxRow extends React.Component {
   render() {
     return (
       <tr onClick={e => this.handleClickTr(this.props.tx.tx_id)}>
-        <td className="d-none d-lg-table-cell pr-3">{this.props.tx.tx_id}</td>
-        <td className="d-none d-lg-table-cell pr-3">
+        <td className="d-none d-lg-table-cell pe-3">{this.props.tx.tx_id}</td>
+        <td className="d-none d-lg-table-cell pe-3">
           {dateFormatter.parseTimestamp(this.props.tx.timestamp)}
         </td>
-        <td className="d-lg-none d-table-cell pr-3" colSpan="2">
+        <td className="d-lg-none d-table-cell pe-3" colSpan="2">
           {hathorLib.helpersUtils.getShortHash(this.props.tx.tx_id)}{' '}
           {dateFormatter.parseTimestamp(this.props.tx.timestamp)}
         </td>
diff --git a/src/index.scss b/src/index.scss
index 384d7d6b..fc98b270 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -15,10 +15,14 @@ html, body, #root {
   height: 100%;
   width: 100%;
   word-wrap: break-word;
+
+  // Keeping the same font family from Bootstrap 4
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 a {
   color: $purpleHathor;
+  text-decoration: none; // Keeping style from Bootstrap 4
 }
 
 a:hover {
@@ -205,6 +209,29 @@ tr.tr-title {
   cursor: default !important;
 }
 
+// Class to keep the same visual aspect from Bootstrap 4
+.table {
+  thead {
+    tr {
+      border-top: 1px solid #dee2e6;
+    }
+    th {
+      border-bottom: 2px solid #dee2e6;
+    }
+  }
+
+  tbody {
+    tr.tr-title td {
+      background-color: rgb(242,242,242);
+      cursor: default !important;
+    }
+
+    td {
+      padding: 12px;
+    }
+  }
+}
+
 tr.tr-title td {
   font-weight: bold;
 }
@@ -631,6 +658,7 @@ th.sortable {
   background-color: transparent !important;
 }
 
+
 .source-code code {
   background-color: #f2f2f2;
 }
@@ -650,4 +678,4 @@ th.sortable {
 .source-code.show {
   height: auto !important;
   opacity: 1 !important;
-}
\ No newline at end of file
+}
diff --git a/src/screens/Dag.js b/src/screens/Dag.js
index 3ea7efc1..815864b0 100644
--- a/src/screens/Dag.js
+++ b/src/screens/Dag.js
@@ -194,11 +194,11 @@ class Dag extends React.Component {
   render() {
     return (
       <div className="d-flex align-items-start flex-column content-wrapper dag-visualizer">
-        <button className="btn btn-secondary mr-5" onClick={this.handlePause}>
+        <button className="btn btn-secondary me-5" onClick={this.handlePause}>
           {this.state.isPaused ? 'Play' : 'Pause'}
         </button>
         <div className="d-flex align-items-center mt-3">
-          <label htmlFor="timeframe" className="mr-3">
+          <label htmlFor="timeframe" className="me-3">
             Timeframe (in seconds):
           </label>
           <input
@@ -209,7 +209,7 @@ class Dag extends React.Component {
             value={this.state.inputTimeframe}
             onChange={this.handleTimeframeChange}
           />
-          <button className="btn btn-secondary ml-3" onClick={this.handleReset}>
+          <button className="btn btn-secondary ms-3" onClick={this.handleReset}>
             Reset
           </button>
         </div>