diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css
index cd388d9..a51ba2f 100644
--- a/nextjs-app/components/ComparisonView.module.css
+++ b/nextjs-app/components/ComparisonView.module.css
@@ -16,52 +16,56 @@
 }
 
 .header h1 {
-  font-size: 2rem;
+  font-size: 2.25rem;
   font-weight: 700;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   margin-bottom: 0.5rem;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .subtitle {
   font-size: 1rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   margin: 0;
+  line-height: 1.6;
 }
 
 .addButton {
   padding: 0.75rem 1.5rem;
   font-size: 0.9375rem;
-  font-weight: 500;
-  background: var(--primary);
+  font-weight: 600;
+  background: var(--accent-coral, #e07256);
   color: white;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
-  transition: all var(--transition);
+  transition: all 0.2s ease;
   white-space: nowrap;
 }
 
 .addButton:hover {
-  background: var(--primary-dark);
+  background: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
 }
 
 /* Metric Selector */
 .metricSelector {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 1rem;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .metricLabel {
   font-size: 0.9375rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
   white-space: nowrap;
 }
 
@@ -70,22 +74,22 @@
   max-width: 400px;
   padding: 0.625rem 1rem;
   font-size: 0.9375rem;
-  border: 1px solid var(--border-medium);
-  border-radius: var(--radius-md);
-  background: white;
-  color: var(--text-primary);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
+  background: var(--bg-card, white);
+  color: var(--text-primary, #1a1612);
   cursor: pointer;
-  transition: all var(--transition);
+  transition: all 0.2s ease;
 }
 
 .metricSelect:hover {
-  border-color: var(--primary);
+  border-color: var(--accent-coral, #e07256);
 }
 
 .metricSelect:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--accent-coral, #e07256);
+  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
 }
 
 /* Schools Section */
@@ -100,17 +104,18 @@
 }
 
 .schoolCard {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-left: 3px solid var(--accent-teal, #2d7d7d);
+  border-radius: 12px;
   padding: 1.5rem;
   position: relative;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
+  transition: all 0.3s ease;
 }
 
 .schoolCard:hover {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-medium, 0 4px 20px rgba(26, 22, 18, 0.1));
   transform: translateY(-2px);
 }
 
@@ -123,18 +128,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--danger);
+  background: var(--accent-coral, #e07256);
   color: white;
   border: none;
   border-radius: 50%;
   font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
-  transition: all var(--transition);
+  transition: all 0.2s ease;
 }
 
 .removeButton:hover {
-  background: #dc2626;
+  background: var(--accent-coral-dark, #c45a3f);
   transform: scale(1.1);
 }
 
@@ -144,16 +149,17 @@
   margin-bottom: 0.75rem;
   padding-right: 2rem;
   line-height: 1.3;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .schoolName a {
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   text-decoration: none;
-  transition: color var(--transition);
+  transition: color 0.2s ease;
 }
 
 .schoolName a:hover {
-  color: var(--primary);
+  color: var(--accent-coral, #e07256);
 }
 
 .schoolMeta {
@@ -165,7 +171,7 @@
 
 .metaItem {
   font-size: 0.875rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -174,39 +180,60 @@
 .latestValue {
   margin-top: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--border-light);
+  border-top: 1px solid var(--border-color, #e5dfd5);
   text-align: center;
+  background: var(--bg-secondary, #f3ede4);
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  margin-bottom: -1.5rem;
+  padding: 1.25rem 1.5rem;
+  border-radius: 0 0 12px 9px;
 }
 
 .latestLabel {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-muted, #8a847a);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .latestNumber {
   font-size: 1.75rem;
   font-weight: 700;
-  color: var(--text-primary);
+  color: var(--accent-teal, #2d7d7d);
 }
 
 /* Chart Section */
 .chartSection {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 2rem;
   margin-bottom: 2rem;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .sectionTitle {
   font-size: 1.5rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   margin-bottom: 1.5rem;
   padding-bottom: 0.75rem;
-  border-bottom: 2px solid var(--border-light);
+  border-bottom: 2px solid var(--border-color, #e5dfd5);
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sectionTitle::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 1em;
+  background: var(--accent-coral, #e07256);
+  border-radius: 2px;
 }
 
 .chartContainer {
@@ -218,18 +245,18 @@
 .loadingMessage {
   text-align: center;
   padding: 3rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   font-size: 1rem;
 }
 
 /* Table Section */
 .tableSection {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 2rem;
   margin-bottom: 2rem;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .tableWrapper {
@@ -244,22 +271,25 @@
 }
 
 .comparisonTable thead {
-  background: var(--bg-secondary);
+  background: var(--bg-secondary, #f3ede4);
 }
 
 .comparisonTable th {
   padding: 1rem;
   text-align: left;
   font-weight: 600;
-  color: var(--text-primary);
-  border-bottom: 2px solid var(--border-medium);
+  color: var(--text-primary, #1a1612);
+  border-bottom: 2px solid var(--border-color, #e5dfd5);
   white-space: nowrap;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
 }
 
 .comparisonTable td {
   padding: 1rem;
-  border-bottom: 1px solid var(--border-light);
-  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  color: var(--text-secondary, #5c564d);
   text-align: left;
 }
 
@@ -268,12 +298,36 @@
 }
 
 .comparisonTable tbody tr:hover {
-  background: var(--bg-secondary);
+  background: var(--bg-secondary, #f3ede4);
 }
 
 .yearCell {
+  font-weight: 700;
+  color: var(--accent-gold, #c9a227);
+}
+
+/* Empty State */
+.emptyState {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
+}
+
+.emptyStateTitle {
+  font-size: 1.5rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.5rem;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+}
+
+.emptyStateDescription {
+  font-size: 1rem;
+  color: var(--text-secondary, #5c564d);
+  max-width: 400px;
+  margin: 0 auto 1.5rem;
 }
 
 /* Responsive Design */
@@ -288,12 +342,14 @@
   }
 
   .header h1 {
-    font-size: 1.5rem;
+    font-size: 1.75rem;
   }
 
   .metricSelector {
     flex-direction: column;
     align-items: stretch;
+    padding: 1rem;
+    border-radius: 8px;
   }
 
   .metricSelect {
@@ -304,6 +360,12 @@
     grid-template-columns: 1fr;
   }
 
+  .chartSection,
+  .tableSection {
+    padding: 1rem;
+    border-radius: 8px;
+  }
+
   .chartContainer {
     height: 300px;
   }
@@ -316,4 +378,12 @@
   .comparisonTable td {
     padding: 0.75rem 0.5rem;
   }
+
+  .latestValue {
+    margin-left: -1rem;
+    margin-right: -1rem;
+    margin-bottom: -1rem;
+    padding: 1rem;
+    border-radius: 0 0 8px 5px;
+  }
 }
diff --git a/nextjs-app/components/FilterBar.module.css b/nextjs-app/components/FilterBar.module.css
index c9a78db..4c51726 100644
--- a/nextjs-app/components/FilterBar.module.css
+++ b/nextjs-app/components/FilterBar.module.css
@@ -1,37 +1,38 @@
 .filterBar {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 2rem;
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .searchModeToggle {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
-  background: #f3f4f6;
+  background: var(--bg-secondary, #f3ede4);
   padding: 0.25rem;
-  border-radius: 6px;
+  border-radius: 8px;
 }
 
 .searchModeToggle button {
   flex: 1;
-  padding: 0.5rem 1rem;
+  padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  color: #6b7280;
+  color: var(--text-secondary, #5c564d);
   transition: all 0.2s ease;
 }
 
 .searchModeToggle button.active {
-  background: white;
-  color: #1f2937;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  background: var(--bg-card, white);
+  color: var(--accent-coral, #e07256);
+  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.08);
 }
 
 .searchSection {
@@ -40,17 +41,22 @@
 
 .searchInput {
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   font-size: 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
   outline: none;
   transition: all 0.2s ease;
+  background: var(--bg-card, white);
 }
 
 .searchInput:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--accent-coral, #e07256);
+  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+}
+
+.searchInput::placeholder {
+  color: var(--text-muted, #8a847a);
 }
 
 .locationForm {
@@ -61,43 +67,59 @@
 
 .postcodeInput {
   flex: 1;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   font-size: 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
   outline: none;
   transition: all 0.2s ease;
+  background: var(--bg-card, white);
 }
 
 .postcodeInput:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--accent-coral, #e07256);
+  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+}
+
+.postcodeInput::placeholder {
+  color: var(--text-muted, #8a847a);
 }
 
 .radiusSelect {
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   font-size: 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background: white;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
+  background: var(--bg-card, white);
   cursor: pointer;
   outline: none;
+  color: var(--text-primary, #1a1612);
+}
+
+.radiusSelect:focus {
+  border-color: var(--accent-coral, #e07256);
 }
 
 .searchButton {
-  padding: 0.75rem 1.5rem;
+  padding: 0.875rem 1.5rem;
   font-size: 1rem;
-  font-weight: 500;
-  background: #3b82f6;
+  font-weight: 600;
+  background: var(--accent-coral, #e07256);
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .searchButton:hover {
-  background: #2563eb;
+  background: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
+}
+
+.searchButton:active {
+  transform: translateY(0);
 }
 
 .filters {
@@ -111,36 +133,39 @@
   min-width: 200px;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background: white;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
+  background: var(--bg-card, white);
   cursor: pointer;
   outline: none;
+  color: var(--text-primary, #1a1612);
 }
 
 .filterSelect:focus {
-  border-color: #3b82f6;
+  border-color: var(--accent-coral, #e07256);
 }
 
 .clearButton {
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-secondary, #5c564d);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .clearButton:hover {
-  background: #e5e7eb;
+  background: var(--border-color, #e5dfd5);
+  color: var(--text-primary, #1a1612);
 }
 
 @media (max-width: 768px) {
   .filterBar {
     padding: 1rem;
+    border-radius: 8px;
   }
 
   .locationForm {
diff --git a/nextjs-app/components/Footer.module.css b/nextjs-app/components/Footer.module.css
index 52d7295..9411417 100644
--- a/nextjs-app/components/Footer.module.css
+++ b/nextjs-app/components/Footer.module.css
@@ -1,6 +1,6 @@
 .footer {
-  background: #1f2937;
-  color: #d1d5db;
+  background: var(--accent-navy, #2c3e50);
+  color: var(--bg-secondary, #f3ede4);
   margin-top: auto;
 }
 
@@ -27,21 +27,22 @@
   margin: 0;
   font-size: 1.25rem;
   font-weight: 700;
-  color: white;
+  color: var(--bg-primary, #faf7f2);
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .description {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.6;
-  color: #9ca3af;
+  color: rgba(250, 247, 242, 0.7);
 }
 
 .sectionTitle {
   margin: 0;
   font-size: 0.875rem;
   font-weight: 600;
-  color: white;
+  color: var(--accent-gold, #c9a227);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -57,24 +58,24 @@
 
 .link {
   font-size: 0.875rem;
-  color: #9ca3af;
+  color: rgba(250, 247, 242, 0.7);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .link:hover {
-  color: white;
+  color: var(--accent-gold, #c9a227);
 }
 
 .linkDisabled {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: rgba(250, 247, 242, 0.4);
   cursor: not-allowed;
 }
 
 .bottom {
   padding-top: 2rem;
-  border-top: 1px solid #374151;
+  border-top: 1px solid rgba(250, 247, 242, 0.15);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -84,15 +85,15 @@
 .disclaimer {
   margin: 0;
   font-size: 0.875rem;
-  color: #9ca3af;
+  color: rgba(250, 247, 242, 0.6);
 }
 
 .disclaimer .link {
-  color: #60a5fa;
+  color: var(--accent-coral, #e07256);
 }
 
 .disclaimer .link:hover {
-  color: #93c5fd;
+  color: var(--accent-gold, #c9a227);
 }
 
 @media (max-width: 768px) {
diff --git a/nextjs-app/components/Footer.tsx b/nextjs-app/components/Footer.tsx
index aa95882..4069cb9 100644
--- a/nextjs-app/components/Footer.tsx
+++ b/nextjs-app/components/Footer.tsx
@@ -71,7 +71,7 @@ export function Footer() {
 
         <div className={styles.bottom}>
           <p className={styles.copyright}>
-            © {currentYear} SchoolCompare. Data © Crown copyright.
+            © {currentYear} SchoolCompare.co.uk
           </p>
           <p className={styles.disclaimer}>
             This is an unofficial service. Official school performance data is available at{' '}
diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index b976494..e6f7b66 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -5,22 +5,27 @@
 .hero {
   text-align: center;
   margin-bottom: 3rem;
-  padding: 2rem 0;
+  padding: 3rem 2rem;
+  background: linear-gradient(135deg, var(--bg-secondary, #f3ede4) 0%, var(--bg-primary, #faf7f2) 100%);
+  border-radius: 16px;
+  border: 1px solid var(--border-color, #e5dfd5);
 }
 
 .heroTitle {
-  font-size: 2.5rem;
+  font-size: 2.75rem;
   font-weight: 700;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   margin-bottom: 1rem;
   line-height: 1.2;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .heroDescription {
   font-size: 1.125rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   max-width: 600px;
   margin: 0 auto;
+  line-height: 1.6;
 }
 
 .locationBanner {
@@ -28,16 +33,18 @@
   align-items: center;
   gap: 0.75rem;
   padding: 1rem 1.5rem;
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-  border-radius: 8px;
+  background: rgba(45, 125, 125, 0.1);
+  border: 1px solid rgba(45, 125, 125, 0.3);
+  border-radius: 12px;
   margin-bottom: 2rem;
   font-size: 0.9375rem;
-  color: #1e40af;
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 500;
 }
 
 .locationIcon {
   font-size: 1.25rem;
+  color: var(--accent-teal, #2d7d7d);
 }
 
 .results {
@@ -50,25 +57,42 @@
 
 .sectionHeader h2 {
   font-size: 1.875rem;
-  font-weight: 600;
+  font-weight: 700;
   margin-bottom: 0.5rem;
+  color: var(--text-primary, #1a1612);
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .sectionDescription {
   font-size: 1rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   margin: 0;
+  line-height: 1.6;
 }
 
 .resultsHeader {
   margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid var(--border-color, #e5dfd5);
 }
 
 .resultsHeader h2 {
   font-size: 1.5rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.resultsHeader h2::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 1.25em;
+  background: var(--accent-coral, #e07256);
+  border-radius: 2px;
 }
 
 .grid {
@@ -78,10 +102,34 @@
   margin-bottom: 2rem;
 }
 
+.emptyState {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
+}
+
+.emptyStateTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.5rem;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+}
+
+.emptyStateDescription {
+  font-size: 1rem;
+  color: var(--text-secondary, #5c564d);
+  max-width: 400px;
+  margin: 0 auto;
+}
+
 @media (max-width: 768px) {
   .hero {
-    padding: 1rem 0;
+    padding: 2rem 1rem;
     margin-bottom: 2rem;
+    border-radius: 12px;
   }
 
   .heroTitle {
@@ -99,5 +147,10 @@
   .locationBanner {
     padding: 0.875rem 1rem;
     font-size: 0.875rem;
+    border-radius: 8px;
+  }
+
+  .emptyState {
+    padding: 3rem 1.5rem;
   }
 }
diff --git a/nextjs-app/components/Navigation.module.css b/nextjs-app/components/Navigation.module.css
index d3af6fc..e5ac220 100644
--- a/nextjs-app/components/Navigation.module.css
+++ b/nextjs-app/components/Navigation.module.css
@@ -2,9 +2,9 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  background: var(--bg-card, white);
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
 }
 
 .container {
@@ -22,22 +22,26 @@
   align-items: center;
   gap: 0.75rem;
   text-decoration: none;
-  color: #1f2937;
+  color: var(--text-primary, #1a1612);
   font-size: 1.25rem;
   font-weight: 700;
   transition: color 0.2s ease;
 }
 
 .logo:hover {
-  color: #3b82f6;
+  color: var(--accent-coral, #e07256);
 }
 
 .logoIcon {
-  font-size: 1.5rem;
+  width: 36px;
+  height: 36px;
+  color: var(--accent-coral, #e07256);
 }
 
 .logoText {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
   font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
 .nav {
@@ -53,20 +57,20 @@
   padding: 0.625rem 1rem;
   font-size: 0.9375rem;
   font-weight: 500;
-  color: #6b7280;
+  color: var(--text-secondary, #5c564d);
   text-decoration: none;
   border-radius: 6px;
   transition: all 0.2s ease;
 }
 
 .navLink:hover {
-  color: #1f2937;
-  background: #f3f4f6;
+  color: var(--text-primary, #1a1612);
+  background: var(--bg-secondary, #f3ede4);
 }
 
 .navLink.active {
-  color: #3b82f6;
-  background: #eff6ff;
+  color: var(--accent-coral, #e07256);
+  background: rgba(224, 114, 86, 0.1);
 }
 
 .badge {
@@ -79,7 +83,7 @@
   font-size: 0.75rem;
   font-weight: 600;
   color: white;
-  background: #3b82f6;
+  background: var(--accent-coral, #e07256);
   border-radius: 9999px;
 }
 
diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index 5574b22..66eb8cf 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/nextjs-app/components/RankingsView.module.css
@@ -8,29 +8,31 @@
 }
 
 .header h1 {
-  font-size: 2rem;
+  font-size: 2.25rem;
   font-weight: 700;
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   margin-bottom: 0.5rem;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .subtitle {
   font-size: 1rem;
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
   margin: 0;
+  line-height: 1.6;
 }
 
 /* Filters */
 .filters {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 2rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .filterGroup {
@@ -43,8 +45,8 @@
 
 .filterLabel {
   font-size: 0.9375rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
   white-space: nowrap;
 }
 
@@ -52,31 +54,31 @@
   flex: 1;
   padding: 0.625rem 1rem;
   font-size: 0.9375rem;
-  border: 1px solid var(--border-medium);
-  border-radius: var(--radius-md);
-  background: white;
-  color: var(--text-primary);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
+  background: var(--bg-card, white);
+  color: var(--text-primary, #1a1612);
   cursor: pointer;
-  transition: all var(--transition);
+  transition: all 0.2s ease;
 }
 
 .filterSelect:hover {
-  border-color: var(--primary);
+  border-color: var(--accent-coral, #e07256);
 }
 
 .filterSelect:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--accent-coral, #e07256);
+  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
 }
 
 /* Rankings Section */
 .rankingsSection {
-  background: white;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-lg);
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
   padding: 2rem;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
 }
 
 .tableWrapper {
@@ -90,16 +92,19 @@
 }
 
 .rankingsTable thead {
-  background: var(--bg-secondary);
+  background: var(--bg-secondary, #f3ede4);
 }
 
 .rankingsTable th {
   padding: 1rem;
   text-align: left;
   font-weight: 600;
-  color: var(--text-primary);
-  border-bottom: 2px solid var(--border-medium);
+  color: var(--text-primary, #1a1612);
+  border-bottom: 2px solid var(--border-color, #e5dfd5);
   white-space: nowrap;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
 }
 
 .rankHeader {
@@ -130,8 +135,8 @@
 
 .rankingsTable td {
   padding: 1rem;
-  border-bottom: 1px solid var(--border-light);
-  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  color: var(--text-secondary, #5c564d);
 }
 
 .rankingsTable tbody tr:last-child td {
@@ -139,28 +144,28 @@
 }
 
 .rankingsTable tbody tr:hover {
-  background: var(--bg-secondary);
+  background: var(--bg-secondary, #f3ede4);
 }
 
-/* Top 3 Highlighting */
+/* Top 3 Highlighting with Gold */
 .rank1 {
-  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%) !important;
+  background: linear-gradient(90deg, rgba(201, 162, 39, 0.15) 0%, transparent 100%) !important;
 }
 
 .rank2 {
-  background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 100%) !important;
+  background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 100%) !important;
 }
 
 .rank3 {
-  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 100%) !important;
+  background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, transparent 100%) !important;
 }
 
 .rankCell {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
 }
 
 .medal {
@@ -170,6 +175,7 @@
 
 .rankNumber {
   font-size: 1rem;
+  color: var(--accent-gold, #c9a227);
 }
 
 .schoolCell {
@@ -177,19 +183,18 @@
 }
 
 .schoolLink {
-  color: var(--text-primary);
+  color: var(--text-primary, #1a1612);
   text-decoration: none;
-  transition: color var(--transition);
+  transition: color 0.2s ease;
 }
 
 .schoolLink:hover {
-  color: var(--primary);
-  text-decoration: underline;
+  color: var(--accent-coral, #e07256);
 }
 
 .areaCell,
 .typeCell {
-  color: var(--text-secondary);
+  color: var(--text-secondary, #5c564d);
 }
 
 .valueCell {
@@ -198,7 +203,8 @@
 }
 
 .valueCell strong {
-  color: var(--text-primary);
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 700;
 }
 
 .actionCell {
@@ -208,30 +214,32 @@
 .addButton {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
-  transition: all var(--transition);
-  background: var(--primary);
+  transition: all 0.2s ease;
+  background: var(--accent-coral, #e07256);
   color: white;
 }
 
 .addButton:hover:not(:disabled) {
-  background: var(--primary-dark);
+  background: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
 }
 
 .addButton:disabled {
-  background: var(--secondary);
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-muted, #8a847a);
   cursor: not-allowed;
-  opacity: 0.6;
 }
 
 /* No Results */
 .noResults {
   text-align: center;
-  padding: 3rem 2rem;
-  color: var(--text-secondary);
+  padding: 4rem 2rem;
+  color: var(--text-secondary, #5c564d);
 }
 
 .noResults p {
@@ -242,12 +250,14 @@
 /* Responsive Design */
 @media (max-width: 768px) {
   .header h1 {
-    font-size: 1.5rem;
+    font-size: 1.75rem;
   }
 
   .filters {
     flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
+    border-radius: 8px;
   }
 
   .filterGroup {
@@ -258,6 +268,7 @@
 
   .rankingsSection {
     padding: 1rem;
+    border-radius: 8px;
   }
 
   .rankingsTable {
diff --git a/nextjs-app/components/SchoolCard.module.css b/nextjs-app/components/SchoolCard.module.css
index d958831..d498567 100644
--- a/nextjs-app/components/SchoolCard.module.css
+++ b/nextjs-app/components/SchoolCard.module.css
@@ -1,13 +1,15 @@
 .card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-left: 3px solid transparent;
+  border-radius: 12px;
   padding: 1.5rem;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
 }
 
 .card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-left-color: var(--accent-coral, #e07256);
+  box-shadow: var(--shadow-medium, 0 4px 20px rgba(26, 22, 18, 0.1));
   transform: translateY(-2px);
 }
 
@@ -24,25 +26,27 @@
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .title a {
-  color: #1f2937;
+  color: var(--text-primary, #1a1612);
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 .title a:hover {
-  color: #3b82f6;
-  text-decoration: underline;
+  color: var(--accent-coral, #e07256);
 }
 
 .distance {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--accent-teal, #2d7d7d);
   white-space: nowrap;
-  background: #f3f4f6;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  background: rgba(45, 125, 125, 0.1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-weight: 500;
 }
 
 .meta {
@@ -54,9 +58,9 @@
 
 .metaItem {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--text-secondary, #5c564d);
   padding: 0.25rem 0.75rem;
-  background: #f9fafb;
+  background: var(--bg-secondary, #f3ede4);
   border-radius: 4px;
 }
 
@@ -66,8 +70,9 @@
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background: #f9fafb;
-  border-radius: 6px;
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #e5dfd5);
 }
 
 .metric {
@@ -78,7 +83,7 @@
 
 .metricLabel {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--text-muted, #8a847a);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -91,7 +96,8 @@
 
 .metricValue strong {
   font-size: 1.125rem;
-  color: #1f2937;
+  color: var(--text-primary, #1a1612);
+  font-weight: 700;
 }
 
 .trend {
@@ -110,8 +116,8 @@
   flex: 1;
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 6px;
+  font-weight: 600;
+  border-radius: 8px;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -120,32 +126,37 @@
 }
 
 .btnSecondary {
-  background: white;
-  color: #374151;
-  border: 1px solid #d1d5db;
+  background: var(--bg-card, white);
+  color: var(--accent-teal, #2d7d7d);
+  border: 2px solid var(--accent-teal, #2d7d7d);
 }
 
 .btnSecondary:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
+  background: var(--accent-teal, #2d7d7d);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);
 }
 
 .btnPrimary {
-  background: #3b82f6;
+  background: var(--accent-coral, #e07256);
   color: white;
 }
 
 .btnPrimary:hover {
-  background: #2563eb;
+  background: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
 }
 
 .btnPrimary:active {
-  transform: scale(0.98);
+  transform: translateY(0);
 }
 
 @media (max-width: 640px) {
   .card {
     padding: 1rem;
+    border-radius: 8px;
   }
 
   .metrics {