diff --git a/client/src/app.html b/client/src/app.html
index 92f4441..91e7678 100644
--- a/client/src/app.html
+++ b/client/src/app.html
@@ -21,6 +21,7 @@
 		<meta name="twitter:creator" content="Reinaldy Rafli" />
 		<link rel="icon" type="image/png" href="/favicon.png">
 		<link rel="icon" type="image/svg" href="/favicon.svg">
+		<script async defer data-website-id="82725fd7-2542-4828-b313-349f68d84894" src="https://jokesbapak2-analytics.herokuapp.com/umami.js"></script>
 		%svelte.head%
 	</head>
 	<body>
diff --git a/client/src/languages/en.json b/client/src/languages/en.json
index adc45fe..f18d018 100644
--- a/client/src/languages/en.json
+++ b/client/src/languages/en.json
@@ -84,7 +84,7 @@
       },
       "id": {
         "title": "Get joke by ID",
-        "body": "You'll get consistent joke for every call with the same ID."
+        "body": "You'll get consistent joke for every call with the same ID. Where ID is a number ranging from 1 to {total}."
       },
       "total": {
         "title": "Get total number of jokes",
diff --git a/client/src/languages/id.json b/client/src/languages/id.json
index 8e8c9fb..049e6d8 100644
--- a/client/src/languages/id.json
+++ b/client/src/languages/id.json
@@ -84,7 +84,7 @@
       },
       "id": {
         "title": "Dapatkan joke berdasarkan ID",
-        "body": "Bapak akan dapat hasil yang konsisten pada setiap request dengan ID yang sama."
+        "body": "Bapak akan dapat hasil yang konsisten pada setiap request dengan ID yang sama. Dimana ID adalah angka diantara 1 hingga {total}."
       },
       "total": {
         "title": "Dapatkan total jumlah jokes",
diff --git a/client/src/routes/__layout.svelte b/client/src/routes/__layout.svelte
index 78b6491..0a5b11a 100644
--- a/client/src/routes/__layout.svelte
+++ b/client/src/routes/__layout.svelte
@@ -24,19 +24,33 @@
       <slot />
     </main>
 
-    <footer class="font-body py-8">
-      <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
-        {$_('footer.made')} <span class="text-red-500">&#10084;</span>
-        {$_('footer.indonesia')}.
-        {$_('footer.available')}
-        <a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>.
-      </p>
-      <p class="text-sm opacity-50 inline-block">&nbsp;|&nbsp;</p>
-      <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
-        {$_('footer.language')}
-        <a href="?lang=en" target="_top" class="hover:underline">{$_('footer.english')}</a>
-        <a href="?lang=id" target="_top" class="hover:underline">{$_('footer.indonesian')}</a>
-      </p>
+    <footer class="font-body py-8 w-full md:w-1/2 lg:w-2/5">
+      <div class="flex flex-col md:flex-row flex-wrap">
+        <div class="flex-initial pr-3">
+          <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
+            {$_('footer.made')} <span class="text-red-500">&#10084;</span>
+            {$_('footer.indonesia')}.
+          </p>
+        </div>
+        <div class="flex-initial pr-3">
+          <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
+            {$_('footer.available')}
+            <a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>.
+          </p>
+        </div>
+        <div class="flex-initial pr-3">
+          <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
+            {$_('footer.language')}
+            <a href="?lang=en" target="_top" class="hover:underline">{$_('footer.english')}</a>
+            <a href="?lang=id" target="_top" class="hover:underline">{$_('footer.indonesian')}</a>.
+          </p>
+        </div>
+        <div class="flex-initial pr-3">
+          <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
+            <a href="https://jokesbapak2-analytics.herokuapp.com/share/1xYuVSyl/Jokes%20Bapak2" class="hover:underline">Analytics</a>.
+          </p>
+        </div>
+      </div>
     </footer>
   </div>
 </div>
diff --git a/client/src/routes/api.svelte b/client/src/routes/api.svelte
index 002f7fb..f5a6401 100644
--- a/client/src/routes/api.svelte
+++ b/client/src/routes/api.svelte
@@ -1,9 +1,26 @@
 <script lang="ts">
   // This page is meant to explain available API endpoints.
+  import {onMount} from 'svelte';
   import { _ } from 'svelte-i18n';
   import env from '$lib/env';
+  import {$fetch as omf} from 'ohmyfetch';
   import Codeblock from '../components/codeblock.svelte';
   import Notice from '../components/notice.svelte';
+
+  interface TotalResponse {
+    message: string;
+  }
+
+  let total;
+
+  onMount(async () => {
+    const totalJokes = async (): Promise<string> => {
+      const response = await omf<TotalResponse>(`${env.API_ENDPOINT}/total`);
+      return response.message;
+    };
+
+    total = await totalJokes();
+  });
 </script>
 
 <svelte:head>
@@ -36,7 +53,7 @@
     GET {env.API_ENDPOINT}/today
   </Codeblock>
   <h2>{$_('api.get.id.title')}</h2>
-  <p>{$_('api.get.id.body')}</p>
+  <p>{$_('api.get.id.body', { values: { total }})}</p>
   <Codeblock>
     GET {env.API_ENDPOINT}/id/&lcub;id&rcub;
   </Codeblock>
diff --git a/client/src/routes/index.svelte b/client/src/routes/index.svelte
index 70af080..5882caa 100644
--- a/client/src/routes/index.svelte
+++ b/client/src/routes/index.svelte
@@ -36,7 +36,7 @@
 <section>
   <div class="flex flex-col lg:flex-row items-center py-8">
     <div class="flex-1">
-      <h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline-total', { values: { total } })}</h1>
+      <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline-total', { values: { total } })}</h1>
       <p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p>
     </div>
     <div class="flex-1 md:px-6 w-full">
