diff --git a/templates/base.html.tera b/templates/base.html.tera
index f332790..b0db59d 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -21,7 +21,7 @@
 
   <body class="d-flex flex-column min-vh-100 dark-mode">
 
-    <nav class="navbar bg-style navbar-expand-lg shadow-sm py-0"> 
+    <nav class="navbar bg-style navbar-expand-lg shadow-sm py-0">
       <div class="container-fluid">
         <code><a class="navbar-brand fs-2" href="/"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191 191" height="35" width="35" style="enable-background:new 0 0 191 191;" xml:space="preserve"><style type="text/css">.st0{fill:#f2a900;}</style><circle cx="95.5" cy="95.5" r="95.5"/><circle class="st0" cx="95.3" cy="95.5" r="85.3"/><path d="M135.7,63.5c-2-4.6-3.9-13.6-9.1-15.6c-6.7-2.6-10.9,14.3-11.9,18.6h-1c-1.7-7.3-4-17.7-12-20c-3.7,15.6,3.9,32.5,11,46
 	c7.6-3.6,11.3-15,12-23h1l8,24c6.4-1.8,8.7-8.2,11-14c5-12.4,9.2-27.7,6-41C141.1,41.2,138.2,55,135.7,63.5 M39.7,95.5
@@ -72,16 +72,22 @@
         </div>
       </div>
     </nav>
-
-    <div class="container-fluid">
-      <br>
+      
       {% block content %}{% endblock content %}
-    </div>
 
     <footer class="shadow mt-auto">
       <code>
         <br>
-        <div class="container-fluid">
+	<div class="container-fluid">
+          <div class="d-flex justify-content-center">
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191 191" height="35" width="35" style="enable-background:new 0 0 191 191;" xml:space="preserve"><style type="text/css">.st0{fill:#f2a900;}</style><circle cx="95.5" cy="95.5" r="95.5"/><circle class="st0" cx="95.3" cy="95.5" r="85.3"/><path d="M135.7,63.5c-2-4.6-3.9-13.6-9.1-15.6c-6.7-2.6-10.9,14.3-11.9,18.6h-1c-1.7-7.3-4-17.7-12-20c-3.7,15.6,3.9,32.5,11,46
+	c7.6-3.6,11.3-15,12-23h1l8,24c6.4-1.8,8.7-8.2,11-14c5-12.4,9.2-27.7,6-41C141.1,41.2,138.2,55,135.7,63.5 M39.7,95.5
+	c8.6-4.1,12.7-17.1,14-26h1c1,4.3,3.7,15.4,9.1,16.1c6.8,0.9,10.4-14.3,10.9-19.1h1c2.2,7.5,4.5,17.3,12,21
+	c2.8-11.7-0.5-24.1-4.8-35c-1.1-2.8-3.3-10.4-7.2-10.4c-6.3,0-9.9,16.7-11,21.4h-1l-8-24C41.6,46.2,34,82,39.7,95.5 M24.7,107.5
+	c10.4,45.6,58.6,71.4,102,52.1c15.8-7,28.3-19.5,35.5-35.1c1.9-4,5.5-11.4,3.4-16.7c-2.1-5.3-22.8,3.4-27.9,5.6
+	c-0.7,0.3-1.2,1-1.4,1.8c-0.3,2.2,1.2,4.3,3.4,4.6c0.1,0,0.2,0,0.3,0l8.7,0.7c-15.7,30.4-58.1,43.8-88,19.5
+	C54,134.6,48,128.2,44,120.5c-1.9-3.7-3.7-8.4-7-11C33.8,107.1,29,106.3,24.7,107.5L24.7,107.5z"/></svg>
+	  </div>
           <div class="card-group">
             <div class="card border-0">
               <div class="card-body" align="left">
@@ -227,7 +233,7 @@
             </div>
 	    {% endif %}
           </div>
-        </div>
+	</div>
         <br>
       </code>
     </footer>
diff --git a/templates/block_details.html.tera b/templates/block_details.html.tera
index 01371bf..86324d0 100644
--- a/templates/block_details.html.tera
+++ b/templates/block_details.html.tera
@@ -4,7 +4,7 @@
 
 <code>
 
