diff --git a/assets/css/components/_all.scss b/assets/css/components/_all.scss
index 7a51f0896c..b1baff5d88 100644
--- a/assets/css/components/_all.scss
+++ b/assets/css/components/_all.scss
@@ -1,7 +1,9 @@
-@import "block-detail";
+@import "section";
+
+@import "block";
 @import "blocks";
 @import "container";
 @import "footer";
 @import "header";
-@import "transaction-detail";
+@import "transaction";
 @import "transactions";
diff --git a/assets/css/components/_block-detail.scss b/assets/css/components/_block-detail.scss
deleted file mode 100644
index 85247565a1..0000000000
--- a/assets/css/components/_block-detail.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.block-detail {
-  &__container {
-    @extend %paper;
-    padding: explorer-size(-1) explorer-size(0);
-  }
-
-  &__title {
-    @include explorer-typography("title");
-    color: explorer-color("slate", "100");
-    margin: 0;
-  }
-
-  &__column {
-    @include explorer-typography("body1");
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    dt {
-      color: explorer-color("slate", "100");
-      min-width: explorer-size(3);
-    }
-
-    dd {
-      color: explorer-color("slate", "100");
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-}
-
-@media (min-width: $explorer-breakpoint-lg) {
-  .block-detail {
-    &__attributes {
-      display: flex;
-      align-items: top;
-      justify-content: top;
-    }
-
-    &__column {
-      width: explorer-size(1);
-      flex: 1;
-      margin-right: explorer-size(1);
-      & + & { margin-left: explorer-size(1); }
-    }
-  }
-}
diff --git a/assets/css/components/_block.scss b/assets/css/components/_block.scss
new file mode 100644
index 0000000000..23f71d5bbc
--- /dev/null
+++ b/assets/css/components/_block.scss
@@ -0,0 +1,36 @@
+.block {
+  &__container { @extend %paper; }
+  &__header { @extend %section-header; }
+  &__heading { @extend %section-header__heading; }
+  &__subheading { @extend %section-header__subheading; }
+  &__tabs { @extend %section-tabs; }
+
+  &__tab {
+    @extend %section-tabs__tab;
+    &--active { @extend %section-tabs__tab--active; }
+  }
+
+  &__attributes { padding: explorer-size(-1) explorer-size(1); }
+  &__column { @include explorer-typography("body1"); }
+  &__item { @extend %section-list__item; }
+  &__item-key { @extend %section-list__item-key; }
+  &__item-value { @extend %section-list__item-value; }
+  &__link { color: explorer-color("blue", "500"); }
+}
+
+@media (min-width: $explorer-breakpoint-lg) {
+  .block {
+    &__attributes {
+      display: flex;
+      align-items: top;
+      justify-content: top;
+    }
+
+    &__column {
+      width: explorer-size(1);
+      flex: 1;
+      margin-right: explorer-size(1);
+      & + & { margin-left: explorer-size(1); }
+    }
+  }
+}
diff --git a/assets/css/components/_blocks.scss b/assets/css/components/_blocks.scss
index 125a58df29..10333740d9 100644
--- a/assets/css/components/_blocks.scss
+++ b/assets/css/components/_blocks.scss
@@ -18,4 +18,8 @@
     @include explorer-typography("body1");
     color: explorer-color("slate", "100");
   }
+
+  &__column-header { @include explorer-typography("body1"); }
+
+  &__link { color: explorer-color("blue", "500"); }
 }
