diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index cc04399..e564e95 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/nextjs-app/components/RankingsView.module.css
@@ -267,15 +267,18 @@
 }
 
 .addButton {
+  display: inline-flex;
+  align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   background: var(--accent-coral, #e07256);
   color: white;
+  box-sizing: border-box;
 }
 
 .addButton:hover:not(:disabled) {
@@ -371,7 +374,8 @@
 }
 
 .viewButton {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -381,6 +385,7 @@
   text-decoration: none;
   margin-right: 0.375rem;
   transition: all var(--transition, 0.2s ease);
+  box-sizing: border-box;
 }
 
 .viewButton:hover {
diff --git a/nextjs-app/components/SchoolCard.module.css b/nextjs-app/components/SchoolCard.module.css
index 5e6b969..6c818aa 100644
--- a/nextjs-app/components/SchoolCard.module.css
+++ b/nextjs-app/components/SchoolCard.module.css
@@ -148,15 +148,18 @@
 .btnSecondary,
 .btnPrimary {
   flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
   border-radius: 6px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
-  text-align: center;
   text-decoration: none;
   transition: all 0.2s ease;
+  box-sizing: border-box;
 }
 
 .btnSecondary {
@@ -190,14 +193,17 @@
 
 .btnRemove {
   flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
   border-radius: 6px;
   cursor: pointer;
-  text-align: center;
   text-decoration: none;
   transition: all 0.2s ease;
+  box-sizing: border-box;
   background: var(--bg-secondary, #f3ede4);
   color: var(--text-secondary, #5c564d);
   border: 1px solid var(--border-color, #e0ddd8);
diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index 236a4f6..eadd652 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -129,6 +129,8 @@
 }
 
 .btnView {
+  display: inline-flex;
+  align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -138,6 +140,7 @@
   text-decoration: none;
   transition: all 0.15s ease;
   white-space: nowrap;
+  box-sizing: border-box;
 }
 
 .btnView:hover {
@@ -147,16 +150,19 @@
 }
 
 .btnCompare {
+  display: inline-flex;
+  align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
   color: white;
   background: var(--accent-coral, #e07256);
-  border: none;
+  border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.15s ease;
   white-space: nowrap;
+  box-sizing: border-box;
 }
 
 .btnCompare:hover {
@@ -164,6 +170,8 @@
 }
 
 .btnRemove {
+  display: inline-flex;
+  align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -174,6 +182,7 @@
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
+  box-sizing: border-box;
 }
 
 .btnRemove:hover {