-  <div class="card">
+  <div class="card rounded-0">
     <div class="card-body" align="left">
       <div class="darkorange-text"><i class="bi bi-box"></i> BLOCK {{ block.height }}</div>
       <br>
@@ -35,9 +35,7 @@
     </div>
   </div>
 
-  <br>
-
-  <div class="card">
+  <div class="card border-top-0 rounded-0">
     <div class="card-body mb-2" align="left">
       <div class="darkorange-text"><i class="bi bi-receipt"></i> TRANSACTIONS</div>
       <br>
@@ -110,9 +108,7 @@
     </div>
   </div>
 
-  <br>
-
-  <div class="card">
+  <div class="card border-top-0 rounded-0">
     <div class="card-body" align="left">
       <div class="darkorange-text"><i class="bi bi-layout-text-sidebar-reverse"></i> RAW DATA</div>
       <br>
@@ -120,8 +116,6 @@
     </div>
   </div>
 
- <br>
-
 </code>
 
 {% endblock %}
diff --git a/templates/block_list.html.tera b/templates/block_list.html.tera
index 7ca9604..b01d0e2 100644
--- a/templates/block_list.html.tera
+++ b/templates/block_list.html.tera
@@ -4,51 +4,51 @@
 
 <code>
 
-<div class="d-none d-md-block mb-4"> <!-- Show on >= md screens -->
+<div class="d-none d-md-block"> <!-- Show on >= md screens -->
   <div class="card-group">
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             HEIGHT
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             AGE
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             KERNELS
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             INPUTS
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             OUTPUTS
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             FEES
           </div>
 	</div>
       </div>
-      <div class="card rounded-0">
+      <div class="card border-bottom-0 rounded-0">
         <div class="card-body">
           <div class="darkorange-text">
             WEIGHT
@@ -60,7 +60,7 @@
 
     {% for i in range(end=10) %}
     <div class="card-group rounded-0">
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">
@@ -73,7 +73,7 @@
             {% endif %}
 	  </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">{{ blocks[i].time }}</div>
@@ -82,7 +82,7 @@
             {% endif %}
 	  </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">{{ blocks[i].ker_len }}</div>
@@ -91,7 +91,7 @@
             {% endif %}
           </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">{{ blocks[i].in_len }}</div>
@@ -100,7 +100,7 @@
             {% endif %}
 	  </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">{{ blocks[i].out_len }}</div>
@@ -109,7 +109,7 @@
             {% endif %}
           </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">ツ {{ blocks[i].fees / 1000000000.0 }}</div>
@@ -118,7 +118,7 @@
             {% endif %}
           </div>
 	</div>
-        <div class="card rounded-0 mt-1">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body">
             {% if route == "block_list_by_height" %}
               <div class="value-text">{{ blocks[i].weight }} %</div>
@@ -133,12 +133,12 @@
 </div>
 
 
-<div class="d-md-none mb-4"> <!-- Show on < md screens-->
+<div class="d-md-none"> <!-- Show on < md screens-->
     {% for i in range(end=10) %}
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
-              <div class="d-flex justify-content-between">
-	        <div class="value-text">Block</div>
+              <div class="d-flex justify-content-start">
+	        <i class="bi bi-box darkorange-text"></i>&nbsp;
                 {% if route == "block_list_by_height" %}
                   <div class="value-text">
                     <a class="text-decoration-none darkorange-text" href="/block/{{ blocks[i].height }}">
@@ -211,49 +211,53 @@
 
 {% if route == "block_list_by_height" %}
 
