diff --git a/explorer/package-lock.json b/explorer/package-lock.json
index 08ce122ea..69fbe5dee 100644
--- a/explorer/package-lock.json
+++ b/explorer/package-lock.json
@@ -36,7 +36,7 @@
         "@types/socket.io-client": "^3.0.0",
         "bignumber.js": "^9.0.1",
         "bn.js": "^5.2.0",
-        "bootstrap": "^4.6.0",
+        "bootstrap": "~5.1.3",
         "bs58": "^4.0.1",
         "chai": "^4.3.4",
         "chart.js": "^2.9.4",
@@ -4858,6 +4858,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@project-serum/anchor": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@@ -8229,16 +8239,15 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/bootstrap"
       },
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.10.2"
       }
     },
     "node_modules/borsh": {
@@ -17948,12 +17957,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
     "node_modules/js-sha256": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@@ -20067,17 +20070,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -31093,6 +31085,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true
+    },
     "@project-serum/anchor": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@@ -33721,9 +33719,9 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
     "borsh": {
@@ -41199,12 +41197,6 @@
         }
       }
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
     "js-sha256": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@@ -42910,12 +42902,6 @@
         "ts-pnp": "^1.1.6"
       }
     },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "peer": true
-    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
diff --git a/explorer/package.json b/explorer/package.json
index 46a33c1fc..7f0bb79f9 100644
--- a/explorer/package.json
+++ b/explorer/package.json
@@ -31,7 +31,7 @@
     "@types/socket.io-client": "^3.0.0",
     "bignumber.js": "^9.0.1",
     "bn.js": "^5.2.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "~5.1.3",
     "bs58": "^4.0.1",
     "chai": "^4.3.4",
     "chart.js": "^2.9.4",