diff --git a/assets/css/components/_section.scss b/assets/css/components/_section.scss
new file mode 100644
index 0000000000..47d5e69b09
--- /dev/null
+++ b/assets/css/components/_section.scss
@@ -0,0 +1,56 @@
+%section-header {
+  margin-top: explorer-size(-1);
+  margin-bottom: explorer-size(0);
+}
+
+%section-header__heading {
+  @include explorer-typography("title");
+  color: explorer-color("gray", "500");
+  margin: 0;
+}
+
+%section-header__subheading {
+  @include explorer-typography("body1");
+  color: explorer-color("slate", "100");
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0;
+}
+
+%section-tabs {
+  border-bottom: 1px solid explorer-color("slate", "500");
+  padding: 0 explorer-size(0);
+}
+
+%section-tabs__tab {
+  @include explorer-typography("body1");
+  margin: 0;
+  border-top: explorer-size(-4) solid transparent;
+  border-left: explorer-size(-4) solid transparent;
+  border-right: explorer-size(-4) solid transparent;
+  display: inline-block;
+  padding: explorer-size(-2) explorer-size(-2);
+}
+
+%section-tabs__tab--active {
+  border-top-color: explorer-color("blue", "500");
+}
+
+%section-list__item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+%section-list__item-key {
+  color: explorer-color("black");
+  min-width: explorer-size(3);
+}
+
+%section-list__item-value {
+  color: explorer-color("slate", "100");
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/assets/css/components/_transaction-detail.scss b/assets/css/components/_transaction-detail.scss
deleted file mode 100644
index 5023ae13e2..0000000000
--- a/assets/css/components/_transaction-detail.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.transaction-detail {
-  &__container {
-    @extend %paper;
-    padding: explorer-size(-1) explorer-size(0);
-  }
-
-  &__title {
-    @include explorer-typography("title");
-    color: explorer-color("slate", "100");
-    margin: 0;
-  }
-
-  &__subheader {
-    @include explorer-typography("body1");
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &__column {
-    @include explorer-typography("body1");
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    dt {
-      color: explorer-color("slate", "100");
-      min-width: explorer-size(3);
-    }
-
-    dd {
-      color: explorer-color("slate", "100");
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-}
-
-@media (min-width: $explorer-breakpoint-lg) {
-  .transaction-detail {
-    &__attributes {
-      display: flex;
-      align-items: top;
-      justify-content: top;
-    }
-
-    &__column {
-      width: explorer-size(1);
-      flex: 1;
-      margin-right: explorer-size(1);
-      & + & { margin-left: explorer-size(1); }
-    }
-  }
-}
diff --git a/assets/css/components/_transaction.scss b/assets/css/components/_transaction.scss
new file mode 100644
index 0000000000..7675a32e9b
--- /dev/null
+++ b/assets/css/components/_transaction.scss
@@ -0,0 +1,36 @@
+.transaction {
+  &__container { @extend %paper; }
+  &__header { @extend %section-header; }
+  &__heading { @extend %section-header__heading; }
+  &__subheading { @extend %section-header__subheading; }
+  &__tabs { @extend %section-tabs; }
+
+  &__tab {
+    @extend %section-tabs__tab;
+    &--active { @extend %section-tabs__tab--active; }
+  }
+
+  &__attributes { padding: explorer-size(-1) explorer-size(1); }
+  &__column { @include explorer-typography("body1"); }
+  &__item { @extend %section-list__item; }
+  &__item-key { @extend %section-list__item-key; }
+  &__item-value { @extend %section-list__item-value; }
+  &__link { color: explorer-color("blue", "500"); }
+}
+
+@media (min-width: $explorer-breakpoint-lg) {
+  .transaction {
+    &__attributes {
+      display: flex;
+      align-items: top;
+      justify-content: top;
+    }
+
+    &__column {
+      width: explorer-size(1);
+      flex: 1;
+      margin-right: explorer-size(1);
+      & + & { margin-left: explorer-size(1); }
+    }
+  }
+}
diff --git a/assets/css/components/_transactions.scss b/assets/css/components/_transactions.scss
index 0341b48eb4..a3b439fb3f 100644
--- a/assets/css/components/_transactions.scss
+++ b/assets/css/components/_transactions.scss
@@ -25,6 +25,9 @@
     white-space: nowrap;
     overflow: hidden;
   }
+
+  &__column-header { @include explorer-typography("body1"); }
+  &__link { color: explorer-color("blue", "500"); }
 }
 
 @media (min-width: $explorer-breakpoint-lg) {
diff --git a/config/config.exs b/config/config.exs
index 17ce79a7d7..005435476d 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -28,6 +28,11 @@ config :ethereumex,
   host: "localhost",
   port: 8545
 
+ config :ex_cldr,
+   default_locale: "en",
+   locales: ["en"],
+   gettext: ExplorerWeb.Gettext
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env}.exs"
diff --git a/doc/dependency_decisions.yml b/doc/dependency_decisions.yml
index 27344546d4..1f27e42347 100644
--- a/doc/dependency_decisions.yml
+++ b/doc/dependency_decisions.yml
@@ -247,3 +247,31 @@
     :why: 
     :versions: []
     :when: 2018-01-29 02:58:26.066580000 Z
+- - :license
+  - abnf2
+  - MIT
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2018-02-01 07:42:55.657686000 Z
+- - :license
+  - ex_cldr
+  - Apache 2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2018-02-01 07:43:30.533305000 Z
+- - :license
+  - ex_cldr_numbers
+  - Apache 2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2018-02-01 07:43:48.924488000 Z
+- - :license
+  - ex_cldr_units
+  - Apache 2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2018-02-01 07:44:03.250381000 Z
diff --git a/lib/explorer_web/templates/block/show.html.eex b/lib/explorer_web/templates/block/show.html.eex
index 3df758a8f2..f85b412e4e 100644
--- a/lib/explorer_web/templates/block/show.html.eex
+++ b/lib/explorer_web/templates/block/show.html.eex
@@ -1,66 +1,65 @@
-<section class="container__section">
-  <div class="block-detail__container">
-    <h2 class="block-detail__title">
-      <%= gettext "Block #%{number} Details", number: @block.number %>
-    </h2>
-    <div class="block-detail__attributes">
-      <div class="block-detail__column">
+<section class="container__section block">
+  <div class="block__header">
+    <h1 class="block__heading"><%= gettext "Block #%{number} Details", number: @block.number %></h1>
+  </div>
+  <div class="block__container">
+    <div class="block__tabs">
+      <h2 class="block__tab block__tab--active"><%= gettext "Overview" %></h2>
+    </div>
+    <div class="block__attributes">
+      <div class="block__column">
         <dl>
-          <div class="block-detail__item">
-            <dt><%= gettext "Number" %></dt>
-            <dd><%= @block.number %></dd>
-          </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Age" %></dt>
-            <dd><%= @block.age %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Number" %></dt>
+            <dd class="block__item-value"><%= @block.number %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Timestamp" %></dt>
-            <dd><%= @block.formatted_timestamp %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Timestamp" %></dt>
+            <dd class="block__item-value"><%= @block.age %> (<%= @block.formatted_timestamp %>)</dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Transactions" %></dt>
-            <dd><%= @block.transactions_count %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Transactions" %></dt>
+            <dd class="block__item-value"><%= gettext "%{count} transactions in this block", count: @block.transactions_count %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Hash" %></dt>
-            <dd><%= @block.hash %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Hash" %></dt>
+            <dd class="block__item-value" title="<%= @block.hash %>"><%= @block.hash %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Parent Hash" %></dt>
-            <dd><%= @block.parent_hash %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Parent Hash" %></dt>
+            <dd class="block__item-value" title="<%= @block.parent_hash %>"><%= link(@block.parent_hash, to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1), class: "block__link") %>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Miner" %></dt>
-            <dd><%= @block.miner %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Miner" %></dt>
+            <dd class="block__item-value" title="<%= @block.miner %>"><%= @block.miner %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Difficulty" %></dt>
-            <dd><%= @block.difficulty %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Difficulty" %></dt>
+            <dd class="block__item-value" title="<%= @block.difficulty %>"><%= @block.difficulty |> Cldr.Number.to_string! %></dd>
           </div>
         </dl>
       </div>
-      <div class="block-detail__column">
+      <div class="block__column">
         <dl>
-          <div class="block-detail__item">
-            <dt><%= gettext "Total Difficulty" %></dt>
-            <dd><%= @block.total_difficulty %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Total Difficulty" %></dt>
+            <dd class="block__item-value" title="<%= @block.total_difficulty %>"><%= @block.total_difficulty |> Cldr.Number.to_string! %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Size" %></dt>
-            <dd><%= @block.size %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Size" %></dt>
+            <dd class="block__item-value"><%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Gas Used" %></dt>
-            <dd><%= @block.gas_used %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Gas Used" %></dt>
+            <dd class="block__item-value"><%= Enum.sort_by(["#{Decimal.div(Decimal.new(@block.gas_used), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal)} POA", "#{@block.gas_used |> Cldr.Number.to_string!} wei"], &String.length/1) |> List.first %> (<%= @block.gas_used / @block.gas_limit |> Cldr.Number.to_string!(format: "#.#%") %>)</dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Gas Limit" %></dt>
-            <dd><%= @block.gas_limit %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Gas Limit" %></dt>
+            <dd class="block__item-value"><%= Enum.sort_by(["#{Decimal.div(Decimal.new(@block.gas_limit), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal)} POA", "#{@block.gas_limit |> Cldr.Number.to_string!} wei"], &String.length/1) |> List.first %></dd>
           </div>
-          <div class="block-detail__item">
-            <dt><%= gettext "Nonce" %></dt>
-            <dd><%= @block.nonce %></dd>
+          <div class="block__item">
+            <dt class="block__item-key"><%= gettext "Nonce" %></dt>
+            <dd class="block__item-value"><%= @block.nonce %></dd>
           </div>
         </dl>
       </div>
diff --git a/lib/explorer_web/templates/page/index.html.eex b/lib/explorer_web/templates/page/index.html.eex
index 7470929269..1b40a92cbf 100644
--- a/lib/explorer_web/templates/page/index.html.eex
+++ b/lib/explorer_web/templates/page/index.html.eex
@@ -16,10 +16,10 @@
         <tbody>
           <%= for block <- @blocks do %>
             <tr class="blocks__row">
-              <td class="blocks__column blocks__column--height"><%= link(block.number, to: block_path(@conn, :show, @conn.assigns.locale, block.number)) %></td>
+              <td class="blocks__column blocks__column--height"><%= link(block.number, to: block_path(@conn, :show, @conn.assigns.locale, block.number), class: "blocks__link") %></td>
               <td class="blocks__column blocks__column--age"><%= block.age %></td>
               <td class="blocks__column blocks__column--transactions-count"><%= block.transactions_count %></td>
-              <td class="blocks__column blocks__column--gas-used"><%= block.gas_used %></td>
+              <td class="blocks__column blocks__column--gas-used"><%= Enum.sort_by(["#{Decimal.div(Decimal.new(block.gas_used), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal)} POA", "#{Decimal.div(Decimal.new(block.gas_used), Decimal.new(1_000_000_000)) |> Decimal.to_string(:normal)} Gwei", "#{block.gas_used |> Cldr.Number.to_string!} wei"], &String.length/1) |> List.first %></td>
             </tr>
           <% end %>
         </tbody>
@@ -45,12 +45,12 @@
             <tr class="transactions__row">
               <td class="transactions__column transactions__column--hash">
                 <div class="transactions__hash" title="<%= transaction.hash %>">
-                  <%= link(transaction.hash, to: transaction_path(@conn, :show, @conn.assigns.locale, transaction.hash)) %>
+                  <%= link(transaction.hash, to: transaction_path(@conn, :show, @conn.assigns.locale, transaction.hash), class: "blocks__link") %>
                 </div>
               </td>
               <td class="transactions__column transactions__column--block"><%= transaction.block_number %></td>
               <td class="transactions__column transactions__column--age"><%= transaction.age  %></td>
-              <td class="transactions__column transactions__column--value"><%= transaction.value %></td>
+              <td class="transactions__column transactions__column--value"><%= Enum.sort_by(["#{Decimal.div(Decimal.new(transaction.value), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal)} POA", "#{Decimal.div(Decimal.new(transaction.value), Decimal.new(1_000_000_000)) |> Decimal.to_string(:normal)} Gwei", "#{transaction.value |> Cldr.Number.to_string!} wei"], &String.length/1) |> List.first %></td>
             </tr>
           <% end %>
         </tbody>
diff --git a/lib/explorer_web/templates/transaction/show.html.eex b/lib/explorer_web/templates/transaction/show.html.eex
index b9b8850cc2..dd7fc86ff9 100644
--- a/lib/explorer_web/templates/transaction/show.html.eex
+++ b/lib/explorer_web/templates/transaction/show.html.eex
@@ -1,57 +1,58 @@
-<section class="container__section">
-  <div class="transaction-detail__container">
-    <div class="transaction-detail__header">
-      <h2 class="transaction-detail__title">
-        <%= gettext "Transaction Details" %>
-      </h2>
-      <div class="transaction-detail__subheader">
-        <div class="transaction-detail__hash">
-          <%= @transaction.hash %>
-        </div>
-      </div>
+<section class="container__section transaction">
+  <div class="transaction__header">
+    <h1 class="transaction__heading"><%= gettext "Transaction Details" %></h1>
+    <h3 class="transaction__subheading"><%= @transaction.hash %></h3>
+  </div>
+  <div class="transaction__container">
+    <div class="transaction__tabs">
+      <h2 class="transaction__tab transaction__tab--active"><%= gettext "Overview" %></h2>
     </div>
-    <div class="transaction-detail__attributes">
-      <div class="transaction-detail__column">
+    <div class="transaction__attributes">
+      <div class="transaction__column">
         <dl>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Block Number" %></dt>
-            <dd><%= @transaction.block_number %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Transaction Hash" %></dt>
+            <dd class="transaction__item-value" title="<%= @transaction.hash %>"><%= @transaction.hash %></dd>
+          </div>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Transaction Status" %></dt>
+            <dd class="transaction__item-value transaction__item-value--success"><%= gettext "Success" %></dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Age" %></dt>
-            <dd><%= @transaction.age %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Block Number" %></dt>
+            <dd class="transaction__item-value"><%= link(@transaction.block_number, to: block_path(@conn, :show, @conn.assigns.locale, @transaction.block_number), class: "transaction__link") %></dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Timestamp" %></dt>
-            <dd><%= @transaction.formatted_timestamp %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Age" %></dt>
+            <dd class="transaction__item-value" title="<%= @transaction.formatted_timestamp %>"><%= @transaction.age %> (<%= @transaction.formatted_timestamp %>)</dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Value" %></dt>
-            <dd><%= @transaction.value %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Value" %></dt>
+            <dd class="transaction__item-value"><%= Decimal.div(Decimal.new(@transaction.value), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal) %> POA</dd>
           </div>
         </dl>
       </div>
-      <div class="transaction-detail__column">
+      <div class="transaction__column">
         <dl>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Gas" %></dt>
-            <dd><%= @transaction.gas %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Gas Limit" %></dt>
+            <dd class="transaction__item-value"><%= @transaction.gas |> Cldr.Number.to_string! %> wei</dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Gas Price" %></dt>
-            <dd><%= @transaction.gas_price %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Gas Price" %></dt>
+            <dd class="transaction__item-value"><%= Decimal.div(Decimal.new(@transaction.gas_price), Decimal.new(1_000_000_000_000_000_000)) |> Decimal.to_string(:normal) %> POA (<%= Decimal.div(Decimal.new(@transaction.gas_price), Decimal.new(1_000_000_000)) |> Decimal.to_string(:normal) %> Gwei)</dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Nonce" %></dt>
-            <dd><%= @transaction.nonce %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Cumulative Gas Used" %></dt>
+            <dd class="transaction__item-value"><%= @transaction.cumulative_gas_used |> Cldr.Number.to_string! %> wei</dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Input" %></dt>
-            <dd><%= @transaction.input %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Nonce" %></dt>
+            <dd class="transaction__item-value"><%= @transaction.nonce %></dd>
           </div>
-          <div class="transaction-detail__item">
-            <dt><%= gettext "Cumulative Gas Used" %></dt>
-            <dd><%= @transaction.cumulative_gas_used %></dd>
+          <div class="transaction__item">
+            <dt class="transaction__item-key"><%= gettext "Input" %></dt>
+            <dd class="transaction__item-value" title="<%= @transaction.input %>"><%= @transaction.input %></dd>
           </div>
         </dl>
       </div>
diff --git a/mix.exs b/mix.exs
index 291a28e59a..2e2f5f06fc 100644
--- a/mix.exs
+++ b/mix.exs
@@ -37,7 +37,7 @@ defmodule Explorer.Mixfile do
   # Specifies extra applications to start per environment
   defp extra_applications(:prod), do: [:phoenix_pubsub_redis, :new_relixir | extra_applications()]
   defp extra_applications(_), do: extra_applications()
-  defp extra_applications, do: [:ex_jasmine, :ethereumex, :timex, :timex_ecto, :set_locale, :logger, :runtime_tools]
+  defp extra_applications, do: [:ex_cldr, :ex_jasmine, :ethereumex, :timex, :timex_ecto, :set_locale, :logger, :runtime_tools]
 
   # Specifies your project dependencies.
   #
@@ -48,6 +48,8 @@ defmodule Explorer.Mixfile do
       {:credo, "~> 0.8", only: [:dev, :test], runtime: false},
       {:dialyxir, "~> 0.5", only: [:dev, :test], runtime: false},
       {:ethereumex, github: "exthereum/ethereumex", commit: "262f1d81ae163ffb46e127283658249dac1c8318"}, # Waiting for this version to be pushed to Hex.
+      {:ex_cldr_numbers, "~> 1.0"},
+      {:ex_cldr_units, "~> 1.0"},
       {:ex_machina, "~> 2.1", only: [:test]},
       {:exvcr, "~> 0.8", only: :test},
       {:gettext, "~> 0.11"},
diff --git a/mix.lock b/mix.lock
index 4c4f87f092..1b4c1e995f 100644
--- a/mix.lock
+++ b/mix.lock
@@ -1,4 +1,5 @@
-%{"bunt": {:hex, :bunt, "0.2.0", "951c6e801e8b1d2cbe58ebbd3e616a869061ddadcc4863d0a2182541acae9a38", [:mix], [], "hexpm"},
+%{"abnf2": {:hex, :abnf2, "0.1.2", "6f8792b8ac3288dba5fc889c2bceae9fe78f74e1a7b36bea9726ffaa9d7bef95", [:mix], [], "hexpm"},
+  "bunt": {:hex, :bunt, "0.2.0", "951c6e801e8b1d2cbe58ebbd3e616a869061ddadcc4863d0a2182541acae9a38", [:mix], [], "hexpm"},
   "certifi": {:hex, :certifi, "2.0.0", "a0c0e475107135f76b8c1d5bc7efb33cd3815cb3cf3dea7aefdd174dabead064", [:rebar3], [], "hexpm"},
   "combine": {:hex, :combine, "0.10.0", "eff8224eeb56498a2af13011d142c5e7997a80c8f5b97c499f84c841032e429f", [:mix], [], "hexpm"},
   "connection": {:hex, :connection, "1.0.4", "a1cae72211f0eef17705aaededacac3eb30e6625b04a6117c1b2db6ace7d5976", [:mix], [], "hexpm"},
@@ -11,6 +12,9 @@
   "dialyxir": {:hex, :dialyxir, "0.5.1", "b331b091720fd93e878137add264bac4f644e1ddae07a70bf7062c7862c4b952", [:mix], [], "hexpm"},
   "ecto": {:hex, :ecto, "2.2.8", "a4463c0928b970f2cee722cd29aaac154e866a15882c5737e0038bbfcf03ec2c", [:mix], [{:db_connection, "~> 1.1", [hex: :db_connection, repo: "hexpm", optional: true]}, {:decimal, "~> 1.2", [hex: :decimal, repo: "hexpm", optional: false]}, {:mariaex, "~> 0.8.0", [hex: :mariaex, repo: "hexpm", optional: true]}, {:poison, "~> 2.2 or ~> 3.0", [hex: :poison, repo: "hexpm", optional: true]}, {:poolboy, "~> 1.5", [hex: :poolboy, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.13.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:sbroker, "~> 1.0", [hex: :sbroker, repo: "hexpm", optional: true]}], "hexpm"},
   "ethereumex": {:git, "https://github.com/exthereum/ethereumex.git", "262f1d81ae163ffb46e127283658249dac1c8318", []},
+  "ex_cldr": {:hex, :ex_cldr, "1.3.2", "8f4a00c99d1c537b8e8db7e7903f4bd78d82a7289502d080f70365392b13921b", [:mix], [{:abnf2, "~> 0.1", [hex: :abnf2, repo: "hexpm", optional: false]}, {:decimal, "~> 1.4", [hex: :decimal, repo: "hexpm", optional: false]}, {:gettext, "~> 0.13", [hex: :gettext, repo: "hexpm", optional: true]}, {:poison, "~> 2.1 or ~> 3.0", [hex: :poison, repo: "hexpm", optional: true]}], "hexpm"},
+  "ex_cldr_numbers": {:hex, :ex_cldr_numbers, "1.2.0", "ef27299922da913ffad1ed296cacf28b6452fc1243b77301dc17c03276c6ee34", [:mix], [{:decimal, "~> 1.4", [hex: :decimal, repo: "hexpm", optional: false]}, {:ex_cldr, "~> 1.3", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:poison, "~> 2.1 or ~> 3.1", [hex: :poison, repo: "hexpm", optional: false]}], "hexpm"},
+  "ex_cldr_units": {:hex, :ex_cldr_units, "1.1.1", "b3c7256709bdeb3740a5f64ce2bce659eb9cf4cc1afb4cf94aba033b4a18bc5f", [:mix], [{:ex_cldr, "~> 1.0", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:ex_cldr_numbers, "~> 1.0", [hex: :ex_cldr_numbers, repo: "hexpm", optional: false]}], "hexpm"},
   "ex_jasmine": {:git, "https://github.com/minifast/ex_jasmine.git", "9ce8e8245b3d74efde4b2c6c1a6f56a75d5ade52", [branch: "master"]},
   "ex_machina": {:hex, :ex_machina, "2.1.0", "4874dc9c78e7cf2d429f24dc3c4005674d4e4da6a08be961ffccc08fb528e28b", [:mix], [{:ecto, "~> 2.1", [hex: :ecto, repo: "hexpm", optional: true]}], "hexpm"},
   "exactor": {:hex, :exactor, "2.2.4", "5efb4ddeb2c48d9a1d7c9b465a6fffdd82300eb9618ece5d34c3334d5d7245b1", [:mix], [], "hexpm"},
diff --git a/test/explorer_web/features/contributor_browsing_test.exs b/test/explorer_web/features/contributor_browsing_test.exs
index 7288c1914b..19a1639c51 100644
--- a/test/explorer_web/features/contributor_browsing_test.exs
+++ b/test/explorer_web/features/contributor_browsing_test.exs
@@ -31,13 +31,13 @@ defmodule ExplorerWeb.UserListTest do
 
     session
     |> click(link("311"))
-    |> assert_has(css(".block-detail__item", text: "0xMrCoolBlock"))
-    |> assert_has(css(".block-detail__item", text: "Heathcliff"))
-    |> assert_has(css(".block-detail__item", text: "9999999"))
-    |> assert_has(css(".block-detail__item", text: "1 hour ago"))
-    |> assert_has(css(".block-detail__item", text: "5030101"))
-    |> assert_has(css(".block-detail__item", text: "once upon a nonce"))
-    |> assert_has(css(".block-detail__item", text: "1010101"))
+    |> assert_has(css(".block__item", text: "0xMrCoolBlock"))
+    |> assert_has(css(".block__item", text: "Heathcliff"))
+    |> assert_has(css(".block__item", text: "9,999,999"))
+    |> assert_has(css(".block__item", text: "1 hour ago"))
+    |> assert_has(css(".block__item", text: "5,030,101"))
+    |> assert_has(css(".block__item", text: "once upon a nonce"))
+    |> assert_has(css(".block__item", text: "1,010,101"))
   end
 
   test "views transactions", %{session: session} do
@@ -49,8 +49,8 @@ defmodule ExplorerWeb.UserListTest do
     insert(:transaction, %{
       hash: "0xSk8",
       value: 5656,
-      gas: 789000000000058745,
-      gas_price: 7890000000898912300045,
+      gas: 12345,
+      gas_price: 54321,
       input: "0x00012",
       nonce: 99045,
       block: transaction_block,
@@ -65,12 +65,12 @@ defmodule ExplorerWeb.UserListTest do
 
     session
     |> click(link("0xSk8"))
-    |> assert_has(css(".transaction-detail__hash", text: "0xSk8"))
-    |> assert_has(css(".transaction-detail__item", text: "5656"))
-    |> assert_has(css(".transaction-detail__item", text: "789000000000058745"))
-    |> assert_has(css(".transaction-detail__item", text: "7890000000898912300045"))
-    |> assert_has(css(".transaction-detail__item", text: "0x00012"))
-    |> assert_has(css(".transaction-detail__item", text: "99045"))
-    |> assert_has(css(".transaction-detail__item", text: "123987"))
+    |> assert_has(css(".transaction__subheading", text: "0xSk8"))
+    |> assert_has(css(".transaction__item", text: "5656 POA"))
+    |> assert_has(css(".transaction__item", text: "12,345 wei"))
+    |> assert_has(css(".transaction__item", text: "54321 POA"))
+    |> assert_has(css(".transaction__item", text: "0x00012"))
+    |> assert_has(css(".transaction__item", text: "99045"))
+    |> assert_has(css(".transaction__item", text: "123,987 wei"))
   end
 end