diff --git a/src/assets/styles/settings/_variables.css b/src/assets/styles/settings/_variables.css
index 446a5a8b7..0058d28df 100644
--- a/src/assets/styles/settings/_variables.css
+++ b/src/assets/styles/settings/_variables.css
@@ -26,4 +26,5 @@
 }
 
 @custom-media --desktop (min-width: 1280px);
+@custom-media --mobile (min-width: 640px);
 
diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index 9b1b769d1..d5e8b427f 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -26,7 +26,7 @@
             </hint-tooltip>
             Address
           </th>
-          <td>
+          <td class="account-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="accountDetails.id"/>
             </div>
@@ -44,7 +44,7 @@
             </hint-tooltip>
             Balance
           </th>
-          <td>
+          <td class="account-details-panel__data">
             <price-label :price="accountDetails.balance"/>
           </td>
         </tr>
@@ -56,7 +56,7 @@
             </hint-tooltip>
             Value
           </th>
-          <td>
+          <td class="account-details-panel__data">
             {{ sanitizedPrice }}
           </td>
         </tr>
@@ -67,7 +67,7 @@
             </hint-tooltip>
             Transactions
           </th>
-          <td>
+          <td class="account-details-panel__data">
             {{ formatNumber(accountDetails.totalTransactionsCount) }}
           </td>
         </tr>
@@ -80,7 +80,7 @@
             </hint-tooltip>
             Is Generalized
           </th>
-          <td>
+          <td class="account-details-panel__data">
             <app-chip size="sm">
               Generalized
             </app-chip>
@@ -95,7 +95,7 @@
             </hint-tooltip>
             Contract Id
           </th>
-          <td>
+          <td class="account-details-panel__data">
             <app-link :to="`/contracts/${accountDetails.contractId}`">
               {{ accountDetails.contractId }}
             </app-link>
@@ -110,7 +110,7 @@
             </hint-tooltip>
             Nonce
           </th>
-          <td>
+          <td class="account-details-panel__data">
             {{ accountDetails.nonce }}
           </td>
         </tr>
@@ -121,7 +121,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="account-details-panel__data">
             <app-link
               :to="accountNodeUrl"
               class="account-details-panel__link">