-  <div class="d-flex justify-content-center sticky-bottom mb-3">
-    <div class="me-5">
-      {% if height >= (index + 10) %}
-        <a class="text-decoration-none" href="/block_list/{{ index + 10 }}">
-      {% elif height >= (index) and height < (index + 10) %}
-        <a class="text-decoration-none" href="/block_list/{{ height }}">
-      {% endif %}
-        <h2><i class="bi bi-arrow-left-square"></i></h2>
-      </a>
-    </div>
-    <div class="me-5">
-      <a class="text-decoration-none" href="/block_list">
-        <h2><i class="bi bi-house"></i></h2>
-      </a>
-    </div>
-    <div>
-      {% if index >= 20 %}
-        <a class="text-decoration-none" href="/block_list/{{ index - 10 }}">
-      {% elif index >= 10 and index < 20 %}
-        <a class="text-decoration-none" href="/block_list/{{ 9 }}">
-      {% else %}
-        <a class="text-decoration-none disabled" href="">
-      {% endif %}
-        <h2><i class="bi bi-arrow-right-square"></i></h2>
-      </a>
+  <div class="card rounded-0 sticky-bottom">
+    <div class="mt-2 d-flex justify-content-center">
+      <div class="me-5">
+        {% if height >= (index + 10) %}
+          <a class="text-decoration-none" href="/block_list/{{ index + 10 }}">
+        {% elif height >= (index) and height < (index + 10) %}
+          <a class="text-decoration-none" href="/block_list/{{ height }}">
+        {% endif %}
+          <h2><i class="bi bi-arrow-left-square"></i></h2>
+        </a>
+      </div>
+      <div class="me-5">
+        <a class="text-decoration-none" href="/block_list">
+          <h2><i class="bi bi-house"></i></h2>
+        </a>
+      </div>
+      <div>
+        {% if index >= 20 %}
+          <a class="text-decoration-none" href="/block_list/{{ index - 10 }}">
+        {% elif index >= 10 and index < 20 %}
+          <a class="text-decoration-none" href="/block_list/{{ 9 }}">
+        {% else %}
+          <a class="text-decoration-none disabled" href="">
+        {% endif %}
+          <h2><i class="bi bi-arrow-right-square"></i></h2>
+        </a>
+      </div>
     </div>
   </div>
 
 {% else %}
 
-  <div class="d-flex justify-content-center sticky-bottom mb-3">
-    <div class="me-5">
-      <a class="text-decoration-none disabled" href="">
-        <h2><i class="bi bi-arrow-left-square"></i></h2>
-      </a>
-    </div>
-    <div class="me-5">
-      <a class="text-decoration-none" href="/block_list">
-        <h2><i class="bi bi-house"></i></h2>
-      </a>
-    </div>
-    <div>
-      <div hx-get="/rpc/block_list/index" hx-trigger="load, every 10s"></div>
+  <div class="card rounded-0 sticky-bottom">
+    <div class="mt-2 d-flex justify-content-center">
+      <div class="me-5">
+        <a class="text-decoration-none disabled" href="">
+          <h2><i class="bi bi-arrow-left-square"></i></h2>
+        </a>
+      </div>
+      <div class="me-5">
+        <a class="text-decoration-none" href="/block_list">
+          <h2><i class="bi bi-house"></i></h2>
+        </a>
+      </div>
+      <div>
+        <div hx-get="/rpc/block_list/index" hx-trigger="load, every 10s"></div>
+      </div>
     </div>
   </div>
 
diff --git a/templates/error.html.tera b/templates/error.html.tera
index 5bda901..d69f794 100644
--- a/templates/error.html.tera
+++ b/templates/error.html.tera
@@ -16,7 +16,5 @@
 
 </code>
 
