diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 7c550a96b..33c7a090d 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -1,24 +1,8 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
         <div class="hp-bar-big" :style="barStyle">
-            <!-- <div
-                v-for="(beat, index) in shortBeatList"
-                :key="index"
-                class="beat"
-                :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
-                :style="beatStyle"
-                :title="getBeatTitle(beat)"
-            /> -->
             <CalendarHeatmap :style="{ fill: '#fff' }" class="heat-map" :values="values" :end-date="endDate" no-data-text="Down" tooltip-unit="counts" />
         </div>
-        <!-- <div
-            v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
-            class="d-flex justify-content-between align-items-center word" :style="timeStyle"
-        >
-            <div>{{ timeSinceFirstBeat }} ago</div>
-            <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
-            <div>{{ timeSinceLastBeat }}</div>
-        </div> -->
     </div>
 </template>
 
@@ -398,28 +382,4 @@ export default {
     }
 }
 
-.dark {
-    .hp-bar-big .beat.empty {
-        background-color: #848484;
-    }
-}
-
-.word {
-    color: #aaa;
-    font-size: 12px;
-}
-
-.connecting-line {
-    flex-grow: 1;
-    height: 1px;
-    background-color: #ededed;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: 2px;
-
-    .dark & {
-        background-color: #333;
-    }
-}
-
 </style>