diff --git a/nextjs-app/app/layout.tsx b/nextjs-app/app/layout.tsx
index 720647f..264b450 100644
--- a/nextjs-app/app/layout.tsx
+++ b/nextjs-app/app/layout.tsx
@@ -3,6 +3,7 @@ import { DM_Sans, Playfair_Display } from 'next/font/google';
import Script from 'next/script';
import { Navigation } from '@/components/Navigation';
import { Footer } from '@/components/Footer';
+import { ComparisonToast } from '@/components/ComparisonToast';
import { ComparisonProvider } from '@/context/ComparisonProvider';
import './globals.css';
@@ -70,6 +71,7 @@ export default function RootLayout({
{children}
+
diff --git a/nextjs-app/components/ComparisonToast.module.css b/nextjs-app/components/ComparisonToast.module.css
new file mode 100644
index 0000000..9aba0c7
--- /dev/null
+++ b/nextjs-app/components/ComparisonToast.module.css
@@ -0,0 +1,113 @@
+.toastContainer {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2000;
+ animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slideUp {
+ from {
+ transform: translate(-50%, 150%);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-50%, 0);
+ opacity: 1;
+ }
+}
+
+.toastContent {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 0.75rem 1rem 0.75rem 1.25rem;
+ background: var(--bg-accent, #1a1612);
+ color: var(--text-inverse, #faf7f2);
+ border-radius: 50px;
+ box-shadow: 0 10px 30px rgba(26, 22, 18, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toastInfo {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.toastBadge {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ background: var(--accent-coral, #e07256);
+ color: white;
+ border-radius: 50%;
+ font-weight: 700;
+ font-size: 0.9rem;
+}
+
+.toastText {
+ font-weight: 500;
+ font-size: 0.95rem;
+ white-space: nowrap;
+}
+
+.toastActions {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.btnClear {
+ background: transparent;
+ border: none;
+ color: rgba(250, 247, 242, 0.7);
+ font-size: 0.85rem;
+ font-weight: 500;
+ cursor: pointer;
+ padding: 0.5rem;
+ transition: color 0.2s ease;
+}
+
+.btnClear:hover {
+ color: var(--text-inverse, #faf7f2);
+}
+
+.btnCompare {
+ background: white;
+ color: var(--bg-accent, #1a1612);
+ padding: 0.6rem 1.25rem;
+ border-radius: 25px;
+ font-weight: 600;
+ font-size: 0.9rem;
+ text-decoration: none;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+ white-space: nowrap;
+}
+
+.btnCompare:hover {
+ transform: translateY(-1px);
+ background: var(--bg-secondary, #f3ede4);
+}
+
+@media (max-width: 640px) {
+ .toastContainer {
+ bottom: 1.5rem;
+ width: calc(100% - 3rem);
+ }
+
+ .toastContent {
+ flex-direction: column;
+ gap: 1rem;
+ border-radius: 16px;
+ padding: 1.25rem;
+ }
+
+ .toastActions {
+ width: 100%;
+ justify-content: space-between;
+ }
+}
\ No newline at end of file
diff --git a/nextjs-app/components/ComparisonToast.tsx b/nextjs-app/components/ComparisonToast.tsx
new file mode 100644
index 0000000..fe01b66
--- /dev/null
+++ b/nextjs-app/components/ComparisonToast.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useComparison } from '@/hooks/useComparison';
+import { usePathname } from 'next/navigation';
+import styles from './ComparisonToast.module.css';
+
+export function ComparisonToast() {
+ const { selectedSchools, clearAll } = useComparison();
+ const [mounted, setMounted] = useState(false);
+ const pathname = usePathname();
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ // Don't show toast on the compare page itself
+ if (pathname === '/compare') return null;
+
+ if (selectedSchools.length === 0) return null;
+
+ return (
+