diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index fd8ac4d..844e243 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -61,13 +61,54 @@
       <!-- Case Duration -->
       <div class="pt-1 pb-4">
         <p class="h2">Case Duration</p>
-        <ul class="space-y-1 text-sm">
-          <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.min) }}</li>
-          <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.average) }}</li>
-          <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.median) }}</li>
-          <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.max) }}</li>
-        </ul>
-
+        <table class="text-sm caseDurationTable">
+          <tbody>
+            <tr>
+              <td>
+                <Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.min)[1] }}
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.min)[2] }}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.average)[1] }}
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.average)[2] }}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.median)[1] }}
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.median)[2] }}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.max)[1] }}
+              </td>
+              <td>
+                {{ timeLabel(stats.case_duration.max)[2] }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
     <!-- header: insight -->
@@ -203,7 +244,8 @@ export default {
      * @param {number} time use timeLabel.js
      */
     timeLabel(time){
-      return getTimeLabel(time);
+      let result = getTimeLabel(time).match(/(\d+)\s*([a-zA-Z]+)/);
+      return result;
     },
     /**
      * @param {number} time use moment
@@ -255,4 +297,16 @@ export default {
 :deep(.p-tabview-panel) {
   @apply animate-fadein
 }
+/* .caseDurationTable td:first-child {
+  @apply pr-1
+} */
+.caseDurationTable td {
+  @apply scroll-pb-12
+}
+.caseDurationTable td:nth-child(2) {
+  @apply text-right
+}
+.caseDurationTable td:last-child {
+  @apply pl-2
+}
 </style>