diff --git a/src/mixins/theme.js b/src/mixins/theme.js
index 98b605a7a..44e375327 100644
--- a/src/mixins/theme.js
+++ b/src/mixins/theme.js
@@ -4,6 +4,7 @@ export default {
         return {
             system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
             userTheme: localStorage.theme,
+            userHeartbeatBar: localStorage.heartbeatBarTheme,
         };
     },
 
@@ -13,6 +14,11 @@ export default {
             this.userTheme = "light";
         }
 
+        // Default Heartbeat Bar
+        if (!this.userHeartbeatBar) {
+            this.userHeartbeatBar = "normal";
+        }
+
         document.body.classList.add(this.theme);
         this.updateThemeColorMeta();
     },
@@ -35,6 +41,15 @@ export default {
             document.body.classList.remove(from);
             document.body.classList.add(this.theme);
             this.updateThemeColorMeta();
+        },
+
+        userHeartbeatBar(to, from) {
+            localStorage.heartbeatBarTheme = to;
+        },
+
+        heartbeatBarTheme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.heartbeatBarTheme);
         }
     },
 
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index bb673db85..5db704085 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -13,17 +13,24 @@
 
                     <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" @click="$root.cancelActiveList">
                         <div class="row">
-                            <div class="col-6 col-md-8 small-padding">
+                            <div class="col-6 col-md-8 small-padding" v-bind:class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                                 <div class="info">
                                     <Uptime :monitor="item" type="24" :pill="true" />
                                     {{ item.name }}
                                 </div>
                             </div>
-                            <div class="col-6 col-md-4">
+                            <div class="col-6 col-md-4" v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar">
+                                <HeartbeatBar size="small" :monitor-id="item.id" />
+                            </div>
+                        </div>
+
+                        <div class="row" v-if="$root.userHeartbeatBar == 'bottom'">
+                            <div class="col-12">
                                 <HeartbeatBar size="small" :monitor-id="item.id" />
                             </div>
                         </div>
                     </router-link>
+                    
                 </div>
             </div>
             <div class="col-12 col-md-7 col-xl-8">
@@ -146,4 +153,8 @@ export default {
     }
 }
 
+.monitorItem {
+    width: 100%;
+}
+
 </style>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 7d6b4c573..9f9101831 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -322,6 +322,12 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+@media (max-width: 767px) { 
+    .badge {
+        margin-top: 14px;
+    }
+}
+
 @media (max-width: 550px) { 
     .functions {
         text-align: center;
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 73e71172b..0ffd72d33 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -26,6 +26,22 @@
                         </div>
                     </div>
 
+                    <div class="mb-3">
+                        <label class="form-label">Theme - Heartbeat Bar</label>
+                        <div>
+                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
+                                <label class="btn btn-outline-primary" for="btncheck4">Normal</label>
+
+                                <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
+                                <label class="btn btn-outline-primary" for="btncheck5">Bottom</label>
+
+                                <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
+                                <label class="btn btn-outline-primary" for="btncheck6">None</label>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="mb-3">
                         <label for="timezone" class="form-label">Timezone</label>
                         <select id="timezone" v-model="$root.userTimezone" class="form-select">