@@ -163,10 +163,22 @@ const sanitizedPrice = computed(() =>
 <style scoped>
 .account-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -174,6 +186,15 @@ const sanitizedPrice = computed(() =>
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/AeCoinPanel.vue b/src/components/AeCoinPanel.vue
index 8c361a993..bd992db30 100644
--- a/src/components/AeCoinPanel.vue
+++ b/src/components/AeCoinPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Symbol
           </th>
-          <td>
+          <td class="ae-coin-panel__data">
             <div class="ae-coin-panel__link">
               <img
                 class="ae-coin-panel__icon"
@@ -26,7 +26,7 @@
             </hint-tooltip>
             Price
           </th>
-          <td>
+          <td class="ae-coin-panel__data">
             $ {{ formatNullable(price) }}
             <trend-chip :delta="priceChange"/>
           </td>
@@ -38,7 +38,7 @@
             </hint-tooltip>
             Total Supply
           </th>
-          <td>
+          <td class="ae-coin-panel__data">
             <price-label :price="MAX_AE_DISTRIBUTION"/>
           </td>
         </tr>
@@ -49,7 +49,7 @@
             </hint-tooltip>
             Circulating Supply
           </th>
-          <td>
+          <td class="ae-coin-panel__data">
             <price-label :price="totalTokenSupply"/>
           </td>
         </tr>
@@ -60,7 +60,7 @@
             </hint-tooltip>
             Decimals
           </th>
-          <td>
+          <td class="ae-coin-panel__data">
             18
           </td>
         </tr>
@@ -93,10 +93,22 @@ defineProps({
 <style scoped>
 .ae-coin-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -104,6 +116,15 @@ defineProps({
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
@@ -114,10 +135,6 @@ defineProps({
     width: 28px;
     height: 28px;
 
-    @media (--desktop) {
-      width: 24px;
-      height: 24px;
-    }
   }
 }
 </style>
diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
index 391fce375..93908c224 100644
--- a/src/components/ContractDetailsPanel.vue
+++ b/src/components/ContractDetailsPanel.vue
@@ -11,7 +11,7 @@
             </hint-tooltip>
             Smart Contract ID
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="contractDetails.id"/>
             </div>
@@ -32,7 +32,7 @@
             </hint-tooltip>
             Type
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-chip size="sm">
               {{ contractDetails.contractType }}
             </app-chip>
@@ -48,7 +48,7 @@
             </hint-tooltip>
             Token
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <div class="contract-details-panel__container">
               <app-link
                 v-if="contractDetails.contractType === 'AEX-9'"
@@ -75,7 +75,7 @@
             </hint-tooltip>
             Create Transaction
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-link :to="`/transactions/${contractDetails.createTransactionHash}`">
               <span class="u-hidden-mobile">
                 {{ contractDetails.createTransactionHash }}
@@ -93,7 +93,7 @@
             </hint-tooltip>
             Created Height
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-link :to="`/keyblocks/${contractDetails.creationHeight}`">
               {{ contractDetails.creationHeight }}
             </app-link>
@@ -106,7 +106,7 @@
             </hint-tooltip>
             Created
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <timestamp-label
               :timestamp="contractDetails.creationDate"
               :is-extended="true"/>
@@ -121,7 +121,7 @@
             </hint-tooltip>
             Created By
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.createdBy}`">
               <span class="u-hidden-mobile">
                 {{ contractDetails.createdBy }}
@@ -141,7 +141,7 @@
             </hint-tooltip>
             Bytecode
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <copy-chip
               :label="formatEllipseHash(contractDetails.bytecode)"
               :clipboard-text="contractDetails.bytecode"/>
@@ -154,7 +154,7 @@
             </hint-tooltip>
             Smart Contract’s Account
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.contractAccount}`">
               <span class="u-hidden-mobile">
                 {{ contractDetails.contractAccount }}
@@ -172,7 +172,7 @@
             </hint-tooltip>
             Smart Contract's Account Balance
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <price-label :price="0"/>
           </td>
         </tr>
@@ -183,7 +183,7 @@
             </hint-tooltip>
             Smart Contract Calls
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             {{ contractDetails.callsCount }}
           </td>
         </tr>
@@ -194,7 +194,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="contract-details-panel__data">
             <app-link
               :to="contractNodeUrl"
               class="contract-details-panel__link">
@@ -241,19 +241,36 @@ const contractMiddlewareUrl = computed(() =>
 <style scoped>
 .contract-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
     }
   }
 
-  &__row:last-of-type &__table-header {
-    border-bottom: 0;
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
+    }
+  }
+
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
   }
 
-  &__container {
-    display: flex;
+  &__row:last-of-type &__table-header {
+    border-bottom: 0;
   }
 
   &__link {
diff --git a/src/components/KeyblockDetailsPanel.vue b/src/components/KeyblockDetailsPanel.vue
index 92cd41f34..779850c69 100644
--- a/src/components/KeyblockDetailsPanel.vue
+++ b/src/components/KeyblockDetailsPanel.vue
@@ -16,7 +16,7 @@
             </hint-tooltip>
             Hash
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="keyblockDetails.hash"/>
             </div>
@@ -34,7 +34,7 @@
             </hint-tooltip>
             Height
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <div class="keyblock-details-panel__controls">
               <pagination-button
                 class="keyblock-details-panel__button--prev"
@@ -60,7 +60,7 @@
             </hint-tooltip>
             Time
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <timestamp-label
               :timestamp="keyblockDetails.mined"
               :is-extended="true"/>
@@ -73,7 +73,7 @@
             </hint-tooltip>
             Miner
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <span class="u-hidden-mobile">
               {{ keyblockDetails.miner }}
             </span>
@@ -89,7 +89,7 @@
             </hint-tooltip>
             Beneficiary
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <app-link :to="`/accounts/${keyblockDetails.beneficiary}`">
               <span class="u-hidden-mobile">
                 {{ keyblockDetails.beneficiary }}
@@ -107,7 +107,7 @@
             </hint-tooltip>
             Reward
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <price-label :price="keyblockDetails.blockReward"/>
           </td>
         </tr>
@@ -118,7 +118,7 @@
             </hint-tooltip>
             Microblocks Count
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             {{ formatNumber(keyblockDetails.microBlocksCount) }}
           </td>
         </tr>
@@ -129,7 +129,7 @@
             </hint-tooltip>
             Transactions Count
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             {{ formatNumber(keyblockDetails.transactionsCount) }}
           </td>
         </tr>
@@ -140,7 +140,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="keyblock-details-panel__data">
             <app-link
               :to="keyblockNodeUrl"
               class="keyblock-details-panel__link">
@@ -192,10 +192,22 @@ const isNextKeyblockMined = computed(() =>
 <style scoped>
 .keyblock-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -203,6 +215,15 @@ const isNextKeyblockMined = computed(() =>
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/MicroblockDetailsPanel.vue b/src/components/MicroblockDetailsPanel.vue
index 2d868236d..5deaf0c95 100644
--- a/src/components/MicroblockDetailsPanel.vue
+++ b/src/components/MicroblockDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Hash
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="microblockDetails.hash"/>
             </div>
@@ -27,7 +27,7 @@
             </hint-tooltip>
             Keyblock
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             <app-link :to="`/keyblocks/${microblockDetails.prevKeyHash}`">
               <span class="u-hidden-mobile">
                 {{ microblockDetails.prevKeyHash }}
@@ -45,7 +45,7 @@
             </hint-tooltip>
             Height
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             <app-link :to="`/keyblocks/${microblockDetails.height}`">
               {{ microblockDetails.height }}
             </app-link>
@@ -58,7 +58,7 @@
             </hint-tooltip>
             Created
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             <timestamp-label
               :timestamp="microblockDetails.time"
               :is-extended="true"/>
@@ -71,7 +71,7 @@
             </hint-tooltip>
             Transactions Count
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             {{ formatNumber(microblockDetails.transactionsCount) }}
           </td>
         </tr>
@@ -82,7 +82,7 @@
             </hint-tooltip>
             Gas Limit
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             {{ microblockDetails.gas }}
           </td>
         </tr>
@@ -93,7 +93,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="microblock-details-panel__data">
             <app-link
               :to="microblockNodeUrl"
               class="microblock-details-panel__link">
@@ -141,10 +141,22 @@ const microblockMiddlewareUrl = computed(() =>
 <style scoped>
 .microblock-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -152,6 +164,15 @@ const microblockMiddlewareUrl = computed(() =>
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/NameDetailsPanel.vue b/src/components/NameDetailsPanel.vue
index 8a5175afb..1cd4f4969 100644
--- a/src/components/NameDetailsPanel.vue
+++ b/src/components/NameDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Name
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <copy-chip :label="name.name"/>
           </td>
         </tr>
@@ -22,7 +22,7 @@
             </hint-tooltip>
             {{ states.includes('expired') ? "Last Owner" : "Owner" }}
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <app-link :to="`/accounts/${name.owner}`">
               <span class="u-hidden-mobile">
                 {{ name.owner }}
@@ -42,7 +42,7 @@
             </hint-tooltip>
             Highest Bidder
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <app-link :to="`/accounts/${name.bidder}`">
               <span class="u-hidden-mobile">
                 {{ name.bidder }}
@@ -62,10 +62,8 @@
             </hint-tooltip>
             Highest Bid
           </th>
-          <td>
-            <price-label
-              class="name-details-panel__data"
-              :price="name.bid"/>
+          <td class="name-details-panel__data">
+            <price-label :price="name.bid"/>
           </td>
         </tr>
         <tr
@@ -77,7 +75,7 @@
             </hint-tooltip>
             Owned Since Height
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <app-link
               :to="`/keyblocks/${name.activatedHeight}`">
               {{ name.activatedHeight }}
@@ -93,7 +91,7 @@
             </hint-tooltip>
             Owned Since
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <timestamp-label
               :timestamp="name.activated"
               :is-extended="true"/>
@@ -106,7 +104,7 @@
             </hint-tooltip>
             {{ stateLabel }} Height
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <app-link
               :to="`/keyblocks/${name.auctionEndsHeight || name.expirationHeight}`">
               {{ name.auctionEndsHeight || name.expirationHeight }}
@@ -120,7 +118,7 @@
             </hint-tooltip>
             {{ stateLabel }}
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <timestamp-label
               :timestamp="name.auctionEnds || name.expiration"
               :is-extended="true"/>
@@ -133,7 +131,7 @@
             </hint-tooltip>
             Status
           </th>
-          <td>
+          <td class="name-details-panel__data">
             <div class="name-details-panel__container">
               <app-chip
                 v-for="state in states"
@@ -198,10 +196,22 @@ function getLabel(state) {
 <style scoped>
 .name-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -209,9 +219,13 @@ function getLabel(state) {
     border-bottom: 0;
   }
 
-  &__container {
-    display: flex;
-    gap: var(--space-1);
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
   }
 }
 </style>
diff --git a/src/components/NftDetailsPanel.vue b/src/components/NftDetailsPanel.vue
index 6d177615e..da4750d7f 100644
--- a/src/components/NftDetailsPanel.vue
+++ b/src/components/NftDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Contract ID
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="nftDetails.contractId"/>
             </div>
@@ -27,7 +27,7 @@
             </hint-tooltip>
             Collection Name
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             {{ nftDetails.name }}
           </td>
         </tr>
@@ -38,7 +38,7 @@
             </hint-tooltip>
             Owners
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             {{ nftDetails.nftOwners }}
           </td>
         </tr>
@@ -49,7 +49,7 @@
             </hint-tooltip>
             Amount
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             {{ nftDetails.nftsAmount }}
           </td>
         </tr>
@@ -61,7 +61,7 @@
             </hint-tooltip>
             Extensions
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             <div
               v-if="!!nftDetails.extensions.length"
               class="nft-details-panel__extensions">
@@ -86,7 +86,7 @@
             </hint-tooltip>
             Token limit
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             {{ nftDetails.tokenLimit }}
           </td>
         </tr>
@@ -99,7 +99,7 @@
               {{ nftsHints.templateLimit }}
             </hint-tooltip>
           </th>
-          <td>
+          <td class="nft-details-panel__data">
             {{ nftDetails.templateLimit }}
           </td>
         </tr>
@@ -122,10 +122,22 @@ defineProps({
 <style scoped>
 .nft-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -133,6 +145,15 @@ defineProps({
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
@@ -146,10 +167,6 @@ defineProps({
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-1);
-
-    @media (--desktop) {
-      gap: 0 var(--space-1);
-    }
   }
 }
 </style>
diff --git a/src/components/OracleDetailsPanel.vue b/src/components/OracleDetailsPanel.vue
index b0bb6cae0..0b57fea97 100644
--- a/src/components/OracleDetailsPanel.vue
+++ b/src/components/OracleDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Oracle ID
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip
                 :label="oracleDetails.id"/>
@@ -28,7 +28,7 @@
             </hint-tooltip>
             Registered
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <div
               class="oracle-details-panel__container">
               <app-link
@@ -51,7 +51,7 @@
             </hint-tooltip>
             Last Extended
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <div
               v-if="oracleDetails.lastExtended"
               class="oracle-details-panel__container">
@@ -76,7 +76,7 @@
             </hint-tooltip>
             Last Queried
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <div
               v-if="oracleDetails.lastQueried"
               class="oracle-details-panel__container">
@@ -101,7 +101,7 @@
             </hint-tooltip>
             Expiration
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <div
               class="oracle-details-panel__container">
               <app-link
@@ -125,7 +125,7 @@
             </hint-tooltip>
             Query Fee
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <price-label :price="oracleDetails.fee"/>
           </td>
         </tr>
@@ -136,7 +136,7 @@
             </hint-tooltip>
             Query Format
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             {{ oracleDetails.queryFormat }}
           </td>
         </tr>
@@ -147,7 +147,7 @@
             </hint-tooltip>
             Response Format
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             {{ oracleDetails.responseFormat }}
           </td>
         </tr>
@@ -158,7 +158,7 @@
             </hint-tooltip>
             Operator
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <app-link
               :to="`/accounts/${oracleDetails.operator}`">
               <span class="u-hidden-mobile">
@@ -171,13 +171,13 @@
           </td>
         </tr>
         <tr>
-          <th class="contract-details-panel__table-header">
+          <th class="oracle-details-panel__table-header">
             <hint-tooltip>
               {{ oraclesHints.apiLinks }}
             </hint-tooltip>
             API links
           </th>
-          <td>
+          <td class="oracle-details-panel__data">
             <app-link
               :to="oracleNodeUrl"
               class="oracle-details-panel__link">
@@ -225,10 +225,22 @@ const oracleMiddlewareUrl = computed(() =>
 <style scoped>
 .oracle-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -236,10 +248,13 @@ const oracleMiddlewareUrl = computed(() =>
     border-bottom: 0;
   }
 
-  &__container {
-    display: flex;
-    align-content: center;
-    flex-wrap: wrap;
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
   }
 
   &__link {
diff --git a/src/components/StateChannelDetailsPanel.vue b/src/components/StateChannelDetailsPanel.vue
index 8f23f441b..cc7415778 100644
--- a/src/components/StateChannelDetailsPanel.vue
+++ b/src/components/StateChannelDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             State Channel ID
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="stateChannelDetails.id"/>
             </div>
@@ -27,7 +27,7 @@
             </hint-tooltip>
             Status
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-chip :variant="stateChannelDetails.isOpen ? 'success' : 'primary'">
               {{ stateChannelDetails.isOpen ? 'Open' : 'Closed' }}
             </app-chip>
@@ -40,7 +40,7 @@
             </hint-tooltip>
             Create Transaction
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-link :to="`/transactions/${stateChannelDetails.createTransactionHash}`">
               <span class="u-hidden-mobile">
                 {{ stateChannelDetails.createTransactionHash }}
@@ -58,7 +58,7 @@
             </hint-tooltip>
             Initial Amount
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <price-label :price="stateChannelDetails.initialAmount"/>
           </td>
         </tr>
@@ -69,7 +69,7 @@
             </hint-tooltip>
             Initiator
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-link :to="`/accounts/${stateChannelDetails.initiator}`">
               <span class="u-hidden-mobile">
                 {{ stateChannelDetails.initiator }}
@@ -87,7 +87,7 @@
             </hint-tooltip>
             Responder
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-link :to="`/accounts/${stateChannelDetails.responder}`">
               <span class="u-hidden-mobile">
                 {{ stateChannelDetails.responder }}
@@ -105,7 +105,7 @@
             </hint-tooltip>
             On-Chain TXs
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             {{ formatNumber(stateChannelDetails.onChainUpdates) }}
           </td>
         </tr>
@@ -116,7 +116,7 @@
             </hint-tooltip>
             Last Known Round
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             {{ formatNumber(stateChannelDetails.lastKnownRound) }}
           </td>
         </tr>
@@ -127,7 +127,7 @@
             </hint-tooltip>
             Locked
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <price-label :price="stateChannelDetails.aeLocked"/>
           </td>
         </tr>
@@ -138,7 +138,7 @@
             </hint-tooltip>
             Last Updated Height
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-link
               v-if="stateChannelDetails.lastUpdatedHeight"
               :to="`/keyblocks/${stateChannelDetails.lastUpdatedHeight}`">
@@ -156,7 +156,7 @@
             </hint-tooltip>
             Last Updated
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <timestamp-label
               v-if="stateChannelDetails.lastUpdated"
               :timestamp="stateChannelDetails.lastUpdated"
@@ -173,7 +173,7 @@
             </hint-tooltip>
             Last TX Type
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             {{ stateChannelDetails.lastTxType }}
           </td>
         </tr>
@@ -184,7 +184,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="state-channel-details-panel__data">
             <app-link
               :to="stateChannelMiddlewareUrl"
               class="state-channel-details-panel__link">
@@ -217,11 +217,24 @@ const stateChannelMiddlewareUrl = `${MIDDLEWARE_URL}/v3/channels/${props.stateCh
 
 <style scoped>
 .state-channel-details-panel {
+
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -229,6 +242,15 @@ const stateChannelMiddlewareUrl = `${MIDDLEWARE_URL}/v3/channels/${props.stateCh
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/TimestampLabel.vue b/src/components/TimestampLabel.vue
index e6222503f..d9b7fd2d8 100644
--- a/src/components/TimestampLabel.vue
+++ b/src/components/TimestampLabel.vue
@@ -3,7 +3,9 @@
     <client-only>
       <template v-if="isExtended">
         <app-icon name="clock"/>
-        {{ relativeUpdated }} ({{ absolute }})
+        {{ relativeUpdated }}
+        <wbr>
+        ({{ absolute }})
       </template>
       <template v-else>
         <app-tooltip>
@@ -20,7 +22,6 @@
 <script setup>
 import { DateTime, Duration } from 'luxon'
 import { DATETIME_UNITS } from '@/utils/constants'
-
 import { useUiStore } from '@/composables/ui'
 
 const { timeFormat } = storeToRefs(useUiStore())
@@ -101,5 +102,6 @@ function update() {
 .timestamp-label {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 </style>
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index c947e14e3..1dd02e257 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Symbol
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <div class="token-details-panel__link">
               <token-symbol-icon
                 :contract-id="tokenDetails.contractId"
@@ -25,7 +25,7 @@
             </hint-tooltip>
             Name
           </th>
-          <td>
+          <td class="token-details-panel__data">
             {{ tokenDetails.name }}
             <not-available-label v-if="!tokenDetails.name"/>
           </td>
@@ -39,7 +39,7 @@
             </hint-tooltip>
             AE Price
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <div class="token-details-panel__container">
               <price-label :price="tokenDetails.price"/>
             </div>
@@ -54,7 +54,7 @@
             </hint-tooltip>
             Fiat Price
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <div class="token-details-panel__container">
               {{ fiatPrice }}
             </div>
@@ -69,7 +69,7 @@
             </hint-tooltip>
             Market cap
           </th>
-          <td>
+          <td class="token-details-panel__data">
             {{ marketCap }}
           </td>
         </tr>
@@ -80,7 +80,7 @@
             </hint-tooltip>
             Total supply
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <price-label
               :price="tokenDetails.totalSupply"
               :currency="tokenDetails.symbol"
@@ -94,7 +94,7 @@
             </hint-tooltip>
             Smart Contract ID
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <app-link :to="`/contracts/${tokenDetails.contractId}`">
               <span class="u-hidden-mobile">
                 {{ tokenDetails.contractId }}
@@ -112,7 +112,7 @@
             </hint-tooltip>
             Decimals
           </th>
-          <td>
+          <td class="token-details-panel__data">
             {{ tokenDetails.decimals }}
           </td>
         </tr>
@@ -123,7 +123,7 @@
             </hint-tooltip>
             Token Holders
           </th>
-          <td>
+          <td class="token-details-panel__data">
             {{ tokenHoldersCount }}
           </td>
         </tr>
@@ -134,7 +134,7 @@
             </hint-tooltip>
             Extensions
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <div
               v-if="!!tokenDetails.extensions.length"
               class="token-details-panel__extensions">
@@ -157,7 +157,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="token-details-panel__data">
             <app-link
               v-if="featureFlags.dex && tokenDexUrl"
               :to="tokenDexUrl"
@@ -220,10 +220,22 @@ const fiatPrice = computed(() =>
 <style scoped>
 .token-details-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -240,6 +252,15 @@ const fiatPrice = computed(() =>
     }
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__container {
     display: flex;
     gap: var(--space-2) var(--space-1);
@@ -249,21 +270,12 @@ const fiatPrice = computed(() =>
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-1);
-
-    @media (--desktop) {
-      gap: 0 var(--space-1);
-    }
   }
 
   &__icon {
     margin-right: var(--space-1);
     width: 28px;
     height: 28px;
-
-    @media (--desktop) {
-      width: 24px;
-      height: 24px;
-    }
   }
 }
 </style>
diff --git a/src/components/TransactionGeneralPanel.vue b/src/components/TransactionGeneralPanel.vue
index c8f3b52f8..1d66a1984 100644
--- a/src/components/TransactionGeneralPanel.vue
+++ b/src/components/TransactionGeneralPanel.vue
@@ -9,7 +9,7 @@
             </hint-tooltip>
             Transaction ID
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <div class="u-hidden-mobile">
               <copy-chip :label="transactionDetails.hash"/>
             </div>
@@ -27,7 +27,7 @@
             </hint-tooltip>
             Transaction Type
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             {{ transactionDetails.type }}
           </td>
         </tr>
@@ -38,7 +38,7 @@
             </hint-tooltip>
             Keyblock Height
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <app-link
               :to="`/keyblocks/${transactionDetails.blockHeight}`">
               {{ transactionDetails.blockHeight }}
@@ -52,7 +52,7 @@
             </hint-tooltip>
             Keyblock Confirmations
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             {{ transactionDetails.confirmations }}
           </td>
         </tr>
@@ -63,7 +63,7 @@
             </hint-tooltip>
             Status
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <app-chip
               v-if="transactionDetails.isMined"
               variant="success">
@@ -85,7 +85,7 @@
             </hint-tooltip>
             Microblock Hash
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <app-link
               :to="`/microblocks/${transactionDetails.blockHash}`"
               class="u-hidden-mobile">
@@ -107,7 +107,7 @@
             </hint-tooltip>
             Created
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <timestamp-label
               :timestamp="transactionDetails.created"
               :is-extended="true"/>
@@ -120,7 +120,7 @@
             </hint-tooltip>
             Fee
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <price-label :price="formatAettosToAe(transactionDetails.fee)"/>
           </td>
         </tr>
@@ -131,7 +131,7 @@
             </hint-tooltip>
             Nonce
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             {{ transactionDetails.nonce }}
           </td>
         </tr>
@@ -142,7 +142,7 @@
             </hint-tooltip>
             API Links
           </th>
-          <td>
+          <td class="transaction-general-panel__data">
             <app-link
               :to="transactionNodeUrl"
               class="transaction-general-panel__link">
@@ -191,10 +191,22 @@ const transactionMiddlewareUrl = computed(() => {
 <style scoped>
 .transaction-general-panel {
   &__table-header {
-    border-bottom: 1px solid var(--color-midnight-25);
+    display: block;
+    padding-bottom: 0;
 
-    @media (--desktop) {
+    @media (--mobile) {
+      padding-bottom: 8px;
       width: var(--detail-column-width);
+      border-bottom: 1px solid var(--color-midnight-25);
+      display: table-cell;
+    }
+  }
+
+  &__row {
+    display: block;
+
+    @media (--mobile) {
+      display: table-row;
     }
   }
 
@@ -202,6 +214,15 @@ const transactionMiddlewareUrl = computed(() => {
     border-bottom: 0;
   }
 
+  &__data {
+    display: block;
+    padding-left: 20px;
+
+    @media (--mobile) {
+      display: table-cell;
+    }
+  }
+
   &__link {
     display: inline-flex;
     align-items: center;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index f8d85715f..c581216d7 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -17,7 +17,7 @@
   background-size: cover;
 
   &__parallax {
-    padding: 120px var(--space-1) var(--space-6);
+    padding: var(--space-6) var(--space-1);
     max-width: var(--container-width);
     margin: 0 auto;