diff --git a/static/css/simple-blog-template.css b/static/css/simple-blog-template.css
index 4c99507..ef8d576 100644
--- a/static/css/simple-blog-template.css
+++ b/static/css/simple-blog-template.css
@@ -90,30 +90,34 @@ nav {
   align-items: center;
   gap: 8px;
 }
-
-/* --- Buttons --- */
+/* --- Buttons & UI --- */
 .btn-read-more {
   float: right;
-  background: #fff;
-  border: 1px solid #ddd;
-  color: #555;
+  background: #f8f9fa; /* Light gray background instead of white */
+  border: 1px solid #e1e4e8;
+  color: #0366d6; /* Use your brand blue for the text */
   border-radius: 6px;
-  padding: 8px 18px;
-  font-size: 0.9rem;
+  padding: 8px 20px;
+  font-size: 0.85rem;
   font-weight: 600;
-  transition: all 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: inline-block;
   text-decoration: none !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .btn-read-more:hover {
+  background-color: #0366d6;
   border-color: #0366d6;
-  color: #0366d6;
-  background: #f0f7ff;
+  color: #ffffff; /* Invert colors on hover */
+  box-shadow: 0 4px 8px rgba(3, 102, 214, 0.2);
+  transform: translateY(-1px);
 }
 
 .btn-read-more:active {
-  transform: translateY(1px);
+  transform: translateY(0);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }