diff --git a/apps/analytics/src/app.css b/apps/analytics/src/app.css
index 75d3999f..7d2b2c92 100644
--- a/apps/analytics/src/app.css
+++ b/apps/analytics/src/app.css
@@ -1,25 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Montserrat:wght@400;500;700;900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   html {
+    min-height: 100vh;
     background-color: #171923;
     background: linear-gradient(180deg, #171923 0%, #1a202c 100%);
   }
+
+  body {
+    overflow: hidden;
+  }
 }
 
 @layer components {
-  .card {
-    @apply bg-gray-700 rounded-3xl px-6 py-5 shadow-xl;
+  .numeric {
+    @apply font-mono font-bold;
   }
+}
 
-  .data-value {
-    @apply font-montserrat font-bold text-3xl;
-  }
+.card {
+  @apply bg-gray-700 rounded-3xl px-6 py-5 shadow-xl;
+}
 
-  .data-label {
-    @apply font-montserrat text-sm text-gray-400;
-  }
+.data-value {
+  @apply numeric font-bold text-3xl;
+}
+
+.data-label {
+  @apply font-montserrat text-gray-300;
+}
+
+.help {
+  @apply cursor-help underline decoration-dotted decoration-gray-500 hover:decoration-inherit;
+}
+
+.tooltip {
+  @apply absolute top-0 left-0 md:ml-4 bg-gray-600 rounded-xl p-3 text-sm font-montserrat w-80;
+}
+
+sub {
+  bottom: 0;
+  position: unset;
 }
diff --git a/apps/analytics/src/components/AverageAprChart.svelte b/apps/analytics/src/components/AverageAprChart.svelte
deleted file mode 100644
index 6a7e6378..00000000
--- a/apps/analytics/src/components/AverageAprChart.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-  import {toPercentage} from '@phala/util'
-  import type {ChartData} from 'chart.js'
-  import {Line} from 'svelte-chartjs'
-  import {derived} from 'svelte/store'
-  import {getGlobalState, getGlobalStateSnapshot} from '~/stores'
-
-  const displayValue = derived(getGlobalState(), ({data}) => {
-    const percentage = toPercentage(data?.summary?.averageApr)
-    if (percentage != null) {
-      return percentage
-    }
-  })
-
-  const data = derived(
-    getGlobalStateSnapshot(),
-    ({data}): ChartData<'line', number[]> | undefined => {
-      if (data != null) {
-        const {summary} = data
-        return {
-          labels: summary.map((e) => e.updatedTime),
-          datasets: [
-            {
-              label: 'Average APR',
-              data: summary.map((e) => e.averageApr.times(100).toNumber()),
-            },
-          ],
-        }
-      }
-    }
-  )
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Average APR</h1>
-    <div class="data-value mt-1">{$displayValue ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if $data != null}
-      <Line
-        data={$data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}, min: 0},
-          },
-          plugins: {
-            tooltip: {
-              callbacks: {
-                label: (chart) => {
-                  const value = chart.dataset.data[chart.dataIndex]
-                  if (typeof value === 'number') {
-                    return `${chart.dataset.label}: ${value.toFixed(2)}%`
-                  }
-                },
-              },
-            },
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/BudgetPerShareChart.svelte b/apps/analytics/src/components/BudgetPerShareChart.svelte
deleted file mode 100644
index 0e2b4957..00000000
--- a/apps/analytics/src/components/BudgetPerShareChart.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import type {ChartData} from 'chart.js'
-  import {Line} from 'svelte-chartjs'
-  import {derived} from 'svelte/store'
-  import {getGlobalState, getGlobalStateSnapshot} from '~/stores'
-
-  const displayValue = derived(getGlobalState(), ({data}) => {
-    const value = data?.summary?.budgetPerShare
-    if (value != null) {
-      return value.toDP(2).toString()
-    }
-  })
-
-  const data = derived(
-    getGlobalStateSnapshot(),
-    ({data}): ChartData<'line', number[]> | undefined => {
-      if (data != null) {
-        const {summary} = data
-        return {
-          labels: summary.map((e) => e.updatedTime),
-          datasets: [
-            {
-              label: 'Budget per share',
-              data: summary.map((e) => e.budgetPerShare.toDP(2).toNumber()),
-            },
-          ],
-        }
-      }
-    }
-  )
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Budget per share</h1>
-    <div class="data-value mt-1">{$displayValue ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if $data != null}
-      <Line
-        data={$data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}, min: 0},
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/DailyRewards.svelte b/apps/analytics/src/components/DailyRewards.svelte
deleted file mode 100644
index 82795460..00000000
--- a/apps/analytics/src/components/DailyRewards.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  import {compactFormat} from '@phala/util'
-  import {derived} from 'svelte/store'
-  import {getGlobalStateSnapshot} from '~/stores'
-
-  const store = getGlobalStateSnapshot()
-
-  const displayValue = derived(store, ({data}) => {
-    if (data != null) {
-      const {summary} = data
-      const length = summary.length
-      return compactFormat(
-        summary[length - 1].cumulativeRewards.minus(
-          summary[length - 5].cumulativeRewards
-        )
-      )
-    }
-  })
-</script>
-
-<div>
-  <h1 class="data-label">Daily rewards</h1>
-  <div class="data-value mt-1">{$displayValue ?? ''}</div>
-</div>
diff --git a/apps/analytics/src/components/DelegationValueChart.svelte b/apps/analytics/src/components/DelegationValueChart.svelte
deleted file mode 100644
index 47442315..00000000
--- a/apps/analytics/src/components/DelegationValueChart.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import {compactFormat} from '@phala/util'
-  import type {ChartData} from 'chart.js'
-  import {Line} from 'svelte-chartjs'
-  import {derived} from 'svelte/store'
-  import {getGlobalState, getGlobalStateSnapshot} from '~/stores'
-
-  const displayValue = derived(getGlobalState(), ({data}) => {
-    const value = data?.summary?.totalValue
-    if (value != null) {
-      return compactFormat(value)
-    }
-  })
-
-  const data = derived(
-    getGlobalStateSnapshot(),
-    ({data}): ChartData<'line', number[]> | undefined => {
-      if (data != null) {
-        const {summary} = data
-        return {
-          labels: summary.map((e) => e.updatedTime),
-          datasets: [
-            {
-              label: 'Delegation value',
-              data: summary.map((e) => e.totalValue.toNumber()),
-            },
-          ],
-        }
-      }
-    }
-  )
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Delegation value</h1>
-    <div class="data-value mt-1">{$displayValue ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if $data != null}
-      <Line
-        data={$data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}},
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/DelegatorChart.svelte b/apps/analytics/src/components/DelegatorChart.svelte
deleted file mode 100644
index 5cdc9ffb..00000000
--- a/apps/analytics/src/components/DelegatorChart.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import {compactFormat} from '@phala/util'
-  import type {ChartData} from 'chart.js'
-  import {Line} from 'svelte-chartjs'
-  import {derived} from 'svelte/store'
-  import {getGlobalState, getGlobalStateSnapshot} from '~/stores'
-
-  const displayValue = derived(getGlobalState(), ({data}) => {
-    const value = data?.summary?.delegatorCount
-    if (value != null) {
-      return compactFormat(value)
-    }
-  })
-
-  const data = derived(
-    getGlobalStateSnapshot(),
-    ({data}): ChartData<'line', number[]> | undefined => {
-      if (data != null) {
-        const {summary} = data
-        return {
-          labels: summary.map((e) => e.updatedTime),
-          datasets: [
-            {
-              label: 'Delegator',
-              data: summary.map((e) => e.delegatorCount),
-            },
-          ],
-        }
-      }
-    }
-  )
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Delegator</h1>
-    <div class="data-value mt-1">{$displayValue ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if $data != null}
-      <Line
-        data={$data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}},
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/OnlineWorkerChart.svelte b/apps/analytics/src/components/OnlineWorkerChart.svelte
deleted file mode 100644
index d31c96b1..00000000
--- a/apps/analytics/src/components/OnlineWorkerChart.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import {compactFormat} from '@phala/util'
-  import type {ChartData} from 'chart.js'
-  import {Line} from 'svelte-chartjs'
-  import {derived} from 'svelte/store'
-  import {getGlobalState, getGlobalStateSnapshot} from '~/stores'
-
-  const displayValue = derived(getGlobalState(), ({data}) => {
-    const value = data?.summary?.idleWorkerCount
-    if (value != null) {
-      return compactFormat(value)
-    }
-  })
-
-  const data = derived(
-    getGlobalStateSnapshot(),
-    ({data}): ChartData<'line', number[]> | undefined => {
-      if (data != null) {
-        const {summary} = data
-        return {
-          labels: summary.map((e) => e.updatedTime),
-          datasets: [
-            {
-              label: 'Online workers',
-              data: summary.map((e) => e.idleWorkerCount),
-            },
-          ],
-        }
-      }
-    }
-  )
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Online workers</h1>
-    <div class="data-value mt-1">{$displayValue ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if $data != null}
-      <Line
-        data={$data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}},
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/PhatContractChart.svelte b/apps/analytics/src/components/PhatContractChart.svelte
deleted file mode 100644
index b5ef3e65..00000000
--- a/apps/analytics/src/components/PhatContractChart.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-  import {compactFormat} from '@phala/util'
-  import type {ChartData} from 'chart.js'
-  import {addDays} from 'date-fns'
-  import {gql} from 'graphql-request'
-  import {onMount} from 'svelte'
-  import {Bar} from 'svelte-chartjs'
-  import {phatClient} from '~/lib/graphql'
-
-  interface ExecutionData {
-    dt: string
-    executionCount: number
-    userCount: number
-  }
-
-  let data: ChartData<'bar', number[]>
-  let latestExecutionCount: string
-
-  onMount(() => {
-    const days = 14
-    const startTime = addDays(new Date(), -days).toISOString()
-    const document = gql`
-      {
-        phatOfflineExecution(
-          orderBy: {dt: ASC}
-          where: {dt: {_gte: "${startTime}"}}
-        ) {
-          dt
-          executionCount
-          userCount
-        }
-      }
-    `
-
-    phatClient
-      .request<{phatOfflineExecution: ExecutionData[]}>(document)
-      .then((res) => {
-        let executions = res.phatOfflineExecution.map((e) => ({
-          ...e,
-          dt: new Date(e.dt),
-        }))
-        if (executions.length > 0) {
-          latestExecutionCount = compactFormat(executions[0].executionCount)
-        }
-        data = {
-          labels: executions.map((e) => e.dt),
-          datasets: [
-            {
-              label: 'Execution count',
-              data: executions.map((e) => e.executionCount),
-            },
-          ],
-        }
-      })
-  })
-</script>
-
-<div class="flex flex-col h-full">
-  <div>
-    <h1 class="data-label">Phat Contract daily execution</h1>
-    <div class="data-value mt-1">{latestExecutionCount ?? ''}</div>
-  </div>
-
-  <div class="mt-4 flex-1">
-    {#if data != null}
-      <Bar
-        {data}
-        options={{
-          scales: {
-            x: {type: 'time'},
-            y: {ticks: {display: false}},
-          },
-        }}
-      />
-    {/if}
-  </div>
-</div>
diff --git a/apps/analytics/src/components/StakeRatio.svelte b/apps/analytics/src/components/StakeRatio.svelte
deleted file mode 100644
index b0d37015..00000000
--- a/apps/analytics/src/components/StakeRatio.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import {toPercentage} from '@phala/util'
-  import {derived} from 'svelte/store'
-  import {getGlobalState} from '~/stores'
-  import {getCirculation} from '~/stores/circulation'
-
-  const stakeRatio = derived(
-    [getGlobalState(), getCirculation()],
-    ([{data: globalStateData}, {data: circulation}]) => {
-      if (globalStateData != null && circulation != null) {
-        return toPercentage(globalStateData.summary.totalValue.div(circulation))
-      }
-    }
-  )
-</script>
-
-<div>
-  <h1 class="data-label">Stake Ratio</h1>
-  <div class="data-value mt-1">{$stakeRatio ?? ''}</div>
-</div>
diff --git a/apps/analytics/src/lib/Computation.svelte b/apps/analytics/src/lib/Computation.svelte
new file mode 100644
index 00000000..5f8cc29e
--- /dev/null
+++ b/apps/analytics/src/lib/Computation.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/util'
+  import {
+    RadioGroup,
+    RadioGroupLabel,
+    RadioGroupOption,
+  } from '@rgossiaux/svelte-headlessui'
+  import type {ChartData} from 'chart.js'
+  import {Line} from 'svelte-chartjs'
+  import {derived, writable} from 'svelte/store'
+  import {getComputationData, getComputationSnapshot} from '~/stores'
+  import {getCirculation} from '~/stores/circulation'
+  import Tooltip from './Tooltip.svelte'
+
+  const display = derived(
+    [getComputationData(), getComputationSnapshot(), getCirculation()],
+    ([{data}, {data: snapshot}, {data: circulation}]) => {
+      let delegationValue = 'ㅤ'
+      let dailyRewards = 'ㅤ'
+      let averageApr = 'ㅤ'
+      let stakeRatio = 'ㅤ'
+      let onlineWorkers = 'ㅤ'
+      let delegator = 'ㅤ'
+      let budgetPerShare = 'ㅤ'
+
+      const format = new Intl.NumberFormat('en-US').format
+      const formatPercentage = new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        maximumFractionDigits: 2,
+      }).format
+
+      if (snapshot != null) {
+        const {summary} = snapshot
+        const length = summary.length
+        dailyRewards = `${format(
+          summary[length - 1].cumulativeRewards
+            .minus(summary[length - 3].cumulativeRewards)
+            .toDP(0)
+            .toNumber()
+        )} PHA`
+      }
+
+      if (data != null) {
+        delegationValue = `${compactFormat(
+          data.summary.totalValue
+        )} <sub>PHA</sub>`
+        averageApr = formatPercentage(data.summary.averageApr.toNumber())
+        if (circulation != null) {
+          stakeRatio = formatPercentage(
+            data.summary.totalValue.div(circulation).toNumber()
+          )
+        }
+        onlineWorkers = format(data.summary.idleWorkerCount)
+        delegator = format(data.summary.delegatorCount)
+        budgetPerShare = data.summary.budgetPerShare.toDP(2).toString()
+      }
+
+      return [
+        [
+          'Delegation value',
+          delegationValue,
+          'All delegated PHA across the Phala & Khala network',
+        ],
+        [
+          'Daily rewards',
+          dailyRewards,
+          'The total amount of computation rewards distributed across the Phala & Khala network in the last day.',
+        ],
+        [
+          'Average APR',
+          averageApr,
+          'The average annual percentage rate of return for all delegations across the Phala & Khala network. (no consideration of compound interest)',
+        ],
+        [
+          'Stake ratio',
+          stakeRatio,
+          'Stake Ratio = All delegated PHA across the Phala & Khala network / All circulating PHA.',
+        ],
+        [
+          'Online workers',
+          onlineWorkers,
+          'The total number of online workers across the Phala & Khala network.',
+        ],
+        [
+          'Delegator',
+          delegator,
+          'All delegator count across the Phala & Khala network',
+        ],
+        [
+          'Daily budget/share',
+          budgetPerShare,
+          `It's roughly equal to the daily income of a 10,000V worker before the 20% take away to the Treasury.`,
+        ],
+      ]
+    }
+  )
+
+  const charts = [
+    'Delegation value',
+    'Average APR',
+    'Online workers',
+    'Delegator',
+    'Daily budge/share',
+  ] as const
+
+  const currentChart = writable<(typeof charts)[number]>(charts[0])
+
+  $: isPercentage = $currentChart === 'Average APR'
+
+  const data = derived(
+    [getComputationSnapshot(), currentChart],
+    ([{data}, $currentChart]): ChartData<'line', number[]> | undefined => {
+      if (data != null) {
+        const {summary} = data
+        return {
+          labels: summary.map((e) => e.updatedTime),
+          datasets: [
+            {
+              label: $currentChart,
+              data: summary.map((e) => {
+                switch ($currentChart) {
+                  case 'Delegation value':
+                    return e.totalValue.toNumber()
+                  case 'Average APR':
+                    return e.averageApr.toDP(4).toNumber()
+                  case 'Online workers':
+                    return e.idleWorkerCount
+                  case 'Delegator':
+                    return e.delegatorCount
+                  case 'Daily budge/share':
+                    return e.budgetPerShare.toDP(2).toNumber()
+                }
+              }),
+            },
+          ],
+        }
+      }
+    }
+  )
+</script>
+
+<h1 class="font-montserrat text-4xl font-bold my-8">Computation</h1>
+<div class="flex flex-wrap gap-4">
+  <section class="card h-80 min-w-[340px] max-md:w-full">
+    {#each $display as item, i}
+      {#if i === 0}
+        <Tooltip title={item[2]}>
+          <span class="data-label">
+            {item[0]}
+          </span>
+        </Tooltip>
+        <div class="data-value mt-1 mb-5">{@html item[1]}</div>
+      {:else}
+        <div class="flex items-baseline justify-between mt-1">
+          <Tooltip title={item[2]}>
+            <span class="data-label">{item[0]}</span>
+          </Tooltip>
+          <span class="numeric">{item[1]}</span>
+        </div>
+      {/if}
+    {/each}
+  </section>
+  <section
+    class="card h-80 flex-1 max-md:w-full overflow-hidden flex flex-col gap-3"
+  >
+    <RadioGroup
+      bind:value={$currentChart}
+      class="flex font-montserrat flex-wrap gap-2"
+    >
+      {#each charts as chart}
+        <RadioGroupOption
+          value={chart}
+          class={({checked}) =>
+            `${
+              checked ? 'bg-black/20' : 'bg-black/10 text-gray-500'
+            } p-2 rounded-2xl cursor-pointer text-xs`}
+        >
+          <RadioGroupLabel as="p">
+            {chart}
+          </RadioGroupLabel>
+        </RadioGroupOption>
+      {/each}
+    </RadioGroup>
+
+    <div class="flex-1 overflow-hidden">
+      {#if $data != null}
+        <Line
+          data={$data}
+          options={{
+            scales: {
+              x: {type: 'time'},
+              y: {
+                ticks: {
+                  format: {
+                    style: isPercentage ? 'percent' : undefined,
+                    minimumFractionDigits: isPercentage ? 0 : undefined,
+                  },
+                },
+              },
+            },
+          }}
+        />
+      {/if}
+    </div>
+  </section>
+</div>
diff --git a/apps/analytics/src/components/Nav.svelte b/apps/analytics/src/lib/Nav.svelte
similarity index 57%
rename from apps/analytics/src/components/Nav.svelte
rename to apps/analytics/src/lib/Nav.svelte
index 9ea03ae8..58b77130 100644
--- a/apps/analytics/src/components/Nav.svelte
+++ b/apps/analytics/src/lib/Nav.svelte
@@ -4,11 +4,12 @@
     MenuButton,
     MenuItem,
     MenuItems,
-    Transition,
   } from '@rgossiaux/svelte-headlessui'
   import {ChevronDownIcon} from '@rgossiaux/svelte-heroicons/solid'
+  import {fade} from 'svelte/transition'
+
   let links: {label: string; href: string}[] = [
-    {label: 'Home', href: 'https://phala.network'},
+    {label: 'Official Website', href: 'https://phala.network'},
     {label: 'Phala App', href: 'https://app.phala.network'},
     {label: 'Phat Contract', href: 'https://phat.phala.network'},
     {label: 'Phat Bricks', href: 'https://bricks.phala.network'},
@@ -23,32 +24,32 @@
     <h1 class="font-black font-montserrat text-base">Analytics</h1>
   </div>
 
-  <Menu class="absolute top-1 left-1 h-12 font-black font-montserrat text-base">
+  <Menu
+    let:open
+    class="absolute top-1 left-1 h-12 font-black font-montserrat text-base"
+  >
     <MenuButton class="flex items-center bg-black/20 rounded-full pr-4">
       <img class="block w-12 mr-4" src="logo.svg" alt="Phala logo" />
       <h1>Analytics</h1>
       <ChevronDownIcon class="w-5 h-5 ml-8 text-gray-600" aria-hidden="true" />
     </MenuButton>
-    <Transition
-      enter="transition duration-100 ease-out"
-      enterFrom="transform scale-95 opacity-0"
-      enterTo="transform scale-100 opacity-100"
-      leave="transition duration-75 ease-out"
-      leaveFrom="transform scale-100 opacity-100"
-      leaveTo="transform scale-95 opacity-0"
-    >
-      <MenuItems
-        class="absolute right-0 mt-2 bg-gray-700 rounded-3xl p-1 shadow-xl"
-      >
-        {#each links as link}
-          <MenuItem
-            target="_blank"
-            class="flex items-center px-6 hover:bg-black/20 h-10 rounded-full"
-            href={link.href}>{link.label}</MenuItem
-          >
-        {/each}
-      </MenuItems>
-    </Transition>
+
+    {#if open}
+      <div transition:fade>
+        <MenuItems
+          static
+          class="absolute right-0 mt-2 bg-gray-700 rounded-3xl p-1 shadow-xl"
+        >
+          {#each links as link}
+            <MenuItem
+              target="_blank"
+              class="flex items-center px-6 hover:bg-black/20 h-10 rounded-full"
+              href={link.href}>{link.label}</MenuItem
+            >
+          {/each}
+        </MenuItems>
+      </div>
+    {/if}
   </Menu>
 
   <ul class="font-montserrat hidden md:block text-sm">
diff --git a/apps/analytics/src/lib/PhatContract.svelte b/apps/analytics/src/lib/PhatContract.svelte
new file mode 100644
index 00000000..ca723a32
--- /dev/null
+++ b/apps/analytics/src/lib/PhatContract.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/util'
+  import type {ChartData} from 'chart.js'
+  import {Bar} from 'svelte-chartjs'
+  import {derived} from 'svelte/store'
+  import {getPhatContractData} from '~/stores/phat'
+  import {getPhatOffchainData} from '~/stores/phatOffchain'
+
+  const display = derived(
+    [getPhatContractData(), getPhatOffchainData()],
+    ([{data}, {data: offchainData}]) => {
+      let dailyExecution = 'ㅤ'
+      let staking = 'ㅤ'
+      let clusterWorkers = 'ㅤ'
+      let contracts = 'ㅤ'
+      let users = 'ㅤ'
+
+      let chartData: ChartData<'bar', number[]> | null = null
+
+      const format = new Intl.NumberFormat('en-US').format
+
+      if (data != null) {
+        staking = `${format(data.stake.toDP(0).toNumber())} PHA`
+        clusterWorkers = format(data.idleWorker)
+        contracts = format(data.contract)
+        users = format(data.staker)
+      }
+
+      if (offchainData != null && offchainData.length > 0) {
+        chartData = {
+          labels: offchainData.map((e) => e.dt),
+          datasets: [
+            {
+              label: 'Execution count',
+              data: offchainData.map((e) => e.executionCount),
+            },
+          ],
+        }
+
+        const latest = offchainData?.at(-1)?.executionCount
+        if (latest != null) {
+          dailyExecution = compactFormat(latest)
+        }
+      }
+
+      return {
+        chartData,
+        entries: [
+          ['Daily execution', dailyExecution],
+          ['Staking', staking],
+          ['Cluster workers', clusterWorkers],
+          ['Contracts', contracts],
+          ['Users', users],
+        ],
+      }
+    }
+  )
+</script>
+
+<h1 class="font-montserrat text-4xl font-bold my-8">Phat Contract</h1>
+
+<div class="flex flex-wrap gap-4">
+  <section class="card h-80 min-w-[340px] max-md:w-full">
+    {#each $display.entries as item, i}
+      {#if i === 0}
+        <h2 class="data-label">{item[0]}</h2>
+        <div class="data-value mt-1 mb-5">{@html item[1]}</div>
+      {:else}
+        <div class="flex items-baseline justify-between mt-1">
+          <h2 class="data-label">{item[0]}</h2>
+          <span class="numeric">{item[1]}</span>
+        </div>
+      {/if}
+    {/each}
+  </section>
+  <section class="card h-80 flex-1 max-md:w-full overflow-hidden">
+    {#if $display.chartData != null}
+      <Bar data={$display.chartData} options={{scales: {x: {type: 'time'}}}} />
+    {/if}
+  </section>
+</div>
diff --git a/apps/analytics/src/lib/Tooltip.svelte b/apps/analytics/src/lib/Tooltip.svelte
new file mode 100644
index 00000000..b1faa0cc
--- /dev/null
+++ b/apps/analytics/src/lib/Tooltip.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    Popover,
+    PopoverButton,
+    PopoverPanel,
+  } from '@rgossiaux/svelte-headlessui'
+  import {fade} from 'svelte/transition'
+
+  let timeout: ReturnType<typeof setTimeout>
+  const onmouseenter = (open: boolean) => (e: any) => {
+    clearTimeout(timeout)
+    if (!open) {
+      e.currentTarget.click()
+    }
+  }
+  const onmouseleave =
+    (open: boolean, close: (el: null) => void) => (e: any) => {
+      if (open) {
+        timeout = setTimeout(() => {
+          close(null)
+        }, 100)
+      }
+    }
+  export let title: string | undefined = undefined
+</script>
+
+<Popover let:open let:close as="span">
+  <PopoverButton
+    as="span"
+    class="help"
+    on:mouseenter={onmouseenter(open)}
+    on:mouseleave={onmouseleave(open, close)}
+  >
+    <slot />
+  </PopoverButton>
+  {#if open}
+    <div transition:fade={{duration: 100}} class="relative md:inline">
+      <PopoverPanel
+        static
+        class="tooltip"
+        on:click={(e) => e.stopPropagation()}
+        on:mouseenter={onmouseenter(open)}
+        on:mouseleave={onmouseleave(open, close)}
+      >
+        {title ?? ''}
+      </PopoverPanel>
+    </div>
+  {/if}
+</Popover>
diff --git a/apps/analytics/src/lib/chart.ts b/apps/analytics/src/lib/chart.ts
index c25f89f8..9889e5d9 100644
--- a/apps/analytics/src/lib/chart.ts
+++ b/apps/analytics/src/lib/chart.ts
@@ -25,19 +25,31 @@ export const initChartJS = () => {
     BarElement,
   )
 
-  Chart.defaults.elements.line.tension = 0.5
-  Chart.defaults.elements.point.radius = 0
-  Chart.defaults.maintainAspectRatio = false
-  Chart.defaults.font.family = 'Montserrat'
-  Chart.defaults.color = '#94a3b8'
-  Chart.defaults.interaction.mode = 'index'
-  Chart.defaults.interaction.intersect = false
-  Chart.defaults.plugins.tooltip.displayColors = false
-  Chart.defaults.scale.grid.display = false
-  Chart.defaults.scales.time.time.tooltipFormat = 'Pp'
-  Chart.defaults.borderColor = 'transparent'
-  Chart.defaults.animation = false
-  Chart.defaults.datasets.line.borderColor = '#C5FF46'
-  Chart.defaults.datasets.bar.backgroundColor = '#C5FF46'
-  Chart.defaults.datasets.bar.barPercentage = 0.6
+  const defaults = Chart.defaults
+
+  defaults.elements.line.tension = 0.5
+  defaults.elements.point.radius = 0
+  defaults.maintainAspectRatio = false
+  defaults.font.family = 'IBM Plex Mono'
+  defaults.color = '#94a3b8'
+  defaults.interaction.mode = 'index'
+  defaults.interaction.intersect = false
+  defaults.plugins.tooltip.displayColors = false
+  defaults.scale.grid.drawTicks = false
+  // defaults.scale.grid.tickBorderDash = [6, 6]
+  defaults.scales.time.time.tooltipFormat = 'Pp'
+  defaults.scales.time.time.minUnit = 'day'
+  defaults.scales.time.ticks.maxRotation = 0
+  // defaults.scales.linear.min = 0
+  defaults.scales.linear.ticks.format = {
+    notation: 'compact',
+    maximumFractionDigits: 2,
+  }
+  defaults.borderColor = 'rgba(255, 255, 255, 0.1)'
+  defaults.animation = false
+  defaults.datasets.line.borderColor = '#C5FF46'
+  defaults.datasets.line.borderWidth = 2
+  defaults.datasets.bar.backgroundColor = '#5D6575'
+  defaults.datasets.bar.barPercentage = 0.85
+  defaults.datasets.bar.borderRadius = 4
 }
diff --git a/apps/analytics/src/lib/graphql.ts b/apps/analytics/src/lib/graphql.ts
index 6797abc7..6e626f27 100644
--- a/apps/analytics/src/lib/graphql.ts
+++ b/apps/analytics/src/lib/graphql.ts
@@ -1,9 +1,13 @@
 import {GraphQLClient} from 'graphql-request'
 
-export const phatClient = new GraphQLClient(
+export const phatOffchainClient = new GraphQLClient(
   'https://offchain-metrics.phala.network/v1/graphql',
 )
 
+export const phatSquidClient = new GraphQLClient(
+  'https://squid.subsquid.io/phat-contract-squid/graphql',
+)
+
 export const phalaSquidClient = new GraphQLClient(
   'https://squid.subsquid.io/phala-computation/graphql',
 )
diff --git a/apps/analytics/src/routes/+page.svelte b/apps/analytics/src/routes/+page.svelte
index 4a3a6f0c..51e458bd 100644
--- a/apps/analytics/src/routes/+page.svelte
+++ b/apps/analytics/src/routes/+page.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
-  import AverageAprChart from '~/components/AverageAprChart.svelte'
-  import BudgetPerShareChart from '~/components/BudgetPerShareChart.svelte'
-  import DailyRewards from '~/components/DailyRewards.svelte'
-  import DelegationValueChart from '~/components/DelegationValueChart.svelte'
-  import DelegatorChart from '~/components/DelegatorChart.svelte'
-  import Nav from '~/components/Nav.svelte'
-  import OnlineWorkerChart from '~/components/OnlineWorkerChart.svelte'
-  import PhatContractChart from '~/components/PhatContractChart.svelte'
-  import StakeRatio from '~/components/StakeRatio.svelte'
+  import Computation from '~/lib/Computation.svelte'
+  import Nav from '~/lib/Nav.svelte'
+  import PhatContract from '~/lib/PhatContract.svelte'
   import {initChartJS} from '~/lib/chart'
 
   initChartJS()
@@ -21,35 +15,8 @@
   <Nav />
 </header>
 
-<main
-  class="grid gap-4 grid-cols-1 md:grid-cols-2 max-w-5xl mx-auto mt-6 md:mt-14 px-4 md:px-6 mb-6"
->
-  <!-- <section
-    class="card col-span-2 grid gap-4 md:grid-cols-4 grid-cols-2 divide-x-2"
-  /> -->
-  <section class="card h-24">
-    <DailyRewards />
-  </section>
-  <section class="card h-24">
-    <StakeRatio />
-  </section>
-  <section class="card h-80">
-    <DelegationValueChart />
-  </section>
-  <section class="card h-80">
-    <AverageAprChart />
-  </section>
-  <section class="card h-80">
-    <OnlineWorkerChart />
-  </section>
-  <section class="card h-80">
-    <DelegatorChart />
-  </section>
-
-  <section class="card h-80">
-    <BudgetPerShareChart />
-  </section>
-  <section class="card h-80">
-    <PhatContractChart />
-  </section>
+<main class="max-w-5xl mx-auto mt-6 md:mt-14 px-4 md:px-6 mb-6">
+  <Computation />
+  <div class="mt-4 overflow-hidden" />
+  <PhatContract />
 </main>
diff --git a/apps/analytics/src/stores/globalState.ts b/apps/analytics/src/stores/computation.ts
similarity index 93%
rename from apps/analytics/src/stores/globalState.ts
rename to apps/analytics/src/stores/computation.ts
index 8ffad7ec..27d0c6a1 100644
--- a/apps/analytics/src/stores/globalState.ts
+++ b/apps/analytics/src/stores/computation.ts
@@ -34,7 +34,7 @@ type State = {
   height: number
 }
 
-type GlobalState = {
+type ComputationData = {
   phala: State
   khala: State
   summary: Omit<State, 'height' | 'averageBlockTime'>
@@ -53,7 +53,7 @@ const transform = (data: Data) => {
   }
 }
 
-const fetchGlobalState = async (): Promise<GlobalState> => {
+const fetchComputationData = async (): Promise<ComputationData> => {
   const document = gql`
     {
       globalStateById(id: "0") {
@@ -107,5 +107,5 @@ const fetchGlobalState = async (): Promise<GlobalState> => {
   return {phala, khala, summary}
 }
 
-export const getGlobalState = () =>
-  createQuery(['globalState'], fetchGlobalState)
+export const getComputationData = () =>
+  createQuery(['computation'], fetchComputationData)
diff --git a/apps/analytics/src/stores/globalStateSnapshot.ts b/apps/analytics/src/stores/computationSnapshot.ts
similarity index 86%
rename from apps/analytics/src/stores/globalStateSnapshot.ts
rename to apps/analytics/src/stores/computationSnapshot.ts
index 012144a0..d0cefe4a 100644
--- a/apps/analytics/src/stores/globalStateSnapshot.ts
+++ b/apps/analytics/src/stores/computationSnapshot.ts
@@ -24,7 +24,7 @@ type Data = {
   }
 }
 
-type StateSnapshot = {
+type Snapshot = {
   averageApr: Decimal
   delegatorCount: number
   idleWorkerCount: number
@@ -37,19 +37,19 @@ type StateSnapshot = {
   workerCount: number
 }
 
-type Summary = Omit<StateSnapshot, 'averageBlockTime'>
+type Summary = Omit<Snapshot, 'averageBlockTime'>
 
-type GlobalStateSnapshot = {
-  phala: StateSnapshot[]
-  khala: StateSnapshot[]
+type ComputationSnapshot = {
+  phala: Snapshot[]
+  khala: Snapshot[]
   summary: Summary[]
 }
 
-const transform = (data: Data, updatedTimeArray: string[]): StateSnapshot[] => {
+const transform = (data: Data, updatedTimeArray: string[]): Snapshot[] => {
   const {
     globalStateSnapshotsConnection: {edges},
   } = data
-  const raw: StateSnapshot[] = edges.map(({node}) => {
+  const raw: Snapshot[] = edges.map(({node}) => {
     return {
       ...node,
       updatedTime: new Date(node.updatedTime),
@@ -65,18 +65,18 @@ const transform = (data: Data, updatedTimeArray: string[]): StateSnapshot[] => {
     const date = new Date(dateString)
     const node = raw.findLast(({updatedTime}) => {
       return isEqual(updatedTime, date) || isBefore(updatedTime, date)
-    }) as StateSnapshot
+    }) as Snapshot
     return {...node, updatedTime: date}
   })
 }
 
-const fetchGlobalStateSnapshot = async (): Promise<GlobalStateSnapshot> => {
-  const days = 7
-  const intervalHours = 6
+const fetchComputationSnapshot = async (): Promise<ComputationSnapshot> => {
+  const days = 30
+  const intervalHours = 12
   const startTime = addDays(new Date(), -days)
   startTime.setUTCHours(0, 0, 0, 0)
   const updatedTimeArray: string[] = []
-  for (let i = 0; i < days * (24 / intervalHours); i++) {
+  for (let i = 0; i < Math.floor((days * 24) / intervalHours); i++) {
     updatedTimeArray.push(addHours(startTime, i * intervalHours).toISOString())
   }
   const document = gql`
@@ -145,5 +145,5 @@ const fetchGlobalStateSnapshot = async (): Promise<GlobalStateSnapshot> => {
   return {phala, khala, summary}
 }
 
-export const getGlobalStateSnapshot = () =>
-  createQuery(['globalStateSnapshot'], fetchGlobalStateSnapshot)
+export const getComputationSnapshot = () =>
+  createQuery(['computationSnapshot'], fetchComputationSnapshot)
diff --git a/apps/analytics/src/stores/index.ts b/apps/analytics/src/stores/index.ts
index a1f396f2..5be12b15 100644
--- a/apps/analytics/src/stores/index.ts
+++ b/apps/analytics/src/stores/index.ts
@@ -1,2 +1,2 @@
-export * from './globalState'
-export * from './globalStateSnapshot'
+export * from './computation'
+export * from './computationSnapshot'
diff --git a/apps/analytics/src/stores/phat.ts b/apps/analytics/src/stores/phat.ts
new file mode 100644
index 00000000..6aa40356
--- /dev/null
+++ b/apps/analytics/src/stores/phat.ts
@@ -0,0 +1,65 @@
+import {createQuery} from '@tanstack/svelte-query'
+import Decimal from 'decimal.js'
+import {gql} from 'graphql-request'
+import {phatSquidClient} from '~/lib/graphql'
+
+type Data = {
+  metaById: {
+    cluster: number
+    contract: number
+    idleWorker: number
+    pInit: number
+    stake: string
+    staker: number
+    worker: number
+  }
+  squidStatus: {
+    height: number
+  }
+}
+
+type PhatData = {
+  cluster: number
+  contract: number
+  idleWorker: number
+  pInit: number
+  stake: Decimal
+  staker: number
+  worker: number
+  height: number
+}
+
+const transform = (data: Data) => {
+  const {metaById, squidStatus} = data
+  return {
+    ...metaById,
+    ...squidStatus,
+    stake: new Decimal(metaById.stake),
+  }
+}
+
+const fetchPhatData = async (): Promise<PhatData> => {
+  const document = gql`
+    {
+      metaById(id: "0") {
+        cluster
+        contract
+        idleWorker
+        pInit
+        stake
+        staker
+        worker
+      }
+      squidStatus {
+        height
+      }
+    }
+  `
+
+  const data = await phatSquidClient.request<Data>(document)
+
+  return transform(data)
+}
+
+export const getPhatContractData = () =>
+  createQuery(['phatContract'], fetchPhatData)
diff --git a/apps/analytics/src/stores/phatOffchain.ts b/apps/analytics/src/stores/phatOffchain.ts
new file mode 100644
index 00000000..3bc0a5ad
--- /dev/null
+++ b/apps/analytics/src/stores/phatOffchain.ts
@@ -0,0 +1,39 @@
+import {createQuery} from '@tanstack/svelte-query'
+import {addDays} from 'date-fns'
+import {gql} from 'graphql-request'
+import {phatOffchainClient} from '~/lib/graphql'
+
+interface ExecutionData {
+  dt: string
+  executionCount: number
+  userCount: number
+}
+
+const fetchPhatOffchainData = async () => {
+  const days = 30
+  const startTime = addDays(new Date(), -days).toISOString()
+  const document = gql`
+    {
+      phatOfflineExecution(
+        orderBy: {dt: ASC}
+        where: {dt: {_gte: "${startTime}"}}
+      ) {
+        dt
+        executionCount
+        userCount
+      }
+    }
+  `
+
+  const data = await phatOffchainClient.request<{
+    phatOfflineExecution: ExecutionData[]
+  }>(document)
+
+  return data.phatOfflineExecution.map((e) => ({
+    ...e,
+    dt: new Date(e.dt),
+  }))
+}
+
+export const getPhatOffchainData = () =>
+  createQuery(['phatContractOffchain'], fetchPhatOffchainData)
diff --git a/apps/analytics/tailwind.config.js b/apps/analytics/tailwind.config.js
index de041697..e49814fe 100644
--- a/apps/analytics/tailwind.config.js
+++ b/apps/analytics/tailwind.config.js
@@ -6,12 +6,13 @@ export default {
       colors: {
         gray: {
           700: '#2D3748',
-          400: '#A0AEC0',
+          // 400: '#A0AEC0',
         },
       },
     },
     fontFamily: {
       montserrat: ['Montserrat', 'sans-serif'],
+      mono: ['IBM Plex Mono', 'monospace'],
     },
   },
   plugins: [],
diff --git a/packages/utils/src/toPercentage.ts b/packages/utils/src/toPercentage.ts
index db5b16a7..c52cda48 100644
--- a/packages/utils/src/toPercentage.ts
+++ b/packages/utils/src/toPercentage.ts
@@ -5,7 +5,7 @@ export function toPercentage(
   value: Decimal | string | number | null | undefined,
   fractionDigits = 2,
 ): string | undefined | null {
-  if (value == null) return value
+  if (value == null) return null
   const decimal = new Decimal(value)
 
   return `${toFixed(decimal.times(100), fractionDigits)}%`