diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
index 213874f705..fd560391d7 100644
--- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
@@ -18,6 +18,7 @@
         <% end %>
 
         &rarr;
+
         <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %>
           <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %>
         <% else %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex
index d6cd32c15a..04e46c808f 100644
--- a/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex
@@ -11,9 +11,6 @@
             <!-- # of Transactions -->
             <span class="mr-4"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
 
-            <!-- # of Contracts -->
-            <span class="mr-4"> 10 Contracts </span>
-
             <!-- Block Size -->
             <span class="mr-4"> <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %> </span>
 
@@ -28,7 +25,7 @@
           <!-- Block Hash -->
           <dl class="row">
             <dt class="col-sm-3 text-muted"> <%= gettext "Hash" %> </dt>
-            <dd class="col-sm-9"> <%= @block.hash %> </dd>
+            <dd class="col-sm-9"> <%= to_string(@block.hash) %> </dd>
           </dl>
 
           <!-- Parent Hash -->
@@ -43,26 +40,25 @@
             </dd>
           </dl>
 
-          <!-- Gas Used -->
+          <!-- Difficulty value -->
           <dl class="row">
-            <dt class="col-sm-3 text-muted"> <%= gettext "Gas Used" %> </dt>
+            <dt class="col-sm-3 text-muted"> <%= gettext "Difficulty" %> </dt>
             <dd class="col-sm-9">
-              <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
+              <%= @block.difficulty |> Cldr.Number.to_string! %>
             </dd>
           </dl>
 
-          <!-- Gas Limit -->
+          <!-- Total Difficulty -->
           <dl class="row">
-            <dt class="col-sm-3 text-muted"> <%= gettext "Gas Limit" %> </dt>
-            <dd class="col-sm-9"> <%= @block.gas_limit |> Cldr.Number.to_string! %> </dd>
+            <dt class="col-sm-3 text-muted"> <%= gettext "Total Difficulty" %> </dt>
+            <dd class="col-sm-9"> <%= @block.total_difficulty |> Cldr.Number.to_string! %> </dd>
           </dl>
 
           <!-- Nonce -->
-          <dl class="row">
+          <dl class="row mb-0">
             <dt class="col-sm-3 text-muted"> <%= gettext "Nonce" %> </dt>
-            <dd class="col-sm-9"> <%= @block.nonce %> </dd>
+            <dd class="col-sm-9"> <%= to_string(@block.nonce) %> </dd>
           </dl>
-
         </div>
       </div>
     </div>
@@ -74,24 +70,26 @@
           <h2 class="card-title text-white"> <%= gettext "Miner" %> </h2>
           <div class="text-right">
             <!-- Validator's Name -->
-            <h3 class="text-white"> Lester McTester </h3>
+            <!-- Until we can get the validator's name we are using the Validator's address hash -->
+            <h3 class="text-white text-truncate"> <%= link @block.miner, class: "text-white", to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %> </h3>
             <!-- Validator's address hash -->
-            <span class="text-light">
-              <%= link @block.miner, to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %>
-            </span>
+            <span class="text-light text-truncate"> </span>
           </div>
         </div>
       </div>
 
-      <!-- Difficulty -->
+      <!-- Gas -->
       <div class="card">
         <div class="card-body">
-          <h2 class="card-title"> <%= gettext "Difficulty" %> </h2>
+          <h2 class="card-title"> <%= gettext "Gas Used" %> </h2>
           <div class="text-right">
-            <!-- Difficulty value -->
-            <h3> <%= @block.difficulty |> Cldr.Number.to_string! %> </h3>
-            <!-- Total Difficulty -->
-            <span class="text-muted"> <%= @block.total_difficulty |> Cldr.Number.to_string! %> </span>
+            <!-- Gas Used -->
+            <h3>
+              <%= @block.gas_used |> Cldr.Number.to_string! %>
+              <span class="text-muted"> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) </span>
+            </h3>
+            <!-- Gas Limit -->
+            <span class="text-muted"> <%= @block.gas_limit |> Cldr.Number.to_string! %> <%= gettext "Gas Limit" %> </span>
           </div>
         </div>
       </div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/block_transaction/_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/block_transaction/_transaction.html.eex
new file mode 100644
index 0000000000..10877834cc
--- /dev/null
+++ b/apps/explorer_web/lib/explorer_web/templates/block_transaction/_transaction.html.eex
@@ -0,0 +1,38 @@
+<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in  tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
+  <div class="row">
+    <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
+      <span class="tile-label">
+        <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+      </span>
+      <div class="tile-status-label" data-test="transaction_status">
+        <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+      </div>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column">
+      <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
+      <span>
+        <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %>
+
+        &rarr;
+
+        <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
+
+      </span>
+      <span>
+        <span data-from-now="<%= @transaction.block.timestamp %>"></span>
+        <span class="ml-1">
+          <%= link(
+            gettext("Block #%{number}", number: to_string(@transaction.block.number)),
+            to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
+          ) %>
+        </span>
+      </span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start align-items-end text-md-right">
+      <span class="tile-title">
+        <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
+      </span>
+      <span class="mr-2 mr-sm-0 text-muted"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
+    </div>
+  </div>
+</div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex
index 5b0f21daa0..2079e5bdc0 100644
--- a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex
@@ -2,128 +2,12 @@
 
   <%= render ExplorerWeb.BlockView, "overview.html", assigns %>
 
-</section>
-
-<section class="container-fluid">
-  <section>
-    <h1><%= gettext("Block Details") %></h1>
-    <p data-test="block_detail_number"><%= @block.number %></p>
-
-    <div class="card mb-3">
-      <div class="card-body">
-        <div class="row">
-          <div class="col-lg-6">
-            <table class="table table-font table-responsive-sm table-horizontal">
-              <tbody>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Timestamp" %>
-                  </th>
-                  <td>
-                    <span data-from-now="<%= @block.timestamp %>"></span> (<%= formatted_timestamp(@block) %>)
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Transaction" %>
-                  </th>
-                  <td>
-                    <%= gettext "%{count} transactions in this block", count: @block_transaction_count %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Hash" %>
-                  </th>
-                  <td title="<%= @block.hash %>">
-                    <%= @block.hash %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Parent Hash" %>
-                  </th>
-                  <td title="<%= @block.parent_hash %>">
-                    <%= link(
-                          @block.parent_hash,
-                          to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1)
-                        ) %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Miner" %>
-                  </th>
-                  <td title="<%= @block.miner %>">
-                    <%= @block.miner %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Difficulty" %>
-                  </th>
-                  <td title="<%= @block.difficulty %>">
-                  <%= @block.difficulty |> Cldr.Number.to_string! %>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="col-lg-6">
-            <table class="table table-font table-responsive-sm table-horizontal">
-              <tbody>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Total Difficulty" %>
-                  </th>
-                  <td title="<%= @block.total_difficulty %>">
-                    <%= @block.total_difficulty |> Cldr.Number.to_string! %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Size" %>
-                  </th>
-                  <td>
-                    <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Gas Used" %>
-                  </th>
-                  <td>
-                    <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">
-                    <%= gettext "Gas Limit" %>
-                  </th>
-                  <td>
-                    <%= @block.gas_limit |> Cldr.Number.to_string! %>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="Nonce">
-                    <%= gettext "Nonce" %>
-                  </th>
-                  <td>
-                    <%= @block.nonce %>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
   <section>
     <div class="card mb-3">
       <div class="card-header">
-        <ul class="nav nav-tabs card-header-tabs">
+
+        <!-- DESKTOP TAB NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
           <li class="nav-item">
             <%= link(
                   gettext("Transactions"),
@@ -132,69 +16,33 @@
                 ) %>
           </li>
         </ul>
+
+        <!-- MOBILE DROPDOWN NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-md-none">
+          <li class="nav-item dropdown flex-fill text-center">
+            <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Transactions</a>
+            <div class="dropdown-menu">
+              <%= link(
+                    gettext("Transactions"),
+                    class: "dropdown-item",
+                    to: block_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["block_id"])
+                  ) %>
+            </div>
+          </li>
+        </ul>
       </div>
       <div class="card-body">
         <%= if Enum.count(@transactions) > 0 do %>
-          <table class="table table-responsive-sm table-font">
-            <thead>
-              <tr>
-                <th>
-                  <%= gettext "Status" %>
-                </th>
-                <th><%= gettext "Hash" %></th>
-                <th><%= gettext "Block" %></th>
-                <th><%= gettext "Age" %></th>
-                <th><%= gettext "From" %></th>
-                <th></th>
-                <th><%= gettext "To" %></th>
-                <th><%= gettext "Value" %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%= for transaction <- @transactions do %>
-                <tr data-transaction-hash="<%= transaction.hash %>">
-                  <td data-test="transaction_status">
-                    <div class="transaction__dot transaction__dot--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-toggle="tooltip" title="<%= ExplorerWeb.TransactionView.formatted_status(transaction) %>"></div>
-                  </td>
-                  <td>
-                    <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
-                  </td>
-                  <td>
-                    <%= link(
-                          transaction.block,
-                          to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-                        ) %>
-                  </td>
-                  <td data-from-now="<%= transaction.block.timestamp %>"></td>
-                  <td class="address-cell">
-                    <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
-                  </td>
-                  <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
-                  <td>
-                    <%= cond do %>
-                      <% transaction.to_address_hash != nil -> %>
-                        <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.to_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.to_address), locale: @locale %>
-                      <% transaction.created_contract_address_hash != nil -> %>
-                        <i class="fas fa-plus-square"></i>
-                        <%= link(
-                          "Contract Creation",
-                          class: "transaction__link",
-                          "data-address-hash": transaction.created_contract_address_hash,
-                          to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
-                          title: transaction.created_contract_address_hash
-                        ) %>
-                      <% true -> %>
-                    <% end %>
-                  </td>
-                  <td>
-                    <%= ExplorerWeb.TransactionView.value(transaction) %>
-                  </td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
+          <h2 class="card-title"><%= gettext "Transactions" %></h2>
+          <span data-selector="transactions-list">
+            <%= for transaction <- @transactions do %>
+              <%= render "_transaction.html", locale: @locale, transaction: transaction %>
+            <% end %>
+          </span>
         <% else %>
-          <p><%= gettext "There are no Transactions" %></p>
+          <div class="tile tile-muted text-center">
+            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
+          </div>
         <% end %>
       </div>
     </div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
index d8f5346434..73d5f02dee 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
@@ -12,7 +12,7 @@
             <%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block), class: "tile-title") %>
             <div>
               <%= block.transactions |> Enum.count %> Transactions
-              <span class="ml-2 ml-md-0 d-md-block" data-from-now="<%= block.timestamp %>"> </span>
+              <span class="ml-2" data-from-now="<%= block.timestamp %>"> </span>
             </div>
             <span class="text-truncate">
               Validated by