diff --git a/src/data.rs b/src/data.rs
index b6164c5..ed358d7 100644
--- a/src/data.rs
+++ b/src/data.rs
@@ -31,6 +31,7 @@ pub struct Dashboard {
     // mining
     pub production_cost: String,
     pub reward_ratio:    String,
+    pub break_even_cost: String,
     // mempool
     pub txns:            String,
     pub stem:            String,
@@ -60,6 +61,7 @@ impl Dashboard {
             difficulty:      String::new(),
             production_cost: String::new(),
             reward_ratio:    String::new(),
+            break_even_cost: String::new(),
             txns:            String::new(),
             stem:            String::new(),
         }
diff --git a/src/main.rs b/src/main.rs
index 3785383..ca71a77 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -340,6 +340,14 @@ fn reward_ratio(dashboard: &State<Arc<Mutex<Dashboard>>>) -> String {
 }
 
 
+#[get("/rpc/mining/breakeven_cost")]
+fn breakeven_cost(dashboard: &State<Arc<Mutex<Dashboard>>>) -> String {
+    let data = dashboard.lock().unwrap();
+
+    format!("$ {}", data.break_even_cost)
+}
+
+
 #[get("/rpc/network/difficulty")]
 fn network_difficulty(dashboard: &State<Arc<Mutex<Dashboard>>>) -> String {
     let data = dashboard.lock().unwrap();
@@ -543,8 +551,8 @@ async fn main() {
                                 txns_count_24h, block_list, block_link, block_link_color,
                                 block_time, block_txns, block_inputs, block_outputs, block_fees,
                                 block_weight, block_details_by_height, block_header_by_hash,
-                                soft_supply, production_cost, reward_ratio, last_block_age,
-                                block_list_by_height, block_list_index, search, kernel])
+                                soft_supply, production_cost, reward_ratio, breakeven_cost,
+                                last_block_age, block_list_by_height, block_list_index, search, kernel])
             .mount("/static", FileServer::from("static"))
             .attach(Template::fairing())
             .launch()
diff --git a/src/requests.rs b/src/requests.rs
index 4a43a41..483640c 100644
--- a/src/requests.rs
+++ b/src/requests.rs
@@ -227,10 +227,13 @@ pub async fn get_mining_stats(dashboard: Arc<Mutex<Dashboard>>) -> Result<(), Er
             let coins_per_hour = 1.2 / hashrate * 60.0 * 60.0;
 
             // Calculating production cost of 1 grin
-            // Assuming $0,07 per kW/h
+            // Assuming $0.07 per kW/h
             data.production_cost = format!("{:.3}", 120.0 / 1000.0 * 0.07 * (1.0 / coins_per_hour));
+
             data.reward_ratio    = format!("{:.2}", data.price_usd.parse::<f64>().unwrap()
                                                     / data.production_cost.parse::<f64>().unwrap());
+            data.break_even_cost = format!("{:.2}", data.price_usd.parse::<f64>().unwrap()
+                                   / (120.0 / 1000.0 * (1.0 / coins_per_hour)));
         }
     }
 
diff --git a/static/styles/style.css b/static/styles/style.css
index c370b84..e4c0286 100644
--- a/static/styles/style.css
+++ b/static/styles/style.css
@@ -6,8 +6,8 @@
   color: #FF7518 !important;
 }
 