-<br>
-
 {% endblock %}
 
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 6fd4d59..9f8e443 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -10,8 +10,8 @@
 {# CoinGecko API is enabled #}
 
 <div class="d-none d-md-block"> <!-- Show on >= md screens -->
-      <div class="card-group mb-2">
-        <div class="card me-2">
+      <div class="card-group">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
 	      <div class="darkorange-text"><i class="bi bi-cash-coin"></i> PRICE</div>
               <br>
@@ -33,7 +33,7 @@
           </div>
 	</div>
 
-        <div class="card">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-bank"></i> MARKET</div>
             <br>
@@ -66,9 +66,9 @@
       </div>
 
 
-      <div class="card-group mb-2">
-        <div class="card card-background border-0 me-2">
-          <div class="card rounded-end-0 mx-0 mt-0 mb-2">
+      <div class="card-group">
+        <div class="card card-background border-0">
+          <div class="card border-bottom-0 rounded-0 mx-0 mt-0">
             <div class="card-body" align="left">
 	      <div class="darkorange-text"><i class="bi bi-grid"></i> BLOCKCHAIN</div>
               <br>
@@ -85,7 +85,7 @@
               </div>
             </div>
           </div>
-          <div class="card rounded-end-0 mx-0 my-0">
+          <div class="card border-bottom-0 rounded-0 mx-0 my-0">
             <div class="card-body" align="left">
               <div class="darkorange-text"><i class="bi bi-speedometer2"></i> TRANSACTIONS & FEES</div>
               <br>
@@ -100,7 +100,7 @@
           </div>
         </div>
 
-        <div class="card">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-hammer"></i> MINING</div>
             <br>
@@ -147,8 +147,8 @@
       </div>
 
 
-      <div class="card-group mb-4">
-        <div class="card me-2">
+      <div class="card-group">
+        <div class="card rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-receipt"></i> MEMPOOL</div>
             <br>
@@ -161,7 +161,7 @@
             </div>
           </div>
         </div>
-        <div class="card me-2">
+        <div class="card rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-diagram-3"></i> CONNECTIONS</div>
             <br>
@@ -174,7 +174,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-pc-display-horizontal"></i> NODE</div>
             <br>
@@ -196,7 +196,7 @@
 
 <div class="d-md-none"> <!-- Show on < md screens-->
 
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
 	      <div class="darkorange-text"><i class="bi bi-cash-coin"></i> PRICE</div>
               <br>
@@ -218,7 +218,7 @@
           </div>
 	</div>
 
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-bank"></i> MARKET</div>
             <br>
@@ -250,7 +250,7 @@
         </div>
 
 
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <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>
@@ -269,7 +269,7 @@
               </div>
           </div>
         </div>
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-hammer"></i> MINING</div>
             <br>
@@ -313,7 +313,7 @@
             </div>
           </div>
         </div>
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-speedometer2"></i> TRANSACTIONS & FEES</div>
             <br>
@@ -329,7 +329,7 @@
 
 
 
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-receipt"></i> MEMPOOL</div>
             <br>
@@ -342,7 +342,7 @@
             </div>
           </div>
         </div>
-        <div class="card mb-3">
+        <div class="card border-bottom-0 rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-diagram-3"></i> CONNECTIONS</div>
             <br>
@@ -355,7 +355,7 @@
             </div>
           </div>
         </div>
-        <div class="card mb-4">
+        <div class="card rounded-0">
           <div class="card-body" align="left">
             <div class="darkorange-text"><i class="bi bi-pc-display-horizontal"></i> NODE</div>
             <br>
diff --git a/templates/kernel.html.tera b/templates/kernel.html.tera
index c86b200..e94a2c2 100644
--- a/templates/kernel.html.tera
+++ b/templates/kernel.html.tera
@@ -4,7 +4,7 @@
 
 <code>
 
-  <div class="card">
+  <div class="card rounded-0">
     <div class="card-body">
       <div class="d-flex justify-content-between">
         <div class="darkorange-text"><i class="bi bi-card-text"></i> KERNEL</div>
@@ -44,8 +44,7 @@
   </div>
 
   {% if kernel.status != "Unconfirmed" %}
-    <br>
-    <div class="card">
+    <div class="card border-top-0 rounded-0">
       <div class="card-body" align="left">
         <div class="darkorange-text"><i class="bi bi-layout-text-sidebar-reverse"></i> RAW DATA</div>
         <br>
@@ -54,8 +53,6 @@
     </div>
   {% endif %}
 
-  <br>
-
 </code>
 
 {% endblock %}
diff --git a/templates/search.html.tera b/templates/search.html.tera
index d702ed3..9ca1716 100644
--- a/templates/search.html.tera
+++ b/templates/search.html.tera
@@ -7,8 +7,8 @@
   <div class="card">
     <div class="card-body mx-2 mt-2 mb-3">
       <div class="d-flex justify-content-start mb-1">
-        <i class="bi bi-box me-2"></i>
-        <div class="value-text text-end" hx-get="/rpc/block/latest" hx-trigger="load, every 10s"></div>
+        <i class="bi bi-box darkorange-text"></i>&nbsp;        
+        <div class="darkorange-text text-end" hx-get="/rpc/block/latest" hx-trigger="load, every 10s"></div>
       </div>
       <form class="input-group" role="search" action="/search" method="GET" autocomplete="off">
         <input class="form-control text-center ms-0 me-2" type="search" placeholder="Explore Grin Network" aria-label="Search" name="input" required>
@@ -24,8 +24,6 @@
     </div>
   </div>
 
-  <br>
-
 </code>
 
 {% endblock %}