diff --git a/explorer/src/components/ClusterModal.tsx b/explorer/src/components/ClusterModal.tsx
index 93a85abac..fce27bed5 100644
--- a/explorer/src/components/ClusterModal.tsx
+++ b/explorer/src/components/ClusterModal.tsx
@@ -5,7 +5,6 @@ import { Location } from "history";
 import {
   useCluster,
   ClusterStatus,
-  clusterUrl,
   clusterName,
   clusterSlug,
   CLUSTERS,
@@ -34,52 +33,50 @@ export function ClusterModal() {
   return (
     <>
       <div
-        className={`modal fade fixed-right${show ? " show" : ""}`}
+        className={`offcanvas offcanvas-end${show ? " show" : ""}`}
         onClick={onClose}
       >
-        <div className="modal-dialog modal-dialog-vertical">
-          <div className="modal-content">
-            <div className="modal-body" onClick={(e) => e.stopPropagation()}>
-              <span className="c-pointer" onClick={onClose}>
-                &times;
-              </span>
+        <div className="modal-body" onClick={(e) => e.stopPropagation()}>
+          <span className="c-pointer" onClick={onClose}>
+            &times;
+          </span>
 
-              <h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
-              <ClusterToggle />
+          <h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
+          <ClusterToggle />
 
-              {showDeveloperSettings && (
-                <>
-                  <hr />
+          {showDeveloperSettings && (
+            <>
+              <hr />
 
-                  <h2 className="text-center mb-4 mt-4">Developer Settings</h2>
-                  <div className="d-flex justify-content-between">
-                    <span className="mr-3">Enable custom url param</span>
-                    <div className="custom-control custom-switch d-inline">
-                      <input
-                        type="checkbox"
-                        defaultChecked={enableCustomUrl}
-                        className="custom-control-input"
-                        id="cardToggle"
-                        onChange={onToggleCustomUrlFeature}
-                      />
-                      <label
-                        className="custom-control-label"
-                        htmlFor="cardToggle"
-                      ></label>
-                    </div>
-                  </div>
-                  <p className="text-muted font-size-sm mt-3">
-                    Enable this setting to easily connect to a custom cluster
-                    via the "customUrl" url param.
-                  </p>
-                </>
-              )}
-            </div>
-          </div>
+              <h2 className="text-center mb-4 mt-4">Developer Settings</h2>
+              <div className="d-flex justify-content-between">
+                <span className="me-3">Enable custom url param</span>
+                <div className="form-check form-switch">
+                  <input
+                    type="checkbox"
+                    defaultChecked={enableCustomUrl}
+                    className="form-check-input"
+                    id="cardToggle"
+                    onChange={onToggleCustomUrlFeature}
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor="cardToggle"
+                  ></label>
+                </div>
+              </div>
+              <p className="text-muted font-size-sm mt-3">
+                Enable this setting to easily connect to a custom cluster via
+                the "customUrl" url param.
+              </p>
+            </>
+          )}
         </div>
       </div>
 
-      <Overlay show={show} />
+      <div onClick={onClose}>
+        <Overlay show={show} />
+      </div>
     </>
   );
 }
@@ -93,8 +90,9 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
   const history = useHistory();
   const location = useLocation();
 
-  const customClass = (prefix: string) =>
-    active ? `${prefix}-${activeSuffix}` : "";
+  const btnClass = active
+    ? `border-${activeSuffix} text-${activeSuffix}`
+    : "btn-white";
 
   const clusterLocation = (location: Location) => {
     if (customUrl.length > 0) {
@@ -118,31 +116,26 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
 
   const inputTextClass = editing ? "" : "text-muted";
   return (
-    <Link
-      to={(location) => clusterLocation(location)}
-      className="btn input-group input-group-merge p-0"
-    >
-      <input
-        type="text"
-        defaultValue={customUrl}
-        className={`form-control form-control-prepended ${inputTextClass} ${customClass(
-          "border"
-        )}`}
-        onFocus={() => setEditing(true)}
-        onBlur={() => setEditing(false)}
-        onInput={(e) => onUrlInput(e.currentTarget.value)}
-      />
-      <div className="input-group-prepend">
-        <div className={`input-group-text pr-0 ${customClass("border")}`}>
-          <span className={customClass("text") || ""}>Custom:</span>
-        </div>
-      </div>
-    </Link>
+    <>
+      <Link className={`btn col-12 mb-3 ${btnClass}`} to={clusterLocation}>
+        Custom RPC URL
+      </Link>
+      {active && (
+        <input
+          type="text"
+          defaultValue={customUrl}
+          className={`form-control ${inputTextClass}`}
+          onFocus={() => setEditing(true)}
+          onBlur={() => setEditing(false)}
+          onInput={(e) => onUrlInput(e.currentTarget.value)}
+        />
+      )}
+    </>
   );
 }
 
 function ClusterToggle() {
-  const { status, cluster, customUrl } = useCluster();
+  const { status, cluster } = useCluster();
 
   let activeSuffix = "";
   switch (status) {
@@ -193,13 +186,10 @@ function ClusterToggle() {
         return (
           <Link
             key={index}
-            className={`btn text-left col-12 mb-3 ${btnClass}`}
+            className={`btn col-12 mb-3 ${btnClass}`}
             to={clusterLocation}
           >
-            {`${clusterName(net)}: `}
-            <span className="text-muted d-inline-block">
-              {clusterUrl(net, customUrl).replace("explorer-", "")}
-            </span>
+            {clusterName(net)}
           </Link>
         );
       })}
diff --git a/explorer/src/components/ClusterStatusButton.tsx b/explorer/src/components/ClusterStatusButton.tsx
index c7efc7cca..9456a1d1c 100644
--- a/explorer/src/components/ClusterStatusButton.tsx
+++ b/explorer/src/components/ClusterStatusButton.tsx
@@ -36,13 +36,13 @@ function Button() {
     return `btn d-block btn-${variant}`;
   };
 
-  const spinnerClasses = "spinner-grow spinner-grow-sm mr-2";
+  const spinnerClasses = "spinner-grow spinner-grow-sm me-2";
 
   switch (status) {
     case ClusterStatus.Connected:
       return (
         <span className={btnClasses("primary")}>
-          <span className="fe fe-check-circle mr-2"></span>
+          <span className="fe fe-check-circle me-2"></span>
           {statusName}
         </span>
       );
@@ -62,7 +62,7 @@ function Button() {
     case ClusterStatus.Failure:
       return (
         <span className={btnClasses("danger")}>
-          <span className="fe fe-alert-circle mr-2"></span>
+          <span className="fe fe-alert-circle me-2"></span>
           {statusName}
         </span>
       );
diff --git a/explorer/src/components/MessageBanner.tsx b/explorer/src/components/MessageBanner.tsx
index 19b22df92..90175f5d9 100644
--- a/explorer/src/components/MessageBanner.tsx
+++ b/explorer/src/components/MessageBanner.tsx
@@ -67,7 +67,7 @@ export function MessageBanner() {
       <div className="container">
         <div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
           <h3 className="mb-0 line-height-md">
-            <span className="fe fe-alert-circle mr-2"></span>
+            <span className="fe fe-alert-circle me-2"></span>
             {message}
           </h3>
           {timeframe}
diff --git a/explorer/src/components/Navbar.tsx b/explorer/src/components/Navbar.tsx
index 70ef7c2f2..16366e95b 100644
--- a/explorer/src/components/Navbar.tsx
+++ b/explorer/src/components/Navbar.tsx
@@ -24,11 +24,11 @@ export function Navbar() {
         </button>
 
         <div
-          className={`collapse navbar-collapse ml-auto mr-4 ${
+          className={`collapse navbar-collapse ms-auto me-4 ${
             collapse ? "show" : ""
           }`}
         >
-          <ul className="navbar-nav mr-auto">
+          <ul className="navbar-nav me-auto">
             <li className="nav-item">
               <NavLink className="nav-link" to={clusterPath("/")} exact>
                 Cluster Stats
diff --git a/explorer/src/components/ProgramLogsCardBody.tsx b/explorer/src/components/ProgramLogsCardBody.tsx
index fd4e0de91..79012a6dc 100644
--- a/explorer/src/components/ProgramLogsCardBody.tsx
+++ b/explorer/src/components/ProgramLogsCardBody.tsx
@@ -42,13 +42,13 @@ export function ProgramLogsCardBody({
           <tr key={index}>
             <td>
               <div className="d-flex align-items-center">
-                <span className={`badge badge-soft-${badgeColor} mr-2`}>
+                <span className={`badge bg-${badgeColor}-soft me-2`}>
                   #{index + 1}
                 </span>
                 {programName} Instruction
               </div>
               {programLogs && (
-                <div className="d-flex align-items-start flex-column text-monospace p-2 font-size-sm">
+                <div className="d-flex align-items-start flex-column font-monospace p-2 font-size-sm">
                   {programLogs.logs.map((log, key) => {
                     return (
                       <span key={key}>
diff --git a/explorer/src/components/SearchBar.tsx b/explorer/src/components/SearchBar.tsx
index dcd08f625..8b173a800 100644
--- a/explorer/src/components/SearchBar.tsx
+++ b/explorer/src/components/SearchBar.tsx
@@ -21,7 +21,7 @@ export function SearchBar() {
   const history = useHistory();
   const location = useLocation();
   const { tokenRegistry } = useTokenRegistry();
-  const { cluster, epochInfo } = useCluster();
+  const { cluster, clusterInfo } = useCluster();
 
   const onChange = (
     { pathname }: ValueType<any, false>,
@@ -48,7 +48,7 @@ export function SearchBar() {
               search,
               cluster,
               tokenRegistry,
-              epochInfo?.epoch
+              clusterInfo?.epochInfo.epoch
             )}
             noOptionsMessage={() => "No Results"}
             placeholder="Search for blocks, accounts, transactions, programs, and tokens"
diff --git a/explorer/src/components/SupplyCard.tsx b/explorer/src/components/SupplyCard.tsx
index 9ec62782b..1c2c5d2c4 100644
--- a/explorer/src/components/SupplyCard.tsx
+++ b/explorer/src/components/SupplyCard.tsx
@@ -32,14 +32,14 @@ export function SupplyCard() {
       <TableCardBody>
         <tr>
           <td className="w-100">Total Supply (SOL)</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <SolBalance lamports={supply.total} maximumFractionDigits={0} />
           </td>
         </tr>
 
         <tr>
           <td className="w-100">Circulating Supply (SOL)</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <SolBalance
               lamports={supply.circulating}
               maximumFractionDigits={0}
@@ -49,7 +49,7 @@ export function SupplyCard() {
 
         <tr>
           <td className="w-100">Non-Circulating Supply (SOL)</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <SolBalance
               lamports={supply.nonCirculating}
               maximumFractionDigits={0}
diff --git a/explorer/src/components/TopAccountsCard.tsx b/explorer/src/components/TopAccountsCard.tsx
index ef4d37fb0..c44fb2383 100644
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/explorer/src/components/TopAccountsCard.tsx
@@ -86,7 +86,7 @@ export function TopAccountsCard() {
         {richList === Status.Idle && (
           <div className="card-body">
             <span
-              className="btn btn-white ml-3 d-none d-md-inline"
+              className="btn btn-white ms-3 d-none d-md-inline"
               onClick={fetchRichList}
             >
               Load Largest Accounts
@@ -101,10 +101,8 @@ export function TopAccountsCard() {
                 <tr>
                   <th className="text-muted">Rank</th>
                   <th className="text-muted">Address</th>
-                  <th className="text-muted text-right">Balance (SOL)</th>
-                  <th className="text-muted text-right">
-                    % of {header} Supply
-                  </th>
+                  <th className="text-muted text-end">Balance (SOL)</th>
+                  <th className="text-muted text-end">% of {header} Supply</th>
                 </tr>
               </thead>
               <tbody className="list">
@@ -128,18 +126,17 @@ const renderAccountRow = (
   return (
     <tr key={index}>
       <td>
-        <span className="badge badge-soft-gray badge-pill">{index + 1}</span>
+        <span className="badge bg-gray-soft badge-pill">{index + 1}</span>
       </td>
       <td>
         <Address pubkey={account.address} link />
       </td>
-      <td className="text-right">
+      <td className="text-end">
         <SolBalance lamports={account.lamports} maximumFractionDigits={0} />
       </td>
-      <td className="text-right">{`${(
-        (100 * account.lamports) /
-        supply
-      ).toFixed(3)}%`}</td>
+      <td className="text-end">{`${((100 * account.lamports) / supply).toFixed(
+        3
+      )}%`}</td>
     </tr>
   );
 };
@@ -203,9 +200,7 @@ const FilterDropdown = ({ filter, toggle, show }: DropdownProps) => {
       >
         {filterTitle(filter)}
       </button>
-      <div
-        className={`dropdown-menu-right dropdown-menu${show ? " show" : ""}`}
-      >
+      <div className={`dropdown-menu-end dropdown-menu${show ? " show" : ""}`}>
         {FILTERS.map((filterOption) => {
           return (
             <Link
diff --git a/explorer/src/components/TpsCard.tsx b/explorer/src/components/TpsCard.tsx
index 221aa326d..c2efacf27 100644
--- a/explorer/src/components/TpsCard.tsx
+++ b/explorer/src/components/TpsCard.tsx
@@ -172,11 +172,11 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
       <TableCardBody>
         <tr>
           <td className="w-100">Transaction count</td>
-          <td className="text-lg-right text-monospace">{transactionCount} </td>
+          <td className="text-lg-end font-monospace">{transactionCount} </td>
         </tr>
         <tr>
           <td className="w-100">Transactions per second (TPS)</td>
-          <td className="text-lg-right text-monospace">{averageTps} </td>
+          <td className="text-lg-end font-monospace">{averageTps} </td>
         </tr>
       </TableCardBody>
 
@@ -192,7 +192,7 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
                 <button
                   key={key}
                   onClick={() => setSeries(key)}
-                  className={classNames("btn btn-sm btn-white ml-2", {
+                  className={classNames("btn btn-sm btn-white ms-2", {
                     active: series === key,
                   })}
                 >
diff --git a/explorer/src/components/account/BlockhashesCard.tsx b/explorer/src/components/account/BlockhashesCard.tsx
index bbf5298b1..9f42966d4 100644
--- a/explorer/src/components/account/BlockhashesCard.tsx
+++ b/explorer/src/components/account/BlockhashesCard.tsx
@@ -52,7 +52,7 @@ const renderAccountRow = (entry: RecentBlockhashesEntry, index: number) => {
   return (
     <tr key={index}>
       <td className="w-1">{index + 1}</td>
-      <td className="w-1 text-monospace">{entry.blockhash}</td>
+      <td className="w-1 font-monospace">{entry.blockhash}</td>
       <td className="">
         {entry.feeCalculator.lamportsPerSignature} lamports per signature
       </td>
diff --git a/explorer/src/components/account/ConfigAccountSection.tsx b/explorer/src/components/account/ConfigAccountSection.tsx
index 86f7e7a58..9df1fe0bf 100644
--- a/explorer/src/components/account/ConfigAccountSection.tsx
+++ b/explorer/src/components/account/ConfigAccountSection.tsx
@@ -67,12 +67,12 @@ function StakeConfigCard({
 
         <tr>
           <td>Warmup / Cooldown Rate</td>
-          <td className="text-lg-right">{warmupCooldownFormatted}</td>
+          <td className="text-lg-end">{warmupCooldownFormatted}</td>
         </tr>
 
         <tr>
           <td>Slash Penalty</td>
-          <td className="text-lg-right">{slashPenaltyFormatted}</td>
+          <td className="text-lg-end">{slashPenaltyFormatted}</td>
         </tr>
       </TableCardBody>
     </div>
@@ -101,7 +101,7 @@ function ValidatorInfoCard({
         {configAccount.info.configData.name && (
           <tr>
             <td>Name</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {configAccount.info.configData.name}
             </td>
           </tr>
@@ -110,7 +110,7 @@ function ValidatorInfoCard({
         {configAccount.info.configData.keybaseUsername && (
           <tr>
             <td>Keybase Username</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {configAccount.info.configData.keybaseUsername}
             </td>
           </tr>
@@ -119,7 +119,7 @@ function ValidatorInfoCard({
         {configAccount.info.configData.website && (
           <tr>
             <td>Website</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <a
                 href={configAccount.info.configData.website}
                 target="_blank"
@@ -134,7 +134,7 @@ function ValidatorInfoCard({
         {configAccount.info.configData.details && (
           <tr>
             <td>Details</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {configAccount.info.configData.details}
             </td>
           </tr>
@@ -143,7 +143,7 @@ function ValidatorInfoCard({
         {configAccount.info.keys && configAccount.info.keys.length > 1 && (
           <tr>
             <td>Signer</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address
                 pubkey={new PublicKey(configAccount.info.keys[1].pubkey)}
                 link
diff --git a/explorer/src/components/account/HistoryCardComponents.tsx b/explorer/src/components/account/HistoryCardComponents.tsx
index db5f5b090..918629b0e 100644
--- a/explorer/src/components/account/HistoryCardComponents.tsx
+++ b/explorer/src/components/account/HistoryCardComponents.tsx
@@ -30,12 +30,12 @@ export function HistoryCardHeader({
       >
         {fetching ? (
           <>
-            <span className="spinner-grow spinner-grow-sm mr-2"></span>
+            <span className="spinner-grow spinner-grow-sm me-2"></span>
             Loading
           </>
         ) : (
           <>
-            <span className="fe fe-refresh-cw mr-2"></span>
+            <span className="fe fe-refresh-cw me-2"></span>
             Refresh
           </>
         )}
@@ -65,7 +65,7 @@ export function HistoryCardFooter({
         >
           {fetching ? (
             <>
-              <span className="spinner-grow spinner-grow-sm mr-2"></span>
+              <span className="spinner-grow spinner-grow-sm me-2"></span>
               Loading
             </>
           ) : (
diff --git a/explorer/src/components/account/MetaplexNFTHeader.tsx b/explorer/src/components/account/MetaplexNFTHeader.tsx
index 93dd88362..d7cd7c739 100644
--- a/explorer/src/components/account/MetaplexNFTHeader.tsx
+++ b/explorer/src/components/account/MetaplexNFTHeader.tsx
@@ -17,20 +17,20 @@ export function NFTHeader({
   const metadata = nftData.metadata;
   return (
     <div className="row">
-      <div className="col-auto ml-2 d-flex align-items-center">
+      <div className="col-auto ms-2 d-flex align-items-center">
         <ArtContent metadata={metadata} pubkey={address} />
       </div>
-      <div className="col mb-3 ml-0.5 mt-3">
-        {<h6 className="header-pretitle ml-1">Metaplex NFT</h6>}
+      <div className="col mb-3 ms-0.5 mt-3">
+        {<h6 className="header-pretitle ms-1">Metaplex NFT</h6>}
         <div className="d-flex align-items-center">
-          <h2 className="header-title ml-1 align-items-center no-overflow-with-ellipsis">
+          <h2 className="header-title ms-1 align-items-center no-overflow-with-ellipsis">
             {metadata.data.name !== ""
               ? metadata.data.name
               : "No NFT name was found"}
           </h2>
           {getEditionPill(nftData.editionInfo)}
         </div>
-        <h4 className="header-pretitle ml-1 mt-1 no-overflow-with-ellipsis">
+        <h4 className="header-pretitle ms-1 mt-1 no-overflow-with-ellipsis">
           {metadata.data.symbol !== ""
             ? metadata.data.symbol
             : "No Symbol was found"}
@@ -43,7 +43,7 @@ export function NFTHeader({
           <button
             className="btn btn-dark btn-sm dropdown-toggle creators-dropdown-button-width"
             type="button"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
           >
@@ -72,12 +72,12 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
           "d-flex align-items-center dropdown-header creator-dropdown-entry"
         }
       >
-        <div className="d-flex text-monospace creator-dropdown-header">
+        <div className="d-flex font-monospace creator-dropdown-header">
           <span>Creator Address</span>
           <InfoTooltip bottom text={creatorTooltip} />
         </div>
-        <div className="d-flex text-monospace">
-          <span className="text-monospace">Royalty</span>
+        <div className="d-flex font-monospace">
+          <span className="font-monospace">Royalty</span>
           <InfoTooltip bottom text={shareTooltip} />
         </div>
       </div>
@@ -86,24 +86,24 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
 
   const getVerifiedIcon = (isVerified: boolean) => {
     const className = isVerified ? "fe fe-check" : "fe fe-alert-octagon";
-    return <i className={`ml-3 ${className}`}></i>;
+    return <i className={`ms-3 ${className}`}></i>;
   };
 
   const CreatorEntry = (creator: Creator) => {
     return (
       <div
         className={
-          "d-flex align-items-center text-monospace creator-dropdown-entry ml-3 mr-3"
+          "d-flex align-items-center font-monospace creator-dropdown-entry ms-3 me-3"
         }
       >
         {getVerifiedIcon(creator.verified)}
         <Link
-          className="dropdown-item text-monospace creator-dropdown-entry-address"
+          className="dropdown-item font-monospace creator-dropdown-entry-address"
           to={clusterPath(`/address/${creator.address}`)}
         >
           {creator.address}
         </Link>
-        <div className="mr-3"> {`${creator.share}%`}</div>
+        <div className="me-3"> {`${creator.share}%`}</div>
       </div>
     );
   };
@@ -120,8 +120,8 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
   }
 
   return (
-    <div className={"dropdown-item text-monospace"}>
-      <div className="mr-3">No creators are associated with this NFT.</div>
+    <div className={"dropdown-item font-monospace"}>
+      <div className="me-3">No creators are associated with this NFT.</div>
     </div>
   );
 }
@@ -131,8 +131,8 @@ function getEditionPill(editionInfo: EditionInfo) {
   const edition = editionInfo.edition;
 
   return (
-    <div className={"d-inline-flex ml-2"}>
-      <span className="badge badge-pill badge-dark">{`${
+    <div className={"d-inline-flex ms-2"}>
+      <span className="badge badge-pill bg-dark">{`${
         edition && masterEdition
           ? `Edition ${edition.edition.toNumber()} / ${masterEdition.supply.toNumber()}`
           : masterEdition
@@ -152,7 +152,7 @@ function getSaleTypePill(hasPrimarySaleHappened: boolean) {
 
   return (
     <div className={"d-inline-flex align-items-center"}>
-      <span className="badge badge-pill badge-dark">{`${
+      <span className="badge badge-pill bg-dark">{`${
         hasPrimarySaleHappened ? "Secondary Market" : "Primary Market"
       }`}</span>
       <InfoTooltip
@@ -167,7 +167,7 @@ function getSaleTypePill(hasPrimarySaleHappened: boolean) {
 
 function getIsMutablePill(isMutable: boolean) {
   return (
-    <span className="badge badge-pill badge-dark">{`${
+    <span className="badge badge-pill bg-dark">{`${
       isMutable ? "Mutable" : "Immutable"
     }`}</span>
   );
diff --git a/explorer/src/components/account/NonceAccountSection.tsx b/explorer/src/components/account/NonceAccountSection.tsx
index a0f21ab3f..7ae4ab352 100644
--- a/explorer/src/components/account/NonceAccountSection.tsx
+++ b/explorer/src/components/account/NonceAccountSection.tsx
@@ -30,21 +30,21 @@ export function NonceAccountSection({
 
         <tr>
           <td>Authority</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={nonceAccount.info.authority} alignRight raw link />
           </td>
         </tr>
 
         <tr>
           <td>Blockhash</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <code>{nonceAccount.info.blockhash}</code>
           </td>
         </tr>
 
         <tr>
           <td>Fee</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {nonceAccount.info.feeCalculator.lamportsPerSignature} lamports per
             signature
           </td>
diff --git a/explorer/src/components/account/OwnedTokensCard.tsx b/explorer/src/components/account/OwnedTokensCard.tsx
index 352ac26bf..130fe6c78 100644
--- a/explorer/src/components/account/OwnedTokensCard.tsx
+++ b/explorer/src/components/account/OwnedTokensCard.tsx
@@ -253,9 +253,7 @@ const DisplayDropdown = ({ display, toggle, show }: DropdownProps) => {
       >
         {display === "detail" ? "Detailed" : "Summary"}
       </button>
-      <div
-        className={`dropdown-menu-right dropdown-menu${show ? " show" : ""}`}
-      >
+      <div className={`dropdown-menu-end dropdown-menu${show ? " show" : ""}`}>
         {DISPLAY_OPTIONS.map((displayOption) => {
           return (
             <Link
diff --git a/explorer/src/components/account/RewardsCard.tsx b/explorer/src/components/account/RewardsCard.tsx
index f0949b6ef..8fd2bea04 100644
--- a/explorer/src/components/account/RewardsCard.tsx
+++ b/explorer/src/components/account/RewardsCard.tsx
@@ -113,7 +113,7 @@ export function RewardsCard({ pubkey }: { pubkey: PublicKey }) {
             >
               {fetching ? (
                 <>
-                  <span className="spinner-grow spinner-grow-sm mr-2"></span>
+                  <span className="spinner-grow spinner-grow-sm me-2"></span>
                   Loading
                 </>
               ) : (
diff --git a/explorer/src/components/account/SlotHashesCard.tsx b/explorer/src/components/account/SlotHashesCard.tsx
index d508e980d..7d22ccefe 100644
--- a/explorer/src/components/account/SlotHashesCard.tsx
+++ b/explorer/src/components/account/SlotHashesCard.tsx
@@ -51,10 +51,10 @@ export function SlotHashesCard({
 const renderAccountRow = (entry: SlotHashEntry, index: number) => {
   return (
     <tr key={index}>
-      <td className="w-1 text-monospace">
+      <td className="w-1 font-monospace">
         <Slot slot={entry.slot} link />
       </td>
-      <td className="text-monospace">{entry.hash}</td>
+      <td className="font-monospace">{entry.hash}</td>
     </tr>
   );
 };
diff --git a/explorer/src/components/account/StakeAccountSection.tsx b/explorer/src/components/account/StakeAccountSection.tsx
index 548f1ce01..4f6535508 100644
--- a/explorer/src/components/account/StakeAccountSection.tsx
+++ b/explorer/src/components/account/StakeAccountSection.tsx
@@ -111,7 +111,7 @@ function OverviewCard({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -119,26 +119,26 @@ function OverviewCard({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-lg-right text-uppercase">
+          <td className="text-lg-end text-uppercase">
             <SolBalance lamports={account.lamports || 0} />
           </td>
         </tr>
         <tr>
           <td>Rent Reserve (SOL)</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <SolBalance lamports={stakeAccount.meta.rentExemptReserve} />
           </td>
         </tr>
         {hideDelegation && (
           <tr>
             <td>Status</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {isFullyInactivated(stakeAccount, activation)
                 ? "Not delegated"
                 : displayStatus(stakeAccountType, activation)}
@@ -181,7 +181,7 @@ function DelegationCard({
       <TableCardBody>
         <tr>
           <td>Status</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {displayStatus(stakeAccountType, activation)}
           </td>
         </tr>
@@ -190,7 +190,7 @@ function DelegationCard({
           <>
             <tr>
               <td>Delegated Stake (SOL)</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <SolBalance lamports={stake.delegation.stake} />
               </td>
             </tr>
@@ -199,14 +199,14 @@ function DelegationCard({
               <>
                 <tr>
                   <td>Active Stake (SOL)</td>
-                  <td className="text-lg-right">
+                  <td className="text-lg-end">
                     <SolBalance lamports={activation.active} />
                   </td>
                 </tr>
 
                 <tr>
                   <td>Inactive Stake (SOL)</td>
-                  <td className="text-lg-right">
+                  <td className="text-lg-end">
                     <SolBalance lamports={activation.inactive} />
                   </td>
                 </tr>
@@ -216,7 +216,7 @@ function DelegationCard({
             {voterPubkey && (
               <tr>
                 <td>Delegated Vote Address</td>
-                <td className="text-lg-right">
+                <td className="text-lg-end">
                   <Address pubkey={voterPubkey} alignRight link />
                 </td>
               </tr>
@@ -224,7 +224,7 @@ function DelegationCard({
 
             <tr>
               <td>Activation Epoch</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 {activationEpoch !== undefined ? (
                   <Epoch epoch={activationEpoch} link />
                 ) : (
@@ -234,7 +234,7 @@ function DelegationCard({
             </tr>
             <tr>
               <td>Deactivation Epoch</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 {deactivationEpoch !== undefined ? (
                   <Epoch epoch={deactivationEpoch} link />
                 ) : (
@@ -261,14 +261,14 @@ function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
       <TableCardBody>
         <tr>
           <td>Stake Authority Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={meta.authorized.staker} alignRight link />
           </td>
         </tr>
 
         <tr>
           <td>Withdraw Authority Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={meta.authorized.withdrawer} alignRight link />
           </td>
         </tr>
@@ -276,7 +276,7 @@ function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
         {hasLockup && (
           <tr>
             <td>Lockup Authority Address</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={meta.lockup.custodian} alignRight link />
             </td>
           </tr>
diff --git a/explorer/src/components/account/StakeHistoryCard.tsx b/explorer/src/components/account/StakeHistoryCard.tsx
index c35565e12..68157f2f4 100644
--- a/explorer/src/components/account/StakeHistoryCard.tsx
+++ b/explorer/src/components/account/StakeHistoryCard.tsx
@@ -56,16 +56,16 @@ export function StakeHistoryCard({
 const renderAccountRow = (entry: StakeHistoryEntry, index: number) => {
   return (
     <tr key={index}>
-      <td className="w-1 text-monospace">
+      <td className="w-1 font-monospace">
         <Epoch epoch={entry.epoch} link />
       </td>
-      <td className="text-monospace">
+      <td className="font-monospace">
         <SolBalance lamports={entry.stakeHistory.effective} />
       </td>
-      <td className="text-monospace">
+      <td className="font-monospace">
         <SolBalance lamports={entry.stakeHistory.activating} />
       </td>
-      <td className="text-monospace">
+      <td className="font-monospace">
         <SolBalance lamports={entry.stakeHistory.deactivating} />
       </td>
     </tr>
diff --git a/explorer/src/components/account/SysvarAccountSection.tsx b/explorer/src/components/account/SysvarAccountSection.tsx
index 3fa10f9b3..7a6e34245 100644
--- a/explorer/src/components/account/SysvarAccountSection.tsx
+++ b/explorer/src/components/account/SysvarAccountSection.tsx
@@ -170,7 +170,7 @@ function SysvarAccountSlotHistory({
             Slot History{" "}
             <span className="text-muted">(previous 100 slots)</span>
           </td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {history.map((val) => (
               <p key={val} className="mb-0">
                 <Slot slot={val} link />
@@ -226,7 +226,7 @@ function SysvarAccountFeesCard({
 
         <tr>
           <td>Lamports Per Signature</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {sysvarAccount.info.feeCalculator.lamportsPerSignature}
           </td>
         </tr>
@@ -256,33 +256,31 @@ function SysvarAccountEpochScheduleCard({
 
         <tr>
           <td>Slots Per Epoch</td>
-          <td className="text-lg-right">{sysvarAccount.info.slotsPerEpoch}</td>
+          <td className="text-lg-end">{sysvarAccount.info.slotsPerEpoch}</td>
         </tr>
 
         <tr>
           <td>Leader Schedule Slot Offset</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {sysvarAccount.info.leaderScheduleSlotOffset}
           </td>
         </tr>
 
         <tr>
           <td>Epoch Warmup Enabled</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <code>{sysvarAccount.info.warmup ? "true" : "false"}</code>
           </td>
         </tr>
 
         <tr>
           <td>First Normal Epoch</td>
-          <td className="text-lg-right">
-            {sysvarAccount.info.firstNormalEpoch}
-          </td>
+          <td className="text-lg-end">{sysvarAccount.info.firstNormalEpoch}</td>
         </tr>
 
         <tr>
           <td>First Normal Slot</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Slot slot={sysvarAccount.info.firstNormalSlot} />
           </td>
         </tr>
@@ -312,28 +310,28 @@ function SysvarAccountClockCard({
 
         <tr>
           <td>Timestamp</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {displayTimestamp(sysvarAccount.info.unixTimestamp * 1000)}
           </td>
         </tr>
 
         <tr>
           <td>Epoch</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Epoch epoch={sysvarAccount.info.epoch} link />
           </td>
         </tr>
 
         <tr>
           <td>Leader Schedule Epoch</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Epoch epoch={sysvarAccount.info.leaderScheduleEpoch} link />
           </td>
         </tr>
 
         <tr>
           <td>Slot</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Slot slot={sysvarAccount.info.slot} link />
           </td>
         </tr>
@@ -363,21 +361,21 @@ function SysvarAccountRentCard({
 
         <tr>
           <td>Burn Percent</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {sysvarAccount.info.burnPercent + "%"}
           </td>
         </tr>
 
         <tr>
           <td>Exemption Threshold</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {sysvarAccount.info.exemptionThreshold} years
           </td>
         </tr>
 
         <tr>
           <td>Lamports Per Byte Year</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {sysvarAccount.info.lamportsPerByteYear}
           </td>
         </tr>
@@ -412,7 +410,7 @@ function SysvarAccountRewardsCard({
 
         <tr>
           <td>Validator Point Value</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {validatorPointValueFormatted} lamports
           </td>
         </tr>
diff --git a/explorer/src/components/account/TokenAccountSection.tsx b/explorer/src/components/account/TokenAccountSection.tsx
index 06583d966..795353b6d 100644
--- a/explorer/src/components/account/TokenAccountSection.tsx
+++ b/explorer/src/components/account/TokenAccountSection.tsx
@@ -130,7 +130,7 @@ function FungibleTokenMintAccountCard({
                 <h4>
                   Price{" "}
                   {tokenPriceInfo.market_cap_rank && (
-                    <span className="ml-2 badge badge-primary rank">
+                    <span className="ms-2 badge bg-primary rank">
                       Rank #{tokenPriceInfo.market_cap_rank}
                     </span>
                   )}
@@ -190,14 +190,14 @@ function FungibleTokenMintAccountCard({
             {tokenInfo ? "Overview" : "Token Mint"}
           </h3>
           <button className="btn btn-white btn-sm" onClick={refresh}>
-            <span className="fe fe-refresh-cw mr-2"></span>
+            <span className="fe fe-refresh-cw me-2"></span>
             Refresh
           </button>
         </div>
         <TableCardBody>
           <tr>
             <td>Address</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={account.pubkey} alignRight raw />
             </td>
           </tr>
@@ -205,7 +205,7 @@ function FungibleTokenMintAccountCard({
             <td>
               {info.mintAuthority === null ? "Fixed Supply" : "Current Supply"}
             </td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {normalizeTokenAmount(info.supply, info.decimals).toLocaleString(
                 "en-US",
                 {
@@ -217,14 +217,14 @@ function FungibleTokenMintAccountCard({
           {tokenInfo?.extensions?.website && (
             <tr>
               <td>Website</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <a
                   rel="noopener noreferrer"
                   target="_blank"
                   href={tokenInfo.extensions.website}
                 >
                   {tokenInfo.extensions.website}
-                  <span className="fe fe-external-link ml-2"></span>
+                  <span className="fe fe-external-link ms-2"></span>
                 </a>
               </td>
             </tr>
@@ -232,7 +232,7 @@ function FungibleTokenMintAccountCard({
           {info.mintAuthority && (
             <tr>
               <td>Mint Authority</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <Address pubkey={info.mintAuthority} alignRight link />
               </td>
             </tr>
@@ -240,25 +240,25 @@ function FungibleTokenMintAccountCard({
           {info.freezeAuthority && (
             <tr>
               <td>Freeze Authority</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <Address pubkey={info.freezeAuthority} alignRight link />
               </td>
             </tr>
           )}
           <tr>
             <td>Decimals</td>
-            <td className="text-lg-right">{info.decimals}</td>
+            <td className="text-lg-end">{info.decimals}</td>
           </tr>
           {!info.isInitialized && (
             <tr>
               <td>Status</td>
-              <td className="text-lg-right">Uninitialized</td>
+              <td className="text-lg-end">Uninitialized</td>
             </tr>
           )}
           {tokenInfo?.extensions?.bridgeContract && bridgeContractAddress && (
             <tr>
               <td>Bridge Contract</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <Copyable text={bridgeContractAddress}>
                   <a
                     href={tokenInfo.extensions.bridgeContract}
@@ -274,7 +274,7 @@ function FungibleTokenMintAccountCard({
           {tokenInfo?.extensions?.assetContract && assetContractAddress && (
             <tr>
               <td>Bridged Asset Contract</td>
-              <td className="text-lg-right">
+              <td className="text-lg-end">
                 <Copyable text={assetContractAddress}>
                   <a
                     href={tokenInfo.extensions.bridgeContract}
@@ -312,21 +312,21 @@ function NonFungibleTokenMintAccountCard({
           Overview
         </h3>
         <button className="btn btn-white btn-sm" onClick={refresh}>
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         {nftData.editionInfo.masterEdition?.maxSupply && (
           <tr>
             <td>Max Total Supply</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {nftData.editionInfo.masterEdition.maxSupply.toNumber() === 0
                 ? 1
                 : nftData.editionInfo.masterEdition.maxSupply.toNumber()}
@@ -336,7 +336,7 @@ function NonFungibleTokenMintAccountCard({
         {nftData?.editionInfo.masterEdition?.supply && (
           <tr>
             <td>Current Supply</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {nftData.editionInfo.masterEdition.supply.toNumber() === 0
                 ? 1
                 : nftData.editionInfo.masterEdition.supply.toNumber()}
@@ -346,14 +346,14 @@ function NonFungibleTokenMintAccountCard({
         {mintInfo.mintAuthority && (
           <tr>
             <td>Mint Authority</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={mintInfo.mintAuthority} alignRight link />
             </td>
           </tr>
         )}
         <tr>
           <td>Update Authority</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address
               pubkey={new PublicKey(nftData.metadata.updateAuthority)}
               alignRight
@@ -364,7 +364,7 @@ function NonFungibleTokenMintAccountCard({
         {nftData?.metadata.data && (
           <tr>
             <td>Seller Fee</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               {`${nftData?.metadata.data.sellerFeeBasisPoints / 100}%`}
             </td>
           </tr>
@@ -392,7 +392,7 @@ function TokenAccountCard({
     balance = (
       <>
         ◎
-        <span className="text-monospace">
+        <span className="font-monospace">
           {new BigNumber(info.tokenAmount.uiAmountString).toFormat(9)}
         </span>
       </>
@@ -412,7 +412,7 @@ function TokenAccountCard({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -420,45 +420,45 @@ function TokenAccountCard({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         {label && (
           <tr>
             <td>Address Label</td>
-            <td className="text-lg-right">{label}</td>
+            <td className="text-lg-end">{label}</td>
           </tr>
         )}
         <tr>
           <td>Mint</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={info.mint} alignRight link />
           </td>
         </tr>
         <tr>
           <td>Owner</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={info.owner} alignRight link />
           </td>
         </tr>
         <tr>
           <td>Token balance ({unit})</td>
-          <td className="text-lg-right">{balance}</td>
+          <td className="text-lg-end">{balance}</td>
         </tr>
         {info.state === "uninitialized" && (
           <tr>
             <td>Status</td>
-            <td className="text-lg-right">Uninitialized</td>
+            <td className="text-lg-end">Uninitialized</td>
           </tr>
         )}
         {info.rentExemptReserve && (
           <tr>
             <td>Rent-exempt reserve (SOL)</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <>
                 ◎
-                <span className="text-monospace">
+                <span className="font-monospace">
                   {new BigNumber(
                     info.rentExemptReserve.uiAmountString
                   ).toFormat(9)}
@@ -491,7 +491,7 @@ function MultisigAccountCard({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -499,22 +499,22 @@ function MultisigAccountCard({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         <tr>
           <td>Required Signers</td>
-          <td className="text-lg-right">{info.numRequiredSigners}</td>
+          <td className="text-lg-end">{info.numRequiredSigners}</td>
         </tr>
         <tr>
           <td>Valid Signers</td>
-          <td className="text-lg-right">{info.numValidSigners}</td>
+          <td className="text-lg-end">{info.numValidSigners}</td>
         </tr>
         {info.signers.map((signer) => (
           <tr key={signer.toString()}>
             <td>Signer</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={signer} alignRight link />
             </td>
           </tr>
@@ -522,7 +522,7 @@ function MultisigAccountCard({
         {!info.isInitialized && (
           <tr>
             <td>Status</td>
-            <td className="text-lg-right">Uninitialized</td>
+            <td className="text-lg-end">Uninitialized</td>
           </tr>
         )}
       </TableCardBody>
diff --git a/explorer/src/components/account/TokenHistoryCard.tsx b/explorer/src/components/account/TokenHistoryCard.tsx
index fc0f2f434..a2c0f719c 100644
--- a/explorer/src/components/account/TokenHistoryCard.tsx
+++ b/explorer/src/components/account/TokenHistoryCard.tsx
@@ -242,12 +242,12 @@ function TokenHistoryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
         >
           {fetching ? (
             <>
-              <span className="spinner-grow spinner-grow-sm mr-2"></span>
+              <span className="spinner-grow spinner-grow-sm me-2"></span>
               Loading
             </>
           ) : (
             <>
-              <span className="fe fe-refresh-cw mr-2"></span>
+              <span className="fe fe-refresh-cw me-2"></span>
               Refresh
             </>
           )}
@@ -289,7 +289,7 @@ function TokenHistoryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
           >
             {fetching ? (
               <>
-                <span className="spinner-grow spinner-grow-sm mr-2"></span>
+                <span className="spinner-grow spinner-grow-sm me-2"></span>
                 Loading
               </>
             ) : (
@@ -331,8 +331,8 @@ const FilterDropdown = ({ filter, toggle, show, tokens }: FilterProps) => {
   });
 
   return (
-    <div className="dropdown mr-2">
-      <small className="mr-2">Filter:</small>
+    <div className="dropdown me-2">
+      <small className="me-2">Filter:</small>
       <button
         className="btn btn-white btn-sm dropdown-toggle"
         type="button"
@@ -341,7 +341,7 @@ const FilterDropdown = ({ filter, toggle, show, tokens }: FilterProps) => {
         {filter === ALL_TOKENS ? "All Tokens" : nameLookup.get(filter)}
       </button>
       <div
-        className={`token-filter dropdown-menu-right dropdown-menu${
+        className={`token-filter dropdown-menu-end dropdown-menu${
           show ? " show" : ""
         }`}
       >
@@ -404,9 +404,7 @@ const TokenTransactionRow = React.memo(
           </td>
 
           <td>
-            <span className={`badge badge-soft-${statusClass}`}>
-              {statusText}
-            </span>
+            <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
           </td>
 
           <td>
@@ -414,7 +412,7 @@ const TokenTransactionRow = React.memo(
           </td>
 
           <td>
-            <span className="spinner-grow spinner-grow-sm mr-2"></span>
+            <span className="spinner-grow spinner-grow-sm me-2"></span>
             Loading
           </td>
 
@@ -546,7 +544,7 @@ const TokenTransactionRow = React.memo(
               </td>
 
               <td>
-                <span className={`badge badge-soft-${statusClass}`}>
+                <span className={`badge bg-${statusClass}-soft`}>
                   {statusText}
                 </span>
               </td>
@@ -597,7 +595,7 @@ function InstructionDetails({
               e.preventDefault();
               setExpanded(!expanded);
             }}
-            className={`c-pointer fe mr-2 ${
+            className={`c-pointer fe me-2 ${
               expanded ? "fe-minus-square" : "fe-plus-square"
             }`}
           ></span>
diff --git a/explorer/src/components/account/TokenLargestAccountsCard.tsx b/explorer/src/components/account/TokenLargestAccountsCard.tsx
index b36312829..b5768faf6 100644
--- a/explorer/src/components/account/TokenLargestAccountsCard.tsx
+++ b/explorer/src/components/account/TokenLargestAccountsCard.tsx
@@ -91,8 +91,8 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
                 <th className="text-muted">Rank</th>
                 <th className="text-muted">Address</th>
                 <th className="text-muted">Owner</th>
-                <th className="text-muted text-right">Balance {unitLabel}</th>
-                <th className="text-muted text-right">% of Total Supply</th>
+                <th className="text-muted text-end">Balance {unitLabel}</th>
+                <th className="text-muted text-end">% of Total Supply</th>
               </tr>
             </thead>
             <tbody className="list">
@@ -131,7 +131,7 @@ const renderAccountRow = (
   return (
     <tr key={index}>
       <td>
-        <span className="badge badge-soft-gray badge-pill">{index + 1}</span>
+        <span className="badge bg-gray-soft badge-pill">{index + 1}</span>
       </td>
       <td className="td">
         <Address pubkey={account.address} link truncate />
@@ -139,11 +139,11 @@ const renderAccountRow = (
       <td>
         {account.owner && <Address pubkey={account.owner} link truncate />}
       </td>
-      <td className="text-right text-monospace">
+      <td className="text-end font-monospace">
         {account.uiAmountString &&
           new BigNumber(account.uiAmountString).toFormat(balanceFixedPoint)}
       </td>
-      <td className="text-right text-monospace">{percent}</td>
+      <td className="text-end font-monospace">{percent}</td>
     </tr>
   );
 };
diff --git a/explorer/src/components/account/UnknownAccountCard.tsx b/explorer/src/components/account/UnknownAccountCard.tsx
index 4055e955f..cecd87441 100644
--- a/explorer/src/components/account/UnknownAccountCard.tsx
+++ b/explorer/src/components/account/UnknownAccountCard.tsx
@@ -23,19 +23,19 @@ export function UnknownAccountCard({ account }: { account: Account }) {
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         {label && (
           <tr>
             <td>Address Label</td>
-            <td className="text-lg-right">{label}</td>
+            <td className="text-lg-end">{label}</td>
           </tr>
         )}
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <SolBalance lamports={lamports} />
           </td>
         </tr>
@@ -43,14 +43,14 @@ export function UnknownAccountCard({ account }: { account: Account }) {
         {details?.space !== undefined && (
           <tr>
             <td>Allocated Data Size</td>
-            <td className="text-lg-right">{details.space} byte(s)</td>
+            <td className="text-lg-end">{details.space} byte(s)</td>
           </tr>
         )}
 
         {details && (
           <tr>
             <td>Assigned Program Id</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={details.owner} alignRight link />
             </td>
           </tr>
@@ -59,9 +59,7 @@ export function UnknownAccountCard({ account }: { account: Account }) {
         {details && (
           <tr>
             <td>Executable</td>
-            <td className="text-lg-right">
-              {details.executable ? "Yes" : "No"}
-            </td>
+            <td className="text-lg-end">{details.executable ? "Yes" : "No"}</td>
           </tr>
         )}
       </TableCardBody>
diff --git a/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx b/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
index 456be5f08..558fd0c02 100644
--- a/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
+++ b/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
@@ -81,7 +81,7 @@ export function UpgradeableProgramSection({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -89,48 +89,48 @@ export function UpgradeableProgramSection({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         {label && (
           <tr>
             <td>Address Label</td>
-            <td className="text-lg-right">{label}</td>
+            <td className="text-lg-end">{label}</td>
           </tr>
         )}
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-lg-right text-uppercase">
+          <td className="text-lg-end text-uppercase">
             <SolBalance lamports={account.lamports || 0} />
           </td>
         </tr>
         <tr>
           <td>Executable</td>
-          <td className="text-lg-right">Yes</td>
+          <td className="text-lg-end">Yes</td>
         </tr>
         <tr>
           <td>Executable Data</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={programAccount.programData} alignRight link />
           </td>
         </tr>
         <tr>
           <td>Upgradeable</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {programData.authority !== null ? "Yes" : "No"}
           </td>
         </tr>
         <tr>
           <td>Last Deployed Slot</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Slot slot={programData.slot} link />
           </td>
         </tr>
         {programData.authority !== null && (
           <tr>
             <td>Upgrade Authority</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={programData.authority} alignRight link />
             </td>
           </tr>
@@ -158,7 +158,7 @@ export function UpgradeableProgramDataSection({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -166,38 +166,38 @@ export function UpgradeableProgramDataSection({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-lg-right text-uppercase">
+          <td className="text-lg-end text-uppercase">
             <SolBalance lamports={account.lamports || 0} />
           </td>
         </tr>
         {account.details?.space !== undefined && (
           <tr>
             <td>Data (Bytes)</td>
-            <td className="text-lg-right">{account.details.space}</td>
+            <td className="text-lg-end">{account.details.space}</td>
           </tr>
         )}
         <tr>
           <td>Upgradeable</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {programData.authority !== null ? "Yes" : "No"}
           </td>
         </tr>
         <tr>
           <td>Last Deployed Slot</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Slot slot={programData.slot} link />
           </td>
         </tr>
         {programData.authority !== null && (
           <tr>
             <td>Upgrade Authority</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={programData.authority} alignRight link />
             </td>
           </tr>
@@ -225,7 +225,7 @@ export function UpgradeableProgramBufferSection({
           className="btn btn-white btn-sm"
           onClick={() => refresh(account.pubkey)}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Refresh
         </button>
       </div>
@@ -233,26 +233,26 @@ export function UpgradeableProgramBufferSection({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={account.pubkey} alignRight raw />
           </td>
         </tr>
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-lg-right text-uppercase">
+          <td className="text-lg-end text-uppercase">
             <SolBalance lamports={account.lamports || 0} />
           </td>
         </tr>
         {account.details?.space !== undefined && (
           <tr>
             <td>Data (Bytes)</td>
-            <td className="text-lg-right">{account.details.space}</td>
+            <td className="text-lg-end">{account.details.space}</td>
           </tr>
         )}
         {programBuffer.authority !== null && (
           <tr>
             <td>Deploy Authority</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={programBuffer.authority} alignRight link />
             </td>
           </tr>
@@ -260,7 +260,7 @@ export function UpgradeableProgramBufferSection({
         {account.details && (
           <tr>
             <td>Owner</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={account.details.owner} alignRight link />
             </td>
           </tr>
diff --git a/explorer/src/components/account/VoteAccountSection.tsx b/explorer/src/components/account/VoteAccountSection.tsx
index 2df3b1161..34ac8d9a1 100644
--- a/explorer/src/components/account/VoteAccountSection.tsx
+++ b/explorer/src/components/account/VoteAccountSection.tsx
@@ -36,7 +36,7 @@ export function VoteAccountSection({
             Authorized Voter
             {voteAccount.info.authorizedVoters.length > 1 ? "s" : ""}
           </td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {voteAccount.info.authorizedVoters.map((voter) => {
               return (
                 <Address
@@ -53,7 +53,7 @@ export function VoteAccountSection({
 
         <tr>
           <td>Authorized Withdrawer</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address
               pubkey={voteAccount.info.authorizedWithdrawer}
               alignRight
@@ -65,19 +65,19 @@ export function VoteAccountSection({
 
         <tr>
           <td>Last Timestamp</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {displayTimestamp(voteAccount.info.lastTimestamp.timestamp * 1000)}
           </td>
         </tr>
 
         <tr>
           <td>Commission</td>
-          <td className="text-lg-right">{voteAccount.info.commission + "%"}</td>
+          <td className="text-lg-end">{voteAccount.info.commission + "%"}</td>
         </tr>
 
         <tr>
           <td>Root Slot</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {rootSlot !== null ? <Slot slot={rootSlot} link /> : "N/A"}
           </td>
         </tr>
diff --git a/explorer/src/components/account/VotesCard.tsx b/explorer/src/components/account/VotesCard.tsx
index 4db06d676..ad200cc33 100644
--- a/explorer/src/components/account/VotesCard.tsx
+++ b/explorer/src/components/account/VotesCard.tsx
@@ -44,10 +44,10 @@ export function VotesCard({ voteAccount }: { voteAccount: VoteAccount }) {
 const renderAccountRow = (vote: Vote, index: number) => {
   return (
     <tr key={index}>
-      <td className="w-1 text-monospace">
+      <td className="w-1 font-monospace">
         <Slot slot={vote.slot} link />
       </td>
-      <td className="text-monospace">{vote.confirmationCount}</td>
+      <td className="font-monospace">{vote.confirmationCount}</td>
     </tr>
   );
 };
diff --git a/explorer/src/components/account/history/TokenInstructionsCard.tsx b/explorer/src/components/account/history/TokenInstructionsCard.tsx
index 25d02456f..e64f04c71 100644
--- a/explorer/src/components/account/history/TokenInstructionsCard.tsx
+++ b/explorer/src/components/account/history/TokenInstructionsCard.tsx
@@ -109,7 +109,7 @@ export function TokenInstructionsCard({ pubkey }: { pubkey: PublicKey }) {
                 </td>
 
                 <td>
-                  <span className={`badge badge-soft-${statusClass}`}>
+                  <span className={`badge bg-${statusClass}-soft`}>
                     {statusText}
                   </span>
                 </td>
diff --git a/explorer/src/components/account/history/TokenTransfersCard.tsx b/explorer/src/components/account/history/TokenTransfersCard.tsx
index 80e80be2d..42400ecd5 100644
--- a/explorer/src/components/account/history/TokenTransfersCard.tsx
+++ b/explorer/src/components/account/history/TokenTransfersCard.tsx
@@ -185,7 +185,7 @@ export function TokenTransfersCard({ pubkey }: { pubkey: PublicKey }) {
               </td>
 
               <td>
-                <span className={`badge badge-soft-${statusClass}`}>
+                <span className={`badge bg-${statusClass}-soft`}>
                   {statusText}
                 </span>
               </td>
diff --git a/explorer/src/components/account/history/TransactionHistoryCard.tsx b/explorer/src/components/account/history/TransactionHistoryCard.tsx
index 10fa03daf..068b0ee62 100644
--- a/explorer/src/components/account/history/TransactionHistoryCard.tsx
+++ b/explorer/src/components/account/history/TransactionHistoryCard.tsx
@@ -70,9 +70,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
           )}
 
           <td>
-            <span className={`badge badge-soft-${statusClass}`}>
-              {statusText}
-            </span>
+            <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
           </td>
         </tr>
       );
diff --git a/explorer/src/components/block/BlockHistoryCard.tsx b/explorer/src/components/block/BlockHistoryCard.tsx
index 7aa75c42a..f900500cf 100644
--- a/explorer/src/components/block/BlockHistoryCard.tsx
+++ b/explorer/src/components/block/BlockHistoryCard.tsx
@@ -151,7 +151,7 @@ export function BlockHistoryCard({ block }: { block: BlockResponse }) {
                 <tr key={i}>
                   <td>{tx.index + 1}</td>
                   <td>
-                    <span className={`badge badge-soft-${statusClass}`}>
+                    <span className={`badge bg-${statusClass}-soft`}>
                       {statusText}
                     </span>
                   </td>
@@ -164,7 +164,7 @@ export function BlockHistoryCard({ block }: { block: BlockResponse }) {
                           return (
                             <div key={i} className="d-flex align-items-center">
                               <Address pubkey={new PublicKey(programId)} link />
-                              <span className="ml-2 text-muted">{`(${count})`}</span>
+                              <span className="ms-2 text-muted">{`(${count})`}</span>
                             </div>
                           );
                         })}
@@ -252,7 +252,7 @@ const FilterDropdown = ({
   filterOptions.sort();
 
   return (
-    <div className="dropdown mr-2">
+    <div className="dropdown me-2">
       <button
         className="btn btn-white btn-sm dropdown-toggle"
         type="button"
@@ -261,7 +261,7 @@ const FilterDropdown = ({
         {currentFilterOption.name}
       </button>
       <div
-        className={`token-filter dropdown-menu-right dropdown-menu${
+        className={`token-filter dropdown-menu-end dropdown-menu${
           show ? " show" : ""
         }`}
       >
diff --git a/explorer/src/components/block/BlockOverviewCard.tsx b/explorer/src/components/block/BlockOverviewCard.tsx
index dd8bb1344..f129bc98c 100644
--- a/explorer/src/components/block/BlockOverviewCard.tsx
+++ b/explorer/src/components/block/BlockOverviewCard.tsx
@@ -24,7 +24,7 @@ export function BlockOverviewCard({
 }) {
   const confirmedBlock = useBlock(slot);
   const fetchBlock = useFetchBlock();
-  const { epochSchedule, status } = useCluster();
+  const { clusterInfo, status } = useCluster();
   const refresh = () => fetchBlock(slot);
 
   // Fetch block on load
@@ -45,7 +45,7 @@ export function BlockOverviewCard({
 
   const block = confirmedBlock.data.block;
   const committedTxs = block.transactions.filter((tx) => tx.meta?.err === null);
-  const epoch = epochSchedule?.getEpoch(slot);
+  const epoch = clusterInfo?.epochSchedule.getEpoch(slot);
 
   return (
     <>
@@ -58,13 +58,13 @@ export function BlockOverviewCard({
         <TableCardBody>
           <tr>
             <td className="w-100">Slot</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Slot slot={slot} />
             </td>
           </tr>
           <tr>
             <td className="w-100">Blockhash</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <span>{block.blockhash}</span>
             </td>
           </tr>
@@ -72,16 +72,16 @@ export function BlockOverviewCard({
             <>
               <tr>
                 <td>Timestamp (Local)</td>
-                <td className="text-lg-right">
-                  <span className="text-monospace">
+                <td className="text-lg-end">
+                  <span className="font-monospace">
                     {displayTimestamp(block.blockTime * 1000, true)}
                   </span>
                 </td>
               </tr>
               <tr>
                 <td>Timestamp (UTC)</td>
-                <td className="text-lg-right">
-                  <span className="text-monospace">
+                <td className="text-lg-end">
+                  <span className="font-monospace">
                     {displayTimestampUtc(block.blockTime * 1000, true)}
                   </span>
                 </td>
@@ -90,46 +90,46 @@ export function BlockOverviewCard({
           ) : (
             <tr>
               <td className="w-100">Timestamp</td>
-              <td className="text-lg-right">Unavailable</td>
+              <td className="text-lg-end">Unavailable</td>
             </tr>
           )}
           <tr>
             <td className="w-100">Parent Slot</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Slot slot={block.parentSlot} link />
             </td>
           </tr>
           {epoch !== undefined && (
             <tr>
               <td className="w-100">Epoch</td>
-              <td className="text-lg-right text-monospace">
+              <td className="text-lg-end font-monospace">
                 <Epoch epoch={epoch} link />
               </td>
             </tr>
           )}
           <tr>
             <td className="w-100">Parent Blockhash</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <span>{block.previousBlockhash}</span>
             </td>
           </tr>
           {confirmedBlock.data.child && (
             <tr>
               <td className="w-100">Child Slot</td>
-              <td className="text-lg-right text-monospace">
+              <td className="text-lg-end font-monospace">
                 <Slot slot={confirmedBlock.data.child} link />
               </td>
             </tr>
           )}
           <tr>
             <td className="w-100">Processed Transactions</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <span>{block.transactions.length}</span>
             </td>
           </tr>
           <tr>
             <td className="w-100">Successful Transactions</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <span>{committedTxs.length}</span>
             </td>
           </tr>
diff --git a/explorer/src/components/block/BlockProgramsCard.tsx b/explorer/src/components/block/BlockProgramsCard.tsx
index bd1fc7123..c1172f2fb 100644
--- a/explorer/src/components/block/BlockProgramsCard.tsx
+++ b/explorer/src/components/block/BlockProgramsCard.tsx
@@ -62,15 +62,13 @@ export function BlockProgramsCard({ block }: { block: BlockResponse }) {
         <TableCardBody>
           <tr>
             <td className="w-100">Unique Programs Count</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               {programEntries.length}
             </td>
           </tr>
           <tr>
             <td className="w-100">Total Instructions</td>
-            <td className="text-lg-right text-monospace">
-              {totalInstructions}
-            </td>
+            <td className="text-lg-end font-monospace">{totalInstructions}</td>
           </tr>
         </TableCardBody>
       </div>
diff --git a/explorer/src/components/common/Account.tsx b/explorer/src/components/common/Account.tsx
index 47f68fdd6..8259d91c1 100644
--- a/explorer/src/components/common/Account.tsx
+++ b/explorer/src/components/common/Account.tsx
@@ -17,7 +17,7 @@ export function AccountHeader({ title, refresh }: AccountHeaderProps) {
     <div className="card-header align-items-center">
       <h3 className="card-header-title">{title}</h3>
       <button className="btn btn-white btn-sm" onClick={() => refresh()}>
-        <span className="fe fe-refresh-cw mr-2"></span>
+        <span className="fe fe-refresh-cw me-2"></span>
         Refresh
       </button>
     </div>
@@ -28,7 +28,7 @@ export function AccountAddressRow({ account }: AccountProps) {
   return (
     <tr>
       <td>Address</td>
-      <td className="text-lg-right">
+      <td className="text-lg-end">
         <Address pubkey={account.pubkey} alignRight raw />
       </td>
     </tr>
@@ -40,7 +40,7 @@ export function AccountBalanceRow({ account }: AccountProps) {
   return (
     <tr>
       <td>Balance (SOL)</td>
-      <td className="text-lg-right text-uppercase">
+      <td className="text-lg-end text-uppercase">
         <SolBalance lamports={lamports} />
       </td>
     </tr>
diff --git a/explorer/src/components/common/Address.tsx b/explorer/src/components/common/Address.tsx
index e0aa2d19f..ed64f3a1d 100644
--- a/explorer/src/components/common/Address.tsx
+++ b/explorer/src/components/common/Address.tsx
@@ -47,7 +47,7 @@ export function Address({
 
   const content = (
     <Copyable text={address} replaceText={!alignRight}>
-      <span className="text-monospace">
+      <span className="font-monospace">
         {link ? (
           <Link
             className={truncate ? "text-truncate address-truncate" : ""}
diff --git a/explorer/src/components/common/BalanceDelta.tsx b/explorer/src/components/common/BalanceDelta.tsx
index 25c860f58..479bf50d4 100644
--- a/explorer/src/components/common/BalanceDelta.tsx
+++ b/explorer/src/components/common/BalanceDelta.tsx
@@ -17,17 +17,17 @@ export function BalanceDelta({
 
   if (delta.gt(0)) {
     return (
-      <span className="badge badge-soft-success">
+      <span className="badge bg-success-soft">
         +{isSol ? sols : delta.toString()}
       </span>
     );
   } else if (delta.lt(0)) {
     return (
-      <span className="badge badge-soft-warning">
+      <span className="badge bg-warning-soft">
         {isSol ? <>-{sols}</> : delta.toString()}
       </span>
     );
   }
 
-  return <span className="badge badge-soft-secondary">0</span>;
+  return <span className="badge bg-secondary-soft">0</span>;
 }
diff --git a/explorer/src/components/common/Copyable.tsx b/explorer/src/components/common/Copyable.tsx
index 1a847bd6c..20b3da1c5 100644
--- a/explorer/src/components/common/Copyable.tsx
+++ b/explorer/src/components/common/Copyable.tsx
@@ -54,9 +54,9 @@ export function Copyable({
   function PrependCopyIcon() {
     return (
       <>
-        <span className="font-size-tiny mr-2">
+        <span className="font-size-tiny me-2">
           <span className={textColor}>
-            {message !== undefined && <span className="mr-2">{message}</span>}
+            {message !== undefined && <span className="me-2">{message}</span>}
             <CopyIcon />
           </span>
         </span>
@@ -71,7 +71,7 @@ export function Copyable({
         <span className="font-size-tiny">
           <span className={textColor}>
             <CopyIcon />
-            <span className="ml-2">{message}</span>
+            <span className="ms-2">{message}</span>
           </span>
         </span>
         <span className="v-hidden">{children}</span>
diff --git a/explorer/src/components/common/Epoch.tsx b/explorer/src/components/common/Epoch.tsx
index 133f493d9..c3bb2fd64 100644
--- a/explorer/src/components/common/Epoch.tsx
+++ b/explorer/src/components/common/Epoch.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 export function Epoch({ epoch, link }: Props) {
   return (
-    <span className="text-monospace">
+    <span className="font-monospace">
       {link ? (
         <Copyable text={epoch.toString()}>
           <Link to={clusterPath(`/epoch/${epoch}`)}>
diff --git a/explorer/src/components/common/ErrorCard.tsx b/explorer/src/components/common/ErrorCard.tsx
index fe0053553..f538f991d 100644
--- a/explorer/src/components/common/ErrorCard.tsx
+++ b/explorer/src/components/common/ErrorCard.tsx
@@ -19,7 +19,7 @@ export function ErrorCard({
         {retry && (
           <>
             <span
-              className="btn btn-white ml-3 d-none d-md-inline"
+              className="btn btn-white ms-3 d-none d-md-inline"
               onClick={retry}
             >
               {buttonText}
diff --git a/explorer/src/components/common/HexData.tsx b/explorer/src/components/common/HexData.tsx
index 054fc4072..5b41c4212 100644
--- a/explorer/src/components/common/HexData.tsx
+++ b/explorer/src/components/common/HexData.tsx
@@ -40,7 +40,7 @@ export function HexData({ raw }: { raw: Buffer }) {
   function Content() {
     return (
       <Copyable text={hexString}>
-        <pre className="d-inline-block text-left mb-0">{divs}</pre>
+        <pre className="d-inline-block text-start mb-0">{divs}</pre>
       </Copyable>
     );
   }
diff --git a/explorer/src/components/common/InfoTooltip.tsx b/explorer/src/components/common/InfoTooltip.tsx
index 95a670600..06cdd73ad 100644
--- a/explorer/src/components/common/InfoTooltip.tsx
+++ b/explorer/src/components/common/InfoTooltip.tsx
@@ -45,7 +45,7 @@ export function InfoTooltip({ bottom, right, text, children }: Props) {
     >
       <div className={`d-flex align-items-center justify-content-${justify}`}>
         {children}
-        <span className="fe fe-help-circle ml-2"></span>
+        <span className="fe fe-help-circle ms-2"></span>
       </div>
       <Popover bottom={bottom} right={right} state={state} text={text} />
     </div>
diff --git a/explorer/src/components/common/InstructionDetails.tsx b/explorer/src/components/common/InstructionDetails.tsx
index fc8e1498c..444f2dd6b 100644
--- a/explorer/src/components/common/InstructionDetails.tsx
+++ b/explorer/src/components/common/InstructionDetails.tsx
@@ -32,7 +32,7 @@ export function InstructionDetails({
               e.preventDefault();
               setExpanded(!expanded);
             }}
-            className={`c-pointer fe mr-2 ${
+            className={`c-pointer fe me-2 ${
               expanded ? "fe-minus-square" : "fe-plus-square"
             }`}
           ></span>
diff --git a/explorer/src/components/common/LoadingCard.tsx b/explorer/src/components/common/LoadingCard.tsx
index 738cdf9c0..32e0ffddb 100644
--- a/explorer/src/components/common/LoadingCard.tsx
+++ b/explorer/src/components/common/LoadingCard.tsx
@@ -4,7 +4,7 @@ export function LoadingCard({ message }: { message?: string }) {
   return (
     <div className="card">
       <div className="card-body text-center">
-        <span className="spinner-grow spinner-grow-sm mr-2"></span>
+        <span className="spinner-grow spinner-grow-sm me-2"></span>
         {message || "Loading"}
       </div>
     </div>
diff --git a/explorer/src/components/common/Overlay.tsx b/explorer/src/components/common/Overlay.tsx
index ad724d815..5a3492f48 100644
--- a/explorer/src/components/common/Overlay.tsx
+++ b/explorer/src/components/common/Overlay.tsx
@@ -5,5 +5,11 @@ type OverlayProps = {
 };
 
 export function Overlay({ show }: OverlayProps) {
-  return <div className={`modal-backdrop fade${show ? " show" : ""}`}></div>;
+  return (
+    <div
+      className={`modal-backdrop fade ${
+        show ? "show" : "disable-pointer-events"
+      }`}
+    ></div>
+  );
 }
diff --git a/explorer/src/components/common/Signature.tsx b/explorer/src/components/common/Signature.tsx
index df4d40953..b421b16c8 100644
--- a/explorer/src/components/common/Signature.tsx
+++ b/explorer/src/components/common/Signature.tsx
@@ -32,7 +32,7 @@ export function Signature({
       }`}
     >
       <Copyable text={signature} replaceText={!alignRight}>
-        <span className="text-monospace">
+        <span className="font-monospace">
           {link ? (
             <Link
               className={truncate ? "text-truncate signature-truncate" : ""}
diff --git a/explorer/src/components/common/Slot.tsx b/explorer/src/components/common/Slot.tsx
index c2958cd29..39463f927 100644
--- a/explorer/src/components/common/Slot.tsx
+++ b/explorer/src/components/common/Slot.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 export function Slot({ slot, link }: Props) {
   return (
-    <span className="text-monospace">
+    <span className="font-monospace">
       {link ? (
         <Copyable text={slot.toString()}>
           <Link to={clusterPath(`/block/${slot}`)}>
diff --git a/explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx b/explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx
index a7cd83715..af1dd70be 100644
--- a/explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx
+++ b/explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx
@@ -28,28 +28,28 @@ export function AssociatedTokenDetailsCard({
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={ix.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={new PublicKey(info.account)} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={new PublicKey(info.mint)} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Wallet</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={new PublicKey(info.wallet)} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/InstructionCard.tsx b/explorer/src/components/instruction/InstructionCard.tsx
index ff22e11dc..c51d398e9 100644
--- a/explorer/src/components/instruction/InstructionCard.tsx
+++ b/explorer/src/components/instruction/InstructionCard.tsx
@@ -59,7 +59,7 @@ export function InstructionCard({
     <div className="card">
       <div className="card-header">
         <h3 className="card-header-title mb-0 d-flex align-items-center">
-          <span className={`badge badge-soft-${resultClass} mr-2`}>
+          <span className={`badge bg-${resultClass}-soft me-2`}>
             #{index + 1}
             {childIndex !== undefined ? `.${childIndex + 1}` : ""}
           </span>
@@ -73,7 +73,7 @@ export function InstructionCard({
           }`}
           onClick={rawClickHandler}
         >
-          <span className="fe fe-code mr-1"></span>
+          <span className="fe fe-code me-1"></span>
           Raw
         </button>
       </div>
@@ -84,7 +84,7 @@ export function InstructionCard({
               <>
                 <tr>
                   <td>Program</td>
-                  <td className="text-lg-right">
+                  <td className="text-lg-end">
                     <Address pubkey={ix.programId} alignRight link />
                   </td>
                 </tr>
diff --git a/explorer/src/components/instruction/MemoDetailsCard.tsx b/explorer/src/components/instruction/MemoDetailsCard.tsx
index 085820a38..140bf8d5a 100644
--- a/explorer/src/components/instruction/MemoDetailsCard.tsx
+++ b/explorer/src/components/instruction/MemoDetailsCard.tsx
@@ -29,15 +29,15 @@ export function MemoDetailsCard({
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={ix.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Data (UTF-8)</td>
-        <td className="text-lg-right">
-          <pre className="d-inline-block text-left mb-0">{data}</pre>
+        <td className="text-lg-end">
+          <pre className="d-inline-block text-start mb-0">{data}</pre>
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/RawDetails.tsx b/explorer/src/components/instruction/RawDetails.tsx
index c242e8c16..24da79443 100644
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/explorer/src/components/instruction/RawDetails.tsx
@@ -9,15 +9,15 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
       {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
         <tr key={keyIndex}>
           <td>
-            <div className="mr-2 d-md-inline">Account #{keyIndex + 1}</div>
+            <div className="me-2 d-md-inline">Account #{keyIndex + 1}</div>
             {isWritable && (
-              <span className="badge badge-soft-info mr-1">Writable</span>
+              <span className="badge bg-info-soft me-1">Writable</span>
             )}
             {isSigner && (
-              <span className="badge badge-soft-info mr-1">Signer</span>
+              <span className="badge bg-info-soft me-1">Signer</span>
             )}
           </td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={pubkey} alignRight link />
           </td>
         </tr>
@@ -27,7 +27,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
         <td>
           Instruction Data <span className="text-muted">(Hex)</span>
         </td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <HexData raw={ix.data} />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/RawParsedDetails.tsx b/explorer/src/components/instruction/RawParsedDetails.tsx
index 59f535295..444640355 100644
--- a/explorer/src/components/instruction/RawParsedDetails.tsx
+++ b/explorer/src/components/instruction/RawParsedDetails.tsx
@@ -16,8 +16,8 @@ export function RawParsedDetails({
         <td>
           Instruction Data <span className="text-muted">(JSON)</span>
         </td>
-        <td className="text-lg-right">
-          <pre className="d-inline-block text-left json-wrap">
+        <td className="text-lg-end">
+          <pre className="d-inline-block text-start json-wrap">
             {JSON.stringify(ix.parsed, null, 2)}
           </pre>
         </td>
diff --git a/explorer/src/components/instruction/bonfida-bot/CancelOrderDetails.tsx b/explorer/src/components/instruction/bonfida-bot/CancelOrderDetails.tsx
index 706dd7b31..ffcb6c74f 100644
--- a/explorer/src/components/instruction/bonfida-bot/CancelOrderDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/CancelOrderDetails.tsx
@@ -25,80 +25,80 @@ export function CancelOrderDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Signal Provider Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.signalProviderKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.openOrdersKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumEventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumMarketBids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumMarketAsks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Program ID</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.dexProgramKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.side}</td>
+        <td className="text-lg-end">{info.side}</td>
       </tr>
 
       <tr>
         <td>Order Id</td>
-        <td className="text-lg-right">{info.orderId.toString(10)}</td>
+        <td className="text-lg-end">{info.orderId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/CollectFeesDetails.tsx b/explorer/src/components/instruction/bonfida-bot/CollectFeesDetails.tsx
index 2deb771cd..2ef65e4ab 100644
--- a/explorer/src/components/instruction/bonfida-bot/CollectFeesDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/CollectFeesDetails.tsx
@@ -25,35 +25,35 @@ export function CollectFeesDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Signal Provider</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.signalProviderPoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Insurance Fund</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.bonfidaFeePoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Buy and Burn</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.bonfidaBnBPTKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/CreateBotDetails.tsx b/explorer/src/components/instruction/bonfida-bot/CreateBotDetails.tsx
index bd3c466ea..3685166e7 100644
--- a/explorer/src/components/instruction/bonfida-bot/CreateBotDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/CreateBotDetails.tsx
@@ -25,69 +25,69 @@ export function CreateBotDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Token Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.mintKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Target Pool Token Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.targetPoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Program ID</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumProgramId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Signal Provider Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.signalProviderKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Fee Ratio</td>
-        <td className="text-lg-right">{info.feeRatio}</td>
+        <td className="text-lg-end">{info.feeRatio}</td>
       </tr>
 
       <tr>
         <td>Fee Collection Period</td>
-        <td className="text-lg-right">{info.feeCollectionPeriod}</td>
+        <td className="text-lg-end">{info.feeCollectionPeriod}</td>
       </tr>
 
       <tr>
         <td>Serum Markets</td>
-        <td className="text-lg-right">{info.markets}</td>
+        <td className="text-lg-end">{info.markets}</td>
       </tr>
 
       <tr>
         <td>Deposit Amounts</td>
-        <td className="text-lg-right">{info.depositAmounts}</td>
+        <td className="text-lg-end">{info.depositAmounts}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/CreateOrderDetails.tsx b/explorer/src/components/instruction/bonfida-bot/CreateOrderDetails.tsx
index ce1672dd4..abfd49dc4 100644
--- a/explorer/src/components/instruction/bonfida-bot/CreateOrderDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/CreateOrderDetails.tsx
@@ -29,135 +29,135 @@ export function CreateOrderDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Signal Provider Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.signalProviderKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Payer Bot Asset Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.payerPoolAssetKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Order</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.openOrdersKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumRequestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumEventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumMarketBids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.serumMarketAsks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Coin Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.coinVaultKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pc Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.pcVaultKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Program ID</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.dexProgramKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Token Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={new PublicKey(info.targetMint)} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.side}</td>
+        <td className="text-lg-end">{info.side}</td>
       </tr>
 
       <tr>
         <td>Limit Price</td>
-        <td className="text-lg-right">{info.limitPrice}</td>
+        <td className="text-lg-end">{info.limitPrice}</td>
       </tr>
 
       <tr>
         <td>Ratio to Trade</td>
-        <td className="text-lg-right">{info.ratioOfPoolAssetsToTrade}</td>
+        <td className="text-lg-end">{info.ratioOfPoolAssetsToTrade}</td>
       </tr>
 
       <tr>
         <td>Order Type</td>
-        <td className="text-lg-right">{info.orderType}</td>
+        <td className="text-lg-end">{info.orderType}</td>
       </tr>
 
       <tr>
         <td>Coin Lot Size</td>
-        <td className="text-lg-right">{info.coinLotSize.toString()}</td>
+        <td className="text-lg-end">{info.coinLotSize.toString()}</td>
       </tr>
 
       <tr>
         <td>Pc Lot Size</td>
-        <td className="text-lg-right">{info.pcLotSize.toString()}</td>
+        <td className="text-lg-end">{info.pcLotSize.toString()}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/DepositDetails.tsx b/explorer/src/components/instruction/bonfida-bot/DepositDetails.tsx
index 22a0aea14..dc90c8592 100644
--- a/explorer/src/components/instruction/bonfida-bot/DepositDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/DepositDetails.tsx
@@ -25,61 +25,61 @@ export function DepositDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Signal Provider Fee Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.sigProviderFeeReceiverKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Insurance Funds</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.bonfidaFeeReceiverKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Buy and Burn</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.bonfidaBuyAndBurnKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Token Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.mintKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Target Pool Token Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.targetPoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Pool Token Amount</td>
-        <td className="text-lg-right">{info.poolTokenAmount.toString()}</td>
+        <td className="text-lg-end">{info.poolTokenAmount.toString()}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/InitializeBotDetails.tsx b/explorer/src/components/instruction/bonfida-bot/InitializeBotDetails.tsx
index 804d90082..ec5386b77 100644
--- a/explorer/src/components/instruction/bonfida-bot/InitializeBotDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/InitializeBotDetails.tsx
@@ -25,38 +25,38 @@ export function InitializeBotDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Account</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Mint Account</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.mintAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Max Number of Assets</td>
-        <td className="text-lg-right">{info.maxNumberOfAsset}</td>
+        <td className="text-lg-end">{info.maxNumberOfAsset}</td>
       </tr>
 
       <tr>
         <td>Number of Markets</td>
-        <td className="text-lg-right">{info.numberOfMarkets}</td>
+        <td className="text-lg-end">{info.numberOfMarkets}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/RedeemDetails.tsx b/explorer/src/components/instruction/bonfida-bot/RedeemDetails.tsx
index edf424cfc..dc2fb80cf 100644
--- a/explorer/src/components/instruction/bonfida-bot/RedeemDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/RedeemDetails.tsx
@@ -25,47 +25,47 @@ export function RedeemDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Token Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.mintKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Source Bot Token Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.sourcePoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Source Bot Token Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.sourcePoolTokenKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
 
       <tr>
         <td>Pool Token Amount</td>
-        <td className="text-lg-right">{info.poolTokenAmount}</td>
+        <td className="text-lg-end">{info.poolTokenAmount}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bonfida-bot/SettleFundsDetails.tsx b/explorer/src/components/instruction/bonfida-bot/SettleFundsDetails.tsx
index dc0d24ba7..5983b24cd 100644
--- a/explorer/src/components/instruction/bonfida-bot/SettleFundsDetails.tsx
+++ b/explorer/src/components/instruction/bonfida-bot/SettleFundsDetails.tsx
@@ -24,84 +24,84 @@ export function SettleFundsDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.openOrdersKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot Token Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.poolMintKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Coin Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.coinVaultKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pc Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.pcVaultKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot's Coin Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.coinPoolAssetKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bot's Pc Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.pcPoolAssetKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Vault Signer</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.vaultSignerKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Serum Program ID</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.dexProgramKey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Pool Seed</td>
-        <td className="text-lg-right">{info.poolSeed}</td>
+        <td className="text-lg-end">{info.poolSeed}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/bpf-loader/BpfLoaderDetailsCard.tsx b/explorer/src/components/instruction/bpf-loader/BpfLoaderDetailsCard.tsx
index fe140b367..b996e69db 100644
--- a/explorer/src/components/instruction/bpf-loader/BpfLoaderDetailsCard.tsx
+++ b/explorer/src/components/instruction/bpf-loader/BpfLoaderDetailsCard.tsx
@@ -70,14 +70,14 @@ export function BpfLoaderWriteDetailsCard(props: Props<WriteInfo>) {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
@@ -86,14 +86,14 @@ export function BpfLoaderWriteDetailsCard(props: Props<WriteInfo>) {
         <td>
           Bytes <span className="text-muted">(Base 64)</span>
         </td>
-        <td className="text-lg-right">
-          <pre className="d-inline-block text-left mb-0">{bytes}</pre>
+        <td className="text-lg-end">
+          <pre className="d-inline-block text-start mb-0">{bytes}</pre>
         </td>
       </tr>
 
       <tr>
         <td>Offset</td>
-        <td className="text-lg-right">{info.offset}</td>
+        <td className="text-lg-end">{info.offset}</td>
       </tr>
     </InstructionCard>
   );
@@ -113,14 +113,14 @@ export function BpfLoaderFinalizeDetailsCard(props: Props<FinalizeInfo>) {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx b/explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx
index 5c3ca288e..b09c5a1ac 100644
--- a/explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx
+++ b/explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx
@@ -80,7 +80,7 @@ function renderDetails<T>(
       value = <Address pubkey={value} alignRight link />;
     } else if (key === "bytes") {
       value = (
-        <pre className="d-inline-block text-left mb-0 data-wrap">{value}</pre>
+        <pre className="d-inline-block text-start mb-0 data-wrap">{value}</pre>
       );
     }
 
@@ -90,7 +90,7 @@ function renderDetails<T>(
           {camelToTitleCase(key)}{" "}
           {key === "bytes" && <span className="text-muted">(Base 64)</span>}
         </td>
-        <td className="text-lg-right">{value}</td>
+        <td className="text-lg-end">{value}</td>
       </tr>
     );
   }
@@ -102,7 +102,7 @@ function renderDetails<T>(
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={props.ix.programId} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/mango/AddPerpMarketDetailsCard.tsx b/explorer/src/components/instruction/mango/AddPerpMarketDetailsCard.tsx
index 753e1a394..d937a3bc5 100644
--- a/explorer/src/components/instruction/mango/AddPerpMarketDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/AddPerpMarketDetailsCard.tsx
@@ -24,50 +24,50 @@ export function AddPerpMarketDetailsCard(props: {
     >
       <tr>
         <td>Market index</td>
-        <td className="text-lg-right">{info.marketIndex}</td>
+        <td className="text-lg-end">{info.marketIndex}</td>
       </tr>
       <tr>
         <td>Maintenance leverage</td>
-        <td className="text-lg-right">{info.maintLeverage}</td>
+        <td className="text-lg-end">{info.maintLeverage}</td>
       </tr>
       <tr>
         <td>Initial leverage</td>
-        <td className="text-lg-right">{info.initLeverage}</td>
+        <td className="text-lg-end">{info.initLeverage}</td>
       </tr>
       <tr>
         <td>Liquidation fee</td>
-        <td className="text-lg-right">{info.liquidationFee}</td>
+        <td className="text-lg-end">{info.liquidationFee}</td>
       </tr>
       <tr>
         <td>Maker fee</td>
-        <td className="text-lg-right">{info.makerFee}</td>
+        <td className="text-lg-end">{info.makerFee}</td>
       </tr>
       <tr>
         <td>Taker fee</td>
-        <td className="text-lg-right">{info.takerFee}</td>
+        <td className="text-lg-end">{info.takerFee}</td>
       </tr>
       <tr>
         <td>Base lot size</td>
-        <td className="text-lg-right">{info.baseLotSize}</td>
+        <td className="text-lg-end">{info.baseLotSize}</td>
       </tr>
       <tr>
         <td>Quote lot size</td>
-        <td className="text-lg-right">{info.quoteLotSize}</td>
+        <td className="text-lg-end">{info.quoteLotSize}</td>
       </tr>
       <tr>
         <td>Rate</td>
-        <td className="text-lg-right">{info.rate}</td>
+        <td className="text-lg-end">{info.rate}</td>
       </tr>
       <tr>
         <td>Max depth bps</td>
-        <td className="text-lg-right">{info.maxDepthBps}</td>
+        <td className="text-lg-end">{info.maxDepthBps}</td>
       </tr>
       <tr>
         <td>
           MNGO per{" "}
           {moment.duration(info.targetPeriodLength, "seconds").humanize()}
         </td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.mngoPerPeriod} {}
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/mango/AddSpotMarketDetailsCard.tsx b/explorer/src/components/instruction/mango/AddSpotMarketDetailsCard.tsx
index cc38ccca8..eba9a85fb 100644
--- a/explorer/src/components/instruction/mango/AddSpotMarketDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/AddSpotMarketDetailsCard.tsx
@@ -24,38 +24,38 @@ export function AddSpotMarketDetailsCard(props: {
       {spotMarketFromIndex(ix, info.marketIndex) !== "UNKNOWN" && (
         <tr>
           <td>Market</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {spotMarketFromIndex(ix, info.marketIndex)}
           </td>
         </tr>
       )}
       <tr>
         <td>Market index</td>
-        <td className="text-lg-right">{info.marketIndex}</td>
+        <td className="text-lg-end">{info.marketIndex}</td>
       </tr>
       <tr>
         <td>Maint leverage</td>
-        <td className="text-lg-right">{info.maintLeverage}</td>
+        <td className="text-lg-end">{info.maintLeverage}</td>
       </tr>
       <tr>
         <td>Init leverage</td>
-        <td className="text-lg-right">{info.initLeverage}</td>
+        <td className="text-lg-end">{info.initLeverage}</td>
       </tr>
       <tr>
         <td>Liquidation fee</td>
-        <td className="text-lg-right">{info.liquidationFee}</td>
+        <td className="text-lg-end">{info.liquidationFee}</td>
       </tr>
       <tr>
         <td>Optimal util</td>
-        <td className="text-lg-right">{info.optimalUtil}</td>
+        <td className="text-lg-end">{info.optimalUtil}</td>
       </tr>
       <tr>
         <td>Optimal rate</td>
-        <td className="text-lg-right">{info.optimalRate}</td>
+        <td className="text-lg-end">{info.optimalRate}</td>
       </tr>
       <tr>
         <td>Max rate</td>
-        <td className="text-lg-right">{info.maxRate}</td>
+        <td className="text-lg-end">{info.maxRate}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/mango/CancelPerpOrderDetailsCard.tsx b/explorer/src/components/instruction/mango/CancelPerpOrderDetailsCard.tsx
index 5b7877f9d..5ad726279 100644
--- a/explorer/src/components/instruction/mango/CancelPerpOrderDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/CancelPerpOrderDetailsCard.tsx
@@ -38,7 +38,7 @@ export function CancelPerpOrderDetailsCard(props: {
       {mangoPerpMarketConfig !== undefined && (
         <tr>
           <td>Perp market</td>
-          <td className="text-lg-right">{mangoPerpMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
         </tr>
       )}
 
@@ -51,7 +51,7 @@ export function CancelPerpOrderDetailsCard(props: {
 
       <tr>
         <td>Order Id</td>
-        <td className="text-lg-right">{info.orderId}</td>
+        <td className="text-lg-end">{info.orderId}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/mango/CancelSpotOrderDetailsCard.tsx b/explorer/src/components/instruction/mango/CancelSpotOrderDetailsCard.tsx
index a09b92134..249d29071 100644
--- a/explorer/src/components/instruction/mango/CancelSpotOrderDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/CancelSpotOrderDetailsCard.tsx
@@ -38,7 +38,7 @@ export function CancelSpotOrderDetailsCard(props: {
       {mangoSpotMarketConfig !== undefined && (
         <tr>
           <td>Spot market</td>
-          <td className="text-lg-right">{mangoSpotMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
         </tr>
       )}
 
@@ -51,7 +51,7 @@ export function CancelSpotOrderDetailsCard(props: {
 
       <tr>
         <td>Order Id</td>
-        <td className="text-lg-right">{info.orderId}</td>
+        <td className="text-lg-end">{info.orderId}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/mango/ChangePerpMarketParamsDetailsCard.tsx b/explorer/src/components/instruction/mango/ChangePerpMarketParamsDetailsCard.tsx
index 98f991e19..d31d26fd1 100644
--- a/explorer/src/components/instruction/mango/ChangePerpMarketParamsDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/ChangePerpMarketParamsDetailsCard.tsx
@@ -59,25 +59,25 @@ export function ChangePerpMarketParamsDetailsCard(props: {
       {info.initLeverageOption && (
         <tr>
           <td>Init leverage</td>
-          <td className="text-lg-right">{info.initLeverage}</td>
+          <td className="text-lg-end">{info.initLeverage}</td>
         </tr>
       )}
       {info.liquidationFeeOption && (
         <tr>
           <td>Liquidation fee</td>
-          <td className="text-lg-right">{info.liquidationFee}</td>
+          <td className="text-lg-end">{info.liquidationFee}</td>
         </tr>
       )}
       {info.maintLeverageOption && (
         <tr>
           <td>Maint leverage</td>
-          <td className="text-lg-right">{info.maintLeverage}</td>
+          <td className="text-lg-end">{info.maintLeverage}</td>
         </tr>
       )}
       {info.makerFeeOption && (
         <tr>
           <td>Maker fee</td>
-          <td className="text-lg-right">{info.makerFee}</td>
+          <td className="text-lg-end">{info.makerFee}</td>
         </tr>
       )}
       {info.mngoPerPeriodOption && (
@@ -87,7 +87,7 @@ export function ChangePerpMarketParamsDetailsCard(props: {
             {targetPeriodLength !== null &&
               moment.duration(targetPeriodLength, "seconds").humanize()}
           </td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {info.mngoPerPeriod} {}
           </td>
         </tr>
@@ -96,25 +96,25 @@ export function ChangePerpMarketParamsDetailsCard(props: {
       {info.maxDepthBpsOption && (
         <tr>
           <td>Max depth bps</td>
-          <td className="text-lg-right">{info.maxDepthBps}</td>
+          <td className="text-lg-end">{info.maxDepthBps}</td>
         </tr>
       )}
       {info.rateOption && (
         <tr>
           <td>Rate</td>
-          <td className="text-lg-right">{info.rate}</td>
+          <td className="text-lg-end">{info.rate}</td>
         </tr>
       )}
       {info.takerFeeOption && (
         <tr>
           <td>Taker fee</td>
-          <td className="text-lg-right">{info.takerFee}</td>
+          <td className="text-lg-end">{info.takerFee}</td>
         </tr>
       )}
       {info.targetPeriodLengthOption && (
         <tr>
           <td>Target period length</td>
-          <td className="text-lg-right">{info.targetPeriodLength}</td>
+          <td className="text-lg-end">{info.targetPeriodLength}</td>
         </tr>
       )}
     </InstructionCard>
diff --git a/explorer/src/components/instruction/mango/ConsumeEventsDetailsCard.tsx b/explorer/src/components/instruction/mango/ConsumeEventsDetailsCard.tsx
index d74a6ed85..c5269d9e4 100644
--- a/explorer/src/components/instruction/mango/ConsumeEventsDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/ConsumeEventsDetailsCard.tsx
@@ -30,7 +30,7 @@ export function ConsumeEventsDetailsCard(props: {
       {mangoPerpMarketConfig !== undefined && (
         <tr>
           <td>Perp market</td>
-          <td className="text-lg-right">{mangoPerpMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
         </tr>
       )}
 
diff --git a/explorer/src/components/instruction/mango/GenericPerpMngoDetailsCard.tsx b/explorer/src/components/instruction/mango/GenericPerpMngoDetailsCard.tsx
index e42817d01..672e67de8 100644
--- a/explorer/src/components/instruction/mango/GenericPerpMngoDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/GenericPerpMngoDetailsCard.tsx
@@ -49,7 +49,7 @@ export function GenericPerpMngoDetailsCard(props: {
       {mangoPerpMarketConfig !== undefined && (
         <tr>
           <td>Perp market</td>
-          <td className="text-lg-right">{mangoPerpMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
         </tr>
       )}
 
diff --git a/explorer/src/components/instruction/mango/GenericSpotMngoDetailsCard.tsx b/explorer/src/components/instruction/mango/GenericSpotMngoDetailsCard.tsx
index 5a65caf21..6fe3bd9cf 100644
--- a/explorer/src/components/instruction/mango/GenericSpotMngoDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/GenericSpotMngoDetailsCard.tsx
@@ -49,7 +49,7 @@ export function GenericSpotMngoDetailsCard(props: {
       {mangoSpotMarketConfig !== undefined && (
         <tr>
           <td>Spot market</td>
-          <td className="text-lg-right">{mangoSpotMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
         </tr>
       )}
 
diff --git a/explorer/src/components/instruction/mango/PlacePerpOrderDetailsCard.tsx b/explorer/src/components/instruction/mango/PlacePerpOrderDetailsCard.tsx
index b52d993b2..5ff84451f 100644
--- a/explorer/src/components/instruction/mango/PlacePerpOrderDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/PlacePerpOrderDetailsCard.tsx
@@ -73,7 +73,7 @@ export function PlacePerpOrderDetailsCard(props: {
       {mangoPerpMarketConfig !== undefined && (
         <tr>
           <td>Perp market</td>
-          <td className="text-lg-right">{mangoPerpMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
         </tr>
       )}
 
@@ -87,30 +87,30 @@ export function PlacePerpOrderDetailsCard(props: {
       {info.clientOrderId !== "0" && (
         <tr>
           <td>Client order Id</td>
-          <td className="text-lg-right">{info.clientOrderId}</td>
+          <td className="text-lg-end">{info.clientOrderId}</td>
         </tr>
       )}
 
       <tr>
         <td>Order type</td>
-        <td className="text-lg-right">{info.orderType}</td>
+        <td className="text-lg-end">{info.orderType}</td>
       </tr>
       <tr>
         <td>side</td>
-        <td className="text-lg-right">{info.side}</td>
+        <td className="text-lg-end">{info.side}</td>
       </tr>
 
       {orderLotDetails !== null && (
         <tr>
           <td>price</td>
-          <td className="text-lg-right">{orderLotDetails?.price} USDC</td>
+          <td className="text-lg-end">{orderLotDetails?.price} USDC</td>
         </tr>
       )}
 
       {orderLotDetails !== null && (
         <tr>
           <td>quantity</td>
-          <td className="text-lg-right">{orderLotDetails?.size}</td>
+          <td className="text-lg-end">{orderLotDetails?.size}</td>
         </tr>
       )}
     </InstructionCard>
diff --git a/explorer/src/components/instruction/mango/PlaceSpotOrderDetailsCard.tsx b/explorer/src/components/instruction/mango/PlaceSpotOrderDetailsCard.tsx
index 2d5b52f4a..1c43f6a31 100644
--- a/explorer/src/components/instruction/mango/PlaceSpotOrderDetailsCard.tsx
+++ b/explorer/src/components/instruction/mango/PlaceSpotOrderDetailsCard.tsx
@@ -83,7 +83,7 @@ export function PlaceSpotOrderDetailsCard(props: {
       {mangoSpotMarketConfig !== undefined && (
         <tr>
           <td>Spot market</td>
-          <td className="text-lg-right">{mangoSpotMarketConfig.name}</td>
+          <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
         </tr>
       )}
 
@@ -96,33 +96,33 @@ export function PlaceSpotOrderDetailsCard(props: {
 
       <tr>
         <td>Order type</td>
-        <td className="text-lg-right">{info.orderType}</td>
+        <td className="text-lg-end">{info.orderType}</td>
       </tr>
 
       {info.clientId !== "0" && (
         <tr>
           <td>Client Id</td>
-          <td className="text-lg-right">{info.clientId}</td>
+          <td className="text-lg-end">{info.clientId}</td>
         </tr>
       )}
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.side}</td>
+        <td className="text-lg-end">{info.side}</td>
       </tr>
 
       {orderLotDetails !== null && (
         <tr>
           <td>Limit price</td>
           {/* todo fix price */}
-          <td className="text-lg-right">{orderLotDetails?.price} USDC</td>
+          <td className="text-lg-end">{orderLotDetails?.price} USDC</td>
         </tr>
       )}
 
       {orderLotDetails !== null && (
         <tr>
           <td>Size</td>
-          <td className="text-lg-right">{orderLotDetails?.size}</td>
+          <td className="text-lg-end">{orderLotDetails?.size}</td>
         </tr>
       )}
     </InstructionCard>
diff --git a/explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx b/explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx
index 2f9f6707f..d782338f3 100644
--- a/explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx
+++ b/explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx
@@ -25,35 +25,35 @@ export function CancelOrderByClientIdDetailsCard(props: {
     >
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Client Id</td>
-        <td className="text-lg-right">{info.data.clientId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx b/explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx
index 066aadf2c..93cb3b663 100644
--- a/explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx
+++ b/explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx
@@ -25,49 +25,49 @@ export function CancelOrderByClientIdV2DetailsCard(props: {
     >
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Client Id</td>
-        <td className="text-lg-right">{info.data.clientId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/CancelOrderDetails.tsx b/explorer/src/components/instruction/serum/CancelOrderDetails.tsx
index 1086d1112..fcb244843 100644
--- a/explorer/src/components/instruction/serum/CancelOrderDetails.tsx
+++ b/explorer/src/components/instruction/serum/CancelOrderDetails.tsx
@@ -25,52 +25,52 @@ export function CancelOrderDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.data.side}</td>
+        <td className="text-lg-end">{info.data.side}</td>
       </tr>
 
       <tr>
         <td>Open Orders Slot</td>
-        <td className="text-lg-right">{info.data.openOrdersSlot}</td>
+        <td className="text-lg-end">{info.data.openOrdersSlot}</td>
       </tr>
 
       <tr>
         <td>Order Id</td>
-        <td className="text-lg-right">{info.data.orderId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.orderId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/CancelOrderV2Details.tsx b/explorer/src/components/instruction/serum/CancelOrderV2Details.tsx
index 5340ad480..1a5f49f37 100644
--- a/explorer/src/components/instruction/serum/CancelOrderV2Details.tsx
+++ b/explorer/src/components/instruction/serum/CancelOrderV2Details.tsx
@@ -25,61 +25,61 @@ export function CancelOrderV2DetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.data.side}</td>
+        <td className="text-lg-end">{info.data.side}</td>
       </tr>
 
       <tr>
         <td>Order Id</td>
-        <td className="text-lg-right">{info.data.orderId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.orderId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx b/explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx
index 9e879826f..23485eb9b 100644
--- a/explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx
+++ b/explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx
@@ -25,35 +25,35 @@ export function CloseOpenOrdersDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Rent Receiver</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.rentReceiver} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx b/explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx
index 3b1f23438..2b6e76403 100644
--- a/explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx
+++ b/explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx
@@ -25,28 +25,28 @@ export function ConsumeEventsDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Accounts</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.accounts.openOrders.map((account, index) => {
             return <Address pubkey={account} key={index} alignRight link />;
           })}
@@ -55,7 +55,7 @@ export function ConsumeEventsDetailsCard(props: {
 
       <tr>
         <td>Limit</td>
-        <td className="text-lg-right">{info.data.limit}</td>
+        <td className="text-lg-end">{info.data.limit}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx b/explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx
index 9366cf6c7..42abd6c79 100644
--- a/explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx
+++ b/explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx
@@ -25,35 +25,35 @@ export function ConsumeEventsPermissionedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Crank Authority</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.crankAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Accounts</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.accounts.openOrders.map((account, index) => {
             return <Address pubkey={account} key={index} alignRight link />;
           })}
@@ -62,7 +62,7 @@ export function ConsumeEventsPermissionedDetailsCard(props: {
 
       <tr>
         <td>Limit</td>
-        <td className="text-lg-right">{info.data.limit}</td>
+        <td className="text-lg-end">{info.data.limit}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/DisableMarketDetails.tsx b/explorer/src/components/instruction/serum/DisableMarketDetails.tsx
index 920614cfe..5d49223f7 100644
--- a/explorer/src/components/instruction/serum/DisableMarketDetails.tsx
+++ b/explorer/src/components/instruction/serum/DisableMarketDetails.tsx
@@ -25,21 +25,21 @@ export function DisableMarketDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Disable Authority</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.disableAuthority} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx b/explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx
index a2c898c17..daae90c3b 100644
--- a/explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx
+++ b/explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx
@@ -25,28 +25,28 @@ export function InitOpenOrdersDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
@@ -54,7 +54,7 @@ export function InitOpenOrdersDetailsCard(props: {
       {info.accounts.openOrdersMarketAuthority && (
         <tr>
           <td>Open Orders Market Authority</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address
               pubkey={info.accounts.openOrdersMarketAuthority}
               alignRight
diff --git a/explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx b/explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx
index be9d124fe..2e965f8a5 100644
--- a/explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx
+++ b/explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx
@@ -25,99 +25,99 @@ export function InitializeMarketDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseMint} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Mint</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteMint} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Lot Size</td>
-        <td className="text-lg-right">{info.data.baseLotSize.toString(10)}</td>
+        <td className="text-lg-end">{info.data.baseLotSize.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Quote Lot Size</td>
-        <td className="text-lg-right">{info.data.quoteLotSize.toString(10)}</td>
+        <td className="text-lg-end">{info.data.quoteLotSize.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Fee Rate Bps</td>
-        <td className="text-lg-right">{info.data.feeRateBps}</td>
+        <td className="text-lg-end">{info.data.feeRateBps}</td>
       </tr>
 
       <tr>
         <td>Quote Dust Threshold</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.data.quoteDustThreshold.toString(10)}
         </td>
       </tr>
 
       <tr>
         <td>Vault Signer Nonce</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.data.vaultSignerNonce.toString(10)}
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx b/explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx
index 02975ca4b..63c841b0a 100644
--- a/explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx
+++ b/explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx
@@ -25,49 +25,49 @@ export function MatchOrdersDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Limit</td>
-        <td className="text-lg-right">{info.data.limit}</td>
+        <td className="text-lg-end">{info.data.limit}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx b/explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx
index 105321078..8244ad82e 100644
--- a/explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx
+++ b/explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx
@@ -25,83 +25,83 @@ export function NewOrderDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Payer</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.payer} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.data.side}</td>
+        <td className="text-lg-end">{info.data.side}</td>
       </tr>
 
       <tr>
         <td>Order Type</td>
-        <td className="text-lg-right">{info.data.orderType}</td>
+        <td className="text-lg-end">{info.data.orderType}</td>
       </tr>
 
       <tr>
         <td>Limit Price</td>
-        <td className="text-lg-right">{info.data.limitPrice.toString(10)}</td>
+        <td className="text-lg-end">{info.data.limitPrice.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Max Quantity</td>
-        <td className="text-lg-right">{info.data.maxQuantity.toString(10)}</td>
+        <td className="text-lg-end">{info.data.maxQuantity.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Client Id</td>
-        <td className="text-lg-right">{info.data.clientId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx b/explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx
index a6b243afd..f00ef3a5c 100644
--- a/explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx
+++ b/explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx
@@ -25,77 +25,77 @@ export function NewOrderV3DetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Request Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.requestQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Payer</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.payer} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteVault} alignRight link />
         </td>
       </tr>
@@ -103,7 +103,7 @@ export function NewOrderV3DetailsCard(props: {
       {info.accounts.feeDiscountPubkey && (
         <tr>
           <td>Fee Discount</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={info.accounts.feeDiscountPubkey} alignRight link />
           </td>
         </tr>
@@ -111,41 +111,41 @@ export function NewOrderV3DetailsCard(props: {
 
       <tr>
         <td>Side</td>
-        <td className="text-lg-right">{info.data.side.toUpperCase()}</td>
+        <td className="text-lg-end">{info.data.side.toUpperCase()}</td>
       </tr>
 
       <tr>
         <td>Order Type</td>
-        <td className="text-lg-right">{info.data.orderType}</td>
+        <td className="text-lg-end">{info.data.orderType}</td>
       </tr>
 
       <tr>
         <td>Limit Price</td>
-        <td className="text-lg-right">{info.data.limitPrice.toString(10)}</td>
+        <td className="text-lg-end">{info.data.limitPrice.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Max Base Quantity</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.data.maxBaseQuantity.toString(10)}
         </td>
       </tr>
 
       <tr>
         <td>Max Quote Quantity</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           {info.data.maxQuoteQuantity.toString(10)}
         </td>
       </tr>
 
       <tr>
         <td>Client Id</td>
-        <td className="text-lg-right">{info.data.clientId.toString(10)}</td>
+        <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
       </tr>
 
       <tr>
         <td>Match Iteration Limit</td>
-        <td className="text-lg-right">{info.data.limit}</td>
+        <td className="text-lg-end">{info.data.limit}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/PruneDetails.tsx b/explorer/src/components/instruction/serum/PruneDetails.tsx
index a95c65a5b..89507f93e 100644
--- a/explorer/src/components/instruction/serum/PruneDetails.tsx
+++ b/explorer/src/components/instruction/serum/PruneDetails.tsx
@@ -25,63 +25,63 @@ export function PruneDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Bids</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.bids} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Asks</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.asks} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Prune Authority</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.pruneAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Event Queue</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.eventQueue} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Iteration Limit</td>
-        <td className="text-lg-right">{info.data.limit}</td>
+        <td className="text-lg-end">{info.data.limit}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx b/explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx
index 22bd90557..c4c73fa50 100644
--- a/explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx
+++ b/explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx
@@ -25,63 +25,63 @@ export function SettleFundsDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrders} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Open Orders Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Wallet</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.baseWallet} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Wallet</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteWallet} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Vault Signer</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.vaultSigner} alignRight link />
         </td>
       </tr>
@@ -89,7 +89,7 @@ export function SettleFundsDetailsCard(props: {
       {info.accounts.referrerQuoteWallet && (
         <tr>
           <td>Referrer Quote Wallet</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address
               pubkey={info.accounts.referrerQuoteWallet}
               alignRight
diff --git a/explorer/src/components/instruction/serum/SweepFeesDetails.tsx b/explorer/src/components/instruction/serum/SweepFeesDetails.tsx
index 9b3dd99d6..3051f7698 100644
--- a/explorer/src/components/instruction/serum/SweepFeesDetails.tsx
+++ b/explorer/src/components/instruction/serum/SweepFeesDetails.tsx
@@ -25,28 +25,28 @@ export function SweepFeesDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Market</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.market} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Quote Vault</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteVault} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Fee Sweeping Authority</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address
             pubkey={info.accounts.feeSweepingAuthority}
             alignRight
@@ -57,14 +57,14 @@ export function SweepFeesDetailsCard(props: {
 
       <tr>
         <td>Fee Receiver</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.quoteFeeReceiver} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Vault Signer</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.accounts.vaultSigner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx b/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
index 23b80de9b..aa6900ae9 100644
--- a/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
@@ -29,35 +29,35 @@ export function AuthorizeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.authority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.newAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Type</td>
-        <td className="text-lg-right">{info.authorityType}</td>
+        <td className="text-lg-end">{info.authorityType}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx b/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
index d51e38957..4e40a5655 100644
--- a/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
@@ -29,21 +29,21 @@ export function DeactivateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAuthority} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx b/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
index 50daf63fb..1d6f46346 100644
--- a/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
@@ -29,28 +29,28 @@ export function DelegateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Delegated Vote Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.voteAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAuthority} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx b/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
index 316153e32..4282db74f 100644
--- a/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
@@ -32,28 +32,28 @@ export function InitializeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.authorized.staker} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.authorized.withdrawer} alignRight link />
         </td>
       </tr>
@@ -61,7 +61,7 @@ export function InitializeDetailsCard(props: {
       {info.lockup.epoch > 0 && (
         <tr>
           <td>Lockup Expiry Epoch</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Epoch epoch={info.lockup.epoch} link />
           </td>
         </tr>
@@ -70,7 +70,7 @@ export function InitializeDetailsCard(props: {
       {info.lockup.unixTimestamp > 0 && (
         <tr>
           <td>Lockup Expiry Timestamp</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {displayTimestampUtc(info.lockup.unixTimestamp * 1000)}
           </td>
         </tr>
@@ -79,7 +79,7 @@ export function InitializeDetailsCard(props: {
       {!info.lockup.custodian.equals(SystemProgram.programId) && (
         <tr>
           <td>Lockup Custodian Address</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Address pubkey={info.lockup.custodian} alignRight link />
           </td>
         </tr>
diff --git a/explorer/src/components/instruction/stake/MergeDetailsCard.tsx b/explorer/src/components/instruction/stake/MergeDetailsCard.tsx
index 2a4d3d246..97762e708 100644
--- a/explorer/src/components/instruction/stake/MergeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/MergeDetailsCard.tsx
@@ -29,42 +29,42 @@ export function MergeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Source</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.source} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Destination</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.destination} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Clock Sysvar</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.clockSysvar} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake History Sysvar</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeHistorySysvar} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/stake/SplitDetailsCard.tsx b/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
index f99ce3064..53960df5a 100644
--- a/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
@@ -30,35 +30,35 @@ export function SplitDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.newSplitAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Split Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx b/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
index a537b8374..ac778d3ae 100644
--- a/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
@@ -30,35 +30,35 @@ export function WithdrawDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.stakeAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.withdrawAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.destination} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/AllocateDetailsCard.tsx b/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
index a20b8a135..aacb68b82 100644
--- a/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
@@ -29,21 +29,21 @@ export function AllocateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Allocated Data Size</td>
-        <td className="text-lg-right">{info.space} byte(s)</td>
+        <td className="text-lg-end">{info.space} byte(s)</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
index dcecebf2e..3f5a7ed21 100644
--- a/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
@@ -30,28 +30,28 @@ export function AllocateWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.base} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Copyable text={info.seed}>
             <code>{info.seed}</code>
           </Copyable>
@@ -60,12 +60,12 @@ export function AllocateWithSeedDetailsCard(props: {
 
       <tr>
         <td>Allocated Data Size</td>
-        <td className="text-lg-right">{info.space} byte(s)</td>
+        <td className="text-lg-end">{info.space} byte(s)</td>
       </tr>
 
       <tr>
         <td>Assigned Program Id</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.owner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/AssignDetailsCard.tsx b/explorer/src/components/instruction/system/AssignDetailsCard.tsx
index 75df5d3e1..b0c33f353 100644
--- a/explorer/src/components/instruction/system/AssignDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignDetailsCard.tsx
@@ -29,21 +29,21 @@ export function AssignDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Assigned Program Id</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.owner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
index 51a6c2fbb..ba338e4cc 100644
--- a/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
@@ -30,28 +30,28 @@ export function AssignWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.account} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.base} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Copyable text={info.seed}>
             <code>{info.seed}</code>
           </Copyable>
@@ -60,7 +60,7 @@ export function AssignWithSeedDetailsCard(props: {
 
       <tr>
         <td>Assigned Program Id</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.owner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/CreateDetailsCard.tsx b/explorer/src/components/instruction/system/CreateDetailsCard.tsx
index a0fd1b871..bf1a5fba8 100644
--- a/explorer/src/components/instruction/system/CreateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateDetailsCard.tsx
@@ -30,40 +30,40 @@ export function CreateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.source} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.newAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
 
       <tr>
         <td>Allocated Data Size</td>
-        <td className="text-lg-right">{info.space} byte(s)</td>
+        <td className="text-lg-end">{info.space} byte(s)</td>
       </tr>
 
       <tr>
         <td>Assigned Program Id</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.owner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
index 9ed25fd68..0d9976f93 100644
--- a/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
@@ -31,35 +31,35 @@ export function CreateWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.source} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.newAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.base} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Copyable text={info.seed}>
             <code>{info.seed}</code>
           </Copyable>
@@ -68,19 +68,19 @@ export function CreateWithSeedDetailsCard(props: {
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
 
       <tr>
         <td>Allocated Data Size</td>
-        <td className="text-lg-right">{info.space} byte(s)</td>
+        <td className="text-lg-end">{info.space} byte(s)</td>
       </tr>
 
       <tr>
         <td>Assigned Program Id</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.owner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx b/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
index c2b1d790f..6ea6ddbc8 100644
--- a/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
@@ -29,21 +29,21 @@ export function NonceAdvanceDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAuthority} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx b/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
index d5fe01b52..650697f9d 100644
--- a/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
@@ -29,28 +29,28 @@ export function NonceAuthorizeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.newAuthorized} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx b/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
index 03de00efe..9e1dc4b3c 100644
--- a/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
@@ -29,21 +29,21 @@ export function NonceInitializeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAuthority} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx b/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
index 616f3b714..ab023f4cc 100644
--- a/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
@@ -30,35 +30,35 @@ export function NonceWithdrawDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAccount} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.nonceAuthority} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.destination} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/TransferDetailsCard.tsx b/explorer/src/components/instruction/system/TransferDetailsCard.tsx
index 8b8696442..aefa89af5 100644
--- a/explorer/src/components/instruction/system/TransferDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/TransferDetailsCard.tsx
@@ -30,28 +30,28 @@ export function TransferDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.source} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.destination} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx
index 51353bd63..25f657f89 100644
--- a/explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx
@@ -31,42 +31,42 @@ export function TransferWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.source} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Destination Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.destination} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.sourceBase} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <SolBalance lamports={info.lamports} />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Copyable text={info.sourceSeed}>
             <code>{info.sourceSeed}</code>
           </Copyable>
@@ -75,7 +75,7 @@ export function TransferWithSeedDetailsCard(props: {
 
       <tr>
         <td>Source Owner</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={info.sourceOwner} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/components/instruction/token/TokenDetailsCard.tsx b/explorer/src/components/instruction/token/TokenDetailsCard.tsx
index fd18df1cd..56d0e589c 100644
--- a/explorer/src/components/instruction/token/TokenDetailsCard.tsx
+++ b/explorer/src/components/instruction/token/TokenDetailsCard.tsx
@@ -124,7 +124,7 @@ function TokenInstruction(props: InfoProps) {
     attributes.push(
       <tr key={mintAddress}>
         <td>Token</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={new PublicKey(mintAddress)} alignRight link />
         </td>
       </tr>
@@ -144,7 +144,7 @@ function TokenInstruction(props: InfoProps) {
         attributes.push(
           <tr key={key + i}>
             <td>{label}</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <Address pubkey={publicKey} alignRight link />
             </td>
           </tr>
@@ -187,7 +187,7 @@ function TokenInstruction(props: InfoProps) {
     attributes.push(
       <tr key={key}>
         <td>{label}</td>
-        <td className="text-lg-right">{tag}</td>
+        <td className="text-lg-end">{tag}</td>
       </tr>
     );
   }
diff --git a/explorer/src/components/instruction/vote/VoteDetailsCard.tsx b/explorer/src/components/instruction/vote/VoteDetailsCard.tsx
index bec776165..f55374159 100644
--- a/explorer/src/components/instruction/vote/VoteDetailsCard.tsx
+++ b/explorer/src/components/instruction/vote/VoteDetailsCard.tsx
@@ -73,8 +73,8 @@ function renderDetails<T>(
       attributes.push(
         <tr key="vote-hash">
           <td>Vote Hash</td>
-          <td className="text-lg-right">
-            <pre className="d-inline-block text-left mb-0">{value.hash}</pre>
+          <td className="text-lg-end">
+            <pre className="d-inline-block text-start mb-0">{value.hash}</pre>
           </td>
         </tr>
       );
@@ -83,7 +83,7 @@ function renderDetails<T>(
         attributes.push(
           <tr key="timestamp">
             <td>Timestamp</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               {displayTimestamp(value.timestamp * 1000)}
             </td>
           </tr>
@@ -93,8 +93,8 @@ function renderDetails<T>(
       attributes.push(
         <tr key="vote-slots">
           <td>Slots</td>
-          <td className="text-lg-right text-monospace">
-            <pre className="d-inline-block text-left mb-0">
+          <td className="text-lg-end font-monospace">
+            <pre className="d-inline-block text-start mb-0">
               {value.slots.join("\n")}
             </pre>
           </td>
@@ -104,7 +104,7 @@ function renderDetails<T>(
       attributes.push(
         <tr key={key}>
           <td>{camelToTitleCase(key)} </td>
-          <td className="text-lg-right">{value}</td>
+          <td className="text-lg-end">{value}</td>
         </tr>
       );
     }
@@ -117,7 +117,7 @@ function renderDetails<T>(
     >
       <tr>
         <td>Program</td>
-        <td className="text-lg-right">
+        <td className="text-lg-end">
           <Address pubkey={props.ix.programId} alignRight link />
         </td>
       </tr>
diff --git a/explorer/src/fonts/feather/fonts/Feather.svg b/explorer/src/fonts/feather/Feather.svg
similarity index 100%
rename from explorer/src/fonts/feather/fonts/Feather.svg
rename to explorer/src/fonts/feather/Feather.svg
diff --git a/explorer/src/fonts/feather/fonts/Feather.ttf b/explorer/src/fonts/feather/Feather.ttf
similarity index 100%
rename from explorer/src/fonts/feather/fonts/Feather.ttf
rename to explorer/src/fonts/feather/Feather.ttf
diff --git a/explorer/src/fonts/feather/fonts/Feather.woff b/explorer/src/fonts/feather/Feather.woff
similarity index 100%
rename from explorer/src/fonts/feather/fonts/Feather.woff
rename to explorer/src/fonts/feather/Feather.woff
diff --git a/explorer/src/fonts/feather/feather.css b/explorer/src/fonts/feather/feather.css
index 9492cdeb3..5cd53bcb3 100644
--- a/explorer/src/fonts/feather/feather.css
+++ b/explorer/src/fonts/feather/feather.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "Feather";
-  src: url("fonts/Feather.ttf?sdxovp") format("truetype"),
-    url("fonts/Feather.woff?sdxovp") format("woff"),
-    url("fonts/Feather.svg?sdxovp#Feather") format("svg");
+  src: url("Feather.ttf?sdxovp") format("truetype"),
+    url("Feather.woff?sdxovp") format("woff"),
+    url("Feather.svg?sdxovp#Feather") format("svg");
   font-weight: normal;
   font-style: normal;
 }
diff --git a/explorer/src/pages/AccountDetailsPage.tsx b/explorer/src/pages/AccountDetailsPage.tsx
index 19a809fa4..23aa7ac32 100644
--- a/explorer/src/pages/AccountDetailsPage.tsx
+++ b/explorer/src/pages/AccountDetailsPage.tsx
@@ -196,7 +196,7 @@ export function AccountHeader({
           </div>
         </div>
 
-        <div className="col mb-3 ml-n3 ml-md-n2">
+        <div className="col mb-3 ms-n3 ms-md-n2">
           <h6 className="header-pretitle">Token</h6>
           <h2 className="header-title">
             {tokenDetails?.name || "Unknown Token"}
diff --git a/explorer/src/pages/ClusterStatsPage.tsx b/explorer/src/pages/ClusterStatsPage.tsx
index d36d772d8..1f8dd5d5c 100644
--- a/explorer/src/pages/ClusterStatsPage.tsx
+++ b/explorer/src/pages/ClusterStatsPage.tsx
@@ -146,7 +146,7 @@ function StakingComponent() {
               <>
                 <h4>
                   Price{" "}
-                  <span className="ml-2 badge badge-primary rank">
+                  <span className="ms-2 badge bg-primary rank">
                     Rank #{solanaInfo.market_cap_rank}
                   </span>
                 </h4>
@@ -237,14 +237,14 @@ function StatsCardBody() {
     <TableCardBody>
       <tr>
         <td className="w-100">Slot</td>
-        <td className="text-lg-right text-monospace">
+        <td className="text-lg-end font-monospace">
           <Slot slot={absoluteSlot} link />
         </td>
       </tr>
       {blockHeight !== undefined && (
         <tr>
           <td className="w-100">Block height</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             <Slot slot={blockHeight} />
           </td>
         </tr>
@@ -252,32 +252,32 @@ function StatsCardBody() {
       {blockTime && (
         <tr>
           <td className="w-100">Cluster time</td>
-          <td className="text-lg-right text-monospace">
+          <td className="text-lg-end font-monospace">
             {displayTimestampUtc(blockTime)}
           </td>
         </tr>
       )}
       <tr>
         <td className="w-100">Slot time (1min average)</td>
-        <td className="text-lg-right text-monospace">{averageSlotTime}ms</td>
+        <td className="text-lg-end font-monospace">{averageSlotTime}ms</td>
       </tr>
       <tr>
         <td className="w-100">Slot time (1hr average)</td>
-        <td className="text-lg-right text-monospace">{hourlySlotTime}ms</td>
+        <td className="text-lg-end font-monospace">{hourlySlotTime}ms</td>
       </tr>
       <tr>
         <td className="w-100">Epoch</td>
-        <td className="text-lg-right text-monospace">
+        <td className="text-lg-end font-monospace">
           <Epoch epoch={epochInfo.epoch} link />
         </td>
       </tr>
       <tr>
         <td className="w-100">Epoch progress</td>
-        <td className="text-lg-right text-monospace">{epochProgress}</td>
+        <td className="text-lg-end font-monospace">{epochProgress}</td>
       </tr>
       <tr>
         <td className="w-100">Epoch time remaining (approx.)</td>
-        <td className="text-lg-right text-monospace">~{epochTimeRemaining}</td>
+        <td className="text-lg-end font-monospace">~{epochTimeRemaining}</td>
       </tr>
     </TableCardBody>
   );
@@ -309,7 +309,7 @@ export function StatsNotReady({ error }: { error: boolean }) {
             retry();
           }}
         >
-          <span className="fe fe-refresh-cw mr-2"></span>
+          <span className="fe fe-refresh-cw me-2"></span>
           Try Again
         </button>
       </div>
@@ -318,7 +318,7 @@ export function StatsNotReady({ error }: { error: boolean }) {
 
   return (
     <div className="card-body text-center">
-      <span className="spinner-grow spinner-grow-sm mr-2"></span>
+      <span className="spinner-grow spinner-grow-sm me-2"></span>
       Loading
     </div>
   );
diff --git a/explorer/src/pages/EpochDetailsPage.tsx b/explorer/src/pages/EpochDetailsPage.tsx
index 630f52138..450e5a659 100644
--- a/explorer/src/pages/EpochDetailsPage.tsx
+++ b/explorer/src/pages/EpochDetailsPage.tsx
@@ -34,14 +34,15 @@ export function EpochDetailsPage({ epoch }: Props) {
 
 type OverviewProps = { epoch: number };
 function EpochOverviewCard({ epoch }: OverviewProps) {
-  const { status, epochSchedule, epochInfo } = useCluster();
+  const { status, clusterInfo } = useCluster();
 
   const epochState = useEpoch(epoch);
   const fetchEpoch = useFetchEpoch();
 
   // Fetch extra epoch info on load
   React.useEffect(() => {
-    if (!epochSchedule || !epochInfo) return;
+    if (!clusterInfo) return;
+    const { epochInfo, epochSchedule } = clusterInfo;
     const currentEpoch = epochInfo.epoch;
     if (
       epoch <= currentEpoch &&
@@ -49,12 +50,13 @@ function EpochOverviewCard({ epoch }: OverviewProps) {
       status === ClusterStatus.Connected
     )
       fetchEpoch(epoch, currentEpoch, epochSchedule);
-  }, [epoch, epochState, epochInfo, epochSchedule, status, fetchEpoch]);
+  }, [epoch, epochState, clusterInfo, status, fetchEpoch]);
 
-  if (!epochSchedule || !epochInfo) {
+  if (!clusterInfo) {
     return <LoadingCard message="Connecting to cluster" />;
   }
 
+  const { epochInfo, epochSchedule } = clusterInfo;
   const currentEpoch = epochInfo.epoch;
   if (epoch > currentEpoch) {
     return <ErrorCard text={`Epoch ${epoch} hasn't started yet`} />;
@@ -79,21 +81,21 @@ function EpochOverviewCard({ epoch }: OverviewProps) {
         <TableCardBody>
           <tr>
             <td className="w-100">Epoch</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Epoch epoch={epoch} />
             </td>
           </tr>
           {epoch > 0 && (
             <tr>
               <td className="w-100">Previous Epoch</td>
-              <td className="text-lg-right text-monospace">
+              <td className="text-lg-end font-monospace">
                 <Epoch epoch={epoch - 1} link />
               </td>
             </tr>
           )}
           <tr>
             <td className="w-100">Next Epoch</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               {currentEpoch > epoch ? (
                 <Epoch epoch={epoch + 1} link />
               ) : (
@@ -103,21 +105,21 @@ function EpochOverviewCard({ epoch }: OverviewProps) {
           </tr>
           <tr>
             <td className="w-100">First Slot</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Slot slot={firstSlot} />
             </td>
           </tr>
           <tr>
             <td className="w-100">Last Slot</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Slot slot={lastSlot} />
             </td>
           </tr>
           {epochState.data.firstTimestamp && (
             <tr>
               <td className="w-100">First Block Timestamp</td>
-              <td className="text-lg-right">
-                <span className="text-monospace">
+              <td className="text-lg-end">
+                <span className="font-monospace">
                   {displayTimestampUtc(
                     epochState.data.firstTimestamp * 1000,
                     true
@@ -128,13 +130,13 @@ function EpochOverviewCard({ epoch }: OverviewProps) {
           )}
           <tr>
             <td className="w-100">First Block</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               <Slot slot={epochState.data.firstBlock} link />
             </td>
           </tr>
           <tr>
             <td className="w-100">Last Block</td>
-            <td className="text-lg-right text-monospace">
+            <td className="text-lg-end font-monospace">
               {epochState.data.lastBlock !== undefined ? (
                 <Slot slot={epochState.data.lastBlock} link />
               ) : (
@@ -145,8 +147,8 @@ function EpochOverviewCard({ epoch }: OverviewProps) {
           {epochState.data.lastTimestamp && (
             <tr>
               <td className="w-100">Last Block Timestamp</td>
-              <td className="text-lg-right">
-                <span className="text-monospace">
+              <td className="text-lg-end">
+                <span className="font-monospace">
                   {displayTimestampUtc(
                     epochState.data.lastTimestamp * 1000,
                     true
diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
index bb25c2706..c1dc9652f 100644
--- a/explorer/src/pages/TransactionDetailsPage.tsx
+++ b/explorer/src/pages/TransactionDetailsPage.tsx
@@ -119,7 +119,7 @@ function StatusCard({
   const fetchStatus = useFetchTransactionStatus();
   const status = useTransactionStatus(signature);
   const details = useTransactionDetails(signature);
-  const { firstAvailableBlock, status: clusterStatus } = useCluster();
+  const { clusterInfo, status: clusterStatus } = useCluster();
 
   // Fetch transaction on load
   React.useEffect(() => {
@@ -153,12 +153,12 @@ function StatusCard({
       <ErrorCard retry={() => fetchStatus(signature)} text="Fetch Failed" />
     );
   } else if (!status.data?.info) {
-    if (firstAvailableBlock !== undefined && firstAvailableBlock > 1) {
+    if (clusterInfo && clusterInfo.firstAvailableBlock > 0) {
       return (
         <ErrorCard
           retry={() => fetchStatus(signature)}
           text="Not Found"
-          subtext={`Note: Transactions processed before block ${firstAvailableBlock} are not available at this time`}
+          subtext={`Note: Transactions processed before block ${clusterInfo.firstAvailableBlock} are not available at this time`}
         />
       );
     }
@@ -177,7 +177,7 @@ function StatusCard({
 
     return (
       <h3 className="mb-0">
-        <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
+        <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
       </h3>
     );
   };
@@ -207,9 +207,9 @@ function StatusCard({
         <h3 className="card-header-title">Overview</h3>
         <Link
           to={clusterPath(`/tx/${signature}/inspect`)}
-          className="btn btn-white btn-sm mr-2"
+          className="btn btn-white btn-sm me-2"
         >
-          <span className="fe fe-settings mr-2"></span>
+          <span className="fe fe-settings me-2"></span>
           Inspect
         </Link>
         {autoRefresh === AutoRefresh.Active ? (
@@ -219,7 +219,7 @@ function StatusCard({
             className="btn btn-white btn-sm"
             onClick={() => fetchStatus(signature)}
           >
-            <span className="fe fe-refresh-cw mr-2"></span>
+            <span className="fe fe-refresh-cw me-2"></span>
             Refresh
           </button>
         )}
@@ -228,21 +228,21 @@ function StatusCard({
       <TableCardBody>
         <tr>
           <td>Signature</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Signature signature={signature} alignRight />
           </td>
         </tr>
 
         <tr>
           <td>Result</td>
-          <td className="text-lg-right">{renderResult()}</td>
+          <td className="text-lg-end">{renderResult()}</td>
         </tr>
 
         <tr>
           <td>Timestamp</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             {info.timestamp !== "unavailable" ? (
-              <span className="text-monospace">
+              <span className="font-monospace">
                 {displayTimestamp(info.timestamp * 1000)}
               </span>
             ) : (
@@ -259,19 +259,19 @@ function StatusCard({
 
         <tr>
           <td>Confirmation Status</td>
-          <td className="text-lg-right text-uppercase">
+          <td className="text-lg-end text-uppercase">
             {info.confirmationStatus || "Unknown"}
           </td>
         </tr>
 
         <tr>
           <td>Confirmations</td>
-          <td className="text-lg-right text-uppercase">{info.confirmations}</td>
+          <td className="text-lg-end text-uppercase">{info.confirmations}</td>
         </tr>
 
         <tr>
           <td>Block</td>
-          <td className="text-lg-right">
+          <td className="text-lg-end">
             <Slot slot={info.slot} link />
           </td>
         </tr>
@@ -287,14 +287,14 @@ function StatusCard({
                 </InfoTooltip>
               )}
             </td>
-            <td className="text-lg-right">{blockhash}</td>
+            <td className="text-lg-end">{blockhash}</td>
           </tr>
         )}
 
         {fee && (
           <tr>
             <td>Fee (SOL)</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <SolBalance lamports={fee} />
             </td>
           </tr>
@@ -379,16 +379,16 @@ function AccountsCard({ signature }: SignatureProps) {
         </td>
         <td>
           {index === 0 && (
-            <span className="badge badge-soft-info mr-1">Fee Payer</span>
+            <span className="badge bg-info-soft me-1">Fee Payer</span>
           )}
           {account.writable && (
-            <span className="badge badge-soft-info mr-1">Writable</span>
+            <span className="badge bg-info-soft me-1">Writable</span>
           )}
           {account.signer && (
-            <span className="badge badge-soft-info mr-1">Signer</span>
+            <span className="badge bg-info-soft me-1">Signer</span>
           )}
           {message.instructions.find((ix) => ix.programId.equals(pubkey)) && (
-            <span className="badge badge-soft-info mr-1">Program</span>
+            <span className="badge bg-info-soft me-1">Program</span>
           )}
         </td>
       </tr>
diff --git a/explorer/src/pages/inspector/AccountsCard.tsx b/explorer/src/pages/inspector/AccountsCard.tsx
index b8ddbea52..53702ea3f 100644
--- a/explorer/src/pages/inspector/AccountsCard.tsx
+++ b/explorer/src/pages/inspector/AccountsCard.tsx
@@ -104,16 +104,14 @@ function AccountRow({
         <div className="d-flex align-items-start flex-column">
           Account #{accountIndex + 1}
           <span className="mt-1">
-            {signer && (
-              <span className="badge badge-soft-info mr-1">Signer</span>
-            )}
+            {signer && <span className="badge bg-info-soft me-1">Signer</span>}
             {!readOnly && (
-              <span className="badge badge-soft-danger">Writable</span>
+              <span className="badge bg-danger-soft">Writable</span>
             )}
           </span>
         </div>
       </td>
-      <td className="text-lg-right">
+      <td className="text-lg-end">
         <AddressWithContext pubkey={publicKey} />
       </td>
     </tr>
diff --git a/explorer/src/pages/inspector/AddressWithContext.tsx b/explorer/src/pages/inspector/AddressWithContext.tsx
index 39b869994..2cf027ef1 100644
--- a/explorer/src/pages/inspector/AddressWithContext.tsx
+++ b/explorer/src/pages/inspector/AddressWithContext.tsx
@@ -73,7 +73,7 @@ function AccountInfo({
   if (!info?.data)
     return (
       <span className="text-muted">
-        <span className="spinner-grow spinner-grow-sm mr-2"></span>
+        <span className="spinner-grow spinner-grow-sm me-2"></span>
         Loading
       </span>
     );
diff --git a/explorer/src/pages/inspector/InspectorPage.tsx b/explorer/src/pages/inspector/InspectorPage.tsx
index aac5c5542..a8ba07a79 100644
--- a/explorer/src/pages/inspector/InspectorPage.tsx
+++ b/explorer/src/pages/inspector/InspectorPage.tsx
@@ -319,7 +319,7 @@ function OverviewCard({
         <TableCardBody>
           <tr>
             <td>Serialized Size</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <div className="d-flex align-items-end flex-column">
                 {size} bytes
                 <span
@@ -334,7 +334,7 @@ function OverviewCard({
           </tr>
           <tr>
             <td>Fees</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <div className="d-flex align-items-end flex-column">
                 <SolBalance lamports={fee} />
                 <span className="text-muted">
@@ -348,12 +348,12 @@ function OverviewCard({
               <div className="d-flex align-items-start flex-column">
                 Fee payer
                 <span className="mt-1">
-                  <span className="badge badge-soft-info mr-2">Signer</span>
-                  <span className="badge badge-soft-danger mr-2">Writable</span>
+                  <span className="badge bg-info-soft me-2">Signer</span>
+                  <span className="badge bg-danger-soft me-2">Writable</span>
                 </span>
               </div>
             </td>
-            <td className="text-right">
+            <td className="text-end">
               {message.accountKeys.length === 0 ? (
                 "No Fee Payer"
               ) : (
diff --git a/explorer/src/pages/inspector/InstructionsSection.tsx b/explorer/src/pages/inspector/InstructionsSection.tsx
index f790bc08e..68a502f1f 100644
--- a/explorer/src/pages/inspector/InstructionsSection.tsx
+++ b/explorer/src/pages/inspector/InstructionsSection.tsx
@@ -35,7 +35,7 @@ function InstructionCard({
     <div className="card" id={`instruction-index-${index + 1}`} key={index}>
       <div className={`card-header${!expanded ? " border-bottom-none" : ""}`}>
         <h3 className="card-header-title mb-0 d-flex align-items-center">
-          <span className={`badge badge-soft-info mr-2`}>#{index + 1}</span>
+          <span className={`badge bg-info-soft me-2`}>#{index + 1}</span>
           {programName} Instruction
         </h3>
 
@@ -52,7 +52,7 @@ function InstructionCard({
         <TableCardBody>
           <tr>
             <td>Program</td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <AddressWithContext
                 pubkey={message.accountKeys[ix.programIdIndex]}
                 validator={programValidator}
@@ -67,19 +67,17 @@ function InstructionCard({
                     Account #{index + 1}
                     <span className="mt-1">
                       {accountIndex < message.header.numRequiredSignatures && (
-                        <span className="badge badge-soft-info mr-2">
-                          Signer
-                        </span>
+                        <span className="badge bg-info-soft me-2">Signer</span>
                       )}
                       {message.isAccountWritable(accountIndex) && (
-                        <span className="badge badge-soft-danger mr-2">
+                        <span className="badge bg-danger-soft me-2">
                           Writable
                         </span>
                       )}
                     </span>
                   </div>
                 </td>
-                <td className="text-lg-right">
+                <td className="text-lg-end">
                   <AddressWithContext
                     pubkey={message.accountKeys[accountIndex]}
                   />
@@ -91,7 +89,7 @@ function InstructionCard({
             <td>
               Instruction Data <span className="text-muted">(Hex)</span>
             </td>
-            <td className="text-lg-right">
+            <td className="text-lg-end">
               <HexData raw={bs58.decode(ix.data)} />
             </td>
           </tr>
diff --git a/explorer/src/pages/inspector/RawInputCard.tsx b/explorer/src/pages/inspector/RawInputCard.tsx
index a4830618c..6e725f87a 100644
--- a/explorer/src/pages/inspector/RawInputCard.tsx
+++ b/explorer/src/pages/inspector/RawInputCard.tsx
@@ -139,14 +139,14 @@ export function RawInput({
           rows={rows}
           onInput={onInput}
           ref={rawTransactionInput}
-          className="form-control form-control-flush form-control-auto text-monospace"
+          className="form-control form-control-flush form-control-auto font-monospace"
           placeholder={placeholder}
         ></textarea>
         <div className="row align-items-center">
           <div className="col d-flex align-items-center">
             {error && (
               <>
-                <span className="text-warning small mr-2">
+                <span className="text-warning small me-2">
                   <i className="fe fe-alert-circle"></i>
                 </span>
 
diff --git a/explorer/src/pages/inspector/SignaturesCard.tsx b/explorer/src/pages/inspector/SignaturesCard.tsx
index a14fa83d5..6ba22cdef 100644
--- a/explorer/src/pages/inspector/SignaturesCard.tsx
+++ b/explorer/src/pages/inspector/SignaturesCard.tsx
@@ -89,7 +89,7 @@ function SignatureRow({
   return (
     <tr>
       <td>
-        <span className="badge badge-soft-info mr-1">{index + 1}</span>
+        <span className="badge bg-info-soft me-1">{index + 1}</span>
       </td>
       <td>
         {signature ? (
@@ -105,14 +105,14 @@ function SignatureRow({
         {verified === undefined ? (
           "N/A"
         ) : verified ? (
-          <span className="badge badge-soft-success mr-1">Valid</span>
+          <span className="badge bg-success-soft me-1">Valid</span>
         ) : (
-          <span className="badge badge-soft-warning mr-1">Invalid</span>
+          <span className="badge bg-warning-soft me-1">Invalid</span>
         )}
       </td>
       <td>
         {index === 0 && (
-          <span className="badge badge-soft-info mr-1">Fee Payer</span>
+          <span className="badge bg-info-soft me-1">Fee Payer</span>
         )}
       </td>
     </tr>
diff --git a/explorer/src/pages/inspector/SimulatorCard.tsx b/explorer/src/pages/inspector/SimulatorCard.tsx
index ddeb5666d..33bbe5e6b 100644
--- a/explorer/src/pages/inspector/SimulatorCard.tsx
+++ b/explorer/src/pages/inspector/SimulatorCard.tsx
@@ -22,7 +22,7 @@ export function SimulatorCard({ message }: { message: Message }) {
           <h3 className="card-header-title">Transaction Simulation</h3>
         </div>
         <div className="card-body text-center">
-          <span className="spinner-grow spinner-grow-sm mr-2"></span>
+          <span className="spinner-grow spinner-grow-sm me-2"></span>
           Simulating
         </div>
       </div>
@@ -39,7 +39,7 @@ export function SimulatorCard({ message }: { message: Message }) {
         {simulationError ? (
           <div className="card-body">
             Failed to run simulation:
-            <span className="text-warning ml-2">{simulationError}</span>
+            <span className="text-warning ms-2">{simulationError}</span>
           </div>
         ) : (
           <div className="card-body text-muted">
diff --git a/explorer/src/providers/cluster.tsx b/explorer/src/providers/cluster.tsx
index b443198d2..46c16996f 100644
--- a/explorer/src/providers/cluster.tsx
+++ b/explorer/src/providers/cluster.tsx
@@ -74,23 +74,21 @@ export function clusterUrl(cluster: Cluster, customUrl: string): string {
 }
 
 export const DEFAULT_CLUSTER = Cluster.MainnetBeta;
+const DEFAULT_CUSTOM_URL = "http://localhost:8899";
 
+type Action = State;
 interface State {
   cluster: Cluster;
   customUrl: string;
-  firstAvailableBlock?: number;
-  epochSchedule?: EpochSchedule;
-  epochInfo?: EpochInfo;
+  clusterInfo?: ClusterInfo;
   status: ClusterStatus;
 }
 
-interface Action {
-  status: ClusterStatus;
-  cluster: Cluster;
-  customUrl: string;
-  firstAvailableBlock?: number;
-  epochSchedule?: EpochSchedule;
-  epochInfo?: EpochInfo;
+interface ClusterInfo {
+  firstAvailableBlock: number;
+  epochSchedule: EpochSchedule;
+  epochInfo: EpochInfo;
+  genesisHash: string;
 }
 
 type Dispatch = (action: Action) => void;
@@ -138,7 +136,7 @@ type ClusterProviderProps = { children: React.ReactNode };
 export function ClusterProvider({ children }: ClusterProviderProps) {
   const [state, dispatch] = React.useReducer(clusterReducer, {
     cluster: DEFAULT_CLUSTER,
-    customUrl: "",
+    customUrl: DEFAULT_CUSTOM_URL,
     status: ClusterStatus.Connecting,
   });
   const [showModal, setShowModal] = React.useState(false);
@@ -199,16 +197,24 @@ async function updateCluster(
 
   try {
     const connection = new Connection(clusterUrl(cluster, customUrl));
-    const firstAvailableBlock = await connection.getFirstAvailableBlock();
-    const epochSchedule = await connection.getEpochSchedule();
-    const epochInfo = await connection.getEpochInfo();
+    const [firstAvailableBlock, epochSchedule, epochInfo, genesisHash] =
+      await Promise.all([
+        connection.getFirstAvailableBlock(),
+        connection.getEpochSchedule(),
+        connection.getEpochInfo(),
+        connection.getGenesisHash(),
+      ]);
+
     dispatch({
       status: ClusterStatus.Connected,
       cluster,
       customUrl,
-      firstAvailableBlock,
-      epochSchedule,
-      epochInfo,
+      clusterInfo: {
+        firstAvailableBlock,
+        genesisHash,
+        epochSchedule,
+        epochInfo,
+      },
     });
   } catch (error) {
     if (cluster !== Cluster.Custom) {
diff --git a/explorer/src/scss/_solana-variables.scss b/explorer/src/scss/_solana-variables.scss
index f3bdd5ed2..136ef5aca 100644
--- a/explorer/src/scss/_solana-variables.scss
+++ b/explorer/src/scss/_solana-variables.scss
@@ -7,10 +7,6 @@
 // Remove the "//" to comment it in and see it in action!
 $body-bg: #f9fdfc !default;
 
-// Dashkit scss needs to know where img masks are stored
-$path-to-img: "../../img/dashkit" !default;
-$path-to-fonts: "../../fonts" !default;
-
 // Colors
 
 $white: #ffffff !default;
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 51cfcb55a..836551cde 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -11,6 +11,15 @@ pre {
   color: $black;
 }
 
+.badge.bg-primary, .btn-primary {
+  color: $gray-900;
+}
+
+.table > :not(:first-child) {
+  // Bootstrap v5.1 added this and dashkit doesn't handle it yet
+  border-top: 0px solid currentColor;
+}
+
 ul.log-messages {
   padding: 0.66rem;
   margin: 1rem;
@@ -61,12 +70,12 @@ ul.log-messages {
   }
 }
 
-.modal-backdrop {
+.modal-backdrop.disable-pointer-events {
   pointer-events: none;
 }
 
-.modal.show {
-  display: block;
+.offcanvas {
+  visibility: visible;
 }
 
 .c-pointer {
@@ -125,7 +134,7 @@ h4.ix-pill {
   border-radius: $border-radius;
   margin-bottom: 2rem;
   margin-left: -5px;
-  background-color: theme-color-level(info, $badge-soft-bg-level);
+  background-color: shift-color($info, $bg-soft-scale);
 }
 
 h4.slot-pill {
@@ -133,7 +142,7 @@ h4.slot-pill {
   padding: 5px;
   border-radius: $border-radius;
   margin-left: -5px;
-  background-color: theme-color-level(primary, $badge-soft-bg-level);
+  background-color: shift-color($primary, $bg-soft-scale);
   margin-bottom: 1.5rem;
 }
 
@@ -222,7 +231,7 @@ h4.slot-pill {
 
 .address-truncate,
 .signature-truncate {
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     max-width: 180px;
     display: inline-block;
     vertical-align: bottom;
diff --git a/explorer/src/scss/dashkit/_alert.scss b/explorer/src/scss/dashkit/_alert.scss
index b11f7278d..fb572306c 100644
--- a/explorer/src/scss/dashkit/_alert.scss
+++ b/explorer/src/scss/dashkit/_alert.scss
@@ -3,7 +3,7 @@
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -19,10 +19,22 @@
 
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), color-yiq(theme-color-level($color, $alert-bg-level)));
-    .close,
+    @include alert-variant(shift-color($value, $alert-bg-scale), shift-color($value, $alert-border-scale), color-contrast(shift-color($value, $alert-bg-scale)));
+
+    // Divider
+    hr {
+      background-color: darken(shift-color($value, $alert-border-scale), 5%);
+    }
+
+    // Close
+    .btn-close {
+      padding: calc(#{$alert-padding-y} + #{$btn-close-padding-y}) $alert-padding-x;
+      background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{color-contrast(shift-color($value, $alert-bg-scale))}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>"));
+    }
+
+    // Link
     .alert-link {
-      color: color-yiq(theme-color-level($color, $alert-bg-level));
+      color: color-contrast(shift-color($value, $alert-bg-scale));
     }
   }
 }
diff --git a/explorer/src/scss/dashkit/_avatar.scss b/explorer/src/scss/dashkit/_avatar.scss
index 59e9083b8..c5920511f 100644
--- a/explorer/src/scss/dashkit/_avatar.scss
+++ b/explorer/src/scss/dashkit/_avatar.scss
@@ -3,6 +3,8 @@
 // Dashkit component
 //
 
+@use 'sass:math';
+
 // General
 
 .avatar {
@@ -10,7 +12,7 @@
   display: inline-block;
   width: $avatar-size-base;
   height: $avatar-size-base;
-  font-size: $avatar-size-base / 3;
+  font-size: math.div($avatar-size-base, 3);
 
   // Loads mask images so they don't lag on hover
 
@@ -29,7 +31,7 @@
 .avatar-img {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 }
 
 .avatar-title {
@@ -79,36 +81,36 @@
 .avatar-xs {
   width: $avatar-size-xs;
   height: $avatar-size-xs;
-  font-size: $avatar-size-xs / 3;
+  font-size: math.div($avatar-size-xs, 3);
 }
 
 .avatar-sm {
   width: $avatar-size-sm;
   height: $avatar-size-sm;
-  font-size: $avatar-size-sm / 3;
+  font-size: math.div($avatar-size-sm, 3);
 }
 
 .avatar-lg {
   width: $avatar-size-lg;
   height: $avatar-size-lg;
-  font-size: $avatar-size-lg / 3;
+  font-size: math.div($avatar-size-lg, 3);
 }
 
 .avatar-xl {
   width: $avatar-size-xl;
   height: $avatar-size-xl;
-  font-size: $avatar-size-xl / 3;
+  font-size: math.div($avatar-size-xl, 3);
 }
 
 .avatar-xxl {
   width: $avatar-size-xl;
   height: $avatar-size-xl;
-  font-size: $avatar-size-xl / 3;
+  font-size: math.div($avatar-size-xl, 3);
 
   @include media-breakpoint-up(md) {
     width: $avatar-size-xxl;
     height: $avatar-size-xxl;
-    font-size: $avatar-size-xxl / 3;
+    font-size: math.div($avatar-size-xxl, 3);
   }
 }
 
@@ -116,27 +118,27 @@
 // Ratio
 
 .avatar.avatar-4by3 {
-  width: $avatar-size-base * 4 / 3;
+  width: math.div($avatar-size-base * 4, 3);
 }
 
 .avatar-xs.avatar-4by3 {
-  width: $avatar-size-xs * 4 / 3;
+  width: math.div($avatar-size-xs * 4, 3);
 }
 
 .avatar-sm.avatar-4by3 {
-  width: $avatar-size-sm * 4 / 3;
+  width: math.div($avatar-size-sm * 4, 3);
 }
 
 .avatar-lg.avatar-4by3 {
-  width: $avatar-size-lg * 4 / 3;
+  width: math.div($avatar-size-lg * 4, 3);
 }
 
 .avatar-xl.avatar-4by3 {
-  width: $avatar-size-xl * 4 / 3;
+  width: math.div($avatar-size-xl * 4, 3);
 }
 
 .avatar-xxl.avatar-4by3 {
-  width: $avatar-size-xxl * 4 / 3;
+  width: math.div($avatar-size-xxl * 4, 3);
 }
 
 
@@ -148,27 +150,27 @@
   // Shift every next avatar left
 
   .avatar + .avatar {
-    margin-left: -$avatar-size-base / 4;
+    margin-left: math.div(-$avatar-size-base, 4);
   }
 
   .avatar-xs + .avatar-xs {
-    margin-left: -$avatar-size-xs / 4;
+    margin-left: math.div(-$avatar-size-xs, 4);
   }
 
   .avatar-sm + .avatar-sm {
-    margin-left: -$avatar-size-sm / 4;
+    margin-left: math.div(-$avatar-size-sm, 4);
   }
 
   .avatar-lg + .avatar-lg {
-    margin-left: -$avatar-size-lg / 4;
+    margin-left: math.div(-$avatar-size-lg, 4);
   }
 
   .avatar-xl + .avatar-xl {
-    margin-left: -$avatar-size-xl / 4;
+    margin-left: math.div(-$avatar-size-xl, 4);
   }
 
   .avatar-xxl + .avatar-xxl {
-    margin-left: -$avatar-size-xxl / 4;
+    margin-left: math.div(-$avatar-size-xxl, 4);
   }
 
   // Add some spacing between avatars
diff --git a/explorer/src/scss/dashkit/_badge.scss b/explorer/src/scss/dashkit/_badge.scss
index 3e72fd6c6..d3e646e3d 100644
--- a/explorer/src/scss/dashkit/_badge.scss
+++ b/explorer/src/scss/dashkit/_badge.scss
@@ -1,9 +1,9 @@
-//
+// 
 // badge.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -16,13 +16,31 @@
   top: -2px;
 }
 
+// Pills
+
+.badge.rounded-pill {
+  padding-right: $border-radius-pill-padding-x;
+  padding-left: $border-radius-pill-padding-x;
+}
+
+// Text color
 //
-// Dashkit =====================================
+// Replacing the default white text color
+
+@each $color, $value in $theme-colors {
+  .badge.bg-#{$color} {
+    color: color-contrast($value);
+  }
+}
+
+
+// 
+// Theme =====================================
 //
 
 // Creates the "soft" badge variant
 @each $color, $value in $theme-colors {
-  .badge-soft-#{$color} {
-    @include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value);
+  .badge.bg-#{$color}-soft {
+    @include badge-variant-soft(shift-color($value, $bg-soft-scale), $value);
   }
 }
diff --git a/explorer/src/scss/dashkit/_breadcrumb.scss b/explorer/src/scss/dashkit/_breadcrumb.scss
index 70bd9694b..55f58af63 100644
--- a/explorer/src/scss/dashkit/_breadcrumb.scss
+++ b/explorer/src/scss/dashkit/_breadcrumb.scss
@@ -1,29 +1,26 @@
-//
+// 
 // breadcrumb.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
 .breadcrumb-item {
-  // The separator between breadcrumbs
+
   + .breadcrumb-item::before {
-    width: .3rem;
-    height: .6rem;
-    margin-right: $breadcrumb-item-padding;
-    -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
-    mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    background: $breadcrumb-divider-color;
+    content: "\e930";
+    align-self: center;
+    font-size: .8rem;
+    font-family: "Feather";
+    color: $breadcrumb-divider-color;
   }
 }
 
 
-//
-// Dashkit =====================================
+// 
+// Theme =====================================
 //
 
 // Small
diff --git a/explorer/src/scss/dashkit/_buttons.scss b/explorer/src/scss/dashkit/_buttons.scss
index 196475147..88bf16d8d 100644
--- a/explorer/src/scss/dashkit/_buttons.scss
+++ b/explorer/src/scss/dashkit/_buttons.scss
@@ -1,11 +1,25 @@
-//
+// 
 // buttons.scss
 // Extended from Bootstrap
 //
 
+// 
+// Bootstrap Overrides =====================================
+//
+
+// Sizing
+
+.btn-lg {
+  line-height: $btn-line-height-lg;
+}
+
+.btn-sm {
+  line-height: $btn-line-height-sm;
+}
+
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 // Button white
@@ -13,16 +27,18 @@
 .btn-white {
   border-color: $gray-300;
 
-  @include hover-focus {
+  &:hover, &:focus {
     background-color: $gray-100;
     border-color: $gray-400;
   }
 }
 
 .btn-group-toggle .btn-white:not(:disabled):not(.disabled):active,
-.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active {
+.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active,
+.btn-group-toggle .btn-check:checked + .btn-white {
   background-color: $input-bg;
   border-color: $input-focus-border-color;
+  box-shadow: none;
   color: $primary;
 }
 
@@ -32,10 +48,25 @@
 }
 
 
+// Button white 20
+
+.btn-white-20 {
+  background-color: rgba($white, .2);
+  border-color: transparent;
+  color: $white;
+
+  &:hover, &:focus {
+    background-color: rgba($white, .12);
+    border-color: transparent;
+    color: $white;
+  }
+}
+
+
 // Button outline secondary
 
 .btn-outline-secondary {
-  &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){
+  &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]) {
     border-color: $gray-400;
   }
 }
@@ -51,18 +82,11 @@
   padding-right: 0;
   border-radius: 50%;
 }
+
 .btn-rounded-circle.btn-lg {
   width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2);
 }
+
 .btn-rounded-circle.btn-sm {
   width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2);
 }
-
-
-// Button group
-//
-// Prevent buttons from jittering on hover
-
-.btn-group .btn + .btn {
-  margin-left: 0;
-}
diff --git a/explorer/src/scss/dashkit/_card.scss b/explorer/src/scss/dashkit/_card.scss
index 6cd86c14a..0d3579991 100644
--- a/explorer/src/scss/dashkit/_card.scss
+++ b/explorer/src/scss/dashkit/_card.scss
@@ -1,9 +1,11 @@
-//
+// 
 // card.scss
 // Extended from Bootstrap
 //
 
-//
+@use 'sass:math';
+
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -24,23 +26,21 @@
   flex-direction: row;
   align-items: center;
   height: $card-header-height;
-  padding-top: $card-spacer-y / 2;
-  padding-bottom: $card-spacer-y / 2;
+  padding-top: math.div($card-spacer-y, 2);
+  padding-bottom: math.div($card-spacer-y, 2);
 
   > *:first-child {
     flex: 1;
   }
 }
 
-// Title
-
-.card-title {
-  margin-bottom: $card-spacer-y / 2;
+.card-header + .card-footer {
+  border-top-width: 0;
 }
 
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 // Card header
@@ -53,8 +53,8 @@
 }
 
 .card-header-tabs {
-  margin-top: -$card-spacer-y / 2;
-  margin-bottom: -$card-spacer-y / 2;
+  margin-top: math.div(-$card-spacer-y, 2);
+  margin-bottom: math.div(-$card-spacer-y, 2);
   margin-left: 0;
   margin-right: 0;
 }
@@ -64,6 +64,10 @@
   padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
 }
 
+.card-header-tabs .nav-link.active {
+  border-bottom-color: $primary;
+}
+
 
 // Card table
 //
@@ -122,31 +126,31 @@
   display: block !important;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: $card-spacer-y;
+  margin-bottom: 1rem;
 }
 
 .card-avatar-top {
-  margin-top: -($card-spacer-x + $avatar-size-base / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-base, 2));
 }
 
 .card-avatar-top.avatar-xs {
-  margin-top: -($card-spacer-x + $avatar-size-xs / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-xs, 2));
 }
 
 .card-avatar-top.avatar-sm {
-  margin-top: -($card-spacer-x + $avatar-size-sm / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-sm, 2));
 }
 
 .card-avatar-top.avatar-lg {
-  margin-top: -($card-spacer-x + $avatar-size-lg / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-lg, 2));
 }
 
 .card-avatar-top.avatar-xl {
-  margin-top: -($card-spacer-x + $avatar-size-xl / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-xl, 2));
 }
 
 .card-avatar-top.avatar-xxl {
-  margin-top: -($card-spacer-x + $avatar-size-xxl / 2);
+  margin-top: -($card-spacer-x + math.div($avatar-size-xxl, 2));
 }
 
 
@@ -296,3 +300,26 @@
   margin-left: $card-spacer-x;
   margin-right: $card-spacer-x;
 }
+
+
+// Card pagination
+
+.card-pagination.pagination-tabs {
+  margin-top: -$card-cap-padding-y;
+  margin-bottom: -$card-cap-padding-y;
+  border: 0;
+}
+
+.card-pagination.pagination-tabs .page-link {
+  border-top-width: 0 !important;
+}
+
+.card-pagination.pagination-tabs .active .page-link {
+  border-width: 0 0 $border-width 0 !important;
+}
+
+// Card divider 
+
+.card-divider {
+  border-color: $card-border-color;
+}
diff --git a/explorer/src/scss/dashkit/_chart.scss b/explorer/src/scss/dashkit/_chart.scss
index 57a0b6386..ac2c86cc1 100644
--- a/explorer/src/scss/dashkit/_chart.scss
+++ b/explorer/src/scss/dashkit/_chart.scss
@@ -72,7 +72,7 @@
   z-index: 0;
 }
 
-#chart-tooltip .arrow {
+#chart-tooltip .popover-arrow {
   top: 100%;
   left: 50%;
   transform: translateX(-50%) translateX(-.5rem);
diff --git a/explorer/src/scss/dashkit/_checklist.scss b/explorer/src/scss/dashkit/_checklist.scss
index b8abfd842..dbd1e02ec 100644
--- a/explorer/src/scss/dashkit/_checklist.scss
+++ b/explorer/src/scss/dashkit/_checklist.scss
@@ -7,30 +7,28 @@
   outline: none;
 }
 
-.checklist-control {
-  display: flex;
-  flex-wrap: nowrap;
+.checklist .form-check {
   outline: none;
   user-select: none;
 }
 
-.checklist-control .custom-control-input:checked ~ .custom-control-caption {
-  text-decoration: line-through;
-  color: $checklist-control-checked-color;
-}
-
-.checklist-control + .checklist-control {
+.checklist .form-check + .form-check {
   margin-top: $checklist-control-spacer;
 }
 
-.checklist-control:first-child[style*="display: none"] + .checklist-control {
+.checklist .form-check:first-child[style*="display: none"] + .form-check {
   margin-top: 0;
 }
 
-.checklist-control.draggable-mirror {
+.checklist .form-check.draggable-mirror {
   z-index: $zindex-fixed;
 }
 
-.checklist-control.draggable-source--is-dragging {
+.checklist .form-check.draggable-source--is-dragging {
   opacity: .2;
 }
+
+.checklist .form-check .form-check-input:checked + .form-check-label {
+  text-decoration: line-through;
+  color: $checklist-control-checked-color;
+}
diff --git a/explorer/src/scss/dashkit/_close.scss b/explorer/src/scss/dashkit/_close.scss
index e10e2a225..15084f915 100644
--- a/explorer/src/scss/dashkit/_close.scss
+++ b/explorer/src/scss/dashkit/_close.scss
@@ -3,8 +3,6 @@
 // Extended from Bootstrap
 //
 
-// Small
-
-.close-sm {
-  font-size: $close-font-size-sm;
+.btn-close {
+  float: right;
 }
diff --git a/explorer/src/scss/dashkit/_code.scss b/explorer/src/scss/dashkit/_code.scss
deleted file mode 100644
index 3fc0ce8dd..000000000
--- a/explorer/src/scss/dashkit/_code.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// code.scss
-// Extended from Bootstrap
-//
-
-//
-// Dashkit =================================
-//
-
-// Highlight
-//
-// Hightlight.js overrides
-
-.highlight {
-  padding: 0;
-}
diff --git a/explorer/src/scss/dashkit/_comment.scss b/explorer/src/scss/dashkit/_comment.scss
index 12c80c4ab..4e7a3859f 100644
--- a/explorer/src/scss/dashkit/_comment.scss
+++ b/explorer/src/scss/dashkit/_comment.scss
@@ -31,4 +31,4 @@
 
 .comment-text:last-child {
   margin-bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_custom-forms.scss b/explorer/src/scss/dashkit/_custom-forms.scss
deleted file mode 100644
index a857244bc..000000000
--- a/explorer/src/scss/dashkit/_custom-forms.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-//
-// custom-forms.scss
-// Extended from Bootstrap
-//
-
-//
-// Bootstrap Overrides ===================================
-//
-
-// Switch
-
-.custom-switch {
-  min-height: $custom-switch-height;
-
-  .custom-control-label {
-
-    &::before {
-      top: 0;
-      height: $custom-switch-height;
-      border-radius: $custom-switch-height / 2;
-    }
-
-    &::after {
-      top: $custom-switch-spacing;
-      left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width;
-      background-color: $custom-switch-indicator-bg;
-    }
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-
-    &::after {
-      background-color: $custom-switch-indicator-active-bg;
-      transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size);
-    }
-  }
-}
diff --git a/explorer/src/scss/dashkit/_dashkit.scss b/explorer/src/scss/dashkit/_dashkit.scss
deleted file mode 100644
index 608e4b193..000000000
--- a/explorer/src/scss/dashkit/_dashkit.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// Extended Bootstrap components
-
-@import 'mixins';
-@import 'alert';
-@import 'badge';
-@import 'breadcrumb';
-@import 'buttons';
-@import 'card';
-@import 'close';
-@import 'code';
-@import 'custom-forms';
-@import 'dropdowns';
-@import 'forms';
-@import 'jumbotron';
-@import 'list-group';
-@import 'modal';
-@import 'nav';
-@import 'navbar';
-@import 'popover';
-@import 'progress';
-@import 'reboot';
-@import 'root';
-@import 'tables';
-@import 'toasts';
-@import 'type';
-@import 'utilities';
-
-// Dashkit only components
-
-@import 'avatar';
-@import 'chart';
-@import 'comment';
-@import 'checklist';
-@import 'header';
-@import 'icon';
-@import 'kanban';
-@import 'main-content';
-@import 'vendors';
diff --git a/explorer/src/scss/dashkit/_dropdowns.scss b/explorer/src/scss/dashkit/_dropdown.scss
similarity index 82%
rename from explorer/src/scss/dashkit/_dropdowns.scss
rename to explorer/src/scss/dashkit/_dropdown.scss
index 89d779ecd..8e8b25bd6 100644
--- a/explorer/src/scss/dashkit/_dropdowns.scss
+++ b/explorer/src/scss/dashkit/_dropdown.scss
@@ -1,7 +1,7 @@
 //
 // dropdowns.scss
 // Extended from Bootstrap
-//
+// 
 
 //
 // Bootstrap overrides ==================================
@@ -33,7 +33,7 @@
   }
 }
 
-.dropright > .dropdown-toggle {
+.dropend > .dropdown-toggle {
 
   &::after {
     content: '\e930';
@@ -84,7 +84,7 @@
 
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 
@@ -122,3 +122,16 @@
     overflow-y: auto;
   }
 }
+
+
+// Sizing
+
+.dropdown-menu-sm {
+  padding-top: $dropdown-padding-y-sm;
+  padding-bottom: $dropdown-padding-y-sm;
+  font-size: $dropdown-font-size-sm;
+}
+
+.dropdown-menu-sm .dropdown-item {
+  padding: $dropdown-item-padding-y-sm $dropdown-item-padding-x-sm;
+}
diff --git a/explorer/src/scss/dashkit/_forms.scss b/explorer/src/scss/dashkit/_forms.scss
index 72ce49816..9d723392b 100644
--- a/explorer/src/scss/dashkit/_forms.scss
+++ b/explorer/src/scss/dashkit/_forms.scss
@@ -1,272 +1,6 @@
-//
-// forms.scss
-// Extended from Bootstrap
-//
-
-//
-// Bootstrap Overrides ===================================
-//
-
-// Help text
-
-.form-text {
-  margin-top: 0;
-  margin-bottom: $label-margin-bottom;
-}
-
-
-// Form validation
-
-.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
-.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-  box-shadow: none;
-}
-
-
-//
-// Dashkit ===================================
-//
-
-// Form control flush
-//
-// Removes borders and paddings from inputs and text areas
-
-.form-control-flush {
-  padding-left: 0;
-  padding-right: 0;
-  border-color: transparent !important;
-  background-color: transparent !important;
-  resize: none;
-}
-
-
-// Form control auto
-//
-// Sets the height of the input to auto
-
-.form-control-auto {
-  height: auto;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-
-// Form control rounded
-//
-// Makes input border radius round
-
-.form-control-rounded {
-  border-radius: 20rem;
-}
-
-
-// Input group merge
-//
-// Makes input group text and form control visually the same element
-
-.input-group.input-group-merge {
-
-  > .form-control {
-    border-radius: $input-border-radius;
-
-    &:focus {
-      box-shadow: none;
-
-      ~ [class*="input-group"] {
-
-        > .input-group-text {
-          border-color: $input-focus-border-color;
-        }
-      }
-    }
-  }
-
-  > .form-control.is-valid ~ [class*="input-group"] > .input-group-text {
-    border-color: $success;
-  }
-
-  > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text {
-    border-color: $danger;
-  }
-
-  > .form-control-prepended {
-    padding-left: $input-padding-x / 2;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-left-width: 0;
-  }
-
-  > .form-control-appended {
-    padding-right: $input-padding-x / 2;
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    border-right-width: 0;
-  }
-
-  > .input-group-prepend {
-    order: -1; // prepend always goes first
-
-    > .input-group-text {
-      padding-right: $input-padding-x / 2;
-      border-top-left-radius: $input-border-radius;
-      border-bottom-left-radius: $input-border-radius;
-      border-right-width: 0;
-      transition: $input-transition;
-    }
-  }
-
-  > .input-group-append {
-
-    > .input-group-text {
-      padding-left: $input-padding-x / 2;
-      border-top-right-radius: $input-border-radius;
-      border-bottom-right-radius: $input-border-radius;
-      border-left-width: 0;
-      transition: $input-transition;
-    }
-  }
-}
-
-.input-group-lg.input-group-merge {
-
-  > .form-control {
-    border-radius: $input-border-radius-lg;
-  }
-
-  > .form-control-prepended {
-    padding-left: $input-padding-x-lg / 2;
-
-  }
-
-  > .form-control-appended {
-    padding-right: $input-padding-x-lg / 2;
-
-  }
-
-  > .input-group-prepend {
-
-    > .input-group-text {
-      padding-right: $input-padding-x-lg / 2;
-      border-top-left-radius: $input-border-radius-lg;
-      border-bottom-left-radius: $input-border-radius-lg;
-    }
-  }
-
-  > .input-group-append {
-
-    > .input-group-text {
-      padding-left: $input-padding-x-lg / 2;
-      border-top-right-radius: $input-border-radius-lg;
-      border-bottom-right-radius: $input-border-radius-lg;
-    }
-  }
-}
-
-.input-group-sm.input-group-merge {
-
-  > .form-control {
-    border-radius: $input-border-radius-sm;
-  }
-
-  > .form-control-prepended {
-    padding-left: $input-padding-x-sm / 2;
-
-  }
-
-  > .form-control-appended {
-    padding-right: $input-padding-x-sm / 2;
-  }
-
-  > .input-group-prepend {
-
-    > .input-group-text {
-      padding-right: $input-padding-x-sm / 2;
-      border-top-left-radius: $input-border-radius-sm;
-      border-bottom-left-radius: $input-border-radius-sm;
-    }
-  }
-
-  > .input-group-append {
-
-    > .input-group-text {
-      padding-left: $input-padding-x-sm / 2;
-      border-top-right-radius: $input-border-radius-sm;
-      border-bottom-right-radius: $input-border-radius-sm;
-    }
-  }
-}
-
-.input-group-rounded.input-group-merge {
-
-  > .form-control {
-    border-radius: 20rem;
-  }
-
-  > .input-group-prepend {
-
-    > .input-group-text {
-      border-top-left-radius: 20rem;
-      border-bottom-left-radius: 20rem;
-    }
-  }
-
-  > .input-group-append {
-
-    > .input-group-text {
-      border-top-right-radius: 20rem;
-      border-bottom-right-radius: 20rem;
-    }
-  }
-}
-
-.input-group-flush {
-
-  > .form-control {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-color: transparent !important;
-    background-color: transparent !important;
-  }
-
-  > .input-group-prepend,
-  > .input-group-append {
-
-    > .input-group-text {
-      padding: 0;
-      border-width: 0;
-      background-color: transparent;
-    }
-  }
-}
-
-
-// Font size
-
-.form-control {
-
-  &.h1, &.h2, &.h3, &.h4, &.h5 {
-    margin-bottom: 0;
-    font-weight: $headings-font-weight;
-    letter-spacing: $headings-letter-spacing;
-  }
-
-  &.h1 {
-    font-size: $h1-font-size;
-  }
-
-  &.h2 {
-    font-size: $h2-font-size;
-  }
-
-  &.h3 {
-    font-size: $h3-font-size;
-  }
-
-  &.h4 {
-    font-size: $h4-font-size;
-  }
-
-  &.h5 {
-    font-size: $h5-font-size;
-  }
-}
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-check";
+@import "forms/input-group";
+@import "forms/validation";
+@import "forms/form-group";
diff --git a/explorer/src/scss/dashkit/_header.scss b/explorer/src/scss/dashkit/_header.scss
index 5a81f18c5..7af5cc357 100644
--- a/explorer/src/scss/dashkit/_header.scss
+++ b/explorer/src/scss/dashkit/_header.scss
@@ -55,4 +55,4 @@
     padding-top: $header-spacing-y;
     padding-bottom: $header-spacing-y;
   }
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_icon.scss b/explorer/src/scss/dashkit/_icon.scss
index d823db5da..5694023f7 100644
--- a/explorer/src/scss/dashkit/_icon.scss
+++ b/explorer/src/scss/dashkit/_icon.scss
@@ -43,12 +43,4 @@
       background-color: $primary;
     }
   }
-}
-
-// Feather icons
-//
-// Fixes icon / font vertical alignment issue
-
-.fe {
-  line-height: inherit;
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_jumbotron.scss b/explorer/src/scss/dashkit/_jumbotron.scss
deleted file mode 100644
index 08259faac..000000000
--- a/explorer/src/scss/dashkit/_jumbotron.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// jumbotron.scss
-// Extended from Bootstrap
-//
-
-//
-// Bootstrap Overrides =====================================
-//
-
-.jumbotron {
-  padding: ($jumbotron-padding / 2);
-  @include media-breakpoint-up(sm) {
-    padding: $jumbotron-padding;
-  }
-}
diff --git a/explorer/src/scss/dashkit/_kanban.scss b/explorer/src/scss/dashkit/_kanban.scss
index b44bbbdae..def7d8c8f 100644
--- a/explorer/src/scss/dashkit/_kanban.scss
+++ b/explorer/src/scss/dashkit/_kanban.scss
@@ -56,13 +56,13 @@
 
 // Card
 
-.kanban-item > .card[data-toggle="modal"] {
+.kanban-item > .card[data-bs-toggle="modal"] {
   cursor: pointer;
 }
 
 
 // Add form
 
-.kanban-add-form .form-control[data-toggle="flatpickr"] {
+.kanban-add-form .form-control[data-flatpickr] {
   width: 12ch; // there is no CSS way to set input's width to auto so hardcoding this value
 }
diff --git a/explorer/src/scss/dashkit/_list-group.scss b/explorer/src/scss/dashkit/_list-group.scss
index a805105f0..831ca715f 100644
--- a/explorer/src/scss/dashkit/_list-group.scss
+++ b/explorer/src/scss/dashkit/_list-group.scss
@@ -1,9 +1,11 @@
-//
+// 
 // list-group.scss
 // Extended from Bootstrap
 //
 
-//
+@use 'sass:math';
+
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -16,7 +18,7 @@
 }
 
 
-// List group large
+// List group sizing
 
 .list-group-lg .list-group-item {
   padding-top: $list-group-item-padding-y-lg;
@@ -31,9 +33,20 @@
   padding-right: 0;
 }
 
+.list-group-flush:not(:last-child) > .list-group-item:last-child {
+  border-bottom-width: $list-group-border-width;
+}
+
+
+// List group focus
+
+.list-group-focus .list-group-item:focus .text-focus {
+  color: $link-color !important;
+}
+
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 
@@ -47,7 +60,7 @@
   content: '';
   position: absolute;
   top: $list-group-item-padding-y;
-  left: $avatar-size-sm / 2;
+  left: math.div($avatar-size-sm, 2);
   height: 100%;
   border-left: $border-width solid $border-color;
 }
diff --git a/explorer/src/scss/dashkit/_main-content.scss b/explorer/src/scss/dashkit/_main-content.scss
index db1917700..0ef29469b 100644
--- a/explorer/src/scss/dashkit/_main-content.scss
+++ b/explorer/src/scss/dashkit/_main-content.scss
@@ -3,19 +3,21 @@
 // Dashkit component
 //
 
+@use 'sass:math';
+
 // Main content
 //
 // General styles
 
 .navbar-vertical:not([style*="display: none"]) ~  .main-content,
 .navbar-vertical-sm:not([style*="display: none"]) ~  .main-content {
-
+  
   .container,
   .container-fluid {
 
     @include media-breakpoint-up(md) {
-      padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
-      padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+      padding-left: ($main-content-padding-x + math.div($grid-gutter-width, 2)) !important;
+      padding-right: ($main-content-padding-x + math.div($grid-gutter-width, 2)) !important; 
     }
   }
 }
@@ -26,20 +28,20 @@
 // Offsets the main content depending on the sidebar positioning
 
 .navbar-vertical.navbar-expand {
-
+  
   @each $breakpoint, $value in $grid-breakpoints {
     &-#{$breakpoint} {
       @include media-breakpoint-up(#{$breakpoint}) {
 
         // Left
 
-        &.fixed-left:not([style*="display: none"]) ~ .main-content {
+        &.fixed-start:not([style*="display: none"]) ~ .main-content {
           margin-left: $navbar-vertical-width;
         }
 
         // Right
 
-        &.fixed-right:not([style*="display: none"]) ~ .main-content {
+        &.fixed-end:not([style*="display: none"]) ~ .main-content {
           margin-right: $navbar-vertical-width;
         }
       }
@@ -48,23 +50,23 @@
 }
 
 .navbar-vertical-sm.navbar-expand {
-
+  
   @each $breakpoint, $value in $grid-breakpoints {
     &-#{$breakpoint} {
       @include media-breakpoint-up(#{$breakpoint}) {
 
         // Left
 
-        &.fixed-left:not([style*="display: none"]) ~ .main-content {
+        &.fixed-start:not([style*="display: none"]) ~ .main-content {
           margin-left: $navbar-vertical-width-sm;
         }
 
         // Right
 
-        &.fixed-right:not([style*="display: none"]) ~ .main-content {
+        &.fixed-end:not([style*="display: none"]) ~ .main-content {
           margin-right: $navbar-vertical-width-sm;
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_mixins.scss b/explorer/src/scss/dashkit/_mixins.scss
index c27eeb81e..cb4df8b05 100644
--- a/explorer/src/scss/dashkit/_mixins.scss
+++ b/explorer/src/scss/dashkit/_mixins.scss
@@ -1,16 +1,7 @@
-// Mixins
 //
+// Mixins
 //
 
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/badge";
-
-// Components
-// ...
-
-// Skins
-// ...
-
-// Layout
-// ...
diff --git a/explorer/src/scss/dashkit/_modal.scss b/explorer/src/scss/dashkit/_modal.scss
index c94f2062b..53598958e 100644
--- a/explorer/src/scss/dashkit/_modal.scss
+++ b/explorer/src/scss/dashkit/_modal.scss
@@ -19,68 +19,15 @@
   }
 }
 
-.modal-header .close {
+.modal-header .btn-close {
   margin: -1.5rem -1.5rem -1.5rem auto;
 }
 
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
-// Modal dialog vertical
-//
-// Creates a vertically aligned version of the modal dialog
-
-.modal-dialog-vertical {
-  height: 100%;
-  max-width: $modal-dialog-vertical-width;
-  margin: 0;
-
-  .modal-content {
-    height: inherit;
-    border-width: 0 $modal-content-border-width 0 0;
-    border-radius: 0;
-  }
-
-  .modal-header {
-    border-radius: inherit;
-  }
-
-  .modal-body {
-    height: inherit;
-    overflow-y: auto;
-  }
-}
-
-.modal.fade .modal-dialog-vertical {
-  transform: translateX(-100%);
-}
-
-.modal.show .modal-dialog-vertical {
-  transform: translateX(0);
-}
-
-
-// Positioning
-
-.modal.fixed-right {
-  padding-right: 0 !important;
-}
-
-.modal.fixed-right .modal-dialog-vertical {
-  margin-left: auto;
-}
-
-.modal.fixed-right.fade .modal-dialog-vertical {
-  transform: translateX(100%);
-}
-
-.modal.fixed-right.show .modal-dialog-vertical {
-  transform: translateX(0);
-}
-
-
 // Modal card
 
 .modal-card {
diff --git a/explorer/src/scss/dashkit/_nav.scss b/explorer/src/scss/dashkit/_nav.scss
index 0313cef6f..ef71e22b9 100644
--- a/explorer/src/scss/dashkit/_nav.scss
+++ b/explorer/src/scss/dashkit/_nav.scss
@@ -1,9 +1,11 @@
-//
+// 
 // nav.scss
 // Extended from Bootstrap
 //
 
-//
+@use 'sass:math';
+
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -22,7 +24,7 @@
     border-left-width: 0;
     border-right-width: 0;
     border-top-width: 0;
-
+    
     &:not(.active) {
       color: $gray-600;
 
@@ -49,8 +51,8 @@
 }
 
 
-//
-// Dashkit =====================================
+// 
+// Theme =====================================
 //
 
 // Nav overflow
@@ -80,11 +82,11 @@
     margin-left: $nav-tabs-sm-link-margin-x;
     margin-right: $nav-tabs-sm-link-margin-x;
   }
-
+  
   .nav-link {
     // Calculates the exact padding necessary to vertically fill the .card-header
-    padding-top: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
-    padding-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
+    padding-top: (math.div($font-size-base, $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
+    padding-bottom: (math.div($font-size-base, $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
   }
 }
 
@@ -109,4 +111,4 @@
     border-color: $primary;
     color: $white;
   }
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_navbar.scss b/explorer/src/scss/dashkit/_navbar.scss
index c248b2ef6..71a9fbbe4 100644
--- a/explorer/src/scss/dashkit/_navbar.scss
+++ b/explorer/src/scss/dashkit/_navbar.scss
@@ -3,6 +3,7 @@
 // Extended from Bootstrap
 //
 
+@use 'sass:math';
 
 //
 // Bootstrap Overrides =======================
@@ -13,6 +14,11 @@
   border-style: solid;
 }
 
+.navbar > [class*="container"] {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 
 // Navbar dark
 
@@ -26,7 +32,7 @@
 }
 
 .navbar-dark .navbar-divider {
-  border-color: $navbar-dark-divider-color;
+  background-color: $navbar-dark-divider-color;
 }
 
 .navbar-dark .navbar-user {
@@ -36,7 +42,7 @@
 .navbar-dark .navbar-user-link {
   color: $navbar-dark-color;
 
-  @include hover-focus {
+  &:hover, &:focus {
     color: $navbar-dark-hover-color;
   }
 }
@@ -61,7 +67,7 @@
         .navbar-nav .dropdown-item {
           color: $navbar-dark-color;
 
-          @include hover-focus {
+          &:hover, &:focus {
             color: $navbar-dark-hover-color;
           }
         }
@@ -95,7 +101,7 @@
 .navbar-dark.navbar-vibrant .nav-link {
   color: $navbar-vibrant-color;
 
-  @include hover-focus {
+  &:hover, &:focus {
     color: $navbar-vibrant-hover-color;
   }
 }
@@ -110,7 +116,7 @@
 }
 
 .navbar-dark.navbar-vibrant .navbar-divider {
-  border-color: $navbar-vibrant-divider-color;
+  background-color: $navbar-vibrant-divider-color;
 }
 
 .navbar-dark.navbar-vibrant .navbar-user {
@@ -120,7 +126,7 @@
 .navbar-dark.navbar-vibrant .navbar-user-link {
   color: $navbar-vibrant-color;
 
-  @include hover-focus {
+  &:hover, &:focus {
     color: $navbar-vibrant-hover-color;
   }
 }
@@ -149,7 +155,7 @@
         .navbar-nav .dropdown-item {
           color: $navbar-vibrant-color;
 
-          @include hover-focus {
+          &:hover, &:focus {
             color: $navbar-vibrant-hover-color;
           }
         }
@@ -182,7 +188,7 @@
 }
 
 .navbar-light .navbar-divider {
-  border-color: $navbar-light-divider-color;
+  background-color: $navbar-light-divider-color;
 }
 
 .navbar-light .navbar-user {
@@ -192,7 +198,7 @@
 .navbar-light .navbar-user-link {
   color: $navbar-light-color;
 
-  @include hover-focus {
+  &:hover, &:focus {
     color: $navbar-light-hover-color;
   }
 }
@@ -222,6 +228,7 @@
 // Navbar collapse
 
 .navbar-collapse {
+  width: calc(100% + #{$navbar-padding-x * 2});
   margin-left: -$navbar-padding-x;
   margin-right: -$navbar-padding-x;
   padding-left: $navbar-padding-x;
@@ -282,7 +289,7 @@
 }
 
 .navbar-nav .dropdown-menu .dropdown-menu {
-  margin-left: $dropdown-item-padding-x / 2;
+  margin-left: math.div($dropdown-item-padding-x, 2);
 }
 
 .navbar-expand {
@@ -304,7 +311,7 @@
 
 
 // Expanded
-//
+// 
 // Expanded navbar specific styles
 
 .navbar-expand {
@@ -324,6 +331,8 @@
 
         .navbar-collapse {
           flex-grow: inherit;
+          flex-basis: auto;
+          width: auto;
 
           &:before {
             display: none;
@@ -355,19 +364,6 @@
           }
         }
 
-        // Toggle dropdown on hover
-        @if ($navbar-dropdown-toggle-on-hover) {
-          .dropup, .dropright, .dropdown, .dropleft {
-
-            @include hover {
-
-              > .dropdown-menu {
-                display: block;
-              }
-            }
-          }
-        }
-
         .navbar-nav .dropdown-menu {
           border: $dropdown-border-width solid $dropdown-border-color;
         }
@@ -382,12 +378,12 @@
 
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 // Navbar fixed
 //
-// Adds special zindex to custom fixed-left and fixed-right classes
+// Adds special zindex to custom fixed-start and fixed-end classes
 
 .navbar[class*="fixed-"] {
   z-index: $zindex-fixed;
@@ -479,7 +475,7 @@
     align-items: center;
   }
 
-  .navbar-nav .nav-link[data-toggle="collapse"] {
+  .navbar-nav .nav-link[data-bs-toggle="collapse"] {
 
     &:after {
       display: block;
@@ -520,7 +516,7 @@
 
 
   // Expanded
-  //
+  // 
   // Expanded navbar specific styles
 
   &.navbar-expand {
@@ -554,12 +550,12 @@
             }
           }
 
-          &.fixed-left {
+          &.fixed-start {
             left: 0;
             border-width: 0 1px 0 0;
           }
 
-          &.fixed-right {
+          &.fixed-end {
             right: 0;
             border-width: 0 0 0 1px;
           }
@@ -569,6 +565,8 @@
             display: flex;
             flex-direction: column;
             align-items: stretch;
+            width: auto;
+            min-width: 100%;
             margin-left: -$navbar-vertical-padding-x;
             margin-right: -$navbar-vertical-padding-x;
             padding-left: $navbar-vertical-padding-x;
@@ -653,7 +651,7 @@
 .navbar-vertical-sm {
 
   // Expanded
-  //
+  // 
   // Expanded navbar specific styles
 
   &.navbar-expand {
@@ -669,8 +667,8 @@
           overflow: visible;
 
           .navbar-brand {
-            padding-top: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2 - $navbar-padding-y;
-            padding-bottom: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2;
+            padding-top: math.div($nav-link-padding-y * 2 + $font-size-base * $line-height-base, 2) - $navbar-padding-y;
+            padding-bottom: math.div($nav-link-padding-y * 2 + $font-size-base * $line-height-base, 2);
           }
 
           .navbar-brand-img {
@@ -711,7 +709,7 @@
             padding-right: $navbar-vertical-padding-x-sm;
           }
 
-          .navbar-user .dropright .dropdown-menu {
+          .navbar-user .dropend .dropdown-menu {
             top: auto;
             bottom: 0;
           }
diff --git a/explorer/src/scss/dashkit/_offcanvas.scss b/explorer/src/scss/dashkit/_offcanvas.scss
new file mode 100644
index 000000000..fefbefcf2
--- /dev/null
+++ b/explorer/src/scss/dashkit/_offcanvas.scss
@@ -0,0 +1,10 @@
+//
+// offcanvas.scss
+//
+
+// Header
+
+.offcanvas-header {
+  padding: $offcanvas-header-padding-y $offcanvas-header-padding-x;
+  border-bottom: $border-width solid $border-color;
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_pagination.scss b/explorer/src/scss/dashkit/_pagination.scss
new file mode 100644
index 000000000..84911edbf
--- /dev/null
+++ b/explorer/src/scss/dashkit/_pagination.scss
@@ -0,0 +1,72 @@
+//
+// pagination.scss
+// Extended from Bootstrap
+//
+
+// 
+// Bootstrap Overrides =====================================
+//
+
+.pagination .page-link {
+  line-height: $pagination-line-height;
+  font-size: $pagination-font-size;
+}
+
+.pagination-lg .page-link {
+  line-height: $pagination-line-height-lg;
+  font-size: $pagination-font-size-lg;
+}
+
+.pagination-sm .page-link {
+  line-height: $pagination-line-height-sm;
+  font-size: $pagination-font-size-sm;
+}
+
+
+// 
+// Theme =====================================
+//
+
+// Pagination tabs
+
+.pagination-tabs {
+  border-radius: 0;
+  border-top: $border-width solid $border-color;
+}
+
+.pagination-tabs .page-link {
+  margin-top: -$border-width;
+  padding: $pagination-tabs-padding-y $pagination-tabs-padding-x;
+  background-color: $pagination-tabs-bg-color;
+  border-width: $border-width 0 0 0;
+  border-radius: 0 !important;
+  color: $pagination-tabs-color;
+}
+
+.pagination-tabs .page-link:hover {
+  color: $pagination-tabs-hover-color;
+}
+
+.pagination-tabs .active .page-link {
+  background-color: $pagination-tabs-bg-color;
+  border-color: $pagination-active-border-color;
+  color: $pagination-tabs-active-color;
+}
+
+
+// Pagination overflow
+//
+// Allow links to overflow and make horizontally scrollable
+
+.pagination-overflow {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.pagination-overflow::-webkit-scrollbar {
+  display: none;
+}
+
+.pagination-overflow .page-link {
+  white-space: nowrap;
+}
diff --git a/explorer/src/scss/dashkit/_popover.scss b/explorer/src/scss/dashkit/_popover.scss
index 71e244f7a..f24d0ebca 100644
--- a/explorer/src/scss/dashkit/_popover.scss
+++ b/explorer/src/scss/dashkit/_popover.scss
@@ -1,9 +1,9 @@
-//
+// 
 // popover.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -20,23 +20,16 @@
   border-bottom: 0;
 }
 
-.popover-body-label {
-  margin-left: .25rem;
-}
-
-.popover-body-value {
-  margin-left: .25rem;
-}
-
 .popover-body-indicator {
   display: inline-block;
   width: .5rem;
   height: .5rem;
+  margin-right: .25rem;
   border-radius: 50%;
 }
 
 
-// Large
+// Large 
 
 .popover-lg {
   max-width: $popover-lg-max-width;
@@ -56,7 +49,7 @@
   color: $popover-dark-header-color;
 }
 
-.popover-dark.bs-popover-top .arrow {
+.popover-dark.bs-popover-top .popover-arrow {
 
   &::before {
     border-top-color: $popover-dark-border-color;
@@ -67,7 +60,7 @@
   }
 }
 
-.popover-dark.bs-popover-right .arrow {
+.popover-dark.bs-popover-right .popover-arrow {
 
   &::before {
     border-right-color: $popover-dark-border-color;
@@ -78,7 +71,7 @@
   }
 }
 
-.popover-dark.bs-popover-bottom .arrow {
+.popover-dark.bs-popover-bottom .popover-arrow {
 
   &::before {
     border-bottom-color: $popover-dark-border-color;
@@ -89,7 +82,7 @@
   }
 }
 
-.popover-dark.bs-popover-left .arrow {
+.popover-dark.bs-popover-left .popover-arrow {
 
   &::before {
     border-left-color: $popover-dark-border-color;
diff --git a/explorer/src/scss/dashkit/_progress.scss b/explorer/src/scss/dashkit/_progress.scss
index 30481fed3..91f59803d 100644
--- a/explorer/src/scss/dashkit/_progress.scss
+++ b/explorer/src/scss/dashkit/_progress.scss
@@ -1,9 +1,9 @@
-//
+// 
 // progress.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -19,9 +19,9 @@
 
 
 //
-// Dashkit ===================================
+// Theme ===================================
 //
 
 .progress-sm {
   height: $progress-height-sm;
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/_reboot.scss b/explorer/src/scss/dashkit/_reboot.scss
index be773b374..e5c89748d 100644
--- a/explorer/src/scss/dashkit/_reboot.scss
+++ b/explorer/src/scss/dashkit/_reboot.scss
@@ -3,6 +3,22 @@
 // Extended from Bootstrap
 //
 
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+}
+
+
+// Lists
+
+ul, ol {
+  padding-left: 2.5rem;
+}
+
+
 //
 // Remove the cancel buttons in Chrome and Safari on macOS.
 //
diff --git a/explorer/src/scss/dashkit/_root.scss b/explorer/src/scss/dashkit/_root.scss
index 622a0090c..4c0c1487d 100644
--- a/explorer/src/scss/dashkit/_root.scss
+++ b/explorer/src/scss/dashkit/_root.scss
@@ -3,10 +3,10 @@
 // Extended from Bootstrap
 //
 
-html {
-  height: 100%;
-}
+:root {
 
-body {
-  min-height: 100%;
+  // Chart variables
+  @each $color, $value in $chart-colors {
+    --bs-chart-#{$color}: #{$value};
+  }
 }
diff --git a/explorer/src/scss/dashkit/_tables.scss b/explorer/src/scss/dashkit/_tables.scss
index c019bc9fd..e198a97ed 100644
--- a/explorer/src/scss/dashkit/_tables.scss
+++ b/explorer/src/scss/dashkit/_tables.scss
@@ -1,40 +1,44 @@
-//
+// 
 // tables.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
-.table {
-
-  thead th {
-    background-color: $table-head-bg;
-    text-transform: uppercase;
-    font-size: $font-size-sm;
-    font-weight: $font-weight-bold;
-    letter-spacing: .08em;
-    color: $table-head-color;
-    border-bottom-width: $table-border-width;
-  }
-
-  thead th, tbody th, tbody td {
-    vertical-align: middle;
-  }
+.table thead th {
+  background-color: $table-head-bg;
+  text-transform: uppercase;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  letter-spacing: .08em;
+  color: $table-head-color;
 }
 
+.table thead th, tbody th, tbody td {
+  vertical-align: middle;
+}
+
+.table td, .table th {
+  border-top: $table-border-width solid $table-border-color;
+  border-bottom: 0;
+}
+
+
+// Sizing
+
 .table-sm {
   font-size: $font-size-sm;
+}
 
-  thead th {
-    font-size: $font-size-xs;
-  }
+.table-sm thead th {
+  font-size: $font-size-xs;
 }
 
 
 //
-// Dashkit =====================================
+// Theme =====================================
 //
 
 // No wrap
@@ -63,14 +67,8 @@
 }
 
 
-// Table checkbox
+// Links
 
-.table-checkbox {
-  min-height: 0;
-}
-
-.table-checkbox .custom-control-label::before,
-.table-checkbox .custom-control-label::after {
-  top: 50%;
-  transform: translateY(-50%);
+.table a[class*="text-reset"]:hover {
+  color: $link-color !important;
 }
diff --git a/explorer/src/scss/dashkit/_theme.scss b/explorer/src/scss/dashkit/_theme.scss
new file mode 100644
index 000000000..a57ec3a0a
--- /dev/null
+++ b/explorer/src/scss/dashkit/_theme.scss
@@ -0,0 +1,36 @@
+// Configuration
+@import "mixins";
+@import "utilities";
+
+// Layout & components
+@import "root";
+@import "reboot";
+@import "type";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "dropdown";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "alert";
+@import "progress";
+@import "list-group";
+@import "close";
+@import "modal";
+@import "popover";
+@import "offcanvas";
+
+// Dashkit
+@import 'avatar';
+@import 'chart';
+@import 'comment';
+@import 'checklist';
+@import 'header';
+@import 'icon';
+@import 'kanban';
+@import 'main-content';
+@import 'vendor';
diff --git a/explorer/src/scss/dashkit/_toasts.scss b/explorer/src/scss/dashkit/_toasts.scss
deleted file mode 100644
index 93da2881d..000000000
--- a/explorer/src/scss/dashkit/_toasts.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-//
-// toasts.scss
-// Extended from Bootstrap
-//
diff --git a/explorer/src/scss/dashkit/_type.scss b/explorer/src/scss/dashkit/_type.scss
index d4033a546..958a40b6e 100644
--- a/explorer/src/scss/dashkit/_type.scss
+++ b/explorer/src/scss/dashkit/_type.scss
@@ -1,9 +1,9 @@
-//
+// 
 // type.scss
 // Extended from Bootstrap
 //
 
-//
+// 
 // Bootstrap Overrides =====================================
 //
 
@@ -84,8 +84,8 @@ a, button {
 }
 
 
-//
-// Dashkit =====================================
+// 
+// Theme =====================================
 //
 
 // Include Cerebri Sans
@@ -113,3 +113,12 @@ a, button {
   font-weight: 600;
   font-style: normal;
 }
+
+// Include Feather icons
+
+@font-face {
+  font-family: 'Feather';
+  src: url('#{$path-to-fonts}/feather/Feather.ttf?sdxovp') format('truetype'), url('#{$path-to-fonts}/feather/Feather.woff?sdxovp') format('woff'), url('#{$path-to-fonts}/feather/Feather.svg?sdxovp#Feather') format('svg');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/explorer/src/scss/dashkit/_utilities.scss b/explorer/src/scss/dashkit/_utilities.scss
index 20d4ed13b..ffdfc5ee6 100644
--- a/explorer/src/scss/dashkit/_utilities.scss
+++ b/explorer/src/scss/dashkit/_utilities.scss
@@ -1,5 +1,7 @@
+//
+// utilities.scss
+// Extended from Bootstrap
+//
+
 @import 'utilities/background';
-@import 'utilities/borders';
 @import 'utilities/lift';
-@import 'utilities/sizing';
-@import 'utilities/type';
diff --git a/explorer/src/scss/dashkit/_variables.scss b/explorer/src/scss/dashkit/_variables.scss
index ecfb56c15..5aefa3a34 100644
--- a/explorer/src/scss/dashkit/_variables.scss
+++ b/explorer/src/scss/dashkit/_variables.scss
@@ -1,9 +1,11 @@
-//
+// 
 // variables.scss
 // Extended from Bootstrap
 //
 
-//
+@use 'sass:math';
+
+// 
 // Bootstrap Overrides ===================================
 //
 
@@ -14,11 +16,8 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 
-//
 // Color system
-//
 
-// stylelint-disable
 $white: #FFFFFF !default;
 $gray-100: #F9FBFD !default;
 $gray-200: #EDF2F9 !default;
@@ -31,6 +30,20 @@ $gray-800: #3B506C !default;
 $gray-900: #283E59 !default;
 $black: #12263F !default;
 
+/* beautify ignore:start */
+$grays: (
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+) !default;
+/* beautify ignore:end */
+
 $gray-600-dark: #244166 !default;
 $gray-700-dark: #1E3A5C !default;
 $gray-800-dark: #152E4D !default;
@@ -46,7 +59,7 @@ $orange: #fd7e14 !default; // NOT USED
 $yellow: #F6C343 !default;
 $green: #00D97E !default;
 $teal: #02a8b5 !default; // NOT USED
-$cyan: #39afd1 !default; // NOT USED
+$cyan: #39afd1 !default;
 
 $primary: $blue !default;
 $secondary: $gray-700 !default;
@@ -55,10 +68,15 @@ $info: $cyan !default;
 $warning: $yellow !default;
 $danger: $red !default;
 $light: $gray-200 !default;
+$lighter: $gray-100 !default;
 $dark: $black !default;
 
+/* beautify ignore:start */
 $theme-colors: () !default;
-$theme-colors: map-merge(("primary": $primary,
+
+$theme-colors: map-merge(
+  (
+    "primary": $primary,
     "secondary": $secondary,
     "success": $success,
     "info": $info,
@@ -66,21 +84,39 @@ $theme-colors: map-merge(("primary": $primary,
     "danger": $danger,
     "light": $light,
     "dark": $dark,
-    "white": $white), $theme-colors);
-// stylelint-enable
+    "white": $white
+  ), 
+$theme-colors);
+/* beautify ignore:end */
 
-$lighter: $gray-100 !default;
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 1.75 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: $gray-900 !default;
-$yiq-text-light: $white !default;
+$color-contrast-dark: $gray-900 !default;
+$color-contrast-light: $white !default;
+
+// Characters which are escaped by the escape-svg function
+/* beautify ignore:start */
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+  ("(","%28"),
+  (")","%29"),
+) !default;
+/* beautify ignore:end */
 
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
+$enable-smooth-scroll: false !default;
+$enable-rfs: false !default;
 $enable-validation-icons: false !default;
+$enable-negative-margins: true !default;
 
 
 // Spacing
@@ -89,9 +125,13 @@ $enable-validation-icons: false !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
+/* beautify ignore:start */
 $spacer: 1.5rem !default;
 $spacers: () !default;
-$spacers: map-merge((0: 0,
+
+$spacers: map-merge(
+  (
+    0: 0,
     1: ($spacer * .125), // 3px
     2: ($spacer * .25), // 6px
     3: ($spacer * .5), // 12px
@@ -99,16 +139,10 @@ $spacers: map-merge((0: 0,
     5: ($spacer * 1.5), // 36px
     6: ($spacer * 3), // 72px
     7: ($spacer * 4.5), // 108px
-    8: ($spacer * 9) // 216px
-  ), $spacers);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map-merge((15: 15%,
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%), $sizes);
+    8: ($spacer * 9  // 216px
+  )
+), $spacers);
+/* beautify ignore:end */
 
 
 // Body
@@ -123,59 +157,74 @@ $body-color: $black !default;
 //
 // Style anchor elements.
 
-$link-color: theme-color("primary") !default;
+$link-color: $primary !default;
+$link-decoration: none !default;
 $link-hover-color: darken($link-color, 15%) !default;
 $link-hover-decoration: none !default;
 
 
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+/* beautify ignore:start */
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+/* beautify ignore:end */
+
+
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-gutter-width: 24px !default;
+$grid-gutter-width: 1.5rem !default;
+
+
+// Container padding
+
+$container-padding-x: math.div($grid-gutter-width, 2) !default;
+
 
 // Components
 //
 // Define common padding and border radius sizes and more.
 
-$line-height-lg: 1.5 !default;
-$line-height-sm: 1.75 !default;
-
 $border-width: 1px !default;
 $border-color: $gray-300 !default;
 
 $border-radius: 0.375rem !default;
-$border-radius-lg: 0.5rem !default;
-$border-radius-sm: 0.25rem !default;
 $border-radius-xs: .1875rem !default;
+$border-radius-sm: 0.25rem !default;
+$border-radius-lg: 0.5rem !default;
 
+$component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
 $caret-width: .25em !default;
 
 
-// Fonts
+// Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
-// stylelint-disable value-keyword-case
 $font-family-sans-serif: 'Cerebri Sans', sans-serif !default;
-$font-family-base: $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
+$font-family-base: var(--bs-font-sans-serif) !default;
 
 $font-size-base: 0.9375rem !default; // 15px
-$font-size-lg: ($font-size-base * 1.133333333334) !default; // 17px
-$font-size-sm: ($font-size-base * .866666667) !default; // 13px
+$font-size-sm: 0.8125rem !default; // 13px
+$font-size-lg: 1.0625rem !default; // 17px
 
 $font-weight-light: 400 !default;
 $font-weight-normal: 400 !default;
 $font-weight-bold: 600 !default;
 
 $line-height-base: 1.5 !default;
-
-$headings-margin-bottom: $spacer * .75 !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.1 !default;
+$line-height-sm: 1.75 !default;
+$line-height-lg: 1.5 !default;
 
 $h1-font-size: 1.625rem !default;
 $h2-font-size: 1.25rem !default;
@@ -184,15 +233,29 @@ $h4-font-size: 0.9375rem !default;
 $h5-font-size: 0.8125rem !default;
 $h6-font-size: 0.625rem !default;
 
-$display1-size: 4rem !default;
-$display2-size: 3.25rem !default;
-$display3-size: 2.625rem !default;
-$display4-size: 2rem !default;
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size
+) !default;
 
-$display1-weight: 600 !default;
-$display2-weight: 600 !default;
-$display3-weight: 600 !default;
-$display4-weight: 600 !default;
+$headings-margin-bottom: $spacer * .75 !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+
+/* beautify ignore:start */
+$display-font-sizes: (
+  1: 4rem,
+  2: 3.25rem,
+  3: 2.625rem,
+  4: 2rem,
+) !default; 
+/* beautify ignore:end */
+
+$display-font-weight: 600 !default;
 $display-line-height: $headings-line-height !default;
 
 $lead-font-size: ($font-size-base * 1.25) !default;
@@ -203,8 +266,9 @@ $text-muted: $gray-600 !default;
 
 $blockquote-font-size: ($font-size-base * 1.25) !default;
 
-$hr-border-color: $border-color !default;
 $hr-margin-y: 1rem !default;
+$hr-color: $border-color !default;
+$hr-opacity: 1 !default;
 
 $list-inline-padding: 6px !default;
 
@@ -213,20 +277,23 @@ $list-inline-padding: 6px !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding: 1rem !default;
-$table-cell-padding-sm: 1rem !default;
+$table-cell-padding-y: 1rem !default;
+$table-cell-padding-x: 1rem !default;
+$table-cell-padding-y-sm: 1rem !default;
+$table-cell-padding-x-sm: 1rem !default;
+
+$table-striped-bg: $gray-100 !default;
 
-$table-accent-bg: $gray-100 !default;
-$table-hover-bg: $gray-100 !default;
 $table-active-bg: $gray-100 !default;
 
+$table-hover-bg: $gray-100 !default;
+
 $table-border-color: $gray-200 !default;
 
-$table-head-bg: $gray-100 !default;
-$table-head-color: $text-muted !default;
-
 $table-striped-order: even !default;
 
+$table-group-seperator-color: $table-border-color !default;
+
 
 // Buttons + Forms
 //
@@ -236,22 +303,18 @@ $input-btn-padding-y: .5rem !default;
 $input-btn-padding-x: .75rem !default;
 $input-btn-line-height: $line-height-base !default;
 
-$input-btn-padding-y-lg: .75rem !default;
-$input-btn-padding-x-lg: 1.25rem !default;
-$input-btn-font-size-lg: $font-size-base !default;
-$input-btn-line-height-lg: $line-height-base !default;
-
 $input-btn-focus-width: .15rem !default;
 $input-btn-focus-color: rgba($primary, .25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-box-shadow: none !default;
 
 $input-btn-padding-y-sm: .125rem !default;
 $input-btn-padding-x-sm: .5rem !default;
 $input-btn-line-height-sm: $line-height-sm !default;
 
-$input-btn-padding-y-lg: .5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-line-height-lg: $line-height-lg !default;
+$input-btn-padding-y-lg: .75rem !default;
+$input-btn-padding-x-lg: 1.25rem !default;
+$input-btn-font-size-lg: $font-size-base !default;
+$input-btn-line-height-lg: $line-height-base !default;
 
 
 // Buttons
@@ -266,9 +329,6 @@ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
 $btn-padding-x-sm: $input-btn-padding-x-sm !default;
 $btn-line-height-sm: $input-btn-line-height-sm !default;
 
-//Custom button color
-$btn-text-color: $white !default;
-
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
 $btn-line-height-lg: $input-btn-line-height-lg !default;
@@ -281,6 +341,8 @@ $btn-link-disabled-color: $gray-500 !default;
 
 // Forms
 
+$form-text-margin-top: 0 !default;
+
 $input-padding-y: $input-btn-padding-y !default;
 $input-padding-x: $input-btn-padding-x !default;
 $input-line-height: $input-btn-line-height !default;
@@ -300,26 +362,84 @@ $input-color: $body-color !default;
 $input-border-color: $gray-400 !default;
 
 $input-focus-border-color: $primary !default;
-$input-focus-box-shadow: transparent !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color: $gray-500 !default;
 
 $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
 
-$form-group-margin-bottom: 1.375rem !default;
+$form-check-input-active-filter: none !default;
+
+$form-check-padding-start: 1.5rem !default;
+$form-check-label-cursor: pointer !default;
+
+$form-check-input-bg: $gray-300 !default;
+$form-check-input-border: transparent !default;
+$form-check-input-border-radius: $border-radius !default;
+$form-check-input-focus-border: $form-check-input-border !default;
+$form-check-input-focus-box-shadow: none !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+
+$form-switch-color: $white !default;
+$form-switch-width: 3rem !default;
+$form-switch-padding-start: $form-switch-width + .5rem !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+
+$form-switch-focus-color: $form-switch-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+
+$form-switch-checked-color: $form-switch-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 
-$input-group-addon-bg: $input-bg !default;
 $input-group-addon-color: $text-muted !default;
+$input-group-addon-bg: $input-bg !default;
 
-$custom-select-focus-border-color: $input-focus-border-color !default;
-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$form-select-indicator-padding: 1.75rem !default;
+$form-select-bg-size: .75em .75em !default;
+$form-select-indicator-color: $gray-600 !default;
+$form-select-indicator: url("data:image/svg+xml,<svg viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 1L4.25 4.25L7.5 1' stroke='#{$form-select-indicator-color}' stroke-width='1.08333' stroke-linecap='round' stroke-linejoin='round'/></svg>") !default;
 
-$custom-control-indicator-bg: $border-color !default;
-$custom-control-indicator-border-width: 0 !default;
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-box-shadow: $input-focus-box-shadow !default;
 
-$custom-switch-width: 3rem !default;
-$custom-switch-indicator-size: 1.125rem !default;
-$custom-switch-indicator-border-radius: $custom-switch-indicator-size / 2 !default;
+
+// Navs
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-radius: 0 !default;
+$nav-tabs-link-hover-border-color: transparent transparent transparent !default;
+$nav-tabs-link-active-color: $body-color !default;
+$nav-tabs-link-active-bg: transparent !default;
+$nav-tabs-link-active-border-color: transparent transparent $primary !default;
+
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+
+// Navbar
+
+$navbar-padding-x: 1rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+$navbar-brand-padding-y: 0 !default;
+
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-focus-width: 0 !default;
+
+$navbar-dark-color: $gray-700 !default;
+$navbar-dark-hover-color: $white !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-toggler-border-color: transparent !default;
+
+$navbar-light-color: $gray-700 !default;
+$navbar-light-hover-color: $black !default;
+$navbar-light-active-color: $black !default;
+$navbar-light-toggler-border-color: transparent !default;
 
 
 // Dropdowns
@@ -341,43 +461,18 @@ $dropdown-item-padding-y: .375rem !default;
 $dropdown-header-color: inherit !default;
 
 
-// Navs
-
-$nav-tabs-border-color: $border-color !default;
-$nav-tabs-border-radius: 0 !default;
-$nav-tabs-link-hover-border-color: transparent transparent transparent !default;
-$nav-tabs-link-active-color: $body-color !default;
-$nav-tabs-link-active-bg: transparent !default;
-$nav-tabs-link-active-border-color: transparent transparent theme-color("primary") !default;
-
-$nav-pills-link-active-bg: $component-active-bg !default;
-
-
-// Navbar
-
-$navbar-padding-x: 1rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-$navbar-brand-padding-y: 0 !default;
-
-$navbar-toggler-padding-x: 0 !default;
-
-$navbar-dark-color: $gray-700 !default;
-$navbar-dark-hover-color: $white !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-toggler-border-color: transparent !default;
-
-$navbar-light-color: $gray-700 !default;
-$navbar-light-hover-color: $black !default;
-$navbar-light-active-color: $black !default;
-$navbar-light-toggler-border-color: transparent !default;
-
-
 // Pagination
 
+$pagination-padding-y: $input-btn-padding-y !default;
+$pagination-padding-x: $input-btn-padding-x !default;
+$pagination-padding-y-sm: $input-btn-padding-y-sm !default;
+$pagination-padding-x-sm: $input-btn-padding-x-sm !default;
+$pagination-padding-y-lg: $input-btn-padding-y-lg !default;
+$pagination-padding-x-lg: $input-btn-padding-x-lg !default;
+
 $pagination-color: $black !default;
 
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-box-shadow: none !default;
 
 $pagination-hover-color: $dark !default;
 $pagination-hover-bg: $gray-100 !default;
@@ -387,20 +482,19 @@ $pagination-active-bg: $component-active-bg !default;
 $pagination-active-border-color: $pagination-active-bg !default;
 
 
-// Jumbotron
-
-$jumbotron-bg: $gray-200 !default;
-
-
 // Cards
 
-$card-spacer-y: 1rem !default;
+$card-spacer-y: $spacer !default;
 $card-spacer-x: $spacer !default;
+$card-title-spacer-y: .5rem !default;
 $card-border-width: $border-width !default;
 $card-border-radius: $border-radius-lg !default;
 $card-border-color: $gray-200 !default;
 $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-padding-y: 1rem !default;
+$card-cap-padding-x: $card-spacer-x !default;
 $card-cap-bg: transparent !default;
+$card-bg: $white !default;
 
 
 // Tooltips
@@ -416,14 +510,14 @@ $tooltip-arrow-color: $tooltip-bg !default;
 
 $popover-bg: $white !default;
 $popover-max-width: 10rem !default;
-$popover-padding-x: .95rem !default;
-$popover-padding-y: .8rem !default;
 $popover-box-shadow: 0 0 1rem transparentize($black, .97) !default;
 
 $popover-header-bg: $popover-bg !default;
 $popover-header-padding-y: 0 !default;
 $popover-header-padding-x: 0 !default;
-$popover-header-margin-bottom: .25rem !default;
+
+$popover-body-padding-y: 0 !default;
+$popover-body-padding-x: 0 !default;
 
 $popover-body-color: $text-muted !default;
 
@@ -446,21 +540,22 @@ $toast-header-border-color: $border-color !default;
 
 // Badges
 
+$badge-font-size: 76% !default;
 $badge-font-weight: $font-weight-normal !default;
 $badge-padding-y: .33em !default;
+$badge-padding-x: .5em !default;
 
 
 // Modals
 
-// Padding applied to the modal body
 $modal-inner-padding: 1.5rem !default;
 
 $modal-content-border-color: transparent !default;
 
-$modal-header-padding-y: 1rem !default;
-$modal-header-padding: $modal-header-padding-y $modal-inner-padding !default;
 $modal-header-border-color: $border-color !default;
 $modal-footer-border-color: $border-color !default;
+$modal-header-padding-y: 1rem !default;
+$modal-header-padding: $modal-header-padding-y $modal-inner-padding !default;
 
 $modal-md: 600px !default;
 
@@ -469,12 +564,14 @@ $modal-md: 600px !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-link-font-weight: $font-weight-normal !default;
+$alert-padding-y: .75rem !default;
+$alert-padding-x: 1.25rem !default;
 $alert-margin-bottom: $spacer !default;
+$alert-link-font-weight: $font-weight-normal !default;
 
-$alert-bg-level: 0 !default;
-$alert-border-level: 0 !default;
-$alert-color-level: 6 !default;
+$alert-bg-scale: 0 !default;
+$alert-border-scale: 0 !default;
+$alert-color-scale: 60% !default;
 
 
 // Progress bars
@@ -485,9 +582,12 @@ $progress-border-radius: 200px !default; // Always rounds even if height is manu
 // List groups
 
 $list-group-bg: transparent !default;
-$list-group-border-color: $border-color !default;
+$list-group-border-color: $gray-200 !default;
 
 $list-group-item-padding-y: 1rem !default;
+$list-group-item-padding-x: 1.25rem !default;
+
+$list-group-action-color: $body-color !default;
 
 
 // Figures
@@ -498,9 +598,8 @@ $figure-caption-font-size: $small-font-size !default;
 // Breadcrumbs
 
 $breadcrumb-padding-x: 0 !default;
-
+$breadcrumb-item-padding-x: .35rem !default;
 $breadcrumb-margin-bottom: 0 !default;
-
 $breadcrumb-bg: transparent !default;
 $breadcrumb-divider-color: $gray-400 !default;
 $breadcrumb-active-color: $gray-600 !default;
@@ -509,26 +608,38 @@ $breadcrumb-divider: "" !default;
 
 // Close
 
-$close-color: $text-muted;
-$close-text-shadow: none !default;
+$btn-close-width: .5em !default;
+$btn-close-padding-x: .5em !default;
+
+
+// Offcanvas
+
+$offcanvas-horizontal-width: 350px !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
 
 
 // Code
 
+$code-font-size: 87.5% !default;
 $code-color: $blue !default;
 
 
-//
-// Dashkit =====================================
+// 
+// Theme =====================================
 //
 
-// Paths
 
-$path-to-fonts: '../fonts' !default;
-$path-to-img: '../img' !default;
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default;
+$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default;
 
 
-// Type
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
 
 $font-size-xs: ($font-size-base * .6666666667) !default; // 10px
 
@@ -537,133 +648,34 @@ $headings-letter-spacing: -.02em !default;
 $display-letter-spacing: -.02em !default;
 
 
-// Alerts
+// Tables
 
-$alert-link-text-decoration: underline !default;
+$table-head-bg: $gray-100 !default;
+$table-head-color: $text-muted !default;
 
 
-// Auth
+// Buttons
 
-$auth-bg: $white !default;
+$btn-text-color: $white !default;
 
 
-// Avatar
+// Forms
 
-$avatar-size-base: 3rem !default;
-$avatar-size-xs: 1.625rem !default;
-$avatar-size-sm: 2.5rem !default;
-$avatar-size-lg: 4rem !default;
-$avatar-size-xl: 5.125rem !default;
-$avatar-size-xxl: 8rem !default;
+$form-text-margin-bottom: .5rem !default;
 
-$avatar-title-bg: $gray-500 !default;
-$avatar-title-color: $white !default;
+$form-check-size: 1rem !default; // using this instead of $form-check-input-width because of the units incompatibility bug
+$form-check-input-focus-bg: lighten($primary, 35%) !default;
+$form-check-input-checked-bg-size: 75% 75% !default;
 
+$form-switch-min-height: 1.5rem !default;
 
-// Popover
+$form-check-circle-indicator-size: 1.375rem !default;
+$form-check-circle-indicator-border-radius: 50% !default;
+$form-check-circle-indicator-icon-checked: url(escape-svg("data:image/svg+xml,<svg viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11.3333 1L3.99996 8.33333L0.666626 5' stroke='#{$white}' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>")) !default;
+$form-check-circle-indicator-bg-size: .75rem .5625rem !default;
+$form-check-circle-padding-start: 1.875rem !default;
 
-$popover-lg-max-width: 300px !default;
-
-$popover-dark-bg: $black !default;
-$popover-dark-border-color: $black !default;
-
-$popover-dark-header-bg: $black !default;
-$popover-dark-header-color: $white !default;
-
-
-// Badges
-
-$badge-soft-bg-level: -10 !default;
-
-$badge-padding-x: .5em !default;
-
-
-// Breadcrumb
-
-$breadcrumb-padding-y-sm: .5rem !default;
-$breadcrumb-padding-x-sm: .5rem !default;
-$breadcrumb-item-padding-sm: .25rem !default;
-
-$breadcrumb-margin-bottom-sm: .25rem !default;
-$breadcrumb-font-size-sm: $font-size-sm !default;
-
-
-// Cards
-
-$card-margin-bottom: $spacer !default;
-$card-spacer-x-sm: 1rem !default;
-
-$card-outline-color: $card-border-color !default;
-$card-box-shadow: 0 .75rem 1.5rem transparentize($black, .97) !default;
-
-$card-header-height: 60px !default;
-
-
-// Charts
-
-$chart-height: 300px !default;
-$chart-height-sm: 225px !default;
-
-$chart-sparkline-width: 75px !default;
-$chart-sparkline-height: 35px !default;
-
-$chart-legend-margin-top: 2.5rem !default;
-$chart-legend-font-size: $font-size-sm !default;
-$chart-legend-color: $text-muted !default;
-$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default;
-
-
-// Comment
-
-$comment-margin-bottom: 1rem !default;
-
-$comment-body-padding-y: 1rem !default;
-$comment-body-padding-x: 1.25rem !default;
-$comment-body-bg: $body-bg !default;
-$comment-body-border-radius: $border-radius-lg !default;
-$comment-body-font-size: $font-size-sm !default;
-
-$comment-time-margin-bottom: .5625rem !default;
-$comment-time-font-size: $font-size-xs !default;
-$comment-time-color: $text-muted !default;
-
-
-// Dropdowns
-
-$dropdown-card-min-width: 350px !default;
-$dropdown-card-border-color: $dropdown-border-color !default;
-$dropdown-card-header-min-height: 3.125rem !default;
-$dropdown-card-body-max-height: 350px !default;
-
-
-// Header
-
-$header-margin-bottom: 2rem !default;
-
-$header-spacing-y: 1.5rem !default;
-
-$header-body-border-width: 1px !default;
-$header-body-border-color: $border-color !default;
-
-$header-body-border-color-dark: fade-out($header-body-border-color, .9) !default;
-
-
-// List groups
-
-$list-group-item-padding-y-lg: $spacer !default;
-
-
-// Main content
-
-$main-content-padding-y: 40px !default;
-$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width
-
-
-// Modal
-
-$modal-dialog-vertical-width: 350px !default;
-
-$modal-card-body-max-height: 350px !default;
+$form-group-margin-bottom: 1.375rem !default;
 
 
 // Navs
@@ -673,7 +685,7 @@ $nav-link-padding-x: 1rem !default;
 
 $nav-tabs-link-active-border-width: 1px !default;
 $nav-tabs-link-margin-x: .75rem !default; // Margin used for X so active underline matches width of label
-$nav-tabs-link-padding-y: $card-spacer-y !default; // This keeps the height the same as the card header
+$nav-tabs-link-padding-y: $card-cap-padding-y !default; // This keeps the height the same as the card header
 
 $nav-tabs-sm-font-size: .8125rem !default;
 $nav-tabs-sm-link-margin-x: .5rem !default;
@@ -683,6 +695,7 @@ $nav-tabs-sm-link-margin-x: .5rem !default;
 
 $navbar-vertical-width: 250px !default;
 $navbar-vertical-width-sm: 66px !default;
+$navbar-vertical-expand-breakpoint: 'md' !default; // Doesn't affect the actual breakpoint at which the navbar expands. Used for positioning of other elements only (e.g. `.select-alert`)
 
 $navbar-vertical-padding-x: 1.5rem !default;
 $navbar-vertical-padding-x-sm: 0.75rem !default;
@@ -713,7 +726,98 @@ $navbar-light-heading-color: $text-muted !default;
 $navbar-light-divider-color: $border-color !default;
 $navbar-light-brand-filter: none;
 
-$navbar-dropdown-toggle-on-hover: true !default;
+
+// Dropdowns
+
+$dropdown-card-min-width: 350px !default;
+$dropdown-card-border-color: $dropdown-border-color !default;
+$dropdown-card-header-min-height: 3.125rem !default;
+$dropdown-card-body-max-height: 350px !default;
+
+$dropdown-padding-y-sm: .25rem !default;
+$dropdown-font-size-sm: $font-size-sm !default;
+$dropdown-item-padding-y-sm: .1875rem !default;
+$dropdown-item-padding-x-sm: .75rem !default;
+
+
+// Pagination
+
+$pagination-line-height: 1.25 !default;
+$pagination-line-height-lg: $line-height-base !default;
+$pagination-line-height-sm: $line-height-sm !default;
+
+$pagination-font-size: $font-size-base !default;
+$pagination-font-size-lg: $font-size-base !default;
+$pagination-font-size-sm: $font-size-sm !default;
+
+$pagination-tabs-padding-y: 1.25rem !default;
+$pagination-tabs-padding-x: .75rem !default;
+
+$pagination-tabs-bg-color: transparent !default;
+$pagination-tabs-border-color: $border-color !default;
+
+$pagination-tabs-color: $text-muted !default;
+$pagination-tabs-hover-color: $body-color !default;
+$pagination-tabs-active-color: $body-color !default;
+
+
+// Cards
+
+$card-margin-bottom: $spacer !default;
+$card-spacer-x-sm: 1rem !default;
+
+$card-outline-color: $card-border-color !default;
+$card-box-shadow: 0 .75rem 1.5rem transparentize($black, .97) !default;
+
+$card-header-height: 60px !default;
+
+
+// Popovers
+
+$popover-padding-x: .95rem !default;
+$popover-padding-y: .8rem !default;
+
+$popover-lg-max-width: 300px !default;
+
+$popover-header-margin-bottom: .25rem !default;
+
+$popover-dark-bg: $black !default;
+$popover-dark-border-color: $black !default;
+
+$popover-dark-header-bg: $black !default;
+$popover-dark-header-color: $white !default;
+
+
+// List groups
+
+$list-group-item-padding-y-lg: $spacer !default;
+
+
+// Badges
+
+$border-radius-pill-padding-x: .6em !default;
+
+
+// Modal
+
+$modal-card-body-max-height: 350px !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-link-text-decoration: underline !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y-sm: .5rem !default;
+$breadcrumb-padding-x-sm: .5rem !default;
+$breadcrumb-item-padding-sm: .25rem !default;
+
+$breadcrumb-margin-bottom-sm: .25rem !default;
+$breadcrumb-font-size-sm: $font-size-sm !default;
 
 
 // Progress bars
@@ -721,29 +825,64 @@ $navbar-dropdown-toggle-on-hover: true !default;
 $progress-height-sm: 0.25rem !default;
 
 
-// Forms
-
-$custom-switch-height: 1.5rem !default;
-$custom-switch-spacing: ($custom-switch-height - $custom-switch-indicator-size) / 2 !default;
-
-$custom-switch-indicator-bg: $white !default;
-$custom-switch-indicator-active-bg: $white !default;
+// Offcanvas
+$offcanvas-header-padding-y: 1rem !default;
+$offcanvas-header-padding-x: $offcanvas-padding-x !default;
 
 
-// Close
+// Auth
 
-$close-font-size-sm: $font-size-base !default;
+$auth-bg: $white !default;
 
 
-// Kanban
+// Avatar
 
-$kanban-col-width: 375px !default;
+$avatar-size-base: 3rem !default;
+$avatar-size-xs: 1.625rem !default;
+$avatar-size-sm: 2.5rem !default;
+$avatar-size-lg: 4rem !default;
+$avatar-size-xl: 5.125rem !default;
+$avatar-size-xxl: 8rem !default;
+
+$avatar-title-bg: $gray-500 !default;
+$avatar-title-color: $white !default;
 
 
-// Components
+// Backgrounds
 
-$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default;
-$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default;
+$bg-soft-scale: -80% !default;
+
+
+// Charts
+
+$chart-height: 300px !default;
+$chart-height-sm: 225px !default;
+
+$chart-sparkline-width: 75px !default;
+$chart-sparkline-height: 35px !default;
+
+$chart-legend-margin-top: 2.5rem !default;
+$chart-legend-font-size: $font-size-sm !default;
+$chart-legend-color: $text-muted !default;
+$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default;
+
+/* beautify ignore:start */
+$chart-colors: (
+  "gray-300": $gray-300,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+  "primary-100": "#D2DDEC",
+  "primary-300": "#A6C5F7",
+  "primary-700": $primary,
+  "default-color": $gray-600,
+  "default-font-color": $gray-600,
+  "arc-border-color": $white,
+  "arc-hover-border-color": $white,
+  "grid-line-color": $gray-300,
+) !default;
+/* beautify ignore:end */
 
 
 // Checklist
@@ -752,6 +891,134 @@ $checklist-control-spacer: .75rem !default;
 $checklist-control-checked-color: $gray-700 !default;
 
 
-// Backgrounds
+// Comment
 
-$bg-soft-level: -11 !default;
+$comment-margin-bottom: 1rem !default;
+
+$comment-body-padding-y: 1rem !default;
+$comment-body-padding-x: 1.25rem !default;
+$comment-body-bg: $body-bg !default;
+$comment-body-border-radius: $border-radius-lg !default;
+$comment-body-font-size: $font-size-sm !default;
+
+$comment-time-margin-bottom: .5625rem !default;
+$comment-time-font-size: $font-size-xs !default;
+$comment-time-color: $text-muted !default;
+
+
+// Header
+
+$header-margin-bottom: 2rem !default;
+
+$header-spacing-y: 1.5rem !default;
+
+$header-body-border-width: 1px !default;
+$header-body-border-color: $border-color !default;
+
+$header-body-border-color-dark: fade-out($header-body-border-color, .9) !default;
+
+
+// Kanban
+
+$kanban-col-width: 375px !default;
+
+
+// List
+
+$list-alert-min-width: 350px !default;
+
+
+// Main content
+
+$main-content-padding-y: 2.5rem !default;
+$main-content-padding-x: 1.5rem !default;
+
+
+// Paths
+
+$path-to-fonts: '../fonts' !default;
+$path-to-img: '../img' !default;
+
+
+// 
+// Utilities =====================================
+//
+
+/* beautify ignore:start */
+$border-widths: (
+  2: $border-width * 2,
+  3: $border-width * 3,
+  4: $border-width * 4,
+  5: $border-width * 5,
+);
+
+$utilities: (
+  "background-color": (
+    property: background-color,
+    class: bg,
+    values: map-merge(
+      $theme-colors,
+      (
+        "body": $body-bg,
+        "white": $white,
+        "transparent": transparent,
+        "auth": $auth-bg,
+        "lighter": $lighter,
+      )
+    )
+  ),
+  "border-width": (
+    property: border-width,
+    class: border,
+    values: $border-widths
+  ),
+  "border-top-width": (
+    property: border-top-width,
+    class: border-top,
+    values: $border-widths
+  ),
+  "border-end-width": (
+    property: border-right-width,
+    class: border-end,
+    values: $border-widths
+  ),
+  "border-bottom-width": (
+    property: border-bottom-width,
+    class: border-bottom,
+    values: $border-widths
+  ),
+  "border-start-width": (
+    property: border-left-width,
+    class: border-start,
+    values: $border-widths
+  ),
+  "border-color": (
+    property: border-color,
+    class: border,
+    values: map-merge(
+      $theme-colors, (
+        "white": $white,
+        "body": $body-bg,
+        "card": $card-bg
+      )
+    )
+  ),
+  "font-size": (
+    property: font-size,
+    class: fs,
+    values: map-merge(
+      $font-sizes,
+      (
+        "base": $font-size-base,
+        "lg": $font-size-lg,
+        "sm": $font-size-sm,
+      )
+    )
+  ),
+  "text-gray": (
+    property: color,
+    class: text-gray,
+    values: $grays
+  ),
+);
+/* beautify ignore:end */
diff --git a/explorer/src/scss/dashkit/_vendor.scss b/explorer/src/scss/dashkit/_vendor.scss
new file mode 100644
index 000000000..72886ec52
--- /dev/null
+++ b/explorer/src/scss/dashkit/_vendor.scss
@@ -0,0 +1,7 @@
+@import 'vendor/choices';
+@import 'vendor/dropzone';
+@import 'vendor/feather';
+@import 'vendor/flatpickr';
+@import 'vendor/highlight';
+@import 'vendor/quill';
+@import 'vendor/list';
diff --git a/explorer/src/scss/dashkit/_vendors.scss b/explorer/src/scss/dashkit/_vendors.scss
deleted file mode 100644
index 7e5d81840..000000000
--- a/explorer/src/scss/dashkit/_vendors.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'vendors/dropzone';
-@import 'vendors/flatpickr';
-@import 'vendors/quill';
-@import 'vendors/list';
-@import 'vendors/select2';
diff --git a/explorer/src/scss/dashkit/dark/_overrides-dark.scss b/explorer/src/scss/dashkit/dark/_overrides-dark.scss
index bea43be0d..4bd19305e 100644
--- a/explorer/src/scss/dashkit/dark/_overrides-dark.scss
+++ b/explorer/src/scss/dashkit/dark/_overrides-dark.scss
@@ -7,10 +7,8 @@
 // Table of contents
 //
 // 1. Buttons
-// 2. Forms
-// 3. Input groups
-// 4. Quill
-// 5. Select2
+// 2. Dropzone
+// 3. Quill
 //
 
 
@@ -33,28 +31,19 @@
 }
 
 
-// Forms
+// Dropzone
 
-.form-control {
-  border-color: $input-bg;
-}
-
-
-// Input groups
-
-.input-group .input-group-text {
-  border-color: $input-bg;
+.dz-message {
+  border-color: $black-dark;
 }
 
 
 // Quill
 
 .ql-toolbar {
-  border-color: $input-bg;
+  border-bottom-color: $black-dark;
 }
 
 .ql-editor {
-  border-left-color: $input-bg;
-  border-right-color: $input-bg;
-  border-bottom-color: $input-bg;
-}
+  border-top-color: $black-dark;
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/dark/_variables-dark.scss b/explorer/src/scss/dashkit/dark/_variables-dark.scss
index d158b6e8a..0586bd194 100644
--- a/explorer/src/scss/dashkit/dark/_variables-dark.scss
+++ b/explorer/src/scss/dashkit/dark/_variables-dark.scss
@@ -1,21 +1,24 @@
-//
+// 
 // variables-dark.scss
 // Dashkit dark version
 //
 
-//
+// 
 // Bootstrap Overrides ===================================
 //
 
 
-//
 // Color system
-//
 
 $white: #FFFFFF !default;
+$gray-100: #F9FBFD !default;
+$gray-200: #EDF2F9 !default;
 $gray-300: #E3EBF6 !default;
+$gray-400: #D2DDEC !default;
+$gray-500: #B1C2D9 !default;
 $gray-600: #95AAC9 !default;
 $gray-700: #6E84A3 !default;
+$gray-800: #3B506C !default;
 $gray-900: #283E59 !default;
 $black: #12263F !default;
 
@@ -25,6 +28,7 @@ $gray-800-dark: #152E4D !default;
 $gray-900-dark: #132A46 !default;
 $black-dark: #12263F !default;
 
+$primary: #2C7BE5 !default;
 $light: $gray-800-dark !default;
 $lighter: $gray-900-dark !default;
 
@@ -44,7 +48,7 @@ $body-color: $white !default;
 $border-color: $gray-700-dark !default;
 
 
-// Fonts
+// Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
@@ -55,16 +59,14 @@ $text-muted: $gray-700 !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
+$table-border-factor: 0 !default;
 $table-border-color: $border-color !default;
 
-$table-head-bg: $black-dark !default;
-
-$table-accent-bg: $gray-900-dark !default;
-$table-hover-bg: $gray-900-dark !default;
+$table-striped-bg: $gray-900-dark !default;
 $table-active-bg: $gray-900-dark !default;
+$table-hover-bg: $gray-900-dark !default;
 
-$table-bg-level: 0 !default;
-$table-border-level: 0 !default;
+$table-bg-scale: 0 !default;
 
 
 // Forms
@@ -72,11 +74,25 @@ $table-border-level: 0 !default;
 $input-bg: $gray-700-dark !default;
 
 $input-color: $white !default;
-$input-border-color: $black-dark !default;
+$input-border-color: $gray-700-dark !default;
 
 $input-placeholder-color: $gray-600 !default;
 
-$custom-control-indicator-bg: $gray-600-dark !default;
+$form-check-input-bg: $gray-600-dark !default;
+
+$form-switch-color: $gray-800-dark !default;
+$form-switch-checked-color: $white !default;
+
+
+// Navbar
+
+$navbar-dark-color: $gray-700 !default;
+$navbar-dark-hover-color: $black !default;
+$navbar-dark-active-color: $black !default;
+$navbar-dark-toggler-border-color: transparent !default;
+
+$navbar-light-hover-color: $white !default;
+$navbar-light-active-color: $white !default;
 
 
 // Dropdowns
@@ -91,28 +107,6 @@ $dropdown-link-color: $text-muted !default;
 $dropdown-link-hover-color: $white !default;
 
 
-// Navbar
-
-$navbar-dark-color: $gray-700 !default;
-$navbar-dark-hover-color: $black !default;
-$navbar-dark-active-color: $black !default;
-$navbar-dark-toggler-border-color: transparent !default;
-
-$navbar-dark-bg: $white !default;
-$navbar-dark-border-color: $white !default;
-$navbar-dark-heading-color: $text-muted !default;
-$navbar-dark-divider-color: $gray-300 !default;
-$navbar-dark-brand-filter: none;
-
-$navbar-dark-input-bg: $input-bg !default;
-$navbar-dark-input-border-color: $input-border-color !default;
-
-$navbar-light-hover-color: $white !default;
-$navbar-light-active-color: $white !default;
-$navbar-light-input-bg: $gray-700-dark !default;
-$navbar-light-input-border-color: $black-dark !default;
-
-
 // Pagination
 
 $pagination-color: $white !default;
@@ -127,15 +121,10 @@ $pagination-disabled-bg: $gray-900-dark !default;
 $pagination-disabled-border-color: $gray-700-dark !default;
 
 
-// Jumbotron
-
-$jumbotron-bg: $gray-800-dark !default;
-
-
 // Cards
 
-$card-bg: $gray-800-dark !default;
 $card-border-color: $border-color !default;
+$card-bg: $gray-800-dark !default;
 
 
 // Tooltips
@@ -153,7 +142,6 @@ $popover-border-color: $black !default;
 // Toasts
 
 $toast-background-color: $gray-800-dark !default;
-;
 
 
 // Modals
@@ -167,9 +155,68 @@ $modal-content-border-color: $black !default;
 $progress-bg: $gray-600-dark !default;
 
 
+// List groups
+
+$list-group-border-color: $border-color !default;
+
+$list-group-hover-bg: $gray-900-dark !default;
+
+
+
+// 
+// Theme =====================================
 //
-// Dashkit =====================================
-//
+
+
+// Charts
+
+/* beautify ignore:start */
+$chart-colors: (
+  "gray-300": $gray-300,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+  "primary-100": "#D2DDEC",
+  "primary-300": "#A6C5F7",
+  "primary-700": $primary,
+  "default-color": $gray-700,
+  "default-font-color": $gray-700,
+  "arc-border-color": $gray-800-dark,
+  "arc-hover-border-color": $gray-800-dark,
+  "grid-line-color": $gray-900,
+) !default;
+/* beautify ignore:end */
+
+
+// Tables
+
+$table-head-bg: $black-dark !default;
+
+
+// Navbar
+
+$navbar-dark-bg: $white !default;
+$navbar-dark-border-color: $white !default;
+$navbar-dark-heading-color: $text-muted !default;
+$navbar-dark-divider-color: $gray-300 !default;
+$navbar-dark-brand-filter: none;
+
+$navbar-dark-input-bg: $input-bg !default;
+$navbar-dark-input-border-color: $input-border-color !default;
+
+$navbar-light-bg: $gray-800-dark !default;
+$navbar-light-border-color: $gray-800-dark !default;
+
+$navbar-light-input-bg: $gray-700-dark !default;
+$navbar-light-input-border-color: $black-dark !default;
+
+
+// Cards
+
+$card-outline-color: $gray-800-dark !default;
+$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default;
+
 
 // Auth
 
@@ -181,15 +228,9 @@ $auth-bg: $body-bg !default;
 $avatar-title-bg: $gray-600-dark !default;
 
 
-// Badges
+// Backgrounds
 
-$badge-soft-bg-level: 10 !default;
-
-
-// Cards
-
-$card-outline-color: $gray-800-dark !default;
-$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default;
+$bg-soft-scale: 55% !default;
 
 
 // Comment
@@ -200,20 +241,3 @@ $comment-body-bg: $gray-700-dark;
 // Header
 
 $header-body-border-color-dark: $border-color !default;
-
-
-// Navbar
-
-$navbar-light-bg: $gray-800-dark !default;
-$navbar-light-border-color: $gray-800-dark !default;
-
-
-// Switch
-
-$custom-switch-indicator-bg: $gray-800-dark !default;
-$custom-switch-indicator-active-bg: $white !default;
-
-
-// Backgrounds
-
-$bg-soft-level: 10 !default;
diff --git a/explorer/src/scss/dashkit/forms/_form-check.scss b/explorer/src/scss/dashkit/forms/_form-check.scss
new file mode 100644
index 000000000..65af6ddf4
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_form-check.scss
@@ -0,0 +1,84 @@
+// 
+// form-check.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap Overrides ===================================
+//
+
+//
+// Check
+//
+
+.form-check {
+  margin-bottom: 0;
+}
+
+.form-check + .form-check {
+  margin-top: $form-check-margin-bottom;
+}
+
+// Input
+
+.form-check-input {
+  width: $form-check-size;
+  height: $form-check-size;
+  margin-top: calc((#{$line-height-base} * 1em - 1rem) / 2);
+  cursor: $form-check-label-cursor;
+}
+
+.form-check-input:focus:not(:checked) {
+  background-color: $form-check-input-focus-bg;
+}
+
+.form-check:not(.form-switch):not(.form-check-circle) .form-check-input:checked {
+  background-size: $form-check-input-checked-bg-size;
+}
+
+
+//
+// Switch
+//
+
+.form-switch {
+  min-height: $form-switch-min-height;
+}
+
+.form-switch > .form-check-input {
+  height: $form-switch-min-height;
+  margin-top: 0; // Form switch input height is always equal to the height of the switch
+}
+
+.form-switch > .form-check-label {
+  margin-top: calc((#{$form-switch-min-height} - #{$line-height-base} * 1em) / 2);
+}
+
+
+
+//
+// Theme ===================================
+//
+
+// Circle
+
+.form-check-circle {
+  padding-left: $form-check-circle-padding-start;
+}
+
+.form-check-circle > .form-check-input {
+  width: $form-check-circle-indicator-size;
+  height: $form-check-circle-indicator-size;
+  margin-left: -$form-check-circle-padding-start;
+  border-radius: $form-check-circle-indicator-border-radius;
+  background-image: escape-svg($form-check-circle-indicator-icon-checked);
+  background-size: $form-check-circle-indicator-bg-size;
+}
+
+.form-check-circle > .form-check-input:checked {
+  background-image: escape-svg($form-check-circle-indicator-icon-checked);
+}
+
+.form-check-circle > .form-check-label {
+  margin-top: calc((#{$form-check-circle-indicator-size} - 1em) / 2);
+}
diff --git a/explorer/src/scss/dashkit/forms/_form-control.scss b/explorer/src/scss/dashkit/forms/_form-control.scss
new file mode 100644
index 000000000..98a548db9
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_form-control.scss
@@ -0,0 +1,90 @@
+// 
+// form-control.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap overrides ===================================
+//
+
+// Sizing
+
+.form-control-sm {
+  line-height: $input-line-height-sm;
+}
+
+.form-control-lg {
+  line-height: $input-line-height-lg;
+}
+
+
+//
+// Theme ===================================
+//
+
+// Form control flush
+//
+// Removes borders and paddings from inputs and text areas
+
+.form-control-flush {
+  padding-left: 0;
+  border-color: transparent !important;
+  background-color: transparent !important;
+  resize: none;
+}
+
+.form-control:not(.form-select) {
+  padding-right: 0;
+}
+
+
+// Form control auto
+//
+// Sets the height of the input to auto
+
+.form-control-auto {
+  min-height: 0 !important;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+
+// Form control rounded
+//
+// Makes input border radius round
+
+.form-control-rounded {
+  border-radius: 20rem;
+}
+
+
+// Font size
+
+.form-control {
+
+  &.h1, &.h2, &.h3, &.h4, &.h5 {
+    margin-bottom: 0;
+    font-weight: $headings-font-weight;
+    letter-spacing: $headings-letter-spacing;
+  }
+
+  &.h1 {
+    font-size: $h1-font-size;
+  }
+
+  &.h2 {
+    font-size: $h2-font-size;
+  }
+
+  &.h3 {
+    font-size: $h3-font-size;
+  }
+
+  &.h4 {
+    font-size: $h4-font-size;
+  }
+
+  &.h5 {
+    font-size: $h5-font-size;
+  }
+}
diff --git a/explorer/src/scss/dashkit/forms/_form-group.scss b/explorer/src/scss/dashkit/forms/_form-group.scss
new file mode 100644
index 000000000..b922d55a3
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_form-group.scss
@@ -0,0 +1,8 @@
+//
+// form-group.scss
+// Dashkit component
+//
+
+.form-group {
+  margin-bottom: $form-group-margin-bottom;
+}
diff --git a/explorer/src/scss/dashkit/forms/_form-text.scss b/explorer/src/scss/dashkit/forms/_form-text.scss
new file mode 100644
index 000000000..c46c52df6
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_form-text.scss
@@ -0,0 +1,9 @@
+//
+// form-text.scss
+// Extended from Bootstrap
+//
+
+.form-text {
+  display: block;
+  margin-bottom: $form-text-margin-bottom;
+}
diff --git a/explorer/src/scss/dashkit/forms/_input-group.scss b/explorer/src/scss/dashkit/forms/_input-group.scss
new file mode 100644
index 000000000..b69a3738e
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_input-group.scss
@@ -0,0 +1,171 @@
+//
+// input-group.scss
+// Extended from Bootstrap
+//
+
+//
+// Bootstrap overrides ===================================
+//
+
+// Sizing
+
+.input-group-sm > .form-control {
+  line-height: $input-line-height-sm;
+}
+
+.input-group-lg > .form-control {
+  line-height: $input-line-height-lg;
+}
+
+
+//
+// Theme ===================================
+//
+
+.input-group-merge > .form-control {
+  border-right-width: 0;
+}
+
+.input-group-merge > .input-group-text {
+  border-left-width: 0;
+  transition: $input-transition;
+}
+
+.input-group-merge > .form-control:focus + .input-group-text {
+  border-color: $input-focus-border-color;
+}
+
+.input-group > :not(:first-child):not(.dropdown-menu) {
+  margin-left: 0;
+}
+
+
+// Reverse
+
+.input-group-merge.input-group-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.input-group-merge.input-group-reverse > .form-control {
+  padding-right: $input-padding-x;
+  padding-left: 0;
+  border-radius: 0 $input-border-radius $input-border-radius 0;
+  border-right-width: $input-border-width;
+  border-left-width: 0;
+}
+
+.input-group-merge.input-group-reverse > .input-group-text {
+  border-radius: $input-border-radius 0 0 $input-border-radius;
+  border-left-width: $input-border-width;
+  border-right-width: 0;
+}
+
+.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
+  border-top-right-radius: $input-border-radius;
+  border-bottom-right-radius: $input-border-radius;
+}
+
+.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  border-top-left-radius: $input-border-radius;
+  border-bottom-left-radius: $input-border-radius;
+}
+
+
+// Sizing
+
+.input-group-sm.input-group-merge.input-group-reverse > .form-control {
+  padding-right: $input-padding-x-sm;
+  border-radius: 0 $input-border-radius-sm $input-border-radius-sm 0;
+}
+
+.input-group-sm.input-group-merge.input-group-reverse > .input-group-text {
+  border-radius: $input-border-radius-sm 0 0 $input-border-radius-sm;
+}
+
+.input-group-sm.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
+  border-top-right-radius: $input-border-radius-sm;
+  border-bottom-right-radius: $input-border-radius-sm;
+}
+
+.input-group-sm.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  border-top-left-radius: $input-border-radius-sm;
+  border-bottom-left-radius: $input-border-radius-sm;
+}
+
+.input-group-lg.input-group-merge.input-group-reverse > .form-control {
+  padding-right: $input-padding-x-lg;
+  border-radius: 0 $input-border-radius-lg $input-border-radius-lg 0;
+}
+
+.input-group-lg.input-group-merge.input-group-reverse > .input-group-text {
+  border-radius: $input-border-radius-lg 0 0 $input-border-radius-lg;
+}
+
+.input-group-lg.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
+  border-top-right-radius: $input-border-radius-lg;
+  border-bottom-right-radius: $input-border-radius-lg;
+}
+
+.input-group-lg.input-group-merge.input-group-reverse:not(.input-group-rounded) > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  border-top-left-radius: $input-border-radius-lg;
+  border-bottom-left-radius: $input-border-radius-lg;
+}
+
+
+// Rounded
+
+.input-group-rounded.input-group-merge > .form-control {
+  border-top-left-radius: $border-radius-pill;
+  border-bottom-left-radius: $border-radius-pill;
+}
+
+.input-group-rounded.input-group-merge > .input-group-text {
+  border-top-right-radius: $border-radius-pill;
+  border-bottom-right-radius: $border-radius-pill;
+}
+
+.input-group-rounded.input-group-merge.input-group-reverse > .form-control {
+  border-radius: 0 $border-radius-pill $border-radius-pill 0 !important;
+}
+
+.input-group-rounded.input-group-merge.input-group-reverse > .input-group-text {
+  border-radius: $border-radius-pill 0 0 $border-radius-pill !important;
+}
+
+
+// Flush
+
+.input-group-flush.input-group-merge > .form-control,
+.input-group-flush.input-group-merge > .input-group-text {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.input-group-flush.input-group-merge > .form-control {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.input-group-flush.input-group-merge > .form-control:focus + .input-group-text {
+  border-color: transparent;
+}
+
+.input-group-flush.input-group-merge:not(.input-group-reverse) > .input-group-text {
+  padding-right: 0;
+}
+
+.input-group-flush.input-group-merge.input-group-reverse > .input-group-text {
+  padding-left: 0;
+}
+
+
+// Validation
+
+.input-group-merge > .form-control.is-valid + .input-group-text {
+  border-color: $form-feedback-valid-color;
+}
+
+.input-group-merge > .form-control.is-invalid + .input-group-text {
+  border-color: $form-feedback-invalid-color;
+}
diff --git a/explorer/src/scss/dashkit/forms/_validation.scss b/explorer/src/scss/dashkit/forms/_validation.scss
new file mode 100644
index 000000000..4c4bdc08c
--- /dev/null
+++ b/explorer/src/scss/dashkit/forms/_validation.scss
@@ -0,0 +1,16 @@
+//
+// validation.scss
+// Extended from Bootstrap
+//
+
+// 
+// Bootstrap Overrides =====================================
+//
+
+.form-control.is-valid:focus, .form-control.is-invalid:focus {
+  box-shadow: none;
+
+  @if ($enable-shadows) {
+    box-shadow: $input-focus-box-shadow;
+  }
+}
diff --git a/explorer/src/scss/dashkit/mixins/_badge.scss b/explorer/src/scss/dashkit/mixins/_badge.scss
index 177463366..47cea910b 100644
--- a/explorer/src/scss/dashkit/mixins/_badge.scss
+++ b/explorer/src/scss/dashkit/mixins/_badge.scss
@@ -4,13 +4,8 @@
 
 @mixin badge-variant-soft($bg, $color) {
   color: $color;
-  background-color: $bg;
 
-  &[href] {
-    @include hover-focus {
-      color: $color;
-      text-decoration: none;
-      background-color: darken($bg, 5%);
-    }
+  &[href]:hover, &[href]:focus {
+    background-color: darken($bg, 5%) !important;
   }
 }
diff --git a/explorer/src/scss/dashkit/mixins/_breakpoints.scss b/explorer/src/scss/dashkit/mixins/_breakpoints.scss
index 6fe646062..af514d019 100644
--- a/explorer/src/scss/dashkit/mixins/_breakpoints.scss
+++ b/explorer/src/scss/dashkit/mixins/_breakpoints.scss
@@ -6,4 +6,4 @@
 @function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null);
-}
+}
\ No newline at end of file
diff --git a/explorer/src/scss/dashkit/utilities/_background.scss b/explorer/src/scss/dashkit/utilities/_background.scss
index f7e874a6d..d1fabc8b8 100644
--- a/explorer/src/scss/dashkit/utilities/_background.scss
+++ b/explorer/src/scss/dashkit/utilities/_background.scss
@@ -1,8 +1,8 @@
 //
 // background.scss
+// Theme utilities
 //
 
-
 // Fixed at the bottom
 
 .bg-fixed-bottom {
@@ -12,7 +12,8 @@
   background-attachment: fixed;
 }
 
-// Calculate the width of the main container because
+
+// Calculate the width of the main container because 
 // the background-attachment property will use 100vw instead
 
 .navbar-vertical ~ .main-content.bg-fixed-bottom {
@@ -33,13 +34,6 @@
 }
 
 
-// Auth
-
-.bg-auth {
-  background-color: $auth-bg;
-}
-
-
 // Ellipses
 
 @each $color, $value in $theme-colors {
@@ -57,24 +51,17 @@
 // Hero
 
 .bg-hero {
-  background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(../#{$path-to-img}/covers/header-cover.jpg);
+  background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(#{$path-to-img}/covers/header-cover.jpg);
   background-repeat: no-repeat, no-repeat;
   background-position: center center, center center;
   background-size: cover, cover;
 }
 
 
-// Colors
-
-.bg-lighter {
-  background-color: $lighter !important;
-}
-
-
 // Soft colors
 
 @each $color, $value in $theme-colors {
   .bg-#{$color}-soft {
-    background-color: theme-color-level($color, $bg-soft-level) !important;
+    background-color: shift-color($value, $bg-soft-scale) !important;
   }
 }
diff --git a/explorer/src/scss/dashkit/utilities/_borders.scss b/explorer/src/scss/dashkit/utilities/_borders.scss
deleted file mode 100644
index 4daa025a9..000000000
--- a/explorer/src/scss/dashkit/utilities/_borders.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-//
-// borders.scss
-//
-
-
-// Sizing
-
-$border-sizing: () !default;
-$border-sizing: map-merge((
-  "2": 2,
-  "3": 3,
-  "4": 4,
-  "5": 5
-), $border-sizing);
-
-@each $size, $value in $border-sizing {
-
-  .border-#{$size} {
-    border-width: $border-width * $value !important;
-  }
-
-  .border-top-#{$size} {
-    border-top-width: $border-width * $value !important;
-  }
-
-  .border-right-#{$size} {
-    border-right-width: $border-width * $value !important;
-  }
-
-  .border-bottom-#{$size} {
-    border-bottom-width: $border-width * $value !important;
-  }
-
-  .border-left-#{$size} {
-    border-left-width: $border-width * $value !important;
-  }
-}
-
-
-// Contextual classes
-
-.border-body {
-  border-color: $body-bg !important;
-}
-
-.border-card {
-  border-color: $card-bg !important;
-}
diff --git a/explorer/src/scss/dashkit/utilities/_sizing.scss b/explorer/src/scss/dashkit/utilities/_sizing.scss
deleted file mode 100644
index f7685d6d2..000000000
--- a/explorer/src/scss/dashkit/utilities/_sizing.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// sizing.scss
-//
-
-.vw-100 {
-  width: 100vw !important;
-}
-.vh-100 {
-  height: 100vh !important;
-}
diff --git a/explorer/src/scss/dashkit/utilities/_type.scss b/explorer/src/scss/dashkit/utilities/_type.scss
deleted file mode 100644
index 4cd91ee1c..000000000
--- a/explorer/src/scss/dashkit/utilities/_type.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-//
-// type.scss
-// Extended from Bootstrap
-//
-
-// Font size
-
-.font-size-base {
-  font-size: $font-size-base !important;
-}
-
-.font-size-sm {
-  font-size: $font-size-sm !important;
-}
-
-.font-size-lg {
-  font-size: $font-size-lg !important;
-}
-
-
-// Decoration
-
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
-
-// Gray colors
-
-@each $color, $value in $grays {
-  .text-gray-#{$color} {
-    color: $value !important;
-  }
-}
diff --git a/explorer/src/scss/dashkit/vendor/_choices.scss b/explorer/src/scss/dashkit/vendor/_choices.scss
new file mode 100644
index 000000000..b3215c35c
--- /dev/null
+++ b/explorer/src/scss/dashkit/vendor/_choices.scss
@@ -0,0 +1,141 @@
+//
+// choices.scss
+// Choices plugin overrides
+//
+
+.choices {
+  position: relative;
+  cursor: pointer;
+}
+
+.choices:focus {
+  outline: none;
+}
+
+.choices::after {
+  display: none;
+}
+
+
+// Dropdown menu
+
+.choices > .dropdown-menu {
+  width: 100%;
+}
+
+.choices > .dropdown-menu .form-control {
+  width: calc(100% - #{$input-padding-x} * 2);
+  margin: $dropdown-item-padding-y $input-padding-x;
+}
+
+.choices > .dropdown-menu .dropdown-item {
+  padding-left: $input-padding-x;
+  padding-right: $input-padding-x;
+}
+
+.choices > .dropdown-menu .dropdown-item.is-highlighted {
+  color: $dropdown-link-hover-color;
+}
+
+// Sizing
+
+.choices > .form-control-sm + .dropdown-menu,
+.choices > .form-select-sm + .dropdown-menu {
+  min-width: 100%;
+  width: auto;
+}
+
+.choices > .form-control-sm + .dropdown-menu .dropdown-item,
+.choices > .form-select-sm + .dropdown-menu .dropdown-item {
+  padding-right: $input-padding-x-sm;
+  padding-left: $input-padding-x-sm;
+  font-size: $font-size-sm;
+}
+
+.choices > .form-control-sm + .dropdown-menu .form-control,
+.choices > .form-select-sm + .dropdown-menu .form-control {
+  margin-right: $input-padding-x-sm;
+  margin-left: $input-padding-x-sm;
+}
+
+
+// Placeholder
+
+.choices__placeholder {
+  color: $input-placeholder-color;
+  opacity: 1;
+}
+
+
+// Open
+
+.choices.is-open > .form-control,
+.choices.is-open > .form-select {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.choices.is-open > .form-control + .dropdown-menu,
+.choices.is-open > .form-select + .dropdown-menu {
+  margin-top: -$dropdown-border-width;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+
+// Multiple
+
+.choices__list--multiple + .form-control {
+  display: inline-block;
+  min-height: 0;
+  width: auto;
+  padding: 0;
+  border-width: 0;
+  border-radius: 0;
+  background-color: transparent;
+  font-size: $input-font-size;
+}
+
+.form-control-lg + .choices__list--multiple + .form-control,
+.form-select-lg + .choices__list--multiple + .form-control {
+  font-size: $input-font-size-lg;
+}
+
+.form-control-sm + .choices__list--multiple + .form-control,
+.form-select-sm + .choices__list--multiple + .form-control {
+  font-size: $input-font-size-sm;
+}
+
+.choices__list--multiple {
+  display: inline;
+}
+
+.choices__list--multiple > .choices__item {
+  display: inline-block;
+  margin-right: .2rem;
+  padding-right: .375rem;
+  padding-left: .375rem;
+  font-size: $font-size-sm;
+  background-color: $light;
+  border-radius: $border-radius-xs;
+}
+
+.choices__list--multiple > .choices__item > .choices__button {
+  width: .5rem;
+  margin-left: .5rem;
+  padding: 0;
+  outline: none;
+  border-width: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: url(escape-svg("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#{$body-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"));
+  background-size: 100% auto;
+  text-indent: -9999px;
+  opacity: .5;
+  transition: $input-transition;
+}
+
+.choices__list--multiple > .choices__item:hover > .choices__button {
+  opacity: 1;
+}
diff --git a/explorer/src/scss/dashkit/vendors/_dropzone.scss b/explorer/src/scss/dashkit/vendor/_dropzone.scss
similarity index 84%
rename from explorer/src/scss/dashkit/vendors/_dropzone.scss
rename to explorer/src/scss/dashkit/vendor/_dropzone.scss
index 22343b2ac..27fb6e95b 100644
--- a/explorer/src/scss/dashkit/vendors/_dropzone.scss
+++ b/explorer/src/scss/dashkit/vendor/_dropzone.scss
@@ -27,6 +27,13 @@
   }
 }
 
+.dz-button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
 .dz-drag-hover .dz-message {
   border-color: $primary;
   color: $primary;
@@ -49,19 +56,26 @@
 
 .dz-preview-single {
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: $border-radius;
 }
 
 .dz-preview-cover {
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   border-radius: $border-radius;
 }
 
 .dz-preview-img {
   object-fit: cover;
-  width: 100%; height: 100%;
+  width: 100%;
+  height: 100%;
   border-radius: $border-radius;
 }
 
diff --git a/explorer/src/scss/dashkit/vendor/_feather.scss b/explorer/src/scss/dashkit/vendor/_feather.scss
new file mode 100644
index 000000000..f368c2c60
--- /dev/null
+++ b/explorer/src/scss/dashkit/vendor/_feather.scss
@@ -0,0 +1,809 @@
+.fe {
+  font-family: 'Feather' !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fe-activity:before {
+  content: "\e900";
+}
+.fe-airplay:before {
+  content: "\e901";
+}
+.fe-alert-circle:before {
+  content: "\e902";
+}
+.fe-alert-octagon:before {
+  content: "\e903";
+}
+.fe-alert-triangle:before {
+  content: "\e904";
+}
+.fe-align-center:before {
+  content: "\e905";
+}
+.fe-align-justify:before {
+  content: "\e906";
+}
+.fe-align-left:before {
+  content: "\e907";
+}
+.fe-align-right:before {
+  content: "\e908";
+}
+.fe-anchor:before {
+  content: "\e909";
+}
+.fe-aperture:before {
+  content: "\e90a";
+}
+.fe-archive:before {
+  content: "\e90b";
+}
+.fe-arrow-down:before {
+  content: "\e90c";
+}
+.fe-arrow-down-circle:before {
+  content: "\e90d";
+}
+.fe-arrow-down-left:before {
+  content: "\e90e";
+}
+.fe-arrow-down-right:before {
+  content: "\e90f";
+}
+.fe-arrow-left:before {
+  content: "\e910";
+}
+.fe-arrow-left-circle:before {
+  content: "\e911";
+}
+.fe-arrow-right:before {
+  content: "\e912";
+}
+.fe-arrow-right-circle:before {
+  content: "\e913";
+}
+.fe-arrow-up:before {
+  content: "\e914";
+}
+.fe-arrow-up-circle:before {
+  content: "\e915";
+}
+.fe-arrow-up-left:before {
+  content: "\e916";
+}
+.fe-arrow-up-right:before {
+  content: "\e917";
+}
+.fe-at-sign:before {
+  content: "\e918";
+}
+.fe-award:before {
+  content: "\e919";
+}
+.fe-bar-chart:before {
+  content: "\e91a";
+}
+.fe-bar-chart-2:before {
+  content: "\e91b";
+}
+.fe-battery:before {
+  content: "\e91c";
+}
+.fe-battery-charging:before {
+  content: "\e91d";
+}
+.fe-bell:before {
+  content: "\e91e";
+}
+.fe-bell-off:before {
+  content: "\e91f";
+}
+.fe-bluetooth:before {
+  content: "\e920";
+}
+.fe-bold:before {
+  content: "\e921";
+}
+.fe-book:before {
+  content: "\e922";
+}
+.fe-book-open:before {
+  content: "\e923";
+}
+.fe-bookmark:before {
+  content: "\e924";
+}
+.fe-box:before {
+  content: "\e925";
+}
+.fe-briefcase:before {
+  content: "\e926";
+}
+.fe-calendar:before {
+  content: "\e927";
+}
+.fe-camera:before {
+  content: "\e928";
+}
+.fe-camera-off:before {
+  content: "\e929";
+}
+.fe-cast:before {
+  content: "\e92a";
+}
+.fe-check:before {
+  content: "\e92b";
+}
+.fe-check-circle:before {
+  content: "\e92c";
+}
+.fe-check-square:before {
+  content: "\e92d";
+}
+.fe-chevron-down:before {
+  content: "\e92e";
+}
+.fe-chevron-left:before {
+  content: "\e92f";
+}
+.fe-chevron-right:before {
+  content: "\e930";
+}
+.fe-chevron-up:before {
+  content: "\e931";
+}
+.fe-chevrons-down:before {
+  content: "\e932";
+}
+.fe-chevrons-left:before {
+  content: "\e933";
+}
+.fe-chevrons-right:before {
+  content: "\e934";
+}
+.fe-chevrons-up:before {
+  content: "\e935";
+}
+.fe-chrome:before {
+  content: "\e936";
+}
+.fe-circle:before {
+  content: "\e937";
+}
+.fe-clipboard:before {
+  content: "\e938";
+}
+.fe-clock:before {
+  content: "\e939";
+}
+.fe-cloud:before {
+  content: "\e93a";
+}
+.fe-cloud-drizzle:before {
+  content: "\e93b";
+}
+.fe-cloud-lightning:before {
+  content: "\e93c";
+}
+.fe-cloud-off:before {
+  content: "\e93d";
+}
+.fe-cloud-rain:before {
+  content: "\e93e";
+}
+.fe-cloud-snow:before {
+  content: "\e93f";
+}
+.fe-code:before {
+  content: "\e940";
+}
+.fe-codepen:before {
+  content: "\e941";
+}
+.fe-command:before {
+  content: "\e942";
+}
+.fe-compass:before {
+  content: "\e943";
+}
+.fe-copy:before {
+  content: "\e944";
+}
+.fe-corner-down-left:before {
+  content: "\e945";
+}
+.fe-corner-down-right:before {
+  content: "\e946";
+}
+.fe-corner-left-down:before {
+  content: "\e947";
+}
+.fe-corner-left-up:before {
+  content: "\e948";
+}
+.fe-corner-right-down:before {
+  content: "\e949";
+}
+.fe-corner-right-up:before {
+  content: "\e94a";
+}
+.fe-corner-up-left:before {
+  content: "\e94b";
+}
+.fe-corner-up-right:before {
+  content: "\e94c";
+}
+.fe-cpu:before {
+  content: "\e94d";
+}
+.fe-credit-card:before {
+  content: "\e94e";
+}
+.fe-crop:before {
+  content: "\e94f";
+}
+.fe-crosshair:before {
+  content: "\e950";
+}
+.fe-database:before {
+  content: "\e951";
+}
+.fe-delete:before {
+  content: "\e952";
+}
+.fe-disc:before {
+  content: "\e953";
+}
+.fe-dollar-sign:before {
+  content: "\e954";
+}
+.fe-download:before {
+  content: "\e955";
+}
+.fe-download-cloud:before {
+  content: "\e956";
+}
+.fe-droplet:before {
+  content: "\e957";
+}
+.fe-edit:before {
+  content: "\e958";
+}
+.fe-edit-2:before {
+  content: "\e959";
+}
+.fe-edit-3:before {
+  content: "\e95a";
+}
+.fe-external-link:before {
+  content: "\e95b";
+}
+.fe-eye:before {
+  content: "\e95c";
+}
+.fe-eye-off:before {
+  content: "\e95d";
+}
+.fe-facebook:before {
+  content: "\e95e";
+}
+.fe-fast-forward:before {
+  content: "\e95f";
+}
+.fe-feather:before {
+  content: "\e960";
+}
+.fe-file:before {
+  content: "\e961";
+}
+.fe-file-minus:before {
+  content: "\e962";
+}
+.fe-file-plus:before {
+  content: "\e963";
+}
+.fe-file-text:before {
+  content: "\e964";
+}
+.fe-film:before {
+  content: "\e965";
+}
+.fe-filter:before {
+  content: "\e966";
+}
+.fe-flag:before {
+  content: "\e967";
+}
+.fe-folder:before {
+  content: "\e968";
+}
+.fe-folder-minus:before {
+  content: "\e969";
+}
+.fe-folder-plus:before {
+  content: "\e96a";
+}
+.fe-gift:before {
+  content: "\e96b";
+}
+.fe-git-branch:before {
+  content: "\e96c";
+}
+.fe-git-commit:before {
+  content: "\e96d";
+}
+.fe-git-merge:before {
+  content: "\e96e";
+}
+.fe-git-pull-request:before {
+  content: "\e96f";
+}
+.fe-github:before {
+  content: "\e970";
+}
+.fe-gitlab:before {
+  content: "\e971";
+}
+.fe-globe:before {
+  content: "\e972";
+}
+.fe-grid:before {
+  content: "\e973";
+}
+.fe-hard-drive:before {
+  content: "\e974";
+}
+.fe-hash:before {
+  content: "\e975";
+}
+.fe-headphones:before {
+  content: "\e976";
+}
+.fe-heart:before {
+  content: "\e977";
+}
+.fe-help-circle:before {
+  content: "\e978";
+}
+.fe-home:before {
+  content: "\e979";
+}
+.fe-image:before {
+  content: "\e97a";
+}
+.fe-inbox:before {
+  content: "\e97b";
+}
+.fe-info:before {
+  content: "\e97c";
+}
+.fe-instagram:before {
+  content: "\e97d";
+}
+.fe-italic:before {
+  content: "\e97e";
+}
+.fe-layers:before {
+  content: "\e97f";
+}
+.fe-layout:before {
+  content: "\e980";
+}
+.fe-life-buoy:before {
+  content: "\e981";
+}
+.fe-link:before {
+  content: "\e982";
+}
+.fe-link-2:before {
+  content: "\e983";
+}
+.fe-linkedin:before {
+  content: "\e984";
+}
+.fe-list:before {
+  content: "\e985";
+}
+.fe-loader:before {
+  content: "\e986";
+}
+.fe-lock:before {
+  content: "\e987";
+}
+.fe-log-in:before {
+  content: "\e988";
+}
+.fe-log-out:before {
+  content: "\e989";
+}
+.fe-mail:before {
+  content: "\e98a";
+}
+.fe-map:before {
+  content: "\e98b";
+}
+.fe-map-pin:before {
+  content: "\e98c";
+}
+.fe-maximize:before {
+  content: "\e98d";
+}
+.fe-maximize-2:before {
+  content: "\e98e";
+}
+.fe-menu:before {
+  content: "\e98f";
+}
+.fe-message-circle:before {
+  content: "\e990";
+}
+.fe-message-square:before {
+  content: "\e991";
+}
+.fe-mic:before {
+  content: "\e992";
+}
+.fe-mic-off:before {
+  content: "\e993";
+}
+.fe-minimize:before {
+  content: "\e994";
+}
+.fe-minimize-2:before {
+  content: "\e995";
+}
+.fe-minus:before {
+  content: "\e996";
+}
+.fe-minus-circle:before {
+  content: "\e997";
+}
+.fe-minus-square:before {
+  content: "\e998";
+}
+.fe-monitor:before {
+  content: "\e999";
+}
+.fe-moon:before {
+  content: "\e99a";
+}
+.fe-more-horizontal:before {
+  content: "\e99b";
+}
+.fe-more-vertical:before {
+  content: "\e99c";
+}
+.fe-move:before {
+  content: "\e99d";
+}
+.fe-music:before {
+  content: "\e99e";
+}
+.fe-navigation:before {
+  content: "\e99f";
+}
+.fe-navigation-2:before {
+  content: "\e9a0";
+}
+.fe-octagon:before {
+  content: "\e9a1";
+}
+.fe-package:before {
+  content: "\e9a2";
+}
+.fe-paperclip:before {
+  content: "\e9a3";
+}
+.fe-pause:before {
+  content: "\e9a4";
+}
+.fe-pause-circle:before {
+  content: "\e9a5";
+}
+.fe-percent:before {
+  content: "\e9a6";
+}
+.fe-phone:before {
+  content: "\e9a7";
+}
+.fe-phone-call:before {
+  content: "\e9a8";
+}
+.fe-phone-forwarded:before {
+  content: "\e9a9";
+}
+.fe-phone-incoming:before {
+  content: "\e9aa";
+}
+.fe-phone-missed:before {
+  content: "\e9ab";
+}
+.fe-phone-off:before {
+  content: "\e9ac";
+}
+.fe-phone-outgoing:before {
+  content: "\e9ad";
+}
+.fe-pie-chart:before {
+  content: "\e9ae";
+}
+.fe-play:before {
+  content: "\e9af";
+}
+.fe-play-circle:before {
+  content: "\e9b0";
+}
+.fe-plus:before {
+  content: "\e9b1";
+}
+.fe-plus-circle:before {
+  content: "\e9b2";
+}
+.fe-plus-square:before {
+  content: "\e9b3";
+}
+.fe-pocket:before {
+  content: "\e9b4";
+}
+.fe-power:before {
+  content: "\e9b5";
+}
+.fe-printer:before {
+  content: "\e9b6";
+}
+.fe-radio:before {
+  content: "\e9b7";
+}
+.fe-refresh-ccw:before {
+  content: "\e9b8";
+}
+.fe-refresh-cw:before {
+  content: "\e9b9";
+}
+.fe-repeat:before {
+  content: "\e9ba";
+}
+.fe-rewind:before {
+  content: "\e9bb";
+}
+.fe-rotate-ccw:before {
+  content: "\e9bc";
+}
+.fe-rotate-cw:before {
+  content: "\e9bd";
+}
+.fe-rss:before {
+  content: "\e9be";
+}
+.fe-save:before {
+  content: "\e9bf";
+}
+.fe-scissors:before {
+  content: "\e9c0";
+}
+.fe-search:before {
+  content: "\e9c1";
+}
+.fe-send:before {
+  content: "\e9c2";
+}
+.fe-server:before {
+  content: "\e9c3";
+}
+.fe-settings:before {
+  content: "\e9c4";
+}
+.fe-share:before {
+  content: "\e9c5";
+}
+.fe-share-2:before {
+  content: "\e9c6";
+}
+.fe-shield:before {
+  content: "\e9c7";
+}
+.fe-shield-off:before {
+  content: "\e9c8";
+}
+.fe-shopping-bag:before {
+  content: "\e9c9";
+}
+.fe-shopping-cart:before {
+  content: "\e9ca";
+}
+.fe-shuffle:before {
+  content: "\e9cb";
+}
+.fe-sidebar:before {
+  content: "\e9cc";
+}
+.fe-skip-back:before {
+  content: "\e9cd";
+}
+.fe-skip-forward:before {
+  content: "\e9ce";
+}
+.fe-slack:before {
+  content: "\e9cf";
+}
+.fe-slash:before {
+  content: "\e9d0";
+}
+.fe-sliders:before {
+  content: "\e9d1";
+}
+.fe-smartphone:before {
+  content: "\e9d2";
+}
+.fe-speaker:before {
+  content: "\e9d3";
+}
+.fe-square:before {
+  content: "\e9d4";
+}
+.fe-star:before {
+  content: "\e9d5";
+}
+.fe-stop-circle:before {
+  content: "\e9d6";
+}
+.fe-sun:before {
+  content: "\e9d7";
+}
+.fe-sunrise:before {
+  content: "\e9d8";
+}
+.fe-sunset:before {
+  content: "\e9d9";
+}
+.fe-tablet:before {
+  content: "\e9da";
+}
+.fe-tag:before {
+  content: "\e9db";
+}
+.fe-target:before {
+  content: "\e9dc";
+}
+.fe-terminal:before {
+  content: "\e9dd";
+}
+.fe-thermometer:before {
+  content: "\e9de";
+}
+.fe-thumbs-down:before {
+  content: "\e9df";
+}
+.fe-thumbs-up:before {
+  content: "\e9e0";
+}
+.fe-toggle-left:before {
+  content: "\e9e1";
+}
+.fe-toggle-right:before {
+  content: "\e9e2";
+}
+.fe-trash:before {
+  content: "\e9e3";
+}
+.fe-trash-2:before {
+  content: "\e9e4";
+}
+.fe-trending-down:before {
+  content: "\e9e5";
+}
+.fe-trending-up:before {
+  content: "\e9e6";
+}
+.fe-triangle:before {
+  content: "\e9e7";
+}
+.fe-truck:before {
+  content: "\e9e8";
+}
+.fe-tv:before {
+  content: "\e9e9";
+}
+.fe-twitter:before {
+  content: "\e9ea";
+}
+.fe-type:before {
+  content: "\e9eb";
+}
+.fe-umbrella:before {
+  content: "\e9ec";
+}
+.fe-underline:before {
+  content: "\e9ed";
+}
+.fe-unlock:before {
+  content: "\e9ee";
+}
+.fe-upload:before {
+  content: "\e9ef";
+}
+.fe-upload-cloud:before {
+  content: "\e9f0";
+}
+.fe-user:before {
+  content: "\e9f1";
+}
+.fe-user-check:before {
+  content: "\e9f2";
+}
+.fe-user-minus:before {
+  content: "\e9f3";
+}
+.fe-user-plus:before {
+  content: "\e9f4";
+}
+.fe-user-x:before {
+  content: "\e9f5";
+}
+.fe-users:before {
+  content: "\e9f6";
+}
+.fe-video:before {
+  content: "\e9f7";
+}
+.fe-video-off:before {
+  content: "\e9f8";
+}
+.fe-voicemail:before {
+  content: "\e9f9";
+}
+.fe-volume:before {
+  content: "\e9fa";
+}
+.fe-volume-1:before {
+  content: "\e9fb";
+}
+.fe-volume-2:before {
+  content: "\e9fc";
+}
+.fe-volume-x:before {
+  content: "\e9fd";
+}
+.fe-watch:before {
+  content: "\e9fe";
+}
+.fe-wifi:before {
+  content: "\e9ff";
+}
+.fe-wifi-off:before {
+  content: "\ea00";
+}
+.fe-wind:before {
+  content: "\ea01";
+}
+.fe-x:before {
+  content: "\ea02";
+}
+.fe-x-circle:before {
+  content: "\ea03";
+}
+.fe-x-square:before {
+  content: "\ea04";
+}
+.fe-youtube:before {
+  content: "\ea05";
+}
+.fe-zap:before {
+  content: "\ea06";
+}
+.fe-zap-off:before {
+  content: "\ea07";
+}
+.fe-zoom-in:before {
+  content: "\ea08";
+}
+.fe-zoom-out:before {
+  content: "\ea09";
+}
diff --git a/explorer/src/scss/dashkit/vendors/_flatpickr.scss b/explorer/src/scss/dashkit/vendor/_flatpickr.scss
similarity index 99%
rename from explorer/src/scss/dashkit/vendors/_flatpickr.scss
rename to explorer/src/scss/dashkit/vendor/_flatpickr.scss
index 06bcf7a03..d2878e155 100644
--- a/explorer/src/scss/dashkit/vendors/_flatpickr.scss
+++ b/explorer/src/scss/dashkit/vendor/_flatpickr.scss
@@ -65,5 +65,4 @@
     border-radius: 0;
     box-shadow: -5px 0 0 $light, 5px 0 0 $light;
   }
-
 }
diff --git a/explorer/src/scss/dashkit/vendor/_highlight.scss b/explorer/src/scss/dashkit/vendor/_highlight.scss
new file mode 100644
index 000000000..2438e178f
--- /dev/null
+++ b/explorer/src/scss/dashkit/vendor/_highlight.scss
@@ -0,0 +1,8 @@
+//
+// highlight.scss
+// Highlight.js plugin overrides
+//
+
+.hljs {
+  padding: 0;
+}
diff --git a/explorer/src/scss/dashkit/vendor/_list.scss b/explorer/src/scss/dashkit/vendor/_list.scss
new file mode 100644
index 000000000..e992e1bc2
--- /dev/null
+++ b/explorer/src/scss/dashkit/vendor/_list.scss
@@ -0,0 +1,44 @@
+//
+// list.scss
+// List.js plugin overrides
+//
+
+@use 'sass:math';
+
+// Pagination
+
+.page {
+  @extend .page-link;
+}
+
+.list-pagination > li + li {
+  margin-left: -$pagination-border-width;
+}
+
+
+// Alert
+
+.list-alert {
+  position: fixed;
+  bottom: $spacer;
+  left: 50%;
+  z-index: $zindex-fixed;
+  min-width: $list-alert-min-width;
+  margin-bottom: 0;
+  transform: translateX(-50%);
+}
+
+.list-alert:not(.show) {
+  pointer-events: none;
+}
+
+@include media-breakpoint-up($navbar-vertical-expand-breakpoint) {
+  .navbar-vertical:not(.navbar-vertical-sm):not([style*="display: none"]) ~ .main-content .list-alert {
+    left: calc(50% + #{math.div($navbar-vertical-width, 2)});
+  }
+}
+
+.list-alert .btn-close {
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/explorer/src/scss/dashkit/vendors/_quill.scss b/explorer/src/scss/dashkit/vendor/_quill.scss
similarity index 95%
rename from explorer/src/scss/dashkit/vendors/_quill.scss
rename to explorer/src/scss/dashkit/vendor/_quill.scss
index ac9add03a..251c18ba8 100644
--- a/explorer/src/scss/dashkit/vendors/_quill.scss
+++ b/explorer/src/scss/dashkit/vendor/_quill.scss
@@ -57,8 +57,9 @@
     border: 0;
   }
 
-  // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus($ignore-warning: true);
+  &:focus {
+    border-color: $input-focus-border-color;
+  }
 }
 
 .ql-hidden {
@@ -148,6 +149,7 @@
 
 .ql-tooltip {
   position: absolute;
+  z-index: $zindex-tooltip;
   display: flex;
   flex-wrap: nowrap;
   width: 18.5rem;
@@ -187,7 +189,7 @@
 
 .ql-tooltip .ql-preview {
   width: 100%;
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
   @include transition($btn-transition);
 }
 
@@ -231,11 +233,11 @@
   user-select: none;
   border: $btn-border-width solid transparent;
   cursor: pointer;
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
   @include transition($btn-transition);
 
   // Share hover and focus styles
-  @include hover-focus {
+  &:hover, &:focus {
     text-decoration: none;
   }
 
diff --git a/explorer/src/scss/dashkit/vendors/_list.scss b/explorer/src/scss/dashkit/vendors/_list.scss
deleted file mode 100644
index 1eade7a5d..000000000
--- a/explorer/src/scss/dashkit/vendors/_list.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// list.scss
-//
-
-[data-toggle="lists"] .pagination > li {
-  @extend .page-item;
-}
-
-[data-toggle="lists"] .pagination .page {
-  @extend .page-link;
-}
diff --git a/explorer/src/scss/dashkit/vendors/_select2.scss b/explorer/src/scss/dashkit/vendors/_select2.scss
deleted file mode 100644
index 9c70da9f1..000000000
--- a/explorer/src/scss/dashkit/vendors/_select2.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-//
-// select2.scss
-// Select2 plugin overrides
-//
-
-[class*="select2"] {
-  display: block;
-}
-
-.select2 {
-  width: 100% !important;
-}
-
-.select2-hidden-accessible {
-  display: none;
-}
-
-.select2-selection[aria-expanded="true"] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.select2-container {
-  display: block;
-}
-
-.select2-dropdown {
-  margin-top: -$input-border-width;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.select2-search--dropdown {
-  padding: $dropdown-item-padding-y $input-padding-x;
-}
-
-.select2-search--dropdown .select2-search__field {
-  width: 100%;
-  height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  background-color: $input-bg;
-  border: $input-border-width solid $input-border-color;
-  border-radius: $input-border-radius-sm;
-  line-height: $input-line-height-sm;
-  font-size: $input-font-size-sm;
-  color: $input-color;
-  transition: $input-transition;
-
-  &:focus {
-    border-color: $input-focus-border-color;
-    box-shadow: $input-focus-box-shadow;
-    outline: none;
-  }
-}
-
-.select2-results__options {
-  padding-left: 0;
-  margin-bottom: 0;
-}
-
-.select2-results__option {
-  padding: $dropdown-item-padding-y $input-padding-x;
-  color: $dropdown-link-color;
-
-  &:not(.select2-results__message) {
-    cursor: pointer;
-
-    @include hover-focus {
-      color: $dropdown-link-hover-color;
-    }
-  }
-}
-
-.select2-results__option[aria-selected="true"],
-.select2-results__option--highlighted {
-  color: $dropdown-link-active-color;
-}
-
-.select2-selection--multiple {
-  height: auto;
-}
-
-.select2-selection__rendered {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin: 0 -.25rem -.25rem 0;
-}
-
-.select2-selection__choice {
-  display: inline-flex;
-  align-items: center;
-  padding-left: .375rem;
-  padding-right: .375rem;
-  margin: 0 .25rem .25rem 0;
-  font-size: $font-size-sm;
-  background-color: $light;
-  border-radius: $border-radius-xs;
-}
-
-.select2-selection__choice__remove {
-  order: 2;
-  margin-left: .5rem;
-  color: $text-muted;
-  cursor: pointer;
-
-  @include hover {
-    color: $body-color;
-  }
-}
-
-.select2-search--inline .select2-search__field {
-  height: calc(1em * #{$input-line-height});
-  padding-bottom: .25rem;
-  background-color: transparent;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  color: $input-color;
-
-  &::placeholder {
-    color: $input-placeholder-color;
-  }
-}
-
-.select2-selection__placeholder {
-  color: $input-placeholder-color;
-}
diff --git a/explorer/src/scss/theme-dark.scss b/explorer/src/scss/theme-dark.scss
index c88aa18db..c57f888f6 100644
--- a/explorer/src/scss/theme-dark.scss
+++ b/explorer/src/scss/theme-dark.scss
@@ -5,11 +5,14 @@
  * to ensure cascade of styles.
  */
 
+$path-to-img: "/img/dashkit" !default;
+$path-to-fonts: "/fonts" !default;
+
  // Icon font
 @import "../fonts/feather/feather";
 
 // Bootstrap functions
-@import '~bootstrap/scss/functions.scss';
+@import '~bootstrap/scss/functions';
 
 // Custom variables
 @import 'solana-variables-dark';
@@ -24,10 +27,10 @@
 @import 'dashkit/variables';
 
 // Bootstrap core
-@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap/scss/bootstrap';
 
 // Dashkit core
-@import 'dashkit/dashkit';
+@import 'dashkit/theme';
 
 // Dark mode overrides
 @import 'dashkit/dark/overrides-dark';
diff --git a/explorer/src/utils/index.tsx b/explorer/src/utils/index.tsx
index 630c88099..a9097fe57 100644
--- a/explorer/src/utils/index.tsx
+++ b/explorer/src/utils/index.tsx
@@ -66,7 +66,7 @@ export function SolBalance({
   return (
     <span>
       ◎
-      <span className="text-monospace">
+      <span className="font-monospace">
         {lamportsToSolString(lamports, maximumFractionDigits)}
       </span>
     </span>