-.grey_background {
-  background-color: red !important;
+.card-background {
+  background-color: #FBFBFB !important;
 }
 
 a, a:link, a:visited {
@@ -52,23 +52,6 @@ div.card {
   color: black;
 }
 
-div.rp,
-span.rp {
-  color: red;
-}
-
-div.bluechblk,
-span.bluechblk {
-  color: blue;
-}
-
-div.toast-header,
-div.toast-body {
-  background-color: #f2a900;
-  color: #14151a;
-  border-color: #14151a;
-}
-
 .nav-item,
 .nav-link {
   color: #71797E !important;
@@ -154,27 +137,14 @@ footer {
   border-color: #1f2029;
 }
 
-.dark-mode div.toast-header,
-.dark-mode div.toast-body {
-  background-color: black;
-  color: silver;
-  border-color: #14151a;
-}
-
-.dark-mode div.bluechblk,
-.dark-mode span.bluechblk {
-  color: royalblue;
-}
-
-.dark-mode div.rp,
-.dark-mode span.rp {
-  color: lightcoral;
-}
-
 .dark-mode .bg-style {
   background-color: #14151a !important;
 }
 
+.dark-mode .card-background {
+  background-color: #1f2029 !important;
+}
+
 .dark-mode a,
 .dark-mode a:link,
 .dark-mode a:visited,
@@ -222,28 +192,6 @@ footer {
   border-style: none;
 }
 
-.dark-mode .pagination .page-item .page-link {
-  background-color: #14151a;
-  border-color: silver;
-}
-
-.dark-mode .navbar-nav > li > .dropdown-menu,
-.dark-mode .navbar-nav > li > .dropdown-menu a,
-.dark-mode .navbar-nav > li > .dropdown-menu a:link,
-.dark-mode .navbar-nav > li > .dropdown-menu a:hover {
-  color: silver;
-  background-color: #1f2029;
-}
-
-.dark-mode .dropdown-menu {
-  background-color: #1f2029;
-}
-
-.dark-mode .dropdown-menu .dropdown-item {
-  color: silver;
-  background-color: #343a40;
-}
-
 .dark-mode .close {
   color: silver;
 }
diff --git a/templates/index.html.tera b/templates/index.html.tera
index e38e85f..a9badb1 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -46,7 +46,7 @@
                 <button class="btn-sm shadow-none" data-bs-toggle="modal" data-bs-target="#soft_sup">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/market/soft_supply" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/market/soft_supply" hx-trigger="load, every 10s"></div>
             </div>
 	    <br>
             <div class="d-flex justify-content-between">
@@ -62,11 +62,10 @@
 
 
       <div class="card-group mb-2">
-        <div class="card me-2">
-          <div class="card-body" align="left">
-              <div class="d-flex justify-content-between">
-	        <div class="darkorange-text"><i class="bi bi-grid"></i> BLOCKCHAIN</div>
-              </div>
+        <div class="card card-background me-2">
+          <div class="card mb-2">
+            <div class="card-body" align="left">
+	      <div class="darkorange-text"><i class="bi bi-grid"></i> BLOCKCHAIN</div>
               <br>
               <div class="d-flex justify-content-between">
 	        <div class="value-text">Size&nbsp;</div><div class="value-text text-end" hx-get="/rpc/disk/usage" hx-trigger="load, every 10s"></div>
@@ -79,9 +78,24 @@
               <div class="d-flex justify-content-between">
 	        <div class="value-text">Time Since Last Block&nbsp;</div><div class="value-text text-end" hx-get="/rpc/block/time_since_last" hx-trigger="load, every 10s"></div>
               </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body" align="left">
+              <div class="darkorange-text"><i class="bi bi-speedometer2"></i> TRANSACTIONS & FEES</div>
+              <br>
+              <div class="d-flex justify-content-between">
+	        <div class="value-text">1H Period (60 Blocks)&nbsp;</div><div class="value-text text-end" hx-get="/rpc/txns/count_1h" hx-trigger="load, every 10s"></div>
+              </div>
+	      <br>
+              <div class="d-flex justify-content-between">
+	        <div class="value-text">24H Period (1440 Blocks)&nbsp;</div><div class="value-text text-end" hx-get="/rpc/txns/count_24h" hx-trigger="load, every 10s"></div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="card me-2">
+
+        <div class="card">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-hammer"></i> MINING</div>
             <br>
@@ -103,7 +117,7 @@
                 <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#mining_cost">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/mining/production_cost" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/mining/production_cost" hx-trigger="load, every 10s"></div>
             </div>
 	    <br>
             <div class="d-flex justify-content-between">
@@ -112,27 +126,22 @@
                 <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#ratio">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/mining/reward_ratio" hx-trigger="load, every 10s"></div>
-            </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-body" align="left">
-            <div class="darkorange-text"><i class="bi bi-speedometer2"></i> TRANSACTIONS & FEES</div>
-            <br>
-            <div class="d-flex justify-content-between">
-	      <div class="value-text">1H Period (60 Blocks)&nbsp;</div><div class="value-text text-end" hx-get="/rpc/txns/count_1h" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/mining/reward_ratio" hx-trigger="load, every 10s"></div>
             </div>
 	    <br>
             <div class="d-flex justify-content-between">
-	      <div class="value-text">24H Period (1440 Blocks)&nbsp;</div><div class="value-text text-end" hx-get="/rpc/txns/count_24h" hx-trigger="load, every 10s"></div>
+              <div class="value-text">Breakeven Electricity Cost
+                <!-- Button trigger breakeven explanation modal -->
+                <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#breakeven">
+                  <i class="bi bi-question-circle"></i>
+                </button>
+                </div><div class="value-text text-end" hx-get="/rpc/mining/breakeven_cost" hx-trigger="load, every 10s"></div>
             </div>
           </div>
         </div>
       </div>
 
 
-
       <div class="card-group mb-4">
         <div class="card me-2">
           <div class="card-body" align="left">
@@ -222,7 +231,7 @@
                 <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#soft_sup">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/market/soft_supply" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/market/soft_supply" hx-trigger="load, every 10s"></div>
             </div>
 	    <br>
             <div class="d-flex justify-content-between">
@@ -277,7 +286,7 @@
                 <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#mining_cost">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/mining/production_cost" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/mining/production_cost" hx-trigger="load, every 10s"></div>
             </div>
 	    <br>
             <div class="d-flex justify-content-between">
@@ -286,7 +295,16 @@
                 <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#ratio">
                   <i class="bi bi-question-circle"></i>
                 </button>
-                &nbsp;</div><div class="value-text text-end" hx-get="/rpc/mining/reward_ratio" hx-trigger="load, every 10s"></div>
+                </div><div class="value-text text-end" hx-get="/rpc/mining/reward_ratio" hx-trigger="load, every 10s"></div>
+            </div>
+	    <br>
+            <div class="d-flex justify-content-between">
+	      <div class="value-text">Breakeven Electricity Cost
+                <!-- Button trigger breakeven explanation modal -->
+                <button type="button" class="btn-sm" data-bs-toggle="modal" data-bs-target="#breakeven">
+                  <i class="bi bi-question-circle"></i>
+                </button>
+              </div><div class="value-text text-end" hx-get="/rpc/mining/breakeven_cost" hx-trigger="load, every 10s"></div>
             </div>
           </div>
         </div>
@@ -419,6 +437,23 @@
   </div>
 </div>
 
+<div class="modal fade" id="breakeven" tabindex="-1" aria-labelledby="breakeven_label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="breakeven_label">Breakeven Electricity Cost</h1>
+        <div data-bs-theme="light">
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+      </div>
+      <div class="modal-body">
+        Electricity threshold cost below which mining is profitable.<br>
+        Assuming G1-mini ASIC as a miner device.
+      </div>
+    </div>
+  </div>
+</div>
+
 </div>
 
 </code>